/* Layout only. Every colour, size, radius and type role is a token from tokens.css; components come from bundle.css. */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--primary-background); color: var(--primary-foreground); font: 400 14px/21px var(--font-sans); }
a { color: var(--primary-foreground); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--auxiliary); }
a:hover { text-decoration-color: var(--primary-foreground); }
a.obv-btn, a.obv-icon-btn { text-decoration: none; }
a:focus-visible, button:focus-visible, textarea:focus-visible, details > summary:focus-visible { outline: 2px solid var(--primary-foreground); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; }
.dim { color: var(--secondary-foreground); }
.warn { color: var(--error); }
.empty { color: var(--secondary-foreground); padding: var(--space-2) 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.rail { position: fixed; inset: 0 auto 0 0; width: var(--app-menu-collapsed); background: var(--card); border-right: 1px solid var(--auxiliary); display: flex; flex-direction: column; z-index: 10; overflow: hidden; transition: width 150ms ease; }
.rail.open { width: 304px; box-shadow: var(--elevation-full); }
@media (hover: hover) and (min-width: 768px) { .rail:hover { width: 304px; box-shadow: var(--elevation-full); transition-delay: 450ms; } }
.rail-head { height: var(--primary-header-height); display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-4); border-bottom: 1px solid var(--auxiliary); flex: none; }
.brand { display: flex; align-items: flex-start; height: 28px; flex: none; }
.brand-switch { --switch-width: 52px; --switch-height: 22px; --switch-ring: 3.4px; flex: none; cursor: default; }
.rail.open .brand-switch { --_track: var(--primary-brand); }
.rail.open .brand-switch .obv-switch__knob { left: calc(var(--switch-width) - var(--switch-height)); }
@media (hover: hover) and (min-width: 768px) {
  .rail:hover .brand-switch { --_track: var(--primary-brand); }
  .rail:hover .brand-switch .obv-switch__track, .rail:hover .brand-switch .obv-switch__knob { transition-delay: 450ms; }
  .rail:hover .brand-switch .obv-switch__knob { left: calc(var(--switch-width) - var(--switch-height)); }
}
.logo { display: block; width: 109px; height: 28px; margin-left: 2px; flex: none; background: var(--primary-foreground); -webkit-mask: url(assets/logo.svg) no-repeat left center / contain; mask: url(assets/logo.svg) no-repeat left center / contain; }
.rail-toggle { display: none; }
.rail-foot { margin-top: auto; padding: var(--space-4) 0; border-top: 1px solid var(--auxiliary); display: grid; gap: var(--space-3); }
.rail-tile { min-height: 44px; display: flex; align-items: center; gap: var(--space-4); padding-inline: var(--space-6); white-space: nowrap; background: none; border: 0; color: inherit; font: inherit; text-align: left; width: 100%; }
.rail-tile .nav-icon { background: var(--primary-background); }
.rail-tile-text { display: grid; }
.rail-tile.action { cursor: pointer; }
.rail-tile.action:hover:not(:disabled) .nav-icon { background: var(--primary-brand); color: var(--on-primary-brand); }
.rail-tile.action:disabled { cursor: default; }
.rail-tile--stale .nav-icon { background: var(--orange-mid); color: var(--on-primary-brand); }
.rail-tile.collect.running .obv-msym { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rail-tile.collect.running .obv-msym { animation: none; } }
.nav { list-style: none; padding: var(--space-2) 0; display: grid; gap: var(--space-2); }
.nav-item { height: 44px; display: flex; align-items: center; gap: var(--space-4); padding-inline: var(--space-6); text-decoration: none; white-space: nowrap; }
.nav-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-circular); }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { background: var(--primary-brand); color: var(--on-primary-brand); }
.label { opacity: 0; transition: opacity 100ms linear; }
.rail.open .label { opacity: 1; }
@media (hover: hover) and (min-width: 768px) { .rail:hover .label { opacity: 1; transition-delay: 450ms; } }
@keyframes spin { to { transform: rotate(-360deg); } }
@media (max-width: 767px) {
  .rail-toggle { display: inline-flex; }
  .rail:not(.open) .brand { display: none; }
}

.page { margin-left: var(--app-menu-collapsed); min-height: 100%; }
.page-title { display: flex; align-items: center; gap: var(--space-2); }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.block > .group[data-group^="notes:"] { border-top: 0; padding: 0; }
.page-head { min-height: var(--primary-header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-6); border-bottom: 1px solid var(--auxiliary); background: var(--primary-background); position: sticky; top: 0; z-index: 5; }
#main { max-width: 1200px; padding: var(--space-4) var(--space-6) 48px; display: grid; gap: var(--space-4); }
.present { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-4) 48px; display: grid; gap: var(--space-4); }
.present-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
@media (max-width: 767px) { .page-head { padding-inline: var(--space-4); } #main { padding-inline: var(--space-4); } }

.stale { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); background: var(--card); color: var(--error); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.tile { display: grid; gap: var(--space-1); align-content: start; }
.block { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--auxiliary); }
.standup-window { padding-bottom: var(--space-2); }

.group { border-top: 1px solid var(--auxiliary); padding: var(--space-2) 0; }
.block > .group:first-of-type { border-top: 0; }
.group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; flex-wrap: wrap; }
.group > summary::-webkit-details-marker { display: none; }
.chevron { transition: transform 100ms linear; }
.group[open] > summary .chevron { transform: rotate(180deg); }
.items { list-style: none; padding: 0; display: grid; }
.item { display: flex; gap: var(--space-2) var(--space-3); align-items: center; flex-wrap: wrap; padding: var(--space-2) 0; border-top: 1px solid var(--secondary-background); }
.item:first-child { border-top: 0; }
.item-title { flex: 1 1 240px; min-width: 0; }
.status-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 var(--space-1); }
.aging { color: var(--primary-foreground); }
.late { color: var(--error); }
.health { display: grid; gap: var(--space-2); }

.progress { width: 120px; height: 8px; background: var(--secondary-background); flex: none; }
.progress > span { display: block; height: 100%; background: var(--primary-brand); }
.s-a { background: var(--blue-dark); }
.s-b { background: var(--primary-brand); }
.s-c { background: var(--auxiliary); }
.s-d { background: var(--orange-mid); }
.s-e { background: var(--error); }
.chart { display: grid; gap: var(--space-2); }
.weeks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); height: 160px; padding-top: var(--space-4); }
.wk { display: grid; grid-template-rows: 1fr auto; gap: var(--space-1); justify-items: center; min-width: 0; }
.wk-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; }
.bar { position: relative; width: 40%; max-width: 20px; min-height: 2px; }
.bar-n { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); }
.stack { display: flex; gap: 2px; height: 12px; width: 100%; }
.stack--empty { background: var(--secondary-background); }
.seg { min-width: 2px; }
.stack-row { display: grid; grid-template-columns: 120px 1fr 32px; gap: var(--space-3); align-items: center; }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.legend li { display: flex; align-items: center; gap: var(--space-1); }
.swatch { width: 10px; height: 10px; display: inline-block; }
.timeline { display: grid; gap: var(--space-1); }
.tl-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); align-items: center; }
.tl-track { position: relative; height: 16px; border-bottom: 1px solid var(--auxiliary); }
.tl-dot { position: absolute; top: 4px; width: 8px; height: 8px; border-radius: var(--radius-circular); background: var(--blue-dark); transform: translateX(-50%); }

.table-wrap { overflow-x: auto; }
.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.data th { text-align: left; color: var(--secondary-foreground); }
.data th, .data td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--secondary-background); vertical-align: top; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.obv-card { display: grid; gap: var(--space-2); align-content: start; }
.notes { display: grid; gap: var(--space-3); }
.notes + .notes { padding-top: var(--space-4); }
.md-item { display: grid; gap: var(--space-1); }
.notes > .dim:not(:first-child) { margin-top: var(--space-3); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.split-col { display: grid; gap: var(--space-4); align-content: start; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }
.releases { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.release { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.md-list { padding-left: var(--space-6); display: grid; gap: var(--space-1); }
.notes-text { white-space: pre-wrap; }

.drafts-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--space-4); align-items: start; }
.queue { list-style: none; display: grid; gap: var(--space-2); background: var(--card); padding: var(--space-2); }
.queue-item { height: auto; width: 100%; padding: var(--space-3); display: grid; gap: var(--space-1); justify-items: start; text-align: left; white-space: normal; text-decoration: none; }
.queue-item.current { border-color: var(--primary-brand); }
.queue-item:hover .dim, .queue-item:hover .t-title { color: var(--primary-background); }
.draft textarea { font-family: ui-monospace, Menlo, monospace; }
.actions { padding-top: var(--space-2); }

@media (max-width: 640px) {
  .drafts-layout { grid-template-columns: 1fr; }
  .stack-row, .tl-row { grid-template-columns: 88px 1fr 28px; }
  .tl-row { grid-template-columns: 88px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .chevron, .obv-btn, .rail, .label { transition: none; } }
.weekly-headline { max-width: 72ch; }
.weekly-epic { display: grid; gap: var(--space-1); }
.weekly-epic + .weekly-epic { padding-top: var(--space-3); }
.weekly-clients .data { font-variant-numeric: normal; }

.wf-head { display: grid; gap: var(--space-2); max-width: 72ch; }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.wf-split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.wf-steps { list-style: none; padding: 0; display: grid; }
.wf-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) 208px; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--secondary-background); align-items: start; }
.wf-step:first-child { border-top: 0; padding-top: 0; }
.wf-step-body { display: grid; gap: var(--space-1); }
.step-no { width: 32px; height: 32px; display: grid; place-items: center; border: var(--button-border-width) solid var(--auxiliary); font: 500 14px/21px var(--font-sans); background: var(--primary-background); }
.where { font: 500 14px/21px var(--font-sans); }
.say { display: flex; gap: var(--space-2); align-items: flex-start; }
.say-list { padding-left: var(--space-4); display: grid; gap: 2px; }
.cue-label { font: 700 12px/18px var(--font-sans); color: var(--secondary-foreground); margin-top: 2px; flex: none; }
.gaps { list-style: none; padding: 0; display: grid; }
.gap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--secondary-background); align-items: start; }
.gap:first-child { border-top: 0; }
.gap-text { display: grid; gap: var(--space-1); justify-items: start; }
.gap-keys { display: grid; justify-items: end; }
.gap-key { font: 700 14px/21px var(--font-sans); white-space: nowrap; }
.chip-avoid { background: var(--orange-light); color: var(--on-primary-brand); }
.shot { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; background: var(--card); border: 1px solid var(--auxiliary); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
button.shot { padding: 0; cursor: zoom-in; font: inherit; }
.zoom { padding: 0; border: 1px solid var(--auxiliary); background: var(--card); max-width: 96vw; max-height: 96vh; cursor: zoom-out; }
.zoom::backdrop { background: rgb(0 0 0 / 0.7); }
.zoom img { display: block; max-width: 96vw; max-height: 96vh; object-fit: contain; }
.shot--none { padding: var(--space-2); text-align: center; }
.wl-card .obv-card__header { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
@media (max-width: 899px) { .wf-split { grid-template-columns: 1fr; } .wf-step { grid-template-columns: 32px minmax(0, 1fr); } .wf-step .shot { grid-column: 2; } }

.demo-screen { min-height: 100vh; background: var(--primary-background); }
.demo { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.demo-top { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: 32px; }
.counter { display: flex; align-items: baseline; gap: var(--space-3); }
.demo-segs { display: grid; gap: 3px; }
.demo-seg { height: 4px; background: var(--secondary-background); position: relative; overflow: hidden; }
.demo-seg > i { position: absolute; inset: 0 auto 0 0; background: var(--primary-brand); }
.demo-band { margin: var(--space-3) 32px 0; }
.band { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--orange-light); color: var(--on-primary-brand); }
.band-text { display: grid; gap: 2px; }
.band-title { font: 700 14px/21px var(--font-sans); }
.demo-where { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.demo-where .demo-action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-shotwrap { flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); padding: var(--space-4) 32px; }
.demo-shot { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; border: 1px solid var(--auxiliary); background: var(--card); }
.demo-shot img { width: 100%; height: 100%; object-fit: contain; display: block; min-height: 0; }
.demo-shot--none { aspect-ratio: 16 / 10; height: auto; max-width: 960px; }
.demo-say { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4) 32px; background: var(--primary-foreground); color: var(--primary-background); }
.demo-say-label { font: 700 12px/18px var(--font-sans); opacity: 0.7; margin-top: 6px; }
.demo-say-list { padding-left: var(--space-4); display: grid; gap: var(--space-1); font: 500 20px/30px var(--font-sans); }
.demo-foot { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: 32px; border-top: 1px solid var(--auxiliary); }
.nextline { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.nextline .t-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keys { display: flex; align-items: center; gap: var(--space-2); color: var(--secondary-foreground); font: 400 12px/18px var(--font-sans); white-space: nowrap; }
.keys kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--auxiliary); background: var(--card); color: var(--primary-foreground); font: 500 12px/18px var(--font-sans); }
.gap-sep { width: var(--space-2); }
.stepper { display: flex; gap: var(--space-2); }
.stepper [aria-disabled="true"] { opacity: 0.4; }
@media (max-width: 899px) { .demo-top, .demo-foot, .demo-shotwrap, .demo-say { padding-inline: var(--space-4); } .demo-where .demo-action { display: none; } .demo-say-list { font-size: 16px; line-height: 24px; } .keys { display: none; } .demo-band { margin-inline: var(--space-4); } .demo-foot { flex-wrap: wrap; padding-block: var(--space-2); } }