:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #1c2530;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #0f766e;
  --green: #2e7d32;
  --yellow: #f9a825;
  --red: #c62828;
  --black: #263238;
  --grey: #9aa5b1;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.25rem; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
  flex-wrap: wrap;
}
.brand { font-size: 1.15rem; font-weight: 700; }
.brand span { color: var(--accent); }
.controls { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
/* Utility actions grouped together, wrapping as one unit on narrow screens. */
.navgroup { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding-right: .6rem; border-right: 1px solid var(--line); }
.iconbtn-lg { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 1.05rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.iconbtn-lg:hover { border-color: var(--accent); color: var(--accent); }
.menu { position: relative; }
.menu-panel { position: absolute; right: 0; top: 42px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 170px; z-index: 10; overflow: hidden; padding: .25rem; }
.menu-item { text-align: left; padding: .55rem .7rem; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: .9rem; cursor: pointer; text-decoration: none; }
.menu-item:hover { background: #eef2f4; }
.crit-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; border-radius: 999px; min-width: 16px; height: 16px; font-size: .66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 .2rem; }
.menu { position: relative; }
#hamburger { position: relative; }
.menu-count { background: var(--red); color: #fff; border-radius: 999px; padding: .02rem .4rem; font-size: .72rem; font-weight: 700; margin-left: .3rem; }
.btn.ghost.on { background: var(--accent); color: #fff; }
.controls label { display: flex; flex-direction: column; font-size: .72rem; color: var(--muted); gap: .2rem; }
.controls select, .controls input, .modal input {
  font-size: .9rem; padding: .4rem .55rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink); min-width: 160px;
}
.btn {
  padding: .45rem .9rem; border: 0; border-radius: 6px; background: var(--accent);
  color: #fff; font-weight: 600; cursor: pointer; font-size: .85rem;
  text-decoration: none; display: inline-block; line-height: 1.2;
}
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: #eef2f4; color: var(--ink); }
.btn.small { padding: .25rem .6rem; font-size: .78rem; }

main { padding: 1.25rem; max-width: 1600px; margin: 0 auto; display: grid; gap: 1.25rem; }
main > * { min-width: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
/* The plan scrolls INSIDE its own box, so the summary + column headers stay put
   (no more scrolling the whole page). Horizontal scroll is contained here too. */
#plan-wrap { max-height: calc(100vh - 250px); overflow: auto; }
#attach > thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem 1rem; box-shadow: var(--shadow);
}
.card .k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.card .v { font-size: 1.6rem; font-weight: 700; margin-top: .15rem; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.15rem; box-shadow: var(--shadow);
}
.panel h2 { margin: 0 0 .8rem; font-size: 1rem; }
.panel h2 small { color: var(--muted); font-weight: 400; font-size: .78rem; margin-left: .4rem; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.panel-head h2 { margin: 0; }
.kt-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kt-controls select {
  font-size: .8rem; padding: .28rem .45rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink); min-width: 120px;
}
.kt-controls .toggle { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); cursor: pointer; user-select: none; }
.kt-controls .toggle input { margin: 0; }

/* minmax(0, 1fr): let the main column shrink below its content's intrinsic
   width so wide tables wrap instead of forcing a horizontal scrollbar. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 1.25rem; align-items: start; }
.col-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.col-side { position: sticky; top: 74px; align-self: start; min-width: 0; }
/* Fever chart collapsed -> tables reclaim the full width (no h-scroll on all cols). */
.split.chart-off { grid-template-columns: 1fr; }
.split.chart-off .col-side { display: none; }
.ti-id { color: var(--muted); font-size: .74rem; font-weight: 700; margin-right: .35rem; }
#kt-title .showall { font-size: .78rem; font-weight: 400; margin-left: .5rem; color: var(--accent); cursor: pointer; }
#kt-title .showall:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .col-side { position: static; }
}

#fever-wrap { width: 100%; }
#fever { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 1.1rem; margin-top: .5rem; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.legend i.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: .3rem; vertical-align: -1px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }

/* Plan table: fixed layout with a colgroup so Task columns line up over the kit
   sub-table columns. Header + task rows never wrap (they'd break alignment). */
#attach { table-layout: fixed; }
#attach { width: 100%; }
/* v1.21.1: headers may wrap to two lines (compact columns); cells stay one line. */
#attach thead th { white-space: normal; line-height: 1.15; overflow: hidden; padding: .4rem .4rem; vertical-align: bottom; }
#attach .task-row td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .45rem .4rem; }
#tasks { table-layout: auto; }
#tasks th, #tasks td { white-space: normal; padding: .45rem .5rem; overflow-wrap: break-word; }
#tasks td.num, #tasks th.num { white-space: nowrap; }
/* "More columns" on: too many columns to wrap cleanly, so keep each on one line
   and let the extra columns scroll sideways inside the wrapper instead. */
#tasks.detail-on th, #tasks.detail-on td { white-space: nowrap; overflow-wrap: normal; }
#attach select { min-width: 120px; max-width: 160px; }
#attach .kitchip { max-width: 100%; }

/* inline numeric editors: lead time / lead days (planning) and remaining lead (owner) */
.lead-input, .rl-input, .touch-input {
  width: 56px; text-align: right; font-size: .82rem; padding: .2rem .3rem;
  border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink);
}
.lead-input:hover, .rl-input:hover, .touch-input:hover { border-color: var(--accent); }
.lead-input:focus, .rl-input:focus, .touch-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(15,118,110,.18); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
th.num, td.num { text-align: right; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sorted { color: var(--accent); }
tbody tr:hover { background: #f8fafc; }
tr.clickrow { cursor: pointer; }
.tasklink { cursor: pointer; color: var(--accent); font-weight: 600; }
.tasklink:hover { text-decoration: underline; }
tr.selected { background: #e6f4f1; box-shadow: inset 3px 0 0 var(--accent); }
tr.clickrow.selected { background: #e6f4f1; box-shadow: inset 3px 0 0 var(--accent); }
tr.clickrow.selected td:first-child { font-weight: 700; }

.filterbar { display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: .5rem .85rem; font-size: .88rem; box-shadow: var(--shadow); }

.dot.GREEN, .chip.GREEN { background: var(--green); }
.dot.YELLOW, .chip.YELLOW { background: var(--yellow); }
.dot.RED, .chip.RED { background: var(--red); }
.dot.BLACK, .chip.BLACK { background: var(--black); }
.dot.GREY, .chip.GREY { background: var(--grey); }
.chip {
  color: #fff; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem;
  font-weight: 600; display: inline-block; min-width: 52px; text-align: center;
}
.chip.YELLOW { color: #3a2f00; }

.bar { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; min-width: 70px; }
.bar > i { display: block; height: 100%; background: var(--accent); }

.kitchip { display: inline-flex; align-items: center; gap: .25rem; background: #e6f4f1; color: var(--accent); border-radius: 999px; padding: .12rem .3rem .12rem .6rem; font-size: .74rem; font-weight: 600; margin: .12rem .18rem; }
.kitchip .x { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .15rem; border-radius: 50%; }
.kitchip .x:hover { color: #fff; background: var(--red); }

.pill { font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; }
.pill.open { background: #dcfce7; color: #166534; }
.pill.closed { background: #fee2e2; color: #991b1b; }

.muted { color: var(--muted); }
.empty { padding: 1.5rem; text-align: center; color: var(--muted); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 1rem; }
.modal.hidden { display: none; }
.modal-card { background: #fff; border-radius: 12px; padding: 1.25rem 1.4rem; width: min(420px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal-card h3 { margin: 0 0 .2rem; }
.modal-card label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--muted); margin-top: .8rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 6px; padding: .5rem .7rem; font-size: .82rem; margin-top: .8rem; }
.hidden { display: none !important; }

/* ---- Template admin ---- */
.modal-card.big { width: min(1040px, 96vw); max-height: 90vh; overflow: auto; }
.tmpl-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tmpl-head h3 { margin: 0; }
.tabs { display: flex; gap: .3rem; margin-left: .5rem; }
.tab { border: 1px solid var(--line); background: #eef2f4; color: var(--muted); padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tmpl-head #tmpl-close { margin-left: auto; }

.tmpl-groups { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; }
.tg-list { display: flex; flex-direction: column; gap: .3rem; }
.tg-item { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .88rem; }
.tg-item:hover { background: #f8fafc; }
.tg-item.sel { background: #e6f4f1; box-shadow: inset 3px 0 0 var(--accent); }
.tg-item .tg-name { font-weight: 600; flex: 1; }
.dot2 { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot2.on { background: var(--green); } .dot2.off { background: var(--grey); }
.tg-detail { min-width: 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; align-items: end; }
.form-grid label, .stage-rows label { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; color: var(--muted); }
.form-grid input, .form-grid select, .stage-row input {
  font-size: .85rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.row-actions { display: flex; gap: .5rem; margin: .8rem 0; flex-wrap: wrap; }
.subhead { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1rem 0 .5rem; font-weight: 700; }

.stage-rows { display: flex; flex-direction: column; gap: .4rem; }
.stage-row { display: grid; grid-template-columns: 34px 1fr 90px 34px; gap: .5rem; align-items: center; }
.stage-row .seq { color: var(--muted); font-size: .8rem; text-align: center; }
.stage-row .x { border: 0; background: transparent; color: var(--red); cursor: pointer; font-size: 1.1rem; }
.wsum { font-size: .85rem; margin-top: .5rem; font-weight: 600; }
.wsum.ok { color: var(--green); } .wsum.bad { color: var(--red); }

.pill.warn { background: #fef3c7; color: #92400e; }
.pill.ok { background: #dcfce7; color: #166534; }

/* Actions log grouped by kit task */
.log-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: #f4f7f9; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.log-kit { font-weight: 700; }
.log-head .rv-badge { margin-left: auto; background: var(--accent); color: #fff; border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; }

@media (max-width: 720px) { .tmpl-groups { grid-template-columns: 1fr; } }

/* ---- Review (expediting) ---- */
.rag-toggles { display: flex; gap: .7rem; align-items: center; margin-left: .5rem; }
.rag-toggles .toggle { display: flex; align-items: center; gap: .3rem; cursor: pointer; }
.rv-summary { color: var(--muted); font-size: .85rem; margin-bottom: .8rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.rv-list { display: flex; flex-direction: column; gap: .5rem; }
.rv-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rv-item.open { border-color: var(--accent); }
.rv-head { display: grid; grid-template-columns: 60px minmax(0,1.5fr) minmax(0,1.4fr) 70px auto 18px; gap: .7rem; align-items: center; padding: .6rem .8rem; cursor: pointer; }
.rv-head:hover { background: #f8fafc; }
.rv-title { min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-dates { font-size: .82rem; color: var(--ink); }
.rv-late { color: var(--red); font-weight: 700; }
.rv-buf { font-size: .82rem; color: var(--muted); text-align: right; }
.rv-badge { font-size: .78rem; color: var(--accent); font-weight: 600; }
.rv-caret { color: var(--muted); }
.rv-detail { border-top: 1px solid var(--line); padding: .7rem .8rem; background: rgba(15,118,110,.03); }
.rv-actions { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.rv-action { display: grid; grid-template-columns: 90px 1fr; gap: .5rem; align-items: start; }
.rv-atype { font-size: .7rem; font-weight: 700; text-transform: uppercase; padding: .15rem .4rem; border-radius: 6px; text-align: center; height: fit-content; background: #eef2f4; color: var(--muted); }
.rv-atype.Expedite { background: #dbeafe; color: #1e40af; }
.rv-atype.Escalation { background: #fee2e2; color: #991b1b; }
.rv-atype.Note { background: #f1f5f9; color: #475569; }
.rv-anote { font-size: .88rem; }
.rv-target { color: var(--accent); font-weight: 600; }
.rv-ameta { font-size: .74rem; grid-column: 2; }
.rv-addform { display: grid; grid-template-columns: 120px 150px 1fr auto; gap: .5rem; align-items: center; }
.rv-addform select, .rv-addform input { font-size: .85rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.act-badge { font-size: .78rem; font-weight: 600; color: var(--accent); background: #e6f4f1; border-radius: 999px; padding: .1rem .45rem; }

/* ---- Plan table: expandable Task -> kit tasks (sub-table) ---- */
.task-row.has-kits .tasklink { cursor: pointer; }
.tasklink.nolink { color: var(--ink); cursor: default; font-weight: 400; }
.tw-caret { color: var(--muted); display: inline-block; width: 14px; text-align: center; }
.tw-count { margin-left: .5rem; font-size: .74rem; white-space: nowrap; }
.task-row.has-kits:hover td { background: #f8fafc; }
#attach th.crit-col, #attach td.crit-col { width: 26px; text-align: center; padding-left: .3rem; padding-right: .3rem; }
.crit { color: var(--red); font-weight: 700; }
#attach .kits-col { width: 240px; max-width: 240px; }
.kits-box { max-width: 240px; overflow-x: auto; white-space: nowrap; display: flex; gap: .1rem; }
.kits-box .kitchip { flex: none; }
/* v1.28.2: a kitted Task has THREE actions (fever, release gate, add kit); the
   column must fit them and never ellipsise the add button away. */
#attach td.act-col, #attach th.act-col { width: 132px; white-space: nowrap; text-align: right; overflow: visible !important; text-overflow: clip !important; padding-left: 0; }
#attach .act-col .iconbtn { margin-left: .15rem; }
.iconbtn { border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: .85rem; padding: .15rem .4rem; line-height: 1; }
.iconbtn:hover { border-color: var(--accent); }
.iconbtn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* nested kit-task table */
/* Left accent stripe (inset shadow, so it doesn't shift columns out of alignment)
   + the kit-task name indented within its column = a nested feel that still lines
   up with the Task row above. */
.kit-children > td { padding: 0 !important; background: rgba(15,118,110,.03); box-shadow: inset 3px 0 0 rgba(15,118,110,.4); }
/* Bundle chips moved out of the plan row into the expanded panel. */
.kit-bundles { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .6rem; font-size: .82rem; }
.kit-toolbar { padding: .4rem .6rem; display: flex; gap: .5rem; }
.lib-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: .4rem; margin-top: .4rem; }
.lib-group { margin-bottom: .4rem; }
.lib-gname { font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); padding: .2rem .3rem; }
.lib-item { display: flex; align-items: center; gap: .4rem; padding: .25rem .4rem; font-size: .85rem; border-radius: 5px; cursor: pointer; }
.lib-item:hover { background: rgba(15,118,110,.06); }
.lib-item input { width: auto; }
/* Fixed layout + shared colgroup widths so every task's sub-table lines up. */
.kit-subtable { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kit-subtable td, .kit-subtable th { overflow: hidden; }
.kit-subtable th { white-space: normal; line-height: 1.15; }
.kit-subtable td.ell { text-overflow: ellipsis; white-space: nowrap; }
.tk-name-input { width: 100%; border: 1px solid transparent; background: transparent; color: var(--ink); font-weight: 600; font-size: .82rem; padding: .12rem .3rem; border-radius: 5px; }
.tk-name-input:hover { border-color: var(--line); } .tk-name-input:focus { border-color: var(--accent); outline: none; background: var(--panel); }
.iconbtn.del { color: #b91c1c; } .iconbtn.del:hover { background: rgba(185,28,28,.1); }
.kit-subtable th { font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); padding: .35rem .4rem; border-bottom: 1px solid var(--line); background: rgba(15,118,110,.05); }
.kit-subtable td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); font-size: .82rem; white-space: nowrap; }
.kit-subtable td.tk-name { font-weight: 600; display: flex; align-items: center; gap: .3rem; padding-left: .9rem; }
.kit-subtable td.tk-name .tk-name-input { flex: 1 1 auto; width: auto; min-width: 0; }
.kit-subtable tr:first-child td { border-top: none; }
.kit-subtable .num { text-align: right; }
.kit-subtable .lead-input, .kit-subtable .rl-input, .kit-subtable .touch-input { width: 46px; }
.kit-subtable .ht-mark { color: var(--rag-red, #c0392b); margin-left: .15rem; font-size: .78rem; }
/* Task-level plan columns: kit delay + completion-type symbol */
.delay-late { color: var(--rag-red, #c0392b); font-weight: 600; }
.ct-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-right: .35rem; border-radius: 4px;
  font-size: .72rem; font-weight: 700; line-height: 1; vertical-align: middle; }
.ct-stage { background: rgba(37,99,235,.14); color: #2563eb; }
.ct-rate  { background: rgba(13,148,136,.16); color: #0d9488; }
.stall-rising { color: var(--rag-red, #c0392b); font-weight: 600; }
.stall-flat { color: #b7791f; font-weight: 600; }
.qty-pair { display: inline-flex; align-items: center; gap: .15rem; }
.qty-input { width: 44px; text-align: right; font-size: .82rem; padding: .15rem .25rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); }
.qty-input:hover, .qty-input:focus { border-color: var(--accent); outline: none; }
/* Rate report modal: so-far context + Add/Set toggle + live preview */
.rate-report { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; margin-top: .5rem; }
.rate-sofar { font-size: .9rem; margin-bottom: .5rem; }
.rate-mode { display: flex; gap: 1.2rem; margin-bottom: .5rem; }
.rate-mode .radio { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }
.rate-mode .radio input { width: auto; }
.rate-preview { font-size: .85rem; margin-top: .35rem; min-height: 1.1em; }
.rate-preview.bad { color: var(--rag-red, #c0392b); }
/* Progress history trail in the report modal */
.ph-wrap { margin-top: .7rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.ph-wrap summary { cursor: pointer; font-size: .85rem; font-weight: 600; }
.ph-list { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 9rem; overflow-y: auto; }
.ph-list li { font-size: .82rem; padding: .18rem 0; border-bottom: 1px solid var(--line); line-height: 1.35; }
.ph-list li:last-child { border-bottom: none; }
.ph-when { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: .3rem; }
.ph-delta { color: var(--accent); font-weight: 600; }
.ph-ttr { color: #b7791f; font-weight: 600; }
.ph-reopen { color: var(--rag-red, #c0392b); font-weight: 600; }
.ph-more { font-size: .78rem; margin-top: .3rem; }
.tk-actbtns { text-align: right; white-space: nowrap; }
.tk-actbtns .iconbtn { margin-left: .12rem; margin-right: 0; padding: .1rem .26rem; font-size: .82rem; }
.ka-panel > td { padding: .5rem .6rem .6rem 1.2rem !important; background: rgba(15,118,110,.04); }
.tree-children { display: flex; flex-direction: column; }
.tree-kit { border-top: 1px solid var(--line); }
.tk-main { display: grid; grid-template-columns: minmax(0,1.3fr) 92px 92px minmax(0,1.4fr) 108px 62px 64px auto auto; gap: .5rem; align-items: center; padding: .45rem .7rem .45rem 1.7rem; font-size: .85rem; }
.tk-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-status { white-space: nowrap; }
.tk-dates { font-size: .8rem; white-space: nowrap; }
.tk-buf { text-align: right; font-size: .8rem; white-space: nowrap; }
.tk-act.on { background: var(--accent); color: #fff; }
.tk-actions { padding: .55rem .7rem .7rem 1.7rem; background: rgba(15,118,110,.03); border-top: 1px dashed var(--line); }
@media (max-width: 760px) {
  .tk-main { grid-template-columns: 1fr auto auto; }
  .tk-owner, .tk-status, .tk-dates, .tk-pct, .tk-buf { display: none; }
}
@media (max-width: 720px) {
  .rv-head { grid-template-columns: 56px 1fr auto; }
  .rv-dates, .rv-buf { grid-column: 2; }
  .rv-addform { grid-template-columns: 1fr; }
}

.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 8px; font-size: .85rem; z-index: 30; box-shadow: var(--shadow); }
.toast.ok { background: #14532d; }
.toast.bad { background: #7f1d1d; }

@media (prefers-color-scheme: dark) {
  :root { --bg:#0f151b; --panel:#161e27; --ink:#e6edf3; --muted:#93a1b0; --line:#243040; }
  .controls select, .controls input, .modal input, .kt-controls select, .lead-input, .rl-input, .touch-input,
  .form-grid input, .form-grid select, .stage-row input,
  .rv-addform select, .rv-addform input, .qty-input { background:#0f151b; color:var(--ink); }
  .rv-head:hover { background:#1b242f; }
  .rv-atype { background:#243040; color:var(--muted); }
  .tree-task { background:#161e27; } .tree-task:hover { background:#1b242f; }
  .log-head { background:#161e27; }
  .ka-row select, .ka-row input { background:#0f151b; color:var(--ink); }
  .btn.ghost, .tab { background:#243040; color:var(--ink); }
  .menu-item:hover { background:#243040; }
  .tab.active { background:var(--accent); color:#fff; }
  .tg-item:hover { background:#1b242f; }
  .tg-item.sel { background:#12332e; }
  tbody tr:hover { background:#1b242f; }
  tr.clickrow.selected, tr.selected { background:#12332e; }
  .taskitem.selected { background:#12332e; }
  .modal-card { background:#161e27; }
  .bar { background:#243040; }
}

/* ---------- Timeline (Gantt) view ---------- */
#gantt-wrap { margin-top: .4rem; }
.gantt { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.gantt-inner { position: relative; }
.g-lines { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.g-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); opacity: .55; }
.g-row { display: flex; align-items: center; height: 26px; position: relative; z-index: 1; border-bottom: 1px solid var(--line); }
.g-row.g-head { z-index: 3; background: var(--bg); color: var(--muted); font-size: .72rem; }
.g-label { width: var(--labelw, 230px); min-width: var(--labelw, 230px); position: sticky; left: 0; z-index: 2; background: var(--panel); padding: 0 .5rem; display: flex; align-items: center; gap: .3rem; white-space: nowrap; overflow: hidden; font-size: .8rem; border-right: 1px solid var(--line); }
.g-row.g-head .g-label.head { background: var(--bg); font-weight: 600; }
.g-label.kit { padding-left: 1.4rem; color: var(--muted); }
.g-label .ell { overflow: hidden; text-overflow: ellipsis; }
.g-track { position: relative; height: 100%; flex: 0 0 auto; }
.g-mon { position: absolute; top: 6px; font-size: .7rem; color: var(--muted); white-space: nowrap; transform: translateX(2px); }
.g-bar { position: absolute; border-radius: 3px; overflow: hidden; }
.g-base { position: absolute; top: 9px; height: 7px; border-radius: 3px; background: repeating-linear-gradient(45deg, #cfd6dd, #cfd6dd 3px, #e6ebef 3px, #e6ebef 6px); }
.g-task { top: 5px; height: 15px; background: #34567f; }        /* full bar = darker */
.g-task.crit { background: #a11d1d; }
/* progress = lighter band INSIDE the bar (inset so the full darker bar frames it) */
.g-fill { position: absolute; left: 0; top: 3px; bottom: 3px; background: rgba(255, 255, 255, .58); border-radius: 2px; }
.g-ms { position: absolute; top: 7px; width: 11px; height: 11px; background: var(--black); transform: rotate(45deg); }
.g-delay { position: absolute; top: 6px; font-size: .66rem; font-weight: 700; color: var(--red); white-space: nowrap; }
.g-kit { top: 7px; height: 11px; }
.g-kit.GREEN { background: var(--green); } .g-kit.YELLOW { background: var(--yellow); }
.g-kit.RED { background: var(--red); } .g-kit.BLACK { background: var(--black); } .g-kit.GREY { background: var(--grey); }
/* Committed plan window (ghost) + remaining lead projected forward from today */
.g-plan { position: absolute; top: 7px; height: 11px; border: 1px dashed #aab2bb; border-radius: 3px; background: transparent; }
.g-late { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .42) 0 3px, transparent 3px 6px); }
.g-over { position: absolute; top: 9px; height: 7px; opacity: .5; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, .3) 2px, rgba(0, 0, 0, .3) 4px); }
.g-over.GREEN { background-color: var(--green); } .g-over.YELLOW { background-color: var(--yellow); }
.g-over.RED { background-color: var(--red); } .g-over.BLACK { background-color: var(--black); } .g-over.GREY { background-color: var(--grey); }
.g-diamond { position: absolute; top: 7px; width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--panel); }
.g-diamond.GREEN { background: var(--green); } .g-diamond.YELLOW { background: var(--yellow); }
.g-diamond.RED { background: var(--red); } .g-diamond.BLACK { background: var(--black); } .g-diamond.GREY { background: var(--grey); }
.g-legend { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; padding: .5rem .2rem; font-size: .74rem; color: var(--muted); }
.g-legend .lg { display: inline-block; width: 16px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: .2rem; }
.lg-base { background: repeating-linear-gradient(45deg, #cfd6dd, #cfd6dd 3px, #e6ebef 3px, #e6ebef 6px); }
.lg-task { background: #34567f; }
.lg-kit { background: linear-gradient(90deg, var(--green), var(--yellow), var(--red)); }
.lg-dia { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 0; background: var(--muted); }
.lg-fs { width: 18px; height: 0; border-top: 2px solid #8a95a2; background: none; }
.lg-kt { width: 18px; height: 0; border-top: 2px solid var(--red); background: none; }
.lg-today { width: 2px; height: 12px; background: var(--red); }
/* FS-link + kit-gate network overlay */
.g-links { position: absolute; z-index: 3; pointer-events: none; overflow: visible; }
.g-link { fill: none; stroke: #8a95a2; stroke-width: 1.4px; }
.g-link.drive { stroke: var(--red); stroke-width: 1.9px; }
.g-gate { fill: none; stroke: #5b7ea6; stroke-width: 1.4px; stroke-dasharray: 4 3; }
.g-gate.drive { stroke: var(--red); stroke-width: 1.6px; stroke-dasharray: 4 3; }
.g-ktlink { fill: none; stroke: #b7bfc8; stroke-width: 1px; stroke-dasharray: 3 3; }
.g-ktlink.bind { stroke: var(--red); stroke-width: 1.7px; stroke-dasharray: none; }
.g-planend { stroke: #98a2b3; stroke-width: 1.2px; stroke-dasharray: 3 3; }
.g-projend { stroke: var(--red); stroke-width: 1.4px; opacity: .7; }
.g-endlbl { font-size: 9px; fill: #98a2b3; }
.g-endlbl.proj { fill: var(--red); }
@media (prefers-color-scheme: dark) {
  .g-task { background: #4a6a8a; }
}

/* v1.20: milestone / Kit Chain markers in the plan, and the chain sub-line
   under the gate pill. */
.ms-mark { color: var(--muted); margin-right: .3rem; font-size: .8rem; }
.chain-mark { margin-right: .3rem; font-size: .8rem; }
.chain-sub { display: block; font-size: .7rem; color: var(--muted); white-space: nowrap; }

/* v1.20.1: gate protection banner above the summary cards. */
.gate-health { margin: 0 0 .6rem; padding: .55rem .8rem; border-radius: 6px; font-size: .86rem; line-height: 1.45; }
.gate-health.warn { background: #fff7e0; border: 1px solid #f0c060; }
.gate-health.bad { background: #fdecea; border: 1px solid #e57373; }
/* v1.20.2: the Task cell is a flex row - the name truncates with an ellipsis,
   the kit count and the "+ kit" button never get pushed out of view. */
.t-task-in { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.t-task-in > .tasklink { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-task-in > .tw-count { flex: 0 0 auto; margin-left: 0; }

/* v1.21.2: merged Progress cell */
.prog-done { color: var(--green, #2e7d32); font-weight: 700; font-size: .8rem; white-space: nowrap; }

/* v1.21.3: kit anchor marker beside Baseline Start */
.anchor-mark { font-size: .75rem; color: var(--muted); cursor: help; }
.anchor-mark.warn { color: var(--rag-red, #c0392b); }

/* v1.21.4: kit rows under the Task table - tight cells so all columns fit */
.kit-subtable td { padding: .3rem .25rem; }
.kit-subtable th { padding: .3rem .25rem; }
.kit-subtable .lead-input, .kit-subtable .rl-input, .kit-subtable .touch-input { width: 38px; padding: .12rem .2rem; }
.kit-subtable .qty-input { width: 32px; padding: .12rem .15rem; }
.kit-subtable .pred-input { width: 100%; box-sizing: border-box; }
.kit-subtable td.tk-actbtns { white-space: nowrap; padding-left: .15rem; }
.kit-subtable td.tk-actbtns .iconbtn { padding: .12rem .28rem; font-size: .8rem; }
#attach tr.kit-children > td { padding: 0 0 .4rem 0; }

/* v1.22: stale remaining-lead report */
.kit-subtable .rl-input.stale { border-color: #e0a020; background: #fff7e0; }

/* v1.22.1: kit task not yet due (Open, planned start ahead) - muted, still editable */
.kit-subtable tr.not-due td { opacity: .62; }
.kit-subtable tr.not-due td.tk-actbtns, .kit-subtable tr.not-due td:hover { opacity: 1; }

/* v1.22.4: project finish summary above the timeline */
.g-finish-note { font-size: .86rem; color: var(--muted); padding: .2rem 0 .5rem; }
.g-finish-note b { color: var(--ink); }
.g-finish-note b.late { color: var(--red); }
.g-finish-note b.early { color: var(--green); }

/* v1.22.5 / v1.23.1: Preds cell = editable predecessors + read-only "feeds" hint,
   on ONE line so kit rows keep their height. */
.kit-subtable td.tk-preds { display: flex; flex-direction: row; align-items: center; gap: .2rem; }
.kit-subtable td.tk-preds .pred-input { flex: 1 1 auto; min-width: 0; width: auto; font-size: .78rem; padding: .1rem .2rem; }
.kit-subtable td.tk-preds .succ { flex: 0 0 auto; font-size: .66rem; color: var(--muted); white-space: nowrap; line-height: 1; }

/* v1.23: portfolio modal */
.wip-list { display: flex; flex-direction: column; gap: .5rem; }
.wip-row { display: grid; grid-template-columns: 160px 1fr auto; gap: .6rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.wip-edit { display: flex; gap: .35rem; align-items: center; }
.wip-edit input { font-size: .82rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
#pf-table td, #pf-table th { white-space: nowrap; }
#pf-table input { font-size: .82rem; padding: .2rem .3rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); }

/* Compact Kit task list and configurable columns. */
.kit-column-menu { position: relative; }
.kit-columns-panel { position: absolute; right: 0; top: calc(100% + 5px); z-index: 8; width: 230px; max-height: 340px; overflow: auto; padding: .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); }
.kit-columns-title { font-size: .75rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem; }
.kit-columns-panel label { display: flex; flex-direction: row; align-items: center; gap: .45rem; padding: .3rem .1rem; color: var(--ink); font-size: .82rem; }
.kit-columns-panel input { margin: 0; }
.kit-columns-panel button { margin-top: .45rem; }
.kit-compact-wrap { overflow-x: auto; }
.kit-subtable.kit-compact-table { width: 100%; min-width: 680px; table-layout: auto; }
.kit-compact-table th, .kit-compact-table td { white-space: nowrap; overflow: visible; padding: .48rem .6rem; }
.kit-compact-table th { white-space: nowrap; }
.kit-compact-table .kit-col-name { min-width: 220px; width: 30%; }
.kit-compact-table .kit-col-name .ct-badge { flex: 0 0 auto; }
.kit-name-link { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.kit-name-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-name-link:hover span:last-child { color: var(--accent); text-decoration: underline; }
.kit-row-actions { width: 34px; text-align: right; }
.kit-compact-table tr.not-due td { opacity: .72; }
.kit-compact-table tr.not-due td:hover { opacity: 1; }

/* Kit task detail drawer keeps editing space independent of table width. */
.kit-drawer-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(18, 31, 42, .32); }
.kit-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(520px, 100vw); overflow-y: auto; background: var(--panel); box-shadow: -12px 0 32px rgba(18, 31, 42, .18); outline: none; }
.kit-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 1.1rem 1.35rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.kit-drawer-head h2 { margin: .15rem 0 0; font-size: 1.15rem; line-height: 1.35; overflow-wrap: anywhere; }
.kit-drawer-body { padding: 1rem 1.35rem 2rem; }
.kit-drawer-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; font-size: .82rem; color: var(--muted); }
.kit-drawer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.kit-drawer-stats div, .kit-drawer-fact { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.kit-drawer-stats small, .kit-drawer-fact small { color: var(--muted); font-size: .72rem; }
.kit-drawer-stats strong { font-size: .9rem; }
.kit-drawer-commands { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem 0; }
.kit-drawer-section { border-top: 1px solid var(--line); padding: 1rem 0; }
.kit-drawer-section h3 { margin: 0 0 .75rem; font-size: .88rem; }
.kit-drawer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.kit-drawer-fields label { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--muted); min-width: 0; }
.kit-drawer-fields label.wide { grid-column: 1 / -1; }
.kit-drawer-fields input { min-width: 0; width: 100%; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: .86rem; color: var(--ink); background: #fff; }
.kit-drawer-fields input:focus { outline: 2px solid rgba(15, 118, 110, .22); border-color: var(--accent); }
.kit-drawer-fact span { font-size: .86rem; overflow-wrap: anywhere; }
.kit-drawer-delete { color: var(--red) !important; }
@media (max-width: 520px) { .kit-drawer-fields { grid-template-columns: 1fr; } .kit-drawer-stats { gap: .3rem; } }

/* v1.24.1: drawer tabs (Detail / Report progress / Actions), inline report form,
   editable Stage / Qty on the plan row. */
.kit-drawer-tabs { margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; margin-left: 0; }
.kit-drawer-report label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--muted); margin-top: .8rem; }
.kit-drawer-report label.radio { flex-direction: row; margin-top: 0; }
.kit-drawer-report input:not([type="radio"]), .kit-drawer-report select { min-width: 0; width: 100%; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: .86rem; color: var(--ink); background: #fff; }
.kit-drawer .rv-addform { grid-template-columns: 1fr 1fr; }
.kit-drawer .rv-addform input[type="text"] { grid-column: 1 / -1; }
.kit-drawer .rv-addform .btn { justify-self: start; }
.kit-compact-table .stage-select { max-width: 190px; font-size: .8rem; padding: .18rem .3rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); cursor: pointer; }
.kit-compact-table .stage-select:hover, .kit-compact-table .stage-select:focus { border-color: var(--accent); outline: none; }
.kit-compact-table .qty-input { width: 48px; padding: .15rem .25rem; }
.kit-compact-table .qty-input:disabled, .kit-compact-table .stage-select:disabled { opacity: .6; cursor: default; }

/* v1.24.2: Rem. lead editable on the compact row; report-form field */
.kit-compact-table .rl-input { width: 52px; padding: .15rem .25rem; }
.kit-compact-table .rl-input:disabled { opacity: .6; }
.kit-drawer-report label small { margin-top: .2rem; }

/* v1.25: kit tasks locked by the project's early-start policy */
.kit-compact-table tr.locked td { opacity: .55; }
.kit-compact-table tr.locked td:hover { opacity: .85; }

/* v1.28: Date kit tasks */
.ct-badge.ct-date { background: #fef3c7; color: #92400e; }
.kit-compact-table .xdate-input { font-size: .8rem; padding: .12rem .2rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); max-width: 128px; }
.kit-compact-table .xdate-input:hover, .kit-compact-table .xdate-input:focus { border-color: var(--accent); outline: none; }
.xdate-stale { color: #b45309; font-weight: 600; font-size: .82rem; }
.kit-drawer-fact.wide { grid-column: 1 / -1; }

/* v1.29: editable kit links on the compact row */
.kit-compact-table .link-cell { display: inline-flex; align-items: center; gap: .3rem; }
.kit-compact-table .pred-input { width: 58px; font-size: .8rem; padding: .12rem .25rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); }
.kit-compact-table .pred-input:hover, .kit-compact-table .pred-input:focus { border-color: var(--accent); outline: none; }
.kit-compact-table .link-cell .succ { font-size: .68rem; color: var(--muted); white-space: nowrap; }

/* v1.31: kit baseline / status date */
.late-add { color: #b45309; font-weight: 700; font-size: .78rem; }
.panel-head h2 .pill { font-size: .7rem; vertical-align: middle; font-weight: 600; }

/* v1.31.1 */
.gate-hint { font-size: .68rem; color: #b91c1c; font-weight: 600; line-height: 1.1; white-space: nowrap; }

/* v1.32: plan action bar + kit row selection */
.plan-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .5rem .2rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; font-size: .84rem; }
.plan-actions .pa-item { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 600; }
.plan-actions input[type=date] { font: inherit; font-size: .82rem; padding: .22rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.plan-actions input[type=date].set { border-color: #d97706; background: #fffbeb; }
.plan-actions .muted { font-weight: 400; font-size: .78rem; }
.plan-actions .pa-sep { width: 1px; height: 22px; background: var(--line); }
.kit-compact-table .kit-sel { width: 26px; padding-right: 0; }
.kit-compact-table .kit-sel input { margin: 0; cursor: pointer; }

/* v1.32: the hidden attribute must win over any display rule (.btn, .pill, ...) */
[hidden] { display: none !important; }

/* v1.32.2: the completed part of a started kit task (timeline) */
.g-done-part { opacity: .38; }
.lg-donepart { background: #64748b; opacity: .45; }

/* v2.0 phase 2: signed-in chip */
.who-chip { align-self: flex-end; border: 1px solid #cbd5e1; background: #f8fafc; color: var(--ink); border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.who-chip b { font-weight: 600; }
.who-chip .muted { margin-left: .3rem; }
.controls input[disabled] { background: #f1f5f9; color: #475569; }
.people-table { table-layout: fixed; }
.people-table td, .people-table th { vertical-align: middle; padding: .35rem .3rem; }
.people-table th:nth-child(1) { width: 18%; } .people-table th:nth-child(2) { width: 25%; }
.people-table th:nth-child(3) { width: 18%; } .people-table th:nth-child(4), .people-table th:nth-child(5) { width: 7%; }
.people-table th:nth-child(6) { width: 9%; } .people-table th:nth-child(7) { width: 6%; }
.people-table input[type=text], .people-table input[type=email] { width: 100%; min-width: 0; box-sizing: border-box; }
.people-table input[type=checkbox] { width: auto; min-width: 0; padding: 0; margin: 0 auto; display: block; }
.people-table td:nth-child(4), .people-table td:nth-child(5) { text-align: center; }
.key-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #0f172a; color: #e2e8f0; padding: .6rem .8rem; border-radius: 8px; word-break: break-all; user-select: all; }

/* v2.0 phase 3: functions and roles */
.fn-list { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.fn-list .pill { display: inline-flex; align-items: center; gap: .3rem; background: #f1f5f9; color: var(--ink); }
.fn-list .pill.ok { background: #dcfce7; }
.fn-list input { min-width: 200px; }
.linkbtn { border: 0; background: transparent; cursor: pointer; color: #64748b; font-size: .85rem; padding: 0 .15rem; }
.linkbtn:hover { color: #991b1b; }
.fn-checks { display: flex; flex-wrap: wrap; gap: .25rem .7rem; }
.modal-card .fn-checks label, .modal-card .perm-grid label, .modal-card label.toggle { flex-direction: row; align-items: center; margin-top: 0; }
.modal-card label.toggle { display: inline-flex; gap: .4rem; color: var(--ink); font-size: .82rem; }
.modal-card label.toggle input[type=checkbox] { min-width: 0; width: auto; padding: 0; margin: 0; }
.fn-checks label { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ink); white-space: nowrap; }
.fn-checks input[type=checkbox] { min-width: 0; width: auto; padding: 0; margin: 0; }
.people-table th:nth-child(3) { width: 26%; }
.two-col { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.side-list { display: flex; flex-direction: column; gap: .3rem; }
.side-item { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: .45rem .6rem; cursor: pointer; font-size: .85rem; }
.side-item.active { border-color: var(--brand, #0f766e); background: #ecfdf5; }
.side-item.inactive { opacity: .55; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .4rem .8rem; }
.perm-grid label { display: flex; gap: .4rem; align-items: baseline; font-size: .82rem; color: var(--ink); padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; }
.perm-grid label:has(input:checked) { background: #ecfdf5; border-color: #99f6e4; }
.perm-grid input[type=checkbox] { min-width: 0; width: auto; padding: 0; }
.side-detail .row-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* v2.4: full-page sign-in gate (KIT_REQUIRE_LOGIN) */
body.login-gate main, body.login-gate .topbar .controls { visibility: hidden; }
body.login-gate #login-modal { background: var(--bg, #f3f5f7); }

/* v2.5.3: per-person access panel */
.pp-access td { background: #f8fafc; }
.access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .5rem .8rem; }
.modal-card .access-role { display: flex; flex-direction: row; gap: .5rem; align-items: flex-start; font-size: .82rem; color: var(--ink); padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 8px; margin-top: 0; }
.access-role:has(input:checked) { background: #ecfdf5; border-color: #99f6e4; }
.access-role input[type=checkbox] { min-width: 0; width: auto; padding: 0; margin-top: .2rem; }

/* v2.6.3: refresh as an icon; spins while loading */
#refresh { align-self: flex-end; }
#refresh.busy { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }