/* KM4NY Plan. Look from specs/mockups (approved 2026-10-13). */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --ground: #F4F5F7; --surface: #FFFFFF; --ink: #1A2230; --muted: #4F5B6B;
  --line: #DDE1E6; --line-soft: #EEF0F3; --field: #C3C9D1;
  --accent: #0B5C6B; --accent-dark: #073F4A; --accent-soft: #E3F0F2; --accent-wash: #F2F8F9;
  --lean-bg: #FCEFD9; --lean-ink: #7A3E06; --lean-edge: #B5732A;
  --overdue: #9A3412; --err: #A12622; --err-bg: #FBEAEA; --ok-bg: #E3F0F2;
  --st-exists: #0B5C6B; --st-partial: #D9962B; --st-notbuilt: #5E6876; --st-notstarted: #C9CED6;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.5 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Frame ---- */
.frame { display: flex; flex-wrap: wrap; min-height: 100vh; }
.nav { flex: 1 1 240px; max-width: 100%; background: var(--surface); border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 20px; }
.nav .brand { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.nav .brand .org { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nav .brand .name { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; }
.nav .group { display: flex; flex-direction: column; gap: 2px; }
.nav .group-label { padding: 0 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nav a.item { display: block; padding: 10px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nav a.item:hover { background: var(--line-soft); }
.nav a.item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.nav a.item.action { color: var(--accent); font-weight: 500; }
.nav a.item .soon { font-size: 12px; color: var(--muted); font-weight: 400; }
.nav .foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 8px; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.who .meta { display: flex; flex-direction: column; min-width: 0; }
.who .meta .n { font-size: 14px; font-weight: 500; }
.who .meta .r { font-size: 12px; color: var(--muted); }
.who form { margin-left: auto; }
.main { flex: 999 1 640px; min-width: 0; padding: 28px 40px 56px; }
/* Content uses the full width of the screen; forms keep a readable width. */
.wrap { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.wrap.narrow { max-width: 880px; margin: 0 auto; }
.nav .menu { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; }
/* Wide screens: the menu stays in view while the page scrolls, with the account area and the
   Claude buttons pinned to the bottom of the window (the menu scrolls inside itself if it is taller). */
@media (min-width: 901px) {
  .nav { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; padding-bottom: 0; }
  .nav .foot { position: sticky; bottom: 0; background: var(--surface); padding: 12px 8px 20px; border-top: 1px solid var(--line-soft); }
}
.menu-toggle { display: none; }
/* Small screens: a top bar with the site name and a Menu button that opens the full menu. */
@media (max-width: 900px) {
  .nav { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; gap: 0; }
  .nav .brand { flex-direction: row; align-items: center; gap: 10px; padding: 0; }
  .nav .brand .org { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--field); border-radius: 6px; background: var(--surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
  html.js .nav .menu { display: none; }
  html.js .nav.open .menu { display: flex; padding-top: 14px; gap: 14px; }
  .nav .foot { margin-top: 0; }
  .main { padding: 20px 16px 40px; }
}

/* ---- Page heading ---- */
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.page-head .t { display: flex; flex-direction: column; gap: 4px; }
.page-head h1 { font-size: 30px; }
.page-head p { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 18px; }
.card .card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.card.strong { border: 2px solid var(--accent); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---- Controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--muted); color: var(--ink); }
.btn.primary { border: 0; background: var(--accent); color: #fff; font-weight: 600; padding: 0 18px; }
.btn.primary:hover { background: var(--accent-dark); color: #fff; }
.btn.outline { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.btn.dashed { border: 1px dashed var(--accent); color: var(--accent); font-weight: 600; width: 100%; }
.btn.small { min-height: 36px; padding: 0 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.linkbtn { border: 0; background: transparent; padding: 0; min-height: 36px; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.linkbtn.plain { text-decoration: none; font-weight: 600; }
.linkbtn.muted { color: var(--muted); font-size: 13px; }
form.inline { display: inline; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .label { font-size: 13px; color: var(--muted); }
.field .hint { font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], select, textarea {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 6px; font: inherit; font-size: 15px; background: var(--surface); color: var(--ink); width: 100%;
}
textarea { padding: 10px 12px; resize: vertical; line-height: 1.5; }
select { padding: 0 10px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.row > .field { flex: 1 1 220px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---- Messages ---- */
.msg { padding: 12px 14px; border-radius: 6px; background: var(--ok-bg); color: var(--accent-dark); font-size: 15px; }
.msg.err { background: var(--err-bg); color: var(--err); }
.msg a { color: inherit; font-weight: 600; }

/* ---- Tags and status ---- */
.tag { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 2px 8px; border-radius: 4px; background: var(--line-soft); color: var(--ink); }
.tag.decision { background: var(--accent); color: #fff; }
.pill { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--field); }
.num-badge { font-family: var(--mono); font-size: 15px; font-weight: 500; padding: 4px 10px; border-radius: 4px; background: var(--ink); color: #fff; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.dot.s-exists { background: var(--st-exists); }
.dot.s-partial { background: var(--st-partial); }
.dot.s-not-built { background: var(--st-notbuilt); }
.dot.s-not-started { background: var(--st-notstarted); }
.dot.s-unknown { background: #fff; border: 1.5px solid var(--st-notbuilt); }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Sente lean: amber marks the lean only. */
.lean-on, .lean-add { font: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 2px 8px; border-radius: 4px; color: var(--lean-ink); cursor: pointer; }
.lean-on { border: 1px solid var(--lean-bg); background: var(--lean-bg); }
span.lean-on { cursor: default; }
button.lean-on:hover { text-decoration: line-through; }
.lean-add { border: 1px dashed var(--lean-edge); background: #fff; opacity: 0; transition: opacity .12s; }
.opt:hover .lean-add, .opt:focus-within .lean-add { opacity: 1; }
@media (hover: none) { .lean-add { opacity: 1; } }

/* ---- Rich text ---- */
.rich { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.rich p + p, .rich p + ul, .rich ul + p { margin-top: 8px; }
.rich ul { margin: 0; padding-left: 20px; }
.rich a.ref { font-family: var(--mono); font-size: .92em; }
.rich a.ref.archived { color: var(--muted); }
.empty { color: var(--muted); }

/* ---- Tables ---- */
.table-box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: auto; }
/* The matrix grows with the page and its header sticks to the top of the window.
   Narrow screens scroll the table sideways instead (and the header sticks within it). */
.table-box.tall { overflow: visible; }
@media (max-width: 1100px) { .table-box.tall { overflow: auto; max-height: 80vh; } }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data.wide { min-width: 860px; }
table.data th { position: sticky; top: 0; z-index: 1; text-align: left; background: #F8F9FA; padding: 12px 14px; font-weight: 500; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.45; }
table.data td.cat, table.data td.timing { color: var(--muted); }
table.data tr.open, table.data tr.detail { background: var(--accent-wash); }
table.data tr.detail td { border-bottom: 1px solid var(--line); padding: 4px 14px 16px; }
table.data tr.archived td { color: var(--muted); }
.id-toggle { border: 0; background: transparent; padding: 0; min-height: 28px; font-family: var(--mono); font-size: 14px; color: var(--accent); text-decoration: underline; cursor: pointer; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; font-size: 14px; line-height: 1.5; }
.detail-grid .k { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.detail-grid > div { display: flex; flex-direction: column; gap: 2px; }
.refs { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.refs a { font-family: var(--mono); font-size: 13px; }

/* ---- Filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.filters .field { flex: 1 1 240px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--field); background: var(--surface); color: var(--ink); }
.chip[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.summary-line { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }

/* ---- Question view ---- */
.wrap { container-type: inline-size; }
/* Side by side when the content area is wide enough; stacked, question first, when it is not.
   Decided by the content area's width (container query), not the window's, so the menu's width counts. */
.qlayout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.qside { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 12px; }
.qside .field, .qside .add { padding: 0 6px 12px; }
.qside ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.qside ol a { display: flex; gap: 8px; padding: 9px 10px; border-radius: 6px; text-decoration: none; font-size: 14px; line-height: 1.4; color: var(--ink); }
.qside ol a:hover { background: var(--line-soft); }
.qside ol a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.qside ol a .n { font-family: var(--mono); font-size: 13px; flex: 0 0 38px; }
.qside ol li.archived a { color: var(--muted); }
.qside .more { margin: 10px 6px 0; }
.qmain { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.crumbs { font-size: 14px; color: var(--muted); }
.qhead { display: flex; flex-direction: column; gap: 10px; }
.qhead .tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qhead h1 { font-size: 28px; line-height: 1.3; }
.card.decision-bar { flex-direction: row; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 18px 20px; }
.decision-bar .field.status-field { flex: 0 0 200px; }
.decision-bar .field.decision-field { flex: 1 1 320px; }
.decision-box { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.decision-box .clear { margin-left: auto; color: var(--accent-dark); }
.decision-none { min-height: 44px; display: flex; align-items: center; padding: 8px 14px; border-radius: 6px; border: 1px dashed var(--field); color: var(--muted); }
.opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--line); }
.opt.chosen { border: 2px solid var(--accent); background: var(--accent-wash); }
.opt .body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 300px; min-width: 0; }
.opt .tagrow { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; align-items: center; }
.opt .text { font-size: 15px; line-height: 1.5; }
.reqs { list-style: none; margin: 0; padding: 0; }
.reqs li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.reqs li .rm { justify-self: end; }
@media (max-width: 560px) { .reqs li { grid-template-columns: 56px minmax(0, 1fr); } .reqs li .status { grid-column: 2; } }
.history { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.history h2 { font-size: 14px; color: var(--muted); }
.history div { font-size: 14px; color: var(--muted); }
details.edit > summary { list-style: none; cursor: pointer; }
details.edit > summary::-webkit-details-marker { display: none; }

/* ---- Sign-in screens ---- */
.auth { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 64px 16px; }
.auth .box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.auth .brand { display: flex; flex-direction: column; gap: 2px; }
.auth .brand .org { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.auth .brand .name { font-size: 20px; font-weight: 600; }
.auth h1 { font-size: 24px; }
.auth form { display: flex; flex-direction: column; gap: 14px; }
.auth img.qr { background: #fff; padding: 8px; border-radius: 6px; border: 1px solid var(--line); }

/* Jumping to a row leaves it below the sticky header. */
tr.req { scroll-margin-top: 56px; }
@container (max-width: 880px) {
  .qlayout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .qside { position: static; max-height: none; overflow: visible; padding: 12px; }
}
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 6px 10px; font-family: var(--mono); font-size: 14px; }
.pager a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; text-decoration: none; border: 1px solid var(--line); }
.pager a:hover { background: var(--line-soft); }
details.qlist > summary { cursor: pointer; padding: 8px 6px 12px; font-size: 14px; font-weight: 600; list-style-position: inside; }
@media (max-width: 900px) {
  .qhead h1 { font-size: 22px; }
  .page-head h1 { font-size: 24px; }
}


/* ---- In-place editing ---- */
.ie-scope { position: relative; }
.ie > summary { list-style: none; cursor: pointer; }
.ie > summary::-webkit-details-marker { display: none; }
.ie[open] > summary { display: none; }
.ie-scope:has(> details.ie[open]) > .ie-view,
.ie-scope:has(> details.ie[open]) > .card-head ~ .ie-view { display: none; }
.ie-form { display: flex; flex-direction: column; gap: 12px; }
.ie-card > summary, .ie-head > summary { position: absolute; top: 20px; right: 20px; }
.ie-head > summary { top: 30px; right: 0; }
.opt .ie-opt { flex: 0 0 auto; }
.opt .ie-opt[open] { flex: 1 1 100%; }
.opt-actions { display: flex; gap: 8px; align-items: center; }
details.others > summary { list-style: none; cursor: pointer; margin: 2px 0; }
details.others > summary::-webkit-details-marker { display: none; }
details.others[open] > summary { margin-bottom: 10px; }
/* Previous and next only when the list is above the question. */
.pager { display: none; }
@container (max-width: 880px) { .pager { display: flex; } }
details.others .when-open, details.others[open] .when-closed { display: none; }
details.others[open] .when-open { display: inline; }
.decision-field .options-toggle { align-self: flex-end; margin: 4px 14px 0 0; }
.card[hidden] { display: none; }
.ie-archive { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.qhead .tags { padding-right: 110px; }
/* The block being edited gets a black box. */
.card.ie-scope:has(> details.ie[open]), .opt.ie-scope:has(> details.ie[open]) { border: 2px solid var(--ink); box-shadow: 0 0 0 3px rgba(26, 34, 48, .08); }
.opt.ie-scope:has(> details.ie[open]) { background: var(--surface); }
.qhead.ie-scope:has(> details.ie[open]) { border: 2px solid var(--ink); border-radius: 8px; padding: 16px 20px; background: var(--surface); box-shadow: 0 0 0 3px rgba(26, 34, 48, .08); }
.qhead.ie-scope:has(> details.ie[open]) .ie-head > summary { display: none; }
details.edit[open] > form { border: 2px solid var(--ink); border-radius: 8px; padding: 14px; background: var(--surface); }
.decision-field:has(> details.ie[open]) > .ie-view { display: none; }
.decision-field > details.ie { order: 2; align-self: flex-end; }
.decision-field > details.ie[open] { order: 1; align-self: stretch; }
.decision-field { display: flex; flex-direction: column; gap: 6px; }
.decision-field > .ie-view { order: 1; }
.card.decision-bar:has(details.ie[open]) { border: 2px solid var(--ink); box-shadow: 0 0 0 3px rgba(26, 34, 48, .08); }
.decision-box .rich { color: inherit; font-weight: 600; }
.plain-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
td.overdue { color: var(--overdue); font-weight: 600; }
.tag.overdue-tag { background: #FBE7DC; color: var(--overdue); }

/* ---- Home ---- */
.home-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.home-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
@media (max-width: 560px) { .home-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Comments take the row's height set by the other columns and scroll inside it. */
.home-comments { contain: size; min-height: 280px; }
.home-comments .home-list.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.home-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.home-list li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.home-list .t { font-size: 15px; font-weight: 500; }
.home-list .x { font-size: 14px; line-height: 1.45; }
.home-list .m { font-size: 13px; color: var(--muted); }
.phase-bars { display: flex; flex-direction: column; gap: 8px; }
.phase-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 32px; gap: 10px; align-items: center; font-size: 14px; }
.phase-row .mono { text-align: right; }
.phase-row .bar { height: 10px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.phase-row .fill { height: 100%; background: #9CC3CA; border-radius: 5px; overflow: hidden; }
.phase-row .done { height: 100%; background: var(--accent); }
.stack-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--field); }
.stack-bar .seg.s-exists { background: var(--st-exists); }
.stack-bar .seg.s-partial { background: var(--st-partial); }
.stack-bar .seg.s-not-built { background: var(--st-notbuilt); }
.stack-bar .seg.s-not-started { background: var(--st-notstarted); }
.stack-bar .seg.s-unknown { background: #fff; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 14px; }
table.data.compact th { position: static; background: none; padding: 8px 8px 8px 0; }
table.data.compact td { padding: 10px 8px 10px 0; }

/* ---- Reorder ---- */
ol.reorder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ol.reorder li { display: grid; grid-template-columns: 52px 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
ol.reorder li.changed { border-color: var(--accent); background: var(--accent-wash); }
ol.reorder .old { color: var(--muted); text-decoration: line-through; }
ol.reorder li:not(.changed) .old { text-decoration: none; }
ol.reorder .new { font-weight: 600; }
ol.reorder .q { font-size: 14px; line-height: 1.4; }
ol.reorder .moves { display: flex; gap: 4px; }
ol.reorder .moves .btn { min-width: 40px; padding: 0; }
.when-keep, html.renumbering .when-keep { display: none; }
html:not(.renumbering) .when-keep { display: inline; }
html:not(.renumbering) .when-renumber { display: none; }

/* ---- Pages ---- */
.page-doc { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; }
.page-section { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; }
.page-section.ie-scope:has(> details.ie[open]) { border: 2px solid var(--ink); box-shadow: 0 0 0 3px rgba(26, 34, 48, .08); }
.page-section h2 { font-size: 20px; margin-bottom: 10px; }
.rich h2 { font-size: 20px; margin: 18px 0 8px; }
.rich h3 { font-size: 17px; margin: 16px 0 6px; }
.rich h4 { font-size: 15px; margin: 14px 0 4px; }
.rich p + p, .rich p + ul, .rich ul + p, .rich p + ol, .rich ol + p { margin-top: 10px; }
.rich ol { margin: 0; padding-left: 22px; }
.rich figure { margin: 14px 0; }
.rich figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.rich figcaption { font-size: 13px; color: var(--muted); margin-top: 4px; }
.rich-table { overflow-x: auto; margin: 10px 0; }
.rich-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.rich-table th { text-align: left; font-weight: 600; background: #F8F9FA; }
.rich-table th, .rich-table td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; line-height: 1.45; }
.img-tools { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.img-tools label { cursor: pointer; }
.add-section > summary { list-style: none; cursor: pointer; }
.add-section > summary::-webkit-details-marker { display: none; }
.add-section[open] > form { margin-top: 10px; }
.contents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.contents-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.contents-list li { line-height: 1.4; }
.contents-list .muted { display: block; }
/* Principles */
.principle { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.principle-head { display: flex; gap: 18px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.principle-head:has(> details.ie[open]) { border: 2px solid var(--ink); }
.principle-head > details.ie { order: 3; }
.principle-head > details.ie[open] { flex: 1 1 auto; order: 2; }
.principle-head > .ie-view { flex: 1 1 auto; order: 2; }
.principle-head h2 { font-size: 22px; }
.principle-head .one-line { font-weight: 600; margin-top: 6px; }
.icon-box { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; order: 1; }
.icon-box img { width: 72px; height: 72px; object-fit: contain; }
.icon-box .no-icon { width: 72px; height: 72px; border: 1px dashed var(--field); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.icon-box label { cursor: pointer; font-size: 13px; }
/* About this section */
details.about { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
details.about > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.about[open] > .rich, details.about .ie-scope { margin-top: 10px; }
.page-section.ie-scope > .ie-view { padding-right: 48px; }
/* Entry tables (phases, workstreams) */
table.entries td .rich { font-size: 14px; }
table.entries td .rich ul { padding-left: 18px; }
table.entries tr.editing td { background: var(--accent-wash); }
table.entries tr.edit-row > td { border: 2px solid var(--ink); background: var(--surface); padding: 14px; }
table.entries .row-edit { white-space: nowrap; }
table.entries td.row-actions { white-space: nowrap; }

/* ---- Comments ---- */
.comments .thread { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.comments .thread.resolved { background: #FAFBFC; }
.comments .about-tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--line-soft); color: var(--muted); }
.comment { display: flex; gap: 12px; }
.comment .c-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.comment .c-meta { font-size: 14px; }
.comment .rich { font-size: 15px; }
.comment .c-edit > summary, .comment .c-delete { display: inline; }
.comment .c-edit { display: inline-block; margin-right: 12px; }
.comment.deleted { padding-left: 44px; }
.mention { background: var(--accent-soft); color: var(--accent-dark); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.reply-form { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.thread-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.new-thread { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.mention-menu { position: absolute; z-index: 10; left: 12px; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--field); border-radius: 6px; box-shadow: 0 4px 14px rgba(26,34,48,.12); min-width: 220px; }
.mention-menu li { padding: 6px 12px; cursor: pointer; font-size: 14px; }
.mention-menu li.active, .mention-menu li:hover { background: var(--accent-soft); }
.nav .badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
.comment-link { white-space: nowrap; }

/* Import from Claude */
.imp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.imp-change { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.imp-change.warn { border-left: 4px solid #b7791f; }
.imp-change.err { border-left: 4px solid #b42318; }
.imp-change.muted { opacity: .75; }
.imp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.imp-head input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.imp-change .why { margin: 0; font-style: italic; }
.imp-change .msg-line { margin: 0; font-size: 14px; }
.tag.imp-ok { background: #e6f4ea; color: #1e6b35; }
.tag.imp-warn { background: #fdf3e1; color: #8a5a00; }
.tag.imp-err { background: #fde8e7; color: #a01b12; }
.ba { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.ba th, .ba td { text-align: left; vertical-align: top; padding: 6px 8px; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.ba th:first-child, .ba td:first-child { width: 22%; color: var(--muted); }
.pre { white-space: pre-wrap; }
ul.plain { margin: 0; padding-left: 18px; }
pre.diff { margin: 0; padding: 10px 12px; background: var(--line-soft); border-radius: 6px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
pre.diff .add { background: #e6f4ea; display: block; }
pre.diff .del { background: #fde8e7; display: block; text-decoration: line-through; text-decoration-color: rgba(160, 27, 18, .4); }

/* Export binder */
.binder-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.binder-docs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.binder-docs label, .card > label, fieldset.plain label { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.binder-docs input, .card > label input, fieldset.plain input { width: 18px; height: 18px; margin: 0; }
fieldset.plain { border: 0; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.plain legend { padding: 0 0 6px; }