/* Layout: a fixed sidebar and top bar frame one working surface; detail slides in from the right. */
:root {
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --accent: #4c7dff;
  --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b;
  --r1: 4px; --r2: 6px; --r3: 10px;
  --side: 216px; --lw: 184px; --top: 52px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme=dark], :root[data-theme=dusk] {
  color-scheme: dark;
  --bg: #0a0e16; --surface: #0e141f; --panel: #131b29; --raise: #1b2537; --hover: rgba(148, 163, 184, .08);
  --line: rgba(148, 163, 184, .13); --line2: rgba(148, 163, 184, .26);
  --text: #e9eef6; --text2: #a6b3c6; --text3: #73829a;
  --soft: rgba(76, 125, 255, .16);
  --good-t: #3ecf5a; --warn-t: #fab219; --crit-t: #f47171;
  --c0: #5b6b82; --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
  --on1: #06101f; --on2: #fff; --on3: #04140d; --on4: #1a1100; --on5: #fff; --on6: #fff; --on7: #0b0820; --on8: #1f0606;
  --st0: #184f95; --st1: #1c5cab; --st2: #2a78d6; --st3: #5598e7; --st4: #86b6ef; --st5: #b7d3f6;
  --os0: #fff; --os1: #fff; --os2: #fff; --os3: #06101f; --os4: #06101f; --os5: #06101f;
  --shadow: 0 20px 44px -20px rgba(0, 0, 0, .75);
  --rest: 0 1px 2px rgba(0, 0, 0, .28); --lift: 0 12px 22px -12px rgba(0, 0, 0, .7), 0 2px 5px rgba(0, 0, 0, .25);
}
:root[data-theme=light], :root[data-theme=glass], :root[data-theme=paper] {
  color-scheme: light;
  --bg: #f1f3f6; --surface: #f7f8fa; --panel: #ffffff; --raise: #ffffff; --hover: rgba(15, 23, 42, .05);
  --line: rgba(15, 23, 42, .10); --line2: rgba(15, 23, 42, .22);
  --text: #131a24; --text2: #4a5668; --text3: #7a8798;
  --soft: rgba(76, 125, 255, .12);
  --good-t: #006300; --warn-t: #8a5a00; --crit-t: #c02f2f;
  --c0: #8a97a8; --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7; --c8: #e34948;
  --on1: #fff; --on2: #2a0f00; --on3: #04140d; --on4: #1a1100; --on5: #2a0716; --on6: #fff; --on7: #fff; --on8: #fff;
  --st0: #b7d3f6; --st1: #86b6ef; --st2: #5598e7; --st3: #2a78d6; --st4: #1c5cab; --st5: #0d366b;
  --os0: #06101f; --os1: #06101f; --os2: #06101f; --os3: #fff; --os4: #fff; --os5: #fff;
  --shadow: 0 18px 40px -22px rgba(15, 23, 42, .35);
  --rest: 0 1px 2px rgba(15, 23, 42, .07); --lift: 0 12px 22px -14px rgba(15, 23, 42, .3), 0 2px 5px rgba(15, 23, 42, .07);
}
.k0 { --c: var(--c0); --on: #fff } .k1 { --c: var(--c1); --on: var(--on1) } .k2 { --c: var(--c2); --on: var(--on2) } .k3 { --c: var(--c3); --on: var(--on3) } .k4 { --c: var(--c4); --on: var(--on4) }
.k5 { --c: var(--c5); --on: var(--on5) } .k6 { --c: var(--c6); --on: var(--on6) } .k7 { --c: var(--c7); --on: var(--on7) } .k8 { --c: var(--c8); --on: var(--on8) }
.sg0 { --c: var(--st0); --on: var(--os0) } .sg1 { --c: var(--st1); --on: var(--os1) } .sg2 { --c: var(--st2); --on: var(--os2) } .sg3 { --c: var(--st3); --on: var(--os3) }
.sg4 { --c: var(--st4); --on: var(--os4) } .sg5 { --c: var(--st5); --on: var(--os5) } .sg6 { --c: var(--good); --on: #fff }

* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 var(--font); font-feature-settings: 'cv11', 'ss03'; -webkit-font-smoothing: antialiased; overflow: hidden }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 }
button:disabled { opacity: .38; cursor: default }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.ic { flex-shrink: 0; display: block }
.sp { flex: 1 }
.num, td, .tile b, .ch { font-variant-numeric: tabular-nums }

/* ---------------------------------------------------------------- frame */
.app { display: flex; height: 100% }
.side { width: var(--side); flex-shrink: 0; background: var(--bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px 10px }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 10px }
.brand .mark { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; display: grid; place-items: center }
.brand b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .01em }
.brand small { display: block; color: var(--text3); font-size: 11px }
.nav-h { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); padding: 16px 10px 6px }
.nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r2); color: var(--text2); font-weight: 500; width: 100%; text-align: left; transition: background .12s, color .12s }
.nav:hover { background: var(--hover); color: var(--text) }
.nav[aria-current=page] { background: var(--soft); color: var(--text) }
.nav[aria-current=page] .ic { color: var(--accent) }
.nav .count { margin-left: auto; font-size: 10.5px; font-weight: 600; min-width: 18px; height: 18px; border-radius: 9px; background: var(--crit); color: #fff; display: grid; place-items: center; padding: 0 5px }
.side-foot { margin-top: auto; padding: 10px; font-size: 11.5px; color: var(--text3); line-height: 1.55; border-top: 1px solid var(--line) }
.side-foot b { color: var(--text2); font-weight: 500 }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface) }
.top { height: var(--top); flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--line) }
.top .title { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden }
.top h1 { font-size: 15px; font-weight: 600; margin: 0 }
.top .sub { color: var(--text3); font-size: 12px; overflow: hidden; text-overflow: ellipsis }
.lens { display: flex; align-items: center; gap: 8px }
.lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text3) }
.hist { display: flex; gap: 2px }
.search { display: flex; align-items: center; gap: 6px; height: 30px; width: 232px; padding: 0 8px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); color: var(--text3); transition: border-color .12s }
.search:focus-within { border-color: var(--accent) }
.search input { flex: 1; min-width: 0; height: 28px; border: 0; background: none; padding: 0; color: var(--text) }
.search input:focus { outline: none }
kbd { font: 10.5px var(--font); color: var(--text3); border: 1px solid var(--line2); border-radius: 4px; padding: 0 5px; line-height: 16px }
.bar { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 20px; min-height: 46px; border-bottom: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap }
.bar:empty { display: none }
.body { flex: 1; min-height: 0; display: flex }
.pane { flex: 1; min-width: 0; overflow: auto; position: relative }
.pane.grab { cursor: grab } .pane.grabbing { cursor: grabbing; user-select: none }
.page { padding: 20px; display: grid; gap: 16px; max-width: 1480px }
.page.wide { max-width: none }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.cols.a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
@media (max-width: 1180px) { .cols, .cols.c3, .cols.a { grid-template-columns: minmax(0, 1fr) } }

/* ---------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r2); border: 1px solid var(--line2); font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s }
.btn:hover:not(:disabled) { background: var(--hover) }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff }
.btn.pri:hover:not(:disabled) { background: #3d6cf0 }
.btn.ghost { border-color: transparent; color: var(--text2) }
.btn.ghost:hover:not(:disabled) { color: var(--text) }
.btn.bad { color: var(--crit-t) }
.btn.sm { height: 26px; padding: 0 8px; font-size: 12px }
.btn[aria-pressed=true] { background: var(--soft); border-color: transparent }
.icon-btn { width: 30px; height: 30px; border-radius: var(--r2); display: grid; place-items: center; color: var(--text2); transition: background .12s, color .12s }
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--text) }
.icon-btn[aria-pressed=true] { color: var(--accent); background: var(--soft) }
.seg { display: inline-flex; background: var(--hover); border-radius: var(--r2); padding: 2px; gap: 2px }
.seg button { height: 26px; padding: 0 10px; border-radius: 4px; font-weight: 500; color: var(--text2); font-size: 12.5px; white-space: nowrap; transition: background .12s, color .12s }
.seg button:hover { color: var(--text) }
.seg button[aria-pressed=true] { background: var(--raise); color: var(--text); box-shadow: 0 0 0 1px var(--line2) }
.seg.accent button[aria-pressed=true] { background: var(--accent); color: #fff; box-shadow: none }
input, select, textarea { height: 30px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; padding: 0 8px; max-width: 100% }
textarea { height: 64px; padding: 6px 8px; width: 100%; resize: vertical }
input[type=checkbox] { height: 14px; width: 14px; accent-color: var(--accent); margin: 0 }
select option { background: var(--panel); color: var(--text) }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) }
.scope { max-width: 168px }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; font-weight: 500; background: var(--hover); color: var(--text2); white-space: nowrap }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.tag.d, .tag.good { color: var(--good-t) } .tag.l, .tag.crit { color: var(--crit-t) } .tag.r, .tag.warn { color: var(--warn-t) }
.tag.plain::before { display: none }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 7px; flex-shrink: 0; vertical-align: baseline }
.dot.hatch { background: repeating-linear-gradient(135deg, var(--text3) 0 2px, transparent 2px 4px) }
.chipx { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--soft); font-size: 12px; font-weight: 500 }
.meter { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; display: flex; gap: 2px }
.meter i { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: 3px }
.note { font-size: 12px; color: var(--text3); line-height: 1.5; margin: 0 }
.warn-t { color: var(--crit-t); font-weight: 500 }
.muted { color: var(--text3) }
.swatches { display: flex; gap: 6px }
.swatches button { width: 20px; height: 20px; border-radius: 5px; background: var(--c) }
.swatches button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text) }

/* ---------------------------------------------------------------- cards, tiles, tables */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); min-width: 0 }
.card-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; min-height: 40px }
.card-h h3 { margin: 0; font-size: 13px; font-weight: 600 }
.card-h .sub { color: var(--text3); font-size: 12px }
.card-b { padding: 12px 14px 14px }
.card-b.flush { padding: 8px 0 4px; overflow: auto }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); padding: 12px 14px; text-align: left; display: block; min-width: 0; transition: border-color .12s, transform .26s var(--spring), box-shadow .2s }
button.tile:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--lift) }
button.tile:active { transform: scale(.985); transition-duration: .08s }
.tile .k { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px }
.tile b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 2px; font-variant-numeric: normal }
.tile b small { font-size: 13px; font-weight: 500; color: var(--text3); margin-left: 4px }
.tile .s { font-size: 12px; color: var(--text3); display: block }
.tile .spark { position: absolute; right: 12px; top: 12px; opacity: .9 }
.tile .meter { margin-top: 8px }
.good-t { color: var(--good-t) } .crit-t { color: var(--crit-t) } .warn-c { color: var(--warn-t) }
table { border-collapse: collapse; width: 100% }
th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--text3); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap }
td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap }
tr:last-child > td { border-bottom: 0 }
table.grid th { position: sticky; top: 0; background: var(--surface); z-index: 2; height: 36px }
table.grid th[data-sort] { cursor: pointer }
table.grid th.on { color: var(--text) }
table.grid td.on { background: var(--hover) }
table.grid tbody tr:hover { background: var(--hover); cursor: pointer }
table.grid tr.sel { background: var(--soft) !important; box-shadow: inset 2px 0 0 var(--accent) }
td[data-e]:hover { box-shadow: inset 0 0 0 1px var(--line2); cursor: text }
td input, td select { height: 26px; width: 100%; min-width: 64px }
td select { min-width: 92px }
td input[type=checkbox] { width: 14px; min-width: 0; height: 14px }
td.r, th.r { text-align: right }
.form { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; align-items: center }
.form.w { grid-template-columns: 200px minmax(0, 1fr) }
.form label { color: var(--text2); font-size: 12.5px }
.form input:not([type=checkbox]), .form select { width: 100% }
.form .ro { text-align: right; font-weight: 500 }
.sec { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line) }
.sec:first-child { border-top: 0; padding-top: 0; margin-top: 0 }
.empty { padding: 28px 16px; text-align: center; color: var(--text3) }
.empty b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px }

/* ---------------------------------------------------------------- timeline */
.tl { position: relative; min-width: 100%; user-select: none }
.stick { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line2) }
.trow { display: flex; height: 24px; position: relative }
.trow > .l { position: sticky; left: 0; z-index: 3; width: var(--lw); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line2); display: flex; align-items: center; padding: 0 14px; font-size: 12px; color: var(--text2); white-space: nowrap; gap: 8px }
.trow > .c { flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); font-size: 12px; overflow: hidden; white-space: nowrap }
.trow.par > .c { font-size: 11px; font-weight: 600; color: var(--text2); border-right-color: var(--line2); justify-content: flex-start; padding-left: 10px; letter-spacing: .02em }
.trow.hd { height: 36px }
.trow.hd > .c { flex-direction: column; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .1s }
.trow.hd > .c:hover { background: var(--hover) }
.trow.hd > .c small { font-size: 10.5px; font-weight: 400; color: var(--text3) }
.trow.hd > .c.now { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent) }
.trow.hd > .c.off, .col.off { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hover) 5px 6px) }
.trow.load { height: 70px }
.trow.load > .l, .trow.bal > .l { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px }
.ks { display: flex; gap: 10px; flex-wrap: wrap }
.trow.load > .c { flex-direction: column; justify-content: flex-end; padding-bottom: 5px; gap: 3px; border-right-color: transparent }
.trow.load .n { font-size: 11.5px; font-weight: 600; color: var(--text) }
.trow.load .n.cap { color: var(--warn-t) }
.stk { width: 22px; max-width: calc(100% - 6px); display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden }
.stk i { display: block; background: var(--c); min-height: 2px }
.stk i.o { background: color-mix(in srgb, var(--c) 42%, transparent) }
.trow.bal { height: 40px; border-top: 1px solid var(--line) }
.trow.bal > .c { border-right-color: transparent }
.trow.bal svg { position: absolute; left: var(--lw); top: 0; pointer-events: none }
.trow.numr { border-top: 1px solid var(--line) }
.trow.numr > .c { color: var(--text2) } .trow.numr.t > .c { font-weight: 600; color: var(--text) }
.z { color: var(--text3) !important; font-weight: 400 !important }
.neg { color: var(--crit-t) !important; font-weight: 600 }
.lk { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3) }
.lk i { width: 10px; height: 2px; border-radius: 1px; background: var(--c) }
.lk i.sq { height: 8px; width: 8px; border-radius: 2px }
.chips { display: flex; align-items: stretch; position: relative; border-bottom: 1px solid var(--line) }
.chips:last-child { border-bottom: 0; min-height: 300px }
.chips > .l { position: sticky; left: 0; z-index: 2; width: var(--lw); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line2); padding: 10px 14px; font-size: 12px; color: var(--text2) }
.chips > .l b { display: block; color: var(--text); font-weight: 600 }
.chips > .l .hint { color: var(--text3); font-size: 11.5px; line-height: 1.7; margin-top: 10px }
.col { flex-shrink: 0; border-right: 1px solid var(--line); padding: 6px 2px 14px; display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; justify-content: center }
.col.now { background: color-mix(in srgb, var(--accent) 6%, transparent) }
.col.hot, .hot { background: var(--soft) !important; box-shadow: inset 0 0 0 1px var(--accent) }
.todayline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); opacity: .55; z-index: 1; pointer-events: none }
.ch { position: relative; transition: transform .2s var(--spring); width: 38px; height: 20px; border-radius: var(--r1); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; background: color-mix(in srgb, var(--c) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 52%, transparent); color: var(--text) }
.ch.d { background: var(--c); color: var(--on); box-shadow: none }
.ch.late { box-shadow: inset 0 0 0 1.5px var(--crit) }
.ch.mv::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: 3px; opacity: .7 }
.ch.sel { outline: 2px solid var(--text); outline-offset: 1px }
.ch:hover { filter: brightness(1.18); transform: translateY(-1px) scale(1.06); z-index: 1 }
.ch.mini { width: 10px; height: 10px; border-radius: 2px; font-size: 0 }
.ch.mini.mv::after { display: none }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none }
.blk, .kc, .ch { user-select: none; touch-action: none }
/* what is being dragged, as a card picked up off the page */
#ghost { position: fixed; z-index: 50; pointer-events: none; display: none; background: var(--raise); color: var(--text2); border: 1px solid var(--line2); padding: 8px 12px; border-radius: 10px; font-size: 12.5px; white-space: nowrap; box-shadow: var(--lift), var(--shadow); transform: rotate(-2.5deg); transform-origin: 0 0; animation: pick .24s var(--spring) }
#ghost b { color: var(--text); font-weight: 600 }
#ghost i { font-style: normal; color: var(--text3); margin: 0 7px }
#ghost.ok { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent), var(--lift), var(--shadow) }
@keyframes pick { from { opacity: 0; transform: scale(.72) rotate(0) } }
#marq { position: fixed; z-index: 49; pointer-events: none; display: none; border: 1px solid var(--accent); background: var(--soft); border-radius: 2px }

/* ---------------------------------------------------------------- plan */
.plan { display: grid; position: relative; min-width: max-content }
.plan > div { border-bottom: 1px solid var(--line); min-height: 34px; display: flex; align-items: center; position: relative }
.plan .pl { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line2); padding: 0 12px 0 20px; gap: 8px; white-space: nowrap; overflow: hidden }
.plan .ph { position: sticky; top: 0; z-index: 4; background: var(--surface); justify-content: center; font-size: 12px; color: var(--text2); min-height: 28px; border-right: 1px solid var(--line) }
.plan .ph.y { font-weight: 600; color: var(--text); justify-content: flex-start; padding-left: 10px; border-right-color: var(--line2) }
.plan .ph.q { top: 28px; font-size: 11.5px; border-right-color: var(--line2) }
.plan .ph.m { top: 56px; border-bottom-color: var(--line2) }
.plan .ph.now { color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent) }
.plan .pl.ph { z-index: 5; justify-content: flex-start }
.plan .pc { justify-content: center; border-right: 1px solid var(--line); padding: 0 3px }
.plan .pc.qe { border-right-color: var(--line2) }
.plan .pc.now { background: color-mix(in srgb, var(--accent) 6%, transparent) }
.plan .lane { min-height: 78px; background: var(--panel); border-bottom-color: var(--line2); border-top: 1px solid var(--line2) }
.plan .pl.lane { background: var(--panel); flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; cursor: pointer }
.plan .pl.lane .nm { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px }
/* the plus / minus in front of a row that opens into detail rows */
.pm { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line2); font-style: normal; font-size: 13px; line-height: 1; font-weight: 500; color: var(--text2); flex-shrink: 0; transition: background .12s, color .12s, box-shadow .12s }
.plan .pl[aria-expanded]:hover .pm, .plan .pl.ph:hover .pm { background: var(--soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent) }
.plan .pl.ph[data-planall], .plan .pl.ph[data-supall] { cursor: pointer; gap: 6px }
.plan .lane.sm { min-height: 46px }
.plan .pc.lane.sm { justify-content: center; padding-bottom: 0; cursor: default }
.plan .pc.lane.sm:hover { background: var(--panel) } .plan .pc.lane.sm.now:hover { background: color-mix(in srgb, var(--accent) 6%, var(--panel)) }
/* total columns: the whole plan stays in view beside the names, each year gets its own in front of its periods */
.plan .pc.pt, .plan .ph.pt { position: sticky; left: var(--plw); z-index: 3; background: var(--surface); border-right: 1px solid var(--line2); justify-content: center; padding: 0 }
.plan .ph.pt { z-index: 5 }
.plan .pc.py, .plan .ph.py { background: color-mix(in srgb, var(--text3) 9%, var(--surface)); border-right: 1px solid var(--line2); justify-content: center; padding: 0 }
.plan .pc.pt.lane, .plan .pc.pt.lane:hover { background: var(--panel); cursor: default; justify-content: center; padding-bottom: 0 }
.plan .pc.py.lane, .plan .pc.py.lane:hover { background: color-mix(in srgb, var(--text3) 9%, var(--panel)); cursor: default; justify-content: center; padding-bottom: 0 }
.plan .pc.pt b, .plan .pc.py b { font-weight: 600 } .plan .pc.py b:not(.bp) { color: var(--text2) }
.plan .pc.pt .big { font-size: 15px } .plan .pc.py .big { font-size: 13px }
.plan .ph.m.pt, .plan .ph.m.py { font-weight: 600; color: var(--text) }
.plan .pl.lane .t { color: var(--text3); font-size: 12px; padding-left: 22px }
.plan .pc.lane { flex-direction: column; justify-content: flex-end; padding-bottom: 6px; gap: 3px; cursor: pointer }
.plan .pc.lane:hover { background: var(--hover) }
.plan .pc.lane .n { font-size: 12px; font-weight: 600 }
.plan .pc.lane .stk i.pend { background: repeating-linear-gradient(135deg, var(--text3) 0 2px, transparent 2px 4px) }
.plan .pl.srow { padding-left: 42px; font-size: 12.5px }
.plan .pl.srow .nm { font-weight: 500; flex-shrink: 0; cursor: pointer }
.plan .pl.srow .nm:hover { text-decoration: underline }
.plan .pl.srow .po { color: var(--text3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 }
.plan .pl.srow .q { flex-shrink: 0; color: var(--text3); font-size: 11.5px }
.plan .pl.buf, .plan .pc.buf { min-height: 24px; font-size: 11.5px; color: var(--text3) }
.plan .pl.buf { padding-left: 42px }
/* a balance as a pill: green when something is left, red when short */
.bp { font-weight: 600; font-size: 11.5px; padding: 1px 7px; border-radius: 9px; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums }
.bp.pos { color: var(--good-t); background: color-mix(in srgb, var(--good) 17%, transparent) } .bp.neg { color: var(--crit-t); background: color-mix(in srgb, var(--crit) 20%, transparent) } .bp.zero { color: var(--text3); font-weight: 400 }
.blk { width: 100%; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; cursor: grab; color: var(--text); background: linear-gradient(90deg, var(--c) var(--p, 0%), color-mix(in srgb, var(--c) 26%, transparent) var(--p, 0%)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); transition: transform .22s var(--spring), filter .1s }
.blk.full { color: var(--on) }
.blk:hover { filter: brightness(1.15); transform: translateY(-2px) }
.blk:active { transform: scale(.96); transition-duration: .08s }
.blk.sel { outline: 2px solid var(--text); outline-offset: 1px }
.blk.pend { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text3) 38%, transparent) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--line2); cursor: pointer; color: var(--text2) }
.pc.add { cursor: pointer } .pc.add:hover::after { content: '+'; color: var(--text3) }
.flag { position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: var(--text2); z-index: 1 }
.flag::after { content: attr(data-n) ' due'; position: absolute; right: 4px; top: 4px; font-size: 10px; font-weight: 600; line-height: 1; color: var(--text2); white-space: nowrap }
.plan .cm { min-height: 48px }
.plan .pc.cm { align-items: flex-end; padding-bottom: 5px }
.flag.f-risk, .flag.f-missed { background: var(--crit) } .flag.f-risk::after, .flag.f-missed::after { color: var(--crit-t) }
.flag.f-met { background: var(--good) } .flag.f-met::after { color: var(--good-t) }
.pomark { position: absolute; left: 4px; top: 4px; font-size: 10px; font-weight: 600; color: var(--accent); line-height: 1 }

/* ---------------------------------------------------------------- board, calendar */
.board { display: flex; gap: 12px; padding: 16px 20px; min-height: 100%; align-items: stretch }
.blane { flex: 1; min-width: 156px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); display: flex; flex-direction: column }
.blane h4 { margin: 0; padding: 12px 10px 10px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap }
.blane h4 .dot { margin-right: 0 }
.blane h4 span { margin-left: auto; color: var(--text3); font-weight: 500 }
.lanebtn { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 6px 9px; border-radius: 8px; background: var(--soft); font-size: 11.5px; color: var(--text2); text-align: left; transition: transform .24s var(--spring), filter .12s }
.lanebtn b { color: var(--accent); font-weight: 600; white-space: nowrap }
.lanebtn:hover { filter: brightness(1.15); transform: translateY(-1px) }
.blane { transition: background .15s, box-shadow .15s }
.blane .cards { flex: 1; padding: 0 8px 40px; display: flex; flex-direction: column; gap: 6px }
.kc { position: relative; background: var(--raise); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: grab; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; box-shadow: var(--rest); transition: border-color .12s, transform .24s var(--spring), box-shadow .2s }
.kc:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--lift) }
.kc:active { transform: scale(.97); transition-duration: .08s }
.kc .t1 { display: flex; align-items: center; gap: 6px }
.kc small { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kc .dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px }
.kc b { font-weight: 600; font-size: 13px }
.kc .dt { margin-left: auto; color: var(--text3); white-space: nowrap } .kc .dt.late { color: var(--crit-t) }
.kc .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.kc.sel { outline: 2px solid var(--text) }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); min-height: 100% }
.cal .dh { background: var(--surface); padding: 8px 10px; font-size: 11.5px; font-weight: 500; color: var(--text3) }
.cal .dc { background: var(--surface); min-height: 118px; padding: 8px; display: flex; flex-direction: column; gap: 6px }
.cal .dc.out { opacity: .4 } .cal .dc.off { background: var(--bg) } .cal .dc.now { box-shadow: inset 0 2px 0 var(--accent) }
.cal .dn { display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: var(--text2); font-size: 12px }
.cal .dn small { color: var(--text3); font-size: 11.5px } .cal .dn small.over { color: var(--crit-t); font-weight: 600 }
.cal .ds { display: flex; flex-wrap: wrap; gap: 3px }

/* ---------------------------------------------------------------- drawer */
.drawer { width: 0; flex-shrink: 0; background: var(--panel); border-left: 1px solid var(--line); overflow: hidden auto }
.drawer.anim > .in { animation: slide .18s var(--ease) }
@keyframes slide { from { opacity: 0; transform: translateX(14px) } }
.drawer.open { width: 344px }
.drawer > .in { width: 344px; padding: 16px }
.drawer h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em }
.dhead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px }
.dtags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px }
.track { position: relative; height: 54px; margin: 14px 30px 4px }
.track .ln { position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--line2); border-radius: 1px }
.track .pt { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--panel); border: 2px solid var(--text2) }
.track .pt.cur { border-color: var(--accent); background: var(--accent) }
.track .pt.act { border-color: var(--good); background: var(--good) }
.track .pt.td { width: 2px; height: 22px; top: 6px; margin-left: -1px; border: 0; border-radius: 1px; background: var(--text3) }
.track .lb { position: absolute; top: 30px; transform: translateX(-50%); font-size: 10.5px; color: var(--text3); white-space: nowrap; text-align: center; line-height: 1.25 }
.track .lb b { display: block; color: var(--text2); font-weight: 500 }
.histlog { font-size: 12px; color: var(--text2); line-height: 1.7 }
.dgrp { margin-top: 14px } .dgrp h4 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text2); display: flex; gap: 6px } .dgrp h4 b { color: var(--text) }
.dgrp .cs { display: flex; flex-wrap: wrap; gap: 3px }

/* ---------------------------------------------------------------- overlays */
.selbar { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 16px); z-index: 20; display: flex; align-items: center; gap: 6px; background: var(--raise); border: 1px solid var(--line2); border-radius: 12px; padding: 7px 8px 7px 14px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .14s, transform .16s var(--ease); white-space: nowrap }
.selbar.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto }
.selbar b { font-weight: 600; margin-right: 6px }
.selbar .vr { width: 1px; height: 18px; background: var(--line2); margin: 0 4px }
.toast { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-weight: 500; display: none; max-width: 80vw; box-shadow: var(--shadow) }
.veil { position: fixed; inset: 0; z-index: 40; background: rgba(4, 8, 14, .6); display: none; align-items: center; justify-content: center }
.veil.open { display: flex; animation: fade .12s }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 20px; width: min(600px, 92vw); max-height: 88vh; overflow: auto; box-shadow: var(--shadow); animation: rise .16s var(--ease) }
.modal.w { width: min(760px, 94vw) }
.modal h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600 }
.modal .lead { color: var(--text3); margin: 0 0 16px; font-size: 12.5px }
.modal .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px }
.imp { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 16px; font-size: 12.5px }
.imp .w { color: var(--crit-t); font-weight: 600 } .imp .g { color: var(--good-t); font-weight: 600 }
.pop { position: fixed; z-index: 30; display: none; background: var(--raise); border: 1px solid var(--line2); border-radius: var(--r3); padding: 14px; box-shadow: var(--shadow); min-width: 260px; animation: rise .12s var(--ease) }
.pop.open { display: block }
.pop .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px }
.pop .row:last-child { margin-bottom: 0 }
.pop .row > span { color: var(--text2); font-size: 12.5px }
.tip { position: fixed; z-index: 70; pointer-events: none; display: none; background: var(--raise); border: 1px solid var(--line2); border-radius: 8px; padding: 9px 11px; box-shadow: var(--shadow); font-size: 12px; max-width: 320px; line-height: 1.5 }
.tip h5 { margin: 0 0 5px; font-size: 12px; font-weight: 600 }
.tip .tr { display: flex; align-items: center; gap: 8px; justify-content: space-between; color: var(--text2) }
.tip .tr b { color: var(--text); font-weight: 600; margin-left: 14px }
.tip .tr i { width: 10px; height: 2px; border-radius: 1px; background: var(--c); margin-right: 6px; display: inline-block; vertical-align: middle }
.tip .ft { color: var(--text3); margin-top: 5px; font-size: 11.5px }
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* ---------------------------------------------------------------- charts */
.chart { width: 100%; position: relative }
.chart svg { display: block; overflow: visible }
.chart text { fill: var(--text3); font: 11px var(--font) }
.chart .gl { stroke: var(--line); stroke-width: 1 }
.chart .ax { stroke: var(--line2); stroke-width: 1 }
.chart .hit { fill: transparent; cursor: pointer }
.chart .hit:hover { fill: var(--hover) }
.chart .end { fill: var(--text2); font-weight: 500 }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text2) }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.legend i { width: 12px; height: 2px; border-radius: 1px; background: var(--c) }
.legend i.sq { width: 9px; height: 9px; border-radius: 2px }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 6px) }
.hbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 8px 12px; align-items: center; font-size: 12.5px }
.hbar .tr { display: contents; cursor: pointer }
.hbar .lab { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hbar .bar-t { height: 14px; border-radius: 0 4px 4px 0; background: var(--c, var(--c1)); min-width: 2px; transition: filter .1s }
.hbar .tr:hover .bar-t { filter: brightness(1.2) }
.hbar .v { text-align: right; font-weight: 600 }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 3px }
.heat i { aspect-ratio: 1; border-radius: 2px; background: var(--hover); cursor: pointer }
.heat span { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: visible; height: 16px }
.heat i.p { box-shadow: inset 0 0 0 1px var(--line2); background: transparent }
.heat i.h1 { background: var(--st0) } .heat i.h2 { background: var(--st1) } .heat i.h3 { background: var(--st2) } .heat i.h4 { background: var(--st3) } .heat i.h5 { background: var(--st4) }
.heat i.x { visibility: hidden }
.heat i:hover { outline: 1px solid var(--text) }
.sqgrid { display: flex; flex-wrap: wrap; gap: 2px }
.sqgrid i { width: 10px; height: 10px; border-radius: 2px; background: var(--hover); cursor: pointer }
.sqgrid i.d { background: var(--c) }
.sqgrid i:hover { outline: 1px solid var(--text) }
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.qd { border: 1px solid var(--line); border-radius: var(--r3); padding: 12px; min-height: 96px; cursor: pointer; transition: border-color .12s, transform .24s var(--spring), box-shadow .2s }
.qd:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--lift) }
.qd .qh .dot { border-radius: 50% }
.qd .qh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px } .qd .qh b { font-size: 22px; font-weight: 600 } .qd .qh span { color: var(--text2) }
.qd .cs { display: flex; flex-wrap: wrap; gap: 3px }
.exc { display: flex; align-items: center; gap: 12px; padding: 9px 14px; width: 100%; text-align: left; border-top: 1px solid var(--line); transition: background .1s }
.exc:first-child { border-top: 0 }
.exc:hover { background: var(--hover) }
.exc b { min-width: 30px; text-align: right; font-size: 15px; font-weight: 600 }
.exc .ic { color: var(--text3) } .exc.crit .ic { color: var(--crit-t) } .exc.warn .ic { color: var(--warn-t) }
.exc span { flex: 1 } .exc .go { color: var(--text3) }
.sowl { display: grid; gap: 8px }
.sowc { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); transition: border-color .12s, transform .24s var(--spring), box-shadow .2s }
.sowc:hover { border-color: var(--line2); transform: translateY(-1px); box-shadow: var(--lift) }
.sowc[aria-current=true] { background: var(--soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }
.sowc .h .dot { margin-right: 0 }
.sowc .h { display: flex; align-items: center; gap: 8px } .sowc .h b { font-weight: 600 } .sowc .h small { color: var(--text3); margin-left: auto }
.sowc .m { display: flex; justify-content: space-between; color: var(--text3); font-size: 12px }

/* ---------------------------------------------------------------- playground */
.draftbar { display: none; align-items: center; gap: 10px; padding: 0 14px 0 20px; min-height: 40px; background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); flex-shrink: 0; font-size: 12.5px; white-space: nowrap }
.draftbar.open { display: flex }
.draftbar .dimp { display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; flex-shrink: 1 }
.draftbar .btn, .draftbar > b, .draftbar > .ic { flex-shrink: 0 }
.draftbar > .ic { color: var(--accent) }
.draftbar b { font-weight: 600 }
.draftbar > span { color: var(--text2) }
/* changed in the playground: a small accent dot on the corner, the same on every kind of card */
.ch.dr::before, .tk.dr::before { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface) }
.ch.mini.dr::before { display: none } .ch.mini.dr { box-shadow: 0 0 0 1.5px var(--accent) }
.blk { position: relative }
.blk.dr::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface) }
td.drc { box-shadow: inset 0 -2px 0 var(--accent) }
.drbox { margin-top: 12px; padding: 10px 12px; border-radius: var(--r2); background: var(--soft); font-size: 12px; display: grid; gap: 3px }
.drbox b { font-weight: 600 }
.drbox .btn { justify-self: start; margin-top: 6px }

/* ---------------------------------------------------------------- timeline header in the Plan's language */
.trow.blks { height: 34px }
.trow.blks > .l { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px }
.trow.blks > .c { border-right-color: transparent; padding: 0 2px; cursor: pointer }
.trow .blk { max-width: 76px; height: 22px; cursor: pointer }
.trow .blk.over { box-shadow: inset 0 0 0 1.5px var(--warn) }
.spl { display: flex; gap: 2px; width: 100%; max-width: 76px; height: 20px; cursor: pointer; border-radius: 5px; overflow: hidden; transition: filter .1s }
.spl i { display: flex; align-items: center; justify-content: center; min-width: 8px; background: var(--c); color: var(--on); font-style: normal; font-size: 11px; font-weight: 600 }
.spl:hover { filter: brightness(1.18) }
.ds { display: flex; flex-wrap: wrap; gap: 3px }

/* ---------------------------------------------------------------- sprint: trucks */
.trucks { display: grid; gap: 1px; background: var(--line); min-height: 100% }
.trucks > div { background: var(--surface); padding: 12px; min-width: 0; transition: background .15s, box-shadow .15s }
.trucks > .tray { background: var(--bg) }
.th { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px }
.th b { font-weight: 600 }
.tday.off { background: var(--bg) }
.tday.now { box-shadow: inset 0 2px 0 var(--accent) }
.tday .meter { margin-bottom: 10px }
.truck, .loose { border: 1px solid var(--line); border-radius: var(--r3); padding: 8px; margin-bottom: 8px; background: var(--panel); transition: transform .26s var(--spring), background .15s, box-shadow .15s }
.truck.over { border-color: var(--crit) }
.truck.hot { transform: scale(1.025) }
.truck.hot .free { border-color: var(--accent) }
.loose { border-style: dashed; background: none; min-height: 60px }
.tn { display: flex; align-items: center; justify-content: space-between; min-height: 20px; font-size: 11px; color: var(--text3); font-weight: 500; margin-bottom: 6px }
.tn .btn { height: 20px; padding: 0 6px; font-size: 11px; color: var(--accent) }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
.free { display: block; height: 44px; border: 1px dashed var(--line2); border-radius: 8px; transition: border-color .12s }
/* a kit as a card: a plain raised surface, the busway as a dot beside its name */
.tk { position: relative; height: 44px; border-radius: 8px; padding: 5px 9px; background: var(--raise); border: 1px solid var(--line2); box-shadow: var(--rest); cursor: grab; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; user-select: none; touch-action: none; transition: transform .24s var(--spring), box-shadow .2s, border-color .12s }
.tk:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: var(--text3) }
.tk:active { transform: scale(.96); transition-duration: .08s }
.tk b { font-weight: 600; line-height: 1.15; font-size: 13px }
.tk .t1 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px }
.tk .t1 i { font-style: normal; font-size: 10.5px; color: var(--text3) }
.tk small { font-size: 10.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tk .dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px }
.tk.early { border-style: dashed; border-color: var(--warn) } .tk.early small { color: var(--warn-t) }
.tk.done { background: none; box-shadow: none; border-color: var(--line); cursor: default }
.tk.done:hover { transform: none; box-shadow: none; border-color: var(--line) }
.tk.done b { color: var(--text2) } .tk.done b::after { content: '✓'; color: var(--good-t); margin-left: 5px; font-size: 11px }
.tk.sel, .kc.sel { outline: 2px solid var(--accent); outline-offset: 1px }
button.card.wk { text-align: left; cursor: pointer; transition: border-color .12s, transform .26s var(--spring), box-shadow .2s }
button.card.wk:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--lift) }
button.card.wk.now { border-color: color-mix(in srgb, var(--accent) 60%, transparent) }
.wkbars { display: flex; gap: 8px; align-items: flex-end; height: 96px; margin-bottom: 12px }
.wkbars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100% }
.wkbars .n { font-size: 11.5px; font-weight: 600; min-height: 14px }
.wkbars small { font-size: 11px; color: var(--text3) }
.wkbars small.tdy { color: var(--accent); font-weight: 600 }

/* ---------------------------------------------------------------- motion: pick up, hover a target, land */
.lift { opacity: .35 !important; transform: scale(.95) !important; box-shadow: none !important }
.landed { animation: land .46s cubic-bezier(.3, 1.35, .5, 1) both }
@keyframes land { 0% { opacity: .2; transform: scale(.78) } 55% { opacity: 1; transform: scale(1.09) } 100% { transform: scale(1) } }
.hot { transition: background .12s }
.cal .dc, .plan .pc { transition: background .12s }

/* ---------------------------------------------------------------- timeline: navigator and hover band */
.navi { display: none; height: 44px; flex-shrink: 0; position: relative; border-top: 1px solid var(--line2); background: var(--bg); cursor: pointer; touch-action: none; user-select: none; overflow: hidden }
.navi.open { display: block }
.navi svg { display: block; margin-top: 2px }
.navi text { fill: var(--text3); font: 10.5px var(--font) }
.navi .win { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--accent); pointer-events: none }
.colhl { position: absolute; top: 0; bottom: 0; display: none; background: var(--hover); pointer-events: none; z-index: 1 }

/* ---------------------------------------------------------------- supply: totals and carry-overs */
.cy { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--c7); background: color-mix(in srgb, var(--c7) 20%, transparent); font-variant-numeric: tabular-nums }
.cy.yr { background: var(--c7); color: var(--on7) }
.cy.neg { color: var(--crit-t); background: none; box-shadow: inset 0 0 0 1px var(--c7) }
.cy.yr.neg { background: color-mix(in srgb, var(--crit) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--c7) }
.plan .pc.ys { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c7) 55%, transparent) }
.blk.tot { cursor: default; color: var(--text); background: color-mix(in srgb, var(--text2) 24%, transparent); box-shadow: inset 0 0 0 1px var(--line2) }
.blk.tot:hover { transform: none; filter: none }
.legend b.pos { color: var(--good-t) } .legend b.neg { color: var(--crit-t) }

/* ---------------------------------------------------------------- supply calendar */
.rc { padding: 2px 7px; border-radius: var(--r1); font-size: 11.5px; font-weight: 500; cursor: grab; background: color-mix(in srgb, var(--c) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 52%, transparent); user-select: none; touch-action: none; white-space: nowrap }
.rc.d { background: var(--c); color: var(--on); box-shadow: none }

/* ---------------------------------------------------------------- flags, the start of a project, optional detail */
.flagbar { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 14%, transparent); font-size: 12px; margin-bottom: 10px }
.flagbar > .ic { color: var(--warn-t) } .flagbar > span { flex: 1; min-width: 0 } .flagbar b { font-weight: 600 }
label.btn { cursor: pointer }
.start { min-height: 100%; display: grid; place-items: center; padding: 40px 20px }
.start-in { max-width: 470px; text-align: center; display: grid; gap: 12px; justify-items: center }
.start-in .mark { width: 48px; height: 48px; border-radius: 14px; background: var(--soft); color: var(--accent); display: grid; place-items: center }
.start-in h2 { margin: 4px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em }
.start-in p { margin: 0; color: var(--text2); line-height: 1.55 }
.start-in .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px }
details.more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px }
details.more summary { cursor: pointer; font-weight: 500; color: var(--text2); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none }
details.more summary::-webkit-details-marker { display: none }
details.more summary::before { content: '+'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line2); font-size: 13px; line-height: 1 }
details.more[open] summary::before { content: '−' }
details.more[open] summary { margin-bottom: 14px; color: var(--text) }
details.more summary:hover { color: var(--text) }

/* ---------------------------------------------------------------- plan canvas */
.cv { display: grid; position: relative; min-width: max-content; user-select: none; font-variant-numeric: tabular-nums }
.cv > div { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 34px; display: flex; align-items: center; justify-content: center; position: relative }
.cv .cvl { position: sticky; left: 0; z-index: 3; background: var(--surface); justify-content: flex-start; gap: 7px; padding: 0 10px 0 6px; border-right-color: var(--line2); white-space: nowrap; overflow: hidden; min-width: 0 }
.cv .cvt { position: sticky; left: 290px; z-index: 3; background: var(--surface); border-right-color: var(--line2); gap: 3px }
.cv .cvh { position: sticky; top: 0; z-index: 4; background: var(--surface); font-size: 11.5px; color: var(--text2); min-height: 26px }
.cv .cvh.grp { justify-content: flex-start; padding-left: 8px; font-weight: 600; color: var(--text); border-right-color: var(--line2) }
.cv .cvh.l2 { min-height: 30px; border-bottom-color: var(--line2); flex-direction: column; line-height: 1.15 }
.cv .cvh.l2 small { font-size: 10px; color: var(--text3) }
.cv .cvh.cvl, .cv .cvh.cvt { z-index: 5 } .cv .cvh.cvt { font-weight: 600; color: var(--text) } .cv .cvh.cvl.l2 { flex-direction: row; padding-left: 12px }
.cv .cvh.now { color: var(--accent); font-weight: 600 }
.cv .now:not(.cvh) { background-color: color-mix(in srgb, var(--accent) 5%, transparent) }
.cv .strip { min-height: 44px; align-items: flex-end; padding-bottom: 4px; border-bottom-color: var(--line2) }
.cv .cvl.strip { align-items: center; padding-bottom: 0; padding-left: 12px; justify-content: space-between }
.cv .strip .lbar { width: calc(100% - 10px); max-width: 28px; display: flex; flex-direction: column; border-radius: 3px 3px 1px 1px; overflow: hidden; gap: 1px }
.cv .strip .lbar i { display: block; background: var(--c); min-height: 0 }
.cv .strip.over .bar { box-shadow: 0 0 0 1.5px var(--crit) }
.cv .cc { cursor: cell; font-size: 12.5px; transition: background-color .12s }
.cv .cc.v { background-color: color-mix(in srgb, var(--c) var(--a), transparent) }
.cv .cc.fc.v { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--surface) 55%, transparent) 4px 6px) }
.cv .cc.act { box-shadow: inset 0 0 0 2px var(--accent); z-index: 2 }
.cv .cc.insel::after { content: ''; position: absolute; inset: 0; background: var(--soft); pointer-events: none }
.cv .cc.insel.act::after { background: none }
.cv .cvin { width: 100%; height: 100%; min-height: 32px; border: 0; border-radius: 0; text-align: center; background: var(--raise); padding: 0 2px; font: inherit; font-weight: 600 }
.cv .tot { background: var(--panel); font-weight: 600; border-bottom-color: var(--line2) }
.cv .cvl.tot { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding-left: 12px } .cv .cvl.tot .muted { font-size: 11px; font-weight: 400 }
.cv .cc.tot.cap:not(.ok):not(.under):not(.over) { color: var(--crit-t) }
.cv .cc.ok { box-shadow: inset 0 -2px 0 var(--good) } .cv .cc.under { box-shadow: inset 0 -2px 0 var(--warn) } .cv .cc.over { box-shadow: inset 0 -2px 0 var(--crit) }
.cv .cc.act.ok, .cv .cc.act.under, .cv .cc.act.over { box-shadow: inset 0 0 0 2px var(--accent) }
.cv .cvt b { font-weight: 600 } .cv .cvt small { color: var(--text3); font-size: 11px; font-weight: 500 }
.cv .gap { font-size: 10.5px; font-weight: 600; padding: 0 5px; border-radius: 8px; line-height: 16px; margin-left: 2px }
.cv .gap.under { color: var(--warn-t); background: color-mix(in srgb, var(--warn) 16%, transparent) } .cv .gap.over { color: var(--crit-t); background: color-mix(in srgb, var(--crit) 18%, transparent) }
.cv .line .hdl { color: var(--text3); cursor: grab; opacity: 0; display: flex; transition: opacity .12s } .cv .line:hover .hdl { opacity: 1 }
.cv .line .pm { flex-shrink: 0 } .cv .line .dot { margin-right: 0 }
.cv .line .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: left } .cv .line .nm:hover { text-decoration: underline }
.cv .kind { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: var(--hover); color: var(--text2); flex-shrink: 0 } .cv .kind:hover { color: var(--text); background: var(--soft) }
.cv .kind.forecast { color: var(--c7); background: color-mix(in srgb, var(--c7) 16%, transparent) }
.cv .dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-left: auto }
.cv .sub { font-size: 11.5px; color: var(--text2); min-height: 28px } .cv .cvl.sub { padding-left: 52px } .cv .cvl.sub .muted { margin-left: auto }
.cv .line.hot, .cv .add.hot { box-shadow: inset 0 2px 0 var(--accent) !important; background: var(--surface) !important }
.cv .add { border-bottom: 0; min-height: 40px } .cv .cvl.add { color: var(--text3); padding-left: 12px }
.cv .cvl.add input { border: 0; background: none; height: 30px; flex: 1; padding: 0 4px } .cv .cvl.add input:focus { box-shadow: inset 0 -1px 0 var(--accent) }
.cvinfo { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px }
.cvinfo b { color: var(--text); font-weight: 600 }
.chipx.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-t) } .chipx.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-t) }
.cvnote { position: sticky; left: 0; max-width: min(900px, 100%); padding: 14px 20px }

/* plan canvas: target, planned, left to place */
.cv .cc.tg, .cv .cc.pl, .cv .cc.lfr { background: var(--panel) }
.cv .cvl.tg, .cv .cvl.pl { border-bottom-color: var(--line) }
.cv .cc.tg { font-weight: 600; cursor: text }
.cv .cc.tg:empty:hover::before { content: '+'; color: var(--text3); font-weight: 400 }
.cv .cc.tg.set { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--text) }
.cv .cc.tg.band, .cv .cc.lfr.band { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent) }
.cv .cc.tg.fin { color: var(--text2); font-style: italic; font-weight: 500 }
.cv .cc.pl { color: var(--text); font-weight: 500 } .cv .cc.pl.cap { color: var(--crit-t); font-weight: 600 }
.cv .cc.lfr { border-bottom-color: var(--line2); gap: 6px }
.cv .lf { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 9px; line-height: 16px; white-space: nowrap }
.cv .lf.under { color: var(--warn-t); background: color-mix(in srgb, var(--warn) 16%, transparent) }
.cv .lf.ok { color: var(--good-t); background: color-mix(in srgb, var(--good) 15%, transparent) }
.cv .lf.over { color: var(--crit-t); background: color-mix(in srgb, var(--crit) 18%, transparent) }
.cv .lfb { height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent) }
.cv .lfb:hover { background: var(--soft) }
.cv .strip .tick { position: absolute; left: 4px; right: 4px; height: 0; border-top: 1.5px dashed var(--text2); pointer-events: none }
.cv .cvt .gap { font-size: 10.5px }
.cvinfo { min-width: 260px }

/* ---------------------------------------------------------------- plan canvas v2: inputs are boxed, everything worked out is a label */
.cv .cc.in { background-color: var(--panel); box-shadow: inset 0 0 0 1px var(--line); cursor: cell }
.cv .cc.in:hover { box-shadow: inset 0 0 0 1px var(--line2) }
.cv .cc.in.v { background-color: color-mix(in srgb, var(--c) var(--a), var(--panel)) }
.cv .cc.in.act { box-shadow: inset 0 0 0 2px var(--accent) }
.cv .cc.in.typed { font-weight: 700; color: var(--text) }
.cv .cc.in.o:not(.typed), .cv .cc.in.s:not(.typed) { color: var(--text2) }
.cv .cc.in.s.auto { color: var(--text3); font-style: italic }
.cv .cvt.cc.in { justify-content: center }
.cv .lab { border-right-color: transparent; border-bottom-color: transparent; min-height: 26px; font-size: 12px; color: var(--text2); background: none }
.cv .cvl.lab, .cv .cvl.inrow { padding-left: 34px; gap: 6px }
.cv .cvl.lab .muted, .cv .cvl.inrow .muted { font-size: 11px }
.cv .lab.sum { color: var(--text); font-weight: 600; border-top: 1px solid var(--line2); min-height: 30px }
.cv .cvl.lab.sum { border-top: 1px solid var(--line2) }
.cv .cvt.lab { border-right-color: var(--line2); font-weight: 600; color: var(--text); gap: 4px }
.cv .lab .pos { color: var(--good-t) } .cv .lab .neg { color: var(--crit-t) }
.cv .cvsec { min-height: 34px; background: var(--bg); border-right-color: transparent; border-top: 1px solid var(--line2); border-bottom-color: var(--line) }
.cv .cvl.cvsec { cursor: pointer; gap: 8px; padding-left: 10px; background: var(--bg) } .cv .cvl.cvsec b { font-size: 13px }
.cv .cvl.cvsec .muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis } .cv .cvl.cvsec .btn { flex-shrink: 0 } .cv .cvl.cvsec .btn.sm { height: 24px }
.cv .cvl.cvsec:hover .pm { background: var(--soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent) }
.cv .cvt.cvsec { background: var(--bg) }
.cv .line.pl { padding-left: 34px } .cv .line .pnm { color: var(--text2); overflow: hidden; text-overflow: ellipsis }
.cv .brk { min-height: 24px; border-right-color: transparent; border-bottom-color: transparent; background: none; padding: 0 2px }
.cv .brk.on { align-items: flex-end; padding-bottom: 2px }
.cv .bk { width: 100%; height: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--text2); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-bottom: 0; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--accent) 7%, transparent); white-space: nowrap; overflow: hidden }
.cv .bk:hover { background: var(--soft); color: var(--text) } .cv .bk b { color: var(--text); font-weight: 700 }
.cv .bst { font-style: normal; font-weight: 600; font-size: 11px; display: inline-flex; align-items: center }
.cv .bst.ok { color: var(--good-t) } .cv .bst.under { color: var(--warn-t) } .cv .bst.over { color: var(--crit-t) }
.cv .cvt .gap { margin-left: 3px }
.cv .lk .dash { width: 12px; height: 0; border-top: 1.5px dashed var(--text2); background: none; border-radius: 0 }
.cv .strip.over .lbar { box-shadow: 0 0 0 1.5px var(--crit) }
.cvsum .form { grid-template-columns: minmax(0, 1fr) auto } .cvsum .form label { display: flex; align-items: center; gap: 6px } .cvsum .ro { font-variant-numeric: tabular-nums }
.cv .cvl.lab, .cv .cvt.lab, .cv .cvl.brk, .cv .cvt.brk { background: var(--surface) }
.cv .bk { justify-content: flex-start; padding: 0 8px; text-overflow: ellipsis } .cv .bk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }

/* ---------------------------------------------------------------- plan scenarios */
.sctabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap }
.sctab { height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 500; color: var(--text2); display: inline-flex; align-items: center; gap: 7px; box-shadow: inset 0 0 0 1px var(--line); transition: background .12s, color .12s }
.sctab:hover { color: var(--text); background: var(--hover) }
.sctab[aria-pressed=true] { background: var(--raise); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent) }
.sctab.add { box-shadow: none; color: var(--accent); padding: 0 8px }
.sctab .ondot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 25%, transparent) }
.bar .brk-line { flex-basis: 100%; height: 0 }
.cv .cvsec .ctl { position: sticky; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text2); padding: 4px 0; max-width: calc(100vw - 760px) }
.cv .cvsec .ctl select { height: 26px; font-size: 12px } .cv .cvsec .ctl input[type=number] { width: 52px; height: 26px; font-size: 12px; padding: 0 6px }
.cv .cvsec .ctl label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap }
.cv .cvsec .ctl .hint { color: var(--text3); font-size: 11.5px } .cv .cvsec .ctl .hint.warn { color: var(--warn-t) }
.cv .cvsec.cvsec { justify-content: flex-start }
.cv .btools { margin-left: auto; display: none; gap: 2px } .cv .cvl.cvsec:hover .btools { display: inline-flex }
.cv .btools button { width: 22px; height: 22px; border-radius: 5px; color: var(--text3); font-size: 13px } .cv .btools button:hover { background: var(--hover); color: var(--text) }
.cv .wif { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; color: var(--accent); background: var(--soft); flex-shrink: 0 }
.cv .cvl.add .wifc { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text3); white-space: nowrap } .cv .cvl.add .wifc input { width: 13px; height: 13px; flex: 0 }
.cv .cvl.hid { gap: 6px; flex-wrap: nowrap; overflow: hidden } .cv .cvl.hid button { color: var(--accent); font-size: 11.5px; text-decoration: underline dotted }
.cv .addb { min-height: 40px; border-bottom: 0; background: none } .cv .cvl.addb, .cv .cvt.addb { background: var(--surface) } .cv .cvl.addb { padding-left: 12px }
.cv .addb .ctl { position: sticky; display: flex; gap: 6px }
.cv .cc.in.pin { font-weight: 700; color: var(--text) }
.cv .cc.in.pin::before { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent) }
.cv .cc.in.inpin { color: var(--text) }
.blib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; width: 100%; margin-top: 10px }
.blk-card { display: grid; gap: 3px; text-align: left; padding: 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel); transition: border-color .12s, transform .2s var(--spring) }
.blk-card:hover { border-color: var(--accent); transform: translateY(-2px) } .blk-card b { font-weight: 600 } .blk-card span { font-size: 12px; color: var(--text3) }
.opts { display: grid; gap: 6px; max-height: 46vh; overflow: auto }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer }
.opt:hover { border-color: var(--line2) } .opt input { margin-top: 3px } .opt b { display: block; font-weight: 600 } .opt small { color: var(--text3); font-size: 12px }
.opt:has(input:checked) { border-color: var(--accent); background: var(--soft) }

/* ================================================================ Organic Glass
   Four layers: an environmental ground behind everything, matte data (tables, grids, timelines, charts),
   glass controls (navigation, header, toolbars, side panel, menus, dialogs) and semantic signals.
   Radii nest: the product shell 28px, panels 20px, cards 18px, controls 10px. */
:root { --r1: 5px; --r2: 10px; --r3: 18px; --r-shell: 28px; --r-body: 20px; --ease-out: cubic-bezier(.22, .8, .24, 1) }
:root[data-theme=glass] {
  color-scheme: light;
  --bg: #e9e2d6; --surface: #f6f1e9; --panel: #fcfaf6; --raise: #ffffff; --hover: rgba(62, 46, 28, .06);
  --line: rgba(62, 46, 28, .11); --line2: rgba(62, 46, 28, .22); --text: #1d1912; --text2: #4f463b; --text3: #685d50;
  --accent: #0d7353; --on-accent: #ffffff; --soft: rgba(13, 115, 83, .12); --warm: #c46f32;
  --glass: rgba(252, 248, 242, .58); --glass-2: rgba(253, 250, 245, .84); --glass-edge: rgba(255, 255, 255, .62); --glass-line: rgba(62, 46, 28, .10);
  --shadow: 0 30px 60px -30px rgba(70, 46, 20, .38), 0 2px 8px rgba(70, 46, 20, .05);
  --rest: 0 1px 2px rgba(58, 40, 20, .08); --lift: 0 14px 26px -16px rgba(58, 40, 20, .34), 0 2px 6px rgba(58, 40, 20, .06);
  --yr0: color-mix(in srgb, #0d7353 11%, #f6f1e9); --yr1: color-mix(in srgb, #c46f32 15%, #f6f1e9); --band: rgba(62, 46, 28, .05); --yline: rgba(62, 46, 28, .42);
  --focal-a: #0b5c43; --focal-b: #138a63; --focal-ink: #fdf7ec;
}
:root[data-theme=paper] {
  color-scheme: light;
  --bg: #efebe4; --surface: #fbfaf7; --panel: #ffffff; --raise: #ffffff; --hover: rgba(40, 30, 20, .05);
  --line: rgba(40, 30, 20, .10); --line2: rgba(40, 30, 20, .20); --text: #1b1813; --text2: #4c443a; --text3: #665c50;
  --accent: #0d7353; --on-accent: #ffffff; --soft: rgba(13, 115, 83, .10); --warm: #b8662c;
  --glass: #f7f5f0; --glass-2: #ffffff; --glass-edge: rgba(40, 30, 20, .12); --glass-line: rgba(40, 30, 20, .10);
  --shadow: 0 12px 30px -22px rgba(40, 30, 20, .3); --rest: none; --lift: 0 8px 18px -14px rgba(40, 30, 20, .3);
  --yr0: #eef3ef; --yr1: #f6eee4; --band: rgba(40, 30, 20, .04); --yline: rgba(40, 30, 20, .40);
  --focal-a: #0b5c43; --focal-b: #138a63; --focal-ink: #fdf7ec;
}
:root[data-theme=dusk] {
  color-scheme: dark;
  --bg: #110e0b; --surface: #1a1612; --panel: #221d18; --raise: #2b251f; --hover: rgba(240, 226, 204, .06);
  --line: rgba(240, 226, 204, .09); --line2: rgba(240, 226, 204, .18); --text: #f3ebdf; --text2: #c8baa6; --text3: #a19380;
  --accent: #3fbf8f; --on-accent: #07150f; --soft: rgba(63, 191, 143, .15); --warm: #e8a061;
  --glass: rgba(36, 30, 24, .56); --glass-2: rgba(40, 34, 28, .86); --glass-edge: rgba(255, 236, 210, .09); --glass-line: rgba(255, 236, 210, .08);
  --shadow: 0 30px 60px -28px rgba(0, 0, 0, .85); --rest: 0 1px 2px rgba(0, 0, 0, .3); --lift: 0 14px 26px -14px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .25);
  --yr0: color-mix(in srgb, #3fbf8f 13%, #1a1612); --yr1: color-mix(in srgb, #e8a061 14%, #1a1612); --band: rgba(240, 226, 204, .045); --yline: rgba(240, 226, 204, .34);
  --focal-a: #0f4d39; --focal-b: #19745a; --focal-ink: #fdf7ec;
}

/* the environmental ground: behind the application, never interactive, unrelated to any status */
:root[data-theme=glass] body { background: radial-gradient(60vw 55vh at 4% -8%, rgba(214, 160, 104, .45), transparent 62%), radial-gradient(52vw 55vh at 106% 110%, rgba(44, 126, 94, .32), transparent 60%), radial-gradient(34vw 32vh at 64% 42%, rgba(240, 198, 150, .26), transparent 70%), radial-gradient(22vw 22vh at 28% 92%, rgba(120, 140, 92, .18), transparent 70%), linear-gradient(160deg, #ede5d7, #e3dacb) fixed }
:root[data-theme=dusk] body { background: radial-gradient(58vw 50vh at 4% -10%, rgba(214, 138, 66, .22), transparent 62%), radial-gradient(52vw 55vh at 106% 112%, rgba(36, 146, 108, .20), transparent 60%), radial-gradient(30vw 30vh at 62% 40%, rgba(180, 110, 60, .10), transparent 70%), linear-gradient(160deg, #16120e, #0d0a08) fixed }
:root[data-theme=paper] body { background: var(--bg) }

/* the product shell: glass navigation and header around a matte working surface */
.app { padding: 12px; gap: 12px }
.side { border-radius: 24px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); border: 1px solid var(--glass-edge); box-shadow: var(--shadow) }
.main { border-radius: var(--r-shell); background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); overflow: hidden }
.top, .bar { background: transparent; border-bottom-color: var(--glass-line) }
.top { padding: 0 14px 0 22px }
.draftbar { border-bottom-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent) }
.body { margin: 0 8px 8px; border-radius: var(--r-body); background: var(--surface); border: 1px solid var(--line); overflow: hidden }
.bar:empty + .body, .draftbar + .bar:empty + .body { margin-top: 8px }
.navi { margin: 0 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface) }
.drawer { background: var(--panel); border-left-color: var(--line) }
.modal, .pop, .tip, .selbar { background: var(--glass-2); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3); border-color: var(--glass-edge) }
.modal { border-radius: 22px } .pop { border-radius: 16px } .selbar { border-radius: 16px }
.veil { background: color-mix(in srgb, var(--bg) 40%, rgba(10, 6, 2, .38)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px) }
.toast { border-radius: 12px }
.brand .mark { background: linear-gradient(145deg, var(--focal-a), var(--focal-b)); color: var(--focal-ink); border-radius: 9px; width: 28px; height: 28px; box-shadow: var(--rest) }
.nav { border-radius: 12px; height: 34px }
.nav[aria-current=page] { background: var(--soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) }
.side-foot { border-top-color: var(--glass-line) }

/* controls */
.btn, input, select, textarea, .search { border-radius: var(--r2) }
.btn { transition: background .15s, border-color .15s, transform .18s var(--ease-out), box-shadow .15s }
.btn:active:not(:disabled) { transform: scale(.97) }
.btn.pri { color: var(--on-accent); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 70%, transparent) }
.btn.pri:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, #000) }
.seg { border-radius: 12px; padding: 3px } .seg button { border-radius: 9px; transition: background .18s var(--ease-out), color .15s, box-shadow .18s }
.seg.accent button[aria-pressed=true] { color: var(--on-accent) }
.icon-btn { border-radius: var(--r2) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }
.cv .btools button { width: 24px; height: 24px }

/* matte data surfaces: cards and tiles stay solid and high contrast */
.card, .tile, .blane, .sowc, .qd { border-radius: var(--r3) }
.card, .tile { box-shadow: var(--rest) }
/* one focal KPI card carries the colour; the rest stay quiet */
.tile.focal { background: linear-gradient(140deg, var(--focal-a), var(--focal-b) 70%, color-mix(in srgb, var(--focal-b) 80%, var(--warm))); border-color: transparent; color: var(--focal-ink); box-shadow: var(--lift) }
.tile.focal .k, .tile.focal .s, .tile.focal b small { color: color-mix(in srgb, var(--focal-ink) 82%, transparent) }
.tile.focal .meter { background: rgba(255, 255, 255, .2) } .tile.focal .meter i { background: var(--focal-ink) }
.tile.focal .spark { color: var(--focal-ink); --c: var(--focal-ink) } .tile.focal .spark * { stroke: var(--focal-ink) !important }
button.tile.focal:hover { border-color: transparent; filter: brightness(1.05) }

/* time headers: the year centred on its own row, quarters or months below it, neighbours alternating in tone,
   and a firm line where one year meets the next, carried down through the grid */
.cv .cvh.tier { min-height: 24px; font-size: 11px; font-weight: 600; color: var(--text2); justify-content: center; text-align: center; letter-spacing: .04em; border-right-color: var(--line2) }
.cv .cvh.tier.b1 { background: color-mix(in srgb, var(--text) 5%, var(--surface)) }
.cv .cvh.tier.year { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .08em; border-bottom-color: var(--line2) }
.cv .cvh.tier.year.b0 { background: var(--yr0) } .cv .cvh.tier.year.b1 { background: var(--yr1) }
.cv .cvh.cvl.tier, .cv .cvh.cvt.tier { background: var(--surface) }
.cv .ys { border-left: 2px solid var(--yline) }
.cv .cvh.l2.yearcol:nth-child(odd) { background: var(--yr0) } .cv .cvh.l2.yearcol:nth-child(even) { background: var(--yr1) }
.trow.tier { height: 24px }
.trow.tier > .c { justify-content: center !important; padding-left: 0 !important; font-size: 11px; font-weight: 600; color: var(--text2); letter-spacing: .04em; border-right-color: var(--line2) }
.trow.tier > .c.b1 { background: color-mix(in srgb, var(--text) 5%, var(--surface)) }
.trow.tier.year > .c { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .08em }
.trow.tier.year > .c.b0 { background: var(--yr0) } .trow.tier.year > .c.b1 { background: var(--yr1) }
.trow.tier + .trow.tier { border-top: 1px solid var(--line) }
.trow > .c.ys, .col.ys { border-left: 2px solid var(--yline) }
.plan .ph.tier { justify-content: center; padding-left: 0; font-size: 11px; font-weight: 600; color: var(--text2); letter-spacing: .04em; min-height: 26px }
.plan .ph.tier.b1 { background: color-mix(in srgb, var(--text) 5%, var(--surface)) }
.plan .ph.tier.year { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .08em }
.plan .ph.tier.year.b0 { background: var(--yr0) } .plan .ph.tier.year.b1 { background: var(--yr1) }
.plan .ph.tier.ys { border-left: 2px solid var(--yline) }

/* the Experience panel */
.pop .xph { margin: 0 0 10px; font-size: 13px; font-weight: 600 }
.xpt { display: grid; gap: 8px; min-width: 300px }
.xpc { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); transition: border-color .15s, transform .18s var(--ease-out) }
.xpc:hover { border-color: var(--line2); transform: translateY(-1px) }
.xpc[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }
.xpc .sw { grid-row: span 2; width: 40px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }
.xpc b { font-weight: 600 } .xpc small { color: var(--text3); font-size: 11.5px }
.sw-glass { background: radial-gradient(18px 14px at 20% 20%, #d6a068, transparent), radial-gradient(18px 14px at 90% 90%, #2c7e5e, transparent), #ebe3d5 }
.sw-dusk { background: radial-gradient(18px 14px at 20% 20%, #a3622d, transparent), radial-gradient(18px 14px at 90% 90%, #1d6b51, transparent), #15110d }
.sw-paper { background: linear-gradient(#fbfaf7, #efebe4) }

/* motion: Responsive is the default; Expressive lifts a little more; Still stops it all. The system setting always wins. */
:root[data-motion=expressive] { --spring: cubic-bezier(.3, 1.75, .5, 1) }
:root[data-motion=expressive] .kc:hover, :root[data-motion=expressive] .tk:hover, :root[data-motion=expressive] button.tile:hover { transform: translateY(-4px) }
:root[data-motion=still] *, :root[data-motion=still] *::before, :root[data-motion=still] *::after { animation: none !important; transition: none !important }
.cv .cc.landed, .ch.landed { animation-name: fadein } /* data never bounces */
@keyframes fadein { from { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .main, .side { -webkit-backdrop-filter: none; backdrop-filter: none } }
@media (max-width: 900px) { .app { padding: 6px; gap: 6px } .side { border-radius: 18px } .main { border-radius: 20px } }

/* a group label stays centred while its group is in view and slides along the edge when it is partly scrolled away */
.cv .cvh.tier .tlab, .plan .ph.tier .tlab, .trow.tier > .c .tlab { position: sticky; right: 10px; white-space: nowrap }
.trow.tier > .c .tlab { left: calc(var(--lw) + 10px) }
.trow.tier > .c { overflow: visible }

/* narrower windows: the sidebar becomes a rail of icons, the side panel floats over the grid instead of squeezing it */
@media (max-width: 1180px) {
  .side { width: 64px; padding: 12px 8px; align-items: center }
  .brand { padding: 2px 0 10px } .brand > span:not(.mark), .nav-h, .side-foot { display: none }
  .nav { width: 44px; height: 40px; padding: 0; justify-content: center; font-size: 0; position: relative; margin-top: 4px }
  .nav .count { position: absolute; top: 2px; right: 0; font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px }
  .top .sub { display: none } .search { width: 190px }
  .body { position: relative }
  .drawer.open { position: absolute; right: 0; top: 0; bottom: 0; z-index: 8; box-shadow: var(--shadow); border-radius: var(--r-body) 0 0 var(--r-body) }
}
@media (max-width: 760px) { .search { width: 140px } .lens .lbl { display: none } }
.top .title { flex-shrink: 0 } .search { flex-shrink: 1; min-width: 120px }

/* ---------------------------------------------------------------- modelling tools */
.cvtools { display: inline-flex; gap: 2px; padding: 2px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line) }
.cvtools .btn { height: 26px }
.cv .strip .lbar.cum { background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 3px 3px 1px 1px } .cv .strip .lbar.cum i { display: none }
.cv .strip .tick.dem { border-top: 2px solid var(--warm) }
.cv .lk .sq.cumk { background: color-mix(in srgb, var(--accent) 55%, transparent) } .cv .lk .dash.dem { border-top: 2px solid var(--warm) }
.cv .lab .dlt { color: var(--text2); font-weight: 600 }
.scnote { margin: 6px 0 0; font-size: 12.5px; color: var(--text2); line-height: 1.5; white-space: pre-wrap }
table.kpic { font-size: 12.5px } table.kpic td, table.kpic th { padding: 6px 4px } table.kpic td:first-child { white-space: normal; color: var(--text2) }
.cmenu { display: grid; gap: 2px; min-width: 210px } .cmenu button { text-align: left; padding: 8px 10px; border-radius: 9px; font-size: 13px } .cmenu button:hover, .cmenu button:focus-visible { background: var(--soft) } .cmenu button[aria-pressed=true] { color: var(--accent); font-weight: 600 }
.shbars { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding: 6px 0 2px; min-height: 96px }
.shbars > div { display: grid; justify-items: center; gap: 2px; min-width: 34px; position: relative; grid-template-rows: 56px auto auto }
.shbars .was, .shbars .now { grid-row: 1; align-self: end; width: 20px; border-radius: 3px 3px 1px 1px } .shbars .was { background: var(--line2); width: 26px } .shbars .now { background: var(--accent); width: 14px }
.shbars b { font-size: 12px; font-weight: 600 } .shbars small { font-size: 10.5px; color: var(--text3) }
.solve { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft) } .solve b { font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -.02em } .solve span { color: var(--text2) }