/* ---------- tokens (reference dataviz palette, light/dark selected) ---------- * Theme is resolved by JS (system preference or an explicit user choice) into * data-theme="light"|"dark" on , set synchronously in a head script to * avoid a flash of the wrong theme. :root is the light default so the app * still renders correctly if that script fails for any reason. */ :root, :root[data-theme="light"] { color-scheme: light; --page: #f9f9f7; --surface-1: #fcfcfb; --text-primary: #0b0b0b; --text-secondary: #52514e; --muted: #898781; --grid: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --accent: #2a78d6; --accent-soft: #cde2fb; --danger: #d03b3b; --chip-mid: #f0efec; --shadow: 0 4px 18px rgba(11,11,11,0.08); } :root[data-theme="dark"] { color-scheme: dark; --page: #0d0d0d; --surface-1: #1a1a19; --text-primary: #ffffff; --text-secondary: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10); --accent: #3987e5; --accent-soft: #10315a; --danger: #e66767; --chip-mid: #383835; --shadow: 0 4px 18px rgba(0,0,0,0.45); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--page); color: var(--text-primary); display: flex; flex-direction: column; overflow: hidden; } /* ---------- header ---------- */ #topbar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--surface-1); flex-wrap: wrap; z-index: 20; } .brand h1 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: -0.01em; } .brand-sub { font-size: 11.5px; color: var(--muted); } .tabs { display: flex; gap: 2px; background: var(--page); border: 1px solid var(--border); border-radius: 9px; padding: 3px; } .tab { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; padding: 5px 13px; border-radius: 6px; cursor: pointer; } .tab:hover { color: var(--text-primary); } .tab.active { background: var(--surface-1); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(11,11,11,0.12); } .controls { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; } #search { font: inherit; font-size: 13px; padding: 6px 10px; width: 200px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); color: var(--text-primary); } #search:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .dropdown { position: relative; } .dd-btn { font: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--page); color: var(--text-primary); } .dd-btn:hover { border-color: var(--baseline); } .dd-btn.ghost { color: var(--muted); } .theme-toggle { font: inherit; font-size: 13px; padding: 6px 11px; cursor: pointer; white-space: nowrap; border: 1px solid var(--border); border-radius: 8px; background: var(--page); color: var(--text-primary); } .theme-toggle:hover { border-color: var(--baseline); } .dd-count { color: var(--accent); font-weight: 650; } .dd-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 250px; max-height: 62vh; overflow-y: auto; z-index: 50; } .dd-menu.open { display: block; } .dd-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-primary); user-select: none; } .dd-item:hover { background: var(--page); } .dd-item input { accent-color: var(--accent); margin: 0; } .dd-item .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } .dd-item .n { color: var(--muted); margin-left: auto; font-size: 11.5px; } /* ---------- advanced filters ---------- */ .dd-menu.wide { min-width: 380px; } .adv-sec { padding: 4px 4px 8px; border-bottom: 1px solid var(--grid); } .adv-sec:last-child { border-bottom: 0; } .adv-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 650; padding: 6px 4px 4px; } .adv-states { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 4px; } .st-chip.xs { width: 30px; padding: 3px 0; font-size: 10px; } .rulebuild { display: flex; gap: 6px; padding: 2px 4px; } .rulebuild select, .rulebuild input { font: inherit; font-size: 12px; padding: 5px 7px; color: var(--text-primary); background: var(--page); border: 1px solid var(--border); border-radius: 7px; min-width: 0; } .rulebuild select { flex: 0 0 42%; } .rulebuild input { flex: 1; } .adv-hint { font-size: 10.5px; color: var(--muted); padding: 5px 4px 2px; line-height: 1.4; } #chipbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 18px; background: var(--surface-1); border-bottom: 1px solid var(--border); font-size: 11.5px; } #chipbar[hidden] { display: none; } .chip { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 4px 2px 9px; color: var(--text-primary); } .chip button { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 10px; padding: 1px 4px; border-radius: 50%; } .chip button:hover { color: var(--danger); } .chip-n { color: var(--muted); font-weight: 650; margin-right: 4px; } .chip-clear { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: 11.5px; } .chip-clear:hover { text-decoration: underline; } /* ---------- overview (root page) ---------- */ .ovwrap { padding: 22px 26px 40px; max-width: 1180px; margin: 0 auto; } .ov-hero h2 { font-size: 21px; margin: 0 0 8px; letter-spacing: -0.01em; } .ov-thesis { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); max-width: 88ch; margin: 0 0 14px; } .ov-thesis b { color: var(--text-primary); } .ov-band { height: 16px; margin: 0 0 6px; } .ov-bandlbl { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-secondary); } .ov-bandlbl span[data-band] { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .ov-bandlbl span[data-band]:hover { color: var(--text-primary); } .ov-bandlbl .swatch { width: 9px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border); } .ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 20px; } .ov-grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ov-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .ov-card h3 { margin: 0 0 8px; font-size: 13.5px; } .ov-more { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: none; } .ov-more:hover { text-decoration: underline; } .ov-watch { padding: 7px 0; border-bottom: 1px solid var(--grid); font-size: 12.5px; } .ov-watch:last-of-type { border-bottom: 0; } .ov-watch .cz-chip { margin-left: 8px; font-size: 11px; } .ov-watch p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.45; } .ov-staterow { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; cursor: pointer; } .ov-staterow:hover .ov-st { color: var(--accent); } .ov-st { width: 116px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-statebar { flex: 1; height: 11px; background: var(--chip-mid); border-radius: 4px; overflow: hidden; } .ov-statebar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .ov-stateval { width: 46px; flex: none; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; } .ov-insight { display: flex; gap: 10px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .ov-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .ov-insight p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); } .ov-insight b { color: var(--text-primary); } .ov-ctas { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; } /* ---------- layout ---------- */ #main { flex: 1; display: flex; min-height: 0; position: relative; } #view { flex: 1; min-width: 0; position: relative; overflow: hidden; } #view.scroll { overflow: auto; } /* ---------- drawer ---------- */ #drawer { width: 400px; flex: none; background: var(--surface-1); border-left: 1px solid var(--border); overflow-y: auto; padding: 0; transition: margin-right 0.22s ease; } #drawer.closed { margin-right: -400px; visibility: hidden; } .drawer-head { position: sticky; top: 0; background: var(--surface-1); padding: 16px 18px 10px; border-bottom: 1px solid var(--border); z-index: 2; } .drawer-close { position: absolute; top: 12px; right: 12px; border: 0; background: var(--page); color: var(--muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 14px; } .drawer-close:hover { color: var(--text-primary); } .drawer-title { font-size: 16.5px; font-weight: 700; margin: 0 26px 6px 0; line-height: 1.25; } .drawer-badges { display: flex; gap: 6px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2.5px 8px; border-radius: 999px; background: var(--page); border: 1px solid var(--border); color: var(--text-secondary); } .badge .swatch { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border); } .badge.tier { font-weight: 650; border-color: transparent; color: #fff; } .badge.tier-1 { background: var(--accent); } .badge.tier-2 { background: #256abf; } .badge.tier-3 { background: #6e6d68; } .badge.tier-4 { background: #898781; } .badge.tier-watch { background: var(--danger); } .drawer-body { padding: 6px 18px 26px; } .dsec { margin-top: 14px; } .dsec h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 6px; font-weight: 650; border-bottom: 1px solid var(--grid); padding-bottom: 4px; } .kv { display: grid; grid-template-columns: 118px 1fr; gap: 4px 10px; font-size: 12.5px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--text-primary); } .prose { font-size: 12.5px; line-height: 1.5; color: var(--text-primary); margin: 0; } .prose + .prose { margin-top: 6px; } .prose .lbl { color: var(--muted); } .rel-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; } .rel-list li { padding: 4px 0; border-bottom: 1px solid var(--grid); display: flex; gap: 7px; align-items: baseline; } .rel-list li:last-child { border-bottom: 0; } .rel-type { font-size: 10.5px; color: var(--muted); white-space: nowrap; } a.nodelink { color: var(--accent); text-decoration: none; cursor: pointer; } a.nodelink:hover { text-decoration: underline; } /* ---------- chips (CZ intensity: color + always a label) ---------- */ .cz-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .cz-chip .dot { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border); flex: none; } /* ---------- view chrome ---------- */ .viewbar { position: absolute; top: 10px; left: 12px; z-index: 10; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 24px); } .viewbar .vb-btn { font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-1); color: var(--text-secondary); } .viewbar .vb-btn:hover { color: var(--text-primary); } .viewbar .vb-btn.on { color: var(--text-primary); border-color: var(--accent); background: var(--accent-soft); } .legend { position: absolute; bottom: 12px; left: 12px; z-index: 10; background: color-mix(in srgb, var(--surface-1) 88%, transparent); backdrop-filter: blur(3px); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 11.5px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; max-width: 320px; } .legend .lg-title { font-weight: 650; color: var(--text-primary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; } .legend .lg-row { display: flex; align-items: center; gap: 7px; } .legend .lg-row .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } .legend .lg-row .line { width: 18px; height: 0; border-top: 2px solid; flex: none; } .legend.right { left: auto; right: 84px; } /* clear the assistant button */ .hint { position: absolute; bottom: 12px; right: 84px; font-size: 11px; color: var(--muted); z-index: 5; background: color-mix(in srgb, var(--surface-1) 80%, transparent); padding: 3px 8px; border-radius: 6px; } /* ---------- tooltip ---------- */ #tooltip { position: fixed; pointer-events: none; z-index: 100; background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow); padding: 8px 11px; font-size: 12px; max-width: 300px; color: var(--text-primary); display: none; line-height: 1.4; } #tooltip .tt-name { font-weight: 650; margin-bottom: 2px; } #tooltip .tt-sub { color: var(--muted); font-size: 11px; } #tooltip .tt-row { color: var(--text-secondary); font-size: 11.5px; } /* ---------- svg ---------- */ svg { display: block; } svg text { font-family: inherit; } .mm-label { fill: var(--text-primary); font-size: 11.5px; cursor: pointer; } .mm-label.dim { fill-opacity: 0.25; } .mm-label.hit { font-weight: 700; } .mm-count { fill: var(--muted); font-size: 10px; } .mm-link { fill: none; stroke: var(--baseline); stroke-opacity: 0.55; stroke-width: 1.2px; } .net-label { fill: var(--text-primary); font-size: 10.5px; paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; } /* ---------- table view ---------- */ .tablewrap { padding: 14px 18px 30px; } .tstats { font-size: 12px; color: var(--muted); margin: 2px 0 10px; } table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } table.data th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; padding: 9px 10px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--border); background: var(--surface-1); position: sticky; top: 0; white-space: nowrap; } table.data th:hover { color: var(--text-primary); } table.data th .arrow { color: var(--accent); } table.data td { padding: 7px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; } table.data tbody tr { cursor: pointer; } table.data tbody tr:hover { background: var(--page); } table.data tbody tr.sel { background: var(--accent-soft); } td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .fam-cell { display: inline-flex; align-items: center; gap: 6px; } .fam-cell .swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } /* ---------- map view ---------- */ .map-side { position: absolute; top: 10px; right: 12px; width: 270px; max-height: calc(100% - 180px); overflow-y: auto; z-index: 10; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 12.5px; } .map-side h3 { margin: 0 0 4px; font-size: 13.5px; } .map-side .ms-sub { color: var(--muted); font-size: 11.5px; margin-bottom: 8px; } .map-side ul { list-style: none; margin: 0; padding: 0; } .map-side li { padding: 4px 0; border-bottom: 1px solid var(--grid); } .map-side li:last-child { border-bottom: 0; } .state-tile { cursor: pointer; } .state-tile .tile-base { stroke: var(--surface-1); stroke-width: 2px; } .state-tile.sel .tile-base { stroke: var(--text-primary); stroke-width: 2px; fill-opacity: 1 !important; } .state-tile .col3d { pointer-events: none; } .state-abbr { font-size: 11px; font-weight: 650; pointer-events: none; paint-order: stroke; stroke: var(--surface-1); stroke-width: 2.5px; stroke-linejoin: round; } .map-arc { fill: none; stroke: var(--accent); stroke-opacity: 0.5; stroke-linecap: round; } .ms-mix { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; margin: 4px 0 8px; } .ms-mix i { display: block; min-width: 2px; } .ms-fams { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; } .ms-fams .swatch { width: 8px; height: 8px; border-radius: 2px; } .ms-links { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; } .ms-links .lbl { color: var(--muted); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.06em; font-weight: 650; margin-right: 4px; } .ms-link { display: inline-block; background: var(--page); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; margin: 1px 0; font-variant-numeric: tabular-nums; } .ms-jump { cursor: pointer; } .ms-jump:hover { background: var(--page); } .ramp-scale { display: flex; align-items: center; gap: 6px; } .ramp-scale .cells { display: flex; } .ramp-scale .cells i { width: 17px; height: 10px; display: block; } .ramp-scale .cells i:first-child { border-radius: 3px 0 0 3px; } .ramp-scale .cells i:last-child { border-radius: 0 3px 3px 0; } /* ---------- families view ---------- */ .famwrap { padding: 16px 20px 34px; max-width: 1200px; margin: 0 auto; } .famgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; } .famcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; } .famcard:hover { border-color: var(--baseline); } .famcard h3 { margin: 0 0 2px; font-size: 14px; display: flex; align-items: center; gap: 8px; } .famcard h3 .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } .famcard .fc-stats { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; } .famcard .fc-stats b { color: var(--text-primary); font-weight: 650; } .famcard p { font-size: 12px; line-height: 1.45; color: var(--text-secondary); margin: 0; } .gloss { margin-top: 26px; } .gloss h2 { font-size: 15px; } .gloss dl { display: grid; grid-template-columns: 210px 1fr; gap: 8px 16px; font-size: 12.5px; } .gloss dt { font-weight: 650; } .gloss dd { margin: 0; color: var(--text-secondary); line-height: 1.45; } .famwrap h2.section { font-size: 15px; margin: 4px 0 10px; } /* ---------- trip buttons & badge ---------- */ .trip-btn { font: inherit; font-size: 11px; padding: 2.5px 8px; cursor: pointer; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; background: var(--page); color: var(--accent); font-weight: 600; flex: none; } .trip-btn:hover { border-color: var(--accent); } .trip-btn.in-trip { background: var(--accent); color: #fff; border-color: var(--accent); } .trip-badge { display: inline-block; min-width: 16px; text-align: center; font-size: 10.5px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 5px; margin-left: 3px; } /* ---------- callouts (drawer engagement playbook) ---------- */ .callout { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: 8px 10px; margin-top: 8px; } .callout b { font-size: 11.5px; display: block; margin-bottom: 3px; } .callout.good { border-left-color: #0ca30c; } .callout.good b { color: #0ca30c; } .callout.warn { border-left-color: #d03b3b; } .callout.warn b { color: var(--danger); } /* ---------- briefing view ---------- */ .briefwrap { padding: 20px 24px 40px; max-width: 1150px; margin: 0 auto; } .brief-hero h2 { font-size: 20px; margin: 0 0 6px; } .prose.big { font-size: 14px; max-width: 78ch; color: var(--text-secondary); } .tiles { display: flex; gap: 12px; margin: 16px 0 8px; flex-wrap: wrap; } .tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; min-width: 140px; } .tile-v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; } .tile-l { font-size: 11.5px; color: var(--muted); } .brief-sec { margin-top: 26px; } .brief-sec h3 { font-size: 15px; margin: 0 0 6px; } .bandbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 12px 0; gap: 2px; } .band-seg { display: block; cursor: pointer; } .band-seg:hover { opacity: 0.85; } .bandcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .bandcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; } .bandcard:hover { border-color: var(--baseline); } .bandcard-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; flex-wrap: wrap; } .bandcard-h .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } .bandcard-n { color: var(--muted); font-size: 11px; margin-left: auto; } .bandcard p { font-size: 11.5px; color: var(--text-secondary); margin: 6px 0 0; line-height: 1.45; } .brief-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 980px) { .brief-cols { grid-template-columns: 1fr; } } .prio-list { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: prio; } .prio-list li { display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--grid); font-size: 12.5px; counter-increment: prio; } .prio-list li::before { content: counter(prio); color: var(--muted); font-size: 10.5px; min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; } .prio-list li:last-child { border-bottom: 0; } .prio-name { flex: 1; min-width: 0; } .prio-sub { display: block; color: var(--muted); font-size: 11px; } .watch-item { margin-top: 8px; font-size: 12px; } .watch-item b { font-size: 12px; } .watch-item p { margin: 2px 0 0; color: var(--text-secondary); line-height: 1.45; } table.data.mini td { font-size: 12px; padding: 6px 9px; } .howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; } .howto b { color: var(--text-primary); } .caveats { margin-top: 16px; font-size: 12px; color: var(--muted); } .caveats summary { cursor: pointer; } .caveats ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; } /* ---------- trip planner ---------- */ .tripwrap { display: flex; gap: 0; min-height: 100%; align-items: stretch; } .trip-side { width: 330px; flex: none; border-right: 1px solid var(--border); padding: 18px 16px 34px; background: var(--surface-1); } .trip-side h3 { font-size: 13px; margin: 0 0 4px; } .goal-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .goal { font: inherit; text-align: left; padding: 8px 11px; cursor: pointer; border: 1px solid var(--border); border-radius: 10px; background: var(--page); color: var(--text-primary); } .goal:hover { border-color: var(--baseline); } .goal.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .goal b { display: block; font-size: 12.5px; } .goal span { display: block; font-size: 11px; color: var(--text-secondary); line-height: 1.35; margin-top: 1px; } .proposal-sec { border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin: 14px 0 6px; background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface-1)); } .prop-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 6px; } .prop-head h3 { font-size: 13.5px; margin: 0 0 2px; } .size-picker { display: inline-flex; gap: 3px; margin-right: 6px; } .prop { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-top: 8px; } .prop-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prop-h .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } .prop-h .trip-btn { margin-left: auto; } .prop-talk { font-size: 12px; margin-top: 5px; line-height: 1.4; } .prop-talk .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 650; margin-right: 6px; } .why-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .why { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--page); border: 1px solid var(--border); color: var(--text-secondary); } .state-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .st-chip { font: inherit; font-size: 10.5px; font-weight: 600; width: 34px; padding: 4px 0; text-align: center; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--page); color: var(--text-secondary); } .st-chip:hover { border-color: var(--baseline); color: var(--text-primary); } .st-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .trip-main { flex: 1; min-width: 0; padding: 18px 22px 40px; } .trip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .trip-head h2 { font-size: 18px; margin: 0; } .trip-actions { display: flex; gap: 8px; } .trip-actions button:disabled { opacity: 0.45; cursor: default; } .trip-state { font-size: 14px; margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } .trip-state .prio-sub { display: inline; margin-left: 8px; } .stop { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .stop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .stop-head .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } .stop-name { font-weight: 650; font-size: 13.5px; color: var(--text-primary) !important; } .stop-remove { margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; } .stop-remove:hover { color: var(--danger); background: var(--page); } .stop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 9px; font-size: 12px; line-height: 1.45; } @media (max-width: 1100px) { .stop-grid { grid-template-columns: 1fr; } } .stop-grid .lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 650; margin-bottom: 1px; } .stop-grid .good .lbl { color: #0ca30c; } .stop-grid .warn .lbl { color: var(--danger); } .stop-note { width: 100%; margin-top: 10px; font: inherit; font-size: 12px; color: var(--text-primary); background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; resize: vertical; min-height: 34px; } .stop-note:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .ms-row { display: flex; align-items: center; gap: 8px; } .ms-row > span:first-child { flex: 1; min-width: 0; } @media (max-width: 900px) { .tripwrap { flex-direction: column; } .trip-side { width: auto; border-right: 0; border-bottom: 1px solid var(--border); } } /* ---------- trip health check ---------- */ .health { border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; margin: 12px 0 4px; background: var(--surface-1); font-size: 12px; display: flex; flex-direction: column; gap: 4px; } .health .lg-title { font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 2px; } .hc.ok { color: var(--text-secondary); } .hc.warn { color: var(--danger); } .hc.miss { color: var(--muted); } /* ---------- stop reorder tools ---------- */ .stop-tools { margin-left: auto; display: flex; gap: 2px; } .stop-remove { margin-left: 0; } .stop-move { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 6px; } .stop-move:hover { color: var(--text-primary); background: var(--page); } /* ---------- family × stance chart (briefing) ---------- */ .famstance { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } .fs-row { display: flex; align-items: center; gap: 10px; cursor: pointer; } .fs-row:hover .fs-label { color: var(--accent); } .fs-label { width: 250px; flex: none; font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-label .swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--border); } .fs-n { color: var(--muted); font-size: 10.5px; margin-left: 2px; } .fs-bar { flex: 1; display: flex; height: 13px; border-radius: 4px; overflow: hidden; gap: 2px; } .fs-bar i { display: block; min-width: 3px; } @media (max-width: 800px) { .fs-label { width: 150px; } } /* ---------- glossary terms & help notes ---------- */ .gl { border-bottom: 1px dotted var(--accent); cursor: help; } .help-i { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; flex: none; font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: 0; text-transform: none; line-height: 1; vertical-align: 1px; margin-left: 4px; background: var(--chip-mid); color: var(--text-secondary); cursor: help; user-select: none; } .help-i:hover { background: var(--accent); color: #fff; } /* ---------- print brief ---------- */ #print-brief { display: none; } @media print { body.printing #topbar, body.printing #main, body.printing #tooltip { display: none !important; } body.printing { overflow: visible; height: auto; } body.printing #print-brief { display: block; padding: 0; color: #000; background: #fff; font-size: 11.5pt; line-height: 1.45; } #print-brief h1 { font-size: 17pt; margin: 0 0 4pt; } #print-brief .pb-meta { color: #444; font-size: 9.5pt; margin: 0 0 12pt; } #print-brief h2 { font-size: 13.5pt; border-bottom: 1pt solid #999; padding-bottom: 2pt; margin: 14pt 0 6pt; } #print-brief .pb-stop { margin-bottom: 10pt; break-inside: avoid; } #print-brief h3 { font-size: 11.5pt; margin: 8pt 0 2pt; } #print-brief .pb-sub { color: #444; font-size: 9.5pt; margin: 0 0 4pt; } #print-brief p { margin: 2pt 0; } #print-brief .pb-warn { border-left: 2.5pt solid #b02a2a; padding-left: 6pt; } } /* ---------- edit form (drawer) ---------- */ .ef { display: block; margin-bottom: 10px; } .ef-l { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 650; margin-bottom: 3px; } .ef input, .ef textarea, .ef select { width: 100%; font: inherit; font-size: 12.5px; color: var(--text-primary); background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; resize: vertical; } .ef input:focus, .ef textarea:focus, .ef select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .ef-hint { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; } .ef-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .ef-status { font-size: 12px; color: var(--danger); } .dd-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .dd-btn.primary:hover { opacity: 0.9; } /* ---------- data manager modal ---------- */ .modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.4); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; } .modal { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 24px 24px; width: min(640px, 100%); max-height: 86vh; overflow-y: auto; } .modal h2 { margin: 0; font-size: 17px; } .dm-h { font-size: 13.5px; margin: 18px 0 4px; } .dm-file { margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); } .dm-diff { margin-top: 12px; border-top: 1px solid var(--grid); padding-top: 10px; } .dm-counts { display: flex; gap: 8px; margin: 8px 0; } .dm-diff details { font-size: 12.5px; margin: 6px 0; } .dm-diff summary { cursor: pointer; color: var(--text-secondary); } .dm-diff ul { margin: 4px 0 0; padding-left: 20px; color: var(--text-secondary); } /* ---------- misc ---------- */ .empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 13.5px; } mark { background: var(--accent-soft); color: inherit; border-radius: 2px; padding: 0 1px; } /* ---------- AI research assistant ---------- */ #agent-fab { position: fixed; right: 18px; bottom: 18px; z-index: 95; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(11,11,11,0.28); transition: transform 0.15s ease; } #agent-fab:hover { transform: scale(1.06); } #agent-fab.open { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); } #agent-panel { position: fixed; right: 18px; bottom: 82px; z-index: 94; width: min(400px, calc(100vw - 36px)); height: min(560px, calc(100dvh - 110px)); display: flex; flex-direction: column; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); transition: opacity 0.16s ease, transform 0.16s ease; } #agent-panel.closed { opacity: 0; transform: translateY(12px); pointer-events: none; } .ag-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-1); } .ag-title { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ag-title b { font-size: 13.5px; } .ag-title span { font-size: 10.5px; color: var(--muted); } .ag-iconbtn { border: 0; background: var(--page); color: var(--muted); cursor: pointer; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; flex: none; } .ag-iconbtn:hover { color: var(--text-primary); } .ag-msgs { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; } .ag-msg { max-width: 92%; font-size: 12.5px; line-height: 1.5; border-radius: 12px; padding: 8px 12px; overflow-wrap: break-word; } .ag-msg.user { align-self: flex-end; background: var(--accent); color: #fff; white-space: pre-wrap; } .ag-msg.assistant { align-self: flex-start; background: var(--page); border: 1px solid var(--border); color: var(--text-primary); } .ag-msg.assistant p { margin: 0 0 7px; } .ag-msg.assistant p:last-child { margin-bottom: 0; } .ag-msg.assistant ul, .ag-msg.assistant ol { margin: 0 0 7px; padding-left: 20px; } .ag-msg.assistant li { margin: 2px 0; } .ag-msg.assistant h1, .ag-msg.assistant h2, .ag-msg.assistant h3, .ag-msg.assistant h4 { font-size: 13px; margin: 10px 0 5px; } .ag-msg.assistant code { background: var(--chip-mid); border-radius: 4px; padding: 0 4px; font-size: 11.5px; } .ag-msg.assistant pre { background: var(--chip-mid); border-radius: 8px; padding: 8px 10px; overflow-x: auto; font-size: 11.5px; } .ag-msg.assistant pre code { background: none; padding: 0; } .ag-msg.assistant table { border-collapse: collapse; font-size: 11.5px; margin: 4px 0 7px; display: block; overflow-x: auto; max-width: 100%; } .ag-msg.assistant th, .ag-msg.assistant td { border: 1px solid var(--border); padding: 3px 7px; text-align: left; } .ag-msg.error { align-self: flex-start; background: color-mix(in srgb, var(--danger) 10%, var(--surface-1)); border: 1px solid var(--danger); color: var(--text-primary); } .ag-status { align-self: flex-start; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 7px; padding: 0 4px; } .ag-status .dots i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: var(--muted); animation: ag-b 1.2s infinite; } .ag-status .dots i:nth-child(2) { animation-delay: 0.18s; } .ag-status .dots i:nth-child(3) { animation-delay: 0.36s; } @keyframes ag-b { 0%, 70%, 100% { opacity: 0.25; } 35% { opacity: 1; } } .ag-hello { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; } .ag-hello b { color: var(--text-primary); } .ag-sugs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .ag-sug { font: inherit; font-size: 12px; text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; background: var(--page); color: var(--text-secondary); } .ag-sug:hover { border-color: var(--accent); color: var(--text-primary); } .ag-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border); } .ag-form textarea { flex: 1; font: inherit; font-size: 13px; color: var(--text-primary); background: var(--page); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; resize: none; max-height: 120px; min-height: 36px; } .ag-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } #agent-send { border: 0; background: var(--accent); color: #fff; cursor: pointer; flex: none; width: 36px; height: 36px; border-radius: 10px; font-size: 14px; } #agent-send:disabled { opacity: 0.4; cursor: default; } .ag-msg .nodelink { color: inherit; text-decoration: underline; text-decoration-style: dotted; } .ag-msg.assistant .nodelink { color: var(--accent); } /* ---------- mobile ---------- */ @media (max-width: 900px) { #topbar { gap: 10px; padding: 8px 12px; } .tabs { order: 3; flex-basis: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { white-space: nowrap; padding: 6px 11px; } .controls { margin-left: auto; } #search { width: 140px; } #main { overflow: clip; } /* the hidden drawer must not widen the mobile viewport */ #drawer { position: absolute; right: 0; top: 0; bottom: 0; box-shadow: var(--shadow); width: min(420px, 100%); z-index: 30; } #drawer.closed { margin-right: min(-420px, -100vw); } .gloss dl { grid-template-columns: 1fr; } .tablewrap { padding: 10px 10px 30px; overflow-x: auto; } table.data { min-width: 720px; } .ovwrap { padding: 16px 14px 34px; } .briefwrap { padding: 16px 14px 34px; } .trip-main { padding: 14px 14px 34px; } .famwrap { padding: 14px 12px 30px; } } @media (max-width: 700px) { .brand-sub { display: none; } .controls { flex-basis: 100%; order: 4; } #search { flex: 1; width: auto; min-width: 100px; } .dd-menu { position: fixed; left: 10px; right: 10px; top: auto; max-height: 55dvh; } .dd-menu.wide { min-width: 0; } /* map: side panel becomes a bottom sheet; legends give way to content */ .map-side { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 42%; } .legend, .hint { display: none; } .fs-label { width: 110px; } .kv { grid-template-columns: 100px 1fr; } /* assistant goes full-screen */ #agent-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } #agent-fab { right: 14px; bottom: 14px; } #agent-fab.open { display: none; } .ag-form textarea, #search { font-size: 16px; } /* stop iOS focus zoom */ }