/* ============================================================
   tend — the cockpit surface, adapted from cockpitprototypev4
   per core spec §6.13. Calm / dense / accessible. Named marks
   carry shape + label, never colour alone. No user settings
   exist anywhere on this surface.
   ============================================================ */
:root{
  --paper:#f6f5f1; --panel:#fffefb; --ink:#1b1a17;
  /* Both greys carry real text, so both clear 4.5:1 on every surface they land
     on — including the active rail row and the warn-soft cards (1.4.3). The
     tertiary tone stays a tone: what separates it is size and small caps, not a
     lightness nobody can read. */
  --muted:#5a5852;  /* secondary prose: 5.86:1 at worst */
  --faint:#63615c;  /* small labels:   4.90:1 at worst */
  --hair:#dcdad2; --hair2:#e7e5dd;
  --edge:#8f8e89;   /* the border that identifies a control: 3:1 everywhere (1.4.11) */
  --accent:#2f5d7c; --accent-soft:#eaf0f4;
  --esc:#7c2d2d; --esc-soft:#f3e7e5;
  --warn:#7e6411; --warn-soft:#f4eedb;
  --ok:#3f6b3f;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --r:7px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1{font-size:21px;letter-spacing:-.2px;margin:2px 0 4px}
h2{font-size:15px;margin:22px 0 8px}
h3{font-size:13px;margin:12px 0 6px}
.muted{color:var(--muted);font-weight:400}
.hint{color:var(--muted);font-size:12.5px}
.lede{color:var(--muted);font-size:12.5px;margin:0 0 14px;max-width:62ch}
.empty{color:var(--muted);font-style:italic;font-size:12.5px}
.spacer{flex:1}

/* ---------- shell: topbar across, views down the left, one scrolling main ---------- */
.app{display:grid;grid-template-columns:212px 1fr;grid-template-rows:auto 1fr;height:100vh;min-height:0}
.topbar{grid-column:1/3;display:flex;align-items:center;gap:10px;padding:9px 16px;background:var(--panel);border-bottom:1px solid var(--hair);flex-wrap:wrap;row-gap:6px}
.brand{font-weight:650;letter-spacing:.2px;line-height:1.15}
.brand small{display:block;font-weight:400;color:var(--faint);font-size:11px;letter-spacing:.3px}
.top-date{color:var(--muted);font-size:12.5px}
.top-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge);background:var(--panel);border-radius:var(--r);padding:5px 9px;color:var(--ink);font-size:13px}
.top-btn:hover{border-color:var(--faint)}
.top-btn.plus{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.topbar-search input{border:1px solid var(--edge);background:#fff;border-radius:var(--r);padding:5px 9px;font:inherit;font-size:13px;width:9.5rem}
.inline{display:inline}

/* ---------- the views rail ---------- */
.nav{background:var(--paper);border-right:1px solid var(--hair);padding:10px 8px;overflow:auto}
.nav-h{font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);margin:14px 8px 5px}
.nav-h:first-child{margin-top:2px}
.nav a{display:flex;width:100%;align-items:center;gap:9px;padding:6px 9px;border-radius:6px;color:var(--ink);text-align:left;text-decoration:none;font-size:13px}
.nav a:hover{background:var(--hair2)}
.nav a[aria-current="page"]{background:#ece9e0;font-weight:600}
.nav .g{width:15px;text-align:center;color:var(--muted);font-size:13px}
.nav a[aria-current="page"] .g{color:var(--accent)}
.nav .count{margin-left:auto;color:var(--faint);font-size:11px;font-family:var(--mono)}
.nav .who{display:block;margin:14px 9px 0;padding-top:10px;border-top:1px solid var(--hair);color:var(--faint);font-size:11.5px}

/* ---------- main ---------- */
.main{overflow:auto;min-height:0}
.wrap{max-width:840px;margin:0 auto;padding:20px 24px 80px}
.page-flash{max-width:840px;margin:10px auto 0;padding:0 24px;font-size:12.5px}
.vhead{display:flex;align-items:baseline;gap:12px;margin:2px 0 4px;flex-wrap:wrap}
.vhead h1{margin:0}
.vhead .sub{color:var(--muted);font-size:12.5px}
.stamp{margin-left:auto;color:var(--faint);font-size:11.5px;font-family:var(--mono)}
.breadcrumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px;color:var(--faint);font-size:11.5px}
.breadcrumbs a{border:1px solid transparent;border-radius:5px;color:var(--accent);padding:2px 4px;min-height:24px;display:inline-flex;align-items:center}
.breadcrumbs a:hover{border-color:var(--hair);background:#fff}
.breadcrumbs .current{color:var(--ink);font-weight:600}
.breadcrumbs .sep{color:var(--hair);font-family:var(--mono)}

.notice{background:var(--accent-soft);border:1px solid #cfe0ea;border-radius:var(--r);padding:8px 11px;font-size:12.5px}
.error{color:var(--esc);background:var(--esc-soft);border:1px solid #d8b3af;border-radius:var(--r);padding:8px 11px;font-size:12.5px}
.banner{display:flex;gap:10px;align-items:center;background:var(--warn-soft);border:1px solid #e6dcb8;border-radius:var(--r);padding:8px 11px;font-size:12.5px;margin:10px 0}
.banner.calm{background:var(--accent-soft);border-color:#cfe0ea}
.banner .b-ico{font-weight:700}
.cap-bar{flex:1;height:10px;border-radius:6px;background:var(--hair2);overflow:hidden;display:flex;min-width:120px}
.cap-bar i{display:block;height:100%}
.cap-bar .used{background:var(--accent)}
.cap-bar .buf{background:repeating-linear-gradient(45deg,#cdd7df,#cdd7df 4px,#dde4ea 4px,#dde4ea 8px)}

/* ---------- word-hover popover (capacity) ---------- */
.word-hover{position:relative;display:inline-flex;align-items:center}
.word-menu{border:none;background:none;color:var(--accent);font:inherit;padding:0 2px;min-height:24px;text-decoration:underline;text-underline-offset:3px}
.word-menu:hover,.word-menu:focus-visible{color:var(--ink);outline:none}
.word-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:34;width:min(320px,calc(100vw - 40px));background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.16);padding:9px 10px;color:var(--ink);font-size:12.5px;line-height:1.45}
.word-hover:hover .word-pop,.word-hover:focus-within .word-pop{display:block}

/* ---------- plan lines (§6.13 line anatomy) ---------- */
.daygroup{margin-top:6px}
.daygroup .g-h{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:16px 2px 6px;display:flex;gap:8px;align-items:center}
.daygroup .g-h .rule{flex:1;height:1px;background:var(--hair)}
/* The region beneath the day (ADR-215): every section folds at a touch. The
   marker is our own caret so the header keeps the shape every other group header has. */
details.daygroup>summary{cursor:pointer;list-style:none;min-height:24px;padding:4px 0}
details.daygroup>summary::-webkit-details-marker{display:none}
details.daygroup>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
details.daygroup>summary .disc{transition:transform .12s ease;display:inline-block;font-size:11px;color:var(--faint)}
details.daygroup:not([open])>summary .disc{transform:rotate(-90deg)}
.beneath{margin-top:10px}
.tick-rows td{vertical-align:top}
.tick-rows tr.ticked td:first-child{color:var(--muted)}
.tick-value{margin-top:4px}
.line{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);margin:6px 0;overflow:visible;position:relative}
.line.crit{border-color:#e3c9c6}
.line.done{opacity:.62}
.line.done .item-title{text-decoration:line-through;color:var(--muted)}
.row{display:flex;align-items:center;gap:11px;padding:10px 12px;cursor:pointer}
.row:hover{background:#fcfbf7}
.chk{flex:none;width:24px;height:24px;border:1.6px solid var(--muted);border-radius:5px;background:#fff;position:relative;padding:0}
.chk:hover{border-color:var(--accent)}
.chk:focus-visible{outline:2px solid var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.line.done .chk{background:var(--ok);border-color:var(--ok)}
.line.done .chk::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk[disabled]{cursor:default}
/* A question is completed by answering it, so its line carries the question
   rather than a checkbox that could only refuse. */
.chk-q{flex:none;width:24px;height:24px;border:1.6px dashed var(--edge);border-radius:5px;display:grid;place-items:center;color:var(--accent);font-weight:700;font-size:12px}
/* The time a line shows is the estimate until an actual replaces it. */
.time-field{display:inline-flex;align-items:center;gap:4px}
.time-field input.tiny{width:3.4rem;border:1px solid var(--edge);border-radius:5px;padding:2px 4px;font:inherit;font-size:12px;min-height:24px}
.time-field .mini{padding:0 6px;min-height:24px}
.grip{flex:none;width:24px;height:24px;border:none;background:none;color:var(--faint);display:grid;place-items:center;font-size:13px;line-height:1;cursor:grab;border-radius:4px;padding:0}
.grip:hover{color:var(--accent);background:var(--accent-soft)}
.line.dragging{opacity:.5;border-style:dashed}
.line.drop-before{box-shadow:0 -3px 0 -1px var(--accent)}
.line.drop-after{box-shadow:0 3px 0 -1px var(--accent)}
td.acts{white-space:nowrap}
td.acts button{margin-right:6px}
.rank{flex:none;min-width:19px;height:19px;border-radius:5px;border:1px solid #c9b9d6;background:#f5f0f8;color:#5a3d73;font:700 11px/1 var(--mono);display:inline-grid;place-items:center}
.ttl{flex:1;min-width:0}
.ttl .t{font-weight:550;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.item-title{font-weight:650}
.item-title a{color:var(--ink)}
.line-tabs{display:inline-flex;align-items:center;flex-wrap:wrap;gap:9px;font-weight:400;color:var(--ink);font-size:12.5px}
/* 2.5.8: every section word is a target, and "All" is the short one — it takes
   the floor by min-width rather than by a wider label nobody asked for. */
.line-tabs button{border:none;background:none;padding:0 2px;min-height:24px;min-width:24px;color:var(--ink);font:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:3px}
.line-tabs button:hover,.line-tabs button[aria-pressed="true"]{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ttl .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:3px;color:var(--muted);font-size:12px}
/* Defer… stands on the second row, sized to it. */
.meta .meta-act{min-height:24px;padding:1px 7px;font-size:11.5px;color:var(--accent)}
.matter{color:var(--accent)}
.date{font-family:var(--mono);font-size:12px;color:var(--ink)}
.date.blank{color:var(--faint)}
.field-label{color:var(--faint);font-family:var(--sans);font-size:11.5px}
.excess{color:var(--warn);font-size:11.5px;font-family:var(--mono)}
.winrange{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
/* A line's marks give way before the line's own words. They wrap onto a second
   row and a long one truncates, so what a line carries can never squeeze what it
   says down to a column one word wide. */
.right{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.right .mark{min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:16rem}
.caret{color:var(--faint);transition:.15s;font-size:12px;border:none;background:none;padding:0;line-height:1;width:24px;height:24px;display:inline-grid;place-items:center}
.caret:hover{color:var(--accent)}
.line.open .caret,.caret[aria-expanded="true"]{transform:rotate(90deg)}
/* the second line of a line: what the dates themselves are (CORE-11 label) */
.warnline{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:2px;color:var(--ink);font-size:12.5px}
.tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--muted);border:1px dashed var(--hair);border-radius:4px;padding:0 5px;text-transform:uppercase}
/* a chain question: an ordinary line that waits for your words */
.line-q{border-left:3px solid var(--accent)}
.branch-arms{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;align-items:center}
.branch-arms form{margin:0}
.branch-result{font-size:12.5px;color:var(--ok);font-weight:600}

/* marks — shape + label, never colour alone */
.mark{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border:1px solid var(--hair);border-radius:5px;padding:1px 6px;background:#fff;white-space:nowrap}
a.mark{min-height:24px}
.mark .gly{font-size:11px}
.mark.pin{border-color:#c9b9d6;background:#f5f0f8;color:#5a3d73}
.mark.critical{border-color:#d8b3af;background:var(--esc-soft);color:var(--esc);font-weight:800;letter-spacing:.3px}
.mark.def{border-color:var(--hair);background:#f1efe9;color:var(--muted)}
.mark.check{border-color:#bcd0c2;background:#eef4ef;color:#3f6b3f}
.mark.warn{border-color:#e6dcb8;background:var(--warn-soft);color:var(--warn)}
.mark.window{border-color:#bcd0c2;background:#eef4ef;color:var(--ok)}
.mark.wait{border-color:#bcd0c2;background:#eef4ef;color:#3f6b3f}
.mark.question{border-color:#cfe0ea;background:var(--accent-soft);color:var(--accent)}
a.mark{text-decoration:none}

/* expansion (§6.13: Description · Notes · Resources · Why) */
.detail{display:none;border-top:1px solid var(--hair2);background:#fcfbf8;padding:4px 12px 12px 41px;cursor:default}
.line.open .detail{display:block}
/* Each section folds on its own; `hidden` is the whole of its state, so the
   strip at the head and the heading in the body report the same one thing. */
.line-section{display:block;margin-top:10px}
.line-section[hidden]{display:none}
.s-h{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.s-fold{border:none;background:none;padding:0;font:inherit;color:var(--ink);letter-spacing:inherit;text-transform:inherit;
  display:inline-flex;align-items:center;gap:5px;min-height:24px}
.s-fold:hover{color:var(--accent)}
/* The words and the headings carry no triangle: the caret at the right is the
   one disclosure mark. A word's state shows as its underline and colour. */
.s-body{font-size:12.5px}
.edit-block{min-height:34px;border:1px solid var(--hair2);border-radius:6px;background:#fff;padding:7px 9px;font-size:12.5px}
.why-card{background:#fff;border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:6px;padding:8px 11px;margin:6px 0;font-size:12.5px}
.why-card .lab{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.why-card .factors{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.why-card .factors span{font-size:11px;background:var(--accent-soft);border:1px solid #d3e0e9;border-radius:4px;padding:1px 7px}
.pill{display:inline-block;border:1px solid var(--hair);border-radius:20px;padding:1px 9px;font-size:11.5px;background:#fff;margin:0 4px 4px 0}
.pill.link::before{content:"↗ ";color:var(--accent)}
/* Save stands at the bottom right of every expansion, whichever sections are
   unfolded — the acts run left, and it is always the last thing. */
.det-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.det-actions .save,.bar.end .save{margin-left:auto}
.bar.end{display:flex}
.ways-in{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);background:#fff;border-radius:var(--r);padding:9px 10px;margin-top:10px}
.ways-in form{display:inline}
/* The ＋ a list adds with: bare, and at the right, top and bottom. */
.list-add{display:flex;justify-content:flex-end;margin:.6rem 0 .25rem}
.vhead .list-add{margin:0}
.mini{border:1px solid var(--edge);background:#fff;border-radius:6px;padding:5px 10px;font-size:12px}
.mini.primary{border-color:var(--accent);color:var(--accent)}
.mini.danger{border-color:#d8b3af;color:var(--esc)}
.mini[disabled]{cursor:default;opacity:.58}
.note-thread{font-size:12.5px}
.note-thread .n{padding:6px 0;border-bottom:1px dashed var(--hair2)}
.note-thread .n .when{color:var(--faint);font-size:11px;font-family:var(--mono)}

/* three-act defer box + follow-up offer */
.choicebox{display:none;flex-direction:column;gap:6px;border:1px solid var(--hair);background:#fff;border-radius:var(--r);padding:9px 10px;margin-top:9px}
.choicebox.show{display:flex}
.choicebox .cb-h{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.choice{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--hair2);border-radius:6px;background:#fff;padding:7px 9px;text-align:left;font-size:12.5px;color:var(--ink);width:100%}
.choice:hover,.choice:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}
.choice .cg{flex:none;width:17px;color:var(--accent);font-weight:700}
.choice b{font-weight:650}
.choice b span{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;font-weight:400}
.choice-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.choice-row input[type="date"],.choice-row input[type="datetime-local"]{border:1px solid var(--edge);border-radius:6px;padding:4px 6px;font:inherit;font-size:12px}

/* ---------- cards and their sections (the house idiom for everything but the plan) ---------- */
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:13px 15px;margin:10px 0}
.card h3{margin:0 0 8px;font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sec{margin-top:10px}
.sec .s-h .more{color:var(--accent);text-transform:none;letter-spacing:0;font-size:11.5px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:3px 10px;font-size:12.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.confirm{background:var(--warn-soft);border:1px solid #e6dcb8;border-radius:var(--r);padding:9px 11px;font-size:12.5px;margin-top:8px}

/* ---------- templates: variables, the graph, the re-flow (chains §3–§8) ---------- */
.vars{display:flex;flex-direction:column;gap:5px}
.var{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;padding:6px 9px;border:1px solid var(--hair2);border-radius:6px;background:#fff}
.var .vk{width:170px;color:var(--muted)}
.var .vv{font-weight:600}
.var .vt{margin-left:auto;color:var(--faint);font-size:11px;font-family:var(--mono)}
.var.unset{background:var(--warn-soft);border-color:#e6dcb8}
.var.unset .vv{color:var(--warn)}
.var .vwarn{flex-basis:100%;color:var(--warn);font-size:11.5px}
.var form{margin:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.var input,.var select{border:1px solid var(--edge);border-radius:6px;padding:4px 6px;font:inherit;font-size:12px;background:#fff;width:auto}
.reflowbox .rf{font-size:12px;padding:5px 9px;border:1px dashed var(--hair);border-radius:5px;margin:4px 0;background:#fff}
.reflowbox .rf.hold{color:var(--faint)}
.reflowbox .rf.move{color:var(--accent)}
.reflowbox .rf.clash{color:var(--esc);border-color:#d8b3af;background:var(--esc-soft)}

/* A chain's steps are ordinary lines; what a value did to one is said on it. */
.chain-steps .line.dormant{background:var(--warn-soft)}
.chain-steps .line.na .item-title{text-decoration:line-through;color:var(--muted)}
.anchor-text{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0 0 4px}
details.chain-act{display:inline-block}
details.chain-act[open]{display:block;flex-basis:100%}
details.chain-act>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-height:24px;padding:0 2px;font-size:12px;color:var(--accent)}
details.chain-act>summary::-webkit-details-marker{display:none}
details.chain-act>summary.danger{color:var(--esc)}
details.chain-act>summary:hover{text-decoration:underline;text-underline-offset:3px}

/* Template authoring: one collapsible block per step, its dating on two fields. */
.node-list{display:flex;flex-direction:column;gap:6px}
details.node-edit{border:1px solid var(--hair);border-radius:var(--r);background:#fff;padding:8px 10px}
details.node-edit>summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:24px}
details.node-edit>summary .grip{color:var(--faint)}
label.anchor-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
label.anchor-row .field-label{flex:none;min-width:8.5em}
label.anchor-row select{max-width:26em}
label.anchor-row input{flex:1;min-width:14em}

/* one-step undo bar */

/* what arrived after the plan was built: the tasks themselves, each an ordinary
   line under its own head, told apart by a rule at the left */
.arrived .line{border-left:3px solid var(--accent)}
.g-h .badge{font-size:10px;text-transform:uppercase;letter-spacing:.4px;background:var(--accent);color:#fff;border-radius:4px;padding:1px 5px;font-weight:700;margin-right:4px}
.ways-in .inline{display:inline}

/* honest empty state */
.empty-state{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);text-align:center;padding:30px 20px;margin-top:14px}
.empty-state .es-t{font-size:15px;font-weight:600;margin-bottom:6px}
.empty-state p{max-width:46ch;margin:0 auto 14px;color:var(--muted);font-size:12.5px}

/* refresh bar */
.arrangebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 2px 2px;font-size:11.5px;color:var(--muted)}
.arrangebar .ab-k{color:var(--faint);text-transform:uppercase;letter-spacing:.5px;font-size:10.5px}
.copy-compact{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.copy-compact .help-dot{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--edge);background:#fff;color:var(--accent);display:inline-grid;place-items:center;font:700 11px/1 var(--sans);padding:0}
.copy-compact .help-dot:hover,.copy-compact .help-dot:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.copy-compact .help-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);width:min(360px,calc(100vw - 40px));z-index:34;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.16);padding:9px 10px;color:var(--ink);font-size:12.5px;line-height:1.45;text-align:left}
.copy-compact:hover .help-pop,.copy-compact:focus-within .help-pop{display:block}

/* check-on-these */

/* ---------- capture sheet (§6.2) ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,18,15,.28);display:none;z-index:40}
.scrim.show{display:block}
.sheet{position:fixed;z-index:50;background:var(--panel);border:1px solid var(--hair);box-shadow:0 18px 50px rgba(0,0,0,.22);display:none}
.sheet.show{display:block}
#capture{top:54px;left:50%;transform:translateX(-50%);width:min(560px,92vw);border-radius:10px;padding:14px 16px;max-height:82vh;overflow:auto}
.sheet h2{font-size:13px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.sheet h2 .x{margin-left:auto;color:var(--faint);cursor:pointer;font-size:16px;border:none;background:none}
.cap-title{width:100%;border:1px solid var(--edge);border-radius:var(--r);background:#fff;padding:9px 11px;font:inherit;font-weight:650}
.cap-quick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px;font-size:12.5px}
.cap-quick .field-label{font-size:11.5px}
/* A label and the field it names wrap as one thing or not at all: `D:` stranded
   at the end of a row with its date on the next is not a date row. */
.pair{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.cap-quick .caret{margin-left:auto}
.cap-quick input[type="date"]{border:1px solid var(--edge);border-radius:6px;padding:4px 6px;font:inherit;font-size:12px}
.cap-quick label.dl-toggle{display:inline-flex;gap:5px;align-items:center;color:var(--muted);font-size:12px}
.typeahead{border:1px solid var(--hair);background:#fff;border-radius:var(--r);margin-top:6px;overflow:hidden}
.typeahead:empty{display:none}
.lbl{display:block;margin:8px 0 2px}
details.sub-edit{border:1px solid var(--hair2);border-radius:6px;margin:6px 0;padding:0 9px 7px}
details.sub-edit summary{cursor:pointer;padding:7px 0;font-size:12.5px;color:var(--muted);min-height:24px;display:flex;align-items:center;list-style:revert}
details.sub-edit[open] summary{color:var(--ink)}
details.add-matter{display:inline-block}
details.add-matter summary{cursor:pointer;display:inline-flex;align-items:center;min-height:26px;padding:4px 11px;border:1px solid var(--edge);border-radius:6px;background:#fff;font-size:12.5px;list-style:none}
details.add-matter summary::-webkit-details-marker{display:none}
details.add-matter summary:hover{border-color:var(--accent)}
details.add-matter[open]{display:block}
a.btn{display:inline-flex;align-items:center;min-height:26px;padding:4px 11px;border:1px solid var(--edge);border-radius:6px;background:#fff;font-size:12.5px;color:var(--ink);text-decoration:none}
a.btn:hover{border-color:var(--accent);color:var(--accent)}
th a.sort{color:inherit;text-decoration:none}
th a.sort:hover{color:var(--accent)}
.matterpick{display:inline-flex;flex-direction:column;position:relative;min-width:11rem}
.stack .matterpick{width:100%}
.matterpick .typeahead{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:2px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.matterpick [data-mp-input]{width:100%}
.typeahead .ta{padding:7px 11px;border-bottom:1px solid var(--hair2);font-size:12.5px;cursor:pointer;display:block;width:100%;text-align:left;border-left:none;border-right:none;border-top:none;background:#fff}
.typeahead .ta:last-child{border-bottom:none}
.typeahead .ta:hover{background:var(--accent-soft)}
.typeahead .ta .k{color:var(--faint);font-size:11px;float:right}
.typeahead .ta.create{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);background:#fff;border-radius:20px;padding:3px 9px;font-size:12px}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.chip .x{color:var(--faint);cursor:pointer;border:none;background:none;padding:0;font-size:12px;min-width:24px;min-height:24px;display:inline-grid;place-items:center}
/* The sheet opens like a line: its sections stand behind the same caret and the
   same words, which stand on the third line beside Add task and Cancel. */
.cap-third{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.cap-actions{display:flex;gap:8px}
.cap-actions.cap-foot{margin-top:12px}
.sheet .line{border:0;background:transparent;margin:0;overflow:visible}
.sheet .detail{padding:6px 0 0;background:transparent;border-top:1px solid var(--hair2);margin-top:10px}
.sheet .detail .stack{margin:0}
.sheet .cap-note{width:100%;padding:7px 9px;font-size:13px;border:1px solid var(--edge);border-radius:6px;background:#fff}
.legend-note{font-size:11.5px;color:var(--muted)}

/* ---------- forms (auth + full page) ---------- */
label{display:block;margin:0.75rem 0 0.25rem;font-size:0.9rem;font-weight:600}
input,select,textarea{font:inherit}
.stack input,.stack select,.stack textarea,.auth-card input{width:100%;padding:7px 9px;font-size:13.5px;border:1px solid var(--edge);border-radius:6px;background:#fff}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,
a:focus-visible,summary:focus-visible,details.node-edit>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
.auth-card{max-width:22rem;margin:4rem auto;padding:2rem;background:var(--panel);border:1px solid var(--hair);border-radius:10px}
.auth-card h1{margin:0 0 .25rem;font-size:1.3rem}
.auth-card h2{margin:.5rem 0 1rem;font-size:1.05rem}
.auth-card p{color:var(--muted);font-size:.9rem}
.auth-card button[type="submit"]{margin-top:1rem;padding:.5rem 1rem;border:0;border-radius:6px;background:var(--accent);color:#fff}
.bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}
.bar input,.bar select{width:auto;border:1px solid var(--edge);border-radius:6px;padding:5px 8px;font-size:13px;background:#fff}
.bar input[name="description"],.bar input[name="name"],.bar input[name="q"],.bar input[name="body"]{flex:1;min-width:12rem}
.bar button,.quiet{background:#fff;color:var(--accent);border:1px solid var(--edge);border-radius:6px;padding:5px 10px;font-size:12.5px;margin:0}
.bar button:hover,.quiet:hover{border-color:var(--faint)}
.quiet.danger{color:var(--esc)}
.quiet-link{font-size:12px;color:var(--accent);background:none;border:none;padding:0 2px;min-height:24px;display:inline-flex;align-items:center}
.stack{margin:1rem 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:0 1.25rem}
.short{max-width:8rem}

/* A date is picked; a clock time is typed, with am or pm set by a click
   (CORE-19). Radios rather than script, so the choice works with none. */
.dt{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.dt input[type="date"]{border:1px solid var(--edge);border-radius:6px;padding:4px 6px;font:inherit;font-size:12.5px;background:#fff}
.dt input[type="text"]{width:4.6rem;border:1px solid var(--edge);border-radius:6px;padding:4px 6px;font:inherit;font-size:12.5px;background:#fff;min-height:24px}
.dt-at{color:var(--muted);font-size:12px}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:6px;overflow:hidden;background:#fff}
.seg-cell{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:24px;padding:3px 8px;
  font-size:12px;color:var(--ink);cursor:pointer}
.seg-cell + .seg-cell{border-left:1px solid var(--edge)}
.seg-cell input{position:absolute;opacity:0;width:1px;height:1px}
.seg-cell:has(input:checked){background:var(--accent);color:#fff}
.seg-cell:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.inline-lbl{color:var(--muted);font-size:12px}
.inline-check{font-weight:400;display:inline-flex;gap:.4rem;align-items:center}
.inline-check input{width:auto}
.acts-bar{border-top:1px solid var(--hair);padding-top:.75rem}

/* ---------- row tables (review, matters, trash, ledger) ---------- */
table.rows{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r)}
table.rows th{text-align:left;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:7px 9px;border-bottom:1px solid var(--hair)}
table.rows td{padding:7px 9px;border-bottom:1px solid var(--hair);vertical-align:top;font-size:13px}
table.rows tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
tr.inactive-row td{color:var(--muted)}
tr.dragging{opacity:.5}
td.grip{cursor:grab;color:var(--faint);width:1.2rem;user-select:none}
/* Completion is the same gesture here as on the day: a box at the head of the
   row, before the title. */
td.chk-cell{width:1.9rem;padding-right:0}
/* The whole task, opened where it is listed. */
.row-panel{margin-top:10px;padding:10px 12px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper)}
.row-panel h2{font-size:12.5px;margin:14px 0 6px}
.row-panel h3{font-size:11.5px;margin:10px 0 4px}
button.row-open{background:none;border:none;padding:0}
.row-edit{display:flex;gap:.35rem;flex-wrap:wrap}
.row-edit input,.row-edit select{font-size:12.5px;padding:4px 6px;width:auto;border:1px solid var(--edge);border-radius:6px;background:#fff}
.row-edit input[name="description"]{flex:1 1 14rem}
.marks{margin-top:.3rem;display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}
td.state{font-size:12px;color:var(--muted)}
td.acts{white-space:nowrap;position:relative}
td.acts form{margin:0 .15rem 0 0}
details.defer-box{display:inline-block}
details.defer-box summary{cursor:pointer;list-style:none;font-size:12px;color:var(--accent);min-height:24px;display:inline-flex;align-items:center;padding:0 2px}
.defer-acts{position:absolute;right:0;background:#fff;border:1px solid var(--hair);border-radius:8px;padding:.6rem;box-shadow:0 10px 24px rgba(0,0,0,.14);z-index:10;display:flex;flex-direction:column;gap:.4rem;min-width:230px}
.defer-acts form{margin:0;display:flex;gap:.4rem;align-items:center}
.defer-acts input[type="date"],.defer-acts input[type="datetime-local"],.defer-acts input[type="text"],.defer-acts input:not([type]){border:1px solid var(--edge);border-radius:6px;padding:3px 6px;font-size:12px}

/* ---------- misc surfaces ---------- */
ul.notes{list-style:none;padding:0}
ul.notes li{padding:.35rem 0;border-bottom:1px dashed var(--hair2);font-size:13px}
details.resource{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:.5rem .75rem;margin:.4rem 0;font-size:13px}
.filters select{font-size:12.5px}
.print-stamp{display:none}

/* ---------- mobile cockpit: real reflow ≤640px (§6.13) ---------- */
#mtabs,#mfab{display:none}
/* On a narrow screen the line's section tabs collapse into one menu rather
   than vanishing — the sections stay reachable by finger. */
.mobile-section-toggle{width:28px;height:24px;border:1px solid var(--edge);border-radius:6px;background:#fff;color:var(--muted);display:grid;place-items:center;font-size:15px;line-height:1;padding:0}
.mobile-section-toggle:hover,.mobile-section-toggle[aria-expanded="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
@media(max-width:640px){
  .app{display:block;height:auto}
  .nav{display:none}
  .wrap{padding:14px 14px 96px}
  .topbar-search input{width:7rem}
  .topbar .top-date{display:none}
  /* The line at phone width: its controls aligned to the first line rather than
     floating at the middle of a tall block, the ⋯ menu at the top right beside
     the title, and the marks dropping to their own right-aligned row only when
     the title would otherwise be squeezed — a line with no marks keeps its
     caret in the row rather than opening an empty band beneath it (1.4.10). */
  .row{align-items:flex-start;flex-wrap:wrap;row-gap:4px}
  .ttl{flex:1 1 11rem;min-width:0}
  .ttl .t{display:flex;align-items:flex-start;gap:8px}
  .ttl .t .item-title{flex:1;min-width:0}
  .ttl .meta{row-gap:2px}
  .right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .mark{white-space:normal}
  .kv{grid-template-columns:1fr}
  .var .vk{width:auto}
  #mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;height:58px;justify-content:space-around;align-items:center;border-top:1px solid var(--hair);background:var(--panel);z-index:30}
  #mtabs a{display:flex;flex-direction:column;gap:2px;align-items:center;border:none;background:none;color:var(--faint);font-size:11px;text-decoration:none}
  #mtabs a[aria-current="page"]{color:var(--accent)}
  #mtabs .g{font-size:16px}
  #mfab{display:grid;place-items:center;position:fixed;right:16px;bottom:70px;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:27px;z-index:31;box-shadow:0 6px 16px rgba(47,93,124,.4)}
}

/* ---------- accessibility ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:8px 14px;border-radius:0 0 6px 0;z-index:100}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media(max-width:640px){
  #capture{top:8px;width:94vw;max-height:88vh}
}

/* ---------- a clear mark in every field where free text is typed ---------- */
.clearable{position:relative;display:inline-flex;align-items:center;max-width:100%}
.clearable>input,.clearable>textarea{width:100%;padding-right:1.6rem}
.clearable>.x-clear{position:absolute;right:2px;border:none;background:none;color:var(--faint);font-size:11px;line-height:1;width:24px;height:24px;border-radius:4px;cursor:pointer;display:none;margin:0;padding:0;place-items:center}
.clearable.has-value>.x-clear{display:inline-grid}
.clearable>.x-clear:hover{color:var(--accent);background:var(--accent-soft)}
.clearable:has(textarea){align-items:flex-start}
.clearable:has(textarea)>.x-clear{top:4px}
.stack .clearable,.auth-card .clearable{width:100%}
.bar .clearable:has(input[name="description"]),.bar .clearable:has(input[name="name"]),
.bar .clearable:has(input[name="q"]),.bar .clearable:has(input[name="body"]){flex:1;min-width:12rem}
.row-edit .clearable:has(input[name="description"]){flex:1 1 14rem}

/* a refused field says so, in place — never a silently lost edit */
.field-refusal{color:var(--esc);font-size:12px;margin:.35rem 0 0;flex-basis:100%}

/* add a task from the foot of any page, as well as the top */

/* reordering answers to a finger as well as a pointer */
.grip{touch-action:none}

/* ---------- clean print layouts (§6.9): plan, matter, review — stamped ---------- */
@media print{
  @page{margin:13mm}
  body{background:#fff}
  .topbar,.nav,.page-flash,.line-acts,td.acts,details.defer-box,.defer-acts,.choicebox,.followup,
  .arrangebar button,.plan-bar form,.plan-bar button,.filters button,.filters select,.filters .inline-check,
  .bar button,.bar input,.bar select,.bar a,form.bar,.chk,.grip,.rank,.caret,.quiet,.quiet-link,.line-tabs,
  .capacity,.acts-bar,.stack button,.breadcrumbs,.scrim,.sheet,#mtabs,#mfab,.day-add,.copy-compact .help-dot,
  .list-add,.x-clear,.branch-arms,.node form{display:none!important}
  .app{display:block;height:auto}
  .main{overflow:visible}
  .wrap{max-width:none;margin:0;padding:0}
  .card,.node{break-inside:avoid}
  .line,table.rows{border:0;box-shadow:none;break-inside:avoid}
  .line{border-bottom:1px solid #ccc;border-radius:0;padding:2px 0}
  .row{padding:6px 2px;cursor:default}
  table.rows th,table.rows td{padding:3px 6px}
  .row-edit input,.row-edit select{border:0;padding:0;appearance:none;background:transparent;font:inherit}
  .print-stamp{display:block;margin-top:1.5rem;color:#555;font-size:.8rem;border-top:1px solid #ccc;padding-top:.4rem}
  a{color:inherit;text-decoration:none}
}

/* ---------- the template pass (ADR-175 to ADR-234) ---------- */
/* A step that does not exist yet: greyed, no acts, told apart by its word and its shape, never by colour alone. */
.line.expected{background:var(--paper);border-style:dashed;opacity:.85}
.line.expected .row{cursor:default}
.line.expected .item-title{font-weight:500;color:var(--muted)}
.chk-ghost{flex:none;width:24px;height:24px;border:1.6px dotted var(--edge);border-radius:5px;display:grid;place-items:center;color:var(--faint);font-size:12px}
.standing-word{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;border:1px solid var(--hair);border-radius:4px;padding:0 5px;color:var(--muted);background:#fff}
.standing-word.ready{color:var(--ok);border-color:#bcd0c2}
.standing-word.waiting{color:var(--warn);border-color:#e6dcb8}
.standing-word.expected{color:var(--muted);border-style:dashed}
.standing-word.ruled_out{color:var(--faint);text-decoration:line-through}
.chain-steps .line.waiting{background:var(--warn-soft)}
.chain-steps .line.na .item-title{text-decoration:line-through;color:var(--muted)}
/* The chain mark gives way before the line's own words. */
.mark.chain-mark{max-width:12rem;overflow:hidden;text-overflow:ellipsis}
/* The standing line a matter carries: not a warning — no colour carries meaning here. */
.standing-line{font-size:12.5px;color:var(--ink);margin:6px 0;padding:6px 9px;border:1px solid var(--hair);border-radius:6px;background:#fff}
.standing-line .gly{color:var(--faint)}
td .standing-line{margin:4px 0 0;padding:2px 0;border:0;background:transparent;font-size:11.5px;color:var(--muted)}
details.standing-line>summary{cursor:pointer;min-height:24px;display:inline-flex;align-items:center;gap:6px;list-style:revert}
.held-deadlines{margin:4px 0 0;padding-left:1.2rem}
.held-mark{display:block;white-space:normal}
/* The values a step waits on, offered in its own expansion. */
.waits-on{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);background:#fff;border-radius:var(--r);padding:9px 10px;margin-top:10px}
.waits-on .cb-h{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
/* The editor's three groups, and headings that fold. */
details.group{border:1px solid var(--hair2);border-radius:6px;margin:6px 0;padding:0 9px 7px;background:#fcfbf8}
details.group>summary{cursor:pointer;padding:7px 0;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);min-height:24px;display:flex;align-items:center;list-style:revert;font-weight:600}
details.heading-block{border:1px solid var(--hair);border-radius:var(--r);margin:8px 0;padding:0 10px 8px;background:var(--panel)}
details.heading-block>summary{cursor:pointer;padding:8px 0;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);min-height:24px;display:flex;align-items:center;gap:8px;list-style:revert;font-weight:600}
details.heading-block>summary .hint{text-transform:none;letter-spacing:0;font-weight:400}
details.heading-block[hidden]{display:none}
.fold-bar{margin:6px 0}
.short-wide{max-width:16rem}
details.fold-values{margin-top:6px}
details.fold-values>summary{cursor:pointer;min-height:24px;display:inline-flex;align-items:center;font-size:12.5px;color:var(--accent);list-style:revert}
details.whatif{border:1px solid var(--hair);border-radius:var(--r);padding:0 12px 10px;background:var(--panel)}
details.whatif>summary{cursor:pointer;min-height:24px;padding:8px 0;font-size:13px;list-style:revert}
/* A step settling into its computed place is shown moving (ADR-182); told in words where motion is reduced. */
details.node-edit.settled{animation:settle .8s ease-out}
@keyframes settle{from{background:var(--accent-soft);transform:translateY(-6px)}to{background:#fff;transform:none}}
@media (prefers-reduced-motion: reduce){details.node-edit.settled{animation:none;background:var(--accent-soft)}}
.settled-note{color:var(--accent)}
/* The confirmation, reduced, inside the line's expansion; the deadlines fold with their dates on the face. */
.cap-confirm{border:1px solid #cfe0ea;background:var(--accent-soft);border-radius:var(--r);padding:8px 10px;margin:8px 0}
.cap-confirm[hidden]{display:none}
.confirm-reduced .grid2{gap:0 1rem}
.confirm-reduced label{margin-top:.4rem}
details.folded-deadlines>summary,details.fold-values>summary{cursor:pointer;min-height:24px;display:inline-flex;align-items:center;gap:6px;list-style:revert}
.chip-template{border-color:var(--accent)}
/* Suggestions stand in labelled groups, each entry wearing its mark. */
.ta-group .ta-h{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:5px 11px 2px;background:#fcfbf8}
.typeahead .ta .gly{color:var(--faint)}
.typeahead .ta.has-open{padding-right:4.2rem}
.typeahead .ta-open{position:absolute;right:8px;margin-top:-30px;font-size:11.5px;color:var(--accent);min-height:24px;display:inline-flex;align-items:center;padding:0 6px;border:1px solid var(--hair);border-radius:5px;background:#fff}
.typeahead{position:relative}
/* The fortnight's position: a reading, not an alarm. */
.fortnight{font-size:11.5px;color:var(--muted);margin:10px 2px 0}
/* A popover that is a disclosure: open on the button as well as on hover. */
.word-hover.open .word-pop{display:block}
/* A refused field stands out beside its message. */
[aria-invalid="true"]{border-color:var(--esc)!important;box-shadow:0 0 0 2px var(--esc-soft)}
table.shape td .hint{font-size:11px}
tr.standing-ruled_out td{color:var(--faint)}
.chain-edit{margin:4px 0 10px 24px}
/* ---------- a chain prints as a dated checklist (ADR-209) ---------- */
@media print{
  .chain-head .stamp,.chain-acts,.fold-bar,.chain-edit,.vars form,.followup,.confirm form,.standing-line form{display:none!important}
  details.heading-block,details.group,details.fold-values{border:0;padding:0}
  details.heading-block>summary{color:#000;border-bottom:1px solid #000;margin-top:10px}
  .chain-steps .line{border-bottom:1px solid #ccc;border-radius:0;opacity:1;background:#fff}
  .chain-steps .line .row::before{content:"☐";margin-right:6px;font-size:14px}
  .chain-steps .line.done .row::before{content:"☑"}
  .chain-steps .line.expected .row::before{content:"○"}
  .chain-steps .chk,.chain-steps .chk-q,.chain-steps .chk-ghost,.chain-steps .caret,.chain-steps .line-tabs,.chain-steps .time-field,.chain-steps .meta-act{display:none!important}
  .chain-steps .detail{display:none!important}
  .standing-word{border:0;padding:0}
}