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

   White page, pastel accents. Colour appears in three places only: the pastel
   fills on project cards, the person avatars, and the due-date chips. Nothing
   is outlined or edged in colour.
   --------------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --ink: #1e211f;
  --ink-2: #4d534f;
  --ink-3: #767c78;
  --line: #ededea;
  --line-strong: #dcdedb;

  --accent: #6257a4;
  --accent-soft: #efebfb;
  --accent-line: #e0d9f5;

  --peach: #fbe5dc;
  --mint: #dff3e9;
  --blue: #e6edfb;
  --lavender: #eee9fb;
  --amber: #fbeeda;
  --rose: #fae4ea;

  --overdue: #a24a3c;
  --overdue-soft: #fbe1db;
  --today: #8a5a15;
  --today-soft: #fbeeda;
  --soon: #2f6f58;
  --soon-soft: #dff3e9;
  --calm-soft: #f4f5f3;

  /* 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. */
  --lift-1: 0 1px 2px rgb(30 33 31 / 5%), 0 4px 12px -4px rgb(30 33 31 / 6%);
  --lift-2: 0 2px 4px rgb(30 33 31 / 6%), 0 12px 28px -8px rgb(30 33 31 / 12%);
  --lift-3: 0 4px 8px rgb(30 33 31 / 8%), 0 32px 64px -16px rgb(30 33 31 / 22%);
  --ring: 0 0 0 1px rgb(30 33 31 / 6%);
  --sidebar-bg: #fbfbfa;
  --accent-glow: rgb(98 87 164 / 18%);

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

:root[data-theme='dark'] {
  --bg: #131614;
  --surface: #131614;
  --surface-2: #1e2220;
  --ink: #edefec;
  --ink-2: #c4cac6;
  --ink-3: #939a96;
  --line: #262b28;
  --line-strong: #363c38;

  --accent: #a99cdf;
  --accent-soft: #272238;
  --accent-line: #3a3358;

  --peach: #3b2b25;
  --mint: #1f332b;
  --blue: #232c3d;
  --lavender: #2a2540;
  --amber: #362a19;
  --rose: #3a2530;

  --overdue: #ee8b7f;
  --overdue-soft: #3a2320;
  --today: #dda65e;
  --today-soft: #352819;
  --soon: #78c5a3;
  --soon-soft: #1c322a;
  --calm-soft: #1e2220;

  /* Shadows do almost nothing on a dark ground, so depth comes from a hairline
     ring instead. */
  --lift-1: 0 1px 2px rgb(0 0 0 / 30%);
  --lift-2: 0 2px 6px rgb(0 0 0 / 40%), 0 12px 28px -10px rgb(0 0 0 / 50%);
  --lift-3: 0 4px 10px rgb(0 0 0 / 45%), 0 32px 64px -16px rgb(0 0 0 / 65%);
  --ring: 0 0 0 1px rgb(255 255 255 / 8%);
  --sidebar-bg: #171a18;
  --accent-glow: rgb(169 156 223 / 18%);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    --bg: #131614;
    --surface: #131614;
    --surface-2: #1e2220;
    --ink: #edefec;
    --ink-2: #c4cac6;
    --ink-3: #939a96;
    --line: #262b28;
    --line-strong: #363c38;

    --accent: #a99cdf;
    --accent-soft: #272238;
    --accent-line: #3a3358;

    --peach: #3b2b25;
    --mint: #1f332b;
    --blue: #232c3d;
    --lavender: #2a2540;
    --amber: #362a19;
    --rose: #3a2530;

    --overdue: #ee8b7f;
    --overdue-soft: #3a2320;
    --today: #dda65e;
    --today-soft: #352819;
    --soon: #78c5a3;
    --soon-soft: #1c322a;
    --calm-soft: #1e2220;

    --lift-1: 0 1px 2px rgb(0 0 0 / 30%);
    --lift-2: 0 2px 6px rgb(0 0 0 / 40%), 0 12px 28px -10px rgb(0 0 0 / 50%);
    --lift-3: 0 4px 10px rgb(0 0 0 / 45%), 0 32px 64px -16px rgb(0 0 0 / 65%);
    --ring: 0 0 0 1px rgb(255 255 255 / 8%);
    --sidebar-bg: #171a18;
    --accent-glow: rgb(169 156 223 / 18%);

    color-scheme: dark;
  }
}

* { 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; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  border-radius: 8px; 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
   --------------------------------------------------------------------------- */

.auth-screen {
  min-height: 100svh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(42rem 30rem at 15% 0%, var(--mint), transparent 65%),
    radial-gradient(44rem 32rem at 90% 10%, var(--blue), transparent 68%),
    radial-gradient(38rem 30rem at 55% 105%, var(--peach), transparent 66%),
    var(--bg);
}
.auth-screen[hidden], .app-shell[hidden] { display: none; }
.auth-card { width: min(370px, 100%); display: flex; flex-direction: column; }
.auth-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 34px;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -.5px;
}
.auth-mark {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(150deg, var(--accent), color-mix(in oklab, var(--accent) 65%, #d9c9ff));
  box-shadow: var(--lift-1);
}
.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: 26px; }
.auth-card h1 { margin: 0 0 8px; font-size: 1.625rem; letter-spacing: -.9px; }
.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: 10px; justify-content: center; }
.auth-error:empty, .auth-note:empty { display: none; }
.auth-error, .auth-note {
  margin: -4px 0 12px; border-radius: 9px; 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: 20px 0 0; padding-top: 20px; 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 { margin-top: 18px; color: var(--ink-3); font-size: .75rem; line-height: 1.55; text-align: center; }

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

   A barely tinted rail and hairline divide navigation from working content
   without making the workspace feel boxed in.
   --------------------------------------------------------------------------- */

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 10;
  width: 236px; padding: 34px 16px 24px;
  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: 34px;
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -.6px;
}
.brand-mark {
  width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; background: linear-gradient(145deg, #7569ba, var(--accent));
  box-shadow: 0 5px 14px var(--accent-glow), inset 0 1px rgb(255 255 255 / 22%);
}
.sidebar nav { display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; border-radius: 9px; padding: 10px 12px;
  background: transparent; color: var(--ink-2); font-size: .875rem;
  text-align: left; transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--blue); color: var(--ink); font-weight: 600; }
.nav-count {
  min-width: 22px; padding: 2px 7px; 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); }
.nav-item.active .nav-count { background: var(--surface); color: #496ca9; }
.nav-item.active .nav-count[data-tone='overdue'] { background: var(--overdue-soft); color: var(--overdue); }

.people { margin-top: 30px; padding: 0 12px; }
.people > p { margin: 0 0 12px; color: var(--ink-3); font-size: .6875rem; font-weight: 700; letter-spacing: 1.2px; }
.person { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 10px; margin-bottom: 13px; }
.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: 16px 12px 0; }
.theme-toggle {
  margin-bottom: 14px; border: 0; border-radius: 8px; padding: 6px 8px; margin-left: -8px;
  background: transparent; color: var(--ink-3); font-size: .75rem; font-weight: 600;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink-2); }
.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: 9px; 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: var(--surface-2); }
.signed-in-identity > span { min-width: 0; display: grid; gap: 1px; }
.signed-in .avatar { width: 27px; height: 27px; }
.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; padding: 4px; background: transparent; color: var(--accent); font-size: .75rem; font-weight: 600; white-space: nowrap; }

.avatar {
  flex: 0 0 auto; width: 30px; height: 30px; 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 card. */
  box-shadow: inset 0 0 0 1px rgb(30 33 31 / 6%);
}
.avatar.coral { background: var(--peach); color: #8b5947; }
.avatar.teal { background: var(--mint); color: #2f6f58; }
.avatar.blue { background: var(--blue); color: #3f5a8d; }
.avatar.lavender { background: var(--lavender); color: var(--accent); }
.avatar.amber { background: var(--amber); color: #8a5a15; }
.avatar.rose { background: var(--rose); color: #93445e; }

/* 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-color: var(--lavender); --person-ink: var(--accent); }
.task.assignee-coral { --person-color: var(--peach); --person-ink: #b36a50; }
.task.assignee-teal { --person-color: var(--mint); --person-ink: #4d9277; }
.task.assignee-blue { --person-color: var(--blue); --person-ink: #6384be; }
.task.assignee-lavender { --person-color: var(--lavender); --person-ink: var(--accent); }
.task.assignee-amber { --person-color: var(--amber); --person-ink: #b27b2d; }
.task.assignee-rose { --person-color: var(--rose); --person-ink: #b46079; }
.task .complete { border-color: color-mix(in oklab, var(--person-ink) 48%, var(--line-strong)); }

/* The tinted avatar backgrounds go dark, so the initials have to go light. */
:root[data-theme='dark'] .avatar { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .avatar { color: var(--ink); }
}

main { min-height: 100vh; margin-left: 236px; padding: 34px 44px 96px 34px; max-width: 1480px; }

.banner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 24px; border-radius: 12px; padding: 15px 18px; background: var(--amber);
}
.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: 4px; 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: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.topbar h1 { margin: 0 0 5px; font-size: 1.875rem; font-weight: 700; letter-spacing: -1px; }
.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: 9px; padding: 10px 17px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 86%, white), var(--accent)); color: #fff; font-size: .875rem; font-weight: 600;
  box-shadow: var(--lift-1);
  transition: filter .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.primary:hover { filter: brightness(1.06); box-shadow: var(--lift-2), 0 8px 22px var(--accent-glow); }
:root[data-theme='dark'] .primary { color: #16121f; }
.danger { border: 0; border-radius: 9px; padding: 10px 16px; background: var(--overdue); color: #fff; font-size: .875rem; font-weight: 600; }
:root[data-theme='dark'] .danger { color: #2a1512; }
kbd {
  border: 1px solid var(--line-strong); border-radius: 4px; 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

   Three pastel counters that set the task filter and jump to the list.
   --------------------------------------------------------------------------- */

.attention-band { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.attention-band:empty { display: none; }
.attn {
  display: flex; align-items: baseline; gap: 10px;
  border: 0; border-radius: 12px; padding: 15px 22px;
  background: var(--calm-soft); color: var(--ink-2); text-align: left;
  transition: filter .15s;
}
.attn { transition: filter .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
@media (hover: hover) {
  .attn:hover { filter: brightness(.98); transform: translateY(-1px); box-shadow: var(--lift-1); }
}
.attn strong { font-size: 1.375rem; font-weight: 700; letter-spacing: -.7px; line-height: 1; }
.attn span { font-size: .8125rem; }
/* The overdue counter is the one that matters, so it gets more room. */
.attn[data-tone='overdue'] { padding-right: 32px; background: var(--peach); color: var(--overdue); }
.attn[data-tone='today'] { background: var(--amber); color: var(--today); }
.attn[data-tone='soon'], .attn[data-tone='clear'] { background: var(--mint); color: var(--soon); }

/* ---------------------------------------------------------------------------
   Sections

   No boxes. Structure comes from headings, whitespace and hairline dividers.
   --------------------------------------------------------------------------- */

.projects-card { margin-top: 46px; }
/* Task rows reflow against the section holding them rather than the viewport,
   so a narrow team column stacks while the full-width list stays on one line. */
.card { min-width: 0; container-type: inline-size; }
.card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.card-heading h2, .team-heading h2 { margin: 0 0 3px; font-size: 1.0625rem; letter-spacing: -.35px; }
.team-heading p { margin: 0; color: var(--ink-3); font-size: .8125rem; }
.link { border: 0; padding: 4px; background: transparent; color: var(--accent); font-size: .8125rem; font-weight: 600; white-space: nowrap; }

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

   The due chip is the only colour in a row. Priority uses weight and a glyph so
   it does not compete with the deadline colours.
   --------------------------------------------------------------------------- */

.task-list, .recurring-board { display: grid; border-top: 1px solid var(--line); }
.task-list.grouped { border-top: 0; }

.group-label {
  margin: 26px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: .6875rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
}
.group-label:first-child { margin-top: 0; }
.group-label span { margin-left: 8px; font-weight: 500; letter-spacing: 0; }

.task { transition: background .16s var(--ease); }
@media (hover: hover) {
  .task:hover { background: color-mix(in oklab, var(--surface-2) 55%, transparent); }
}
.task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 6px 14px;
  min-height: 62px; padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.task:last-child { border-bottom: 0; }
.task-tags { display: flex; align-items: center; gap: 14px; }
.task.done { opacity: .6; }

.complete {
  width: 21px; height: 21px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: transparent; font-size: .75rem; line-height: 1;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.complete:hover { border-color: var(--soon); transform: scale(1.08); }
.task.done .complete {
  border-color: #8fc4ae; background: #8fc4ae; color: #fff;
  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: 4px; }
.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: 2px 0 0; 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 { 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 11px; 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 { 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; }

.task-tools { display: flex; align-items: center; gap: 2px; }

/* 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. */
@media (hover: hover) {
  .task-tools > * { opacity: 0; transition: opacity .12s; }
  .task-tools > .notes-button.has-notes { opacity: 1; }
  .task:hover .task-tools > *,
  .task:focus-within .task-tools > * { opacity: 1; }
}
.notes-button, .edit {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-radius: 7px; padding: 5px 8px;
  background: transparent; color: var(--ink-3); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.notes-button:hover, .edit:hover { background: var(--surface-2); color: var(--accent); }
.notes-button b { display: inline-grid; min-width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--mint); color: var(--soon); font-size: .6875rem; }
.delete { border: 0; border-radius: 7px; padding: 3px 8px; background: transparent; color: var(--ink-3); font-size: 1.125rem; line-height: 1; }
.delete:hover { background: var(--peach); color: var(--overdue); }

@container (max-width: 600px) {
  .task { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .task-tags { grid-column: 2; grid-row: 2; }
  .task .avatar { grid-column: 3; grid-row: 1 / span 2; }
  .task-note { grid-column: 2 / -1; grid-row: 3; }
  .task-tools { grid-column: 2 / -1; grid-row: 4; justify-self: start; margin-left: -8px; }
}

/* ---------------------------------------------------------------------------
   Focus, projects, recurring
   --------------------------------------------------------------------------- */

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.project-grid.full { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.project-card {
  --ring: #7fb79e;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 152px; border: 0; border-radius: 16px; padding: 22px; background: var(--mint);
  box-shadow: inset 0 1px rgb(255 255 255 / 30%);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
@media (hover: hover) {
  .project-card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
}
.project-card.coral { --ring: #dd9d84; background: var(--peach); }
.project-card.blue { --ring: #8badea; background: var(--blue); }
.project-card.teal { --ring: #7fb79e; background: var(--mint); }
.project-card.lavender { --ring: #a495dc; background: var(--lavender); }
.project-card.amber { --ring: #d5a45d; background: var(--amber); }
.project-card.rose { --ring: #cf8299; background: var(--rose); }
.project-copy { min-width: 0; }
.project-card h3 { margin: 0 0 6px; font-size: .9375rem; letter-spacing: -.2px; }
.project-card p { min-height: 32px; margin: 0 0 14px; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }
.project-meta { display: grid; gap: 3px; color: var(--ink-2); font-size: .75rem; }
.project-meta .overdue { color: var(--overdue); font-weight: 600; }
.progress-ring {
  --size: 68px; flex: 0 0 var(--size); width: var(--size); height: var(--size);
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--progress) * 1%), rgb(255 255 255 / 52%) 0);
}
:root[data-theme='dark'] .progress-ring { background: conic-gradient(var(--ring) calc(var(--progress) * 1%), rgb(255 255 255 / 10%) 0); }
.progress-ring::before { content: ''; grid-area: 1 / 1; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); }
.progress-ring span { z-index: 1; grid-area: 1 / 1; font-size: .8125rem; font-weight: 700; }

.recurring-item {
  display: grid; grid-template-columns: 116px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px 16px;
  padding: 15px 4px; border-bottom: 1px solid var(--line);
}
/* Grouped like .task-tools, so Pause and the delete control travel together
   instead of wrapping to a row of their own on a narrow window. */
.recurring-tools { display: flex; align-items: center; gap: 2px; }
.recurring-item:last-child { border-bottom: 0; }
.recurring-item.paused { opacity: .5; }
.recurring-date, .recurring-copy { min-width: 0; display: grid; gap: 3px; }
.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: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters { display: flex; gap: 18px; }
.filter { border: 0; border-bottom: 2px solid transparent; padding: 6px 0; background: transparent; color: var(--ink-3); font-size: .875rem; }
.filter:hover { color: var(--ink); }
.filter.active { border-color: #7fa7e5; color: var(--ink); font-weight: 600; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field input { width: 232px; padding-right: 34px; }
.search-field kbd { position: absolute; right: 9px; pointer-events: none; }
.search-field input:focus + kbd, .search-field input:not(:placeholder-shown) + kbd { display: none; }
.toolbar select { width: auto; min-width: 150px; }

.list-summary {
  min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: -8px 0 14px;
}
.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: 6px 12px;
  background: var(--amber); color: var(--today); font-size: .75rem; font-weight: 600;
}
.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-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px 44px; align-items: start; }
.team-card { --team-tint: var(--lavender); border-radius: 16px; padding: 18px 20px 8px; background: color-mix(in oklab, var(--team-tint) 42%, var(--surface)); }
.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-bottom: 12px; }
.office-note { margin: 0 0 26px; color: var(--ink-3); font-size: .8125rem; }
.empty { padding: 34px 4px; color: var(--ink-3); font-size: .875rem; text-align: center; }
.empty b { display: block; margin-bottom: 5px; color: var(--ink-2); font-size: .9375rem; }

.skeleton { display: grid; gap: 1px; }
.skeleton-row { height: 62px; border-bottom: 1px solid var(--line); 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: 10px; padding: 13px 16px;
  background: var(--ink); color: var(--bg); 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 button { transition: background .15s var(--ease); }
.toast button:hover { background: rgb(255 255 255 / 30%); }
.toast.error { background: var(--overdue); color: #fff; }
.toast button { border: 0; border-radius: 6px; padding: 4px 10px; background: rgb(255 255 255 / 18%); color: inherit; font-size: .75rem; font-weight: 700; }

.fab { display: none; }

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

dialog {
  width: min(500px, calc(100% - 32px));
  border: 0; border-radius: 18px; 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); } }

:root[data-theme='dark'] dialog { border: 1px solid var(--line); }
dialog::backdrop {
  background: rgb(30 33 31 / 34%); backdrop-filter: blur(3px);
  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.1875rem; letter-spacing: -.4px; }
.dialog-heading p { margin: 4px 0 0; color: var(--ink-3); font-size: .8125rem; }
.icon { border: 0; padding: 0 4px; background: transparent; color: var(--ink-3); font-size: 1.5rem; line-height: 1; }
.icon:hover { color: var(--ink); }
#confirmMessage { margin: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.6; }

label { display: grid; gap: 6px; margin-bottom: 15px; color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 400;
}
input, select { height: 42px; padding: 0 11px; }
select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px; 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: 8px; 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: 10px; padding: 12px 13px; background: var(--surface-2); }
.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: 9px; 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.active { border-color: var(--accent-line); color: var(--ink); font-weight: 600; }
.notes-list {
  max-height: 290px; overflow-y: auto; margin: 0 0 18px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior: contain;
}
.notes-list::-webkit-scrollbar { width: 8px; }
.notes-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--line-strong); background-clip: content-box; }
.note { position: relative; padding: 15px 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: 13px; border: 0; border-radius: 6px; padding: 3px 7px; background: transparent; color: var(--ink-3); font-size: .6875rem; font-weight: 600; }
.delete-note:hover { background: var(--peach); 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: 12px; padding: 14px;
  background: var(--surface-2);
}
.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; }
.note-entry small { position: absolute; right: 10px; bottom: 8px; color: var(--ink-3); font-size: .6875rem; font-weight: 400; }
.note-entry textarea { padding-bottom: 26px; }

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

@media (max-width: 1180px) {
  .project-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  main { padding-right: 30px; }
}

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

@media (max-width: 780px) {
  .sidebar { position: static; width: auto; padding: 16px 14px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { margin-bottom: 14px; }
  .sidebar nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; }
  .people { display: none; }
  .sidebar-footer { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 0 12px; }
  .theme-toggle { margin: 0 0 0 -8px; }
  .signed-in { flex: 1; }

  main { margin: 0; padding: 8px 18px 96px; }
  .topbar { flex-wrap: wrap; align-items: flex-start; }
  .header-actions .primary { display: none; }
  .search-field input { width: 100%; }
  .toolbar-actions { width: 100%; }
  .toolbar select { flex: 1; min-width: 0; }
  .team-grid { gap: 20px; }

  .fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 30;
    display: grid; place-items: center; width: 54px; height: 54px;
    border: 0; border-radius: 50%; background: var(--accent); color: #fff;
    font-size: 1.75rem; line-height: 1; box-shadow: 0 12px 30px rgb(98 87 164 / 38%);
  }
  .toast { right: 16px; left: 16px; bottom: 86px; max-width: none; }
}

@media (max-width: 560px) {
  .topbar h1 { font-size: 1.5rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  /* 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: -8px; }
  .attn { flex: 1 1 100%; }
  .list-summary { align-items: flex-start; flex-direction: column; }
  .active-filters { justify-content: flex-start; }
}