/* ---------------------------------------------------------------------------
   Tokens

   Warm paper canvas, white panels, pastel accents. Colour appears in four
   places only: the pastel fills on project cards, the person avatars, the
   due-date chips, and the accent on anything you can press. Nothing is
   outlined or edged in colour for decoration.

   Light and dark are one definition per token via light-dark(), which resolves
   against the color-scheme stamped on :root. The three themes set that scheme
   and nothing else, so the palette below can never fall out of step with
   itself the way two hand-maintained copies did.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;
}
:root[data-theme='dark'] { color-scheme: dark; }
:root[data-theme='auto'] { color-scheme: light dark; }

:root {
  /* Three grounds, deepest to lightest: the rail recedes, the canvas holds
     the page, panels carry the work. Warm rather than the usual cool grey —
     it reads as paper on a desk, which is what this is. */
  --sidebar-bg: light-dark(#f1f0ec, #101210);
  --bg:         light-dark(#f8f7f4, #161917);
  --surface:    light-dark(#ffffff, #1c201e);
  --surface-2:  light-dark(#f4f3ef, #232825);

  --ink:   light-dark(#1b1e1c, #eef0ed);
  --ink-2: light-dark(#4b514d, #c2c8c4);
  --ink-3: light-dark(#767c78, #909793);

  --line:        light-dark(#e9e7e1, #292e2b);
  --line-strong: light-dark(#dbd9d1, #3a413d);

  --accent:      light-dark(#5f54a0, #a99cdf);
  --accent-soft: light-dark(#eeeafa, #272238);
  --accent-line: light-dark(#ddd5f2, #3a3358);
  --accent-glow: light-dark(rgb(95 84 160 / 20%), rgb(169 156 223 / 20%));
  /* Text sitting on a filled accent. */
  --on-accent: light-dark(#ffffff, #17131f);

  /* Person pastels, each with the ink that stays legible on it. */
  --peach:    light-dark(#fae3d8, #3b2a23);
  --on-peach: light-dark(#8b5643, #efbda9);
  --mint:     light-dark(#dcf1e6, #1e3229);
  --on-mint:  light-dark(#2f6f58, #86cead);
  --blue:     light-dark(#e4ecfa, #222b3c);
  --on-blue:  light-dark(#3e5a8d, #a3bdec);
  --lavender: light-dark(#ece7fa, #29243f);
  --on-lavender: light-dark(#5f54a0, #b9acec);
  --amber:    light-dark(#faecd6, #362817);
  --on-amber: light-dark(#8a5a15, #e0ab63);
  --rose:     light-dark(#f9e2e8, #391f2c);
  --on-rose:  light-dark(#93445e, #e5a3b8);

  /* Deadline states. Soft is the fill, the bare token is the ink on it. */
  --overdue:      light-dark(#a2483a, #ef8b7e);
  --overdue-soft: light-dark(#fadfd8, #3b2220);
  --today:        light-dark(#8a5a15, #ddA65e);
  --today-soft:   light-dark(#faecd6, #362817);
  --soon:         light-dark(#2f6f58, #79c6a4);
  --soon-soft:    light-dark(#dcf1e6, #1c322a);
  --calm-soft:    light-dark(#f1f0ec, #232825);
  --done:         light-dark(#69ab8d, #4e9a7c);

  /* One pair of curves for the whole interface. The browser default (ease)
     starts slow and ends slow, which reads as sluggish on small movements. */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Layered rather than single: one tight shadow for the edge, one wide and
     soft for the lift. A single large shadow reads as a drop shadow; two read
     as depth. Dark carries the same geometry at heavier alpha, since a soft
     shadow on a dark ground does almost nothing. */
  --sh-1: light-dark(rgb(28 30 28 / 6%),  rgb(0 0 0 / 38%));
  --sh-2: light-dark(rgb(28 30 28 / 10%), rgb(0 0 0 / 55%));
  --lift-1: 0 1px 2px var(--sh-1), 0 4px 12px -6px var(--sh-1);
  --lift-2: 0 2px 4px var(--sh-1), 0 14px 32px -12px var(--sh-2);
  --lift-3: 0 4px 10px var(--sh-2), 0 36px 72px -20px var(--sh-2);
  --ring: 0 0 0 1px light-dark(rgb(28 30 28 / 7%), rgb(255 255 255 / 9%));
  --hairline: light-dark(rgb(28 30 28 / 7%), rgb(255 255 255 / 9%));

  /* Radii carry meaning rather than one value everywhere: micro controls are
     nearly square, panels and dialogs are generously round. */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --rail: 244px;

  /* The task list is read as a table, so its metadata sits in fixed tracks
     that line up down the whole column instead of ragging against content. */
  --col-due: 108px;
  --col-status: 84px;
  --col-avatar: 30px;
  --col-tools: 104px;

  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  /* Dates, counts and percentages line up column to column. */
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }

/* Several elements below set `display`, which otherwise beats the user-agent
   rule for [hidden] and leaves banners and tabs stuck on screen. */
[hidden] { display: none !important; }

body {
  margin: 0; min-width: 320px; background: var(--bg); color: var(--ink);
  /* Inter at these weights renders heavy without it, particularly on Windows. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-soft); color: var(--accent); }

/* Headings break on meaning rather than leaving one word on the last line. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* A pressed control should move. Nothing here moves more than a hair. */
button:not(:disabled):active { transform: translateY(.5px) scale(.994); }
button { transition: transform .12s var(--ease); }
button:disabled { cursor: default; opacity: .55; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* One scrollbar treatment for the whole app rather than the notes list alone. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--line-strong); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* Icons are drawn once and referenced, so a stroke change lands everywhere. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  border-radius: var(--r-sm); padding: 10px 16px;
  background: var(--ink); color: var(--bg); font-size: .875rem; font-weight: 600;
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; }

:where(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------------------
   Sign in

   A card with an edge, on a ground with two blooms rather than three. The
   previous screen was type floating on a wash, which read as a page that had
   not finished loading.
   --------------------------------------------------------------------------- */

.auth-screen {
  min-height: 100svh; display: grid; align-content: center; justify-items: center;
  padding: 32px 24px 40px;
  background:
    radial-gradient(40rem 28rem at 8% -8%, color-mix(in oklab, var(--lavender) 88%, var(--accent)), transparent 58%),
    radial-gradient(36rem 28rem at 98% 106%, color-mix(in oklab, var(--peach) 92%, var(--on-peach)), transparent 56%),
    var(--bg);
}
.auth-screen[hidden], .app-shell[hidden] { display: none; }
.auth-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.4px;
}
.auth-card {
  width: min(384px, 100%); display: flex; flex-direction: column;
  border-radius: var(--r-xl); padding: 32px 32px 28px;
  background: var(--surface);
  box-shadow: var(--ring), var(--lift-3);
}
.auth-mark {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 78%, white), var(--accent));
  box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px rgb(255 255 255 / 26%);
}
.auth-mark::after, .brand-mark::after {
  content: ''; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
.auth-form-heading { margin-bottom: 24px; }
.auth-card h1 { margin: 0 0 7px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.7px; }
.auth-form-heading p { margin: 0; color: var(--ink-3); font-size: .875rem; line-height: 1.5; }
.auth-card form { padding: 0; }
.auth-submit { width: 100%; margin-top: 6px; justify-content: center; }
.auth-error:empty, .auth-note:empty { display: none; }
.auth-error, .auth-note {
  margin: -2px 0 14px; border-radius: var(--r-sm); padding: 10px 12px;
  font-size: .8125rem; line-height: 1.5;
}
.auth-error { background: var(--overdue-soft); color: var(--overdue); }
.auth-note { background: var(--soon-soft); color: var(--soon); }
.auth-hint { margin: -9px 0 15px; color: var(--ink-3); font-size: .75rem; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-link {
  border: 0; padding: 0; background: transparent;
  color: var(--accent); font-size: .75rem; font-weight: 600;
}
.auth-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.auth-switch {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: .8125rem; text-align: center;
}
.auth-switch .auth-link { font-size: .8125rem; margin-left: 4px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 64px; }
.password-field button {
  position: absolute; inset: 0 6px 0 auto;
  border: 0; background: transparent; color: var(--accent); font-size: .75rem; font-weight: 600;
}
.auth-help {
  width: min(384px, 100%); margin: 18px 0 0;
  color: var(--ink-3); font-size: .75rem; line-height: 1.6; text-align: center;
}

/* ---------------------------------------------------------------------------
   Shell

   The rail is the deepest ground and recedes; the canvas holds the page; white
   panels carry the work. Three levels, no borders doing the job of light.
   --------------------------------------------------------------------------- */

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 10;
  width: var(--rail); padding: 26px 14px 20px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--sidebar-bg);
}
.brand {
  display: flex; align-items: center; gap: 10px; padding: 0 10px; margin-bottom: 28px;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.4px;
}
.brand-mark {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 78%, white), var(--accent));
  box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px rgb(255 255 255 / 26%);
}
.sidebar nav { display: grid; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  border: 0; border-radius: var(--r-sm); padding: 8px 11px;
  background: transparent; color: var(--ink-2); font-size: .875rem;
  text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.nav-item > span:not(.nav-count) { flex: 1; min-width: 0; }
.nav-item .ico { color: var(--ink-3); transition: color .15s var(--ease); }
.nav-item:hover { background: color-mix(in oklab, var(--surface) 60%, transparent); color: var(--ink); }
.nav-item:hover .ico { color: var(--ink-2); }
/* Selected reads as a panel lifted off the rail, the same white the content
   area uses, rather than a block of highlighter. */
.nav-item.active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--ring), var(--lift-1);
}
.nav-item.active .ico { color: var(--accent); }
.nav-count {
  min-width: 21px; padding: 2px 6px; border-radius: 999px;
  background: var(--calm-soft); color: var(--ink-3);
  font-size: .6875rem; font-weight: 600; text-align: center;
}
.nav-count[data-tone='overdue'] { background: var(--overdue-soft); color: var(--overdue); }

.people { margin-top: 26px; padding: 0 11px; }
.people > p, .rail-label {
  margin: 0 0 12px; color: var(--ink-3);
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.person { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 10px; margin-bottom: 12px; }
.person span:not(.avatar) { font-size: .8125rem; font-weight: 500; }
.person i { grid-column: 2; color: var(--ink-3); font-size: .6875rem; font-style: normal; }

.sidebar-footer { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--line); }
.theme-toggle {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; border: 0; border-radius: var(--r-sm); padding: 7px 8px; width: 100%;
  background: transparent; color: var(--ink-3); font-size: .75rem; font-weight: 600;
}
.theme-toggle .ico { width: 15px; height: 15px; }
.theme-toggle:hover { background: color-mix(in oklab, var(--surface) 60%, transparent); color: var(--ink-2); }
/* One glyph per theme, chosen by the attribute the toggle itself stamps. */
.theme-ico { display: none; }
:root[data-theme='light'] .theme-ico-light,
:root[data-theme='dark'] .theme-ico-dark,
:root[data-theme='auto'] .theme-ico-auto { display: block; }

.signed-in { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.signed-in-identity {
  min-width: 0; flex: 1;
  display: flex; align-items: center; gap: 9px;
  border: 0; border-radius: var(--r-sm); padding: 6px 8px; margin-left: -8px;
  background: transparent; text-align: left;
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.signed-in-identity:hover { background: color-mix(in oklab, var(--surface) 60%, transparent); }
.signed-in-identity > span { min-width: 0; display: grid; gap: 1px; }
.signed-in .avatar { width: 28px; height: 28px; }
.signed-in strong { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.signed-in-identity span span { color: var(--ink-3); font-size: .6875rem; text-transform: capitalize; }
/* Scoped to the sign-out control: the identity button beside it is not a link
   and should not be painted like one. */
#signOut { border: 0; border-radius: var(--r-xs); padding: 5px 6px; background: transparent; color: var(--ink-3); font-size: .75rem; font-weight: 600; white-space: nowrap; }
#signOut:hover { background: color-mix(in oklab, var(--surface) 60%, transparent); color: var(--accent); }

.avatar {
  flex: 0 0 auto; width: var(--col-avatar); height: var(--col-avatar); border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: .6875rem; font-weight: 700; letter-spacing: .2px;
  /* A hairline keeps the pastel fills from dissolving into a white panel. */
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.avatar.coral    { background: var(--peach);    color: var(--on-peach); }
.avatar.teal     { background: var(--mint);     color: var(--on-mint); }
.avatar.blue     { background: var(--blue);     color: var(--on-blue); }
.avatar.lavender { background: var(--lavender); color: var(--on-lavender); }
.avatar.amber    { background: var(--amber);    color: var(--on-amber); }
.avatar.rose     { background: var(--rose);     color: var(--on-rose); }

/* Assignee colour is repeated at the point of work, not only in the roster.
   Michaila's coral and Brady's rose remain recognisable even while scanning a
   long list where the initials themselves are easy to miss. */
.task { --person-ink: var(--on-lavender); }
.task.assignee-coral    { --person-ink: var(--on-peach); }
.task.assignee-teal     { --person-ink: var(--on-mint); }
.task.assignee-blue     { --person-ink: var(--on-blue); }
.task.assignee-lavender { --person-ink: var(--on-lavender); }
.task.assignee-amber    { --person-ink: var(--on-amber); }
.task.assignee-rose     { --person-ink: var(--on-rose); }
.task .complete { border-color: color-mix(in oklab, var(--person-ink) 42%, var(--line-strong)); }

main {
  min-height: 100vh; margin-left: var(--rail);
  padding: 28px clamp(22px, 3.4vw, 52px) 110px;
}
/* Long enough for a table, short enough that a task name and its due date are
   still one glance apart on a wide monitor. */
.view, .topbar, .banner, .list-summary { max-width: 1220px; }

.banner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; border-radius: var(--r-md); padding: 14px 16px;
  background: var(--amber); box-shadow: var(--ring);
}
.banner strong { display: block; margin-bottom: 4px; font-size: .875rem; }
.banner p { margin: 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.55; }
.banner code { border-radius: var(--r-xs); padding: 1px 5px; background: rgb(0 0 0 / 7%); font-size: .8125rem; }
.banner button { border: 0; padding: 0 4px; background: transparent; color: var(--ink-2); font-size: 1.375rem; line-height: 1; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.topbar h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.9px; }
.topbar p { margin: 0; color: var(--ink-3); font-size: .875rem; }
.header-actions { display: flex; align-items: center; gap: 14px; }

/* Silent unless something is wrong. */
.sync-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .75rem; white-space: nowrap; }
.sync-status.saving { color: var(--ink-3); }
.sync-status.error { color: var(--overdue); }

.primary {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: var(--r-sm); padding: 10px 17px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 84%, white), var(--accent));
  color: var(--on-accent); font-size: .875rem; font-weight: 600;
  box-shadow: var(--lift-1), inset 0 1px rgb(255 255 255 / 16%);
  transition: filter .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.primary:hover { filter: brightness(1.05); box-shadow: var(--lift-2), 0 8px 22px var(--accent-glow); }
.danger { border: 0; border-radius: var(--r-sm); padding: 10px 16px; background: var(--overdue); color: light-dark(#fff, #2a1512); font-size: .875rem; font-weight: 600; }
kbd {
  border: 1px solid var(--line-strong); border-radius: var(--r-xs); padding: 1px 5px;
  color: var(--ink-3); font-family: inherit; font-size: .6875rem; font-weight: 600;
}

.view { display: none; }
.view.active { display: block; }

/* ---------------------------------------------------------------------------
   Attention band

   One instrument rather than three tiles. The segments share a panel and are
   divided by hairlines, so they read as one reading of the day taken from three
   angles instead of three unrelated statistics. Only overdue carries colour,
   and it takes more width than its neighbours, because it is the only one of
   the three that is asking for something.
   --------------------------------------------------------------------------- */

.attention-band {
  display: flex; flex-wrap: wrap; margin: 0 0 30px; width: fit-content; max-width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--ring), var(--lift-1);
}
.attention-band:empty { display: none; }
.attn {
  display: flex; align-items: baseline; gap: 10px;
  border: 0; border-left: 1px solid var(--line); padding: 16px 26px 16px 22px;
  background: transparent; color: var(--ink-2); text-align: left;
  transition: background .18s var(--ease);
}
.attn:first-child { border-left: 0; }
@media (hover: hover) {
  .attn:hover { background: var(--surface-2); }
}
.attn strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.attn span { font-size: .8125rem; }
/* The one segment that is asking for something gets the colour and the room. */
.attn[data-tone='overdue'] { padding-right: 34px; }
.attn[data-tone='overdue'] strong { color: var(--overdue); }
.attn[data-tone='overdue'] span { color: var(--ink-2); }
.attn[data-tone='today'] strong { color: var(--today); }
.attn[data-tone='soon'] strong, .attn[data-tone='clear'] strong { color: var(--soon); }

/* ---------------------------------------------------------------------------
   Panels and sections

   Work sits on white panels over the canvas. Structure inside a panel still
   comes from headings, whitespace and hairlines rather than more boxes.
   --------------------------------------------------------------------------- */

.card {
  min-width: 0; container-type: inline-size;
  border-radius: var(--r-lg); padding: 18px 20px 8px;
  background: var(--surface); box-shadow: var(--ring), var(--lift-1);
}
.card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.card-heading h2, .team-heading h2 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.3px; }
.team-heading p { margin: 2px 0 0; color: var(--ink-3); font-size: .8125rem; }
.link { border: 0; border-radius: var(--r-xs); padding: 4px 6px; margin-right: -6px; background: transparent; color: var(--accent); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.link:hover { background: var(--accent-soft); }

/* The overview is a working column and a reference rail, so it splits 62/38
   rather than in half: the list is where the day is spent, the projects are
   only checked. The attention band above deliberately ignores the split and
   spans both, because the count that matters should not sit in one column. */
.overview-grid {
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.projects-card .project-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* ---------------------------------------------------------------------------
   Task rows

   Read as a table. Every row puts its due date, status, assignee and controls
   in the same fixed tracks, so the eye runs down four straight columns instead
   of chasing metadata that lands wherever the task name stopped. The due chip
   is the only colour in a row; priority uses weight so it does not compete
   with the deadline colours.
   --------------------------------------------------------------------------- */

.task-list { display: grid; }
/* The schedule is a list like the others, so it gets the same panel. It has no
   .card wrapper of its own in the markup, hence its own rule. */
.recurring-board {
  display: grid; min-width: 0;
  border-radius: var(--r-lg); padding: 8px;
  background: var(--surface); box-shadow: var(--ring), var(--lift-1);
}

.group-label {
  display: flex; align-items: baseline; gap: 9px;
  margin: 22px 0 2px; padding: 0 12px 7px; border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.group-label:first-child { margin-top: 0; }
.group-label span { color: var(--ink-3); font-weight: 500; letter-spacing: 0; opacity: .75; }
.group-label[data-tone='overdue'] { color: var(--overdue); }
.group-label[data-tone='overdue'] span { color: var(--overdue); }

.task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--col-due) var(--col-status) var(--col-avatar);
  align-items: center; gap: 4px 16px;
  min-height: 56px; padding: 9px 12px;
  border-radius: var(--r-sm);
  transition: background .16s var(--ease);
}
.task:not(.compact) { grid-template-columns: auto minmax(0, 1fr) var(--col-due) var(--col-status) var(--col-avatar) var(--col-tools); }
/* Hairlines between rows rather than around them, drawn as a background so the
   rounded hover fill can sit over the top of one without clipping it. */
.task + .task, .task-list.grouped .task + .task { box-shadow: 0 1px 0 var(--line) inset; }
.task-list:not(.grouped) .task:first-child { box-shadow: none; }
@media (hover: hover) {
  .task:hover { background: var(--surface-2); box-shadow: none; }
  .task:hover + .task { box-shadow: none; }
}
/* The two chips share the parent's tracks, which is what keeps the due dates
   and the statuses on their own straight columns. */
.task-tags { grid-column: span 2; display: grid; grid-template-columns: subgrid; align-items: center; }
.task.done { opacity: .55; }

.complete {
  width: 20px; height: 20px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: transparent; font-size: .6875rem; line-height: 1;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.complete:hover { border-color: var(--done); transform: scale(1.1); }
.task.done .complete {
  border-color: var(--done); background: var(--done); color: light-dark(#fff, #10221b);
  animation: tick .32s var(--ease-out);
}
@keyframes tick {
  0% { transform: scale(.7); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.task-copy { min-width: 0; display: grid; gap: 3px; }
.task-copy strong { overflow: hidden; font-size: .875rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.task[data-priority='high'] .task-copy strong { font-weight: 700; }
.task.done .task-copy strong { color: var(--ink-3); text-decoration: line-through; }
.task-meta { overflow: hidden; color: var(--ink-3); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.task-note {
  grid-column: 2 / -1; margin: 4px 0 0; padding-left: 10px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-3); font-size: .75rem; line-height: 1.5;
}

/* Filled only when the date demands action today. A pill on every row made the
   colour decorative, so it stopped meaning anything. */
.due-chip { justify-self: start; color: var(--ink-3); font-size: .75rem; white-space: nowrap; }
.due-chip[data-state='overdue'],
.due-chip[data-state='today'] { border-radius: 999px; padding: 4px 10px; font-weight: 600; }
.due-chip[data-state='overdue'] { background: var(--overdue-soft); color: var(--overdue); }
.due-chip[data-state='today'] { background: var(--today-soft); color: var(--today); }

.status { justify-self: start; font-size: .75rem; white-space: nowrap; }
.status.todo { color: var(--ink-3); }
.status.doing { color: var(--soon); font-weight: 600; }
.status.waiting { color: var(--today); font-weight: 600; }

/* Row controls appear on hover, so ten rows read as ten tasks rather than
   thirty buttons. Space is reserved either way, so nothing shifts. Touch
   devices, which have no hover, keep them on permanently. */
.task-tools, .recurring-tools { display: flex; align-items: center; justify-self: end; gap: 1px; }
@media (hover: hover) {
  .task-tools > *, .recurring-tools > * { opacity: 0; transition: opacity .12s; }
  .task-tools > .notes-button.has-notes, .recurring-tools > .notes-button.has-notes { opacity: 1; }
  .task:hover .task-tools > *, .task:focus-within .task-tools > *,
  .recurring-item:hover .recurring-tools > *, .recurring-item:focus-within .recurring-tools > * { opacity: 1; }
}
/* Glyphs rather than words: three labelled buttons on every row cost more
   width than the metadata they sat beside, and the label was read once. */
.row-button {
  position: relative;
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--ink-3);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.row-button:hover { background: var(--accent-soft); color: var(--accent); }
.row-button.delete:hover { background: var(--overdue-soft); color: var(--overdue); }
.notes-button b {
  position: absolute; top: 1px; right: 0;
  display: grid; min-width: 14px; height: 14px; place-items: center; padding: 0 3px;
  border-radius: 999px; background: var(--mint); color: var(--on-mint);
  font-size: .5625rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface);
}
.task:hover .notes-button b { box-shadow: 0 0 0 2px var(--surface-2); }
/* Pause and Resume stay words: which state the schedule is in is the point. */
.recurring-toggle { border: 0; border-radius: var(--r-xs); padding: 5px 8px; background: transparent; color: var(--accent); font-size: .75rem; font-weight: 600; }
.recurring-toggle:hover { background: var(--accent-soft); }

/* A narrow column stacks the row instead of squeezing the tracks: the team
   panels and the phone layout both land here. Controls share the line with the
   chips rather than claiming a row of their own, which is what left a band of
   empty space under every task in a team panel. */
@container (max-width: 620px) {
  .task, .task:not(.compact) { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 7px; }
  .task-tags { grid-column: 2; grid-row: 2; display: flex; gap: 12px; }
  .task .avatar { grid-column: 3; grid-row: 1; }
  .task-tools { grid-column: 3; grid-row: 2; }
  .task-note { grid-column: 2 / -1; grid-row: 3; }
}

/* ---------------------------------------------------------------------------
   Projects and recurring
   --------------------------------------------------------------------------- */

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.project-card {
  --dial: var(--on-mint);
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 138px; border: 0; border-radius: var(--r-lg); padding: 20px;
  background:
    linear-gradient(165deg, rgb(255 255 255 / 22%), transparent 62%),
    var(--tint, var(--mint));
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px rgb(255 255 255 / 26%);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
@media (hover: hover) {
  .project-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--hairline), var(--lift-2); }
}
.project-card.coral { --dial: var(--on-peach); --tint: var(--peach); }
.project-card.blue { --dial: var(--on-blue); --tint: var(--blue); }
.project-card.teal { --dial: var(--on-mint); --tint: var(--mint); }
.project-card.lavender { --dial: var(--on-lavender); --tint: var(--lavender); }
.project-card.amber { --dial: var(--on-amber); --tint: var(--amber); }
.project-card.rose { --dial: var(--on-rose); --tint: var(--rose); }
.project-copy { min-width: 0; display: grid; gap: 5px; }
.project-card h3 { margin: 0; font-size: .9375rem; font-weight: 650; letter-spacing: -.2px; }
.project-card p { margin: 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }
.project-meta { display: grid; gap: 2px; margin-top: 5px; color: var(--ink-2); font-size: .75rem; }
.project-meta .overdue { color: var(--overdue); font-weight: 600; }
.project-card .row-button { position: absolute; right: 12px; bottom: 12px; color: var(--ink-2); }
.project-card .row-button:hover { background: rgb(255 255 255 / 45%); color: var(--ink); }
.project-card .notes-button b { box-shadow: 0 0 0 2px color-mix(in oklab, var(--surface) 30%, transparent); }
/* Thinner than it was: a dial reads as a measurement, a doughnut reads as a
   chart, and there is only one number in it. */
.progress-ring {
  --size: 58px; flex: 0 0 var(--size); width: var(--size); height: var(--size);
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--dial) calc(var(--progress) * 1%), light-dark(rgb(255 255 255 / 58%), rgb(255 255 255 / 12%)) 0);
}
.progress-ring::before { content: ''; grid-area: 1 / 1; width: 47px; height: 47px; border-radius: 50%; background: color-mix(in oklab, var(--surface) 82%, transparent); }
.progress-ring span { z-index: 1; grid-area: 1 / 1; font-size: .75rem; font-weight: 700; }
.project-card:has(.progress-ring) .row-button { right: auto; left: 14px; }

.recurring-item {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) var(--col-avatar) 148px;
  align-items: center; gap: 8px 16px;
  padding: 12px; border-radius: var(--r-sm);
  transition: background .16s var(--ease);
}
.recurring-item + .recurring-item { box-shadow: 0 1px 0 var(--line) inset; }
@media (hover: hover) {
  .recurring-item:hover { background: var(--surface-2); box-shadow: none; }
  .recurring-item:hover + .recurring-item { box-shadow: none; }
}
.recurring-item.paused { opacity: .5; }
.recurring-date, .recurring-copy { min-width: 0; display: grid; gap: 2px; }
.recurring-date strong, .recurring-copy strong { overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.recurring-copy strong { font-weight: 500; }
.recurring-date span, .recurring-copy span { color: var(--ink-3); font-size: .75rem; }

/* ---------------------------------------------------------------------------
   Toolbars
   --------------------------------------------------------------------------- */

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Three mutually exclusive states, so they share one well and one moving
   selection rather than three underlines that never touch. */
.filters {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline);
}
.filter {
  border: 0; border-radius: 7px; padding: 6px 15px;
  background: transparent; color: var(--ink-3); font-size: .8125rem;
  transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.filter:hover { color: var(--ink); }
.filter.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--lift-1); }
.search-field { position: relative; display: flex; align-items: center; }
.search-field input { width: 236px; padding-left: 36px; padding-right: 34px; }
.search-ico { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.search-field:focus-within .search-ico { color: var(--accent); }
.search-field kbd { position: absolute; right: 9px; pointer-events: none; }
/* The user-agent clear button is a blue cross on a warm palette. */
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 14px; height: 14px; cursor: pointer;
  background: currentColor; color: var(--ink-3);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type='search']::-webkit-search-cancel-button:hover { color: var(--ink); }
.search-field input:focus + kbd, .search-field input:not(:placeholder-shown) + kbd { display: none; }
.toolbar select { width: auto; min-width: 148px; }

.list-summary {
  min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 12px;
}
.result-count { margin: 0; color: var(--ink-3); font-size: .75rem; white-space: nowrap; }
.active-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 999px; padding: 5px 12px;
  background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.chip:hover { filter: brightness(.97); }
.chip span { font-size: .9375rem; line-height: 1; opacity: .7; }
.clear-filters {
  border: 0; padding: 6px 4px; background: transparent; color: var(--ink-3);
  font-size: .75rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.clear-filters:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Team

   One panel per person, tinted with their colour at low strength so the roster
   is scannable by hue without the panel shouting.
   --------------------------------------------------------------------------- */

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; align-items: start; }
.team-card {
  --team-tint: var(--lavender);
  padding: 16px 14px 6px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--team-tint) 66%, var(--surface)) 0,
    var(--surface) 118px
  );
}
.team-card.person-coral    { --team-tint: var(--peach); }
.team-card.person-teal     { --team-tint: var(--mint); }
.team-card.person-blue     { --team-tint: var(--blue); }
.team-card.person-lavender { --team-tint: var(--lavender); }
.team-card.person-amber    { --team-tint: var(--amber); }
.team-card.person-rose     { --team-tint: var(--rose); }
.team-heading { display: flex; align-items: center; gap: 11px; margin: 0 6px 8px; }
.office-note { margin: 0 0 26px; color: var(--ink-3); font-size: .8125rem; }

.empty { margin: 0; padding: 30px 4px 34px; color: var(--ink-3); font-size: .8125rem; text-align: center; }
.empty b { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: .9375rem; font-weight: 600; }

.skeleton { display: grid; gap: 1px; }
.skeleton-row { height: 56px; border-radius: var(--r-sm); background: linear-gradient(90deg, transparent, var(--surface-2), transparent); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -60% 0; } }

/* Content arrives rather than snapping in, once per view change. */
.view.active { animation: rise .3s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------
   Toast, FAB
   --------------------------------------------------------------------------- */

.toast {
  position: fixed; right: 26px; bottom: 26px; z-index: 40;
  display: flex; align-items: center; gap: 14px; max-width: 380px;
  border-radius: var(--r-md); padding: 13px 16px;
  background: light-dark(#1e211f, #eef0ed); color: light-dark(#f7f7f5, #161917); font-size: .8125rem;
  opacity: 0; pointer-events: none; transform: translateY(14px) scale(.97);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
  box-shadow: var(--lift-3);
}
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast.error { background: var(--overdue); color: light-dark(#fff, #2a1512); }
.toast button {
  border: 0; border-radius: var(--r-xs); padding: 4px 10px;
  background: light-dark(rgb(255 255 255 / 18%), rgb(0 0 0 / 12%)); color: inherit;
  font-size: .75rem; font-weight: 700;
  transition: background .15s var(--ease);
}
.toast button:hover { background: light-dark(rgb(255 255 255 / 32%), rgb(0 0 0 / 22%)); }

.fab { display: none; }

/* ---------------------------------------------------------------------------
   Dialogs and forms
   --------------------------------------------------------------------------- */

dialog {
  width: min(500px, calc(100% - 32px));
  border: 0; border-radius: var(--r-xl); padding: 0;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--ring), var(--lift-3);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), overlay .22s allow-discrete, display .22s allow-discrete;
}
/* Rises into place instead of appearing. @starting-style is what lets a
   display:none element animate in at all. */
dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
dialog:not([open]) { opacity: 0; transform: translateY(8px) scale(.98); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }

dialog::backdrop {
  background: light-dark(rgb(28 30 28 / 32%), rgb(6 8 7 / 58%)); backdrop-filter: blur(4px);
  transition: opacity .22s var(--ease-out), display .22s allow-discrete, overlay .22s allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
dialog:not([open])::backdrop { opacity: 0; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
form, .confirm-body { padding: 26px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dialog-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -.4px; }
.dialog-heading p { margin: 4px 0 0; color: var(--ink-3); font-size: .8125rem; }
.icon {
  display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -6px -4px 0;
  border: 0; border-radius: var(--r-xs); padding: 0;
  background: transparent; color: var(--ink-3); font-size: 1.375rem; line-height: 1;
}
.icon:hover { background: var(--surface-2); color: var(--ink); }
#confirmMessage { margin: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.6; }

/* Labels sit above their field at a weight that names it without competing
   with the value typed into it. */
label { display: grid; gap: 6px; margin-bottom: 15px; color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 400;
}
input, select { height: 42px; padding: 0 11px; }
select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%23767c78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center; background-size: 11px 8px; background-repeat: no-repeat;
}
textarea { min-height: 92px; padding: 10px 11px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input, select, textarea { transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* The token ring would otherwise sit on top of the focus glow. */
:where(input, select, textarea):focus-visible { outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-help { margin: -2px 0 16px; border-radius: var(--r-sm); padding: 11px 13px; background: var(--surface-2); color: var(--ink-3); font-size: .75rem; line-height: 1.55; }

/* Repeat controls sit in a tinted well so the dialog reads as "a task, and
   optionally a schedule" rather than as one long column of equal fields. */
.repeat-block { margin-bottom: 15px; border-radius: var(--r-md); padding: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.repeat-block .field-row { margin-top: 12px; align-items: end; }
.repeat-block label { margin: 0; }
/* background-color, not the shorthand: the shorthand would wipe the
   background-image that draws the select's chevron. */
.repeat-block select { background-color: var(--surface); }
.switch-row {
  display: flex; align-items: center; gap: 10px; margin: 0;
  color: var(--ink); font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.switch-row input {
  width: 17px; height: 17px; flex: 0 0 auto; margin: 0; padding: 0;
  accent-color: var(--accent); cursor: pointer;
}
.repeat-note { margin: 0 0 11px; color: var(--ink-3); font-size: .75rem; line-height: 1.45; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.actions > button:not(.primary):not(.danger) { border: 0; border-radius: var(--r-sm); padding: 10px 14px; background: transparent; color: var(--ink-2); font-size: .875rem; font-weight: 500; }
.actions > button:not(.primary):not(.danger):hover { background: var(--surface-2); }

.notes-dialog { width: min(580px, calc(100% - 32px)); }
.notes-tabs { display: flex; gap: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.notes-tab { border: 0; border-bottom: 2px solid transparent; padding: 8px 0; background: transparent; color: var(--ink-3); font-size: .8125rem; }
.notes-tab:hover { color: var(--ink-2); }
.notes-tab.active { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.notes-list {
  max-height: 290px; overflow-y: auto; margin: 0 0 18px;
  overscroll-behavior: contain;
}
.note { position: relative; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.note:last-child { border-bottom: 0; }
.note > div { display: flex; align-items: baseline; gap: 8px; }
.note strong { font-size: .8125rem; }
.note time { color: var(--ink-3); font-size: .6875rem; }
.note p { margin: 6px 60px 0 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.6; white-space: pre-wrap; }
.delete-note { position: absolute; right: 0; top: 12px; border: 0; border-radius: var(--r-xs); padding: 4px 7px; background: transparent; color: var(--ink-3); font-size: .6875rem; font-weight: 600; }
.delete-note:hover { background: var(--overdue-soft); color: var(--overdue); }
.history-item { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.history-item:last-child { border-bottom: 0; }
.history-item time { grid-column: 2; color: var(--ink-3); font-size: .6875rem; }
.history-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--accent-line); }
.history-item span { color: var(--ink-2); }
.history-item b { color: var(--ink); font-weight: 600; }

.account-identity {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px; border-radius: var(--r-md); padding: 14px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline);
}
.account-identity .avatar { width: 38px; height: 38px; font-size: .8125rem; }
.account-identity div { min-width: 0; display: grid; gap: 2px; }
.account-identity strong { font-size: .9375rem; }
.account-identity span:not(.avatar) { overflow: hidden; color: var(--ink-3); font-size: .8125rem; text-overflow: ellipsis; }

.note-entry { position: relative; }
/* Clear of the resize grip, which the counter used to sit under. */
.note-entry small { position: absolute; right: 26px; bottom: 8px; color: var(--ink-3); font-size: .6875rem; font-weight: 400; }
.note-entry textarea { padding-bottom: 26px; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* The rail stops earning its width before the working column does, so the
     overview drops to one column and the projects return to a row. */
  .overview-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .projects-card .project-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

@media (max-width: 900px) {
  .recurring-item { grid-template-columns: 96px minmax(0, 1fr) var(--col-avatar) 148px; column-gap: 12px; }
}

@media (max-width: 780px) {
  .sidebar { position: static; width: auto; padding: 14px 12px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { margin-bottom: 12px; }
  /* The row scrolls, and the fade at its right edge says so. */
  .sidebar nav {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; padding: 7px 12px; }
  .nav-item .ico { display: none; }
  .people { display: none; }
  .sidebar-footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 4px 0; }
  .theme-toggle { width: auto; margin: 0; }
  .theme-toggle span { display: none; }
  .signed-in { flex: 1; }

  main { margin: 0; padding: 16px 16px 104px; }
  .topbar { align-items: flex-start; margin-bottom: 20px; }
  .header-actions .primary { display: none; }
  .toolbar { gap: 12px; }
  .filters { width: 100%; }
  .filter { flex: 1; }
  .search-field { flex: 1 1 100%; }
  .search-field input { width: 100%; }
  .toolbar-actions { width: 100%; }
  .toolbar select { flex: 1; min-width: 0; }
  .card { padding: 14px 12px 6px; }
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 30;
    display: grid; place-items: center; width: 54px; height: 54px;
    border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent);
    font-size: 1.75rem; line-height: 1; box-shadow: 0 12px 30px var(--accent-glow), var(--lift-2);
  }
  .toast { right: 16px; left: 16px; bottom: 84px; max-width: none; }
}

@media (max-width: 560px) {
  .topbar h1 { font-size: 1.5rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  /* One horizontal instrument still, but scrolled rather than stacked: three
     full-width blocks turned a glance into a scroll. */
  .attention-band {
    width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .attention-band::-webkit-scrollbar { display: none; }
  .attn { flex: 1 0 auto; padding: 13px 18px; }
  .attn[data-tone='overdue'] { padding-right: 22px; }
  .attn strong { font-size: 1.3125rem; }
  /* Date and assignee on one line, the task under it, the controls last. */
  .recurring-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .recurring-date { grid-column: 1; grid-row: 1; }
  .recurring-item > .avatar { grid-column: 2; grid-row: 1; }
  .recurring-copy { grid-column: 1 / -1; grid-row: 2; }
  .recurring-tools { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-left: -6px; }
  .list-summary { align-items: flex-start; flex-direction: column; gap: 8px; }
  .active-filters { justify-content: flex-start; }
}