/* Task planner — accessible stylesheet, WCAG 2.2 AA.
   Every colour pair below is contrast-checked. Colour never carries meaning
   on its own; chips always pair colour with a text label. */

:root {
  --page:#eef2f7;
  --surface:#ffffff;
  --ink:#141f2e;      /* primary text, 16.6:1 on white */
  --ink-2:#37455a;    /* secondary text, 9.7:1 on white */
  --line:#c3cedb;
  --brand:#0b4f9e;
  --brand-ink:#083c78; /* link text, 10.9:1 on white */
  --brand-bg:#e6eef8;
  --fixed:#a5352a;    --fixed-bg:#fbe9e7;
  --movable:#0a6553;  --movable-bg:#e0f0ec;
  --warn-bg:#fdf0d9;  --warn-ink:#6f4600;
  --ok-bg:#e2f2ec;    --ok-ink:#0a6553;
  --focus:#0b4f9e;

  --household:#1d4e6e; --household-bg:#e5eff5;
  --garden:#155f2f;    --garden-bg:#e4f2e7;
  --business:#553a80;  --business-bg:#efe9f7;
  --family:#8f3563;    --family-bg:#f8e8f0;
  --personal:#6f4600;  --personal-bg:#fdf0d9;
}

* { box-sizing:border-box; }

html, body { margin:0; }

body {
  background-color:var(--page);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
}

a { color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }

:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

.skip-link {
  position:absolute; left:8px; top:-48px;
  background-color:var(--surface); color:var(--brand-ink);
  padding:10px 14px; border-radius:8px; z-index:10;
}
.skip-link:focus { top:8px; }

/* Landmarks */
.site-header { background-color:var(--surface); border-bottom:1px solid var(--line); }
.site-header .bar {
  max-width:960px; margin:0 auto; padding:12px 16px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
}
.site-header .brand { font-size:18px; font-weight:700; color:var(--ink); text-decoration:none; }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.site-nav a {
  display:inline-flex; align-items:center; min-height:44px; padding:8px 12px;
  border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:600;
}
.site-nav a[aria-current="page"] { color:var(--brand-ink); background-color:var(--brand-bg); }

main { max-width:960px; margin:0 auto; padding:20px 16px 48px; }

h1 { font-size:24px; font-weight:700; line-height:1.3; margin:0 0 4px; }
h2 { font-size:18px; font-weight:700; line-height:1.3; margin:28px 0 8px; }
h3 { font-size:16px; font-weight:700; line-height:1.3; margin:0 0 4px; }
p  { margin:0 0 16px; max-width:72ch; }
.lead { color:var(--ink-2); }
.sub  { color:var(--ink-2); margin:0 0 12px; }

/* Cards */
.card {
  background-color:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; margin-bottom:14px;
}

/* Notices */
.notice { border-radius:12px; padding:12px 14px; margin-bottom:16px; border:1px solid var(--line); }
.notice-warn { background-color:var(--warn-bg); color:var(--warn-ink); border-color:#e6c98a; }
.notice-ok   { background-color:var(--ok-bg);   color:var(--ok-ink);   border-color:#a9d5c5; }
.notice p { margin:0; max-width:none; }

/* Chips — colour plus label, never colour alone */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; padding:4px 10px; border-radius:999px; min-height:28px;
}
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.chip-fixed    { background-color:var(--fixed-bg);    color:var(--fixed); }
.chip-movable  { background-color:var(--movable-bg);  color:var(--movable); }
.chip-household{ background-color:var(--household-bg); color:var(--household); }
.chip-garden   { background-color:var(--garden-bg);   color:var(--garden); }
.chip-business { background-color:var(--business-bg); color:var(--business); }
.chip-family   { background-color:var(--family-bg);   color:var(--family); }
.chip-personal { background-color:var(--personal-bg); color:var(--personal); }
.chip-source   { background-color:var(--brand-bg);    color:var(--brand-ink); }

/* Agenda */
.agenda { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.agenda li { display:flex; gap:12px; }
.agenda .time { flex:0 0 64px; font-size:14px; font-weight:600; color:var(--ink-2); padding-top:12px; }
.agenda .block {
  flex:1 1 auto; min-height:44px; border:1px solid var(--line);
  background-color:var(--surface); border-radius:12px; padding:10px 12px;
}
.agenda .block.event { border-left:5px solid var(--fixed); }
.agenda .block.task  { border-left:5px solid var(--movable); }
.agenda .block .title { font-weight:600; }
.agenda .block .meta  { font-size:14px; color:var(--ink-2); margin-top:2px; }

/* Task list with expandable options */
.tasklist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
details.task {
  background-color:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
details.task > summary {
  list-style:none; cursor:pointer; padding:12px 14px; min-height:44px;
  display:flex; flex-direction:column; gap:6px;
}
details.task > summary::-webkit-details-marker { display:none; }
summary .row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
summary .tname { font-weight:600; }
summary .toggle { font-size:14px; font-weight:600; color:var(--brand-ink); white-space:nowrap; }
details[open] .toggle .open  { display:none; }
details:not([open]) .toggle .close { display:none; }
.options { padding:4px 14px 14px; border-top:1px solid var(--line); }
.options .intro { font-size:14px; color:var(--ink-2); margin:10px 0 8px; }

/* Buttons and actions */
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:8px 16px; border-radius:10px;
  font-size:16px; font-weight:600; cursor:pointer; text-decoration:none;
  border:1px solid var(--brand); background-color:var(--surface); color:var(--brand-ink);
}
.btn-primary { background-color:var(--brand); border-color:var(--brand); color:#ffffff; }
.btn-danger  { border-color:var(--fixed); color:var(--fixed); }
.btn-full    { width:100%; }
form.inline { display:inline; margin:0; }

/* Detail list */
.detail { list-style:none; margin:0; padding:0; }
.detail li { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.detail li:first-child { border-top:none; }
.detail .dt { flex:0 0 120px; font-weight:600; color:var(--ink-2); }
.detail .dd { flex:1 1 auto; }

/* Forms */
form { max-width:640px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label, .flabel { font-weight:600; }
input[type="text"], input[type="url"], input[type="date"], input[type="number"],
select, textarea {
  font:inherit; font-size:16px; padding:10px 12px; min-height:44px;
  border:1px solid var(--ink-2); border-radius:10px;
  background-color:var(--surface); color:var(--ink); width:100%;
}
textarea { min-height:88px; resize:vertical; }
fieldset { border:1px solid var(--line); border-radius:12px; padding:10px 12px 12px; margin:0 0 16px; }
legend { font-weight:600; padding:0 6px; }
.choice { display:flex; align-items:center; gap:10px; min-height:44px; }
.choice input { width:20px; height:20px; }
.choice label { font-weight:400; }
.hint { font-size:14px; color:var(--ink-2); margin:0 0 6px; }
.error { color:var(--fixed); font-weight:600; }
.error-summary { background-color:var(--fixed-bg); border:1px solid #e0a59d; }
.error-summary a { color:var(--fixed); }

@media (max-width:400px) {
  .actions .btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}