/* Metryc — design system v2
   White page, grey cards, no shadows. Cards are defined by fill contrast and a
   1px line rather than elevation. One warm accent, grotesque display type. */

:root{
  --page:#ffffff;             /* page background */
  --card:#f4f3f7;             /* card fill — darker than the page */
  --card-inner:#eceaf2;       /* inner rows, sub-cards */
  --line:rgba(0,0,0,0.07);    /* hairline borders replace shadows */
  --line-strong:rgba(0,0,0,0.12);

  --ink:#1c1b1f;              /* primary text */
  --ink-soft:#5b5761;         /* secondary text, labels */

  /* Status colours are fixed — a chip's meaning shouldn't shift with a theme. */
  --sky:#3e7cb1;  --sun:#ffb648;  --grape:#8b5fbf;
  --mint:#2fa878; --rose:#e85d75; --slate:#5b6b79;
  --sand:#c9a66b; --admin:#9aa3ab;

  --radius-lg:22px; --radius-md:16px; --radius-sm:12px;
  --shell:1600px;
  --gap:16px;                 /* the one spacing step, used everywhere */
}

/* ------------------------------------------------------------- themes --- */
/* A theme sets the UI accent and nothing else. Project colours are data and are
   never touched by it. `--coral` stays as an alias so existing rules keep
   working without a sweep through the whole sheet. */

:root,
:root[data-theme="playful"]{
  --accent:#ff4757; --accent-2:#7c4dff; --accent-soft:rgba(255,71,87,0.13);
}
:root[data-theme="candy"]{
  --accent:#ff5c8a; --accent-2:#9b5de5; --accent-soft:rgba(255,92,138,0.14);
}
:root[data-theme="jewel"]{
  --accent:#e5006d; --accent-2:#6d28d9; --accent-soft:rgba(229,0,109,0.12);
}
:root[data-theme="citrus"]{
  --accent:#f97316; --accent-2:#00b884; --accent-soft:rgba(249,115,22,0.14);
}
:root[data-theme="electric"]{
  --accent:#6c5ce7; --accent-2:#00cec9; --accent-soft:rgba(108,92,231,0.13);
}
:root[data-theme="ember"]{
  --accent:#ff6b4a; --accent-2:#3e7cb1; --accent-soft:rgba(255,107,74,0.13);
}

:root{ --coral:var(--accent); }

*,*::before,*::after{ box-sizing:border-box; }

/* A class that sets `display` outranks the browser's own [hidden] rule, so
   `el.hidden = true` silently does nothing on anything styled as a button.
   This puts the attribute back in charge. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--page);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

body.modal-open{ overflow:hidden; }

h1,h2,h3,.display{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}

h1{ font-size:28px; }
h2{ font-size:19px; }

.num{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.label{
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.muted{ color:var(--ink-soft); }
.small{ font-size:12.5px; }
a{ color:inherit; }

/* ------------------------------------------------------------- layout --- */

.app{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 clamp(16px,3vw,32px) 132px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  padding:14px 0 12px;
  background:var(--page);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.01em;
}

.brand-mark{
  width:30px; height:30px;
  border-radius:9px;
  background:var(--coral);
  color:#fff;
  display:grid;
  place-items:center;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-size:15px;
}

.greeting{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-size:15px;
}

/* Dashboard: 12 columns on desktop, one on mobile. */
.dash-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  align-items:start;
}

.col-8{ grid-column:span 8; }
.col-4{ grid-column:span 4; }
.col-12{ grid-column:span 12; }

/* Project cards reflow rather than squash. */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:14px;
}

/* Denser variant for the dashboard snapshot, which sits in 8 of 12 columns. */
.card-grid-tight{ grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); }

/* One spacing step everywhere: the gap between stacked cards matches the gap
   between columns, so nothing looks arbitrarily further apart than anything else. */
.page-head{ margin:18px 0 var(--gap); gap:12px; }
.stack-cards{ display:flex; flex-direction:column; gap:var(--gap); }

/* --------------------------------------------------------------- nav ---- */

.nav{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
}

.nav button{
  appearance:none;
  border:0;
  background:transparent;
  border-radius:999px;
  padding:9px 18px;
  font:inherit;
  font-weight:600;
  font-size:13px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}

.nav button .nav-icon{ display:none; }
.nav button[aria-current="page"]{ background:var(--ink); color:#fff; }

/* Tom / Jez switcher — same pill language as the nav. */
/* The v1 Tom/Jez toggle is gone — the session decides. What is left is a
   statement of who is signed in, with the role under it, because the two roles
   see different numbers and it should never be ambiguous which you are. */
.who-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  padding:5px 12px;
  border-radius:var(--radius-sm);
  background:var(--card);
  border:1px solid var(--line);
  line-height:1.15;
  white-space:nowrap;
}

.who-chip .who-name{ font-size:12.5px; font-weight:600; color:var(--ink); }

.who-chip .who-role{
  font-size:10px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* On a phone the header is tight and the role is already implied by which
   dashboard you are looking at, so only the name survives. */
@media (max-width:560px){
  .who-chip{ padding:4px 9px; }
  .who-chip .who-role{ display:none; }
}

/* ------------------------------------------------------------- cards ---- */

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:var(--gap);
}

.dash-grid .card,
.card-grid .card,
.stack > .card{ margin-bottom:0; }

.card-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.card-title{
  font-size:16px;
  font-weight:700;
  font-family:'Space Grotesk',system-ui,sans-serif;
}

.row{
  background:var(--card-inner);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:13px 15px;
  margin-bottom:9px;
}

.stack{ display:flex; flex-direction:column; gap:9px; }
.flex{ display:flex; align-items:center; gap:10px; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; min-width:0; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Project card — a whole status report, clickable. */
.pcard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px;
  cursor:pointer;
  text-align:left;
  width:100%;
  font:inherit;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .2s ease, background .2s ease;
}

.pcard:hover{ filter:brightness(0.975); }

/* Finished books: grey, dimmed, out of the way. */
.pcard-done{
  background:var(--card);
  border-color:var(--line);
  opacity:.62;
  filter:grayscale(1);
}
.pcard-done:hover{ opacity:.85; filter:grayscale(0.6); }

.card-grid .pcard{ margin:0; }

.pcard-title{
  font-weight:700;
  font-size:15px;
  font-family:'Space Grotesk',system-ui,sans-serif;
}

.meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
  gap:10px 14px;
}

.meta dt{ font-size:11px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.05em; }
.meta dd{ margin:2px 0 0; font-weight:600; font-size:13px; }

/* ----------------------------------------------------------- controls --- */

label.field{ display:block; margin-bottom:14px; }
label.field > .label{ display:block; margin-bottom:6px; }

input[type=text],input[type=password],input[type=date],input[type=number],
input[type=url],textarea,select{
  width:100%;
  font:inherit;
  color:var(--ink);
  padding:11px 13px;
  min-height:44px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}

textarea{ resize:vertical; min-height:76px; }

input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,
a:focus-visible{
  outline:none;
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(255,107,74,0.22);
}

.btn{
  appearance:none;
  font:inherit;
  font-weight:600;
  border-radius:999px;
  padding:11px 20px;
  min-height:44px;
  border:1px solid transparent;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  transition:opacity .2s ease, background .2s ease, border-color .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
}

.btn:hover{ opacity:.88; }
.btn:active{ transform:scale(0.985); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.btn-secondary{
  background:#fff;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-secondary:hover{ background:var(--card-inner); opacity:1; }

.btn-coral{ background:var(--coral); }

.btn-sm{ padding:8px 14px; min-height:38px; font-size:12.5px; }

.btn-danger{
  background:transparent;
  border-color:transparent;
  color:var(--rose);
  padding:8px 12px;
  min-height:38px;
  font-size:12.5px;
}
.btn-danger:hover{ background:rgba(232,93,117,0.1); opacity:1; }

.btn-icon{ width:38px; height:38px; min-height:38px; padding:0; border-radius:999px; }

/* ------------------------------------------------------------ stepper --- */

.stepper{ display:flex; align-items:center; justify-content:center; gap:18px; }

.stepper button{
  appearance:none;
  position:relative;
  width:26px; height:26px;
  flex:none;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  font-size:16px;
  line-height:1;
  font-weight:600;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.stepper button:hover{
  background:var(--coral);
  border-color:var(--coral);
  color:#fff;
  transform:scale(1.06);
}
.stepper button:active{ transform:scale(0.94); }

/* Keeps the tap target ≥44px without inflating the 26px visual. */
.stepper button::after{ content:''; position:absolute; width:44px; height:44px; }

.stepper-value{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:40px;
  line-height:1.1;
  color:var(--coral);
  text-align:center;
  border:0;
  background:transparent;
  width:130px;
  min-height:0;
  padding:2px 0;
  border-radius:var(--radius-sm);
}
.stepper-value:hover{ background:rgba(255,107,74,0.08); }

.stepper-quick{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:12px; }

.chip-quick{
  appearance:none;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  padding:7px 13px;
  min-height:36px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .2s ease;
}
.chip-quick:hover{ border-color:var(--coral); color:var(--coral); }
.chip-quick[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* -------------------------------------------------------------- chips --- */

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
}

.chip-queued   { background:var(--admin); color:#fff; }
.chip-active   { background:var(--mint);  color:#fff; }
.chip-in_review{ background:var(--sun);   color:#4a3208; }
.chip-revisions{ background:var(--coral); color:#fff; }
.chip-delivered{ background:var(--sky);   color:#fff; }
.chip-approved { background:#fff; color:var(--ink); border:1px solid var(--line-strong); }

.chip-neutral{ background:rgba(0,0,0,0.06); color:var(--ink-soft); }
.chip-unread { background:var(--coral); color:#fff; }
.chip-late   { background:rgba(255,182,72,0.22); color:#7a5405; }
.chip-ontime { background:rgba(47,168,120,0.16); color:#1d6b4b; }

.swatch{ width:10px; height:10px; flex:none; border-radius:3px; display:inline-block; }
.dot{ width:6px; height:6px; border-radius:999px; flex:none; display:inline-block; }

/* ----------------------------------------------------------- progress --- */

.progress{
  height:6px;
  border-radius:999px;
  background:rgba(0,0,0,0.08);
  overflow:hidden;
  display:flex;
}

.progress-fill{ height:100%; }
.progress-over{ height:100%; background:var(--sun); }

/* ------------------------------------------------------------ banners --- */

.banner{
  background:linear-gradient(135deg, rgba(255,107,74,0.14), rgba(255,182,72,0.14));
  border:1px solid rgba(255,107,74,0.22);
  border-radius:14px;
  padding:10px 13px;
  font-size:12.5px;
  display:flex;
  align-items:center;
  gap:10px;
}

.banner strong{ font-family:'Space Grotesk',system-ui,sans-serif; }

/* ----------------------------------------------------------- comments --- */

.comment{
  background:var(--card-inner);
  border:1px solid var(--line);
  border-radius:16px;
  padding:11px 14px;
  max-width:82%;
  margin-bottom:9px;
}
.comment-tom{ margin-right:auto; border-bottom-left-radius:5px; }
.comment-jez{ margin-left:auto; border-bottom-right-radius:5px; background:#fff; }
.comment-author{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  margin-bottom:3px;
}

/* ------------------------------------------------------- empty states --- */

.empty{ text-align:center; padding:24px 16px; color:var(--ink-soft); font-size:13.5px; }
.empty p{ margin:0 0 14px; }

/* ---------------------------------------------------------------- kpi --- */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
}

.kpi{
  background:var(--card-inner);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:13px 15px;
}

.kpi-value{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:26px;
  line-height:1.2;
}
.kpi-value.coral{ color:var(--coral); }

.divider{ height:1px; background:var(--line); margin:16px 0; border:0; }

#invoice-text{
  white-space:pre-wrap;
  font-family:'Space Grotesk',ui-monospace,monospace;
  font-size:12.5px;
  margin:0;
  background:#fff;
  padding:15px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  overflow-x:auto;
}
.pill-select{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------------------------------------------------------- calendar ---- */

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-head{ margin-bottom:6px; }

.cal-cell{
  appearance:none;
  font:inherit;
  aspect-ratio:1;
  min-height:40px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  padding:5px 3px 4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  transition:background .2s ease, border-color .2s ease;
}

.cal-cell:hover{ background:var(--card-inner); }
.cal-blank{ cursor:default; pointer-events:none; }

.cal-has{ background:#fff; color:var(--ink); border-color:var(--line); }
/* Today and the selected day are marked in neutral grey — a coral pill on a
   grid already full of colour was one signal too many. */
.cal-today{ border-color:var(--line-strong); font-weight:700; }
.cal-selected{ background:var(--card-inner); color:var(--ink); border-color:var(--ink); }

.cal-num{ font-size:12px; font-weight:600; line-height:1; }
.cal-dots{ display:flex; flex-wrap:wrap; gap:2px; justify-content:center;
  align-items:center; max-width:100%; min-height:6px; }
.cal-hours{ font-size:9.5px; font-weight:600; color:var(--ink-soft);
  line-height:1; margin-top:auto; }

/* Week rows: day numbers on top, project lifespan bars underneath. Kept tight —
   a month of concurrent books stacks up fast and the grid has to stay scannable. */
.cal-week{ margin-bottom:8px; }
.cal-weekdays{ margin-bottom:5px; }

.cal-cell{ aspect-ratio:auto; min-height:26px; padding:3px 2px; gap:1px; }

.cal-bars{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px 0;
  margin-top:4px;
}

/* The frame keeps its size whatever the month holds, so paging through to an
   empty August doesn't make the page jump. */
.cal-body{
  min-height:var(--cal-height,auto);
  max-height:var(--cal-height,none);
  overflow-y:auto;
}

/* A bar is one continuous run of a project across the days it was live. */
.cal-bar{
  appearance:none;
  border:0;
  height:15px;
  border-radius:999px;
  cursor:pointer;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:0 7px;
  min-width:0;
  opacity:.92;
  transition:opacity .2s ease;
}
.cal-bar:hover{ opacity:1; }

/* Squared ends mean "continues past this edge". */
.cal-bar.open-l{ border-top-left-radius:2px; border-bottom-left-radius:2px; }
.cal-bar.open-r{ border-top-right-radius:2px; border-bottom-right-radius:2px; }

/* Colour comes from the bar's own hue, darkened — no shadow needed now the
   fills are pale. */
.cal-bar-label{
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Sidebar variant: colour bands only, sized to sit alongside the project grid
   rather than tower over it. */
.cal-mini .cal-cell{ min-height:18px; padding:2px 1px; }
.cal-mini .cal-hours{ display:none; }
.cal-mini .cal-num{ font-size:10px; }
.cal-mini .cal-bar{ height:7px; padding:0; }
.cal-mini .cal-bars{ gap:2px 0; margin-top:3px; }
.cal-mini .cal-week{ margin-bottom:6px; }

/* -------------------------------------------------------------- modal --- */

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(28,27,31,0.34);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  animation:fade .2s ease both;
}

.modal-panel{
  background:var(--page);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:820px;
  max-height:90dvh;
  display:flex;
  flex-direction:column;
  animation:rise .25s ease both;
}

.modal-panel.modal-wide{ max-width:1100px; }
.modal-panel.modal-xwide{ max-width:1320px; }
.modal-panel.modal-narrow{ max-width:460px; }
/* The calendar wants every pixel — bars are only readable when wide. */
.modal-panel.modal-full{ max-width:none; width:100%; height:92dvh; }

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line);
  flex:none;
}

.modal-title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.01em;
}

.modal-body{ padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-body .card{ background:var(--card); }

.modal-tabs{ display:flex; gap:4px; padding:4px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); }
.modal-tabs button{
  appearance:none; border:0; background:transparent; border-radius:999px;
  padding:7px 15px; font:inherit; font-weight:600; font-size:12.5px;
  color:var(--ink-soft); cursor:pointer; transition:background .2s ease, color .2s ease;
}
.modal-tabs button[aria-selected="true"]{ background:var(--ink); color:#fff; }

/* ------------------------------------------------------------ updates --- */

.chip-on_track{ background:rgba(47,168,120,0.16); color:#1d6b4b; }
.chip-at_risk { background:rgba(255,182,72,0.24); color:#7a5405; }
.chip-blocked { background:rgba(232,93,117,0.16); color:#9c2740; }

/* Filing-cabinet tabs: one per post, newest first. Shaded by how it was going
   so the run of a project reads at a glance. */
.tabstrip{
  display:flex;
  gap:4px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
}

.tab{
  appearance:none;
  flex:none;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  padding:8px 13px 9px;
  background:var(--card-inner);
  cursor:pointer;
  font:inherit;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:86px;
  transition:background .2s ease, border-color .2s ease;
}

.tab:hover{ background:#fff; }

.tab-when{ font-size:12px; font-weight:700;
  font-family:'Space Grotesk',system-ui,sans-serif; }
.tab-meta{ font-size:10.5px; color:var(--ink-soft); font-weight:600; }

/* Four tints so update health — and notes — separate without shouting. */
.tab-on_track{ background:rgba(47,168,120,0.10); }
.tab-at_risk { background:rgba(255,182,72,0.16); }
.tab-blocked { background:rgba(232,93,117,0.11); }
.tab-note    { background:rgba(62,124,177,0.10); }

.tab[aria-selected="true"]{
  background:#fff;
  border-color:var(--line-strong);
  border-bottom:1px solid #fff;
  margin-bottom:-1px;
  position:relative;
  z-index:1;
}

.tabstrip-more{
  appearance:none;
  flex:none;
  align-self:flex-end;
  border:1px dashed var(--line-strong);
  border-radius:12px 12px 0 0;
  background:transparent;
  color:var(--ink-soft);
  font:inherit;
  font-size:11.5px;
  font-weight:600;
  padding:8px 12px;
  cursor:pointer;
}

.post{
  border:1px solid var(--line-strong);
  border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md);
  background:#fff;
  overflow:hidden;
}

.post-head{
  padding:12px 15px;
  border-bottom:1px solid var(--line);
  gap:10px;
}

/* Content left, section tabs right. */
.post-body{
  display:grid;
  grid-template-columns:1fr 200px;
  min-height:200px;
}

.post-content{
  padding:15px;
  overflow-wrap:anywhere;
  max-height:420px;
  overflow-y:auto;
}

.post-tabs{
  border-left:1px solid var(--line);
  background:var(--card-inner);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.post-tabs button{
  appearance:none;
  border:0;
  background:transparent;
  border-radius:var(--radius-sm);
  padding:9px 11px;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  text-align:left;
  transition:background .2s ease, color .2s ease;
}

.post-tabs button:hover{ background:#fff; }
.post-tabs button[aria-selected="true"]{ background:var(--ink); color:#fff; }

/* Section tabs can't sit in a side rail on a phone. */
@media (max-width:720px){
  .post-body{ grid-template-columns:1fr; }
  .post-tabs{
    order:-1;
    flex-direction:row;
    overflow-x:auto;
    border-left:0;
    border-bottom:1px solid var(--line);
    padding:8px;
  }
  .post-tabs button{ flex:none; white-space:nowrap; }
  .post-content{ max-height:none; }
}

/* Pasted prose keeps its own bullets and line breaks — it is not re-formatted. */
.prose{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:13px;
  line-height:1.55;
  margin-top:4px;
}

.linkrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--card-inner);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .2s ease;
}
.linkrow:hover{ border-color:var(--line-strong); }

details summary::-webkit-details-marker{ display:none; }
details summary{ list-style:none; }
details summary::before{ content:'▸ '; }
details[open] summary::before{ content:'▾ '; }

/* Project detail: spec left, entry history right, comments full width below. */
.detail-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width:820px){
  .detail-cols{ grid-template-columns:1fr; }
}

.scroll-list{ max-height:320px; overflow-y:auto; }

/* ------------------------------------------------------------- timer --- */

.timer-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 6px 5px 11px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--card);
  max-width:320px;
}

.timer-chip.is-running{
  border-color:var(--accent);
  background:var(--accent-soft);
}

.timer-title{ font-size:12.5px; font-weight:600; max-width:120px; }

.timer-time{
  font-size:13.5px;
  font-variant-numeric:tabular-nums;
  min-width:44px;
  text-align:right;
}

.timer-chip button{
  appearance:none;
  width:26px; height:26px;
  flex:none;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink);
  font-size:10px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s ease, color .2s ease;
}

.timer-chip button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* The pulse is the only thing on screen that says "this is still counting". */
.timer-chip.is-running .timer-time{ color:var(--accent); font-weight:700; }
.timer-chip.is-running::before{
  content:'';
  width:7px; height:7px;
  border-radius:999px;
  background:var(--accent);
  animation:timerpulse 1.6s ease-in-out infinite;
  flex:none;
}

@keyframes timerpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.timer-readout{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:44px;
  text-align:center;
  color:var(--accent);
  line-height:1.1;
}

@media (max-width:640px){
  .timer-title{ display:none; }
  .timer-chip{ max-width:none; }
}

/* ------------------------------------------------------- theme picker --- */

.theme-dot{
  width:13px; height:13px;
  border-radius:999px;
  display:inline-block;
  background:var(--accent);
  border:1px solid rgba(0,0,0,0.12);
}

.theme-row{
  appearance:none;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card-inner);
  font:inherit;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}

.theme-row:hover{ background:#fff; border-color:var(--line-strong); }
.theme-row.is-active{ border-color:var(--ink); background:#fff; }

.theme-chips{ display:flex; gap:4px; flex:none; }
.theme-chips span{ width:18px; height:18px; border-radius:6px; display:block; }

.theme-note{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:1px; }

.theme-tick{ opacity:0; font-weight:700; color:var(--accent); }
.theme-row.is-active .theme-tick{ opacity:1; }

/* ----------------------------------------------------------- palette ---- */

.kbd{
  font-family:'Space Grotesk',ui-monospace,monospace;
  font-size:11px;
  border:1px solid var(--line-strong);
  border-radius:5px;
  padding:1px 5px;
  color:var(--ink-soft);
  background:var(--card-inner);
}

#palette-input{
  font-size:16px;
  padding:13px 15px;
}

.palette-row{
  appearance:none;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:transparent;
  padding:9px 11px;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  text-align:left;
  transition:background .15s ease;
}

.palette-row:hover{ background:var(--card-inner); }
.palette-row.is-active{ background:var(--ink); color:#fff; }
.palette-row.is-active .label,
.palette-row.is-active .palette-snippet{ color:rgba(255,255,255,0.72); }

.palette-icon{
  width:20px;
  flex:none;
  display:inline-flex;
  justify-content:center;
  font-size:13px;
}

.palette-snippet{
  display:block;
  font-size:11.5px;
  font-weight:400;
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:1px;
}

/* ---------------------------------------------------------- activity ---- */

.activity-row{ background:var(--card-inner); border:1px solid var(--line); }
.activity-row:hover{ background:#fff; }

.activity-icon{
  width:26px; height:26px;
  flex:none;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:12px;
  color:var(--ink-soft);
}

/* ------------------------------------------------------------ toasts ---- */

#toasts{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  transform:translateX(-50%);
  z-index:95;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  pointer-events:none;
  width:max-content;
  max-width:calc(100vw - 32px);
}

.toast{
  background:var(--ink);
  color:#fff;
  padding:11px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  animation:fade .3s ease both;
}
.toast-error{ background:var(--rose); }

/* ------------------------------------------------------------ motion ---- */

@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) scale(0.99); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes coralflash{ 0%{ background:rgba(255,107,74,0.22); } 100%{ background:var(--card-inner); } }

.panel{ animation:fade .3s ease both; }
.flash{ animation:coralflash .9s ease-out; }

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

/* ------------------------------------------------------------ mobile ---- */

/* Base state must sit ABOVE the media query — an equal-specificity rule after
   it would win and silently hide the bar on mobile (this bit us in v1). */
.tabbar{ display:none; }

@media (max-width:1100px){
  .col-8{ grid-column:span 12; }
  .col-4{ grid-column:span 6; }
}

@media (max-width:760px){
  .col-4{ grid-column:span 12; }
}

@media (max-width:640px){
  .app{ padding:0 14px 120px; }
  h1{ font-size:24px; }
  .card{ padding:15px; border-radius:var(--radius-md); }
  .topbar .nav{ display:none; }
  .comment{ max-width:92%; }

  /* The header has to fit one row on a phone. Adding the identity chip pushed
     it to two, which costs a whole line of screen on every screen. The word
     "Search" and the ⌘K hint are the first to go — there is no ⌘ key on a
     phone, and the magnifier says the same thing in a quarter of the width. */
  #palette-open{ font-size:0; padding-left:11px; padding-right:11px; }
  #palette-open::before{ content:"⌕"; font-size:19px; line-height:1; }
  #palette-open .kbd{ display:none; }

  .modal-backdrop{ padding:0; align-items:flex-end; }
  .modal-panel{
    max-width:none;
    max-height:94dvh;
    border-radius:22px 22px 0 0;
    animation:sheet .28s ease both;
  }
  .modal-body{ padding:16px; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px); }

  .tabbar{
    display:block;
    position:fixed;
    left:12px; right:12px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
    z-index:60;
  }
  .tabbar .nav{ justify-content:space-between; padding:5px; background:var(--page);
    border-color:var(--line-strong); }
  .tabbar .nav button{
    flex:1;
    flex-direction:column;
    gap:3px;
    padding:8px 4px;
    font-size:10.5px;
    min-height:52px;
    justify-content:center;
  }
  .tabbar .nav button .nav-icon{ display:block; font-size:17px; line-height:1; }
  .tabbar .nav button.tab-log{ background:var(--coral); color:#fff; }
}

@keyframes sheet{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }

@media (max-width:400px){
  .cal-cell{ padding:4px 2px; }
  .cal-hours{ display:none; }
}


/* ------------------------------------------------------- suggestions --- */

.suggestion-done{ opacity:.55; }
.suggestion-done .grow{ text-decoration:line-through; }


/* ------------------------------------------------- the pool & claiming ---- */

.pool-section{ margin-bottom:26px; }

.pool-heading{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.pool-count{
  font-size:12px;
  font-weight:700;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  display:inline-grid;
  place-items:center;
}

/* A pool card is dashed because it is not yet anybody's. The moment it is
   claimed it becomes an ordinary solid project card, which is the whole
   state change made visible without a word of explanation. */
.pcard-pool{
  border-style:dashed;
  background:var(--card);
}

/* Waiting a week is the signal a push system can never give you, so it is the
   one thing on the card allowed to shout. */
.pcard-stale{
  border-style:solid;
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(232,93,117,.09);
}

.truncate-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ------------------------------------------------------------- view as ---- */

.who-button{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  cursor:pointer;
  line-height:1.15;
  color:inherit;
}

.who-button[disabled]{ cursor:default; }

.who-chip{ position:relative; }

/* While borrowed, the chip carries the accent so the header itself reads as
   "not you" even before the banner is noticed. */
.who-chip-acting{
  border-color:var(--coral);
  box-shadow:0 0 0 2px rgba(255,107,74,.16);
}

.who-chip-acting .who-role{ color:var(--coral); }

.who-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:80;
  min-width:210px;
  padding:6px;
  border-radius:var(--radius-md);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(60,50,110,.16);
}

.who-menu-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:4px 8px 6px;
}

.who-menu-item{
  appearance:none;
  border:0;
  background:transparent;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  min-height:44px;
}

.who-menu-item:hover{ background:var(--page); }
.who-menu-item[aria-current="true"]{ background:var(--ink); color:#fff; }
.who-menu-item[aria-current="true"] .who-menu-role{ color:rgba(255,255,255,.72); }

.who-menu-role{
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* An owner who forgets they are inside someone else's account misreads every
   number on the screen, so this is deliberately impossible to overlook and
   sits above the header rather than inside it. */
.acting-banner{
  position:sticky;
  top:0;
  z-index:90;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 16px;
  padding:9px 16px;
  background:var(--coral);
  color:#fff;
  font-size:13px;
  font-weight:500;
  text-align:center;
}

.acting-banner strong{ font-weight:700; }

.acting-banner .btn{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
  flex:0 0 auto;
}

@media (max-width:560px){
  .acting-banner{ font-size:12.5px; padding:8px 12px; }
}