/* Nicholle Ops, Phase C.1
   Locked design system: Ocean, Business, Punch, Smoky, Inter,
   pill buttons, 28px cards, 14px fields.
   Author: newkindaweb, https://newkindaweb.com */

:root {
  --ocean:    #092877;
  --business: #0171E4;
  --punch:    #ED4749;
  --smoky:    #E8E8E8;
  --paper:    #FFFFFF;

  --ink:       #141414;
  --ink-body:  #141414B3;
  --ink-muted: #1414149C;
  --ink-line:  #14141433;
  --ink-faint: #1414140F;

  --bg:        #F7F7F8;
  --surface:   #FFFFFF;
  --band:      #092877;
  --band-ink:  #FFFFFF;
  --band-ink-2:#FFFFFFB8;

  --ok:   #1E7A5A;
  --warn: #9A6400;
  --crit: #ED4749;
  --info: #0171E4;
  --link: #0B59B8;
  --idle: #14141480;

  /* Surfaces carry elevation instead of an outline. Two depths only: at
     rest, and raised. A third would stop meaning anything. */
  --lift:   0 1px 2px #1414140D, 0 6px 20px #1414140A;
  --lift-2: 0 2px 4px #14141412, 0 14px 32px #14141414;
  /* Filled wells replace field borders. */
  --field-bg:   #E8E8E8;
  --punch-wash: #ED47491A;
  --punch-edge: #ED474936;

  --r-card:  28px;
  --r-field: 14px;
  --r-pill:  980px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #F2F3F7;
    --ink-body:  #F2F3F7B8;
    --ink-muted: #F2F3F796;
    --ink-line:  #F2F3F72E;
    --ink-faint: #F2F3F710;

    --bg:        #11162A;
    --surface:   #1A2142;
    --band:      #0D1223;

    --ok:   #4FC79B;
    --warn: #E0A33A;
    --crit: #FF7A7C;
    --info: #6FB2FF;
    --link: #8CC2FF;
    --idle: #F2F3F780;

    --lift:   0 1px 2px #00000045, 0 6px 20px #00000038;
    --lift-2: 0 2px 4px #00000052, 0 14px 32px #00000045;
    --field-bg:   #FFFFFF14;
    --punch-wash: #FF7A7C24;
    --punch-edge: #FF7A7C45;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* The browser's [hidden] { display: none } is a user-agent rule, so ANY
   author display declaration beats it regardless of specificity. .card sets
   display: flex, which silently defeated the board's source filter: the
   attribute was set, the card stayed on screen. Declared here once so it
   cannot happen again to anything that gets a display value later. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--business); }

.wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ========== masthead ========== */
.band { background: var(--band); color: var(--band-ink); }
.mast { padding-block: 20px 22px; }
.mast-top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.brand h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.brand p  { margin: 0; font-size: 13px; color: var(--band-ink-2); }

.mast-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ghost {
  background: #FFFFFF1A;
  border: 0;
  color: var(--band-ink);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.ghost:hover { background: #FFFFFF2E; }

.stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; }
.stat b {
  display: block;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 11.5px; color: var(--band-ink-2); letter-spacing: 0.04em; }
.stat.is-crit b { color: #FF9EA0; }

/* ========== command bar ========== */
.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--ink-faint), 0 6px 16px -12px #14141433;
}
.bar-in { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-block: 11px; }
.search {
  flex: 1 1 240px;
  min-width: 0;
  border: 0;
  background: var(--field-bg);
  border-radius: var(--r-field);
  padding: 9px 13px;
  font-size: 14px;
}
.search::placeholder { color: var(--ink-muted); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 0;
  background: var(--ink-faint);
  color: var(--ink-body);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.chip:hover { background: #14141424; }
.chip[aria-pressed="true"] { background: var(--ocean); color: #FFFFFF; }
.chip .n { font-size: 11.5px; opacity: .62; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { opacity: .8; }

/* ========== board ========== */
main { padding-block: 22px 56px; }
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.col { flex: 0 0 300px; min-width: 0; }
.col-head { display: flex; align-items: center; gap: 9px; padding: 0 4px 10px; }
.col-head h2 { margin: 0; font-size: 13px; font-weight: 600; }
.col-head .n { margin-left: auto; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tone-crit { background: var(--crit); }
.tone-ok   { background: var(--ok); }
.tone-warn { background: var(--warn); }
.tone-info { background: var(--info); }
.tone-idle { background: var(--idle); }

.col-body { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 15px 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  width: 100%;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }
/* A reference card is not work, so it sits in the page rather than on it. */
.card.is-ref { background: var(--ink-faint); box-shadow: none; }
.card.is-ref:hover { box-shadow: none; }
.card-top { display: flex; gap: 9px; align-items: flex-start; }
.card .h3 { font-size: 14.5px; font-weight: 600; line-height: 1.35; flex: 1; min-width: 0; }
.sev { width: 3px; border-radius: 2px; align-self: stretch; flex: none; margin-top: 2px; background: var(--crit); }
.next { font-size: 13px; color: var(--ink-body); }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag {
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  background: var(--ink-faint);
  color: var(--ink-body);
  white-space: nowrap;
}
.tag.src  { background: var(--ink-faint); }
.tag.crit { background: var(--crit); color: #FFFFFF; }
.tag.due  { background: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tag.due.is-near { background: #9A640021; color: var(--warn); }
.tag.due.is-over { background: var(--crit); color: #FFFFFF; }
.tag.prog { background: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tag.prog.is-complete { background: #1E7A5A1F; color: var(--ok); }
.when {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.when.is-stale { color: var(--warn); }

.empty-col {
  background: var(--ink-faint);
  border-radius: var(--r-card);
  padding: 18px;
  font-size: 12.5px;
  color: var(--ink-muted);
  text-align: center;
}

.boot {
  max-width: 520px;
  margin: 48px auto;
  text-align: center;
  padding: 34px 26px;
  background: var(--surface);
  box-shadow: var(--lift);
  border-radius: var(--r-card);
}
.boot h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.boot p  { margin: 0; color: var(--ink-body); font-size: 14px; }

/* ========== detail sheet ========== */
.scrim {
  position: fixed;
  inset: 0;
  background: #141414A6;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 720px) { .scrim { align-items: center; } }
.sheet {
  background: var(--surface);
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) { .sheet { border-radius: var(--r-card); } }
.sheet h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.sheet-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ro { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 14px; }

.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.field input, .field textarea, .field select {
  width: 100%;
  border: 0;
  background: var(--field-bg);
  border-radius: var(--r-field);
  padding: 9px 12px;
  font-size: 14px;
}
.field textarea { min-height: 76px; resize: vertical; }

/* A read-only field stops being a field rather than becoming a faded one.
   The well is the affordance now that there is no border, so fading the well
   left live and dead fields looking alike. Flush left so the value reads as
   a stated fact under its label. */
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: transparent;
  color: var(--ink-body);
  opacity: 1;
  cursor: default;
  padding-left: 0;
  padding-right: 0;
}
.field select:disabled { appearance: none; -webkit-appearance: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }

/* The facts a finding is judged on, laid out so they can be read at a
   glance rather than parsed out of a sentence. */
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0 0 16px;
  font-size: 13px;
}
.fact { display: contents; }
.fact-k { color: var(--ink-muted); font-size: 12.5px; }
.fact-v { color: var(--ink-body); font-variant-numeric: tabular-nums; }

.go-look { color: var(--link); font-size: 13px; word-break: break-all; }

.sheet-err {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink);
  background: var(--punch-wash);
  border-radius: var(--r-field);
  padding: 9px 12px;
}

/* A finding's title is a control, so it looks like text and behaves like a
   button: the row is the affordance, not a blue link in a table. */
.open-finding {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.open-finding:hover { text-decoration: underline; }
.now-card h3 .open-finding:hover { text-decoration: underline; }

.tag-recovered {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  background: var(--ink-faint);
  color: var(--ink-body);
  white-space: nowrap;
}
.tag.is-ok { background: var(--ink-faint); color: var(--ink-body); }

.sheet-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.btn {
  border-radius: var(--r-pill);
  padding: 9px 19px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn.primary { background: var(--ocean); color: #FFFFFF; }
.btn.primary:hover { background: var(--business); }
.btn.quiet { background: var(--ink-faint); color: var(--ink-body); }
.btn.quiet:hover { background: #14141424; }
.btn.danger { background: var(--punch-wash); color: var(--crit); margin-left: auto; }
.btn.danger:hover { background: var(--crit); color: #FFFFFF; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.small { padding: 6px 13px; font-size: 12.5px; }
.btn.is-danger { color: var(--crit); border-color: var(--crit); align-self: flex-start; }
.btn.is-danger:hover { background: var(--crit); color: #FFFFFF; }
.btn.full { width: 100%; }

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--ocean);
  color: #FFFFFF;
  border-radius: var(--r-pill);
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 60;
}
.toast.is-error { background: var(--crit); }

/* ========== login ========== */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--band); }
.login-wrap { width: 100%; padding: 24px; }
.login-card {
  max-width: 400px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px 28px;
}
.login-brand { margin-bottom: 24px; }
.login-brand h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.login-brand p  { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }
.alert {
  background: var(--crit);
  color: #FFFFFF;
  border-radius: var(--r-field);
  padding: 10px 13px;
  font-size: 13.5px;
  margin: 0 0 16px;
}

/* ========== tasks, subtasks, checklists ==========
   Two levels of work plus a per-task checklist. The caption rule is shared
   with any later section added to the sheet. */
.section-cap {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin: 26px 0 8px;
}

.tasks-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-muted); margin-bottom: 10px; }
.tasks-head .bar { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--ink-faint); overflow: hidden; min-width: 60px; }
.tasks-head .bar > span { display: block; height: 100%; background: var(--business); border-radius: var(--r-pill); }
.tasks-head .bar > span.is-complete { background: var(--ok); }

/* The host sits between the fields and the actions. It carries the bottom
   margin so the TASKS caption keeps its own spacing. */
.tasks-host { margin-bottom: 4px; }
.tasks { display: flex; flex-direction: column; gap: 2px; }
.task { border-radius: 12px; }
.task-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 12px; }
.task-row:hover { background: var(--ink-faint); }
.task-row input[type="checkbox"] { width: 16px; height: 16px; flex: none; accent-color: var(--business); }
.task-title { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.task-title[contenteditable]:focus { outline: 2px solid var(--business); outline-offset: 2px; border-radius: 4px; }
.task.is-done .task-title { color: var(--ink-muted); text-decoration: line-through; }
.task-count { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-expand { background: none; border: 0; padding: 2px 6px; font-size: 11.5px; color: var(--ink-muted); border-radius: var(--r-pill); white-space: nowrap; }
.task-expand:hover { color: var(--business); }

/* Indented to sit under the task title rather than its checkbox. */
.task-detail { padding: 4px 8px 14px 33px; display: flex; flex-direction: column; gap: 14px; }
.task-due { display: flex; align-items: center; gap: 9px; }
.task-due label { font-size: 11px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.04em; }
.task-due input { border: 0; background: var(--field-bg); border-radius: 10px; padding: 5px 9px; font-size: 13px; }

.sublist { display: flex; flex-direction: column; gap: 3px; }
.sublist-cap { font-size: 10.5px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.05em; }
.subrow { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.subrow input[type="checkbox"] { width: 14px; height: 14px; flex: none; accent-color: var(--business); }
.subrow > span { flex: 1; min-width: 0; }
.subrow.is-done > span { color: var(--ink-muted); text-decoration: line-through; }
/* Revealed on hover, and on keyboard focus so it stays reachable. */
.subrow-x { background: none; border: 0; font-size: 11px; color: var(--ink-muted); padding: 1px 5px; border-radius: var(--r-pill); opacity: 0; }
.subrow:hover .subrow-x, .subrow-x:focus-visible { opacity: 1; }
.subrow-x:hover { color: var(--crit); }

.adder { display: flex; gap: 6px; margin-top: 8px; }
.adder input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: var(--field-bg);
  border-radius: var(--r-field);
  padding: 7px 11px;
  font-size: 13.5px;
}
.sublist .adder input { font-size: 13px; padding: 5px 10px; border-radius: 10px; }

/* ================= the day view =================
   One loud element: the Start now card. Punch marks what needs attention
   right now and nothing else, so that it keeps meaning that. Separation is
   carried by space and fill rather than by lines. */

.ghost.is-on { background: #FFFFFF33; font-weight: 600; }
/* One action on this screen, so it is the only one that looks like one.
   White on the band rather than Punch: Punch behind white text is about
   3.4:1, which is under AA for text this size. */
.ghost.is-act { background: var(--paper); color: var(--ocean); font-weight: 600; }
.ghost.is-act:hover { background: var(--smoky); }

/* ---- the working window ---- */
.ribbon-wrap { margin: 4px 0 30px; }
.ribbon {
  position: relative;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--ink-faint);
  overflow: visible;
}
.ribbon-free {
  position: absolute;
  top: 0;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--smoky);
}
.ribbon-free.is-past { background: var(--ink-faint); }
.ribbon-free.is-free { background: var(--business); }
.ribbon-busy {
  position: absolute;
  top: 0;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--ocean);
}
/* Now is the only thing on this track that moves, so it is the only thing
   drawn in Punch. */
.ribbon-now {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 24px;
  background: var(--punch);
  border-radius: 2px;
}
.ribbon-now::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--punch);
}
.ribbon-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.ribbon-read {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ink-body);
  max-width: 70ch;
}
.ribbon-read strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ribbon-caveat { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-muted); }

/* ---- layout ---- */
.day-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 980px) {
  .day-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}
.day-main { min-width: 0; }
.day-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.lane-head {
  margin: 30px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}
.day-main > .lane-head:first-child { margin-top: 0; }
/* Punch at 13px fails contrast as text, so the lane is marked rather than
   coloured. The mark carries no text, which is where Punch is strongest. */
.lane-head.is-punch { color: var(--ink); display: flex; align-items: center; gap: 8px; }
.lane-mark { width: 10px; height: 10px; border-radius: 3px; background: var(--punch); flex: none; }
.lane-sub { margin: -4px 0 12px; font-size: 13px; color: var(--ink-muted); max-width: 62ch; }

/* ---- the one loud thing ---- */
.now-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 22px 26px 24px 30px;
  overflow: hidden;
}
.now-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  /* The card is clipped to 28px, so the spine takes the same curve on its
     left rather than tapering into a sliver against it. */
  border-radius: var(--r-card) 0 0 var(--r-card);
  background: var(--punch);
}
.now-card h3 {
  margin: 0 0 12px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  max-width: 28ch;
}
.now-card .meta { gap: 7px; }
.now-card .why { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-muted); max-width: 58ch; }

/* ---- sorting ---- */
.lane-bar { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.lane-bar .lane-head { flex: 1; min-width: 0; }
.sorts { display: flex; gap: 4px; margin: 30px 0 10px; }
.sort {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 500;
}
.sort:hover { background: var(--ink-faint); }
.sort[aria-pressed="true"] { background: var(--ink-faint); color: var(--ink); font-weight: 600; }

/* The Moxie project a task came from. Routing is by client, so without this
   a row cannot say which piece of a client's work it is. */
.row-group {
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--ink-faint);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- what Moxie is feeding an engagement ---- */
.groups { display: flex; flex-direction: column; gap: 1px; }
.group-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 10px;
}
.group-row:nth-child(odd) { background: var(--ink-faint); }
.group-name { flex: 1; min-width: 0; font-size: 13.5px; }
.group-count {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- quieter lanes: rows, not cards ---- */
.rows { display: flex; flex-direction: column; gap: 2px; }
.row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 14px;
  background: transparent;
}
.row:nth-child(odd) { background: var(--ink-faint); }
.row-title { flex: 1; min-width: 0; font-size: 14.5px; }
.row-proj  { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.row-due   { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A wash behind near-black text, rather than Punch as the text itself. */
.row-due.is-over {
  color: var(--ink);
  font-weight: 600;
  background: var(--punch-wash);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
.row-note  { font-size: 12.5px; color: var(--ink-muted); }

/* Narrow: the title takes its own line. Side by side, a long client name
   holding nowrap squeezes the title down to one word per line. */
@media (max-width: 640px) {
  .row { flex-wrap: wrap; gap: 4px 12px; }
  .row-title { flex: 1 1 100%; }
  .row-proj, .row-due { font-size: 12px; }
}

.row.is-stuck {
  background: var(--punch-wash);
  box-shadow: inset 5px 0 0 var(--punch);
  padding-left: 19px;
}
.row.is-stuck:nth-child(odd) { background: var(--punch-wash); }
.row.is-reserved { background: var(--ink-faint); }

/* ---- the task table ----
   Moxie's column order: task, status, due, priority, client, project.
   No rules between rows: separation is zebra fill, since the system has
   no borders. */
.ttable { display: flex; flex-direction: column; }
.trow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 112px 92px 84px 136px 26px 146px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
}
.trow:not(.is-head):nth-of-type(even) { background: var(--ink-faint); }
.trow.is-head {
  padding-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}
.trow.is-stuck { background: var(--punch-wash); box-shadow: inset 4px 0 0 var(--punch); }
.trow.is-done .tc-task { color: var(--ink-muted); text-decoration: line-through; }
.trow.is-failed { background: var(--punch-wash); }

.tc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-check { display: flex; align-items: center; justify-content: center; }
.tc-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--business); }
/* A finding has nothing to tick; the marker says it is a different kind of
   thing rather than a checkbox that does nothing. */
.tc-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--punch); }
.tc-task { font-size: 14.5px; white-space: normal; }
.tc-client { font-size: 12.5px; color: var(--ink-body); }

/* Status and project read as chips rather than loose column text: they are
   labels on the work, and a chip says so without a rule to separate it. */
.tc-status > span, .tc-source > a, .tc-source > span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  background: var(--ink-faint);
  color: var(--ink-body);
  text-decoration: none;
}
.tc-due { font-size: 12.5px; color: var(--ink-body); font-variant-numeric: tabular-nums; }
.tc-due.is-over { color: var(--ink); font-weight: 600; }

/* The link colour is --link, not --business: the brand blue is picked for
   fills and does not carry 11px text on a tinted chip in either scheme. */
.tc-source a { color: var(--link); text-decoration: none; }
.tc-source a:hover { background: #0171E41F; text-decoration: underline; }

.prio {
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  background: var(--ink-faint);
  color: var(--ink-body);
}
.prio.p-urgent { background: var(--punch-wash); color: var(--ink); }
.prio.p-high   { background: #9A640021; color: var(--ink); }

/* Narrow: the columns that are context rather than the work itself drop
   away, so the task and its deadline stay readable. */
.tc-drop { display: flex; justify-content: flex-end; }
.drop {
  border: 0;
  background: none;
  color: var(--ink-body);
  font-size: 16px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--r-pill);
  opacity: 0;
}
.trow:hover .drop, .drop:focus-visible { opacity: 1; }
.drop:hover { background: var(--punch-wash); color: var(--ink); }

@media (max-width: 900px) {
  .trow { grid-template-columns: 30px minmax(0, 1fr) 96px 28px; }
  .drop { opacity: 1; }
  .trow.is-head { display: none; }
  .tc-status, .tc-prio, .tc-client { display: none; }

  /* The project is the one piece of context worth keeping on a phone: it is
     what connects the task to the work it belongs to. It moves under the
     title rather than competing with it for width. */
  .tc-source { grid-column: 2 / -1; margin-top: 2px; }
  .tc-source:empty { display: none; }
}

/* ---- empty states are invitations, not apologies ---- */
.invite {
  background: var(--ink-faint);
  border-radius: var(--r-card);
  padding: 24px 26px;
}
.invite p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-body); max-width: 60ch; }
.invite p:last-of-type { margin-bottom: 16px; }

/* ---- standing state ---- */
.panel {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 18px 20px 20px;
}
.panel h2 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.panel-big {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.panel-big span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.panel-big.is-punch { color: var(--punch); }
.panel-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-muted); }

.mini { display: flex; flex-direction: column; gap: 1px; }
.mini-row {
  font-size: 13px;
  color: var(--ink-body);
  padding: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-more { font-size: 12.5px; color: var(--ink-muted); padding-top: 5px; }

/* A set-aside row carries its own way back, so the decision is reversible
   from where its consequence is visible. */
.mini-row.is-restorable {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: normal;
}
.mini-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted);
}
.restore {
  flex: 0 0 auto;
  border: 0;
  background: var(--ink-faint);
  color: var(--ink-body);
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.restore:hover { background: #0171E41F; color: var(--link); }
.restore[disabled] { opacity: 0.5; }

/* The hidden attribute loses to display: block without this. */
.audit-out[hidden] { display: none; }
.audit-out {
  display: block;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ink-body);
  background: var(--punch-wash);
  border-radius: var(--r-field);
  padding: 11px 15px;
}

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