/*
  FORGE — the build board. Parchment, one flat scrolling list.

  ⚖ DAVID'S RULINGS, WHICH THIS STYLESHEET EXISTS TO OBEY:

  1. ONE FLAT LIST. No bands, no grouping by phase. There is exactly one <ul> and every
     row is a sibling of every other row. Nothing here may introduce a section.
  2. STATE IS A WORD, NEVER A GLYPH. "I don't get the system." Every phase renders as
     text — BUILDING, LIVE, PARKED, IDEA, NOT ARMED, RETIRED. Colour is a quiet second
     signal behind the word; it never carries meaning on its own, so the board still
     reads correctly in greyscale and to anyone who cannot separate ochre from green.
  3. HIS ORDER IS THE ONLY ORDER. Nothing in this file reorders anything. There is no
     `order:` property, no flex-direction reversal, no :nth-child rule that moves a row.
  4. THE PARAGRAPH IS THE PRODUCT. `.detail` has no max-height, no line-clamp, no
     ellipsis and no overflow:hidden. The board's whole purpose is to put David back
     inside a problem he has not held in his head for weeks; a truncated paragraph is
     the one failure that makes the wing pointless.
  5. THE NEEDS-YOU BLOCK LIVES ON THE ROW. It is a child of the <li>, so it travels with
     the row through a drag and cannot be orphaned into a band of its own.

  Type size is fixed by the A−/A+ ladder on the root font-size; the layout reflows around
  it. Phone first: proven down to 390px, and every flex boundary has min-width:0 so a long
  unbroken name cannot push the controls off the right edge (that shipped on Todo once).
*/

:root{
  --paper:#F0EAE0; --card:#FBF8F2; --hair:#DFD6C6; --dot-hair:#E4DCCC;
  --ink:#3A322A; --muted:#8B8271; --thin:#A2988A;
  --ochre:#B8892B; --brown:#4A3E31; --green:#5F7F4A; --red:#A6533A;
  --gold:#9A6F12; --gold-fill:#FBF1D8; --gold-edge:#E2C87E;
  --navy:#0F2436;
  --fs:17px;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;min-width:0}
html{font-size:var(--fs)}
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:1rem;line-height:1.4;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button,input,textarea{font:inherit;color:inherit;max-width:100%}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.hidden{display:none !important}
body.dragging{user-select:none;-webkit-user-select:none}

/* ── the gate ───────────────────────────────────────────────────────────── */
#gate{display:flex;flex-direction:column;justify-content:center;gap:11px;min-height:100vh;
  padding:24px 20px;max-width:520px;margin:0 auto;width:100%}
#gate.gone{display:none}
#gate .mark{width:60px;height:60px}
#gate .mark .haft{stroke:var(--brown)}
#gate .mark .spark{stroke:var(--ochre)}
#gate h1{font-size:1.9rem;margin:0}
#gate .blurb{margin:0 0 8px;color:var(--muted)}
#gate input{min-height:52px;padding:0 14px;background:var(--card);
  border:1px solid var(--hair);border-radius:12px;font-size:1rem}
#gate button{min-height:52px;background:var(--brown);color:#F6F1E7;border-radius:12px;font-weight:700}
#gate button.secondary{background:transparent;color:var(--muted);border:1px solid var(--hair);
  min-height:46px;font-weight:400;font-size:.94rem}
.msg{color:var(--red);font-size:.9rem;min-height:1.2em}

/* ── the board ──────────────────────────────────────────────────────────── */
#app{display:none;flex-direction:column;min-height:100vh}
#app.on{display:flex}

.masthead{display:flex;align-items:center;gap:12px;width:100%;max-width:680px;
  margin:0 auto;padding:16px 16px 4px}
.masthead h1{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:-.01em}
.dot{width:11px;height:11px;border-radius:50%;background:var(--green);flex:none;margin-left:auto}
.dot.off{background:var(--ochre)} .dot.bad{background:var(--red)}

#main{width:100%;max-width:680px;margin:0 auto;padding:0 16px 96px}

/* THE HEADER LINE. Exactly: "<n> in flight · <n> live · <n> on you". */
.tally{margin:0 0 14px;color:var(--muted);font-size:.95rem;font-family:var(--sans)}
.tally .you{color:var(--gold);font-weight:600}

.banner{margin:0 0 12px;padding:11px 13px;border:1px solid var(--gold-edge);border-radius:12px;
  background:var(--gold-fill);font-size:.88rem;color:var(--gold);font-family:var(--sans)}

/* idea intake — manual entry only, no model, no button but Add */
.addbar{display:flex;align-items:center;gap:9px;margin:0 0 18px;
  background:var(--card);border:1px solid var(--hair);border-radius:15px;padding:6px 6px 6px 14px}
.addbar input{flex:1 1 auto;min-width:0;min-height:54px;border:0;background:transparent;font-size:1.02rem}
.addbar input::placeholder{color:var(--thin)}
.addbar button{flex:none;min-height:54px;padding:0 20px;border-radius:12px;
  background:var(--brown);color:#F6F1E7;font-weight:700;font-size:1rem;font-family:var(--sans)}
.addbar button[disabled]{opacity:.38}

/* ── rows ───────────────────────────────────────────────────────────────── */
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.rows li{
  position:relative;padding:14px 14px 15px;background:var(--card);
  border:1px solid var(--hair);border-radius:15px;
}
.rows li.lifted{box-shadow:0 16px 34px -18px rgba(58,50,42,.75);border-color:var(--thin);
  transform:scale(1.015)}
.rows li.retired{opacity:.55}
.rows li.anvil{border-color:var(--ochre);box-shadow:inset 3px 0 0 0 var(--ochre)}
.dropline{height:3px;background:var(--ochre);border-radius:3px;margin:0}

.marks{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 8px;padding-right:38px}
.chip{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--hair);
  color:var(--muted);white-space:nowrap}
/* Colour is the SECOND signal. The word is the first, and it is always present. */
.chip.p-building{color:#8A5F14;border-color:var(--gold-edge);background:var(--gold-fill)}
.chip.p-live{color:var(--green);border-color:#C4D2B6;background:#F1F5EC}
.chip.p-built_not_armed{color:var(--red);border-color:#E0C3B7;background:#FAEFEA}
.chip.p-conceived{color:var(--muted)}
.chip.p-parked{color:var(--thin);border-style:dashed}
.chip.p-retired{color:var(--thin)}
.chip.anvilmark{color:#fff;background:var(--ochre);border-color:var(--ochre)}
.chip.owner{color:var(--brown);border-color:var(--dot-hair);background:var(--paper)}
.chip.stale{color:var(--red);border-color:#E4CBC1;text-transform:none;letter-spacing:.02em;
  font-weight:600;font-size:.68rem}
.chip.queued{color:var(--ochre);border-color:var(--gold-edge);text-transform:none;
  letter-spacing:.02em;font-weight:600;font-size:.68rem}

/* The name WRAPS in full, always. He must never open a row just to read what it is. */
.ttl{display:block;font-size:1.18rem;font-weight:700;line-height:1.28;
  overflow-wrap:anywhere;white-space:pre-wrap}
.one{margin:7px 0 0;color:var(--muted);font-size:.98rem;overflow-wrap:anywhere;white-space:pre-wrap}

/* NEEDS YOU — gold, on the row, carrying the one sentence that would unblock it. */
.needs{margin:11px 0 0;padding:10px 12px;border:1px solid var(--gold-edge);border-radius:12px;
  background:var(--gold-fill)}
.needs .lbl{display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 5px}
.needs p{margin:0;color:#6B4E0C;font-size:.98rem;line-height:1.42;overflow-wrap:anywhere;
  white-space:pre-wrap}

/* THE RE-ORIENTATION PARAGRAPH. Never truncated. No max-height, no clamp, no ellipsis. */
.detail{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--dot-hair);
  font-size:1rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.meta{margin:10px 0 0;font-family:var(--sans);font-size:.74rem;color:var(--thin);
  overflow-wrap:anywhere}
.tap{margin:9px 0 0;font-family:var(--sans);font-size:.74rem;color:var(--thin)}

.more{position:absolute;top:8px;right:6px;min-width:40px;min-height:40px;color:var(--thin);
  font-size:1.25rem;letter-spacing:.09em;line-height:1}

/* inline editors — never prompt(), which is unreliable in an installed iOS app */
.ed{display:block;width:100%;min-width:0;min-height:120px;margin:11px 0 0;padding:11px 12px;
  background:var(--paper);border:1px solid var(--ochre);border-radius:12px;
  font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--ink);resize:vertical}
.ed.short{min-height:56px}
.edhint{margin:6px 0 0;font-family:var(--sans);font-size:.74rem;color:var(--thin)}
.edrow{display:flex;gap:9px;margin:9px 0 0}
.edrow button{flex:1 1 0;min-height:46px;border-radius:11px;font-family:var(--sans);
  font-size:.92rem;border:1px solid var(--hair);background:var(--paper);color:var(--muted)}
.edrow button.ok{background:var(--brown);color:#F6F1E7;border-color:var(--brown);font-weight:700}

.empty{padding:28px 4px;color:var(--muted)}

/* ── A− / A+ ────────────────────────────────────────────────────────────── */
.ctl{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;gap:8px;z-index:30}
.ctl button{min-width:52px;min-height:46px;border:1px solid var(--hair);border-radius:12px;
  background:rgba(251,248,242,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--sans);font-size:1rem;color:var(--ink)}
.ctl button[disabled]{opacity:.32}

/* ── the ⋯ sheet ────────────────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;background:rgba(38,32,26,.5);display:none;align-items:flex-end;z-index:50}
.sheet.on{display:flex}
.sheetbox{width:100%;max-height:84vh;overflow:auto;background:var(--card);
  border-radius:18px 18px 0 0;padding:12px 12px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair)}
.sheetbox h2{margin:8px 6px 4px;font-size:1.02rem;font-weight:700;overflow-wrap:anywhere}
.sheetbox .grp{margin:14px 6px 4px;font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--thin)}
.act{display:block;width:100%;text-align:left;min-height:54px;padding:0 14px;
  border-radius:12px;font-size:1.02rem;color:var(--ink)}
.act:active{background:var(--paper)}
.act.on{color:var(--ochre);font-weight:700}
.act.gold{color:var(--gold)}
.act.danger{color:var(--red)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--brown);
  color:#F6F1E7;padding:13px 16px;border-radius:13px;font-family:var(--sans);font-size:.9rem;
  display:flex;gap:14px;align-items:center;z-index:60;max-width:92vw}
.toast button{color:#F0C86A;font-weight:700}