/* Idea Foundry.
   Carried over from the artifact this board used to be, near enough unchanged
   -- it was the part of that thing that worked. Two deliberate departures:

   1. No inline style attributes. The artifact wrote style="background:var(--s-
      shipped)" into generated markup. A style ATTRIBUTE is blocked by our
      Content-Security-Policy (style-src-attr) even though element.style set
      from script is not, so every one of them became a data-status hook and
      the rules below. Tidier than what it replaced, and it made the policy
      strict rather than the policy make the app loose.
   2. Fonts are vendored -- see fonts.css, loaded first.

   Type sizes live here. Colour is all tokens: three theme states, defined on
   bare :root, again under prefers-color-scheme guarded against an explicit
   light choice, and again under [data-theme="dark"] so a toggle wins both
   ways. */

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

/* The artifact this came from ran inside a harness that supplied this rule,
   and dropping it cost the first local test: `.gate{display:flex}` is an
   author rule and beats the user agent's `[hidden]{display:none}`, so the
   sign-in screen, the refusal screen and the whole board rendered stacked on
   top of one another. Every screen swap in main.js toggles `.hidden`, so this
   line is load-bearing rather than housekeeping. */
[hidden]{display:none!important}

:root{
  color-scheme:light;
  --ground:#EDEFF3;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --surface-3:#E9ECF2;
  --ink:#161A20;
  --ink-2:#4C5663;
  --ink-3:#7C8592;
  --line:#DBDFE7;
  --line-2:#C6CCD7;
  /* The Marketing Board's palette (its tokens.css), by hand rather than by
     import -- this app shares no files with that one. Deep blue where the
     accent has to read against white: 7.9:1 as text, 7.1:1 as a ring. The
     bright blue fails both there (2.96:1) and is kept for the black masthead,
     where it measures 7.08:1, and for dark mode. */
  --accent:#1b4f9e;        /* --mh-blue-deep */
  --accent-2:#00a0de;      /* --mh-blue */
  --accent-soft:#dbe9f6;   /* --mh-blue-100, the header-band tint */
  --accent-soft-ink:#0c3f7a;
  --mast:#000000;          /* --mh-black: the Marketing Board's header is black */
  --btn-fg:#ffffff;
  --btn-bg:#000000;
  --s-idea:#6B7789;
  --s-shaping:#5561BC;
  --s-ready:#0F7A6B;
  --s-building:#BE4A21;
  --s-shipped:#2E7D3B;
  --s-parked:#8A7391;
  --danger:#B3261E;
  --shadow:0 1px 2px rgba(20,26,36,.06),0 10px 26px -14px rgba(20,26,36,.22);
  --font-ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0F1216;
    --surface:#171B21;
    --surface-2:#1D222A;
    --surface-3:#232932;
    --ink:#E8EBF0;
    --ink-2:#A6AFBC;
    --ink-3:#7B8593;
    --line:#272D36;
    --line-2:#39414D;
    --accent:#00a0de;        /* 5.83:1 on --surface */
    --accent-2:#00a0de;
    --accent-soft:#233453;   /* --mh-navy */
    --accent-soft-ink:#dbe9f6;
    --mast:#000000;
    --btn-fg:#000000;        /* the primary inverts: a black button on a
                                near-black ground would vanish */
    --btn-bg:#ffffff;
    --s-idea:#8994A6;
    --s-shaping:#8B95E6;
    --s-ready:#48B29E;
    --s-building:#E4784F;
    --s-shipped:#5FBE70;
    --s-parked:#B294BA;
    --danger:#E8776E;
    --shadow:0 1px 2px rgba(0,0,0,.40),0 12px 30px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0F1216;
  --surface:#171B21;
  --surface-2:#1D222A;
  --surface-3:#232932;
  --ink:#E8EBF0;
  --ink-2:#A6AFBC;
  --ink-3:#7B8593;
  --line:#272D36;
  --line-2:#39414D;
  --accent:#00a0de;
  --accent-2:#00a0de;
  --accent-soft:#233453;
  --accent-soft-ink:#dbe9f6;
  --mast:#000000;
  --btn-fg:#000000;
  --btn-bg:#ffffff;
  --s-idea:#8994A6;
  --s-shaping:#8B95E6;
  --s-ready:#48B29E;
  --s-building:#E4784F;
  --s-shipped:#5FBE70;
  --s-parked:#B294BA;
  --danger:#E8776E;
  --shadow:0 1px 2px rgba(0,0,0,.40),0 12px 30px -16px rgba(0,0,0,.75);
}

/* Safari shows a ~5px strip of the page ground above the black masthead;
   Chrome does not. It is NOT a layout gap -- measured in Safari's console,
   html, body and the band all sit at y=0 with zero margin, padding and
   border, and the band pins at exactly 0 when scrolled. Painting the html
   canvas black did not hide it either, so it is not the canvas region. Parked
   on 10 September 2026 as low value. body keeps min-height:100vh, which is a
   sound default regardless. */
html{margin:0;padding:0}
body{
  margin:0;padding:0;min-height:100vh;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0;text-align:left}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.shell{max-width:1240px;margin:0 auto;padding:0 24px 96px;display:flex;flex-direction:column;gap:18px}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:30;
  margin:0 -24px;padding:16px 24px 14px;
  background:var(--mast);
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;

  /* The band is black, so the semantic tokens are rebound for its subtree and
     every rule below resolves to legible values without being touched -- the
     Marketing Board does the same for its navigation column. Rebinding the
     semantics is deliberate; rebinding a palette value would read as a lie
     two screens later. Measured against #000: white 21:1, .80 white 13:1,
     pale blue 14.6:1, bright blue 7.08:1. */
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.80);
  --ink-3:#badde5;                       /* --mh-blue-pale */
  --line:rgba(255,255,255,.18);
  --line-2:rgba(255,255,255,.34);
  --surface:rgba(255,255,255,.08);
  --surface-3:rgba(255,255,255,.14);

  /* The status colours are re-grounded too. The light-mode set was chosen for
     white paper, and on the black band it scrapes the 3:1 graphics floor at
     3.35-4.34:1. The dark-mode set was chosen for exactly this ground and
     measures 6.0-8.0:1 on the chip fill, so the band uses it in both themes. */
  --s-idea:#8994A6;
  --s-shaping:#8B95E6;
  --s-ready:#48B29E;
  --s-building:#E4784F;
  --s-shipped:#5FBE70;
  --s-parked:#B294BA;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{
  width:26px;height:26px;flex:none;border-radius:3px;
  background:linear-gradient(150deg,var(--accent-2),var(--accent));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
  position:relative;
}
/* Explicit white, not var(--surface): inside the masthead that token is a
   translucent fill for the chips, and the chevron would fade with it. */
.mark::after{
  content:"";position:absolute;inset:7px 6px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:skewY(-14deg);opacity:.9;
}
.brand h1{
  margin:0;font-size:19px;font-weight:700;letter-spacing:-.015em;
  font-variation-settings:'wdth' 115;line-height:1.1;white-space:nowrap;
  color:var(--ink);
}
.project-name{
  display:block;width:100%;max-width:260px;margin-top:1px;
  background:none;border:none;padding:0;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;
  color:var(--ink-3);
  /* WebKit gives a text input an intrinsic minimum height derived from the
     font, which Chromium does not. Left to its own devices the field is a few
     pixels taller in Safari than the line of type inside it, the brand block
     grows by that much, and everything in the band sits lower. Pinning the
     line box makes both browsers draw the same box. */
  -webkit-appearance:none;appearance:none;
  height:auto;min-height:0;line-height:1.3;
}
.project-name::placeholder{color:var(--ink-3);opacity:.7}
.project-name:hover{color:var(--ink)}

.pipeline{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.pstat{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:13px;color:var(--ink-2);transition:border-color .15s,background .15s;
}
.pstat:hover{border-color:var(--line-2)}
.pstat[aria-pressed="true"]{border-color:var(--accent-2);background:var(--accent-2);color:#000}
.pstat[aria-pressed="true"] b{color:#000}
.pstat .dot{width:7px;height:7px;border-radius:50%;flex:none}
.pstat b{font-family:var(--font-mono);font-weight:500;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
/* An empty status is quieter, but NOT by opacity. `opacity:.5` on the whole
   button took the label to 3.55:1 -- under the 4.5:1 AA floor -- and the
   status dot to 1.6-1.8:1 against a 3:1 floor, on half the chips in the band.
   Measured on 10 September 2026, after it shipped. The quiet is carried by a
   second ink tier instead, the way the Marketing Board's navigation column
   does it: .62 white on the chip fill is 7.7:1, a clear step below the .80
   tier at 11.9:1 and clear of the floor. The dot keeps its full colour: it IS
   the meaning, and dimming it was what made an empty chip read as broken. */
.pstat[data-empty="1"]{color:rgba(255,255,255,.62)}
.pstat[data-empty="1"] b{color:rgba(255,255,255,.62)}

/* ---------- capture ---------- */
.capture{display:flex;gap:10px;align-items:stretch}
.capture .segmented{flex:none;box-shadow:var(--shadow);background:var(--surface)}
.capture .segmented button{padding:0 13px}
.capture input{
  flex:1;min-width:0;padding:14px 16px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow);
  transition:border-color .15s;
}
.capture input:hover{border-color:var(--line-2)}
.capture input:focus{outline:none;border-color:var(--accent)}
.capture input::placeholder{color:var(--ink-3)}
.btn-primary{
  padding:0 20px;border-radius:8px;flex:none;
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:14px;letter-spacing:.01em;
  transition:opacity .15s;
}
.btn-primary:hover{opacity:.86}

/* ---------- toolbar ---------- */
/* Bottom-aligned, not centred: the two chip groups carry an overline saying
   what they do (Filter, Sort), which makes them taller than the search box
   and the buttons. Aligning to the bottom keeps every control on one line
   and lets the overlines sit above it. */
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.control{display:flex;flex-direction:column;gap:4px}
/* Same voice as the detail panel's field labels: filter chips and sort chips
   look alike, and the overline is what tells them apart. */
.overline{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);padding-left:2px;
}
/* The same grammar as the capture box, which is the app's other text input:
   a white well, an edge that darkens on hover, the accent on focus. It used
   to sit on --surface-2 at rest, which is exactly the fill the account chip
   and the chip groups beside it use -- so the one control you can type into
   looked like the furniture around it, including a disabled-looking email. */
.search{
  flex:1;min-width:180px;max-width:340px;
  padding:8px 12px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);
  font-size:13.5px;color:var(--ink);
  transition:border-color .15s;
}
.search::placeholder{color:var(--ink-3)}
.search:hover{border-color:var(--line-2)}
.search:focus{outline:none;border-color:var(--accent)}
.segmented{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface-2)}
.segmented button{
  padding:7px 13px;font-size:12.5px;color:var(--ink-2);
  border-right:1px solid var(--line);transition:background .15s,color .15s;
}
.segmented button:last-child{border-right:none}
.segmented button:hover{background:var(--surface-3)}
.segmented button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg)}
/* The Marketing Board's secondary button is black type on a transparent fill
   with a black edge. This keeps its hairline weight -- these are row-level
   actions -- and takes the colour: ink rather than grey for the label, and the
   edge darkens to the label's colour on hover instead of to a lighter grey. */
.btn-quiet{
  padding:7px 13px;border-radius:7px;border:1px solid var(--line-2);
  background:var(--surface);font-size:12.5px;color:var(--ink);font-weight:600;
}
.btn-quiet:hover{border-color:var(--ink);background:var(--surface-2)}
.toolbar .spacer{flex:1}

.activefilter{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
}
.activefilter button{
  border:1px solid var(--line-2);border-radius:999px;padding:3px 9px;
  background:var(--surface);color:var(--ink-2);font-size:11.5px;font-family:var(--font-mono);
}
.activefilter button:hover{border-color:var(--ink-3)}

.warn{
  padding:10px 14px;border-radius:7px;font-size:13px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);
}

/* ---------- workspace ---------- */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:start}
.list{display:flex;flex-direction:column;gap:14px;min-width:0}

.group{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.group-head{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.group[data-collapsed="1"] .group-head{border-bottom-color:transparent}
.group-head:hover{background:var(--surface-3)}
.chev{width:9px;height:9px;flex:none;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.group[data-collapsed="1"] .chev{transform:rotate(-45deg) translate(-1px,1px)}
.group-head .dot{width:8px;height:8px;border-radius:50%;flex:none}
.group-head .name{font-weight:600;font-size:13.5px;font-variation-settings:'wdth' 108}
.group-head .count{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.group-head .hint{margin-left:auto;font-size:12px;color:var(--ink-3);text-align:right}
.group[data-collapsed="1"] .rows{display:none}

.rows{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:stretch;border-bottom:1px solid var(--line);position:relative}
.row:last-child{border-bottom:none}
.row::before{content:"";width:3px;flex:none;background:var(--rowc,var(--line-2))}
.row.sel{background:var(--surface-2)}
.row.sel::before{width:3px}
.row:hover{background:var(--surface-2)}
.row-open{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:11px 14px}
.rowtype{
  flex:none;width:32px;text-align:left;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
.rowtype[data-t="bugfix"]{color:var(--ink-2);font-weight:600}
.row-main{min-width:0;flex:1}
.row-title{font-size:14.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.row.done .row-title{color:var(--ink-2)}
.row-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;align-items:center}
.tag{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.02em;
  padding:2px 7px;border-radius:4px;background:var(--surface-3);color:var(--ink-2);
}
.band{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;border:1px solid currentColor;
}
.band.win{color:var(--s-shipped)}
.band.sink{color:var(--s-building)}
.band.bet{color:var(--s-shaping)}
.band.small{color:var(--ink-3)}
.refined{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.row-right{display:flex;align-items:center;gap:14px;flex:none}
.meters{display:flex;flex-direction:column;gap:3px}
.meter{display:flex;gap:2px}
.meter i{width:12px;height:3px;border-radius:2px;background:var(--line-2)}
.meter.impact i.on{background:var(--accent-2)}
.meter.effort i.on{background:var(--ink-3)}
.score{font-family:var(--font-mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:30px;text-align:right}

.star{
  flex:none;width:36px;display:flex;align-items:center;justify-content:center;
  color:var(--line-2);transition:color .15s;
}
.star:hover{color:var(--accent-2)}
.star[aria-pressed="true"]{color:var(--accent-2)}
.star svg{width:15px;height:15px;display:block}

.empty{
  border:1px dashed var(--line-2);border-radius:10px;padding:40px 28px;text-align:center;
  background:var(--surface);
}
.empty h2{margin:0 0 8px;font-size:17px;font-weight:700;font-variation-settings:'wdth' 112}
.empty p{margin:0 auto;max-width:46ch;color:var(--ink-2);font-size:13.5px}
.empty .keys{margin-top:18px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}
kbd{
  font-family:var(--font-mono);font-size:11px;padding:1px 5px;border-radius:4px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);
}

/* ---------- detail ---------- */
.detail{
  position:sticky;top:92px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden;
}
.detail-inner{display:flex;flex-direction:column;gap:16px;padding:16px}
.detail-blank{padding:34px 22px;text-align:center;color:var(--ink-3);font-size:13.5px}
.detail-blank strong{display:block;color:var(--ink-2);font-size:14.5px;font-weight:600;margin-bottom:6px}

.dbar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dbar .eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-right:auto}
.icon-btn{
  width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-3);color:var(--ink)}
.icon-btn.danger:hover{color:var(--danger)}
.icon-btn svg{width:15px;height:15px}
.icon-btn[aria-pressed="true"]{color:var(--accent-2)}

.field{display:flex;flex-direction:column;gap:6px}
.label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.d-title{
  width:calc(100% + 16px);margin:0 -8px;padding:5px 8px;
  border:1px solid transparent;border-radius:7px;
  background:none;resize:none;cursor:text;
  max-height:170px;overflow:hidden;
  font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.01em;
  font-variation-settings:'wdth' 106;
  transition:border-color .15s,background .15s;
}
.d-title:hover{border-color:var(--line-2);background:var(--surface-2)}
.d-title:focus{outline:none;border-color:var(--accent);background:var(--surface-2)}
.d-notes{
  width:100%;min-height:96px;resize:vertical;padding:10px 12px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface-2);font-size:13.5px;line-height:1.55;
}
.d-notes:focus,.d-tags:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.d-tags{
  width:100%;padding:8px 12px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface-2);font-size:13px;font-family:var(--font-mono);
}
.d-notes::placeholder,.d-tags::placeholder{color:var(--ink-3)}

.statuses{display:flex;flex-wrap:wrap;gap:5px}
.sbtn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);background:var(--surface-2);
  transition:border-color .15s,color .15s;
}
.sbtn:hover{border-color:var(--line-2);color:var(--ink)}
.sbtn .dot{width:7px;height:7px;border-radius:50%}
.sbtn[aria-pressed="true"]{background:var(--surface-3);border-color:currentColor;color:var(--sc);font-weight:600}

.scale{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scale .segmented{width:100%}
.scale .segmented button{flex:1;text-align:center;padding:6px 4px;font-size:12px}
.verdict{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:7px;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  color:var(--accent-soft-ink);
}
.verdict .v-band{font-size:13px;font-weight:600;color:inherit}
.verdict .v-note{font-size:11.5px;color:inherit;opacity:.85}
.verdict .v-score{font-family:var(--font-mono);font-size:17px;font-variant-numeric:tabular-nums;color:inherit}

.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.checks li{display:flex;align-items:flex-start;gap:9px;padding:5px 0;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:none}
.checks input[type="checkbox"]{margin-top:3px;accent-color:var(--accent-2);width:14px;height:14px;flex:none}
.checks span{flex:1;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.checks li.done span{color:var(--ink-3);text-decoration:line-through}
.checks .icon-btn{width:24px;height:24px;flex:none}
.checks .icon-btn svg{width:12px;height:12px}
.check-add{
  width:100%;padding:7px 10px;border-radius:6px;border:1px dashed var(--line-2);
  background:none;font-size:13px;
}
.check-add:focus{outline:none;border-style:solid;border-color:var(--accent);background:var(--surface-2)}
.check-add::placeholder{color:var(--ink-3)}

.stamp{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px}

.foot{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-align:center;padding-top:6px}

/* ---------- toast + modal ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;z-index:60;
  padding:10px 12px 10px 16px;border-radius:8px;
  background:var(--ink);color:var(--ground);font-size:13px;box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
}
.toast button{color:var(--accent-2);font-weight:600;font-size:13px}
.overlay{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;
  background:color-mix(in srgb,var(--ink) 45%,transparent);
}
.sheet{
  width:min(560px,100%);max-height:86vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:14px;padding:20px;
}
.sheet h2{margin:0;font-size:16px;font-weight:700;font-variation-settings:'wdth' 112}
.sheet p{margin:0;font-size:13px;color:var(--ink-2)}
.sheet .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sheet .actions .spacer{flex:1}
.link-danger{font-size:12.5px;color:var(--danger);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .detail{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;
    max-height:82vh;overflow:auto;border-radius:12px 12px 0 0;border-bottom:none;
  }
  .detail.blank{display:none}
  .pipeline{margin-left:0;width:100%}
  .masthead{position:static}
  .toolbar .spacer{display:none}
  .search{max-width:none}
  .capture{flex-wrap:wrap}
  .capture .segmented{order:-1;width:100%}
  .capture .segmented button{flex:1;text-align:center;padding:8px 4px}
}
@media (max-width:560px){
  .shell{padding:0 14px 90px}
  .masthead{margin:0 -14px;padding:14px}
  .row-right .meters{display:none}
  .group-head .hint{display:none}
  .row-open{gap:10px;padding-left:10px}
  .rowtype{width:25px;font-size:9px;letter-spacing:.04em}
}


/* ---------- status colour, formerly inline style attributes ---------- */
.dot[data-status="idea"]{background:var(--s-idea)}
.row[data-status="idea"]{--rowc:var(--s-idea)}
.sbtn[data-status="idea"]{--sc:var(--s-idea)}
.dot[data-status="shaping"]{background:var(--s-shaping)}
.row[data-status="shaping"]{--rowc:var(--s-shaping)}
.sbtn[data-status="shaping"]{--sc:var(--s-shaping)}
.dot[data-status="ready"]{background:var(--s-ready)}
.row[data-status="ready"]{--rowc:var(--s-ready)}
.sbtn[data-status="ready"]{--sc:var(--s-ready)}
.dot[data-status="building"]{background:var(--s-building)}
.row[data-status="building"]{--rowc:var(--s-building)}
.sbtn[data-status="building"]{--sc:var(--s-building)}
.dot[data-status="shipped"]{background:var(--s-shipped)}
.row[data-status="shipped"]{--rowc:var(--s-shipped)}
.sbtn[data-status="shipped"]{--sc:var(--s-shipped)}
.dot[data-status="parked"]{background:var(--s-parked)}
.row[data-status="parked"]{--rowc:var(--s-parked)}
.sbtn[data-status="parked"]{--sc:var(--s-parked)}

/* ---------------------------- sign-in ---------------------------- */
/* Its own full-height screen rather than a modal over the board: there is no
   board to show behind it, and a dimmed backdrop would imply otherwise. */
.gate{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.gate-card{
  width:min(400px,100%);display:flex;flex-direction:column;gap:16px;
  padding:28px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
}
.gate-brand{display:flex;align-items:center;gap:12px}
.gate-brand h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;font-variation-settings:'wdth' 115}
.gate p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.gate label{display:flex;flex-direction:column;gap:6px}
.gate input{
  padding:11px 13px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface-2);font-size:14px;
}
.gate input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.gate .btn-primary{padding:12px 20px;width:100%;text-align:center}
.gate-error{
  padding:10px 12px;border-radius:7px;font-size:13px;line-height:1.5;
  border:1px solid var(--danger);color:var(--danger);
  background:color-mix(in srgb,var(--danger) 8%,transparent);
}
.gate-note{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);line-height:1.6}

/* ---------------------------- account ---------------------------- */
.account{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:6px 8px 6px 12px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface-2);font-size:12.5px;color:var(--ink-2);
}
.account .who{font-family:var(--font-mono);font-size:11.5px;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account button{
  padding:3px 9px;border-radius:5px;border:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-2);
}
.account button:hover{border-color:var(--ink-3);color:var(--ink)}

/* A page that has not decided yet must not flash the sign-in form at somebody
   who is already signed in, so both start hidden and init reveals one. */
.boot{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:13.5px}

/* The 404 page's one link, styled as a button. A class rather than a style
   attribute -- the policy blocks the attribute, and this file's header
   explains why that is the right way round. */
.gate-link{display:block;text-align:center;text-decoration:none}

/* Read-only member: can_edit false in `members`. The database refuses their
   writes regardless, but a control that looks live and does nothing is worse
   than no control, so the ones that would refuse are taken out of reach. */
body[data-readonly="1"] .star,
body[data-readonly="1"] .icon-btn.danger,
body[data-readonly="1"] .check-add{display:none}
body[data-readonly="1"] .d-title,
body[data-readonly="1"] .d-notes,
body[data-readonly="1"] .d-tags,
body[data-readonly="1"] .project-name{pointer-events:none}
body[data-readonly="1"] .statuses,
body[data-readonly="1"] .scale{opacity:.6;pointer-events:none}

/* ---------------------------- projects panel ---------------------------- */
/* A list rather than a dropdown: deleting has to say what it will take with
   it, and a <select> has nowhere to put that sentence. */
.projects{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.proj{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2);
  padding:4px 8px 4px 4px;
}
.proj.active{border-color:var(--line-2);background:var(--surface-3)}
.proj-open{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:7px 8px;border-radius:6px;transition:background .15s;
}
.proj-open:hover{background:var(--surface)}
.proj-open:disabled{cursor:default;background:none}
.proj-name{font-size:14px;font-weight:600;font-variation-settings:'wdth' 104;overflow-wrap:anywhere}
.proj-count{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.proj-badge{
  flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid currentColor;border-radius:4px;padding:2px 6px;
}
.proj-del{
  flex:none;padding:5px 10px;border-radius:6px;border:1px solid var(--line-2);
  font-size:12px;color:var(--ink-2);background:var(--surface);
}
.proj-del:hover{border-color:var(--danger);color:var(--danger)}
/* The confirming state is deliberately loud and deliberately wide: it is the
   only destructive control in the app, and it names the cost. */
.proj-del.confirm{
  border-color:var(--danger);color:var(--danger);font-weight:600;
  background:color-mix(in srgb,var(--danger) 8%,transparent);
}
.proj-add{display:flex;gap:8px}
.proj-add input{
  flex:1;min-width:0;padding:9px 12px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface-2);font-size:13.5px;
}
.proj-add input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.proj-add .btn-quiet{flex:none}
/* The toggle reads as pressed while the form is open, and relabels to "Hide". */
.sheet .actions .btn-quiet[aria-expanded="true"]{background:var(--surface-3);border-color:var(--ink)}

@media (max-width:560px){
  .proj{flex-wrap:wrap}
  .proj-del{width:100%;text-align:center}
}