:root { padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); color-scheme:light }
html { background:var(--paper) }
body { margin:0 }
img { max-width:100% }
[hidden] { display:none !important }

/* Layout: a drawing register. One narrow sheet of work, section headers drawn as dimension lines, rounded frames, project numbers as colored tags. */
:root {
  --paper:#3D000E; --sheet:#FBF8F8; --ink:#241419; --muted:#6A5459; --line:#DCCBD0; --field:#F2EAEC;
  --on-paper:#FBF1F2; --on-paper-muted:#E6C6CC; --on-paper-alert:#FFC7BA;
  --accent:#7A1A2E; --on-accent:#FFFFFF; --red:#BE2F1C; --amber:#8A5C00; --green:#25704A;
  --scrim:rgba(36,20,25,.5);
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --p-rose:#F2D8DC; --t-rose:#A33A55; --p-clay:#F2D9C8; --t-clay:#A44A22; --p-sand:#F0E2C2; --t-sand:#8A6410; --p-olive:#E3E3BF; --t-olive:#6A6A18; --p-sage:#D3E2D0; --t-sage:#3E7350; --p-teal:#CDE3E0; --t-teal:#1F6F6C; --p-slate:#D3DDE8; --t-slate:#43607F; --p-plum:#E2D5E8; --t-plum:#7A4A8C;
  --tint-muted:#55444A; --tint-red:#962010; --tint-amber:#694300;
  --nav-h:60px; --r:14px; --r-s:9px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper:#3D000E; --sheet:#21151A; --ink:#F1E8EA; --muted:#B5A3A9; --line:#46303A; --field:#170E12;
  --accent:#F2A0AE; --on-accent:#2A0A12; --red:#FF8B78; --amber:#E5B64A; --green:#73D09B;
  --p-rose:#4C2531; --p-clay:#4D2D1F; --p-sand:#473A1B; --p-olive:#3B3D1F; --p-sage:#263F2F; --p-teal:#1E3F3E; --p-slate:#27384B; --p-plum:#3B2B4B; --tint-muted:#CFC0C5; --tint-red:#FFA99A; --tint-amber:#F0C872;
  --scrim:rgba(0,0,0,.6); color-scheme:dark } }
:root[data-theme="dark"] {
  --paper:#3D000E; --sheet:#21151A; --ink:#F1E8EA; --muted:#B5A3A9; --line:#46303A; --field:#170E12;
  --accent:#F2A0AE; --on-accent:#2A0A12; --red:#FF8B78; --amber:#E5B64A; --green:#73D09B;
  --p-rose:#4C2531; --p-clay:#4D2D1F; --p-sand:#473A1B; --p-olive:#3B3D1F; --p-sage:#263F2F; --p-teal:#1E3F3E; --p-slate:#27384B; --p-plum:#3B2B4B; --tint-muted:#CFC0C5; --tint-red:#FFA99A; --tint-amber:#F0C872;
  --scrim:rgba(0,0,0,.6); color-scheme:dark }

* { box-sizing:border-box }
body { background:var(--paper); color:var(--ink); font:400 16px/1.45 var(--body); -webkit-text-size-adjust:100% }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer; background:none; border:0; padding:0 }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
h1,h2,h3 { margin:0; text-wrap:balance }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums }

.wrap { max-width:680px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:20px calc(var(--nav-h) + 96px); display:flex; flex-direction:column; gap:24px }

.board, .col { display:flex; flex-direction:column; gap:24px; min-width:0 }
@media (min-width:960px) { .wrap.wide { max-width:1160px } .board { display:grid; grid-template-columns:3fr 2fr; align-items:start; gap:32px } .fab { right:calc(24px + env(safe-area-inset-right, 0px)) } }
.head { flex-wrap:wrap; display:flex; justify-content:space-between; align-items:flex-end; gap:12px }
.eyebrow { font:500 12px/1.3 var(--mono); color:var(--muted); letter-spacing:.04em; text-transform:uppercase }
.head .eyebrow { color:var(--on-paper-muted) }
.title { color:var(--on-paper); font:700 clamp(38px,11vw,56px)/1 var(--display); font-stretch:68%; letter-spacing:-.005em; text-transform:uppercase; margin-top:4px }
.who { display:flex; flex-direction:column; align-items:flex-end; gap:4px; color:var(--on-paper-muted); font-size:13px; flex:none; min-height:44px; justify-content:flex-end }
.who .link, .link.back, .head .btn { color:var(--on-paper); border-color:var(--on-paper) }

/* dimension line: label, then a line with end ticks, then the count */
.dim { color:var(--on-paper); display:flex; align-items:center; gap:10px; font:600 15px/1 var(--display); font-stretch:80%; letter-spacing:.05em; text-transform:uppercase }
.dim.red { color:var(--on-paper-alert) }
.dim i { flex:1; min-width:16px; height:9px; border-inline:1px solid currentColor; position:relative; opacity:.55 }
.dim i::after { content:""; position:absolute; inset:4px 0 auto; border-top:1px solid currentColor }
.dim span { font:500 13px/1 var(--mono); letter-spacing:0 }
.section { display:flex; flex-direction:column; gap:8px }

.list { border-radius:var(--r); overflow:hidden; background:var(--sheet); border:1px solid var(--line); display:flex; flex-direction:column }
.row { display:flex; gap:12px; padding:12px; align-items:flex-start; width:100%; text-align:left; border-top:1px solid var(--line) }
.row:first-child { border-top:0 }
.check { width:26px; height:26px; flex:none; border:1.5px solid var(--muted); border-radius:50%; display:grid; place-items:center; margin-top:1px; color:var(--on-accent); font-size:15px; line-height:1 }
.check.on { background:var(--accent); border-color:var(--accent) }
.grow { flex:1; min-width:0; text-align:left; display:block; width:100% }
.t { font-weight:500; overflow-wrap:anywhere }
.done .t { color:var(--muted); text-decoration:line-through }
.tag { display:inline-block; color:inherit; font:600 12.5px/1.5 var(--mono); padding:0; letter-spacing:0; text-transform:none; vertical-align:baseline }
.swipe { position:relative; overflow:hidden }
.swipe + .swipe { border-top:1px solid var(--line) }
.swipe-bg { position:absolute; inset:0; background:var(--red); color:var(--sheet); display:flex; align-items:center; justify-content:flex-end; padding-right:16px; font-weight:600 }
.row.swipe-fg { position:relative; background:var(--sheet); border-top:0; touch-action:pan-y; transition:transform .15s ease-out }
.row.swipe-fg.dragging { transition:none }
[data-c="rose"] { --pc-bg:var(--p-rose) }
[data-t="rose"] { background:var(--t-rose) }
[data-c="clay"] { --pc-bg:var(--p-clay) }
[data-t="clay"] { background:var(--t-clay) }
[data-c="sand"] { --pc-bg:var(--p-sand) }
[data-t="sand"] { background:var(--t-sand) }
[data-c="olive"] { --pc-bg:var(--p-olive) }
[data-t="olive"] { background:var(--t-olive) }
[data-c="sage"] { --pc-bg:var(--p-sage) }
[data-t="sage"] { background:var(--t-sage) }
[data-c="teal"] { --pc-bg:var(--p-teal) }
[data-t="teal"] { background:var(--t-teal) }
[data-c="slate"] { --pc-bg:var(--p-slate) }
[data-t="slate"] { background:var(--t-slate) }
[data-c="plum"] { --pc-bg:var(--p-plum) }
[data-t="plum"] { background:var(--t-plum) }
.row[data-c], .reminder[data-c] { background:var(--pc-bg); --muted:var(--tint-muted); --red:var(--tint-red); --amber:var(--tint-amber) }
.row[data-c] .owner b:not(.me) { border-color:var(--tint-muted) }
.row[data-c] + .row[data-c] { border-top-color:var(--sheet) }
.swatches span { box-shadow:inset 0 0 0 1px rgba(255,255,255,.15) }
.tag[data-t] { background:none }
.del { display:none; flex:none; width:28px; height:28px; border-radius:50%; color:var(--muted); font-size:19px; line-height:1 }
.del:hover { background:var(--field); color:var(--red) }
@media (hover:hover) { .del { display:block } }
.undo { margin-left:12px; color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px }
.thumbs { display:flex; gap:6px; margin-top:8px; align-items:center; flex-wrap:wrap }
.thumbs img { width:64px; height:64px; object-fit:cover; border-radius:var(--r-s); display:block; background:var(--field) }
.thumbs .more { font:500 13px/1 var(--mono); color:var(--muted); padding-left:2px }
.edit-imgs { display:flex; flex-wrap:wrap; gap:8px }
.edit-imgs:empty { display:none }
.edit-img { position:relative; display:block; width:84px; height:84px }
.edit-img img { width:84px; height:84px; object-fit:cover; border-radius:var(--r-s); display:block; background:var(--field) }
.edit-img .x { position:absolute; top:-6px; right:-6px; width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--sheet); font-size:17px; line-height:1 }
.pick { display:inline-flex; align-items:center; cursor:pointer }
.sr { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden }
.pick:has(+ .sr:focus-visible) { outline:2px solid var(--accent); outline-offset:2px }
.viewer { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.viewer img { max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-s) }
.viewer .btn { position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:calc(12px + env(safe-area-inset-right, 0px)); background:var(--sheet); color:var(--ink) }
.swatches { display:flex; flex-wrap:wrap; gap:10px }
.swatches label { cursor:pointer; width:36px; height:36px; display:block; position:relative }
.swatches input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; touch-action:manipulation }
.swatches span { display:block; width:100%; height:100%; border-radius:50% }
.swatches input:checked + span { box-shadow:0 0 0 2px var(--sheet), 0 0 0 4px var(--ink) }
.swatches input:focus-visible + span { outline:2px solid var(--accent); outline-offset:5px }
.meta { align-items:center; display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:2px; font:400 12.5px/1.5 var(--mono); color:var(--muted) }
.meta .late { color:var(--red); font-weight:500 }
.meta .soon { color:var(--amber); font-weight:500 }
.owner { flex:none; display:flex; gap:2px; margin-top:2px }
.owner b { border-radius:6px; width:24px; height:24px; display:grid; place-items:center; font:600 12px/1 var(--mono); border:1px solid var(--line); color:var(--ink) }
.owner b.me { background:var(--ink); color:var(--sheet); border-color:var(--ink) }

.reminder { border-radius:var(--r); border:1.5px solid var(--accent); background:var(--sheet); padding:12px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center }
.reminder .grow { flex:1 1 200px; width:auto }
.filters { display:flex; gap:6px; flex-wrap:wrap }
.chip { border-radius:var(--r-s); padding:7px 12px; min-height:36px; border:1px solid var(--line); font-size:14px; background:var(--sheet) }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent) }

.btn { border-radius:var(--r-s); padding:10px 16px; min-height:44px; border:1px solid var(--ink); font-weight:600; font-size:15px }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.btn.small { min-height:36px; padding:6px 12px; font-size:14px }
.btn.danger { border-color:var(--red); color:var(--red) }
.link { color:var(--accent); font-weight:600; font-size:14px; min-height:36px; text-decoration:underline; text-underline-offset:3px }

.empty { border-radius:var(--r); border:1px dashed var(--on-paper-muted); padding:16px; color:var(--on-paper-muted); font-size:15px }
.empty strong { display:block; color:var(--on-paper); font-weight:600 }
.notice { border-radius:var(--r); font-size:14px; padding:10px 12px; border:1px solid var(--line); background:var(--sheet); display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap }

.projno { font:500 13px/1.6 var(--mono); color:var(--accent); flex:none; width:58px }
.stages { border-radius:var(--r); overflow:hidden; display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line); background:var(--sheet) }
.stages button { padding:8px 2px; min-height:52px; border-left:1px solid var(--line); font:600 11.5px/1.15 var(--display); font-stretch:75%; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); overflow-wrap:anywhere }
.stages button:first-child { border-left:0 }
.stages button.past { color:var(--ink) }
.stages button.now { background:var(--accent); color:var(--on-accent) }
.back { align-self:flex-start }
@media (max-width:480px) { .stages { grid-template-columns:repeat(3,1fr) } .stages button:nth-child(n+4) { border-top:1px solid var(--line) } .stages button:nth-child(4) { border-left:0 } }
.pre { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); font-size:14.5px; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

#q { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--ink); background:var(--sheet); border-radius:var(--r-s) }

nav { position:fixed; z-index:20; left:0; right:0; bottom:0; background:var(--sheet); border-top:1px solid var(--ink);
  padding-left:max(0px, env(safe-area-inset-left, 0px)); padding-right:max(0px, env(safe-area-inset-right, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px) }
nav div { max-width:680px; margin-inline:auto; display:grid; grid-template-columns:repeat(5,1fr) }
nav button { height:var(--nav-h); font:600 12.5px/1 var(--display); font-stretch:85%; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); position:relative }
nav button[aria-current="page"] { color:var(--ink); box-shadow:inset 0 3px 0 var(--accent) }
nav .badge { font:500 11px/1 var(--mono); color:var(--on-accent); background:var(--red); padding:2px 5px; margin-left:4px; letter-spacing:0 }
.fab { border-radius:50%; display:grid; place-items:center; position:fixed; z-index:21; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px)); width:56px; height:56px; padding:0; background:var(--sheet); color:var(--accent); font:500 32px/1 var(--body); box-shadow:0 2px 10px rgba(0,0,0,.25) }
@media (min-width:760px) and (max-width:959px) { .fab { right:max(24px, calc(50vw - 330px)) } }

.scrim { position:fixed; inset:0; z-index:30; background:var(--scrim); display:flex; align-items:flex-end; justify-content:center }
.sheet { border-radius:var(--r) var(--r) 0 0; background:var(--sheet); width:100%; max-width:560px; max-height:92%; overflow:auto; border-top:2px solid var(--ink);
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:16px calc(16px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:14px }
@media (min-width:760px) { .scrim { align-items:center } .sheet { border:1px solid var(--ink); border-top-width:2px; border-radius:var(--r) } }
.sheet > * { flex-shrink:0 }
.sheet h2 { font:700 26px/1.05 var(--display); font-stretch:72%; text-transform:uppercase }
.sheet-head { display:flex; justify-content:space-between; align-items:center; gap:12px }
.field { display:flex; flex-direction:column; gap:4px; min-width:0 }
.field label, .legend { font:500 12px/1.3 var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.03em }
.field input,.field select,.field textarea { width:100%; max-width:100%; min-width:0; min-height:46px; padding:10px; border:1px solid var(--line); background:var(--field); border-radius:var(--r-s); font-size:16px }
.field input,.field textarea { -webkit-appearance:none; appearance:none }
.field textarea { min-height:110px; resize:vertical }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (max-width:380px) { .two { grid-template-columns:1fr } }
.hint { font-size:13px; color:var(--muted) }
.seg { border-radius:var(--r-s); overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line) }
.seg label { position:relative; min-height:44px; display:grid; place-items:center; text-align:center; padding:4px; border-left:1px solid var(--line); font-size:14px; cursor:pointer; overflow-wrap:anywhere }
.seg label:first-of-type { border-left:0 }
.seg input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; touch-action:manipulation }
.seg input:checked + span { font-weight:600; color:var(--accent) }
.seg label:has(input:checked) { box-shadow:inset 0 -3px 0 var(--accent) }
.seg label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:-2px }
.actions { display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap }
.actions > div { display:flex; gap:8px; margin-left:auto }

#toast { border-radius:var(--r-s); position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + 80px + env(safe-area-inset-bottom, 0px)); background:var(--ink); color:var(--sheet); padding:10px 14px; font-size:14px; max-width:calc(100% - 32px); width:max-content }
@media (prefers-reduced-motion: no-preference) { .scrim .sheet { animation:rise .16s ease-out } @keyframes rise { from { transform:translateY(14px) } } }

.login { border-radius:var(--r); display:flex; flex-direction:column; gap:14px; background:var(--sheet); color:var(--ink); padding:16px; border:1px solid var(--line) }
.toggle-row { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap }