:root {
  --abyss: #07171c;
  --abyss-2: #0a1d23;
  --kelp: #102b31;
  --kelp-2: #15363b;
  --surface: #10252b;
  --surface-2: #162e34;
  --surface-3: #1a343a;
  --line: rgba(205, 224, 223, .14);
  --line-strong: rgba(205, 224, 223, .23);
  --foam: #edf2f0;
  --mist: #a6b3b4;
  --quiet: #718187;
  --orange: #e85f1f;
  --orange-soft: rgba(232, 95, 31, .16);
  --gold: #d5aa55;
  --gold-soft: rgba(213, 170, 85, .14);
  --teal: #47b9b7;
  --teal-soft: rgba(71, 185, 183, .14);
  --plum: #a86ec4;
  --plum-soft: rgba(168, 110, 196, .14);
  --rose: #d05f87;
  --rose-soft: rgba(208, 95, 135, .14);
  --red: #df6b68;
  --red-soft: rgba(223, 107, 104, .14);
  --stage-frame: #47b9b7;
  --stage-shape: #a86ec4;
  --stage-make: #e85f1f;
  --stage-use: #d5aa55;
  --stage-learn: #d05f87;
  --radius: 12px;
  --shadow: 0 18px 55px rgba(0, 0, 0, .22);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--abyss); }
body { margin: 0; min-height: 100vh; color: var(--foam); background: radial-gradient(circle at 18% -20%, rgba(33, 91, 95, .22), transparent 34rem), linear-gradient(150deg, var(--abyss-2), var(--abyss) 70%); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(71, 185, 183, .16); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--gold); color: #1a1408; border-radius: 6px; }
.skip-link:focus { left: 8px; }
.app { min-height: 100vh; }

.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 84px; padding: 14px clamp(18px, 4vw, 72px); background: rgba(7, 19, 24, .97); border-bottom: 1px solid rgba(232, 95, 31, .32); }
.brand { display: flex; align-items: center; gap: 13px; min-width: 150px; padding: 0; color: inherit; text-decoration: none; text-align: left; }
.brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 169, 116, .7); border-radius: 10px; background: linear-gradient(145deg, #cc4e17, #8f2e0f); box-shadow: inset 0 1px rgba(255, 255, 255, .14); font-size: 20px; font-weight: 700; }
.brand-copy small { display: block; color: var(--quiet); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.brand-copy strong { display: block; margin-top: 2px; font-size: 18px; }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.nav-button, .lens-button, .ghost-button, .primary-button, .icon-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.nav-button, .lens-button, .ghost-button, .primary-button { padding: 9px 14px; }
.nav-button { flex: 0 0 auto; color: var(--quiet); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nav-button:hover, .nav-button[aria-current="page"] { color: var(--foam); background: rgba(255, 255, 255, .055); border-color: var(--line); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.workspace-chip { gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.workspace-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.workspace-chip.is-demo .workspace-dot { background: var(--gold); }
.workspace-chip.is-test .workspace-dot { background: var(--plum); }
#workspaceShort { display: none; }

.space-nav { display: flex; align-items: center; gap: 4px; min-height: 51px; padding: 7px clamp(18px, 4vw, 72px); overflow-x: auto; scrollbar-width: none; background: rgba(8, 24, 29, .97); border-bottom: 1px solid var(--line); }
.space-nav::-webkit-scrollbar { display: none; }
.space-button { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 35px; padding: 7px 12px; color: var(--quiet); border: 1px solid transparent; border-radius: 7px; background: transparent; font-family: var(--mono); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
.space-button:hover, .space-button[aria-current="page"] { color: var(--foam); border-color: var(--line); background: rgba(255,255,255,.045); }
.space-button[aria-current="page"] { box-shadow: inset 0 -2px var(--orange); }

.ghost-button { color: var(--mist); border-color: var(--line); background: rgba(255, 255, 255, .025); }
.ghost-button:hover { color: var(--foam); border-color: var(--line-strong); background: rgba(255, 255, 255, .055); }
.ghost-button.small, .primary-button.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.primary-button { color: #fff9f5; border-color: rgba(255, 154, 95, .42); background: #b83d12; font-weight: 700; }
.primary-button:hover { background: #cf4d18; transform: translateY(-1px); }
.icon-button { width: 40px; padding: 0; color: var(--mist); border-color: var(--line); background: rgba(255, 255, 255, .025); }
.danger-button { color: #f29a97; border-color: rgba(223, 107, 104, .34); background: var(--red-soft); }
.link-button { display: inline; padding: 1px 4px; margin: -1px -4px; color: #7fd4d2; border: 0; border-radius: 5px; background: none; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .14s ease, color .14s ease; }
.link-button:hover { color: #fff; background: rgba(71, 185, 183, .16); }

main { width: min(1760px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 64px; outline: none; }
[hidden] { display: none !important; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 8px 2px 22px; }
.page-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; letter-spacing: -.045em; }
h2 { margin-bottom: 8px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -.035em; }
h3 { margin-bottom: 6px; font-size: 17px; line-height: 1.22; }
p { color: var(--mist); line-height: 1.55; }
.muted { color: var(--quiet); }

.task-card { --stage: var(--stage-frame); position: relative; display: grid; gap: 9px; width: 100%; padding: 14px 14px 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(29, 54, 61, .96), rgba(13, 31, 37, .97)); box-shadow: inset 0 1px rgba(255, 255, 255, .035); }
button.task-card:hover { border-color: color-mix(in srgb, var(--stage) 58%, var(--line)); transform: translateY(-1px); }
.task-card.is-done { opacity: .57; }
.task-card.is-done strong { text-decoration: line-through; }
.card-kicker { color: var(--stage); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.task-card strong { display: block; font-size: 15px; line-height: 1.3; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.card-meta .due-soon { color: #ef9a7a; }
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; }
.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.attention-clear { color: var(--quiet); background: rgba(113, 129, 135, .08); }
.attention-none { color: var(--quiet); border-style: dashed; }
.attention-needs-me { color: #73d1cf; border-color: rgba(71, 185, 183, .4); background: var(--teal-soft); }
.attention-replies-owed { color: #e3a3bf; border-color: rgba(208,95,135,.4); background: var(--rose-soft); }
.attention-decision-needed { color: #d69bea; border-color: rgba(168, 110, 196, .42); background: var(--plum-soft); }
.attention-ready-for-review { color: #e4c272; border-color: rgba(213, 170, 85, .42); background: var(--gold-soft); }
.attention-waiting { color: #f3a67b; border-color: rgba(232, 95, 31, .4); background: var(--orange-soft); }
.attention-blocked { color: #ef8a87; border-color: rgba(223, 107, 104, .42); background: var(--red-soft); }
.attention-due-soon { color: #ed91ad; border-color: rgba(208,95,135,.42); background: var(--rose-soft); }
.attention-recently-moved { color: #a7c8e8; border-color: rgba(117,168,216,.4); background: rgba(117,168,216,.12); }
.attention-done { color: #9fd3c7; border-color: rgba(71,185,183,.3); }

.empty-state { display: grid; min-height: 128px; place-items: center; padding: 20px; color: var(--quiet); text-align: center; border: 1px dashed var(--line); border-radius: 9px; }
.empty-route { display: grid; gap: 10px; justify-items: center; min-height: 230px; padding: 28px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 12px; background: rgba(8,25,30,.6); }
.empty-route h3 { margin: 0; }
.empty-route p { max-width: 560px; margin: 0; }
.empty-route .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

.boundary-note { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid rgba(71, 185, 183, .24); border-radius: 9px; background: rgba(71, 185, 183, .065); }
.boundary-note strong { font-size: 13px; }
.boundary-note span { color: var(--mist); font-size: 12px; line-height: 1.45; }
.source-row { display: flex; flex-wrap: wrap; gap: 6px; }
.source-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 7px; color: var(--mist); border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); font-family: var(--mono); font-size: 9px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.source-work { color: #78ced0; border-color: rgba(71,185,183,.34); background: var(--teal-soft); }
.source-finance { color: #e4c272; border-color: rgba(213,170,85,.35); background: var(--gold-soft); }
.source-atlas { color: #d99bea; border-color: rgba(168,110,196,.35); background: var(--plum-soft); }
.source-demo, .demo-label { color: #e4c272; border-color: rgba(213, 170, 85, .35); background: var(--gold-soft); }
.source-off { color: var(--quiet); border-style: dashed; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.dashboard-tile { --tile: var(--teal); display: grid; min-height: 166px; align-content: space-between; gap: 22px; padding: 17px; color: var(--foam); text-align: left; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(27,51,58,.96), rgba(10,27,33,.98)); box-shadow: none; text-decoration: none; }
.dashboard-tile:hover { border-color: color-mix(in srgb, var(--tile) 55%, var(--line)); transform: translateY(-1px); }
.dashboard-tile small { color: var(--tile); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-tile strong { display: block; margin-top: 8px; font-size: 22px; line-height: 1.15; }
.dashboard-tile-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.dashboard-tile-footer b { color: var(--foam); font-size: 26px; }
.dashboard-tile-footer span { color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; text-align: right; }
.dashboard-lower { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); gap: 12px; margin-top: 12px; }
.surface-panel { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8,25,30,.78); }
.surface-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.surface-heading h2, .surface-heading h3 { margin: 0; }
.surface-heading p { margin: 0; color: var(--quiet); font-size: 12px; }
.mini-list { display: grid; gap: 8px; }
.mini-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); text-decoration: none; }
button.mini-row, a.mini-row { width: 100%; color: inherit; text-align: left; }
button.mini-row:hover, a.mini-row:hover { border-color: var(--line-strong); }
.mini-row strong { display: block; font-size: 13px; }
.mini-row small { color: var(--quiet); font-family: var(--mono); font-size: 9px; }

.workflow-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(8,25,30,.84); }
.workflow-card + .workflow-card { margin-top: 13px; }
.workflow-copy { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 20px 20px 12px; }
.workflow-copy h2, .workflow-copy h3 { margin: 4px 0 5px; }
.workflow-copy p { max-width: 780px; margin: 0; font-size: 13px; }
.workflow-ribbon { display: grid; grid-template-columns: repeat(7,minmax(150px,1fr)); gap: 8px; overflow-x: auto; padding: 14px 20px 20px; }
.workflow-step { --stage: var(--teal); min-height: 116px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(29,52,60,.88), rgba(10,26,32,.96)); }
.workflow-step span { display: grid; width: 24px; height: 24px; place-items: center; margin-bottom: 10px; color: var(--stage); border: 1px solid var(--stage); border-radius: 50%; font-family: var(--mono); font-size: 10px; }
.workflow-step strong { display: block; font-size: 12px; line-height: 1.25; }
.workflow-step small { display: block; margin-top: 6px; color: var(--quiet); font-size: 10px; line-height: 1.4; }
.workflow-authorities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); background: var(--well-bg); box-shadow: var(--well); }
.workflow-authorities div { padding: 12px 14px; border-right: 1px solid var(--line); }
.workflow-authorities div:last-child { border-right: 0; }
.workflow-authorities small { display: block; margin-bottom: 4px; color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.workflow-authorities strong { font-size: 12px; }
.workflow-action { display: grid; gap: 10px; padding: 13px 20px 20px; }

.inbox-list { display: grid; gap: 9px; }
.inbox-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: rgba(11,31,37,.76); }
.inbox-item h3 { margin: 4px 0 5px; }
.inbox-item p { margin: 0; font-size: 12px; white-space: pre-wrap; }
.inbox-item-meta { color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.inbox-actions { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 7px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.attention-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.attention-column { min-height: 200px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8,25,30,.78); }
.attention-column header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 11px; border-bottom: 1px solid var(--line); }
.attention-column h3 { margin: 0; }
.attention-column header span { color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.lane-stack { display: grid; gap: 9px; }

.client-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.client-card { min-height: 110px; padding: 14px; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 9px; background: rgba(12,31,37,.82); }
.client-card:hover, .client-card[aria-pressed="true"] { border-color: rgba(232,95,31,.48); background: linear-gradient(145deg, rgba(55,38,31,.5), rgba(12,31,37,.9)); }
.client-card small { color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.client-card strong { display: block; margin: 7px 0; }
.client-detail { margin-top: 12px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(8,25,30,.84); }
.client-detail-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px; padding: 22px; border-bottom: 1px solid var(--line); }
.client-detail-head h2 { margin: 4px 0 8px; }
.client-contact { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--mist); font-size: 12px; }
.client-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.client-detail-section { padding: 18px 20px 21px; border-right: 1px solid var(--line); }
.client-detail-section:last-child { border-right: 0; }
.finance-pair { display: grid; grid-template-columns: repeat(2,minmax(145px,1fr)); gap: 8px; align-content: start; }
.finance-metric { min-width: 145px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.finance-metric small { display: block; margin-bottom: 6px; color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.finance-metric strong { color: var(--gold); font-size: 22px; }

.summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.summary-card { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: rgba(10,29,35,.82); }
.summary-card small { color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.summary-card strong { display: block; margin-top: 8px; color: var(--gold); font-size: 27px; }
.summary-card p { margin: 5px 0 0; font-size: 12px; }

.library-controls { display: grid; grid-template-columns: minmax(240px,1.4fr) repeat(3,minmax(150px,.5fr)); gap: 8px; margin-bottom: 12px; }
.search-input, .filter-select { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 8px; background: #07191f; }
.document-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.document-card { display: grid; align-content: space-between; min-height: 178px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(26,49,56,.94), rgba(10,28,34,.98)); }
.document-card h3 { margin: 10px 0 6px; }
.document-card p { margin: 0; font-size: 12px; }
.document-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 16px; }
.document-footer small { color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.document-card .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.document-actions { display: grid; gap: 8px; margin-top: 12px; }

.world-overview { display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,.45fr); gap: 12px; }
.world-identity { padding: 24px; border: 1px solid var(--line-strong); border-radius: 12px; background: linear-gradient(145deg, rgba(24,51,58,.9), rgba(8,24,30,.96)); }
.world-boundary-list { display: grid; gap: 8px; }
.world-boundary-list div { padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.world-boundary-list small { display: block; margin-bottom: 4px; color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }

.project-shell { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.project-header { padding: 28px 28px 0; }
.project-return { display: inline-block; margin: 0 0 18px; padding: 0; color: var(--quiet); border: 0; background: none; text-decoration: none; }
.project-return:hover { color: var(--foam); }
.project-title-row { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.project-title-row h1 { margin-bottom: 9px; }
.project-title-row p { margin-bottom: 0; }
.project-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.project-fact { min-height: 76px; padding: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-fact small { display: block; margin-bottom: 6px; color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.project-fact strong { font-size: 14px; }
.project-progress { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0 15px; }
.project-progress strong { font-size: 13px; }
.progress-track { height: 3px; background: rgba(255, 255, 255, .08); }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--plum), var(--orange), var(--gold), var(--rose)); transition: width .25s ease; }
.project-progress span { color: var(--mist); font-size: 13px; }
.lens-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lens-button { min-height: 56px; border-radius: 0; color: var(--quiet); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-right-color: var(--line); }
.lens-button:last-child { border-right-color: transparent; }
.lens-button:hover { color: var(--foam); background: rgba(255, 255, 255, .035); }
.lens-button[aria-selected="true"] { color: var(--foam); background: linear-gradient(180deg, rgba(232, 95, 31, .12), rgba(232, 95, 31, .035)); box-shadow: inset 0 -3px var(--orange); }
.lens-panel { padding: 24px 22px 28px; }
.lens-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.lens-heading h2 { margin: 0; }
.lens-heading p { max-width: 520px; margin: 0; text-align: right; font-size: 13px; }
.path-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 5px; }
.stage-column { min-width: 0; min-height: 330px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 27, 33, .82); }
.stage-column.is-unassigned { border-style: dashed; }
.stage-heading { min-height: 86px; padding: 15px; border-bottom: 1px solid var(--line); }
.stage-heading-marker { width: 9px; height: 9px; margin-bottom: 10px; border-radius: 50%; background: var(--stage); } /* a dot, never a bar (owner, 10 Nov) */
.stage-heading h3 { margin: 0; }
.stage-heading p { margin: 3px 0 0; color: var(--quiet); font-size: 12px; }
.stage-count { color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.stage-stack { display: grid; gap: 9px; padding: 11px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; min-width: 900px; border-collapse: collapse; background: rgba(8, 27, 33, .72); }
th, td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
td { font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .025); }
.table-title-button { padding: 2px 6px; margin: -2px -6px; color: var(--foam); text-align: left; border: 0; border-radius: 6px; background: transparent; font-weight: 700; cursor: pointer; transition: background .14s ease, color .14s ease; }
.table-title-button:hover { color: #fff; background: rgba(71, 185, 183, .14); }
.inline-select { min-height: 36px; max-width: 190px; padding: 6px 28px 6px 9px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 7px; background: #091a20; }

.map-surface { position: relative; min-height: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background-color: rgba(7, 25, 31, .86); background-image: radial-gradient(circle, rgba(127, 163, 165, .14) 1px, transparent 1px); background-size: 20px 20px; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-lines line { stroke: rgba(90, 156, 158, .36); stroke-width: 1.2; transition: opacity .2s ease, stroke .2s ease; }
.map-lines line.is-active { stroke: var(--orange); stroke-width: 2; }
.map-lines line.is-muted { opacity: .12; }
.map-node { --stage: var(--stage-frame); position: absolute; width: clamp(150px, 16vw, 220px); min-height: 70px; padding: 11px 12px 11px 15px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(30, 55, 62, .98), rgba(12, 29, 35, .98)); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); transform: translate(-50%, -50%); transition: opacity .18s ease, border-color .18s ease, transform .18s ease; }
.map-node:hover, .map-node.is-selected { border-color: var(--stage); transform: translate(-50%, -50%) scale(1.02); }
.map-node.is-selected { outline: 2px solid var(--teal); outline-offset: 2px; }
.map-node.is-muted { opacity: .24; }
.map-node strong { display: block; margin-bottom: 4px; font-size: 13px; }
.map-node small { color: var(--quiet); font-size: 10px; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.calendar-day { min-height: 300px; border-right: 1px solid var(--line); background: rgba(8, 27, 33, .72); }
.calendar-day:last-child { border-right: 0; }
.calendar-day.is-today { background: linear-gradient(180deg, rgba(213, 170, 85, .08), rgba(8, 27, 33, .74)); }
.calendar-day header { display: flex; justify-content: space-between; gap: 8px; padding: 13px; border-bottom: 1px solid var(--line); }
.calendar-day header span { color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.calendar-day header strong { font-size: 18px; }
.calendar-day.is-today header strong { color: var(--gold); }
.calendar-stack { display: grid; gap: 8px; padding: 9px; }
.calendar-stack .task-card { padding: 11px 10px 11px 13px; }
.calendar-stack .task-card strong { font-size: 12px; }

.canvas-surface { position: relative; min-height: 620px; height: auto; overflow: hidden; touch-action: none; border: 1px solid var(--line); border-radius: 10px; background-color: rgba(7, 25, 31, .86); background-image: linear-gradient(rgba(118, 150, 152, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 150, 152, .08) 1px, transparent 1px); background-size: 22px 22px; }
.canvas-item { --stage: var(--stage-frame); position: absolute; width: clamp(190px, 22vw, 300px); min-height: 112px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(31, 57, 64, .98), rgba(13, 31, 37, .98)); box-shadow: 0 12px 28px rgba(0, 0, 0, .25); user-select: none; }
.canvas-item { cursor: grab; touch-action: none; }
.canvas-item.is-dragging { z-index: 8; border-color: var(--stage); cursor: grabbing; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.canvas-item .actions button { cursor: pointer; }
.canvas-handle { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: var(--stage); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; touch-action: none; cursor: grab; }
.canvas-item strong { display: block; line-height: 1.35; }
.canvas-item p { margin: 8px 0 0; font-size: 12px; }
.canvas-item .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.canvas-decision { --stage: var(--rose); background: linear-gradient(145deg, rgba(67, 31, 48, .98), rgba(30, 22, 30, .98)); }
.canvas-outcome { --stage: var(--teal); background: linear-gradient(145deg, rgba(24, 62, 64, .98), rgba(13, 31, 37, .98)); }
.canvas-note { --stage: var(--gold); }
.canvas-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

.home-working-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.home-working-head h1 { margin-bottom: 5px; }
.home-working-head p { max-width: 760px; margin-bottom: 0; }
.working-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.working-card { --stage: var(--teal); display: grid; min-height: 285px; align-content: space-between; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(150deg, rgba(28, 53, 60, .96), rgba(9, 27, 33, .98)); box-shadow: none; }
.working-card:hover { border-color: color-mix(in srgb, var(--stage) 48%, var(--line)); }
.working-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.working-card h3 { margin: 9px 0 6px; font-size: 18px; }
.working-card p { margin-bottom: 0; font-size: 12px; }
.working-meta { display: flex; flex-wrap: wrap; gap: 6px 11px; color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.working-material { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(4, 18, 23, .5); }
.working-material.no-thumb { grid-template-columns: 1fr; }
.working-material small { display: block; margin-bottom: 5px; color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.working-material strong { font-size: 12px; }
.working-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #061217; }
.working-return { padding-left: 11px; border-left: 2px solid var(--line-strong); }
.working-return small { display: block; margin-bottom: 4px; color: var(--gold); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.working-return p { color: var(--foam); white-space: pre-wrap; }
.working-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.working-actions.wrap { flex-wrap: wrap; justify-content: flex-start; }
.pin-button { min-width: 42px; padding-inline: 10px; }
.pin-button[aria-pressed="true"] { color: #7fd4d2; border-color: rgba(71, 185, 183, .5); background: var(--teal-soft); }
.home-secondary { margin-top: 24px; }
.compact-info { margin: 12px 0 16px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .018); }
.compact-info summary { padding: 11px 13px; color: var(--mist); font-size: 12px; font-weight: 700; cursor: pointer; }
.compact-info-body { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; padding: 0 13px 13px; color: var(--quiet); font-size: 12px; line-height: 1.5; }
.world-strip { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.world-pill { --world: var(--teal); display: block; min-height: 76px; padding: 11px; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: rgba(10, 28, 34, .72); box-shadow: none; text-decoration: none; }
.world-pill:hover { border-color: color-mix(in srgb, var(--world) 50%, var(--line)); }
.world-pill small { display: block; color: var(--world); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.world-pill strong { display: block; margin-top: 6px; font-size: 12px; }

.map-selection-bar, .calendar-unplaced { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(10, 29, 35, .82); }
.map-selection-bar strong, .calendar-unplaced strong { font-size: 13px; }
.map-selection-bar span, .calendar-unplaced span { color: var(--quiet); font-size: 12px; }
.calendar-unplaced-list { display: flex; flex-wrap: wrap; gap: 7px; }

.work-context-dialog { width: min(1120px, calc(100% - 28px)); }
.work-context-dialog[open] { animation: context-in .16s ease-out; }
@keyframes context-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.context-nav { display: flex; align-items: center; gap: 7px; }
.work-context-dialog .dialog-header { gap: 10px; }
.context-close { flex: 0 0 auto; }
.context-title-wrap { min-width: 0; }
.context-title-wrap h2 { margin: 5px 0 7px; font-size: clamp(24px, 3vw, 36px); }
.context-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.work-context-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 1px; background: var(--line); }
.work-context-main, .work-context-side { display: grid; align-content: start; gap: 12px; padding: 18px; background: #0d2228; }
.context-section { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 19, 24, .5); }
.context-section > p:last-child { margin-bottom: 0; white-space: pre-wrap; }
.context-section-label { display: block; margin-bottom: 8px; color: var(--gold); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.context-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.material-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.material-add-form { display: grid; gap: 9px; margin: 8px 0 12px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.material-add-form .row { display: flex; flex-wrap: wrap; gap: 8px; }
.request-card { display: grid; gap: 7px; }
.request-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.request-item + .request-item { margin-top: 8px; }
.request-item blockquote { margin: 0; color: var(--foam); line-height: 1.55; white-space: pre-wrap; }
.request-item footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--quiet); font-size: 11px; }
.capture-quote { margin: 0; padding: 10px 12px; color: var(--foam); border-left: 2px solid var(--line-strong); background: rgba(255,255,255,.02); white-space: pre-wrap; }
.material-list { display: grid; gap: 8px; }
.material-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; width: 100%; padding: 8px 8px 8px 0; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .024); }
.material-tile:has(.tile-main:hover), .material-tile.is-selected { border-color: rgba(71, 185, 183, .45); background: var(--teal-soft); }
.tile-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 3px 4px 3px 12px; color: inherit; text-align: left; border: 0; border-radius: 6px; background: transparent; }
.tile-remove { justify-self: end; }
.material-tile strong { display: block; font-size: 12px; }
.material-tile small { display: block; margin-top: 4px; color: var(--quiet); font-size: 10px; }
.material-tile .tile-side { display: grid; gap: 4px; justify-items: end; color: var(--quiet); font-size: 11px; }
.material-preview { min-height: 150px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #07191f; }
.material-preview-copy { padding: 15px; color: var(--mist); line-height: 1.58; white-space: pre-wrap; }
.material-preview img { display: block; width: 100%; max-height: 440px; object-fit: contain; background: #061217; }
.material-preview iframe { display: block; width: 100%; height: 440px; border: 0; background: #fff; }
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--quiet); font-size: 11px; }
.missing-source { display: grid; min-height: 150px; place-items: center; padding: 20px; color: var(--quiet); text-align: center; }
.missing-source > div { display: grid; gap: 10px; justify-items: center; }
.return-editor textarea { width: 100%; min-height: 116px; padding: 10px 11px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 8px; background: #07191f; resize: vertical; }
.return-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; margin-top: 9px; }
.return-buttons { display: flex; gap: 6px; }
.save-status { color: var(--quiet); font-size: 11px; }
.save-status.is-error { color: #f29a97; }
.save-status.is-ok { color: #9fd3c7; }
.save-status.is-draft { color: #e4c272; }
.detail-list { display: grid; gap: 8px; margin: 0; }
.detail-list div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; }
.detail-list dt { color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.detail-list dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.context-details summary { color: var(--mist); font-size: 12px; font-weight: 700; cursor: pointer; }
.context-details .detail-list { margin-top: 12px; }
.context-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px; padding: 13px 18px 17px; border-top: 1px solid var(--line); }

.capture-dialog { width: min(760px, calc(100% - 28px)); }
.capture-step { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 19, 24, .48); }
.capture-step h3 { margin-bottom: 5px; }
.capture-step > p { margin-bottom: 13px; font-size: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.choice-card { display: flex; gap: 9px; align-items: start; min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .02); cursor: pointer; }
.choice-card:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .04); }
.choice-card:has(input:checked) { border-color: rgba(71, 185, 183, .55); background: var(--teal-soft); box-shadow: inset 0 0 0 1px rgba(71, 185, 183, .35); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.choice-card input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--teal); }
.choice-card > span { min-width: 0; }
.choice-card strong { display: block; font-size: 12px; }
.choice-card small { display: block; margin-top: 4px; color: var(--quiet); font-size: 10px; line-height: 1.35; }
.capture-suggestion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 9px 11px; border-left: 2px solid var(--line-strong); background: var(--teal-soft); color: var(--mist); font-size: 11px; }
.storage-note { color: var(--quiet); font-size: 11px; line-height: 1.5; }
.file-summary { min-height: 38px; padding: 8px 10px; color: var(--quiet); border: 1px dashed var(--line); border-radius: 7px; font-size: 11px; }
.file-summary.is-ok { color: #9fd3c7; border-color: rgba(71,185,183,.35); }
.file-summary.is-error { color: #f29a97; border-color: rgba(223,107,104,.4); }
.file-summary.is-busy { color: #e4c272; }

.document-dialog { width: min(860px, calc(100% - 28px)); }
.document-context-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: 12px; }
.data-dialog { width: min(720px, calc(100% - 28px)); }
.data-section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 19, 24, .48); }
.data-section h3 { margin: 0; }
.data-section p { margin: 0; font-size: 12px; }
.data-section .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.workspace-option { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.workspace-option[aria-current="true"] { border-color: rgba(71,185,183,.55); background: var(--teal-soft); }
.workspace-option strong { display: block; font-size: 13px; }
.workspace-option small { color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.restore-summary { display: grid; gap: 4px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 12px; }

dialog { width: min(600px, calc(100% - 28px)); max-height: calc(100vh - 36px); overflow: auto; padding: 0; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 13px; background: #0d2228; box-shadow: 0 30px 90px rgba(0, 0, 0, .58); }
dialog::backdrop { background: rgba(1, 8, 10, .74); }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 20px 20px 15px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 0; font-size: 24px; }
dialog > form { display: block; min-width: 0; }
.dialog-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; min-width: 0; padding: 20px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
.field label { color: var(--mist); font-size: 12px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 42px; padding: 9px 11px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 8px; background: #07191f; }
.field select { padding-right: 28px; text-overflow: ellipsis; }
.field input[type="file"] { padding: 7px 9px; }
.field textarea { min-height: 98px; resize: vertical; }
.field .hint { color: var(--quiet); font-size: 11px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-width: 0; }
.field-row > * { min-width: 0; }
.check-row { display: flex; align-items: center; gap: 9px; min-height: 42px; color: var(--mist); }
.check-row input { width: 18px; height: 18px; accent-color: var(--orange); }
.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px 20px; border-top: 1px solid var(--line); }
.dialog-actions-right { display: flex; gap: 8px; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 40; max-width: min(380px, calc(100% - 44px)); padding: 12px 15px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 9px; background: #163038; box-shadow: var(--shadow); }
.toast.is-error { border-color: rgba(223,107,104,.5); background: #3a1f20; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-error { padding: 24px; border: 1px solid rgba(223,107,104,.4); border-radius: 10px; background: var(--red-soft); }

@media (max-width: 1120px) {
  .topbar { grid-template-columns: auto 1fr; }
  .primary-nav { order: 3; grid-column: 1 / -1; justify-content: flex-start; }
  .top-actions { grid-column: 2; grid-row: 1; }
  .dashboard-grid, .document-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-lower, .world-overview { grid-template-columns: 1fr; }
  .library-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-grid { grid-template-columns: repeat(7, minmax(180px, 1fr)); overflow-x: auto; }
  .working-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-context-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar { grid-template-columns: auto 1fr; gap: 10px; padding: 12px 14px; min-height: 0; }
  .brand { min-width: 0; gap: 9px; }
  .brand-mark { width: 38px; height: 38px; font-size: 16px; }
  .top-actions { gap: 6px; }
  .top-actions .primary-button { padding-inline: 11px; }
  #workspaceLabel { display: none; }
  #workspaceShort { display: inline; }
  .workspace-chip { padding-inline: 10px; }
  .space-nav { padding-inline: 11px; }
  main { width: min(100% - 32px, 1760px); padding-top: 18px; }
  .page-heading { align-items: start; flex-direction: column; }
  .boundary-note, .workflow-copy, .surface-heading { align-items: start; flex-direction: column; }
  .dashboard-grid, .dashboard-lower, .document-grid, .summary-grid, .client-detail-grid, .world-overview, .working-set, .document-context-grid { grid-template-columns: 1fr; }
  .dashboard-tile { min-height: 145px; }
  .library-controls { grid-template-columns: 1fr; }
  .workflow-authorities { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-detail-head { grid-template-columns: 1fr; }
  .client-detail-section { border-right: 0; border-bottom: 1px solid var(--line); }
  .client-detail-section:last-child { border-bottom: 0; }
  .inbox-item { grid-template-columns: 1fr; }
  .inbox-actions { justify-content: flex-start; }
  .project-header { padding: 19px 14px 0; }
  .project-title-row { flex-direction: column; }
  .project-facts { grid-template-columns: 1fr 1fr; }
  .project-progress { grid-template-columns: auto 1fr; }
  .project-progress span { grid-column: 1 / -1; }
  .lens-tabs { grid-template-columns: repeat(5, minmax(60px, 1fr)); }
  .lens-button { padding-inline: 4px; font-size: 9px; letter-spacing: .04em; }
  .lens-panel { padding: 19px 12px 22px; }
  .lens-heading { align-items: start; flex-direction: column; }
  .lens-heading p { text-align: left; }
  .field-row { grid-template-columns: 1fr; }
  .canvas-surface { min-height: 400px; touch-action: pan-y; }
  .canvas-item { position: relative !important; left: auto !important; top: auto !important; width: 100%; margin-bottom: 10px; }
  .canvas-surface.is-stacked { display: grid; gap: 0; padding: 12px; }
  .canvas-handle, .canvas-item { cursor: default; }
  .home-working-head, .map-selection-bar, .calendar-unplaced, .context-footer { align-items: start; flex-direction: column; }
  .world-strip { grid-template-columns: repeat(6, 150px); }
  .choice-grid { grid-template-columns: 1fr; }
  .work-context-main, .work-context-side { padding: 12px; }
  .work-context-dialog .dialog-header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title close" "nav nav"; align-items: start; padding: 14px 14px 12px; background: #0d2228; }
  .context-title-wrap { grid-area: title; width: 100%; }
  .context-title-wrap h2 { font-size: 24px; overflow-wrap: anywhere; }
  .context-close { grid-area: close; }
  .context-nav { grid-area: nav; width: 100%; justify-content: space-between; }
  .context-nav .ghost-button { flex: 1; }
  .material-tile { grid-template-columns: 1fr; padding: 8px; }
  .tile-main { grid-template-columns: 1fr; padding-left: 4px; }
  .tile-remove { justify-self: start; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .dialog-actions-right { width: 100%; }
  .dialog-actions-right > * { flex: 1; }
  .material-tile { grid-template-columns: 1fr; }
  .material-tile .tile-side { justify-items: start; }
  .detail-list div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- TLIS candidate: overview map + client workspace. Scoped selectors only; nothing outside TLIS changes. ---- */
.tlis-overview-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tlis-view-toggle { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.tlis-view-toggle .lens-button { min-height: 38px; padding: 6px 14px; border-radius: 0; border-right: 1px solid var(--line); }
.tlis-view-toggle .lens-button:last-child { border-right: 0; }
.tlis-view-toggle .lens-button[aria-pressed="true"] { color: var(--foam); background: linear-gradient(180deg, rgba(232, 95, 31, .12), rgba(232, 95, 31, .035)); box-shadow: inset 0 -3px var(--orange); }
.tlis-elsewhere { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tlis-map { display: grid; gap: 10px; }
.map-row { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 0 26px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8, 25, 30, .78); }
.map-row.is-loose { border-style: dashed; background: rgba(8, 25, 30, .5); }
.map-client { position: relative; display: grid; align-content: start; gap: 6px; min-height: 108px; padding: 14px 14px 14px 17px; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(29, 54, 61, .96), rgba(13, 31, 37, .97)); box-shadow: inset 0 1px rgba(255, 255, 255, .035); }
a.map-client:hover { border-color: rgba(71, 185, 183, .55); transform: translateY(-1px); }
.map-client small { color: var(--teal); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.map-client strong { font-size: 17px; line-height: 1.2; }
.map-client span { color: var(--quiet); font-family: var(--mono); font-size: 10px; line-height: 1.5; }
.map-client em { margin-top: auto; padding-top: 6px; color: var(--mist); font-size: 11px; font-style: normal; }
.map-client.is-note { box-shadow: none; background: rgba(255, 255, 255, .02); }
.map-client.is-note small { color: var(--quiet); }
.map-branches { position: relative; display: flex; flex-wrap: wrap; align-content: start; gap: 10px; padding-left: 22px; }
.map-branches::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 1px solid rgba(71, 185, 183, .4); }
.map-project { position: relative; display: grid; gap: 5px; flex: 1 1 200px; min-width: 190px; max-width: 280px; padding: 11px 12px; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .025); }
.map-project::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; border-top: 1px solid rgba(71, 185, 183, .4); }
.map-project:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.map-project small { color: var(--gold); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.map-project strong { font-size: 13px; line-height: 1.3; }
.map-project span { color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.map-project.is-direct { border-style: dashed; }
.map-project.is-direct small { color: var(--quiet); }
.map-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.map-dot { --stage: var(--quiet); display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--stage); }
.map-dot.is-done { opacity: .35; }
.map-dots small { color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.map-empty { align-self: center; color: var(--quiet); font-size: 12px; }
.tlis-list table { min-width: 720px; }

.cw-shell { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.cw-head { padding: 24px 24px 0; }
.cw-identity { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.cw-identity h1 { margin-bottom: 8px; font-size: clamp(26px, 3.2vw, 40px); }
.cw-notes { max-width: 720px; margin: 8px 0 0; font-size: 13px; white-space: pre-wrap; }
.cw-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cw-facts .project-fact strong { display: block; font-size: 14px; }
.cw-facts .project-fact .source-row { margin-top: 6px; }
.cw-tabs { display: flex; margin: 0 -24px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cw-tabs::-webkit-scrollbar { display: none; }
.cw-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px; color: var(--quiet); border-right: 1px solid var(--line); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cw-tab:hover { color: var(--foam); background: rgba(255, 255, 255, .035); }
.cw-tab[aria-current="page"] { color: var(--foam); background: linear-gradient(180deg, rgba(232, 95, 31, .12), rgba(232, 95, 31, .035)); box-shadow: inset 0 -3px var(--orange); }
.cw-tab span { padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; }
.cw-panel { padding: 20px 22px 26px; }
.cw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.cw-toolbar .storage-note { flex: 1 1 260px; }
.cw-filter { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); font-size: 12px; font-weight: 700; }
.cw-filter .filter-select { width: auto; min-width: 200px; }
.cw-path .task-card { padding: 12px 12px 12px 14px; }
.cw-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cw-project-card { --stage: var(--teal); display: grid; align-content: start; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.cw-project-card h3 { margin: 0; }
.cw-project-card > p { margin: 0; font-size: 12px; }
.cw-project-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.cw-project-card .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cw-materials .mini-row small { font-family: var(--font); font-size: 11px; }
.context-jump { display: inline-flex; gap: 4px; align-items: center; }
.context-jump .source-tag { cursor: pointer; }
.context-jump .source-tag:hover { color: var(--foam); border-color: var(--line-strong); }

@media (max-width: 760px) {
  .map-row { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .map-branches { padding-left: 16px; }
  .map-branches::before { top: 0; bottom: 0; }
  .map-project { max-width: none; flex-basis: 100%; }
  .map-project::before { left: -16px; width: 16px; }
  .cw-head { padding: 16px 14px 0; }
  .cw-identity { flex-direction: column; }
  .cw-facts { grid-template-columns: 1fr 1fr; }
  .cw-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -14px; padding: 0; overflow: visible; }
  .cw-tab { justify-content: center; gap: 5px; min-height: 46px; padding: 6px 4px; font-size: 9px; letter-spacing: .03em; white-space: normal; text-align: center; }
  .cw-tab:last-child { border-right: 0; }
  .cw-panel { padding: 16px 12px 22px; }
  .cw-toolbar { align-items: start; flex-direction: column; }
  .cw-toolbar .storage-note { flex-basis: auto; }
  .cw-filter { display: grid; width: 100%; }
  .cw-filter .filter-select { width: 100%; min-width: 0; }
}

/* ---- TLIS candidate 02: the opening field, its drawer, the five client views and the in-place project surfaces ---- */
.field-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.focus-group { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 25, 30, .8); }
.focus-button { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 7px; color: var(--mist); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.focus-button:hover { color: var(--foam); background: rgba(255, 255, 255, .05); }
.focus-button[aria-pressed="true"] { color: #06201f; background: var(--teal); }
.focus-caption { color: var(--quiet); font-size: 11px; }
.field-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.field-stage.has-drawer { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.field-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background-color: rgba(7, 25, 31, .86); background-image: radial-gradient(circle, rgba(127, 163, 165, .14) 1px, transparent 1px); background-size: 20px 20px; }
/* The spatial field's own container: never share a class name with form fields (`.field`), which this once did and so forced every dialog 880px wide. */
.tlis-field { position: relative; min-width: 880px; }
.field-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.field-links path { fill: none; stroke: rgba(90, 156, 158, .45); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: opacity .2s ease, stroke .2s ease; }
.field-links path.is-dashed { stroke-dasharray: 5 5; }
.field-links path.is-hot { stroke: var(--orange); stroke-width: 2.2; }
.field-links path.is-dim { opacity: .14; }
.field-links path.is-quiet { opacity: .25; }
.field-node { position: absolute; display: grid; gap: 4px; width: 190px; padding: 11px 12px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(30, 55, 62, .98), rgba(12, 29, 35, .98)); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); transform: translate(-50%, -50%); transition: opacity .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.field-node:hover { border-color: var(--line-strong); transform: translate(-50%, calc(-50% - 2px)); }
.field-node.kind-client { min-height: 104px; border-color: rgba(71, 185, 183, .45); background: linear-gradient(150deg, rgba(31, 74, 78, .98), rgba(12, 36, 41, .98)); box-shadow: 0 14px 32px rgba(0, 0, 0, .34); }
.field-node.kind-project { background: linear-gradient(145deg, rgba(26, 49, 56, .98), rgba(10, 28, 34, .98)); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
.field-node.kind-work { --stage: var(--quiet); padding: 9px 10px 9px 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.field-node.kind-loose { border-style: dashed; background: rgba(8, 25, 30, .9); box-shadow: none; }
.field-node[aria-pressed="true"] { z-index: 3; border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 2px; }
.field-node.is-dim { opacity: .3; }
.field-node.is-quiet { opacity: .45; }
.field-node.is-forward { border-color: rgba(255, 255, 255, .3); box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 14px 32px rgba(0, 0, 0, .34); }
.fn-kind { color: var(--teal); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kind-project .fn-kind { color: var(--gold); }
.kind-work .fn-kind { color: var(--stage); }
.kind-loose .fn-kind { color: var(--quiet); }
.fn-kind em { color: var(--mist); font-style: normal; }
.fn-name { font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.kind-client .fn-name { font-size: 16px; }
.kind-work .fn-name { font-size: 12px; font-weight: 600; }
.fn-detail { color: var(--quiet); font-family: var(--mono); font-size: 9px; line-height: 1.4; }
.fn-att { display: inline-block; justify-self: start; margin-top: 2px; padding: 2px 7px; border: 1px solid rgba(232, 95, 31, .45); border-radius: 999px; color: #f3a67b; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.field-link-label { position: absolute; z-index: 2; padding: 3px 8px; border: 1px solid rgba(232, 95, 31, .45); border-radius: 999px; background: #1b1a17; color: #f3a67b; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; }
.field-lane { position: absolute; top: 0; bottom: 0; border-right: 1px dashed var(--line); }
.field-lane:last-of-type { border-right: 0; }
.field-lane-head { position: absolute; top: 12px; left: 50%; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 0 0 6px 6px; background: rgba(8, 25, 30, .92); transform: translateX(-50%); white-space: nowrap; }
.field-lane-head strong { font-size: 11px; }
.field-lane-head small { color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.field-drawer { position: sticky; top: 96px; display: grid; align-content: start; gap: 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(13, 34, 40, .98); box-shadow: var(--shadow); }
.drawer-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.drawer-top h2 { margin: 4px 0; font-size: 22px; }
.drawer-top .sub { margin: 0; font-size: 12px; }
.drawer-body { display: grid; gap: 12px; }
.drawer-sec { padding-top: 10px; border-top: 1px solid var(--line); }
.drawer-sec > span { display: block; margin-bottom: 6px; color: var(--gold); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer-list { display: grid; gap: 6px; }
.drawer-list button, .drawer-list a { display: grid; gap: 2px; width: 100%; padding: 8px 10px; color: inherit; text-align: left; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .025); }
.drawer-list button:hover, .drawer-list a:hover { border-color: var(--line-strong); }
.drawer-list strong { font-size: 12px; }
.drawer-list small { color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.drawer-foot { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.cw-views .lens-tabs { overflow: hidden; border: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.cw-lens-panel { padding: 18px 14px 22px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--well-bg); box-shadow: var(--well); }
.cw-viewing { display: inline-flex; align-items: center; gap: 6px; }
.stage-select { display: block; color: inherit; text-decoration: none; }
.stage-select { margin: -6px -8px; padding: 6px 8px; border-radius: 7px; transition: background .14s ease; }
.stage-select:hover { background: rgba(71, 185, 183, .1); }
.stage-select:hover h3 { color: #fff; }
.stage-column.is-viewing { border-color: var(--teal); box-shadow: inset 0 0 0 1px rgba(71, 185, 183, .5); }
.stage-add { margin-top: 8px; }
.cw-surface { margin-bottom: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.cw-surface .surface-heading h2 { margin: 4px 0 6px; }
.cw-surface .surface-heading p { max-width: 640px; }
.cw-ribbon { padding: 10px 0 4px; }
.cw-step { color: inherit; text-decoration: none; }
.cw-step:hover { border-color: var(--line-strong); }
.cw-step[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1px rgba(71, 185, 183, .5); }
.cw-facts-row { margin-top: 14px; }
.arrange-menu { position: relative; }
.arrange-menu summary { list-style: none; }
.arrange-menu summary::-webkit-details-marker { display: none; }
.arrange-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; display: grid; gap: 4px; min-width: 160px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0d2228; box-shadow: var(--shadow); }
.arrange-list button { padding: 7px 10px; color: var(--mist); text-align: left; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.arrange-list button:hover { color: var(--foam); background: rgba(255, 255, 255, .05); }
.canvas-handle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 760px) {
  .field-stage.has-drawer { grid-template-columns: 1fr; }
  .field-drawer { position: static; }
  .cw-views .lens-tabs { grid-template-columns: repeat(5, minmax(56px, 1fr)); }
  .cw-surface { padding: 14px 12px; }
}

/* ---- TLIS candidate 03: owner feedback (task detail header, project files + timeline, arrange note) ---- */
.context-belongs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; color: var(--mist); font-size: 12px; }
.context-belongs .context-jump { gap: 6px; }
.context-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.context-actions .ghost-button { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.arrange-list .arrange-note { padding: 4px 10px 6px; color: var(--quiet); font-size: 10px; line-height: 1.4; border-top: 1px solid var(--line); }
.cw-files .mini-row { align-items: start; }
.cw-files .mini-row strong { font-size: 13px; }
.cw-files .mini-row small { display: block; margin-top: 3px; color: var(--quiet); font-size: 11px; line-height: 1.45; }
.file-version { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border: 1px solid rgba(71, 185, 183, .35); border-radius: 999px; color: #7fd4d2; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.timeline { position: relative; margin-top: 6px; padding: 14px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 25, 31, .8); overflow: hidden; }
.timeline-axis { position: relative; height: 34px; margin: 0 10px; border-bottom: 1px solid var(--line-strong); }
.timeline-tick { position: absolute; bottom: -1px; transform: translateX(-50%); color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.timeline-tick::after { content: ""; display: block; width: 1px; height: 6px; margin: 3px auto 0; background: var(--line-strong); }
.timeline-tick.is-today { color: #7fd4d2; }
.timeline-rows { position: relative; margin: 0 10px; min-height: 60px; }
.timeline-row { position: relative; height: 54px; }
.timeline-marker { --stage: var(--stage-frame); position: absolute; top: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; max-width: min(260px, 40%); padding: 6px 10px 6px 8px; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(30, 55, 62, .98), rgba(12, 29, 35, .98)); transform: translateX(-11px); }
.timeline-marker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--stage); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.timeline-marker:hover { border-color: var(--stage); }
.timeline-marker strong { display: block; font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-marker small { display: block; color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.timeline-marker.is-done { opacity: .55; }
.timeline-marker.is-right { transform: translateX(11px); grid-template-columns: minmax(0, 1fr) auto; }
.timeline-marker.is-right::before { order: 2; }
.timeline-marker.is-project { border-style: dashed; }
.timeline-marker.is-project::before { background: var(--gold); }
.timeline-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(71, 185, 183, .55); pointer-events: none; }
.timeline-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.timeline-foot .storage-note { flex: 1 1 240px; }
.timeline-undated-list { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 760px) {
  .timeline-marker { max-width: 60%; }
  .context-actions .ghost-button { flex: 1 1 auto; }
}

/* ---- TLIS closeout (13 Oct 2026): Worlds opening, task Board + List, one task panel, Comms, project path, manual income ---- */
/* clickable names are controls, never underlined text: whole client card, nested small text, Income links, plain links */
.client-card, .client-card *, .plain-link, .income-list a, .income-project a, .table-title-button, .cw-project-card a { text-decoration: none; }
.plain-link { color: inherit; border-radius: 4px; }
.plain-link:hover { color: #fff; background: rgba(71, 185, 183, .14); }
.client-card { display: grid; align-content: start; gap: 6px; min-height: 118px; padding: 15px 16px 15px 18px; color: inherit; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(27, 51, 58, .96), rgba(10, 27, 33, .98)); box-shadow: none; cursor: pointer; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.client-card.is-client { --kind: var(--teal); }
.client-card.is-prospect { --kind: var(--gold); }
.client-card.is-past { --kind: var(--quiet); }
.client-card.is-not-client { --kind: var(--rose); }
.client-card:hover { border-color: rgba(71, 185, 183, .5); background: linear-gradient(145deg, rgba(31, 62, 68, .98), rgba(12, 31, 37, .98)); transform: translateY(-1px); }
.client-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.client-card small { color: var(--kind, var(--teal)); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.client-card strong { display: block; margin: 2px 0; font-size: 16px; line-height: 1.25; }
.client-card span { color: var(--quiet); font-size: 12px; }
.client-card-contact { color: var(--mist) !important; }

/* Worlds */
.world-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.world-card { --world: var(--teal); display: grid; align-content: start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(150deg, rgba(27, 51, 58, .96), rgba(9, 27, 33, .98)); box-shadow: none; }
.world-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.world-card-head h2 { margin: 2px 0 0; font-size: 22px; }
.world-card-head h2 a { color: inherit; text-decoration: none; border-radius: 4px; }
.world-card-head h2 a:hover { color: #fff; }
.world-purpose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.world-purpose input { min-width: 0; min-height: 36px; padding: 7px 10px; color: var(--foam); border: 1px solid var(--line); border-radius: 7px; background: rgba(7, 25, 31, .8); font-size: 13px; }
.world-purpose input:focus { border-color: rgba(71, 185, 183, .55); }
.world-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.world-counts div { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .025); }
.world-counts dt { color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.world-counts dd { margin: 5px 0 0; font-size: 20px; font-weight: 700; }
.world-counts dd small { color: var(--quiet); font-size: 11px; font-weight: 500; }
.world-money { display: grid; gap: 6px; padding: 10px 11px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.world-money > small { color: var(--gold); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.world-money-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.world-money-row > span { padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--mist); font-family: var(--mono); font-size: 9px; }
.world-money-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.world-money-row dt { color: var(--quiet); font-size: 10px; }
.world-money-row dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; }

/* Board + List */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.board-column { --stage: var(--teal); min-width: 0; min-height: 320px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 27, 33, .82); transition: background .15s ease, border-color .15s ease; }
.board-column.is-none { border-style: dashed; border-top-style: solid; }
.board-column.is-over { background: rgba(71, 185, 183, .1); border-color: rgba(71, 185, 183, .5); }
.board-column header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 13px 10px; border-bottom: 1px solid var(--line); }
.board-column header h3 { margin: 0; font-size: 14px; }
.board-column header span { color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.board-column > .storage-note { padding: 8px 13px 0; }
.board-stack { display: grid; gap: 8px; padding: 10px; }
.board-card { --stage: var(--stage-frame); position: relative; display: grid; gap: 6px; padding: 11px 12px 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(29, 54, 61, .96), rgba(13, 31, 37, .97)); box-shadow: none; cursor: grab; touch-action: none; user-select: none; }
.board-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.board-card.is-lifted { opacity: .35; }
.board-card.is-done { opacity: .6; }
.board-card.is-done strong { text-decoration: line-through; }
.board-card strong { font-size: 13px; line-height: 1.3; }
.board-card small { color: var(--quiet); font-size: 11px; }
.board-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.board-card-actions .inline-select { max-width: 150px; }
.board-ghost { position: fixed; z-index: 60; pointer-events: none; opacity: .92; transform: rotate(-1.5deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.inline-select.small { min-height: 30px; padding: 3px 24px 3px 8px; font-size: 11px; }
.task-list tr.is-done td { opacity: .6; }
.headings-form { min-width: 260px; }
.headings-form .field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 6px; }
.headings-form .field span { color: var(--quiet); font-size: 11px; }
.headings-form .field input { min-height: 32px; padding: 5px 8px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 6px; background: #07191f; font-size: 12px; }
.headings-form .row { padding: 6px; }
.step-board .board-column { min-height: 240px; }

/* One task panel */
.task-panel { width: min(960px, calc(100% - 28px)); }
.tp-header { align-items: start; }
.tp-title-wrap { flex: 1 1 auto; min-width: 0; }
.tp-title { width: 100%; min-width: 0; margin-top: 4px; padding: 8px 10px; color: var(--foam); border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.tp-title:hover { border-color: var(--line); }
.tp-title:focus { border-color: rgba(71, 185, 183, .55); background: rgba(7, 25, 31, .6); outline: none; box-shadow: 0 0 0 4px rgba(71, 185, 183, .14); }
.tp-title::placeholder { color: var(--quiet); font-weight: 500; }
.tp-body { gap: 14px; }
.tp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.tp-grid .field label { font-size: 11px; }
.tp-grid .field input, .tp-grid .field select { min-height: 38px; padding: 7px 10px; font-size: 13px; }
.tp-section { padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 19, 24, .5); }
.tp-files { display: grid; gap: 6px; }
.tp-none { margin: 2px 0; }
.tp-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px 7px 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .024); }
.tp-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: #061217; }
.tp-file-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--mist); font-size: 16px; }
.tp-file-body { min-width: 0; }
.tp-file-body strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-file-body small { display: block; margin-top: 2px; color: var(--quiet); font-size: 10px; }
.tp-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tp-preview { margin-top: 10px; min-height: 0; }
.tp-preview img { max-height: 360px; }
.tp-preview iframe { height: 360px; }
.tp-message-list { display: grid; gap: 8px; }
.tp-message { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.tp-message strong { display: block; font-size: 12px; }
.tp-message small { display: block; margin-top: 2px; color: var(--quiet); font-size: 10px; }
.tp-message p { margin: 6px 0 0; font-size: 12px; white-space: pre-wrap; }
.tp-earlier { margin: 0; padding: 10px 12px; color: var(--foam); border-left: 2px solid var(--line-strong); background: rgba(255, 255, 255, .02); font: inherit; font-size: 12px; white-space: pre-wrap; }
.dialog-actions-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dialog-actions-left .storage-note { font-size: 10px; }

/* Project path editor */
.path-steps { display: grid; gap: 8px; }
.path-step { --stage: var(--teal); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .024); }
.path-step-index { display: grid; width: 24px; height: 24px; place-items: center; color: var(--stage); border: 1px solid var(--stage); border-radius: 50%; font-family: var(--mono); font-size: 10px; }
.path-step-name { min-width: 0; min-height: 34px; padding: 5px 9px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 6px; background: #07191f; font-size: 13px; font-weight: 600; }
.path-colours { display: flex; gap: 4px; }
.path-colour { width: 18px; height: 18px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--c); cursor: pointer; }
.path-colour.is-current { border-color: #fff; }
.path-step-actions { display: flex; gap: 4px; }
.path-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 12px; }
.path-add .field span { color: var(--mist); font-size: 12px; font-weight: 700; }
.path-add input { min-height: 40px; padding: 8px 10px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 8px; background: #07191f; }

/* Project files form */
.project-file-form { display: grid; gap: 9px; margin: 8px 0 12px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.project-file-form .row { display: flex; flex-wrap: wrap; gap: 8px; }
.project-file .tp-thumb { width: 36px; height: 36px; }

/* Income */
.income-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-card.is-quiet strong { color: var(--mist); font-size: 20px; }
.income-list { display: grid; gap: 12px; }
.income-project { padding: 16px 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8, 25, 30, .78); }
.income-project-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; margin-bottom: 10px; }
.income-project-head h3 { margin: 2px 0 4px; }
.income-figures { display: flex; flex-wrap: wrap; gap: 14px; }
.income-figures span { display: grid; gap: 2px; }
.income-figures small { color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.income-figures b { font-size: 15px; }
.income-figures .is-owed b { color: #f3a67b; }
.income-invoice { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.income-invoice + .income-invoice { margin-top: 8px; }
.income-invoice-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.income-invoice-head strong { display: block; font-size: 13px; }
.income-invoice-head small { display: block; margin-top: 2px; color: var(--quiet); font-size: 11px; }
.income-payments { display: grid; gap: 4px; margin: 10px 0 0; padding: 0 0 0 12px; list-style: none; border-left: 2px solid var(--line-strong); }
.income-payments li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--mist); font-size: 12px; }

/* Capture dialog: message details + four choices */
.choice-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.capture-message-details { margin: 0; }
.capture-message-details .compact-info-body { padding: 0 13px 13px; }

@media (max-width: 1120px) {
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .income-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .world-grid, .world-counts, .income-summary, .choice-grid-4, .tp-grid { grid-template-columns: 1fr; }
  .world-money-row dl { grid-template-columns: 1fr; }
  .board { grid-auto-columns: minmax(78vw, 1fr); }
  .board-card { cursor: default; }
  .income-project-head, .income-invoice-head { grid-template-columns: 1fr; }
  .path-step { grid-template-columns: auto minmax(0, 1fr); }
  .path-step .path-colours, .path-step .storage-note, .path-step-actions { grid-column: 1 / -1; }
  .tp-file { grid-template-columns: auto minmax(0, 1fr); }
  .tp-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .dialog-actions-left { width: 100%; }
}

/* ---- closeout correction: readable world purpose; no underlines on reference controls; hover kept ---- */
.world-purpose-read { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.world-purpose-text { margin: 0; color: var(--mist); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.world-purpose { grid-template-columns: minmax(0, 1fr) auto auto; }
a.source-tag, a.badge, .chip-row a, .source-row a, .drawer-list a, .boundary-note a, .world-money a, .cw-facts a, .income-list a, .mini-row a, .timeline-foot a { text-decoration: none; }
a.source-tag:hover, a.badge:hover { color: var(--foam); border-color: var(--line-strong); background: rgba(255, 255, 255, .06); }
@media (max-width: 760px) { .world-purpose-read { grid-template-columns: 1fr; } .world-purpose { grid-template-columns: 1fr; } }

/* ---------- hosted sign-in ---------- */
.sign-in { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg, #071318); }
.sign-in-card { width: min(460px, 100%); display: grid; gap: 16px; padding: 28px clamp(18px, 4vw, 32px); border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 19, 24, .72); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.sign-in-card .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sign-in-card h1 { margin: 0; font-size: 22px; }
.sign-in-copy { margin: 0; color: var(--mist); line-height: 1.5; }
.sign-in-message { margin: 0; padding: 10px 12px; border: 1px solid rgba(232, 95, 31, .4); border-radius: 8px; background: rgba(232, 95, 31, .08); color: var(--foam); }
.sign-in-card form { display: grid; gap: 12px; }
.sign-in-card .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- LA engagements, stages and tools ---- */
.eng-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.client-card .eng-tags { margin-top: 4px; }
.eng-tag { --tag: var(--teal); display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; color: var(--tag) !important; border: 1px solid color-mix(in srgb, var(--tag) 55%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--tag) 12%, transparent); font-family: var(--mono); font-size: 9px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.project-title-row .eng-tags { margin: 6px 0 2px; }
.focus-caption .eng-tag { margin-right: 4px; }

.eng-board { display: grid; grid-template-columns: repeat(var(--lanes, 4), minmax(210px, 1fr)); overflow-x: auto; padding-bottom: 6px; border: 1px solid var(--line); border-radius: 12px; background-color: rgba(7, 23, 28, .55); background-image: radial-gradient(rgba(205, 224, 223, .08) 1px, transparent 1px); background-size: 18px 18px; }
.eng-lane { --stage: var(--teal); display: grid; align-content: start; gap: 14px; min-width: 0; min-height: 300px; padding: 0 12px 16px; border-right: 1px dashed var(--line); }
.eng-lane:last-child { border-right: 0; }
.eng-lane header { justify-self: center; display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 10px; border-radius: 0 0 6px 6px; background: rgba(8, 25, 30, .92); white-space: nowrap; }
.eng-lane header strong { font-size: 11.5px; }
.eng-lane header small { color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.eng-lane-stack { display: grid; gap: 10px; }
.eng-card { --stage: var(--gold); display: grid; gap: 5px; padding: 12px 13px; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(26, 49, 56, .98), rgba(10, 28, 34, .98)); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); transition: border-color .16s ease, transform .16s ease; }
.eng-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.eng-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.eng-card small { color: var(--stage); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eng-card strong { font-size: 14.5px; line-height: 1.3; }
.eng-card-client { color: var(--mist); font-size: 12px; }
.eng-card-fact { color: var(--quiet); font-family: var(--mono); font-size: 10px; line-height: 1.5; }
.eng-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.eng-empty { margin: 0; padding: 18px 8px; color: var(--quiet); font-size: 12px; text-align: center; }
.eng-table td { vertical-align: top; }

.stage-board { grid-auto-columns: minmax(230px, 1fr); }
.stage-board .stage-head { align-items: start; }
.stage-title { display: grid; gap: 3px; min-width: 0; }
.stage-title small { color: var(--stage); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stage-about { display: grid; gap: 8px; padding: 10px 13px 0; }
.stage-about p { margin: 0; color: var(--mist); font-size: 12px; line-height: 1.45; }
.stage-about strong { color: var(--foam); }
.stage-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-actions { padding: 10px 13px 0; }
.board-column.is-out { background: rgba(8, 27, 33, .35); }
.board-column.is-out header, .board-column.is-out .stage-about { opacity: .5; }
.board-column.is-out .board-stack .empty-state { opacity: .55; }
.board-column.is-extra { border-style: dashed; border-top-style: solid; }

.tool-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; color: var(--teal); text-decoration: none; border: 1px solid rgba(71, 185, 183, .4); border-radius: 6px; background: rgba(71, 185, 183, .08); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tool-chip:hover { border-color: var(--teal); }
.tool-chip.is-small { min-height: 22px; padding: 3px 7px; font-size: 9px; }
.tool-chip.is-pending { color: var(--mist); border-style: dashed; border-color: var(--line-strong); background: transparent; }
.tool-pending { color: var(--quiet); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.tool-section { margin-top: 26px; }
.tool-section .surface-heading > p { max-width: 460px; text-align: right; }
.stage-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.stage-tools-card { --stage: var(--teal); display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 27, 33, .82); }
.stage-tools-card header small { color: var(--stage); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stage-tools-card header h3 { margin: 3px 0 4px; font-size: 17px; }
.stage-tools-card header p { margin: 0; color: var(--mist); font-size: 12px; line-height: 1.45; }
.stage-tools-list { display: grid; gap: 8px; }
.stage-tools-card .link-button { justify-self: start; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tool-card { display: grid; align-content: space-between; gap: 10px; min-height: 92px; padding: 13px 14px; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(27, 51, 58, .96), rgba(10, 27, 33, .98)); }
.tool-card strong { font-size: 14.5px; }
.tool-card p { margin: 4px 0 0; color: var(--quiet); font-size: 12px; line-height: 1.45; }
.tool-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tool-add { place-items: center; color: var(--mist); font-weight: 700; border-style: dashed; background: transparent; cursor: pointer; }
.tool-add:hover { color: var(--foam); border-color: var(--line-strong); }

.finance-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 27, 33, .82); }
.finance-link div { display: grid; gap: 2px; min-width: 0; }
.finance-link small { color: var(--gold); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.finance-link span { color: var(--quiet); font-size: 12px; }

.field-check { align-content: end; }
.field-check .check-row, .field-checks .check-row { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; color: var(--mist); font-size: 13px; font-weight: 600; cursor: pointer; }
.field-check .check-row input[type="checkbox"], .field-checks .check-row input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--gold); }
.field-checks { margin: 0; padding: 0; border: 0; }
.field-checks legend { margin-bottom: 7px; padding: 0; color: var(--mist); font-size: 12px; font-weight: 700; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.focus-group { flex-wrap: wrap; max-width: 100%; }
.tool-section .surface-heading .eyebrow { margin-bottom: 4px; color: var(--gold); text-align: left; }
.stage-tools-card .link-button { font-size: 13px; text-align: left; }
@media (max-width: 760px) {
  .check-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-section .surface-heading { display: grid; }
  .tool-section .surface-heading > p { text-align: left; }
}

/* ---- who's on a task, and cowork ---- */
.people-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.person-chip { --p: var(--teal); display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; color: var(--p); border: 1px solid color-mix(in srgb, var(--p) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--p) 12%, transparent); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.board-card .eng-tag, .task-list .eng-tag { justify-self: start; width: fit-content; margin: 4px 4px 0 0; }
.board-card .people-row { justify-self: start; }
.tp-people { margin-bottom: 14px; }
.tp-people-label { color: var(--mist); font-size: 12px; font-weight: 700; }
.tp-people-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.person-toggle { --p: var(--teal); min-height: 36px; padding: 6px 14px; color: var(--mist); border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; font: 700 13px/1.2 var(--font); cursor: pointer; }
.person-toggle:hover { border-color: var(--p); color: var(--foam); }
.person-toggle[aria-pressed="true"] { color: #062124; border-color: var(--p); background: var(--p); }
.person-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cowork-card .eng-card-foot { gap: 8px; }
.cowork-card .link-button.small { font-size: 12px; }

/* ---- money read from the finance portals ---- */
.finance-link.is-problem { border-color: color-mix(in srgb, var(--rose) 45%, var(--line)); }
.finance-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-table .eng-tag { white-space: nowrap; }
.project-fact .storage-note { display: block; margin-top: 2px; }

/* Archived clients: hidden from lists until asked for; shown here quieter, with a plain way back. */
.client-card.is-archived { --kind: var(--quiet); opacity: .78; border-style: dashed; }
.client-card.is-archived:hover { opacity: 1; }
.archived-note { margin: 0 0 14px; color: var(--quiet); font-size: 13px; }
.archived-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 16px; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: 10px; background: rgba(8, 27, 33, .82); }
.archived-banner div { display: grid; gap: 3px; }
.archived-banner span { color: var(--quiet); font-size: 13px; }

/* ============================================================================================================
   The shell (21 Oct 2026): every world in a sidebar, folded open to its sections; the page beside it. The old
   topbar tabs and spaces bar are gone; their rules above are left harmless. Night is Work's own palette; Day is
   the Ecosphere's light, defined at the end.
   ============================================================================================================ */
:root {
  --hover: rgba(255, 255, 255, .055);
  --hover-strong: rgba(255, 255, 255, .09);
  --panel: #10252b;
  --panel-2: #0c1f25;
  --input: #07191f;
  --sidebar-w: 248px;
  --topbar-h: 52px;
}
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.app-body { min-width: 0; display: flex; flex-direction: column; }

/* sidebar */
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; min-width: 0; border-right: 1px solid var(--line); background: rgba(7, 21, 26, .97); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px; }
.sidebar-head .brand { min-width: 0; }
.sidebar-head .brand-mark { width: 34px; height: 34px; font-size: 16px; border-radius: 8px; }
.sidebar-head .brand-copy small { font-size: 9px; }
.sidebar-head .brand-copy strong { font-size: 15px; }
.sidebar-close { display: none; width: 34px; min-height: 34px; }
.sidebar-open { display: none; width: 36px; min-height: 36px; }
.worlds-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; scrollbar-width: thin; }
.sidebar-foot { display: grid; gap: 6px; padding: 10px 12px 14px; border-top: 1px solid var(--line); }
.sidebar-foot .ghost-button { justify-content: flex-start; gap: 8px; }
.theme-toggle span[aria-hidden] { width: 14px; text-align: center; }
.workspace-chip { font-size: 10px; }

.tree-link { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px; color: var(--mist); border-radius: 7px; font-size: 13px; text-decoration: none; cursor: pointer; }
.tree-link:hover { color: var(--foam); background: var(--hover); }
.tree-link[aria-current="page"] { color: var(--foam); background: var(--hover-strong); }
.tree-link.top { margin: 4px 0 6px; color: var(--foam); font-weight: 650; }
.tree-link.top::before { content: '◎'; color: var(--gold); font-size: 12px; }
.tree-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { flex: 0 0 auto; color: var(--quiet); font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.tree-link[aria-current="page"] .tree-count, .tree-link:hover .tree-count { color: var(--mist); }
.tree-world { margin-top: 6px; }
.tree-world.is-current > .tree-world-row .tree-link.world { color: var(--foam); }
.tree-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; }
.tree-fold { display: grid; width: 20px; height: 26px; place-items: center; padding: 0; color: var(--quiet); border: 0; border-radius: 5px; background: transparent; font-size: 10px; }
.tree-fold:hover { color: var(--foam); background: var(--hover); }
.tree-link.world { color: var(--foam); font-weight: 650; }
.tree-link.world .tree-count { color: var(--quiet); }
.tree-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--w, var(--teal)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--w, var(--teal)) 28%, transparent); }
.tree-children { display: grid; gap: 1px; padding-left: 20px; }
.tree-children .tree-row { margin-left: -20px; }
.tree-link.has-fold { min-height: 28px; }
.tree-link.is-group { color: var(--mist); }
.tree-link.sub { padding-left: 22px; min-height: 27px; font-size: 12.5px; }
.tree-link.sub::before { content: ''; width: 5px; height: 5px; margin-left: -12px; border-radius: 50%; background: color-mix(in srgb, var(--w, var(--teal)) 60%, transparent); flex: 0 0 auto; }
.tree-link.is-soon { color: var(--quiet); cursor: default; opacity: .75; }
.tree-link.is-soon:hover { color: var(--quiet); background: transparent; }
.tree-soon { color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }

/* topbar: crumb and the one action */
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: var(--topbar-h); padding: 8px clamp(14px, 2vw, 28px); background: rgba(7, 19, 24, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--mist); font-size: 13px; white-space: nowrap; overflow: hidden; }
.crumb strong { color: var(--foam); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.crumb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--w, var(--teal)); flex: 0 0 auto; }
.crumb-world { color: var(--foam); font-weight: 650; text-decoration: none; border-radius: 4px; }
.crumb-world:hover { color: var(--foam); background: var(--hover); }
.crumb-sep { color: var(--quiet); }
.top-actions { gap: 6px; }

/* the page: denser than before, so a full screen holds a lot */
main { width: auto; max-width: none; margin: 0; padding: 14px clamp(14px, 2vw, 28px) 48px; }
main h1 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; }
main h2 { font-size: clamp(18px, 1.8vw, 24px); }
.page-heading { padding: 2px 0 14px; }
.page-heading > div > p:last-child { font-size: 13px; }

/* ---- Tasks: toolbar and the compact list ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.toolbar .tlis-view-toggle .lens-button { min-height: 32px; padding: 4px 11px; }
.toolbar .filter-select.small { min-height: 32px; min-width: 160px; padding: 4px 28px 4px 9px; font-size: 12px; }
.toolbar .focus-group { padding: 2px; }
.toolbar .focus-button { min-height: 26px; padding: 0 9px; }
.toolbar-count { white-space: nowrap; }
.toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.task-lists { display: grid; gap: 14px; }
.list-group-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px; }
.status-pill { --c: var(--quiet); display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 9px 2px 7px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 12px; font-weight: 700; }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.list-group-count { color: var(--quiet); font-family: var(--mono); font-size: 11px; }
.list-group-head .storage-note { margin-left: 4px; }
.list-table-wrap { border-radius: 9px; }
.compact-list { min-width: 860px; table-layout: fixed; background: var(--panel-2); }
.compact-list th { padding: 6px 8px; font-size: 9px; background: rgba(0, 0, 0, .12); }
.compact-list td { padding: 3px 8px; font-size: 13px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.compact-list tbody tr:hover { background: var(--hover); }
.compact-list .col-done { width: 34px; }
.compact-list .col-where { width: 220px; }
.compact-list .col-who { width: 104px; }
.compact-list .col-due { width: 136px; }
.compact-list .col-status { width: 148px; }
.compact-list .col-attention { width: 158px; }
.task-row { --stripe: var(--orange); height: 36px; }
.task-row.is-done td { opacity: .55; }
.task-row.is-done .row-title { text-decoration: line-through; }
.cell-done { padding-left: 10px !important; }
.done-ring { width: 16px; height: 16px; margin: 0; vertical-align: middle; appearance: none; -webkit-appearance: none; border: 1.6px solid var(--quiet); border-radius: 50%; background: transparent; cursor: pointer; }
.done-ring:hover { border-color: var(--teal); }
.done-ring:checked { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 3px var(--panel-2); }
.cell-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
.row-title { padding: 2px 4px; margin: 0 -4px; color: var(--foam); text-align: left; border: 0; border-radius: 5px; background: transparent; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.row-title:hover { color: var(--foam); background: var(--hover-strong); }
.compact-list .eng-tag { margin: 0; }
.compact-list .inline-select.small { width: 100%; max-width: none; min-height: 28px; padding: 2px 22px 2px 7px; font-size: 12px; border-color: transparent; background: transparent; }
.compact-list .inline-select.small:hover, .compact-list .inline-date:hover { border-color: var(--line-strong); background: var(--input); }
.compact-list .inline-select.small:focus, .compact-list .inline-date:focus { border-color: rgba(71, 185, 183, .55); background: var(--input); }
.cell-status { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.status-dot { --c: var(--quiet); width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.inline-date { width: 100%; min-height: 28px; padding: 2px 6px; color: var(--mist); border: 1px solid transparent; border-radius: 6px; background: transparent; font-family: var(--font); font-size: 12px; font-variant-numeric: tabular-nums; }
.inline-date::-webkit-calendar-picker-indicator { opacity: .5; }
.inline-date.is-late { color: var(--red); }
.inline-date.is-soon { color: var(--gold); }
.who-row { display: inline-flex; gap: 3px; }
.who-chip { --p: var(--teal); display: grid; width: 24px; height: 24px; place-items: center; padding: 0; color: var(--quiet); border: 1.4px solid var(--line-strong); border-radius: 50%; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.who-chip:hover { border-color: var(--p); color: var(--p); }
.who-chip[aria-pressed="true"] { color: #062124; border-color: var(--p); background: var(--p); }
.who-own { color: var(--quiet); font-size: 11px; }
.add-row td { border-bottom: 0; }
.add-task { padding: 4px 6px; margin: 0 -6px; color: var(--quiet); border: 0; border-radius: 5px; background: transparent; font-size: 12px; cursor: pointer; }
.add-task:hover { color: var(--foam); background: var(--hover); }

/* narrow: the sidebar becomes a drawer */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(var(--sidebar-w), 86vw); transform: translateX(-100%); transition: transform .18s ease; box-shadow: none; }
  .app.sidebar-open .sidebar { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .5); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(1, 8, 10, .5); }
  .sidebar-close, .sidebar-open { display: inline-flex; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 6px 10px; }
  main { padding: 12px 10px 48px; }
  .toolbar-actions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ============================================================================================================
   Day: the Ecosphere's light, in Work's own shapes. Only colours change; nothing moves.
   ============================================================================================================ */
:root[data-theme="day"] {
  /* all white (owner's pick 10 Nov 2026, route W2, replacing the 21 Oct warm paper): white floor and cards, Work's own
     Night surface #10252b as the ink, its own --quiet for the greys; the accents are Day's as before */
  --abyss: #ffffff; --abyss-2: #ffffff; --kelp: #f3f5f6; --kelp-2: #eceff0;
  --surface: #ffffff; --surface-2: #f7f9f9; --surface-3: #f0f3f4;
  --panel: #ffffff; --panel-2: #ffffff; --input: #ffffff;
  --line: rgba(16, 37, 43, .10); --line-strong: rgba(16, 37, 43, .18);
  --foam: #10252b; --mist: #4a5d62; --quiet: #718187;
  --orange: #e8711a; --orange-soft: rgba(247, 144, 30, .14);
  --gold: #b26410; --gold-soft: rgba(178, 100, 16, .12);
  --teal: #0e9488; --teal-soft: rgba(14, 148, 136, .12);
  --plum: #8a4fae; --plum-soft: rgba(138, 79, 174, .12);
  --rose: #c94f7a; --rose-soft: rgba(201, 79, 122, .12);
  --red: #c8433f; --red-soft: rgba(200, 67, 63, .12);
  --hover: rgba(16, 37, 43, .04); --hover-strong: rgba(16, 37, 43, .075);
  --shadow: 0 18px 50px -18px rgba(16, 37, 43, .22), 0 4px 14px -6px rgba(16, 37, 43, .10);
}
:root[data-theme="day"] body { background: var(--abyss); }
:root[data-theme="day"] .sidebar { background: var(--card); }
:root[data-theme="day"] .topbar { background: var(--card); }

:root[data-theme="day"] .brand-mark { border-color: rgba(178, 100, 16, .35); }
:root[data-theme="day"] .ghost-button, :root[data-theme="day"] .icon-button { color: var(--mist); background: var(--surface); }
:root[data-theme="day"] .ghost-button:hover, :root[data-theme="day"] .icon-button:hover { color: var(--foam); background: var(--surface-2); }
:root[data-theme="day"] .link-button { color: var(--teal); }
:root[data-theme="day"] .link-button:hover, :root[data-theme="day"] .table-title-button:hover, :root[data-theme="day"] .plain-link:hover, :root[data-theme="day"] .world-card-head h2 a:hover { color: var(--foam); }
:root[data-theme="day"] .field input, :root[data-theme="day"] .field select, :root[data-theme="day"] .field textarea, :root[data-theme="day"] .search-input, :root[data-theme="day"] .filter-select, :root[data-theme="day"] .inline-select, :root[data-theme="day"] .headings-form .field input, :root[data-theme="day"] .path-step-name, :root[data-theme="day"] .path-add input, :root[data-theme="day"] .world-purpose input { color: var(--foam); background: var(--surface); }
:root[data-theme="day"] .compact-list .inline-select.small { background: transparent; }
:root[data-theme="day"] dialog { background: var(--surface); box-shadow: 0 30px 90px rgba(23, 33, 31, .25); }
:root[data-theme="day"] dialog::backdrop { background: rgba(23, 33, 31, .38); }
:root[data-theme="day"] .toast { background: var(--surface); }
:root[data-theme="day"] .toast.is-error { background: #fbeceb; }
:root[data-theme="day"] table, :root[data-theme="day"] .compact-list { background: var(--surface); }
:root[data-theme="day"] .compact-list th { background: var(--surface-2); }
:root[data-theme="day"] .task-card, :root[data-theme="day"] .board-card, :root[data-theme="day"] .world-card, :root[data-theme="day"] .eng-card, :root[data-theme="day"] .tool-card, :root[data-theme="day"] .client-card, :root[data-theme="day"] .document-card, :root[data-theme="day"] .summary-card, :root[data-theme="day"] .dashboard-tile, :root[data-theme="day"] .inbox-item, :root[data-theme="day"] .world-counts div, :root[data-theme="day"] .tp-file, :root[data-theme="day"] .tp-message, :root[data-theme="day"] .choice-card, :root[data-theme="day"] .income-invoice, :root[data-theme="day"] .path-step, :root[data-theme="day"] .canvas-item, :root[data-theme="day"] .field-node { background: var(--surface); box-shadow: none; }
:root[data-theme="day"] .world-card { box-shadow: var(--shadow); }
:root[data-theme="day"] .eng-card { box-shadow: var(--shadow); }
:root[data-theme="day"] .board-column, :root[data-theme="day"] .surface-panel, :root[data-theme="day"] .empty-route, :root[data-theme="day"] .focus-group, :root[data-theme="day"] .income-project, :root[data-theme="day"] .finance-link, :root[data-theme="day"] .capture-step, :root[data-theme="day"] .tp-section, :root[data-theme="day"] .eng-board, :root[data-theme="day"] .stage-tools-card, :root[data-theme="day"] .archived-banner, :root[data-theme="day"] .eng-lane header, :root[data-theme="day"] .compact-info, :root[data-theme="day"] .sign-in-card, :root[data-theme="day"] .tp-earlier, :root[data-theme="day"] .project-file-form, :root[data-theme="day"] .workflow-card, :root[data-theme="day"] .attention-column, :root[data-theme="day"] .stage-column, :root[data-theme="day"] .calendar-day, :root[data-theme="day"] .canvas-surface, :root[data-theme="day"] .tlis-field { background: var(--surface-2); }
:root[data-theme="day"] .board-column.is-over { background: var(--teal-soft); }
:root[data-theme="day"] .focus-button[aria-pressed="true"] { color: #ffffff; }
:root[data-theme="day"] .who-chip[aria-pressed="true"], :root[data-theme="day"] .person-toggle[aria-pressed="true"] { color: #ffffff; }
:root[data-theme="day"] .done-ring:checked { box-shadow: inset 0 0 0 3px var(--surface); }
:root[data-theme="day"] .tp-title:focus { background: var(--surface); }
:root[data-theme="day"] .sign-in { background: var(--abyss); }
:root[data-theme="day"] .save-status.is-ok, :root[data-theme="day"] .file-summary.is-ok { color: #0e9488; }
:root[data-theme="day"] .save-status.is-error, :root[data-theme="day"] .file-summary.is-error { color: #c8433f; }
:root[data-theme="day"] .save-status.is-draft, :root[data-theme="day"] .file-summary.is-busy { color: #b26410; }
:root[data-theme="day"] .card-meta .due-soon, :root[data-theme="day"] .due-soon { color: #b26410; }
:root[data-theme="day"] .attention-done { color: #0e9488; }
:root[data-theme="day"] .attention-due-soon { color: #c94f7a; }
:root[data-theme="day"] .tlis-view-toggle .lens-button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(232, 113, 26, .14), rgba(232, 113, 26, .04)); }
:root[data-theme="day"] .skip-link { color: #ffffff; }
:root[data-theme="day"] .client-card:hover, :root[data-theme="day"] .client-card[aria-pressed="true"] { background: var(--surface-2); }
:root[data-theme="day"] .attention-needs-me, :root[data-theme="day"] .attention-done { color: #0e9488; }
:root[data-theme="day"] .attention-replies-owed, :root[data-theme="day"] .attention-due-soon { color: #c94f7a; }
:root[data-theme="day"] .attention-decision-needed { color: #8a4fae; }
:root[data-theme="day"] .attention-ready-for-review { color: #b26410; }
:root[data-theme="day"] .attention-waiting { color: #c2561a; }
:root[data-theme="day"] .attention-blocked { color: #c8433f; }
:root[data-theme="day"] .attention-recently-moved { color: #4f88c0; }
:root[data-theme="day"] .person-chip, :root[data-theme="day"] .eng-tag { background: color-mix(in srgb, var(--p, var(--tag)) 10%, white); }
/* an empty due date stays quiet until the row is hovered or the field focused */
.inline-date.is-empty:not(:hover):not(:focus) { color: transparent; }
.inline-date.is-empty:not(:hover):not(:focus)::-webkit-calendar-picker-indicator { opacity: .25; }
.task-row:hover .inline-date.is-empty { color: var(--quiet); }
.compact-list .col-status { width: 164px; }
.compact-list .col-where { width: 212px; }
/* the list never widens the page: its tables scroll inside their own wrap on a narrow screen */
.task-lists { grid-template-columns: minmax(0, 1fr); }
.list-group { min-width: 0; }
.list-group-head { flex-wrap: wrap; }
@media (max-width: 900px) {
  .topbar .crumb { grid-column: 2; grid-row: 1; }
  .topbar .top-actions { grid-column: 3; grid-row: 1; }
}
.topbar .crumb { grid-column: 2; grid-row: 1; }
.topbar .top-actions { grid-column: 3; grid-row: 1; }
/* the row's hidden labels (for screen readers) stay inside the scrolling table, never widening the page */
.table-wrap { position: relative; }

/* ============================================================================================================
   Depth (21 Oct 2026, owner's reference): every surface is an object on a desk. Cards are raised, lists sit in
   wells, controls are pills with an edge of light. Shapes and colours stay Work's own; only the relief changes.
   ============================================================================================================ */
:root {
  --card: var(--surface);
  --card-2: var(--surface-3);
  --well-bg: #091b20;
  --raise: 0 16px 32px -18px rgba(0, 0, 0, .7), 0 2px 5px rgba(0, 0, 0, .3);
  --raise-sm: 0 7px 14px -9px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .32);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .07);
  --edge-strong: inset 0 1px 0 rgba(255, 255, 255, .13);
  --well: inset 0 2px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(0, 0, 0, .28);
  --ring: inset 0 1px 2px rgba(0, 0, 0, .45);
  --radius-card: 18px;
}
:root[data-theme="day"] {
  --card: #ffffff;
  --card-2: #ffffff;
  --well-bg: #f6f8f8;
  --raise: 0 22px 44px -22px rgba(16, 37, 43, .30), 0 3px 10px rgba(16, 37, 43, .07);
  --raise-sm: 0 8px 16px -10px rgba(16, 37, 43, .26), 0 1px 2px rgba(16, 37, 43, .08);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .9);
  --edge-strong: inset 0 1px 0 #ffffff;
  --well: inset 0 1px 4px rgba(16, 37, 43, .07), inset 0 0 0 1px rgba(16, 37, 43, .05);
  --ring: inset 0 1px 2px rgba(16, 37, 43, .18);
}

/* the desk: sidebar and page are two raised cards on the floor */
.app { gap: 12px; padding: 12px; }
.sidebar { top: 12px; height: calc(100vh - 24px); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--raise), var(--edge); }
.app-body { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--raise), var(--edge); }
.topbar { border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--card); backdrop-filter: none; }
.sidebar-head { padding: 14px 14px 10px; }
.worlds-tree { margin: 0 10px; padding: 8px; border-radius: 12px; background: var(--well-bg); box-shadow: var(--well); }
.sidebar-foot { padding: 10px 12px 14px; }
.tree-link[aria-current="page"] { background: var(--card-2); box-shadow: var(--raise-sm), var(--edge-strong); }
.tree-link:hover { background: var(--hover-strong); }
.tree-link[aria-current="page"]:hover { background: var(--card-2); }

/* pills with an edge of light: buttons, chips, toggles, selects */
.ghost-button, .icon-button, .primary-button { border-radius: 999px; }
.ghost-button, .icon-button { color: var(--mist); border-color: var(--line); background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.ghost-button:hover, .icon-button:hover { color: var(--foam); background: var(--card-2); border-color: var(--line-strong); transform: translateY(-1px); }
.primary-button { border-color: rgba(255, 154, 95, .3); background: linear-gradient(180deg, #d4541a, #b83d12); box-shadow: var(--raise-sm), inset 0 1px 0 rgba(255, 255, 255, .22); }
.primary-button:hover { background: linear-gradient(180deg, #df5c1f, #c44414); box-shadow: var(--raise), inset 0 1px 0 rgba(255, 255, 255, .22); }
.danger-button { background: var(--red-soft); }
.crumb { width: fit-content; max-width: 100%; min-height: 34px; padding: 4px 14px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.tlis-view-toggle { padding: 3px; border: 0; border-radius: 999px; background: var(--well-bg); box-shadow: var(--well); }
.tlis-view-toggle .lens-button { border: 0; border-radius: 999px; }
.tlis-view-toggle .lens-button[aria-pressed="true"] { color: var(--foam); background: var(--card-2); box-shadow: var(--raise-sm), var(--edge-strong); }
.focus-group { padding: 3px; border: 0; border-radius: 999px; background: var(--well-bg); box-shadow: var(--well); }
.focus-button { border-radius: 999px; }
.focus-button[aria-pressed="true"] { box-shadow: var(--raise-sm), inset 0 1px 0 rgba(255, 255, 255, .25); }
.search-input, .filter-select, .toolbar .filter-select.small { border-color: var(--line); border-radius: 999px; background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.arrange-list { border-radius: 12px; background: var(--card); box-shadow: var(--raise), var(--edge); }
.sidebar-foot .ghost-button { padding-left: 12px; }
.workspace-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent); }

/* the list: a raised card holding a well; each task a strip you could pick up */
.list-group { padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--raise), var(--edge); }
.list-group-head { padding: 2px 4px 10px; }
.status-pill { background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.list-table-wrap { border-radius: 10px; border: 1px solid var(--line); background: var(--well-bg); box-shadow: var(--well); }
.compact-list { background: transparent; border-collapse: separate; border-spacing: 0 3px; }
.compact-list th { background: transparent; border-bottom: 0; }
.compact-list td { border-bottom: 0; }
.task-row { box-shadow: none; }
.task-row td { background: var(--card-2); box-shadow: var(--edge), 0 1px 2px rgba(0, 0, 0, .22); }
.task-row td:first-child { border-radius: 8px 0 0 8px; box-shadow: var(--edge), 0 1px 2px rgba(0, 0, 0, .22); }
.task-row td:last-child { border-radius: 0 8px 8px 0; }
.compact-list tbody tr:hover { background: transparent; }
.task-row:hover td { background: color-mix(in srgb, var(--card-2) 88%, var(--foam) 12%); }
.add-row td { background: transparent; box-shadow: none; }
.done-ring { background: var(--well-bg); box-shadow: var(--ring); }
.done-ring:checked { box-shadow: inset 0 0 0 3px var(--card-2); }
.who-chip[aria-pressed="true"] { box-shadow: var(--raise-sm), inset 0 1px 0 rgba(255, 255, 255, .25); }
.compact-list .inline-select.small:hover, .compact-list .inline-date:hover, .compact-list .inline-select.small:focus, .compact-list .inline-date:focus { background: var(--well-bg); box-shadow: var(--ring); }

/* cards elsewhere get the same relief */
.board-column, .surface-panel, .world-card, .eng-card, .client-card, .tool-card, .summary-card, .income-project, .finance-link, .stage-tools-card, .workflow-card, .inbox-item, .document-card, .empty-route, .cw-shell, .project-shell, .client-detail, .world-identity, .field-drawer, .compact-info { box-shadow: var(--raise), var(--edge); }
.board-card, .task-card, .dashboard-tile, .world-counts div, .tp-file, .tp-message, .income-invoice, .path-step, .workspace-option, .map-client, .map-project { box-shadow: var(--raise-sm), var(--edge); }
.board-card { box-shadow: var(--raise-sm), var(--edge); }
.task-card { box-shadow: var(--raise-sm), var(--edge); }
.board-column { border-radius: 14px; }
.board-stack { padding: 10px; border-radius: 0 0 12px 12px; }
dialog { border-radius: var(--radius-card); box-shadow: 0 30px 90px rgba(0, 0, 0, .58), var(--edge); }
.toast { border-radius: 999px; box-shadow: var(--raise), var(--edge); }
:root[data-theme="day"] dialog { box-shadow: var(--raise), var(--edge); }
:root[data-theme="day"] .task-row td { box-shadow: var(--edge), 0 1px 2px rgba(16, 37, 43, .10); }
:root[data-theme="day"] .task-row td:first-child { box-shadow: var(--edge), 0 1px 2px rgba(16, 37, 43, .10); }
:root[data-theme="day"] .task-row:hover td { background: #f7f9f9; }
:root[data-theme="day"] .focus-button[aria-pressed="true"], :root[data-theme="day"] .who-chip[aria-pressed="true"] { color: #ffffff; }
:root[data-theme="day"] .brand-mark { box-shadow: var(--raise-sm), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root[data-theme="day"] .ghost-button, :root[data-theme="day"] .icon-button { background: var(--card-2); }
:root[data-theme="day"] .ghost-button:hover, :root[data-theme="day"] .icon-button:hover { background: var(--card-2); }

/* narrow: the desk gutters go, the sidebar drawer keeps its relief */
@media (max-width: 900px) {
  .app { gap: 0; padding: 0; }
  .app-body { border: 0; border-radius: 0; box-shadow: none; }
  .topbar { border-radius: 0; }
  .sidebar { top: 0; height: 100vh; border-radius: 0 var(--radius-card) var(--radius-card) 0; border-left: 0; }
}
/* the title and status cells are ordinary cells (a flex cell sat shorter than its row and showed its own edge) */
.cell-title { display: table-cell; }
.cell-title > * { display: inline-flex; vertical-align: middle; margin: 2px 6px 2px 0; }
.cell-title .row-title { display: inline; margin: 0 2px 0 -4px; }
.cell-status { display: table-cell; white-space: nowrap; }
.cell-status .status-dot { display: inline-block; vertical-align: middle; margin-right: 6px; }
.cell-status .inline-select.small { display: inline-block; width: calc(100% - 16px); vertical-align: middle; }
/* sections indent by their own margin, so a raised pill never runs past the well's edge */
.tree-children { padding-left: 0; }
.tree-children > .tree-link { margin-left: 20px; }
.tree-children .tree-row { margin-left: 0; }
.tree-children { grid-template-columns: 20px minmax(0, 1fr); gap: 1px 0; }
.tree-children > .tree-link { grid-column: 2; margin-left: 0; }
.tree-children > .tree-row { grid-column: 1 / -1; }
/* sections sit under the world's name, not under its dot */
.tree-children { grid-template-columns: 36px minmax(0, 1fr); }
.tree-children > .tree-row { grid-template-columns: 36px minmax(0, 1fr); }
.tree-children > .tree-row .tree-fold { justify-self: end; }
.tree-link.sub { padding-left: 24px; }

/* ---- stage 2: subtasks, quick-add, drag, Table, Calendar, the task's own subtasks ---- */
.row-grip { display: inline-block; width: 12px; margin: 0 2px 0 -6px; color: var(--quiet); font-size: 11px; line-height: 1; opacity: 0; cursor: grab; vertical-align: middle; touch-action: none; }
.task-row:hover .row-grip { opacity: .7; }
.task-row.is-lifted td { opacity: .35; }
.list-group.is-over { box-shadow: var(--raise), var(--edge), 0 0 0 2px var(--teal); }
.cal-day.is-over, .cal-undated.is-over { box-shadow: inset 0 0 0 2px var(--teal); }
.row-ghost { max-width: 280px; padding: 8px 12px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card-2); box-shadow: var(--raise), var(--edge); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row.is-subtask td { background: color-mix(in srgb, var(--card-2) 75%, var(--well-bg)); }
.task-row.is-subtask .cell-title { padding-left: 26px; }
.sub-arrow { color: var(--quiet); margin-right: 2px; }
.sub-count, .part-of, .add-sub { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 7px; color: var(--quiet); border: 1px solid transparent; border-radius: 999px; background: transparent; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sub-count { border-color: var(--line); }
.part-of { border-color: var(--line); cursor: pointer; }
.part-of:hover { color: var(--foam); border-color: var(--line-strong); }
.add-sub { opacity: 0; cursor: pointer; }
.task-row:hover .add-sub, .add-sub:focus-visible { opacity: 1; }
.add-sub:hover { color: var(--foam); background: var(--hover); }
.where-fixed { display: inline-block; padding: 2px 7px; color: var(--quiet); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.add-row.is-sub .add-task, .add-row.is-sub .quick-add { margin-left: 26px; }
.quick-add { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.quick-add input { flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 4px 10px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--input); font-size: 13px; box-shadow: var(--ring); }
.quick-add input:focus { border-color: rgba(71, 185, 183, .6); outline: none; box-shadow: var(--ring), 0 0 0 4px rgba(71, 185, 183, .14); }
.quick-add .primary-button.small, .quick-add .ghost-button.small { min-height: 30px; }

/* Table */
.table-view { min-width: 1180px; }
.table-view .col-world { width: 76px; }
.table-view .col-where { width: 200px; }
.table-view .col-stage { width: 150px; }
.table-view .col-when { width: 120px; }
.table-view .cell-when { color: var(--quiet); font-size: 11px; white-space: nowrap; }
.sort-link { color: inherit; text-decoration: none; border-radius: 4px; }
.sort-link:hover { color: var(--foam); }
.sort-link[aria-sort="ascending"], .sort-link[aria-sort="descending"] { color: var(--foam); }

/* Calendar */
.calendar-view { display: grid; gap: 10px; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cal-nav { display: inline-flex; gap: 4px; }
.cal-nav .ghost-button.small { min-width: 34px; padding-inline: 10px; }
.cal-month { margin: 0; font-size: 20px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 2px; }
.cal-weekdays span { color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-day { display: grid; grid-template-rows: auto 1fr; min-height: 104px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--raise-sm), var(--edge); transition: box-shadow .15s ease; }
.cal-day.is-outside { opacity: .55; background: var(--well-bg); box-shadow: none; }
.cal-day.is-today { border-color: color-mix(in srgb, var(--orange) 60%, transparent); }
.cal-day.is-today .cal-date { color: #ffffff; background: var(--orange); }
.cal-day header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 2px 8px; }
.cal-date { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--mist); font-size: 11px; font-weight: 700; }
.cal-add { width: 22px; height: 22px; padding: 0; color: var(--quiet); border: 0; border-radius: 50%; background: transparent; font-size: 14px; line-height: 1; opacity: 0; cursor: pointer; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { color: var(--foam); background: var(--hover-strong); }
.cal-stack { display: grid; align-content: start; gap: 3px; padding: 2px 6px 8px; }
.cal-stack-row { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding: 6px 10px 10px; }
.cal-task { --w: var(--orange); display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px 2px 6px; color: var(--foam); border: 1px solid var(--line); border-radius: 6px; background: var(--card-2); box-shadow: var(--edge), 0 1px 2px rgba(0, 0, 0, .25); font-size: 12px; line-height: 1.25; cursor: grab; touch-action: none; user-select: none; }
.cal-task:hover { border-color: var(--line-strong); }
.cal-task.is-lifted { opacity: .35; }
.cal-task.is-late { color: var(--red); }
.cal-task.is-done { opacity: .5; text-decoration: line-through; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--w); flex: 0 0 auto; }
.cal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-undated { border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--raise), var(--edge); }
.cal-undated header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; }
.cal-elsewhere { margin: 0; }
:root[data-theme="day"] .cal-task { box-shadow: var(--edge), 0 1px 2px rgba(16, 37, 43, .10); }

/* the task's own subtasks, inside the task */
.tp-subtasks { display: grid; gap: 4px; margin-bottom: 8px; }
.tp-subtask { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); box-shadow: var(--edge); }
.tp-subtask.is-done .row-title { text-decoration: line-through; opacity: .6; }
.tp-subtask .storage-note { margin-left: auto; white-space: nowrap; }
.tp-quick-add input { max-width: 420px; }
@media (max-width: 900px) {
  .cal-grid { grid-template-columns: repeat(7, minmax(120px, 1fr)); overflow-x: auto; }
  .calendar-view { min-width: 0; overflow-x: auto; }
}
/* the Table keeps its title column wide; narrower fields, and it scrolls sideways inside its wrap when it must */
.table-view { min-width: 1240px; }
.table-view .col-done { width: 34px; }
.table-view .col-world { width: 64px; }
.table-view .col-where { width: 180px; }
.table-view .col-status { width: 140px; }
.table-view .col-who { width: 92px; }
.table-view .col-due { width: 126px; }
.table-view .col-attention { width: 140px; }
.table-view .col-stage { width: 130px; }
.table-view .col-when { width: 100px; }
/* a long task title never pushes a calendar day wider: the chip shrinks to the day and trims with an ellipsis */
.cal-stack { grid-template-columns: minmax(0, 1fr); }
.cal-task { min-width: 0; max-width: 100%; }
.cal-stack-row { grid-template-columns: none; }

/* ---- the row opened underneath itself ---- */
.row-open { display: inline-grid; width: 22px; height: 22px; place-items: center; padding: 0; color: var(--quiet); border: 1px solid transparent; border-radius: 50%; background: transparent; font-size: 12px; text-decoration: none; opacity: 0; cursor: pointer; }
.task-row:hover .row-open, .row-open:focus-visible { opacity: 1; }
.row-open:hover { color: var(--foam); background: var(--hover-strong); }
.row-title[aria-expanded="true"] { color: var(--foam); background: var(--hover-strong); }
.detail-row td { background: var(--well-bg); box-shadow: var(--well); border-radius: 0 0 10px 10px; padding: 10px 12px 12px; }
.row-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 14px; }
.rd-label, .rd-field > span { display: block; margin-bottom: 4px; color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.rd-notes { width: 100%; min-height: 96px; padding: 8px 10px; color: var(--foam); border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; box-shadow: var(--edge); }
.rd-notes:focus { border-color: rgba(71, 185, 183, .6); outline: none; box-shadow: var(--edge), 0 0 0 4px rgba(71, 185, 183, .14); }
.rd-side { display: grid; align-content: start; gap: 8px; }
.rd-field { display: block; }
.rd-field .inline-select.small { width: 100%; max-width: none; background: var(--card-2); border-color: var(--line); }
.rd-files { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
@media (max-width: 900px) { .row-detail { grid-template-columns: 1fr; } }

/* ---- the Projects list ---- */
.inline-text { width: 100%; min-width: 0; min-height: 28px; padding: 2px 7px; color: var(--foam); border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; }
.inline-text:hover { border-color: var(--line-strong); background: var(--input); }
.inline-text:focus { border-color: rgba(71, 185, 183, .55); outline: none; background: var(--input); box-shadow: var(--ring); }
.projects-list { min-width: 760px; }
.projects-list .col-where { width: 240px; }
.projects-list .col-status { width: 220px; }
.projects-list .col-due { width: 140px; }
.projects-list .col-count { width: 90px; }
.projects-list .cell-title { display: flex; align-items: center; gap: 4px; }
.projects-list .cell-count { color: var(--quiet); font-size: 12px; white-space: nowrap; }
.project-row:hover .row-open { opacity: 1; }
.add-task-block { padding: 6px 10px; margin: 0; }
.quick-add-block { max-width: 640px; }
.quick-add-row { margin: 0 0 12px; }
/* the project's name cell is an ordinary cell; the name field and the open arrow sit on one line */
.projects-list .cell-title { display: table-cell; white-space: nowrap; }
.projects-list .inline-text { display: inline-block; width: calc(100% - 30px); vertical-align: middle; }
.projects-list .row-open { vertical-align: middle; }

/* ---- stage 3: a world's own sections, docs written in Work, files folders, canvases ---- */
.tree-link.is-list::before, .tree-link.is-docs::before, .tree-link.is-files::before, .tree-link.is-canvas::before { color: var(--quiet); font-size: 11px; width: 14px; text-align: center; flex: 0 0 auto; }
.tree-link.is-list::before { content: '☰'; }
.tree-link.is-docs::before { content: '¶'; }
.tree-link.is-files::before { content: '▤'; }
.tree-link.is-canvas::before { content: '◇'; }
.tree-link.is-add { color: var(--quiet); border: 0; background: transparent; font: inherit; font-size: 12.5px; width: 100%; text-align: left; cursor: pointer; }
.tree-link.is-add:hover { color: var(--foam); background: var(--hover); }
.section-form { display: grid; gap: 6px; margin: 4px 0 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.section-form input, .section-form select { width: 100%; min-height: 30px; padding: 4px 9px; color: var(--foam); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--input); font-size: 12.5px; box-shadow: var(--ring); }
.section-form-actions { display: flex; gap: 6px; }
.section-form .primary-button.small, .section-form .ghost-button.small { min-height: 28px; padding: 3px 10px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-name { flex: 1 1 240px; max-width: 560px; min-height: 40px; padding: 6px 10px; color: var(--foam); border: 1px solid transparent; border-radius: 10px; background: transparent; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.section-name:hover { border-color: var(--line-strong); }
.section-name:focus { border-color: rgba(71, 185, 183, .55); outline: none; background: var(--input); box-shadow: var(--ring); }
.section-remove { margin-left: auto; }
.docs-list, .files-list { padding: 10px 12px 12px; }
.doc-rows { display: grid; gap: 4px; }
.doc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 36px; padding: 4px 10px; color: var(--foam); text-decoration: none; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); box-shadow: var(--edge), 0 1px 2px rgba(0, 0, 0, .22); }
.doc-row:hover { border-color: var(--line-strong); }
.doc-icon { color: var(--quiet); text-align: center; }
.doc-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta, .doc-when { color: var(--quiet); font-size: 11px; white-space: nowrap; }
.doc-empty { margin: 4px 0 8px; }
:root[data-theme="day"] .doc-row { box-shadow: var(--edge), 0 1px 2px rgba(16, 37, 43, .10); }
.section-files { margin-top: 10px; }
.section-file-text { margin: 4px 0 0; color: var(--mist); font-size: 12px; white-space: pre-wrap; }
.section-file-form { margin: 10px 0 0; }
.doc-page { max-width: 920px; }
.doc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.doc-back { text-decoration: none; color: var(--mist); }
.doc-top .danger-button { margin-left: auto; }
.doc-title { width: 100%; margin-bottom: 8px; padding: 8px 10px; color: var(--foam); border: 1px solid transparent; border-radius: 10px; background: transparent; font: inherit; font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.doc-title:hover { border-color: var(--line); }
.doc-title:focus { border-color: rgba(71, 185, 183, .55); outline: none; background: var(--input); box-shadow: var(--ring); }
.doc-about { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px 4px; }
.doc-link { display: inline-flex; align-items: center; gap: 6px; color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.doc-link .inline-select.small { min-width: 160px; font-family: var(--font); letter-spacing: 0; text-transform: none; }
.doc-body { width: 100%; min-height: 360px; padding: 18px 20px; color: var(--foam); border: 1px solid var(--line); border-radius: 14px; background: var(--card); font: inherit; font-size: 15px; line-height: 1.65; resize: vertical; box-shadow: var(--raise), var(--edge); }
.doc-body:focus { outline: none; border-color: rgba(71, 185, 183, .45); }
.list-tag { text-decoration: none; }
/* the "+ Section" form sits in the sections column of the tree, inside the well */
.tree-children > .section-form { grid-column: 2; margin-right: 2px; }

/* ---- the whiteboard: an unbounded board you move around and zoom ---- */
.section-page.is-board { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h) - 40px); }
.board-shell { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 560px; }
.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.board-tools { display: inline-flex; gap: 6px; }
.board-zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.board-zoom-label { min-width: 46px; color: var(--quiet); font-family: var(--mono); font-size: 10px; text-align: center; }
.board-viewport { --bg-x: 0px; --bg-y: 0px; --bg-size: 32px; position: relative; flex: 1 1 auto; min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background-color: var(--well-bg); background-image: radial-gradient(color-mix(in srgb, var(--foam) 14%, transparent) 1px, transparent 1.2px); background-size: var(--bg-size) var(--bg-size); background-position: var(--bg-x) var(--bg-y); box-shadow: var(--well); cursor: grab; touch-action: none; user-select: none; }
.board-viewport.is-panning { cursor: grabbing; }
.board-viewport:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.board-space { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.board-item { --c: var(--gold); position: absolute; display: flex; flex-direction: column; min-width: 80px; min-height: 40px; border-radius: 10px; box-shadow: var(--raise-sm), var(--edge); cursor: grab; }
.board-item.is-lifted { box-shadow: var(--raise), var(--edge); z-index: 5; }
.board-item.is-note { background: color-mix(in srgb, var(--c) 22%, var(--card-2)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.board-item.is-text { background: transparent; border: 1px dashed transparent; box-shadow: none; }
.board-item.is-text:hover, .board-item.is-text:focus-within { border-color: var(--line-strong); }
.board-item.is-task { background: var(--card-2); border: 1px solid var(--line); box-shadow: var(--raise-sm), var(--edge); }
.board-item.is-task.is-done { opacity: .6; }
.board-item.is-image { background: var(--card-2); border: 1px solid var(--line); overflow: hidden; }
.bi-grip { display: flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 4px 0 6px; color: color-mix(in srgb, var(--foam) 55%, transparent); font-size: 11px; opacity: 0; transition: opacity .12s ease; }
.board-item:hover .bi-grip, .board-item:focus-within .bi-grip { opacity: 1; }
.bi-handle { cursor: grab; }
.bi-colors { display: inline-flex; gap: 3px; margin-left: 4px; }
.bi-color { width: 12px; height: 12px; padding: 0; border: 1px solid rgba(0, 0, 0, .25); border-radius: 50%; background: var(--c); cursor: pointer; }
.bi-color.is-on { box-shadow: 0 0 0 2px var(--foam); }
.bi-remove { width: 20px; height: 20px; margin-left: auto; padding: 0; color: inherit; border: 0; border-radius: 50%; background: transparent; font-size: 14px; line-height: 1; cursor: pointer; }
.bi-remove:hover { color: var(--foam); background: rgba(0, 0, 0, .18); }
.bi-text { flex: 1 1 auto; width: 100%; min-height: 0; padding: 2px 10px 10px; color: var(--foam); border: 0; background: transparent; font: inherit; font-size: 14px; line-height: 1.4; resize: none; cursor: text; user-select: text; }
.board-item.is-text .bi-text { font-size: 16px; }
.bi-text:focus { outline: none; }
.bi-text::placeholder { color: color-mix(in srgb, var(--foam) 45%, transparent); }
.bi-task { display: grid; gap: 4px; padding: 0 10px 10px; }
.bi-task-title { padding: 0; color: var(--foam); text-align: left; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.bi-task-title:hover { text-decoration: underline; }
.bi-task small { display: flex; align-items: center; gap: 6px; color: var(--quiet); font-size: 11px; }
.bi-image { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: contain; pointer-events: none; }
.bi-resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-right: 2px solid color-mix(in srgb, var(--foam) 35%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--foam) 35%, transparent); border-radius: 0 0 6px 0; cursor: nwse-resize; opacity: 0; }
.board-item:hover .bi-resize { opacity: 1; }
.board-picker { position: absolute; left: 50%; top: 24px; z-index: 6; width: min(420px, calc(100% - 40px)); display: grid; gap: 10px; padding: 14px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--raise), var(--edge); cursor: default; }
.board-picker .row { display: flex; gap: 8px; }
:root[data-theme="day"] .board-viewport { background-image: radial-gradient(rgba(16, 37, 43, .16) 1px, transparent 1.2px); }

/* ---- docs with pages and formatting ---- */
.doc-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-pages { display: grid; gap: 2px; padding: 10px 8px; border-radius: 12px; background: var(--well-bg); box-shadow: var(--well); }
.doc-pages .rd-label { padding: 0 8px 4px; }
.doc-page-link { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px; color: var(--mist); border-radius: 7px; font-size: 13px; text-decoration: none; }
.doc-page-link:hover { color: var(--foam); background: var(--hover); }
.doc-page-link.is-current { color: var(--foam); background: var(--card-2); box-shadow: var(--raise-sm), var(--edge-strong); }
.doc-sheet { min-width: 0; }
.doc-page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.doc-page-title { flex: 1 1 auto; min-width: 0; padding: 6px 10px; color: var(--foam); border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.doc-page-title:hover { border-color: var(--line); }
.doc-page-title:focus { border-color: rgba(71, 185, 183, .55); outline: none; background: var(--input); box-shadow: var(--ring); }
.doc-toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; margin-bottom: 8px; border-radius: 999px; background: var(--well-bg); box-shadow: var(--well); width: fit-content; }
.doc-tool { min-width: 32px; height: 28px; padding: 0 8px; color: var(--mist); border: 0; border-radius: 999px; background: transparent; font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer; }
.doc-tool:hover { color: var(--foam); background: var(--card-2); box-shadow: var(--raise-sm), var(--edge); }
.doc-editor { min-height: 420px; padding: 22px 26px; color: var(--foam); border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 15px; line-height: 1.65; box-shadow: var(--raise), var(--edge); cursor: text; }
.doc-editor:focus { outline: none; border-color: rgba(71, 185, 183, .45); }
.doc-editor:empty::before { content: attr(data-placeholder); color: var(--quiet); }
.doc-editor p { margin: 0 0 .7em; color: inherit; }
.doc-editor h1 { margin: .4em 0 .3em; font-size: 26px; }
.doc-editor h2 { margin: .6em 0 .3em; font-size: 20px; }
.doc-editor h3 { margin: .6em 0 .3em; font-size: 16px; }
.doc-editor ul, .doc-editor ol { margin: 0 0 .7em; padding-left: 1.4em; }
.doc-editor li { margin: .15em 0; }
.doc-editor blockquote { margin: .6em 0; padding: .2em 0 .2em 1em; color: var(--mist); border-left: 3px solid var(--line-strong); }
.doc-editor a { color: var(--teal); }
.doc-editor hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.doc-editor code, .doc-editor pre { font-family: var(--mono); font-size: 13px; }
.doc-page { max-width: 1100px; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } }

/* ---- files tagged to a client ---- */
.file-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.file-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--quiet); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.file-tag .inline-select.small { min-width: 150px; font-family: var(--font); letter-spacing: 0; text-transform: none; }
.files-list .list-group-head .cw-filter .filter-select.small { min-height: 30px; min-width: 150px; }

/* ===== Glass (owner's pick 10 Nov 2026, route G1 of three drawn 6 Nov): the world's own photograph behind frosted glass
   cards. Glass keeps Night's palette, type and depth; only the surfaces turn to glass and each world brings its own
   photograph (her own world images from Scarlet OS Atlas), under a veil so words stay readable. ===== */
:root[data-theme="glass"] {
  --card: rgba(12, 30, 36, .62); --card-2: rgba(255, 255, 255, .075); --well-bg: rgba(4, 14, 18, .42);
  --raise: 0 24px 60px -26px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .28); --raise-sm: 0 8px 18px -10px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .3);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .16); --edge-strong: inset 0 1px 0 rgba(255, 255, 255, .26); --well: inset 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(0, 0, 0, .2);
  --line: rgba(255, 255, 255, .13); --line-strong: rgba(255, 255, 255, .22); --panel-2: transparent; --hover-strong: rgba(255, 255, 255, .1);
  --quiet: #8fa0a5; --mist: #bcc8c9; --glass-blur: blur(26px) saturate(1.25);
  --world-photo: url(/img/glass/tlis.webp);
}
:root[data-theme="glass"][data-world="la"] { --world-photo: url(/img/glass/la.webp); }
:root[data-theme="glass"][data-world="nl"] { --world-photo: url(/img/glass/nl.webp); }
:root[data-theme="glass"][data-world="e3"] { --world-photo: url(/img/glass/e3.webp); }
:root[data-theme="glass"][data-world="sra"] { --world-photo: url(/img/glass/sra.webp); }
:root[data-theme="glass"][data-world="cws"] { --world-photo: url(/img/glass/cws.webp); }
:root[data-theme="glass"][data-world="everything"] { --world-photo: url(/img/glass/everything.webp); }
/* the html canvas stays dark; the photograph and its veil paint above it, under the page */
:root[data-theme="glass"] body { background: transparent; }
:root[data-theme="glass"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: var(--world-photo) center / cover no-repeat; }
:root[data-theme="glass"] body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 16, 21, .08), rgba(5, 16, 21, .34) 55%, rgba(5, 16, 21, .58)); }
:root[data-theme="glass"] .sidebar, :root[data-theme="glass"] .list-group, :root[data-theme="glass"] .cw-shell, :root[data-theme="glass"] .project-shell, :root[data-theme="glass"] dialog, :root[data-theme="glass"] .toast, :root[data-theme="glass"] .board-column, :root[data-theme="glass"] .empty-route, :root[data-theme="glass"] .projects-list, :root[data-theme="glass"] .doc-sheet, :root[data-theme="glass"] .board-viewport { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: rgba(255, 255, 255, .16); }
:root[data-theme="glass"] .sidebar { background: rgba(10, 26, 31, .5); }
/* the page itself is clear: the cards float straight on the photograph, the top bar is a glass strip */
:root[data-theme="glass"] .app-body { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme="glass"] .topbar { border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-card); background: rgba(12, 30, 36, .55); box-shadow: var(--raise), var(--edge); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
:root[data-theme="glass"] main { padding-top: 18px; }
:root[data-theme="glass"] .ghost-button, :root[data-theme="glass"] .inline-select, :root[data-theme="glass"] .filter-select, :root[data-theme="glass"] .crumb, :root[data-theme="glass"] .inline-date { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
:root[data-theme="glass"] .ghost-button:hover { background: rgba(255, 255, 255, .13); }
:root[data-theme="glass"] .task-row td { background: rgba(255, 255, 255, .07); box-shadow: var(--edge), 0 1px 2px rgba(0, 0, 0, .25); }
:root[data-theme="glass"] .task-row:hover td { background: rgba(255, 255, 255, .12); }
/* Paper set into glass (owner's pick 10 Nov 2026, route P3): where you write is a cream page inside a glass frame, the
   colour of a sticky is a dot in its frame. Paper and ink are Work's own Day paper; inside the paper the tokens turn to Day's. */
:root[data-theme="glass"] { --paper: #f8f4ec; --paper-ink: #221d16; }
:root[data-theme="glass"] .board-item.is-note .bi-text, :root[data-theme="glass"] .board-item.is-task .bi-task, :root[data-theme="glass"] .doc-editor { --foam: var(--paper-ink); --mist: #4d463b; --quiet: #857b6b; --teal: #0e9488; --gold: #b26410; --line-strong: rgba(60, 46, 26, .22); }
:root[data-theme="glass"] .board-item.is-note, :root[data-theme="glass"] .board-item.is-task { padding: 0 6px 6px; background: rgba(12, 30, 36, .58); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
:root[data-theme="glass"] .board-item.is-note .bi-grip { opacity: 1; }
:root[data-theme="glass"] .board-item.is-note .bi-grip::before { content: ''; order: -1; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 4px 0 2px; border-radius: 50%; background: var(--c); }
:root[data-theme="glass"] .board-item.is-note .bi-grip > * { opacity: 0; transition: opacity .12s ease; }
:root[data-theme="glass"] .board-item.is-note:hover .bi-grip > *, :root[data-theme="glass"] .board-item.is-note:focus-within .bi-grip > * { opacity: 1; }
:root[data-theme="glass"] .board-item.is-note .bi-text { padding: 9px 10px; border-radius: 7px; color: var(--paper-ink); background: var(--paper); box-shadow: inset 0 1px 2px rgba(60, 46, 26, .12); }
:root[data-theme="glass"] .board-item.is-note .bi-text::placeholder { color: rgba(34, 29, 22, .45); }
:root[data-theme="glass"] .board-item.is-task { height: auto !important; } /* the frame grows to its page: a wrapped title never spills out of it */
:root[data-theme="glass"] .board-item.is-task .bi-task { margin: 0; padding: 9px 10px; border-radius: 7px; color: var(--paper-ink); background: var(--paper); }
:root[data-theme="glass"] .board-item.is-task .bi-task-title { color: var(--paper-ink); }
:root[data-theme="glass"] .doc-editor { color: var(--paper-ink); background: var(--paper); border: 10px solid rgba(12, 30, 36, .5); outline: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 3px rgba(60, 46, 26, .14), var(--raise); }
/* Everything: each world card is a window onto its own photograph, fading out before the words */
:root[data-theme="glass"] .world-card { background: linear-gradient(180deg, rgba(10, 26, 31, .5) 0, rgba(10, 26, 31, .8) 90px, rgba(10, 26, 31, .93) 170px), var(--wc-photo, none) center / cover no-repeat; }
:root[data-theme="glass"] .world-card[data-world-card="tlis"] { --wc-photo: url(/img/glass/tlis.webp); }
:root[data-theme="glass"] .world-card[data-world-card="la"] { --wc-photo: url(/img/glass/la.webp); }
:root[data-theme="glass"] .world-card[data-world-card="nl"] { --wc-photo: url(/img/glass/nl.webp); }
:root[data-theme="glass"] .world-card[data-world-card="e3"] { --wc-photo: url(/img/glass/e3.webp); }
:root[data-theme="glass"] .world-card[data-world-card="sra"] { --wc-photo: url(/img/glass/sra.webp); }
:root[data-theme="glass"] .world-card[data-world-card="cws"] { --wc-photo: url(/img/glass/cws.webp); }

/* ===== No coloured lines (owner, 10 Nov 2026: stripes "feel like a PowerPoint presentation"), in every look. A category's
   colour is a small dot beside the word that already names it; a board card names its world in a small chip. ===== */
.card-kicker::before, .cw-project-card > .eyebrow::before, .world-card .eyebrow::before, .board-column header h3::before, .eng-lane header strong::before, .field-lane-head strong::before, .stage-tools-card header small::before, .client-card > small::before { content: ''; display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--stage, var(--teal)); vertical-align: 1px; }
.world-card .eyebrow::before { background: var(--world); }
.client-card > small::before { background: var(--kind, var(--teal)); }
.board-column header h3::before { width: 8px; height: 8px; margin-right: 8px; }
.world-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 8px 2px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--mist); background: var(--card-2); font: 700 9px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.world-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--w); }

/* A line to type into inside a narrow column (a stage, a step): the title takes the full width, the buttons sit under it */
.stage-add .quick-add-block, .stage-actions .quick-add-block { flex-wrap: wrap; }
.stage-add .quick-add-block input, .stage-actions .quick-add-block input { flex: 1 1 100%; }

/* ===== The map (stage 4, owner's pick 10 Nov 2026: M1 Constellation). Every world a photo tile on threads; inside a
   world, clients on threads with their projects beside them and each task a dot by status. Work's own tokens in every
   look; the threads are neutral, never coloured; a category is a dot. ===== */
.cst-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.cst-main { min-width: 0; }
.cst-bar { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 10px; }
.cst-where { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.cst-zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 4px 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: var(--raise-sm), var(--edge); color: var(--mist); font-size: 12px; }
.cst-zoom b { min-width: 42px; font: 700 11px var(--mono); color: var(--foam); text-align: center; }
.cst-zoom button { min-width: 30px; min-height: 28px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--foam); font: 600 13px var(--font); cursor: pointer; }
.cst-zoom button:hover { background: var(--hover-strong); }
.cst-viewport { position: relative; height: min(72vh, 680px); min-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--well-bg); box-shadow: var(--well); }
.cst-sizer { position: relative; min-width: 100%; }
.cst-canvas { position: relative; transform-origin: 0 0; }
.cst-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cst-links path { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.cst-links path.is-dashed { stroke-dasharray: 4 5; }
.cst-links path.is-lit { stroke: var(--foam); opacity: .6; stroke-width: 1.8; }
.cst-node { text-decoration: none; color: var(--foam); }
.cst-node:focus-visible { outline: 2px solid var(--foam); outline-offset: 3px; }
.cst-canvas.is-everything .cst-node { position: absolute; transform: translate(-50%, -50%); }
/* a world tile: its own photograph, the words on a fade at the foot */
.cst-world { display: block; width: 220px; height: 140px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; background: #10252b var(--ph) center / cover no-repeat; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25); color: #fff; transition: filter .15s ease, box-shadow .15s ease; }
.cst-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(5, 16, 21, .84)); }
.cst-world .t { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; }
.cst-world strong { display: block; font-size: 15px; line-height: 1.2; color: #fff; }
.cst-world small { display: block; margin-top: 2px; color: #d6e0e0; font-size: 11px; }
.cst-world:hover { filter: brightness(1.08); }
.cst-world[aria-current="true"] { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 3px; }
.cst-world.is-static { position: relative; width: 240px; height: 150px; }
.cst-hub, .cst-card, .cst-proj { display: block; border: 1px solid var(--line); background: var(--card); box-shadow: var(--raise-sm), var(--edge); }
.cst-hub { min-width: 160px; padding: 12px 14px; border-radius: 12px; }
.cst-hub strong, .cst-card strong { display: block; font-size: 13.5px; line-height: 1.25; }
.cst-hub small, .cst-card small { display: block; margin-top: 3px; color: var(--mist); font-size: 11px; }
.cst-hub[aria-current="true"], .cst-card[aria-current="true"], .cst-proj[aria-current="true"] { border-color: var(--foam); box-shadow: var(--raise), 0 0 0 1px var(--foam); }
.cst-kick { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.cst-kick::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--teal)); }
/* inside a world: the world tile, then a row per client with its projects beside it */
.cst-canvas.is-world { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 90px; width: 1080px; padding: 24px; }
.cst-wcol { display: flex; align-items: center; }
.cst-canvas.is-tall .cst-wcol { align-items: flex-start; }
.cst-rows { display: grid; gap: 14px; align-content: start; }
.cst-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 60px; align-items: center; }
.cst-card { position: relative; padding: 10px 12px; border-radius: 12px; }
.cst-projs { display: flex; flex-wrap: wrap; gap: 10px; }
.cst-proj { position: relative; width: 196px; padding: 8px 10px; border-radius: 10px; background: var(--card-2); }
.cst-proj strong { display: block; font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
.cst-proj small { display: block; margin-top: 2px; color: var(--mist); font-size: 10.5px; }
.cst-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.cst-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(5, 16, 21, .25); }
.cst-dots em { font: 700 9px var(--mono); font-style: normal; color: var(--mist); }
.cst-none { display: block; margin-top: 5px; color: var(--quiet); font: 700 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cst-row.is-loose .cst-card { border-style: dashed; }
.cst-empty { display: grid; gap: 4px; align-content: center; padding: 20px; color: var(--mist); }
/* the side panel: what is selected on the map */
.cst-panel { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--raise), var(--edge); }
.cst-ph { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 124px; padding: 10px 12px; overflow: hidden; border-radius: 12px; background: #10252b var(--ph) center / cover no-repeat; }
.cst-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(5, 16, 21, .84)); }
.cst-ph small, .cst-ph strong { position: relative; z-index: 1; color: #fff; }
.cst-ph small { font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #d6e0e0; }
.cst-ph strong { font-size: 18px; line-height: 1.2; }
.cst-purpose { margin: 0; color: var(--mist); font-size: 12.5px; }
.cst-hint { margin: 0; color: var(--quiet); font-size: 12px; }
.cst-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cst-stats div { padding: 9px 10px; border-radius: 10px; background: var(--well-bg); box-shadow: var(--well); }
.cst-stats small { display: block; font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.cst-stats b { font-size: 20px; color: var(--foam); }
.cst-stats em { margin-left: 4px; font-style: normal; font-size: 11px; color: var(--quiet); }
.cst-stats .cst-small { font-size: 13px; }
.cst-next, .cst-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cst-next > *, .cst-list > * { min-width: 0; }
.cst-next p { margin: 0; font-size: 12px; }
.cst-next button, .cst-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 4px; border: 0; border-radius: 6px; background: none; color: var(--foam); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.cst-next button:hover, .cst-list button:hover, .cst-list a:hover { background: var(--hover-strong); }
.cst-next i, .cst-list i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cst-next span, .cst-list button span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-next time, .cst-list time { flex: 0 0 auto; color: var(--quiet); font-size: 11px; }
.cst-list a { display: block; padding: 5px 4px; border-radius: 6px; color: var(--foam); text-decoration: none; }
.cst-list a strong { display: block; font-size: 12.5px; }
.cst-list a small { color: var(--mist); font-size: 11px; }
.cst-acts { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-theme="day"] .cst-dots i { box-shadow: 0 0 0 2px #ffffff; }
/* Glass: the field is clear over the world's photograph; the cards and the panel are frosted */
:root[data-theme="glass"] .cst-viewport { background: rgba(4, 14, 18, .16); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
:root[data-theme="glass"] .cst-hub, :root[data-theme="glass"] .cst-card, :root[data-theme="glass"] .cst-panel, :root[data-theme="glass"] .cst-zoom { background: rgba(12, 30, 36, .66); border-color: rgba(255, 255, 255, .17); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
:root[data-theme="glass"] .cst-proj { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .15); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-theme="glass"] .cst-links path { stroke: rgba(255, 255, 255, .34); }
:root[data-theme="glass"] .cst-links path.is-lit { stroke: rgba(255, 255, 255, .8); opacity: 1; }
/* a phone stacks the map: tiles in two columns, each client with its projects under it; nothing to zoom */
@media (max-width: 1100px) { .cst-stage { grid-template-columns: 1fr; } .cst-panel { position: static; } }
@media (max-width: 760px) {
  .cst-zoom, .cst-links { display: none; }
  .cst-viewport { height: auto; min-height: 0; overflow: visible; }
  .cst-sizer { width: auto !important; height: auto !important; }
  .cst-canvas { width: auto !important; height: auto !important; transform: none !important; }
  .cst-canvas.is-everything { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
  .cst-canvas.is-everything .cst-node { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; }
  .cst-canvas.is-everything .cst-hub { grid-column: 1 / -1; }
  .cst-canvas.is-world { display: block; padding: 10px; }
  .cst-wcol { margin-bottom: 12px; }
  .cst-world.is-static { width: 100%; }
  .cst-row { grid-template-columns: 1fr; row-gap: 8px; }
  .cst-projs { padding-left: 14px; }
  .cst-proj { flex: 1 1 140px; width: auto; }
}

/* Day, all white (owner's pick 10 Nov 2026, route W2): the page card goes, as in Glass; the cards sit straight on the white
   floor, apart by their soft shadow and hairline; the top bar is its own white strip */
:root[data-theme="day"] .app-body { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme="day"] .topbar { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--raise-sm), var(--edge); }
:root[data-theme="day"] main { padding-top: 18px; }

/* Sticky notes (owner, 10 Nov 2026): no pastels; colour is deliberate and at its deepest, and never that brown. Night and
   Glass keep their accents; in Day each note is a deep-colour frame around a white page you write on (route N3). The
   deep gold went brown, so the gold note is a deep orange there and the orange note a deep red. */
:root { --note-gold: var(--gold); --note-teal: var(--teal); --note-orange: var(--orange); --note-plum: var(--plum); --note-rose: var(--rose); --note-blue: #75a8d8; --note-quiet: var(--quiet); }
:root[data-theme="day"] { --note-gold: #c4500f; --note-teal: #0b6f68; --note-orange: #a8262c; --note-plum: #643a92; --note-rose: #9c2c5c; --note-blue: #22548a; --note-quiet: #3f5257; }
:root[data-theme="day"] .board-item.is-note { padding: 0 6px 6px; background: var(--c); border: 1px solid transparent; box-shadow: 0 14px 28px -16px rgba(16, 37, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
:root[data-theme="day"] .board-item.is-note .bi-grip { color: rgba(255, 255, 255, .78); }
:root[data-theme="day"] .board-item.is-note .bi-remove:hover { color: #fff; background: rgba(0, 0, 0, .2); }
:root[data-theme="day"] .board-item.is-note .bi-color { border-color: rgba(255, 255, 255, .7); }
:root[data-theme="day"] .board-item.is-note .bi-color.is-on { box-shadow: 0 0 0 2px #fff; }
:root[data-theme="day"] .board-item.is-note .bi-text { padding: 9px 10px; border-radius: 7px; color: #10252b; background: #ffffff; box-shadow: inset 0 1px 2px rgba(16, 37, 43, .12); }
:root[data-theme="day"] .board-item.is-note .bi-resize { border-color: rgba(255, 255, 255, .6); }

/* ===== Sidebar levels (owner's pick 10 Nov 2026, route S2; the principle from her ClickUp reference, in Work's own
   material). Each world has a badge of its own photograph; a thin neutral guide line ties its pages to it; every page
   names what it is with a quiet line icon; a group's folder is its fold. No colour is added: the line is the plain line. ===== */
:root { --sidebar-w: 262px; }
.tree-world { margin-top: 10px; }
.tree-world-row { grid-template-columns: 14px minmax(0, 1fr); }
.tree-world-row .tree-fold { width: 14px; }
.tree-link.world { gap: 9px; padding-left: 6px; font-size: 14px; }
.tree-badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: #10252b var(--wp) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 0, 0, .3); }
.tree-children { position: relative; grid-template-columns: 0 minmax(0, 1fr); padding-left: 34px; margin-top: 2px; }
.tree-children::before { content: ''; position: absolute; left: 30.5px; top: 0; bottom: 10px; width: 1px; background: var(--line-strong); }
.tree-children > .tree-row { grid-column: 2; }
.tree-children > .tree-link, .tree-children > .tree-row > .tree-link { gap: 7px; padding-left: 6px; }
.tree-link.is-list::before, .tree-link.is-docs::before, .tree-link.is-files::before, .tree-link.is-canvas::before { content: none; }
.tree-ico { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; color: var(--quiet); }
.tree-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tree-link:hover .tree-ico, .tree-link[aria-current="page"] .tree-ico { color: var(--foam); }
/* a group (Projects, Engagements): its folder is the fold; on hover or focus the folder turns into the arrow */
.tree-row.is-group-row { position: relative; display: block; }
.tree-row.is-group-row > .tree-link { padding-left: 29px; }
.tree-fold.is-folder { position: absolute; left: 3px; top: 50%; z-index: 1; display: grid; width: 22px; height: 24px; place-items: center; transform: translateY(-50%); color: var(--quiet); }
.tree-fold.is-folder > span { grid-area: 1 / 1; display: grid; transition: opacity .12s ease; }
.tree-fold.is-folder .tf-arrow { opacity: 0; }
.tree-row.is-group-row:hover .tf-folder, .tree-fold.is-folder:focus-visible .tf-folder { opacity: 0; }
.tree-row.is-group-row:hover .tf-arrow, .tree-fold.is-folder:focus-visible .tf-arrow { opacity: 1; }
.tree-fold.is-folder:hover { color: var(--foam); }
/* the pages inside a group, on their own short line under the folder */
.tree-children > .tree-link.sub { position: relative; padding-left: 21px; }
.tree-link.sub::before { content: none; }
.tree-link.sub::after { content: ''; position: absolute; left: 13.5px; top: -1px; bottom: 0; width: 1px; background: var(--line-strong); }
.tree-link.sub .tree-ico { width: 13px; }
.tree-link.sub .tree-ico svg { width: 12.5px; height: 12.5px; }

/* World cards line up across a row (owner, 12 Nov 2026): each card spans the same four rows of the grid (head, purpose,
   counts, money), so a provisional-purpose note in one card moves the counts of every card in that row together. */
.world-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
.world-purpose-block { display: grid; gap: 12px; align-content: start; }

/* Night: each world card carries its own photograph quietly through the whole card, under the card's own colour, so it
   reads as a texture and never takes over (owner's pick P2, 12 Nov 2026). Small copies (760px) keep the page quick.
   Day stays plain white (a photo under white turns pastel); Glass keeps its own photo cards. */
.world-card[data-world-card="tlis"] { --wc-card: url(/img/glass/card/tlis.webp); }
.world-card[data-world-card="la"] { --wc-card: url(/img/glass/card/la.webp); }
.world-card[data-world-card="nl"] { --wc-card: url(/img/glass/card/nl.webp); }
.world-card[data-world-card="e3"] { --wc-card: url(/img/glass/card/e3.webp); }
.world-card[data-world-card="sra"] { --wc-card: url(/img/glass/card/sra.webp); }
.world-card[data-world-card="cws"] { --wc-card: url(/img/glass/card/cws.webp); }
:root:not([data-theme="day"]):not([data-theme="glass"]) .world-card { background: linear-gradient(180deg, rgba(16, 37, 43, .8), rgba(16, 37, 43, .9)), var(--wc-card, none) center / cover no-repeat; }