/* ============================================================================ Theme variables. Dark is the default; [data-theme=light] overrides surfaces. Colorblind-safe palettes override only the signal colors. User custom colors are injected as inline style on (highest precedence) and win over all. ============================================================================ */ :root { /* Dark = "inside the hive at night": deep wood browns, parchment text, honey accents. */ --bg: #171008; --bg-tint: #1f1409; /* warm top-of-page wash under the honeycomb */ --surface: #241708; --surface-2: #1c1106; --border: #59391a; /* strong wood frame */ --border-soft: rgba(201,164,94,.25); /* faint dividers (dense table rows) */ --text: #f0dcb0; /* parchment */ --text-muted: #c9a45e; --bull: #35d17c; --bear: #ff5b4a; --neu: #c9a45e; --ticker: var(--text); --dollar: var(--text); --percent: var(--text); --accent: #ffd76a; /* plain honey link/accent/active */ --brand: #ffd76a; /* topbar wordmark (MedievalSharp) */ --honey: #e8a824; /* hive-map chrome: comb threads, Ursa gold, focus glow */ --btn-grad: linear-gradient(180deg,#ffdf7e,#ffc93c 42%,#eda912 80%,#c8880a); --btn-border: #7a5210; --btn-text: #2a1503; /* "Aged gold" trade-kind chip (finish A — the bright --btn-grad ran too hot). Its own tokens, NOT remapped by the colorblind palettes; the chip also states its meaning in text, so color is a bonus channel, never the only one. */ --gold-bar: linear-gradient(180deg,#e2b34a,#c8880a 55%,#96660c); --gold-bar-border: #6b4a10; --gold-bar-text: #2a1503; --focus-ring: rgba(242,193,78,.35); --shadow: rgba(0,0,0,.5); /* login's honeycomb, dialed down to a page texture (stroke #ffb020 @ low opacity) */ --hex-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cg fill='none' stroke='%23ffb020' stroke-opacity='.06' stroke-width='1.6'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E"); --radius: 10px; --font-app: 'Inter', system-ui, sans-serif; --num-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Mobile home chrome (≤860px). Tray band = --surface; pills a shade darker; active pill = the gold --btn-grad. --topbar-h / --bottom-tray-total are measured live by app-mobilenav.js (the fallbacks hold until it runs). */ --topbar-h: 48px; --dead-strip-h: 26px; --bottom-tray-total: 80px; --tray-pill-bg: #140d05; --tray-pill-border: var(--border); } :root[data-theme="light"] { /* Light = "parchment and honey by day". */ --bg: #f6ecd4; --bg-tint: #fdf6e6; --surface: #fdf6e6; --surface-2: #f3e6c8; --border: #d9bf8a; --border-soft: rgba(138,108,62,.30); --text: #3a2a12; --text-muted: #8a6c3e; --bull: #1f9d55; --bear: #d64533; --neu: #8a6c3e; --accent: #a8700e; --brand: #a8700e; --btn-grad: linear-gradient(180deg,#eda912,#c8880a); --btn-border: #a8700e; --btn-text: #2a1503; /* Light theme: a darker ramp so the aged-gold chip stays legible on parchment; pale text on it. */ --gold-bar: linear-gradient(180deg,#c8880a,#8a5c08); --gold-bar-border: #6b4a10; --gold-bar-text: #fdf6e6; --focus-ring: rgba(200,136,10,.30); --shadow: rgba(90,66,26,.16); --tray-pill-bg: #efe1c2; /* pills a touch darker than the parchment tray band */ --hex-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cg fill='none' stroke='%23b98a2e' stroke-opacity='.10' stroke-width='1.6'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-palette="deuteranopia"] { --bull: #1f6feb; --bear: #d9730d; --neu: #8b95a7; } :root[data-palette="tritanopia"] { --bull: #0d9488; --bear: #db2777; --neu: #8b95a7; } :root[data-palette="mono"] { --bull: #d4d9e0; --bear: #717a89; --neu: #9aa3b2; } @font-face { font-family: 'MedievalSharp'; src: url('/static/fonts/medievalsharp.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } * { box-sizing: border-box; } body { margin: 0; color: var(--text); font-family: var(--font-app); line-height: 1.5; font-size: 15px; /* honey/wood page wash + subtle honeycomb texture — cards paint over it, so it never shows inside a card or table */ background-color: var(--bg); background-image: var(--hex-bg), linear-gradient(180deg, var(--bg-tint), transparent 60%); background-size: 84px 150px, 100% 100%; background-repeat: repeat, no-repeat; } a { color: var(--accent); } h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; } h2 { font-size: 1.35rem; margin: 0 0 .3rem; } h3 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; } small { font-size: .8rem; } .muted { color: var(--text-muted); } .scroll-x { overflow-x: auto; } code, pre { font-family: var(--num-font); } pre { background: var(--surface-2); padding: .6rem .8rem; border-radius: var(--radius); overflow-x: auto; } /* numbers & entity colors (user-customizable) */ .num, .v { font-family: var(--num-font); font-variant-numeric: tabular-nums; } .ticker { color: var(--ticker); font-weight: 600; } .val-dollar { color: var(--dollar); font-family: var(--num-font); font-variant-numeric: tabular-nums; } .val-pct { color: var(--percent); font-family: var(--num-font); font-variant-numeric: tabular-nums; } /* ---- top bar ---- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 1px 8px -4px var(--shadow); } .topbar .brand { font-family: 'MedievalSharp', Georgia, serif; font-weight: 400; font-size: 1.2rem; color: var(--brand); white-space: nowrap; } .topbar nav.tabs { display: flex; gap: .25rem; flex-wrap: wrap; } .topbar nav.tabs a { padding: .35rem .75rem; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: .9rem; } .topbar nav.tabs a:hover { background: var(--surface-2); color: var(--text); } .topbar nav.tabs a.active { background: var(--surface-2); color: var(--text); } .topbar .spacer { flex: 1; } /* ---- shell: sidebar (Scout Hub) + content ---- */ .shell { display: flex; align-items: flex-start; } .sidebar { width: 224px; flex: 0 0 224px; position: sticky; top: 49px; align-self: flex-start; padding: 1rem .8rem; border-right: 1px solid var(--border); height: calc(100vh - 49px); overflow-y: auto; } .sidebar .hub-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 .5rem .4rem; } .sidebar a { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .9rem; } .sidebar a:hover, .sidebar a.active { background: var(--surface-2); } .sidebar .pill-count { margin-left: auto; font-size: .72rem; color: var(--text-muted); font-family: var(--num-font); } .sidebar .hub-note { font-size: .72rem; color: var(--text-muted); margin: 1rem .4rem 0; } .content { flex: 1; min-width: 0; padding: 1.2rem 1.5rem 5rem; max-width: 1100px; } /* ---- cards / grids ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .7rem; margin: 1rem 0 1.3rem; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .9rem; } .kpi .v { font-size: 1.5rem; font-weight: 600; line-height: 1.15; } .kpi .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } /* ---- cost meter sparkline ---- */ .meter { grid-column: span 2; } .meter svg { display: block; width: 100%; height: auto; margin-top: .3rem; } .spark-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .spark-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; } .spark-dot { fill: var(--accent); } /* ---- signal tables ---- */ table.signals { width: 100%; border-collapse: collapse; font-size: .86rem; } table.signals th { text-align: left; font-weight: 500; color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; padding: .4rem .5rem; border-bottom: 1px solid var(--border); } table.signals td { padding: .42rem .5rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } /* signal badge + conviction pips */ .sig { font-size: .7rem; font-weight: 600; padding: .12rem .45rem; border-radius: .35rem; } .sig.pos { background: color-mix(in srgb, var(--bull) 18%, transparent); color: var(--bull); } .sig.neg { background: color-mix(in srgb, var(--bear) 18%, transparent); color: var(--bear); } .sig.neu { background: var(--surface-2); color: var(--text-muted); } .conv { display: inline-flex; gap: 2px; align-items: center; } .conv .pip { width: 6px; height: 13px; border-radius: 1px; background: var(--border); display: inline-block; } .conv.pos .pip.on { background: var(--bull); } .conv.neg .pip.on { background: var(--bear); } .conv.neu .pip.on { background: var(--neu); } /* star button */ .star-btn { background: none; border: none; cursor: pointer; font-size: 1.05rem; padding: 0 .15rem; color: var(--text-muted); line-height: 1; } .star-btn.on { color: #f5c518; } /* P&L */ .pnl-pos { color: var(--bull); } .pnl-neg { color: var(--bear); } .fresh-ok { color: var(--bull); } .fresh-stale { color: #d29922; } /* ---- forms / buttons ---- */ input, select, textarea { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .45rem .55rem; font-size: .9rem; font-family: inherit; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } label { display: block; font-size: .82rem; color: var(--text-muted); margin-bottom: .6rem; } label input, label select, label textarea { margin-top: .2rem; } button, .btn { cursor: pointer; background: var(--btn-grad); color: var(--btn-text); border: 1px solid var(--btn-border); border-radius: 8px; padding: .5rem .85rem; font-size: .9rem; font-family: inherit; width: auto; } button.ghost, .btn.ghost { background: transparent; color: var(--text); border-color: var(--border); } button.danger { background: var(--bear); color: #fff; border-color: transparent; } button:disabled { opacity: .5; cursor: not-allowed; } button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .7rem; } .swatch { display: flex; align-items: center; gap: .5rem; } .swatch input[type=color] { width: 38px; height: 32px; padding: 2px; } /* ---- bubbles (mobile-first quick nav) ---- */ .bubbles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; } .bubble { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .25rem; min-height: 92px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; text-decoration: none; color: var(--text); padding: 1rem; transition: transform .08s ease; } .bubble:active { transform: scale(.95); } .bubble .big { font-size: 1.5rem; font-weight: 600; font-family: var(--num-font); } .bubble .cap { font-size: .82rem; color: var(--text-muted); } /* ---- responsive ---- */ @media (max-width: 860px) { .sidebar { display: none; } .topbar nav.tabs { display: none; } /* clear the fixed bottom tray (pills + dead strip + home-indicator inset), measured live */ .content { padding: 1rem .9rem calc(var(--bottom-tray-total, 80px) + .6rem); } .grid2 { grid-template-columns: 1fr; } .meter { grid-column: span 1; } /* kill pull-to-refresh reloads + horizontal rubber-banding on the app body (MOBILE_HOME_SPEC M2) */ body { overscroll-behavior: none; } body.sheet-open { overflow: hidden; } /* lock the page while a grove sheet is up */ } @media (min-width: 861px) { .mobile-only { display: none; } } /* ============================================================================ MOBILE HOME CHROME (≤860px) — dual sliding pill trays (replacing the old mobilebar) + the grove bottom sheet + the foldable weather card. Desktop (>860px) sees NONE of this: the trays are display:none, the sector panel stays inline below the map, the weather strip shows in full. Every color is a token, so light + colorblind palettes keep working (MOBILE_HOME_SPEC M1–M3). ============================================================================ */ .tray { display: none; } /* desktop: no trays */ .sheet-handle { display: none; } /* desktop: no drag handle */ .sheet-backdrop { display: none; } /* desktop: no backdrop */ .weather-fold-btn, .weather-glyphs { display: none; } /* desktop: no fold affordance */ .weather-full { display: contents; } /* desktop: strip renders inline, byte-identical */ .ov-home { display: contents; } /* desktop: no box — overview flows as authored */ @media (max-width: 860px) { /* ── the trays ── */ .tray { display: block; position: fixed; left: 0; right: 0; z-index: 19; background: var(--surface); } .tray-top { top: var(--topbar-h, 48px); border-bottom: 1px solid var(--border); } .tray-bottom { bottom: 0; border-top: 1px solid var(--border); /* the dead strip: nothing interactive in the OS home-indicator zone */ padding-bottom: calc(var(--dead-strip-h) + env(safe-area-inset-bottom)); } .tray-scroll { display: flex; gap: .4rem; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; scroll-padding: 0 16px; padding: .4rem 16px; } /* 16px sides keep swipes off the iOS edge-back zone */ .tray-scroll::-webkit-scrollbar { display: none; } .tray-pill { flex: 0 0 auto; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; background: var(--tray-pill-bg); color: var(--text); border: 1px solid var(--tray-pill-border); border-radius: 999px; padding: .5rem .9rem; font-size: .82rem; line-height: 1.1; } .tray-pill.is-active { background: var(--btn-grad); color: var(--btn-text); border-color: var(--btn-border); font-weight: 600; } .tray-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* edge-fade gradients in the tray color — signal there's more to scroll */ .tray::before, .tray::after { content: ""; position: absolute; top: 0; width: 28px; pointer-events: none; z-index: 1; } .tray-top::before, .tray-top::after { bottom: 0; } .tray-bottom::before, .tray-bottom::after { bottom: calc(var(--dead-strip-h) + env(safe-area-inset-bottom)); } .tray::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); } .tray::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); } /* ── the grove sheet: the SAME .hive-panel-card, slid up over the map ── */ .hive-panel-card { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px -12px var(--shadow); padding-top: 1.6rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateY(100%); visibility: hidden; transition: transform .28s ease, visibility .28s ease; } .hive-panel-card.is-open { transform: translateY(0); visibility: visible; } .sheet-handle { display: block; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1.6rem; margin: 0; padding: 0; background: transparent; border: none; border-radius: 16px 16px 0 0; cursor: pointer; } .sheet-handle::before { content: ""; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: var(--border); } .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: color-mix(in srgb, var(--bg) 66%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; } .sheet-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; } @supports (backdrop-filter: blur(2px)) { .sheet-backdrop.is-open { backdrop-filter: blur(2px); } } /* ── the weather card fold ── */ .regime-card { position: relative; cursor: pointer; } .weather-fold-btn { display: inline-flex; align-items: center; gap: .25rem; position: absolute; top: .7rem; right: .7rem; width: auto; min-height: 32px; padding: .2rem .55rem; font-size: .7rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; } .weather-caret { display: inline-block; transition: transform .15s ease; } .regime-card.is-open .weather-caret { transform: rotate(180deg); } .weather-glyphs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; margin: .35rem 0 .15rem; } .weather-glyphs .wg { font-size: 1.05rem; line-height: 1; } .weather-glyphs .wg.pos { color: var(--bull); } .weather-glyphs .wg.neg { color: var(--bear); } .weather-glyphs .wg.neu { color: var(--neu); } .weather-full { display: none; } /* collapsed by default */ .regime-card.is-open .weather-full { display: block; } .regime-card.is-open .weather-glyphs { display: none; } /* ── overview reorder: weather + map float to the top, KPI + rest below (DOM order unchanged) ── */ .ov-home { display: flex; flex-direction: column; } .ov-home > .hive-head { order: 1; } .ov-home > .regime-card { order: 2; } .ov-home > .hive-layout { order: 3; } .ov-home > .ursa-chips { order: 4; } .ov-home > .metrics { order: 5; } .ov-home > .grid2 { order: 6; } .ov-home > p { order: 7; } .ov-home > .mobile-only { display: none; } /* the bubbles were the old quick-nav — the trays are now */ /* prefers-reduced-motion: no slide/animation, instant show/hide (MOBILE_HOME_SPEC M3) */ @media (prefers-reduced-motion: reduce) { .hive-panel-card, .sheet-backdrop, .weather-caret { transition: none; } } } /* ============================================================================ The hive (Overview): honeycomb sector map + focus panel. Signal colors stay on --bull/--bear so colorblind palettes and user overrides keep working; --honey is chrome only (threads, Ursa gold, focus ring), never a signal. ============================================================================ */ .hive-head p { margin: .1rem 0 0; } .hive-kicker { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--honey); font-weight: 600; margin-bottom: .15rem; } .regime-card { border-left: 4px solid var(--honey); margin-bottom: .8rem; } .regime-card .hive-kicker { margin-bottom: .25rem; } /* Forest-weather strip: one compact line per context scout (services/weather.py), shown in the Overview regime card and the hive-tap forest report. Pills reuse the .sig tones so the colorblind palettes keep working; each row wraps on narrow screens and the reason ellipses (no horizontal scroll at 375px). */ .fw-strip { display: flex; flex-direction: column; gap: .25rem; margin: .4rem 0 .5rem; } .fw-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .82rem; } .fw-lane { flex: 0 0 auto; color: var(--text-muted); font-size: .72rem; white-space: nowrap; } .fw-glyph { font-size: .82rem; } .fw-scout { flex: 0 0 auto; } .fw-reason { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); } .fw-ago { flex: 0 0 auto; font-size: .72rem; white-space: nowrap; } .hive-bull { color: var(--bull); } .hive-bear { color: var(--bear); } /* Ursa Major quick chips */ .ursa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .8rem; } .ursa-chips .hive-kicker { display: inline; margin: 0 .3rem 0 0; } .ursa-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid color-mix(in srgb, var(--honey) 45%, var(--border)); color: var(--text); border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; width: auto; } .ursa-chip:hover { border-color: var(--honey); box-shadow: 0 0 0 3px color-mix(in srgb, var(--honey) 22%, transparent); } .ursa-mark { color: var(--honey); } /* Ursa Mixed — the scouts DISAGREE. Its own mark (⇅), never the honey ✦: a contested name must not read as agreement at a glance. Muted so it sits beside a ✦ without competing with it. */ .ursa-mark.ursa-mixed { color: var(--text-muted); font-weight: 600; } .ursa-chip.contested { border-style: dashed; } /* the brief's own 'flagged both ways' label on an inbox row — words, not the ⇅ glyph */ .chip-both { font-size: .72rem; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; } /* map + panel layout: full-width forest, detail panel stacked below */ .hive-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; margin-bottom: 1rem; } .hive-map-card { padding: .8rem; /* forest-floor wash — scenery, deliberately NOT tied to the signal palette */ background: linear-gradient(180deg, color-mix(in srgb, #2f7d43 7%, var(--surface)), var(--surface) 78%); } #hive-map svg.hive-svg { display: block; width: 100%; height: auto; max-height: 68vh; margin: 0 auto; } .hive-legend { margin: .5rem .2rem 0; } .hive-hint { margin: .2rem 0 .4rem; } /* the hive hub + bee streams (scouts reporting home; pollen = the report's direction) */ .hive-hub { cursor: pointer; outline: none; } .hive-hub-band { fill: color-mix(in srgb, var(--honey) 52%, var(--surface-2)); stroke: color-mix(in srgb, var(--honey) 75%, var(--border)); stroke-width: 1.2; } .hive-hub:hover .hive-hub-band, .hive-hub:focus-visible .hive-hub-band { fill: color-mix(in srgb, var(--honey) 68%, var(--surface-2)); } .hive-hub-door { fill: color-mix(in srgb, var(--text) 50%, var(--surface-2)); } .hive-hub-label { fill: var(--text-muted); font-family: var(--font-app); text-transform: uppercase; letter-spacing: .06em; } .hive-hub.focused .hive-hub-band { fill: color-mix(in srgb, var(--honey) 72%, var(--surface-2)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--honey) 55%, transparent)); } .hive-stream-bee { pointer-events: none; opacity: .9; } .hive-pollen { stroke: var(--surface); stroke-width: .6; } .hive-stream { transition: opacity .2s ease; } .hive-stream.dimmed { opacity: .22; } /* hive report panel (macro weather + coverage density) */ .macro-line { margin: .2rem 0 .4rem; } .macro-item { margin: .35rem 0; padding: .45rem .6rem; background: var(--surface-2); border-radius: 8px; font-size: .85rem; } .hive-coverage { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .6rem; } .cov-track { width: 100%; max-width: 90px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-bottom: 2px; } .cov-bar { height: 100%; background: color-mix(in srgb, var(--honey) 75%, transparent); } tr.cov-hot td { background: color-mix(in srgb, var(--honey) 9%, transparent); } /* groves */ .hive-cell { cursor: pointer; outline: none; } .hive-grove { stroke-width: 1.5; transition: filter .15s ease, opacity .2s ease; } .hive-cell:hover .hive-grove, .hive-cell:focus-visible .hive-grove { filter: brightness(1.18); stroke-width: 2; } .hive-cell:focus-visible .hive-grove { stroke: var(--honey); } .hive-cell.focused .hive-grove { stroke: var(--honey); stroke-width: 2.5; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--honey) 55%, transparent)); } .hive-cell.dimmed { opacity: .38; } .hive-canopy { opacity: .5; pointer-events: none; } .hive-flora { pointer-events: none; } .hive-flower circle { fill: color-mix(in srgb, var(--bull) 55%, #fff); } .hive-flower .hive-flower-heart { fill: var(--honey); } .hive-leaf { fill: color-mix(in srgb, var(--bear) 62%, transparent); } .hive-name { fill: var(--text); font-family: var(--font-app); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 2.5px; stroke-opacity: .55; } .hive-counts { font-family: var(--num-font); paint-order: stroke; stroke: var(--surface); stroke-width: 2.5px; stroke-opacity: .55; } .hive-counts .hive-bull { fill: var(--bull); } .hive-counts .hive-bear { fill: var(--bear); } .hive-dipper { fill: var(--honey); stroke: var(--honey); opacity: .95; } .hive-minor { fill: var(--honey); opacity: .8; font-family: var(--num-font); } /* forage trails — drawn only while a grove is focused */ .hive-trail { fill: none; stroke: var(--honey); stroke-dasharray: 3 7; stroke-linecap: round; opacity: .55; animation: hive-trail-flow 1.4s linear infinite; } @keyframes hive-trail-flow { to { stroke-dashoffset: -10; } } @media (prefers-reduced-motion: reduce) { .hive-trail { animation: none; } } /* focus panel */ .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .panel-title { margin: 0; } .panel-sub { margin: .15rem 0 .6rem; font-size: .82rem; } .ursa-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .7rem; } .ursa-item { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; border: 1px solid color-mix(in srgb, var(--honey) 40%, var(--border)); background: color-mix(in srgb, var(--honey) 7%, var(--surface)); border-radius: 8px; padding: .4rem .6rem; font-size: .85rem; } .ursa-item.ursa-minor { border-style: dashed; background: var(--surface); } .ursa-item .ursa-tier { font-size: .78rem; } .ursa-item .ursa-why { flex-basis: 100%; } .scout-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--surface-2); border-radius: 999px; padding: .08rem .5rem; font-size: .72rem; margin: 0 .25rem .2rem 0; white-space: nowrap; } .scout-chip.big { font-size: .78rem; padding: .18rem .6rem; } .scout-legend { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .6rem; } .panel-why small { display: block; } tr.focus-row td { background: color-mix(in srgb, var(--honey) 10%, transparent); } tr.focus-row .ticker, .ursa-item.focus-row .ticker { text-shadow: 0 0 8px color-mix(in srgb, var(--honey) 60%, transparent); } /* ============================================================================ Company name beside a ticker (display-only, via the ticker() macro). With no known name the plain .ticker span renders and none of this applies. ============================================================================ */ .tick-co { display: inline-flex; flex-direction: column; line-height: 1.05; vertical-align: middle; min-width: 0; } .co-name { color: var(--text-muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; } /* ============================================================================ Trade-kind chip — what KIND of insider trade Sibyl's reason describes. The meaning rides in the TEXT (the label) as well as the color, so the colorblind palettes (which only remap --bull/--bear/--neu) never strip a chip of meaning. "gold" = open-market discretionary/cluster; "plan" = a pre-scheduled 10b5-1, drawn deliberately worthless-looking (dashed, muted) next to gold. ============================================================================ */ .tk-chip { display: inline-flex; align-items: center; font-size: .62rem; font-weight: 700; letter-spacing: .01em; padding: .08rem .45rem; border-radius: 999px; white-space: nowrap; } .tk-gold { background: var(--gold-bar); border: 1px solid var(--gold-bar-border); color: var(--gold-bar-text); } .tk-plan { background: transparent; border: 1px dashed rgba(201,164,94,.4); color: var(--text-muted); } /* ============================================================================ The sector inbox: a filter bar over one expandable row per ticker. Native
/ gives free keyboard + screen-reader support and survives HTMX swaps with zero JS; app-sector.js only toggles row visibility. ============================================================================ */ .inbox-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .2rem 0 .7rem; } .inbox-dirchips { display: inline-flex; flex-wrap: wrap; gap: .3rem; } .dirchip { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .74rem; line-height: 1; min-height: 34px; cursor: pointer; } .dirchip:hover { color: var(--text); border-color: var(--honey); } .dirchip.is-active { color: var(--text); border-color: var(--honey); background: color-mix(in srgb, var(--honey) 14%, var(--surface-2)); } .dc-count { opacity: .7; font-variant-numeric: tabular-nums; } .inbox-field { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .74rem; color: var(--text-muted); } .inbox-field select { min-height: 34px; } .inbox-search { flex: 1 1 12rem; min-width: 8rem; min-height: 34px; } .sig-list { display: flex; flex-direction: column; } .sig-item { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem .2rem; border-bottom: 1px solid var(--border-soft); } .sig-item[hidden] { display: none; } .sig-item > .star-btn { flex: 0 0 auto; margin-top: .5rem; } .sig-details { flex: 1 1 auto; min-width: 0; } .sig-summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .25rem 0; min-height: 40px; } .sig-summary::-webkit-details-marker { display: none; } .sig-summary::before { content: "▸"; color: var(--text-muted); display: inline-block; flex: 0 0 auto; transition: transform .12s ease; } .sig-details[open] > .sig-summary::before { transform: rotate(90deg); } .sig-senders { display: inline-flex; flex-wrap: wrap; gap: .2rem; } .sig-summary .ursa-mark { color: var(--honey); } /* The summary is three deliberate pieces of information (Nick's reading order, 2026-07-20): 1 what the company is · 2 who fired · 3 why + confidence. Desktop flows them inline; small screens stack them top-to-bottom, staggered, so nothing smooshes onto one line. */ .sig-l { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; } .sig-l3 { flex: 1 1 14rem; } .sig-teaser { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sig-details[open] > .sig-summary .sig-teaser { display: none; } @media (max-width: 860px) { .sig-summary { flex-direction: column; align-items: flex-start; gap: .25rem; position: relative; padding-left: 1rem; } .sig-summary::before { position: absolute; left: 0; top: .45rem; } .sig-l { width: 100%; } .sig-l2 { padding-left: .85rem; } /* flex-basis is HEIGHT in the stacked column — reset it or every row balloons */ .sig-l3 { padding-left: .85rem; flex: 0 0 auto; } .sig-teaser { flex-basis: 100%; } } .sig-thread { padding: .2rem 0 .5rem 1rem; margin: .1rem 0 .35rem .3rem; border-left: 2px solid var(--border-soft); display: flex; flex-direction: column; gap: .55rem; } .thread-msg { display: flex; flex-direction: column; gap: .25rem; } .thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; } .thread-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.5; } .sector-inbox .sig-item.focus-row { background: color-mix(in srgb, var(--honey) 10%, transparent); } .sector-inbox .sig-item.focus-row .ticker { text-shadow: 0 0 8px color-mix(in srgb, var(--honey) 60%, transparent); } .inbox-empty { padding: .6rem .2rem; } .inbox-foot { margin-top: .5rem; } /* The brief's full-page inbox (vs the HTMX sector-panel fragment): a touch of top spacing under the header, and the filter bar sits above a hairline so it reads as a toolbar over the list. The bar + rows already wrap (flex-wrap), so there's no horizontal scroll on mobile. */ .inbox-page { margin-top: .5rem; } .inbox-page .inbox-filters { padding-bottom: .5rem; border-bottom: 1px solid var(--border-soft); } /* mobile: name truncates tighter, tap targets >=40px, filter bar already wraps, no page scroll-x */ @media (max-width: 860px) { .co-name { max-width: 14ch; } .dirchip, .inbox-field select, .inbox-search { min-height: 40px; } } /* ---- skip link: off-screen until the first Tab focuses it (keyboard users) ---- */ .skip-link { position: absolute; left: -999px; top: auto; } .skip-link:focus { position: fixed; left: 10px; top: 10px; z-index: 40; width: auto; background: var(--surface); color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; text-decoration: none; box-shadow: 0 0 0 3px var(--focus-ring); } /* ---- support chip: fixed wooden plaque, bottom-right ---- */ .support-chip { position: fixed; right: 14px; bottom: 14px; z-index: 15; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: .78rem; padding: .35rem .6rem; border-radius: 999px; box-shadow: 0 2px 8px var(--shadow); text-decoration: none; white-space: nowrap; } .support-chip:hover { color: var(--accent); border-color: var(--accent); } /* lift above the fixed bottom tray + its dead strip (measured live) at its breakpoint */ @media (max-width: 860px) { .support-chip { bottom: calc(var(--bottom-tray-total, 80px) + 10px); } } /* ============================================================================ Scout personas — bees, group chips, roster cards, walkthrough. Bees carry their own inline palette (like the hive map); everything around them uses the app's honey/wood tokens so light/dark + custom colors keep working. ============================================================================ */ .bee { display: inline-block; vertical-align: middle; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } .bee-legend { width: 26px; height: auto; } .bee-mini { width: 34px; height: auto; } .bee-card { width: 52px; height: auto; } .bee-hero { width: 74px; height: auto; } /* group chip — the colored badge naming a scout's group */ .group-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .group-chip.g-market { color: #e8a020; } .group-chip.g-filings { color: #8fa0bd; } .group-chip.g-web { color: #3fb950; } :root[data-theme="light"] .group-chip.g-market { color: #b9770a; } :root[data-theme="light"] .group-chip.g-filings { color: #55627a; } :root[data-theme="light"] .group-chip.g-web { color: #1f9d55; } /* roster: three group sections of persona cards on the Scouts page */ .roster-group { margin: 1.4rem 0; } .roster-group-head { display: flex; align-items: center; gap: .7rem; margin: 0 0 .2rem; } .roster-group-head h3 { margin: 0; } .roster-group-head .bee { flex: 0 0 auto; } .roster-group-blurb { color: var(--text-muted); font-size: .85rem; margin: 0 0 .7rem; } .roster-group-count { margin-left: auto; font-size: .72rem; color: var(--text-muted); font-family: var(--num-font); } .persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .7rem; } .persona-card { display: flex; gap: .7rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; } .persona-card .bee { flex: 0 0 auto; margin-top: .1rem; } .persona-body { min-width: 0; flex: 1; } .persona-name { font-weight: 600; } .persona-epithet { color: var(--text-muted); font-size: .82rem; font-style: italic; } .persona-blurb { font-size: .84rem; margin: .35rem 0 0; } .persona-activity { margin: .4rem 0 0; font-size: .76rem; color: var(--text-muted); } .persona-activity .ticker { font-size: .8rem; } /* THE WAY IN, above everything else on /onboarding. A returning-or-informed user should be able to create an account and be inside the product in about fifteen seconds, so the control that does that is the first thing under the heading and is the SOLID button — the tour is what you scroll to, not what you must read your way out of. Full-width and stacked on a phone, because a two-button row at 375px puts the primary action somewhere the thumb has to hunt for. */ .ob-jump { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 0 0 .35rem; } .ob-jump form { display: inline; } .ob-jump button { font-weight: 700; } .ob-jump-note { margin: 0 0 1.1rem; font-size: .88rem; } @media (max-width: 30rem) { .ob-jump { flex-direction: column; align-items: stretch; } .ob-jump form, .ob-jump button { width: 100%; } } /* "Meet the hive" group cards (onboarding step 2) */ .group-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .8rem; margin: .6rem 0 .2rem; } .group-card { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem .8rem; } .group-card .bee { margin-bottom: .3rem; } .group-card h4 { margin: .2rem 0 .1rem; font-size: 1rem; } .group-card p { color: var(--text-muted); font-size: .82rem; margin: .3rem 0 0; } .group-card .group-count { display: inline-block; margin-top: .5rem; font-size: .72rem; color: var(--text-muted); font-family: var(--num-font); } /* the walkthrough overlay — persona cards one at a time */ .wt-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--bg) 80%, transparent); } @supports (backdrop-filter: blur(2px)) { .wt-overlay { backdrop-filter: blur(3px); } } .wt-overlay[hidden] { display: none; } .wt-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 30rem; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 24px 70px -24px var(--shadow); } .wt-slide { text-align: center; } .wt-slide[hidden] { display: none; } .wt-slide .bee { margin: .2rem 0 .3rem; } .wt-slide h3 { margin: .2rem 0 .15rem; } .wt-slide .persona-epithet { font-size: .9rem; } .wt-slide .wt-intro-blurb { font-size: .9rem; margin: .5rem 0 0; } .wt-lead { font-size: .9rem; color: var(--text-muted); margin: .2rem 0 .6rem; } .wt-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; } .wt-progress { font-size: .74rem; color: var(--text-muted); font-family: var(--num-font); } .wt-nav { display: flex; gap: .4rem; } .wt-skip { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .8rem; text-decoration: underline; padding: .2rem; } .meet-scouts-link { display: inline-flex; align-items: center; gap: .4rem; } /* persona mini-card popped over a bee on the hive map */ .bee-popup { position: absolute; z-index: 6; pointer-events: none; max-width: 15rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .6rem; box-shadow: 0 10px 30px -10px var(--shadow); font-size: .8rem; } .bee-popup .bee { width: 30px; } .bee-popup .persona-name { display: inline-block; margin-left: .3rem; vertical-align: middle; } .bee-popup .persona-epithet { font-size: .76rem; margin-top: .15rem; } .bee-popup .bp-grove { color: var(--text-muted); font-size: .74rem; margin-top: .25rem; } /* the three-group bee legend under the hive map */ .hive-bee-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin-top: .5rem; } .hive-bee-legend .lg-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--text-muted); } .hive-stream-bee { cursor: pointer; } /* ============================================================================ Help chips — progressive disclosure ("?" on demand, not every load). A native
, collapsed by the browser default (no JS, no stored state). The summary is a small round bordered "?" chip (--accent glyph on a --text-muted ring); the blurb is the mock's dashed-border parchment note (mirrors the .tk-plan dashed idiom). The disclosure affordance (the chip) is never hidden; no reveal animation — it's a note, not a toast. Inline-block so a chip sits at the end of a hint line, blurb below. ============================================================================ */ .help-chip { display: inline-block; vertical-align: middle; margin: 0 .1rem; } .help-chip > summary { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; min-width: 1.6rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--text-muted); color: var(--accent); font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; } .help-chip > summary::-webkit-details-marker { display: none; } /* drop the ▶ marker; the ? IS the affordance */ .help-chip > summary::marker { content: ""; } .help-chip > summary:hover, .help-chip > summary:focus-visible { border-color: var(--accent); } .help-chip[open] > summary { border-color: var(--accent); } /* chip stays visible while open */ .help-chip-labeled > summary { font-weight: 600; letter-spacing: .01em; } .help-chip .help-glyph { color: var(--accent); font-weight: 700; } .help-blurb { display: block; max-width: 44rem; margin: .4rem 0 .3rem; padding: .5rem .7rem; border: 1px dashed var(--border-soft); border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); font-size: .86rem; line-height: 1.55; font-weight: 400; } .help-blurb > :first-child { margin-top: 0; } .help-blurb > :last-child { margin-bottom: 0; } .help-blurb b, .help-blurb strong { color: var(--text); } /* bold lead-ins */ .help-blurb a { color: var(--accent); } /* a row of labeled chips where a legend paragraph used to sit (the hive map) */ .help-row { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: flex-start; margin: .5rem .2rem 0; } .help-row .help-chip[open] { flex-basis: 100%; } /* open blurb spans the row */ /* ≥40px tap target on mobile (padding, not a bigger desktop chip) */ @media (max-width: 640px) { .help-chip > summary { min-height: 40px; min-width: 40px; padding: .5rem .85rem; font-size: .8rem; } } /* ── Portfolio: the account overview (app-brokerage.js) ────────────────────────────────────────── Balances shown broker-true; biggest holdings first; entry-price P&L; honey allocation bar whose sector identity rides in the legend TEXT (color is decoration only — colorblind-safe). */ .mono { font-family: var(--num-font); font-variant-numeric: tabular-nums; } .brk-head { margin: 0 0 .7rem; } .brk-acct { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; } .brk-total { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: .05rem 0 .15rem; } .brk-balances { font-size: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .3rem; } .brk-pl { font-size: .82rem; margin-top: .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; } .brk-pl .pl-sep { color: var(--text-muted); } .pl-pill { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .78rem; padding: .06rem .4rem; border-radius: .35rem; white-space: nowrap; } .pl-pill.pnl-pos { background: color-mix(in srgb, var(--bull) 16%, transparent); } .pl-pill.pnl-neg { background: color-mix(in srgb, var(--bear) 16%, transparent); } .alloc-wrap { margin: .1rem 0 1rem; } .alloc-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; } .alloc-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); } .alloc-seg { height: 100%; min-width: 2px; } .alloc-legend { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .45rem; font-size: .72rem; color: var(--text-muted); } .alloc-key { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; } .alloc-key b { color: var(--text); font-variant-numeric: tabular-nums; } .alloc-key i, .sl-leg i, .sl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; } .sort-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .8rem; } .sort-pill { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: .22rem .75rem; font-size: .74rem; font-weight: 600; cursor: pointer; } .sort-pill.is-active { background: var(--btn-grad); color: var(--btn-text); border-color: transparent; } .sort-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hold-sec { margin: 0 0 .8rem; } .hold-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--border); padding-bottom: .2rem; margin-bottom: .3rem; } .hold-sec-name { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .hold-sec-sub { font-size: .78rem; } .hold-row { padding: .4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .hold-row:last-child { border-bottom: none; } .hold-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .4rem; } .hold-co { font-size: .7rem; margin: .05rem 0; } .hold-l2 { font-size: .72rem; margin: .12rem 0; } .hold-l3 { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .82rem; margin-top: .05rem; } .unit-chip { font-size: .64rem; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: .05rem .4rem; } /* ── Shortlist: sectored (app-shortlist.js) — donut + per-sector sections ────────────────────────── */ .sl-donut { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .sl-donut svg { flex: 0 0 auto; } .sl-donut-c1 { fill: var(--text); font-size: 26px; font-weight: 700; } .sl-donut-c2 { fill: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } .sl-legend { display: flex; flex-direction: column; gap: .22rem; font-size: .76rem; color: var(--text-muted); } .sl-leg { display: inline-flex; align-items: center; gap: .35rem; } .sl-leg b { color: var(--text); font-variant-numeric: tabular-nums; } .sl-sec { margin-bottom: .5rem; } .sl-sec-head { display: flex; align-items: center; gap: .35rem; border-bottom: 1px solid var(--border); padding-bottom: .2rem; margin: .3rem 0; } .sl-sec-name { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .sl-sec-mean { margin-left: auto; } .sl-item { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .sl-item:last-child { border-bottom: none; } .sl-row { padding: .45rem .1rem; } .sl-l1 { display: flex; align-items: center; gap: .3rem; } .sl-l1 .co-name { flex: 0 1 auto; min-width: 0; } .sl-day { margin-left: auto; white-space: nowrap; } .sl-l2, .sl-l3 { font-size: .72rem; margin-top: .1rem; } .sl-detail-body { padding: .3rem .1rem .5rem; font-size: .82rem; }