/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry. Put this @layer first; product CSS outside the layer wins ordinary layout rules. Native hidden and closed-dialog states take precedence over component display rules. */ @layer od-layout { [hidden]:not([hidden="until-found" i]) { display: none !important; } dialog:not([open]) { display: none !important; } :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; } .od-stack { display: flex; flex-direction: column; gap: var(--od-gap, 8px); } .od-row { display: flex; align-items: center; gap: var(--od-gap, 8px); } .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); } .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); } .od-fill { flex: 1 1 0; min-width: 0; } .od-fixed { flex: none; } .od-grid { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); } .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); } :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; } .od-tile { display: grid; grid-template-rows: auto 1fr; } :where(.od-tile) > :where(*) { display: block; } .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); } .od-media-cover { object-fit: cover; } .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; } .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .od-clamp-2 { -webkit-line-clamp: 2; } .od-clamp-3 { -webkit-line-clamp: 3; } .od-lines-2 { min-height: calc(2 * 1.4em); } .od-nowrap { white-space: nowrap; } .od-keep { word-break: keep-all; overflow-wrap: anywhere; } .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; } .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; } .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); } .od-rail::-webkit-scrollbar { display: none; } :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; } :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); } .od-spacer { flex: none; visibility: hidden; pointer-events: none; } .od-touch { min-width: 44px; min-height: 44px; } } :root [hidden]:where(:not([hidden="until-found" i])) { display: none; } /* /OD-LAYOUT-PRIMITIVES v1 */ /* ───────────────── MBPrep admin · reference look (copied into Hypatia as hy.css; Hypatia's own pieces are appended at the end) ───────────────── Measured from ref/ref-full.png at a 1.36× frame-to-CSS scale (the window is ~1110 CSS px wide). Every colour, size, radius and duration lives here once. */ @font-face { font-family: "Geist"; src: url("data:font/woff2;base64,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") format("woff2"); /* Geist (OFL 1.1), inlined so it loads from file:// too; source copy in assets/fonts/geist.woff2 */ font-weight: 100 900; font-display: swap; } :root { color-scheme: dark; /* surfaces — dark is the reference */ --canvas: #101113; --sidebar: #16171A; --panel: #1B1C1F; --panel-hover: #212226; --panel-checked: #232429; --chip: #26272B; --chip-hover: #2E2F33; --chip-on: #37383C; --line: #26272A; --line-soft: #222326; --text: #ECECEE; --text-2: #C8C9CD; --muted: #8A8B90; --muted-2: #6E6F75; --scrim: rgb(5 6 8 / 0.56); --shadow-pop: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4); /* pastels (shared by both themes) */ --hero: #C9D4EE; --hero-ink: #14161B; --hero-ink-2: #3F4859; --blush: #D3C1BE; --pale-blue: #C3D2EA; --pink: #E9C3E0; --slate: #3A3B40; --slate-ink: #ECECEE; --rose-bg: #3A2B33; --rose-ink: #E6BCD2; /* the white pill */ --cta-bg: #F4F4F5; --cta-ink: #111214; --cta-hover: #FFFFFF; /* status cues — always dot + word */ --st-active: #A9B7D4; --st-trial: #E7A8D2; --st-paused: #D8BFB4; --st-lapsed: #6C6D73; --st-wait: #8A8B90; --danger: #F29C92; --ok: #B9D7B8; /* usage bars */ --bar-track: #2F3034; --bar-fill: #F2F2F3; /* web-v3 accent — tints only the active nav row, focus rings and the selected row's plan pill */ --accent: oklch(62% 0.15 262); --accent-row: color-mix(in oklab, var(--accent) 10%, #292A2F); --accent-pill: color-mix(in oklab, var(--accent) 30%, #E4EAF6); --accent-pill-ink: #14161B; --focus: color-mix(in oklab, var(--accent) 70%, white); /* type — one neo-grotesk, numbers in the same face */ --font: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif; --fs-cap: 11px; /* uppercase labels */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-nav: 15px; --fs-lg: 17px; --fs-tile: 32px; --fs-title: 32px; --fs-hero: 56px; /* geometry */ --sb-w: 228px; --gut: 24px; --r-window: 16px; --r-tile: 14px; --r-row: 9px; --r-pill: 999px; --ctl-h: 30px; --row-h: 48px; --head-h: 34px; /* motion */ --t-fast: 150ms; --t-mid: 220ms; --t-slow: 300ms; --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); } :root[data-mode="light"] { color-scheme: light; --canvas: #F2F3F5; --sidebar: #EAEBEE; --panel: #FFFFFF; --panel-hover: #F6F7F9; --panel-checked: #F0F2F6; --chip: #EBECEF; --chip-hover: #E2E3E7; --chip-on: #FFFFFF; --line: #E1E2E6; --line-soft: #ECEDF0; --text: #141518; --text-2: #33353B; --muted: #63646B; --muted-2: #8A8B91; --scrim: rgb(20 22 28 / 0.32); --shadow-pop: 0 16px 48px rgb(20 22 28 / 0.14), 0 2px 6px rgb(20 22 28 / 0.08); --slate: #3A3B40; --rose-bg: #F6E3EE; --rose-ink: #8E3D6A; --cta-bg: #141518; --cta-ink: #FFFFFF; --cta-hover: #2A2C31; --st-active: #5D6F97; --st-trial: #B65A92; --st-paused: #9C7A6D; --st-lapsed: #8A8B91; --st-wait: #A3A4AA; --danger: #B4382B; --ok: #2F7A3A; --bar-track: #E3E4E8; --bar-fill: #141518; --accent: oklch(37% 0.13 262); --accent-row: color-mix(in oklab, var(--accent) 10%, #FFFFFF); --accent-pill: color-mix(in oklab, var(--accent) 22%, #E9EEF8); --focus: var(--accent); } /* accents, mapped from web-v3's set (shell.css) — the value per mode, nothing else */ :root[data-accent="deepgreen"] { --accent: oklch(64% 0.12 160); } :root[data-accent="sage"] { --accent: oklch(80% 0.09 152); } :root[data-accent="mist"] { --accent: oklch(80% 0.09 238); } :root[data-accent="lavender"] { --accent: oklch(80% 0.09 295); } :root[data-accent="clay"] { --accent: oklch(80% 0.09 40); } :root[data-accent="softlime"] { --accent: oklch(84% 0.12 122); } :root[data-accent="lime"] { --accent: #D4F53C; } :root[data-mode="light"][data-accent="deepgreen"] { --accent: oklch(39% 0.09 160); } :root[data-mode="light"][data-accent="sage"] { --accent: oklch(47% 0.095 152); } :root[data-mode="light"][data-accent="mist"] { --accent: oklch(47% 0.11 245); } :root[data-mode="light"][data-accent="lavender"] { --accent: oklch(49% 0.13 295); } :root[data-mode="light"][data-accent="clay"] { --accent: oklch(51% 0.12 38); } :root[data-mode="light"][data-accent="softlime"] { --accent: oklch(50% 0.13 128); } :root[data-mode="light"][data-accent="lime"] { --accent: oklch(50% 0.14 128); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; font-feature-settings: "tnum" 1, "ss01" 1; -webkit-font-smoothing: antialiased; overflow: hidden; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } img { display: block; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── app frame ───────────────────────────── */ .app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); height: 100vh; height: 100dvh; } /* ── sidebar ─────────────────────────────── */ .sb { background: var(--sidebar); border-right: 1px solid var(--line-soft); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; } .lights { display: none; gap: 8px; padding: 18px 0 0 20px; } .lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; } .lights i:nth-child(2) { background: #FEBC2E; } .lights i:nth-child(3) { background: #28C840; } html.in-frame .lights { display: flex; } .ws { display: flex; align-items: center; gap: 10px; margin: 20px 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); } html.in-frame .ws { margin-top: 18px; } .ws-av { width: 32px; height: 32px; border-radius: 50%; background: #F4F4F5; color: #111214; display: grid; place-items: center; flex: none; } .ws-av svg { --od-icon-size: 18px; } .ws-name { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; } .ws-sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; } .ib-ghost { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .ib-ghost svg { --od-icon-size: 17px; } @media (hover: hover) { .ib-ghost:hover { background: var(--chip); color: var(--text); } } .nav { overflow-y: auto; scrollbar-width: none; padding: 8px 16px 12px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); } .nav::-webkit-scrollbar { display: none; } .nav-sec + .nav-sec { margin-top: 6px; } .nav-h { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: var(--fs-cap); font-weight: 520; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); padding: 12px 8px 6px; border-radius: 6px; transition: color var(--t-fast) var(--ease-out); } .nav-h svg { --od-icon-size: 12px; transition: transform var(--t-mid) var(--ease-out); } .nav-h[aria-expanded="false"] svg { transform: rotate(-90deg); } @media (hover: hover) { button.nav-h:hover { color: var(--text-2); } } .nav[data-mode="scroll"] .nav-h svg { display: none; } .nav-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-mid) var(--ease-out); } .nav-list > div { overflow: hidden; min-height: 0; } .nav-sec[data-open="false"] .nav-list { grid-template-rows: 0fr; } .nav-i { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 8px; border-radius: var(--r-row); font-size: var(--fs-nav); color: var(--text-2); white-space: nowrap; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .nav-i svg { --od-icon-size: 18px; color: var(--muted); } .nav-i .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-i[aria-current="page"] { background: var(--accent-row); color: var(--text); } .nav-i[aria-current="page"] svg { color: var(--text); } @media (hover: hover) { .nav-i:hover { background: var(--panel-hover); color: var(--text); } .nav-i[aria-current="page"]:hover { background: var(--accent-row); } } .cnt { font-size: var(--fs-cap); line-height: 1; padding: 4px 7px; border-radius: var(--r-pill); background: var(--chip); color: var(--muted); font-weight: 500; } .cnt.new { letter-spacing: 0.02em; } .sb-foot { padding: 8px 16px 16px; position: relative; } .spend { margin-top: 12px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px 12px; } .spend-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); font-weight: 520; } .spend-top b { font-weight: 520; } .spend-bar { height: 4px; border-radius: 4px; background: var(--bar-track); margin: 10px 0 8px; overflow: hidden; } .spend-bar i { display: block; height: 100%; width: 74%; background: var(--bar-fill); border-radius: inherit; } .spend small { display: block; font-size: var(--fs-xs); color: var(--muted); } /* ── main ───────────────────────────────── */ .main { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 22px var(--gut) var(--gut); } .main > * { flex-shrink: 0; } /* the page scrolls; blocks never squash to fit */ .top { display: flex; align-items: center; gap: 12px; min-height: 30px; } .ib.menu-btn { display: none; } .crumbs { display: inline-flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 3px; font-size: var(--fs-sm); } .crumbs a, .crumbs span { padding: 3px 10px; border-radius: var(--r-pill); color: var(--muted); } .crumbs .sep { padding: 0; color: var(--muted-2); } .crumbs [aria-current] { color: var(--text); } @media (hover: hover) { .crumbs a:hover { color: var(--text); } } .top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; } .bell { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line-soft); display: grid; place-items: center; position: relative; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .bell svg { --od-icon-size: 17px; } .bell b { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--canvas); } @media (hover: hover) { .bell:hover { background: var(--chip); } } .bell:active { transform: scale(0.96); } .head { margin-top: 18px; } .head h1 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; } .head p { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-md); } .head p b { color: var(--text-2); font-weight: 450; } .ctl { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-pill); } .seg button { height: calc(var(--ctl-h) - 8px); padding: 0 11px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .seg button svg { --od-icon-size: 14px; } .seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--chip-on); color: var(--text); } @media (hover: hover) { .seg button:hover { color: var(--text); } } :root[data-mode="light"] .seg button[aria-pressed="true"], :root[data-mode="light"] .seg button[aria-checked="true"] { box-shadow: 0 1px 2px rgb(20 22 28 / 0.12); } .search { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl-h); padding: 0 12px; width: 252px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line-soft); color: var(--muted); transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .search svg { --od-icon-size: 14px; } .search input { border: 0; outline: 0; background: none; font-size: var(--fs-sm); width: 100%; min-width: 0; color: var(--text); } .search input::placeholder { color: var(--muted); } .search:focus-within { border-color: var(--focus); } .search .clear { display: none; color: var(--muted); } .search.has .clear { display: grid; } .pill { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h); padding: 0 12px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .pill svg { --od-icon-size: 14px; } .pill .n { font-size: var(--fs-cap); background: var(--chip-on); color: var(--text); border-radius: var(--r-pill); padding: 1px 6px; } @media (hover: hover) { .pill:hover { background: var(--chip); color: var(--text); } } .pill:active, .cta:active { transform: scale(0.97); } .pill[aria-expanded="true"] { background: var(--chip); color: var(--text); } .cta { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: var(--ctl-h); padding: 0 13px 0 8px; border-radius: var(--r-pill); background: var(--cta-bg); color: var(--cta-ink); font-size: var(--fs-sm); font-weight: 560; white-space: nowrap; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .cta svg { --od-icon-size: 17px; } @media (hover: hover) { .cta:hover { background: var(--cta-hover); } } /* ── overview ───────────────────────────── */ .ov-h { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; font-size: var(--fs-sm); line-height: 1.2; } .ov-h b { font-weight: 520; } .ov-h span { color: var(--muted-2); font-size: var(--fs-xs); } .ov-h a { margin-left: auto; color: var(--text-2); font-size: var(--fs-xs); } @media (hover: hover) { .ov-h a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } } .ov { display: grid; grid-template-columns: minmax(0, 2.06fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; height: 222px; } .ov > * { min-width: 0; } .tile { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-tile); padding: 14px 16px; position: relative; min-height: 0; } .tile-k { font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; } .hero { background: var(--hero); border-color: transparent; color: var(--hero-ink); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; } .hero .tile-k { color: var(--hero-ink-2); } .hero-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; pointer-events: none; } .live { display: inline-flex; align-items: center; gap: 6px; background: #0E0F11; color: #F4F4F5; border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; pointer-events: auto; } .live i { width: 6px; height: 6px; border-radius: 50%; background: #F4F4F5; animation: pulse 2.4s var(--ease-out) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .hero-num { grid-row: 3; position: relative; z-index: 2; pointer-events: none; } .hero-num strong { display: block; font-size: var(--fs-hero); font-weight: 300; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; } .hero-num small { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--hero-ink-2); } .cluster { position: absolute; top: 0; right: 0; width: 264px; height: 100%; z-index: 1; } .cl { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); box-shadow: 0 2px 6px rgb(20 22 30 / 0.18); display: grid; place-items: center; font-size: 11px; font-weight: 600; overflow: hidden; } .cl img { width: 100%; height: 100%; object-fit: cover; } .cl.ini { background: #F6F7FA; color: #3F4859; } .cl.ao { background: var(--pink); color: #5A2A4D; } .cl.more { background: #0E0F11; color: #F4F4F5; font-size: 12px; } .cl:focus-visible { outline-offset: 3px; } @media (hover: hover) { .cl:hover { transform: translate(-50%, -58%) scale(1.55); z-index: 5; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.35), 0 10px 24px rgb(20 22 30 / 0.28); } } .cl:focus-visible { transform: translate(-50%, -58%) scale(1.3); z-index: 5; } .cl-tip { position: absolute; z-index: 6; transform: translate(-50%, 0); background: #0E0F11; color: #F4F4F5; font-size: var(--fs-xs); padding: 4px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); } .cl-tip.on { opacity: 1; } .bub { display: grid; grid-template-rows: auto 1fr auto; container-type: inline-size; } .bub-foot .more { display: none; } @container (min-width: 236px) { .bub-foot .more { display: inline; } } .bub svg.chart { width: 100%; height: 100%; min-height: 0; overflow: visible; } .bub circle { transition: transform var(--t-mid) var(--ease-out); transform-box: fill-box; transform-origin: center; } @media (hover: hover) { .bub g.b:hover circle { transform: scale(1.06); } } .bub text { font-family: var(--font); text-anchor: middle; } .bub .bn { font-size: 15px; font-weight: 500; } .bub .bl { font-size: 10px; } .bub-foot { font-size: var(--fs-cap); color: var(--muted); line-height: 1.4; white-space: nowrap; } .pair { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; } .pair .tile { display: grid; grid-template-rows: auto 1fr; } .pair-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .pair-n { display: flex; align-items: baseline; gap: 6px; } .pair-n strong { font-size: var(--fs-tile); font-weight: 300; letter-spacing: -0.03em; line-height: 1; } .pair-n small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; } .stack { display: flex; align-items: center; } .stack > * { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--panel); margin-left: -8px; object-fit: cover; transition: transform var(--t-fast) var(--ease-out); } .stack > :first-child { margin-left: 0; } .stack .plus { display: grid; place-items: center; background: var(--chip); color: var(--text-2); font-size: 9px; font-weight: 600; } @media (hover: hover) { .stack > img:hover { transform: translateY(-3px); } } .rose { display: inline-flex; align-items: center; background: var(--rose-bg); color: var(--rose-ink); border-radius: var(--r-pill); padding: 4px 9px; font-size: var(--fs-xs); white-space: nowrap; } a.tile { transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } @media (hover: hover) { a.tile:hover { background: var(--panel-hover); border-color: var(--line); } a.tile:hover .go { opacity: 1; transform: none; } } .go { position: absolute; top: 12px; right: 12px; color: var(--muted); opacity: 0; transform: translate(-2px, 2px); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .go svg { --od-icon-size: 15px; } /* ── table section ──────────────────────── */ .tb-h { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .tb-h h2 { margin: 0; font-size: var(--fs-lg); font-weight: 550; letter-spacing: -0.01em; } .tb-h .sub { color: var(--muted-2); font-size: var(--fs-sm); } .ib { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line-soft); color: var(--text-2); transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); flex: none; } .ib svg { --od-icon-size: 15px; } @media (hover: hover) { .ib:hover { background: var(--chip); color: var(--text); } } .ib:active { transform: scale(0.94); } .tb-h .seg { margin-left: 4px; } .panel { margin-top: 10px; flex: 1 0 auto; min-height: 320px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-tile); overflow: hidden; } .view { flex: 1 1 0; min-height: 0; overflow-y: auto; } .grid-cols { display: grid; grid-template-columns: 44px minmax(168px, 2fr) minmax(80px, 0.7fr) minmax(108px, 0.85fr) minmax(168px, 1.3fr) minmax(140px, 1.2fr) minmax(96px, 0.9fr); align-items: center; } .thead { position: sticky; top: 0; z-index: 2; height: var(--head-h); background: var(--panel); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted-2); } .thead > span { padding: 0 8px; white-space: nowrap; } .thead > span:first-child, .tr > span:first-child { padding: 0 0 0 16px; } .tr { position: relative; min-height: var(--row-h); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; transition: background var(--t-fast) var(--ease-out); } .tr > span { padding: 0 8px; min-width: 0; } @media (hover: hover) { .tr:hover { background: var(--panel-hover); } } .tr[data-picked="true"] { background: var(--panel-checked); } .tr[aria-selected="true"] { background: var(--panel-checked); } .tr:focus-visible { outline-offset: -2px; } .cb { appearance: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #4A4B50; background: transparent; display: grid; place-items: center; cursor: pointer; margin: 0; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); position: relative; z-index: 1; } :root[data-mode="light"] .cb { border-color: #B9BAC0; } .cb:checked { background: #F4F4F5; border-color: #F4F4F5; } :root[data-mode="light"] .cb:checked { background: #141518; border-color: #141518; } .cb:checked::after { content: ""; width: 8px; height: 4px; border: solid #111214; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); } :root[data-mode="light"] .cb:checked::after { border-color: #fff; } .cb:indeterminate { background: #F4F4F5; border-color: #F4F4F5; } .cb:indeterminate::after { content: ""; width: 8px; height: 2px; background: #111214; } .who { display: flex; align-items: center; gap: 10px; } .av { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--chip); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--text-2); } .who b { display: block; font-weight: 500; color: var(--text); font-size: var(--fs-md); line-height: 1.25; } .who small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; } .plan { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 7px; background: var(--chip); color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; } .tr[data-picked="true"] .plan, .card[data-picked="true"] .plan, .tr[aria-selected="true"] .plan, .card[aria-selected="true"] .plan, .plan.sel { background: var(--accent-pill); color: var(--accent-pill-ink); } .st { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .st i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--st-active)); flex: none; } .st[data-s="trial"] { --dot: var(--st-trial); } .st[data-s="paused"] { --dot: var(--st-paused); } .st[data-s="lapsed"] { --dot: var(--st-lapsed); color: var(--muted); } .st[data-s="waitlist"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-wait); } .st em { font-style: normal; color: var(--muted); } .use { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .use .bar { width: 46px; height: 3px; border-radius: 3px; background: var(--bar-track); overflow: hidden; flex: none; } .use .bar i { display: block; height: 100%; background: var(--bar-fill); border-radius: inherit; } .use .q { font-weight: 500; color: var(--text); } .use[data-low="true"] .q { color: var(--muted); font-weight: 400; } .use .none { color: var(--muted-2); } .last { color: var(--text-2); white-space: nowrap; } .acts { position: absolute; right: 8px; top: 50%; transform: translate(4px, -50%); display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--panel-hover); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); box-shadow: -16px 0 16px var(--panel-hover); } .tr[aria-selected="true"] .acts, .tr[data-picked="true"] .acts { background: var(--panel-checked); box-shadow: -16px 0 16px var(--panel-checked); } @media (hover: hover) { .tr:hover .acts { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } } .tr:has(:focus-visible) .acts, .tr:focus-visible .acts { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } .act { position: relative; width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 8px; display: inline-flex; align-items: center; font-size: var(--fs-xs); color: var(--text-2); background: var(--chip); white-space: nowrap; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .act svg { --od-icon-size: 14px; } .act .tt { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 2px); background: var(--cta-bg); color: var(--cta-ink); font-size: var(--fs-cap); font-weight: 500; padding: 3px 7px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .act:hover .tt, .act:focus-visible .tt { opacity: 1; transform: translate(-50%, 0); } @media (hover: hover) { .act:hover { background: var(--chip-on); color: var(--text); } } .act:active { transform: scale(0.96); } /* cards view — tracks never narrower than a card's content: 4 across at 1920, 3 at 1440, 2 at 1280 */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; padding: 16px; align-content: start; } .cards > * { min-width: 0; } .card { position: relative; min-width: 0; container-type: inline-size; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: var(--panel); cursor: pointer; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } @media (hover: hover) { .card:hover { background: var(--panel-hover); transform: translateY(-2px); } } .card[aria-selected="true"], .card[data-picked="true"] { background: var(--panel-checked); } .card[aria-selected="true"] { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); } .card-top { display: flex; align-items: center; gap: 10px; min-width: 0; } .card-top .av { width: 40px; height: 40px; font-size: 13px; } .card-top .cb { margin-left: auto; align-self: flex-start; flex: none; } .card b { display: block; font-weight: 500; color: var(--text); font-size: var(--fs-md); line-height: 1.25; } .card small { display: block; color: var(--muted); font-size: var(--fs-xs); } .card-mid { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); } .card-mid .st { min-width: 0; max-width: 100%; } .card-mid .st > span { overflow: hidden; text-overflow: ellipsis; } .card-foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); gap: 8px; min-width: 0; } .card-foot > :first-child { min-width: 0; overflow: hidden; } .card-foot > :last-child { flex: none; } .card .use .bar { width: 64px; } /* a narrow card puts the status on its own line, under the plan */ @container (max-width: 300px) { .card-mid { flex-direction: column; align-items: flex-start; } .card .use .bar { width: 44px; } } /* wide screens with the drawer open: the cards reflow beside it instead of under it */ @media (min-width: 1600px) { html[data-dw="open"][data-view="cards"] .cards { padding-right: calc(min(520px, 100vw - 24px) + 12px - var(--gut) + 16px); } } .empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 40px 16px; } .empty img { width: 96px; height: 96px; } .empty h3 { margin: 6px 0 0; font-size: var(--fs-lg); font-weight: 550; } .empty p { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 40ch; } .empty .pill { margin-top: 10px; } .pf { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); flex: none; position: relative; z-index: 3; background: var(--panel); transition: box-shadow var(--t-fast) var(--ease-out); } .pf.more { box-shadow: 0 -10px 16px -12px rgb(0 0 0 / 0.55); } :root[data-mode="light"] .pf.more { box-shadow: 0 -10px 16px -12px rgb(20 22 28 / 0.22); } .picked { flex: none; } .pf .sp { flex: 1; } .pf .ib { width: 28px; height: 28px; } .pf .ib:disabled { opacity: 0.4; cursor: not-allowed; } .picked { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-top: 1px solid var(--line-soft); background: var(--panel-checked); font-size: var(--fs-sm); } .picked .sp { flex: 1; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 520; white-space: nowrap; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); } .btn svg { --od-icon-size: 15px; } .btn:active { transform: scale(0.97); } .btn.pri { background: var(--cta-bg); color: var(--cta-ink); } @media (hover: hover) { .btn.pri:hover { background: var(--cta-hover); } .btn.ghost:hover { background: var(--chip); } .btn.danger:hover { filter: brightness(1.08); } } .btn.ghost { color: var(--text-2); } .btn.line { border: 1px solid var(--line); color: var(--text-2); } .btn.danger { background: color-mix(in oklab, var(--danger) 22%, var(--panel)); color: var(--danger); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* ── popovers (filter, bell, appearance) ── */ .pop { position: absolute; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 14px; transform-origin: top left; animation: popIn var(--t-mid) var(--ease-out); } .pop.closing { animation: popOut 150ms var(--ease-in) forwards; } @keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } } @keyframes popOut { to { opacity: 0; transform: translateY(-4px) scale(0.98); } } .fpop { width: 300px; display: grid; gap: 12px; } .fld { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--muted); } .fld > span:first-child { font-weight: 500; } .inp { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--canvas); color: var(--text); padding: 0 10px; font-size: var(--fs-sm); width: 100%; transition: border-color var(--t-fast) var(--ease-out); } textarea.inp { height: auto; padding: 8px 10px; resize: vertical; min-height: 64px; line-height: 1.5; } .inp:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent); } .inp[aria-invalid="true"] { border-color: var(--danger); } select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; } .ferr { color: var(--danger); font-size: var(--fs-xs); } .pop-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .bpop { width: 320px; right: 0; top: 44px; transform-origin: top right; padding: 8px; } .bpop h3 { margin: 4px 8px 6px; font-size: var(--fs-sm); font-weight: 550; } .al { display: flex; gap: 10px; padding: 10px 8px; border-radius: 10px; font-size: var(--fs-sm); color: var(--text-2); } @media (hover: hover) { .al:hover { background: var(--panel-hover); } } .al i { width: 6px; height: 6px; border-radius: 50%; background: #E5484D; margin-top: 7px; flex: none; } .al small { display: block; color: var(--muted); font-size: var(--fs-xs); } .apop { left: 16px; right: 16px; bottom: 100%; margin-bottom: 6px; transform-origin: bottom left; display: grid; gap: 12px; } .apop h3 { margin: 0; font-size: var(--fs-sm); font-weight: 550; } .accs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .acc { height: 30px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; } .acc span { width: 14px; height: 14px; border-radius: 50%; background: var(--dot); } .acc[aria-checked="true"] { border-color: var(--text); } .apop .seg { width: 100%; } .apop .seg button { flex: 1; justify-content: center; } /* ── drawer (SupportPanel) ─────────────── */ .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); } .scrim.on { opacity: 1; } .drawer { position: fixed; z-index: 41; top: 12px; right: 12px; bottom: 12px; width: min(520px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-window); box-shadow: var(--shadow-pop); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; transform: translateX(calc(100% + 24px)); transition: transform var(--t-slow) var(--ease-out); } .drawer.on { transform: none; } .drawer.closing { transition: transform 200ms var(--ease-in); } .dw-h { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--line-soft); } .dw-h .av { width: 44px; height: 44px; font-size: 14px; } .dw-h h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } .dw-h small { display: block; color: var(--muted); font-size: var(--fs-sm); } .dw-b { overflow-y: auto; padding: 16px 20px 20px; display: grid; grid-auto-rows: max-content; gap: 16px; align-content: start; } .dw-f { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); } .dw-f .mail { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chipx { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--chip); font-size: var(--fs-xs); color: var(--text-2); gap: 8px; white-space: nowrap; } .kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; } .kv > div { background: var(--panel); padding: 10px 12px; } .kv dt { font-size: var(--fs-xs); color: var(--muted); } .kv dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text); font-weight: 500; } .tabs { display: flex; gap: 2px; padding: 3px; background: var(--canvas); border: 1px solid var(--line-soft); border-radius: var(--r-pill); width: max-content; max-width: 100%; } .tabs button { height: 28px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .tabs button[aria-selected="true"] { background: var(--chip-on); color: var(--text); } .tabs .n { font-size: var(--fs-cap); color: var(--muted); } .modes { display: grid; gap: 4px; } .mode { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); text-align: left; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .mode svg { --od-icon-size: 16px; color: var(--muted); } .mode em { font-style: normal; color: var(--muted); } @media (hover: hover) { .mode:hover { background: var(--panel-hover); } } .mode[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); background: var(--panel-hover); color: var(--text); } .mode[aria-pressed="true"] svg { color: var(--text); } .mode.danger svg, .mode.danger { color: var(--danger); } .form { display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line-soft); } .form .seg { background: var(--panel); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .msg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: var(--fs-sm); background: color-mix(in oklab, var(--ok) 14%, var(--panel)); color: var(--text); } .msg img { width: 32px; height: 32px; } .msg.bad { background: color-mix(in oklab, var(--danger) 14%, var(--panel)); } .tl { display: grid; } .tl > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); align-items: start; } .tl > div:last-child { border-bottom: 0; } .tl .ci { width: 24px; height: 24px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; color: var(--text-2); } .tl .ci svg { --od-icon-size: 12px; } .tl time { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; padding-top: 2px; } .preview { border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; color: #141518; padding: 18px; font-size: 14px; line-height: 1.6; } .preview h4 { margin: 0 0 8px; font-size: 16px; } .preview .pv-k { font-size: 11px; color: #63646B; letter-spacing: 0.06em; text-transform: uppercase; } /* ── dialogs ─────────────────────────────── */ dialog.dlg { border: 1px solid var(--line); border-radius: var(--r-window); background: var(--panel); color: var(--text); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); } dialog.dlg::backdrop { background: var(--scrim); } dialog.dlg[open] { animation: popIn var(--t-mid) var(--ease-out); } .dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 20px; } .dlg-h h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; } .dlg-b { padding: 14px 20px 20px; display: grid; gap: 12px; } .dlg-f { display: flex; justify-content: flex-end; gap: 8px; } .pick-list { display: grid; gap: 2px; max-height: 176px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 10px; padding: 4px; } .pick-list button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; text-align: left; font-size: var(--fs-sm); } .pick-list button .av { width: 24px; height: 24px; font-size: 9px; } .pick-list button[aria-pressed="true"] { background: var(--chip-on); } @media (hover: hover) { .pick-list button:hover { background: var(--panel-hover); } } /* toast */ .toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 10px; background: var(--cta-bg); color: var(--cta-ink); padding: 8px 16px 8px 8px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow-pop); transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); pointer-events: none; } .toast img { width: 28px; height: 28px; } .toast.on { opacity: 1; transform: translate(-50%, 0); } /* sheet backdrop for the phone sidebar */ .sb-scrim { display: none; } /* ── widths ─────────────────────────────── */ @media (min-width: 1600px) { :root { --gut: 32px; } .ov { height: 240px; } } @media (max-width: 1180px) { } @media (max-width: 1080px) { .grid-cols { grid-template-columns: 44px minmax(170px, 2fr) minmax(80px, 0.7fr) minmax(168px, 1.3fr) minmax(136px, 1.2fr) minmax(92px, 0.9fr); } .col-school { display: none !important; } .search { width: 200px; } } @media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); } .sb { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform var(--t-slow) var(--ease-out); border-right: 1px solid var(--line); box-shadow: var(--shadow-pop); } .sb.open { transform: none; } .sb-scrim { display: block; position: fixed; inset: 0; z-index: 49; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--t-slow) var(--ease-out); } .sb-scrim.on { opacity: 1; pointer-events: auto; } .ib.menu-btn { display: grid; } .ov { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; } .hero { grid-column: 1 / -1; height: 222px; } .bub, .pair { height: 200px; } } @media (max-width: 640px) { :root { --gut: 16px; --fs-title: 28px; --fs-hero: 48px; } .main { padding-top: 16px; } .head { margin-top: 16px; } .ctl .seg { order: 1; flex: 1 1 100%; } .ctl .seg button { flex: 1; justify-content: center; } .ctl .search { order: 2; flex: 1 1 0; width: auto; height: 44px; } .ctl > div { order: 3; } .ctl .pill { height: 44px; } .ctl .cta { order: 4; flex: 1 1 100%; justify-content: center; margin-left: 0; height: 44px; } .seg button { height: 36px; } .cta { height: 40px; } .ov { grid-template-columns: minmax(0, 1fr); } .hero { height: 236px; } .cluster { transform: scale(0.8); transform-origin: 100% 30%; } .bub { height: 220px; } .pair { height: auto; grid-template-rows: none; } .pair .tile { min-height: 104px; } .tb-h .viewseg { display: none; } .panel { min-height: 0; flex: none; overflow: visible; } .view { overflow: visible; } .cards { grid-template-columns: minmax(0, 1fr); padding: 12px; } .pf { flex-wrap: wrap; } .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 92dvh; border-radius: var(--r-window) var(--r-window) 0 0; transform: translateY(102%); } .row2 { grid-template-columns: 1fr; } .fpop { width: auto; left: 0 !important; right: 0; } .bpop { width: min(320px, calc(100vw - 32px)); } body { overflow: hidden; } .act, .ib, .bell, .pill { min-height: 40px; } .ib, .bell { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } /* collapsed sidebar (desktop): an icon rail, every page still one click away */ @media (min-width: 901px) { html.sb-mini .app { grid-template-columns: 68px minmax(0, 1fr); } html.sb-mini .ws { flex-direction: column; margin-inline: 10px; gap: 8px; } html.sb-mini .ws > .od-fill, html.sb-mini .nav-h, html.sb-mini .nav-i .lbl, html.sb-mini .nav-i .cnt, html.sb-mini .spend { display: none; } html.sb-mini .nav { padding-inline: 10px; } html.sb-mini .nav-sec[data-open] .nav-list { grid-template-rows: 1fr; } html.sb-mini .nav-sec + .nav-sec { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); } html.sb-mini .nav-i { justify-content: center; padding: 0; } html.sb-mini .nav-i[tabindex="-1"] { pointer-events: auto; } html.sb-mini .sb-foot { padding-inline: 10px; } html.sb-mini .apop { left: 10px; right: auto; width: 260px; } html.sb-mini .lights { padding-left: 14px; gap: 6px; } html.sb-mini .lights i { width: 10px; height: 10px; } } /* ═════════ shared pieces for the Today pages (Overview, Alerts, Inbox) — same tokens, same grammar ═════════ */ a.spend { display: block; color: inherit; transition: background var(--t-fast) var(--ease-out); } @media (hover: hover) { a.spend:hover { background: var(--panel-hover); } } .al i[data-sev="warn"] { background: var(--blush); } .al i[data-sev="info"] { background: var(--pale-blue); } .al > span { min-width: 0; } .al-all { align-items: center; border-top: 1px solid var(--line-soft); border-radius: 0 0 10px 10px; margin-top: 4px; color: var(--text); } .al-all > span { flex: 1; } .al-all svg { --od-icon-size: 15px; color: var(--muted); } .bpop-empty { margin: 4px 8px 10px; color: var(--muted); font-size: var(--fs-sm); } /* tile figures */ .ov.tall { height: 252px; } .fig { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .fig strong { font-size: var(--fs-tile); font-weight: 300; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; } .fig small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .tile-s { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile-s s { color: var(--muted-2); } .pair .tile { min-width: 0; } .pair .tile:has(> .tile-s) { grid-template-rows: auto minmax(0, 1fr) auto; } .pair .tile > .tile-s { margin-top: 4px; } .pair .tile > .tile-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 0; } .pair .tile > .tile-b > :first-child { min-width: 0; } .spark { width: 92px; height: 34px; flex: none; overflow: visible; } .spark path.l { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .spark path.a { fill: color-mix(in oklab, var(--text) 10%, transparent); stroke: none; } .spark circle { fill: var(--text); } .meter { display: block; height: 4px; border-radius: 4px; background: var(--bar-track); overflow: hidden; min-width: 32px; } .meter i { display: block; height: 100%; background: var(--bar-fill); border-radius: inherit; } .mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; flex: none; } .mini-bars i { width: 6px; border-radius: 2px; background: var(--chip-on); } .mini-bars i:last-child { background: var(--text); } /* the periwinkle hero as a list (Overview's Needs you) */ .hero.list { grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; } .hero .hero-k { display: flex; align-items: baseline; gap: 8px; } .hero .hero-k b { font-size: var(--fs-md); font-weight: 560; color: var(--hero-ink); } .hero .hero-k a { margin-left: auto; font-size: var(--fs-xs); color: var(--hero-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(20 22 27 / 0.3); pointer-events: auto; } .needs { display: grid; gap: 2px; align-content: start; min-height: 0; overflow: hidden; margin: 0 -8px; } .nd { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 3px 8px; border-radius: 10px; color: var(--hero-ink); transition: background var(--t-fast) var(--ease-out); min-width: 0; } @media (hover: hover) { .nd:hover { background: rgb(255 255 255 / 0.42); } } .nd .ni { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgb(255 255 255 / 0.55); color: #2A3242; } .nd .ni svg { --od-icon-size: 15px; } .nd .ni[data-sev="critical"] { background: #14161B; color: #F4F4F5; } .nd b { display: block; font-weight: 560; font-size: var(--fs-sm); line-height: 1.2; } .nd small { display: block; color: var(--hero-ink-2); font-size: var(--fs-xs); line-height: 1.25; } .nd time { font-size: var(--fs-xs); color: var(--hero-ink-2); white-space: nowrap; } .hero-foot { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--hero-ink-2); min-width: 0; } .hero-foot .live { flex: none; } .hero-foot > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero .empty-in { display: flex; align-items: center; gap: 14px; } .hero .empty-in img { width: 72px; height: 72px; } .hero .empty-in b { display: block; font-size: var(--fs-lg); font-weight: 560; } /* severity summary in the Alerts hero, waiting summary in the Inbox hero */ .sevs { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; position: relative; z-index: 2; } .sev-p { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.55); color: var(--hero-ink); font-size: var(--fs-xs); font-weight: 520; white-space: nowrap; } .sev-p svg { --od-icon-size: 14px; } .sev-p[data-sev="critical"] { background: #14161B; color: #F4F4F5; } .hero-art { position: absolute; right: 16px; top: 52px; bottom: 58px; width: 48%; display: flex; flex-direction: column; justify-content: center; gap: 6px; z-index: 1; pointer-events: none; } .hero-art .ha { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgb(255 255 255 / 0.5); color: var(--hero-ink); font-size: var(--fs-xs); min-width: 0; } .hero-art .ha svg { --od-icon-size: 14px; } .hero-art .ha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-art .ha time { color: var(--hero-ink-2); white-space: nowrap; } .hero-art .ha:nth-child(2) { margin-left: 14px; opacity: 0.88; } .hero-art .ha:nth-child(3) { margin-left: 28px; opacity: 0.72; } .hero-art .ha:nth-child(n+4) { display: none; } .hero .hero-num strong { font-size: var(--fs-hero); } .dots { display: grid; grid-template-columns: repeat(10, 10px); gap: 6px; align-content: end; } .dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--chip-on); } .dots i.on { background: var(--pale-blue); box-shadow: none; } .dots i.on.open { background: var(--pink); } /* boxes: the working surface below the tile row */ .sec-h { display: flex; align-items: center; gap: 12px; margin-top: 20px; min-width: 0; } .sec-h h2 { margin: 0; font-size: var(--fs-lg); font-weight: 550; letter-spacing: -0.01em; white-space: nowrap; } .sec-h .sub { color: var(--muted-2); font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sec-h .lnk { margin-left: auto; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .sec-h .lnk svg { --od-icon-size: 13px; } @media (hover: hover) { .sec-h .lnk:hover, .box-h .lnk:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } } .cols { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 340px)), 1fr)); } .cols > * { min-width: 0; } .box { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-tile); min-width: 0; display: flex; flex-direction: column; } .box-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; min-width: 0; } .box-h h3 { margin: 0; font-size: var(--fs-md); font-weight: 560; white-space: nowrap; } .box-h .k { color: var(--muted-2); font-size: var(--fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .box-h .lnk { margin-left: auto; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; } .box-b { padding: 12px 16px 16px; display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; flex: 1; min-width: 0; } .box-f { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); min-width: 0; margin-top: auto; } .box-f > .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chipx.n { color: var(--text); } /* a strip of figures */ .strip { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); background: var(--line-soft); gap: 1px; border: 1px solid var(--line-soft); border-radius: var(--r-tile); overflow: hidden; } .strip > div { background: var(--panel); padding: 12px 14px; min-width: 0; } .strip dt { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .strip dt svg { --od-icon-size: 13px; flex: none; } .strip dd { margin: 6px 0 0; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; overflow: hidden; } .strip dd small { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; } /* programmes table */ .pt-cols { display: grid; grid-template-columns: minmax(200px, 1.6fr) minmax(96px, 0.6fr) minmax(170px, 1.1fr) minmax(70px, 0.45fr) minmax(104px, 0.7fr) minmax(90px, 0.6fr) minmax(130px, 0.9fr); align-items: center; } .pt-cols > span { padding: 0 10px; min-width: 0; } .pt-cols > span:first-child { padding-left: 16px; } .pt-cols > span:last-child { padding-right: 16px; } .pt-cols .r { text-align: right; justify-self: stretch; } .tr.pt { cursor: pointer; } .nm b { display: block; color: var(--text); font-weight: 500; font-size: var(--fs-md); line-height: 1.25; } .nm small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; } .mrow { display: flex; align-items: center; gap: 10px; min-width: 0; } .mrow .meter { flex: 1; } .mrow span { white-space: nowrap; font-size: var(--fs-xs); color: var(--text-2); } .st[data-s="live"], .st[data-s="ready"] { --dot: var(--ok); } .st[data-s="building"] { --dot: var(--pale-blue); } .st[data-s="planned"], .st[data-s="archived"] { --dot: var(--st-lapsed); color: var(--muted); } .st[data-s="wait"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-wait); } .st[data-s="open"] { --dot: var(--danger); } .st[data-s="done"] { --dot: var(--ok); } .st[data-s="run"] { --dot: var(--pale-blue); } .st[data-s="cancel"] { --dot: var(--st-lapsed); color: var(--muted); } /* tinted icon squares: tone by meaning, from the existing tokens only */ .ico-t { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--chip); color: var(--text-2); } .ico-t svg { --od-icon-size: 15px; } .ico-t.ind { background: color-mix(in oklab, var(--pale-blue) 22%, var(--panel)); color: color-mix(in oklab, var(--pale-blue) 80%, var(--text)); } .ico-t.warn { background: color-mix(in oklab, var(--blush) 22%, var(--panel)); color: color-mix(in oklab, var(--blush) 80%, var(--text)); } .ico-t.bad { background: color-mix(in oklab, var(--danger) 20%, var(--panel)); color: var(--danger); } .ico-t.ok { background: color-mix(in oklab, var(--ok) 20%, var(--panel)); color: var(--ok); } .ico-t.cat { background: color-mix(in oklab, var(--pink) 22%, var(--panel)); color: color-mix(in oklab, var(--pink) 80%, var(--text)); } :root[data-mode="light"] .ico-t.ind { background: color-mix(in oklab, var(--pale-blue) 45%, var(--panel)); color: #34405A; } :root[data-mode="light"] .ico-t.warn { background: color-mix(in oklab, var(--blush) 50%, var(--panel)); color: #5A403A; } :root[data-mode="light"] .ico-t.cat { background: color-mix(in oklab, var(--pink) 45%, var(--panel)); color: #6A2F5A; } /* feed, bars, ring, checks */ .feed { display: grid; } .fr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; } .fr:last-child { border-bottom: 0; } .fr b { color: var(--text); font-weight: 500; } .fr .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr time { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; } .hbar { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-sm); min-width: 0; } .hbar > span:first-child { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar .bar { height: 8px; border-radius: 4px; background: var(--bar-track); overflow: hidden; } .hbar .bar i { display: block; height: 100%; border-radius: inherit; background: var(--pale-blue); } .hbar .bar i.paid { background: var(--blush); } .hbar > span:last-child { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; } .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); } .mini3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mini2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mt { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; min-width: 0; display: block; color: inherit; } a.mt { transition: background var(--t-fast) var(--ease-out); } @media (hover: hover) { a.mt:hover { background: var(--panel-hover); } } .mt dt, .mt .k { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mt dt svg, .mt .k svg { --od-icon-size: 13px; flex: none; } .mt dd, .mt .v { margin: 4px 0 0; display: block; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mt small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ring-row { display: flex; align-items: center; gap: 18px; min-width: 0; } .ring { width: 92px; height: 92px; flex: none; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 9; } .ring .tr0 { stroke: var(--bar-track); } .ring .tr1 { stroke: var(--pale-blue); stroke-linecap: round; } .ring-row b { display: block; font-size: 26px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; } .ring-row .k { font-size: var(--fs-xs); color: var(--muted); } .chk { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; } .chk:last-child { border-bottom: 0; } .chk .ico-t { width: 26px; height: 26px; border-radius: 8px; } .chk .ico-t svg { --od-icon-size: 13px; } .chk > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; } .chk > span:last-child { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; } a.chk { color: var(--text-2); } @media (hover: hover) { a.chk:hover > span:nth-child(2) { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } } .stackbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bar-track); gap: 2px; } .stackbar i { display: block; height: 100%; background: var(--c); } /* list + reading pane (Alerts, Inbox) */ .split { flex: 1 0 auto; height: 0; min-height: 400px; margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: minmax(0, 1fr); gap: 12px; } .split > .box { min-height: 0; overflow: hidden; } .lst-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--line-soft); min-width: 0; flex: none; } .lst-h h3 { margin: 0; font-size: var(--fs-md); font-weight: 560; white-space: nowrap; } .lst-h .k { color: var(--muted-2); font-size: var(--fs-xs); white-space: nowrap; } .fchips { display: flex; flex-wrap: nowrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); flex: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .fchips::-webkit-scrollbar { display: none; } .fchip { flex: none; } .fchips::after { content: ""; flex: 0 0 12px; } .fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: var(--r-pill); background: var(--chip); color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; transition: background var(--t-fast) var(--ease-out); } .fchip .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--chip-on); color: var(--text); display: grid; place-items: center; font-size: var(--fs-cap); } .fchip[aria-pressed="true"] { background: var(--accent-pill); color: var(--accent-pill-ink); } .fchip[aria-pressed="true"] .n { background: rgb(255 255 255 / 0.6); color: var(--accent-pill-ink); } @media (hover: hover) { .fchip:hover { background: var(--chip-hover); } .fchip[aria-pressed="true"]:hover { filter: brightness(1.04); background: var(--accent-pill); } } .lst { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: grid; grid-auto-rows: max-content; gap: 2px; align-content: start; overscroll-behavior: contain; } .alrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; text-align: left; width: 100%; min-width: 0; transition: background var(--t-fast) var(--ease-out); } @media (hover: hover) { .alrow:hover { background: var(--panel-hover); } } .alrow[aria-current="true"] { background: var(--accent-row); } .alrow b { display: block; font-weight: 500; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alrow small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alrow time { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; align-self: start; padding-top: 2px; } .alrow .unread { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; margin-left: 6px; vertical-align: middle; } .pane { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 20px; display: grid; grid-auto-rows: max-content; gap: 16px; align-content: start; overscroll-behavior: contain; } .pane-h { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .pane-h .ico-t { width: 36px; height: 36px; border-radius: 10px; } .pane-h .ico-t svg { --od-icon-size: 18px; } .pane-h .k { display: block; font-size: var(--fs-xs); color: var(--muted); } .pane-h h2 { margin: 2px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; } .pane-h .st { margin-left: auto; flex: none; font-size: var(--fs-xs); } .pane-h .ib { margin-left: auto; } .qt { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; } .qt.pre { white-space: pre-wrap; background: var(--canvas); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; } .kv.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv dd { overflow-wrap: anywhere; } .todo { display: grid; gap: 6px; } .todo .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; } .todo li { list-style: none; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--fs-sm); color: var(--text-2); } .todo ul { margin: 0; padding: 0; display: grid; gap: 6px; } .todo li .ci { width: 20px; height: 20px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; margin-top: 1px; } .todo li .ci svg { --od-icon-size: 11px; } .keyline { margin: 0; font-size: var(--fs-xs); color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in oklab, var(--ok) 12%, var(--panel)); font-size: var(--fs-sm); color: var(--text); } .banner img { width: 40px; height: 40px; flex: none; } .banner small { display: block; color: var(--muted); font-size: var(--fs-xs); } .banner > span { min-width: 0; overflow-wrap: anywhere; } .act-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .act-row .ferr { flex-basis: 100%; } .sample { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--chip-on); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; margin-left: 6px; } /* inbox media and triage */ .shot { border-radius: 14px; overflow: hidden; background: var(--canvas); border: 1px solid var(--line-soft); display: grid; place-items: center; } .shot img { width: 100%; max-height: 380px; object-fit: contain; } .drop { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); color: var(--text-2); min-width: 0; } .drop .ico-t { width: 40px; height: 40px; border-radius: 10px; } .drop b { display: block; color: var(--text); font-weight: 500; font-size: var(--fs-sm); } .drop small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) { a.drop:hover { background: var(--panel-hover); } } .voice { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line-soft); min-width: 0; } .voice .play { width: 40px; height: 40px; border-radius: 50%; background: var(--cta-bg); color: var(--cta-ink); display: grid; place-items: center; } .voice .play svg { --od-icon-size: 16px; } .wave { display: flex; align-items: center; gap: 2px; height: 32px; min-width: 0; overflow: hidden; } .wave i { flex: 1 0 3px; max-width: 4px; border-radius: 2px; background: var(--chip-on); transition: background var(--t-fast) linear; } .wave i.on { background: var(--text); } .voice time { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .opt { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); text-align: left; font-size: var(--fs-sm); color: var(--text-2); min-width: 0; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .opt .ico-t { width: 26px; height: 26px; border-radius: 8px; } .opt .ico-t svg { --od-icon-size: 13px; } .opt b { display: block; color: var(--text); font-weight: 500; line-height: 1.3; } .opt small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; } @media (hover: hover) { .opt:hover { background: var(--panel-hover); } } .opt[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); background: var(--panel-hover); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--muted); } .form .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; } .form.flat { background: none; border: 0; padding: 0; } .pane-sep { height: 1px; background: var(--line-soft); } .sheet-only { display: none; } /* page-level widths for the new pieces */ @media (max-width: 1280px) { .pt-cols { grid-template-columns: minmax(180px, 1.6fr) minmax(92px, 0.6fr) minmax(150px, 1.1fr) minmax(100px, 0.7fr) minmax(120px, 0.9fr); } .pt-cols .md { display: none !important; } } @media (max-width: 1080px) { .pt-cols { grid-template-columns: minmax(170px, 1.5fr) minmax(92px, 0.6fr) minmax(100px, 0.7fr) minmax(110px, 0.9fr); } .pt-cols .lg { display: none !important; } } @media (max-width: 900px) { .ov.tall { height: auto; } .ov.tall .hero { height: 252px; } .ov.tall .pair { height: 220px; } .split { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; flex: none; } .split > .pane-box { display: none; } .split > .box { overflow: visible; } .lst { overflow: visible; } .sheet-only { display: inline-flex; } .drawer .pane { padding: 16px 18px 20px; } } @media (max-width: 640px) { .pt-cols { grid-template-columns: minmax(0, 1fr) minmax(96px, auto); } .pt-cols .sm { display: none !important; } .ov.tall .hero { height: auto; min-height: 252px; } .ov.tall .pair { height: auto; } .hero-art { display: none; } .opts { grid-template-columns: minmax(0, 1fr); } .kv.two { grid-template-columns: minmax(0, 1fr); } .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hbar { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; } .mini3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mini3 > :last-child { grid-column: 1 / -1; } .sec-h { flex-wrap: wrap; } .alrow { padding: 12px 10px; } .fchip { height: 32px; } } .seg button .n { font-size: var(--fs-cap); color: var(--muted); font-weight: 500; } .seg button[aria-pressed="true"] .n { color: var(--text-2); } @media (max-width: 640px) { .ov-h { flex-wrap: wrap; row-gap: 4px; } .ov-h span { flex: 1 1 auto; min-width: 0; } .ov-h a { white-space: nowrap; } .ov .hero:has(.hero-art) { height: auto; min-height: 168px; } } .toast { max-width: min(560px, calc(100vw - 32px)); } .toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ═════════ Money pages (Payments, Accounting, Plans & codes, Supporters, Venture) — the same tokens and grammar ═════════ */ /* a data table whose columns are set per table (--cols), folding like the live DT's md/sm sets */ .dt { display: grid; grid-auto-rows: max-content; min-width: 0; } .dtr { display: grid; grid-template-columns: var(--cols); align-items: center; min-width: 0; } .dtr > span { padding: 0 10px; min-width: 0; } .dtr > span:first-child { padding-left: 16px; } .dtr > span:last-child { padding-right: 16px; } .dtr .r, .thead.dtr .r { text-align: right; } .dtr .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dtr.tot { min-height: 44px; background: var(--canvas); font-weight: 520; color: var(--text); font-size: var(--fs-sm); border-bottom: 0; cursor: default; } .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .mut { color: var(--muted); } s.list { color: var(--muted-2); text-decoration-thickness: 1px; } @media (max-width: 1280px) { .dtr { grid-template-columns: var(--cols-md, var(--cols)); } .dtr .md { display: none !important; } } @media (max-width: 1080px) { .dtr { grid-template-columns: var(--cols-lg, var(--cols-md, var(--cols))); } .dtr .lg { display: none !important; } } @media (max-width: 640px) { .dtr { grid-template-columns: var(--cols-sm, var(--cols-md, var(--cols))); } .dtr .sm { display: none !important; } } /* category tags: pastels only, always with a word */ .tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; background: var(--chip); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tag svg { --od-icon-size: 12px; flex: none; } .tag[data-c="blue"] { background: color-mix(in oklab, var(--pale-blue) 24%, var(--panel)); color: color-mix(in oklab, var(--pale-blue) 82%, var(--text)); } .tag[data-c="blush"] { background: color-mix(in oklab, var(--blush) 24%, var(--panel)); color: color-mix(in oklab, var(--blush) 82%, var(--text)); } .tag[data-c="pink"] { background: color-mix(in oklab, var(--pink) 24%, var(--panel)); color: color-mix(in oklab, var(--pink) 82%, var(--text)); } .tag[data-c="dash"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); } :root[data-mode="light"] .tag[data-c="blue"] { background: color-mix(in oklab, var(--pale-blue) 50%, var(--panel)); color: #34405A; } :root[data-mode="light"] .tag[data-c="blush"] { background: color-mix(in oklab, var(--blush) 55%, var(--panel)); color: #5A403A; } :root[data-mode="light"] .tag[data-c="pink"] { background: color-mix(in oklab, var(--pink) 50%, var(--panel)); color: #6A2F5A; } .st[data-s="ok"] { --dot: var(--ok); } .st[data-s="fail"] { --dot: var(--danger); } .st[data-s="need"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-wait); } /* a checkout's itemised lines: list price, each perk, the charge */ .lines { display: grid; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; } .lines > div { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); } .lines > div:last-child { border-bottom: 0; } .lines .ico-t { width: 26px; height: 26px; border-radius: 8px; } .lines .ico-t svg { --od-icon-size: 13px; } .lines .amt { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); } .lines .amt.neg { color: var(--text-2); } .lines .sum { background: var(--canvas); color: var(--text); font-weight: 520; } .lines .sum small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); } .lines > div > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; } .perkset { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; } /* the price ladder in a hero: one rung a row, longest bar at list */ .ladder { display: grid; gap: 7px; align-content: center; min-width: 0; } .rung { display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-xs); color: var(--hero-ink-2); min-width: 0; } .rung > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rung .bar { height: 8px; border-radius: 4px; background: rgb(255 255 255 / 0.45); overflow: hidden; } .rung .bar i { display: block; height: 100%; border-radius: inherit; background: #14161B; opacity: 0.82; } .rung b { font-weight: 560; color: var(--hero-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .rung.list .bar i { background: transparent; box-shadow: inset 0 0 0 1.5px #14161B; opacity: 0.35; } .hero .price-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .hero .price-big strong { font-size: var(--fs-hero); font-weight: 300; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; } .hero .price-big s { color: var(--hero-ink-2); font-size: var(--fs-lg); } .hero .price-big small { color: var(--hero-ink-2); font-size: var(--fs-sm); } .hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: end; min-height: 0; } .hero .stackbar { background: rgb(255 255 255 / 0.45); height: 12px; border-radius: 6px; } .hero .legend { color: var(--hero-ink-2); } .hero .meter { background: rgb(255 255 255 / 0.5); height: 8px; } .hero .meter i { background: #14161B; } .hero .mini-bars i { background: rgb(20 22 27 / 0.28); } .hero .mini-bars i:last-child { background: #14161B; } /* a tile's ladder rows (Elite, Solo) */ .rows { display: grid; gap: 0; min-width: 0; align-content: end; } .rows > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); min-width: 0; } .rows > div:last-child { border-bottom: 0; } .rows > div > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rows b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .tile .tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .tile.ladder-t { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; } .tile.ladder-t .tile-b { align-self: end; } .tile.ladder-t .fig s { color: var(--muted-2); font-size: var(--fs-sm); } .chips.foot { gap: 6px; } .chips.foot .chipx { height: 22px; font-size: var(--fs-cap); padding: 0 8px; gap: 5px; } .chips.foot .chipx svg { --od-icon-size: 12px; } /* venture: expandable inputs and checklist items */ .det { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); min-width: 0; } .det + .det { margin-top: 6px; } .det > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); border-radius: 12px; } .det > summary::-webkit-details-marker { display: none; } @media (hover: hover) { .det > summary:hover { background: var(--panel-hover); } } .det[open] > summary { border-bottom: 1px solid var(--line-soft); border-radius: 12px 12px 0 0; } .det > summary b { color: var(--text); font-weight: 500; } .det > summary .t { min-width: 0; overflow-wrap: anywhere; } .det > .det-b { padding: 12px 14px 14px; display: grid; gap: 10px; } .det.ci > summary { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; } .det.ci > summary .n { color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; } .det.off { opacity: 0.6; } .det .hint { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } .ans { display: inline-flex; gap: 6px; } /* cards in a column of the working surface */ .stack-cards { display: grid; gap: 12px; margin-top: 10px; } .box .dt { margin: 0 -16px; } .box-b > .dt:last-child { margin-bottom: -16px; } .box .dt .thead { position: static; background: transparent; } .box .dt .tr { cursor: default; } .box .dt .tr[tabindex] { cursor: pointer; } .big-k { font-size: var(--fs-xs); color: var(--muted); } .big-v { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } /* a wide dialog: the investor snapshot, the price change preview */ dialog.dlg.wide { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); } dialog.dlg.wide .dlg-b { overflow-y: auto; max-height: calc(100dvh - 120px); } .snap { border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; color: #141518; padding: 22px; display: grid; gap: 16px; font-size: 13px; } .snap h3 { margin: 0; font-size: 20px; letter-spacing: -0.01em; } .snap .k { font-size: 11px; color: #63646B; letter-spacing: 0.06em; text-transform: uppercase; } .snap .g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #E1E2E6; border: 1px solid #E1E2E6; border-radius: 10px; overflow: hidden; } .snap .g > div { background: #FFFFFF; padding: 10px 12px; min-width: 0; } .snap .g b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .snap .g small { color: #63646B; font-size: 11px; } .snap .bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; } .snap .bars i { flex: 1; background: #C9D4EE; border-radius: 3px 3px 0 0; } .snap .bars i:last-child { background: #14161B; } .snap .bl { display: flex; gap: 6px; font-size: 10px; color: #63646B; } .snap .bl span { flex: 1; text-align: center; } .snap .pl { display: grid; gap: 6px; } .snap .pl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) 46px; gap: 10px; align-items: center; } .snap .pl .bar { height: 6px; border-radius: 3px; background: #ECEDF0; overflow: hidden; } .snap .pl .bar i { display: block; height: 100%; background: #14161B; } .snap .pl span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: #33353B; } /* forms in drawers */ .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .fld .hintline { font-weight: 400; color: var(--muted-2); } .inp.num { font-variant-numeric: tabular-nums; } .diff { display: grid; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; } .diff > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); } .diff > div:last-child { border-bottom: 0; } .diff s { color: var(--muted-2); } .diff b { font-weight: 560; font-variant-numeric: tabular-nums; } .month-chips { display: flex; flex-wrap: wrap; gap: 6px; } .month-chips .fchip { padding: 0 10px; min-width: 34px; justify-content: center; } .banner.warn { background: color-mix(in oklab, var(--blush) 16%, var(--panel)); } .banner.bad { background: color-mix(in oklab, var(--danger) 14%, var(--panel)); } .banner .btn { margin-left: auto; flex: none; } .chk .ico-t.sm { width: 22px; height: 22px; border-radius: 7px; } @media (max-width: 900px) { .hero-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .row3 { grid-template-columns: minmax(0, 1fr); } .rung { grid-template-columns: minmax(0, 78px) minmax(0, 1fr) auto; } .snap .g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .det > summary { grid-template-columns: minmax(0, 1fr) auto; } .det > summary > :nth-child(3) { grid-column: 1 / -1; justify-self: start; } .det.ci > summary { grid-template-columns: 24px minmax(0, 1fr); } .det.ci > summary > :nth-child(3) { grid-column: 2; } .lines > div { padding: 9px 10px; } } @media print { body * { visibility: hidden; } #snap-print, #snap-print * { visibility: visible; } #snap-print { position: fixed; inset: 0; border: 0; } } /* a table panel that takes its rows' height (the page scrolls, not the panel) */ .panel.auto { flex: none; min-height: 0; } .panel.auto .view { flex: none; overflow: visible; } /* a wider drawer for the price forms */ .drawer.wide { width: min(720px, calc(100vw - 24px)); } .inp[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); } .diff > div > span[aria-hidden] svg { --od-icon-size: 13px; color: var(--muted); } /* phones: a long segment scrolls inside the control row instead of pushing it wide */ @media (max-width: 640px) { .ctl .seg { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .ctl .seg::-webkit-scrollbar { display: none; } .ctl .seg button { flex: 1 0 auto; } } /* ══ Admin 4 · the rest of Students ═════════════════════════════════════════ */ /* a confirm tick: the kit's checkbox with its sentence */ .tick { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; cursor: pointer; } .tick .cb { margin-top: 2px; flex: none; } :root[data-mode="light"] .cb { border-color: #B9BAC0; } :root[data-mode="light"] .cb:checked, :root[data-mode="light"] .cb:indeterminate { background: #141518; border-color: #141518; } :root[data-mode="light"] .cb:checked::after { border-color: #FFFFFF; } /* avatar cluster in a hero: paying members */ .avc { display: flex; align-items: center; min-width: 0; overflow: hidden; padding-left: 8px; } .avc > img, .avc > span, .avc > b { width: 34px; height: 34px; border-radius: 50%; margin-left: -8px; flex: none; border: 2px solid var(--hero); object-fit: cover; } .avc > span { background: rgb(255 255 255 / 0.55); color: var(--hero-ink); display: grid; place-items: center; font-size: 11px; font-weight: 600; } .avc > b { background: var(--hero-ink); color: var(--hero); display: grid; place-items: center; font-size: 11px; font-weight: 600; width: auto; min-width: 34px; padding: 0 8px; border-radius: 17px; } /* a price cell: tag + words, truncating */ .pricecell { display: flex; align-items: center; gap: 8px; min-width: 0; } .pricecell .tag { flex: none; } .pricecell .mut { min-width: 0; font-size: var(--fs-xs); } /* before → after across a tier's rungs */ .dgrid > div { grid-template-columns: 72px repeat(4, minmax(0, 1fr)); font-size: var(--fs-xs); color: var(--text-2); } .dgrid > div > span { min-width: 0; overflow-wrap: anywhere; } .dgrid > div > span.bad { color: var(--danger); } .dgrid > p { padding: 0 12px 10px; } @media (max-width: 640px) { .dgrid > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dgrid > div > span:first-child { grid-column: 1 / -1; } } /* stars */ .stars { display: inline-flex; gap: 1px; color: var(--text); flex: none; } .stars svg { --od-icon-size: 13px; } .stars .off { opacity: 0.22; } /* a working split: list on the left, the one you picked on the right; the page fills to the window */ .wsplit { flex: 1 0 auto; min-height: 560px; height: 0; margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 12px; } .wsplit > .box { min-height: 0; overflow: hidden; } .wsplit .box-b.scroll { overflow-y: auto; overscroll-behavior: contain; } .box-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; min-width: 0; } .box-tools .search { flex: 1 1 200px; min-width: 0; width: auto; } .box-tools select.inp { width: auto; max-width: 170px; flex: 0 1 auto; height: 34px; } .rv-n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--chip); color: var(--text); } .rv-n[data-t="positive"] { background: var(--pale-blue); color: #14161B; } .rv-n[data-t="mixed"] { background: var(--blush); color: #14161B; } .rv-n[data-t="negative"] { background: var(--pink); color: #14161B; } /* vertical bars: hours, days */ .vbars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 120px; min-width: 0; } .vbars > span { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; position: relative; } .vbars > span > i { display: block; border-radius: 3px 3px 1px 1px; background: var(--pale-blue); min-height: 2px; } .vbars > span > i.hi { background: var(--blush); } .vbars > span > i.to { background: var(--bar-track); } .vaxis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; font-size: var(--fs-cap); color: var(--muted-2); margin-top: 6px; min-width: 0; } .vaxis > span { text-align: center; white-space: nowrap; overflow: hidden; } .hero .vbars > span > i { background: rgb(20 22 27 / 0.72); } .hero .vbars > span > i.hi { background: var(--hero-ink); } .hero .vbars > span > i.lo { background: rgb(20 22 27 / 0.28); } .hero .vaxis { color: var(--hero-ink-2); } /* the onboarding funnel */ .funnel { display: grid; gap: 6px; } .fstep { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 64px 54px; gap: 10px; align-items: center; font-size: var(--fs-sm); color: var(--text-2); } .fstep > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fstep .t { height: 14px; border-radius: 4px; background: var(--bar-track); overflow: hidden; } .fstep .t i { display: block; height: 100%; background: var(--pale-blue); border-radius: inherit; } .fstep .t i.done { background: var(--blush); } .fstep .t i.worst { background: var(--pink); } .fstep > span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } .fstep > span:nth-child(4) { text-align: right; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .fstep { grid-template-columns: minmax(0, 92px) minmax(0, 1fr) 52px; } .fstep > span:nth-child(4) { display: none; } } /* tiny inline curve in a table cell */ .curve { display: flex; align-items: flex-end; gap: 2px; height: 22px; } .curve i { width: 5px; border-radius: 1px; background: var(--pale-blue); min-height: 2px; } .curve i.to { background: var(--bar-track); } /* a state legend */ .box-h .legend { margin-left: auto; } /* broadcasts: the composer, the reach, the preview */ .compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; align-items: start; } .compose > .box { min-width: 0; } .compose .sticky { position: sticky; top: 12px; } .mono-ta { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.55; resize: vertical; min-height: 170px; } .reach { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .reach b { font-size: 34px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .reach span { color: var(--muted); font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pushmock { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: var(--canvas); border: 1px solid var(--line-soft); } .pushmock .ico-t { width: 34px; height: 34px; border-radius: 10px; } .pushmock b { display: block; font-weight: 560; color: var(--text); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pushmock small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.4; } .pushmock time { font-size: var(--fs-cap); color: var(--muted); white-space: nowrap; } .popmock { border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px; display: grid; gap: 8px; background: var(--canvas); } .popmock h4 { margin: 0; font-size: var(--fs-md); font-weight: 600; } .popmock p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; } .mailframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 16px; background: #EBEDEF; display: block; } .chlist { display: flex; flex-wrap: wrap; gap: 6px; } .chlist .fchip { height: 30px; padding: 0 12px; } .chlist .fchip svg { --od-icon-size: 13px; } .schedrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; } .schedrow:last-child { border-bottom: 0; } .schedrow .ico-t { width: 34px; height: 34px; border-radius: 10px; } .schedrow b { display: block; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); } .schedrow small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1080px) { .compose { grid-template-columns: minmax(0, 1fr); } .compose .sticky { position: static; } .wsplit { grid-template-columns: minmax(0, 1fr); height: auto; } .wsplit > .box { overflow: visible; } } @media (max-width: 640px) { .mailframe { height: 460px; } .reach b { font-size: 28px; } } /* a student's journey: lanes by stage, a node per moment, the moment beside it */ .sj { flex: 1 0 auto; min-height: 560px; height: 0; margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; } .sj.full { position: fixed; inset: 0; z-index: 60; margin: 0; padding: 12px; background: var(--canvas); height: auto; grid-template-rows: auto minmax(0, 1fr); } .sj.full > .sj-h { grid-column: 1 / -1; } .sj-h { display: none; align-items: center; gap: 12px; min-width: 0; } .sj.full .sj-h { display: flex; } .sj-h .grow { flex: 1; min-width: 0; } .sj-h b { display: block; font-size: var(--fs-lg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-h .k { display: block; color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fmap { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-tile); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; } .fmap-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); min-width: 0; flex-wrap: wrap; } .fmap-bar .grow { flex: 1; } .fmap-bar .zoomv { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--muted); } .sj-stages { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; flex: none; } .sj-stages::-webkit-scrollbar { display: none; } .sj-st { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--chip); color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; } .sj-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--pale-blue)); opacity: 0.35; } .sj-st[aria-pressed="true"] { color: var(--text); background: var(--chip-on); } .sj-st[aria-pressed="true"] i { opacity: 1; } .sj-st .n { color: var(--muted); font-variant-numeric: tabular-nums; } .sj-wrap { position: relative; flex: 1; min-height: 0; } .sj-s { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; } .sj-z { position: relative; } .sj-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .sj-lane { position: absolute; left: 0; border-top: 1px solid var(--line-soft); } .sj-lane:nth-child(even) { background: rgb(127 127 127 / 0.035); } .sj-day { position: absolute; top: 0; border-left: 1px dashed var(--line); } .sj-day span { position: absolute; top: 12px; left: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; } .sj-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } .sj-svg path { fill: none; stroke: var(--line); stroke-width: 1.5; } .sj-svg path.on { stroke: var(--text-2); stroke-width: 2; } .sj-svg path.away { stroke-dasharray: 5 5; } .sj-svg text { font-size: 11px; fill: var(--muted); font-family: inherit; } .sj-n { position: absolute; display: grid; grid-template-rows: auto auto 1fr; gap: 3px; padding: 9px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-align: left; color: var(--text-2); font-size: 12px; overflow: hidden; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .sj-n .sj-nt { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); } .sj-n .sj-nt svg { --od-icon-size: 12px; flex: none; color: var(--c, var(--text-2)); } .sj-n .sj-nt b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-n .sj-ns { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .sj-n .sj-nf { display: flex; align-items: flex-end; gap: 6px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .sj-n .sj-stop { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--accent-pill); color: var(--accent-pill-ink); font-size: 10.5px; } .sj-n.path { border-color: var(--line); background: var(--panel-hover); } .sj-n.cur { border-color: var(--text); box-shadow: 0 0 0 3px var(--accent-row); } .sj-n.bad { border-style: dashed; } .sj-n.bad .sj-nt svg { color: var(--danger); } @media (hover: hover) { .sj-n:hover { background: var(--panel-hover); } } .sj-names { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; } .sj-names > span { position: absolute; left: 0; width: 100%; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: linear-gradient(90deg, var(--panel) 70%, transparent); font-size: 12px; color: var(--text-2); } .sj-names > span svg { --od-icon-size: 13px; color: var(--c, var(--muted)); flex: none; } .sj-names > span b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj [data-stage="arrived"], .sj [data-stage="signup"], .sj [data-stage="onboarding"] { --c: var(--pale-blue); } .sj [data-stage="plan"], .sj [data-stage="messages"] { --c: var(--blush); } .sj [data-stage="study"], .sj [data-stage="ai"] { --c: var(--pale-blue); } .sj [data-stage="together"], .sj [data-stage="voice"], .sj [data-stage="account"] { --c: var(--pink); } .sj [data-stage="signals"] { --c: var(--danger); } .fview { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-tile); padding: 16px; display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; overflow-y: auto; min-height: 0; min-width: 0; overscroll-behavior: contain; } .fview h2 { margin: 0; font-size: var(--fs-xl, 22px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; } .fview .row { display: flex; align-items: center; gap: 8px; min-width: 0; } .fview .row .grow { flex: 1; min-width: 0; } .sj-k { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); } .sj-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .fv-d { margin: 0; color: var(--muted); font-size: var(--fs-sm); } .sj-detail { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.5; overflow-wrap: anywhere; } .sj-facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; } .sj-facts > div { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); } .sj-facts > div:last-child { border-bottom: 0; } .sj-facts dt { color: var(--muted); } .sj-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .sj-design { display: grid; gap: 8px; border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px; } .sj-design .k { font-size: var(--fs-xs); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-empty { display: grid; place-items: center; gap: 6px; padding: 40px 12px; color: var(--muted); text-align: center; } .sj-empty svg { --od-icon-size: 22px; } .sj-empty b { color: var(--text); font-weight: 560; } /* a screen thumbnail, drawn in the app's look */ .scr { width: 100%; max-width: 230px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 22px; border: 6px solid #1B1D22; background: #F7F8FA; color: #16171B; overflow: hidden; display: grid; grid-template-rows: auto 1fr; font-size: 9.5px; line-height: 1.35; } .scr .sb2 { display: flex; justify-content: space-between; padding: 6px 10px 4px; font-size: 8px; color: #6A6F76; } .scr .bd { padding: 6px 10px 10px; display: grid; gap: 6px; align-content: start; } .scr .h { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; } .scr .m { color: #6A6F76; } .scr .card2 { background: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 10px; padding: 7px 8px; display: grid; gap: 4px; } .scr .pill2 { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #16171B; color: #FFFFFF; font-weight: 600; justify-self: start; } .scr .opt { border: 1px solid #E2E4E8; border-radius: 8px; padding: 5px 7px; background: #FFFFFF; } .scr .opt.on { border-color: #16171B; } .scr .bar2 { height: 6px; border-radius: 3px; background: #E2E4E8; overflow: hidden; } .scr .bar2 i { display: block; height: 100%; background: #C9D4EE; } .scr .err { border: 1px dashed #CC272E; color: #CC272E; border-radius: 10px; padding: 8px; text-align: center; } .sj-step { display: flex; align-items: center; gap: 8px; } .sj-step .grow { flex: 1; } @media (max-width: 1280px) { .sj { grid-template-columns: minmax(0, 1fr) 330px; } } @media (max-width: 1080px) { .sj { grid-template-columns: minmax(0, 1fr); grid-template-rows: 520px auto; height: auto; } .sj.full { grid-template-rows: auto minmax(0, 1fr) auto; } .fview { overflow: visible; } } @media (max-width: 640px) { .sj { grid-template-rows: 460px auto; } .fmap-bar .zl { display: none; } } .who { display: flex; align-items: center; gap: 10px; min-width: 0; } .who > img { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; border: 2px solid var(--hero); } .who > span { min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--hero-ink); } /* Broadcasts: the tab's pane carries the page to the window's bottom */ #pane { display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; } #pane > .box:last-child { flex: 1 0 auto; } @media (max-width: 640px) { #pane { flex: none; } #pane > .box:last-child { flex: none; } } /* Fit the screen: no sideways swipe, nothing spills past its card (12 Nov) */ .view, .main { overflow-x: hidden; } .tr .act:last-child .tt { left: auto; right: 0; transform: translate(0, 2px); } .tr .act:last-child:hover .tt, .tr .act:last-child:focus-visible .tt { transform: translate(0, 0); } .tile, .card, .box { min-width: 0; } .pair-b { flex-wrap: wrap; row-gap: 6px; min-width: 0; } .pair-n { min-width: 0; } .fig strong { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .seg { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } @media (min-width: 901px) { .fchips { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; row-gap: 6px; } .sj-stages { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; } } @media (max-width: 640px) { .seg button { padding: 0 8px; } } /* ══ Admin 5 · Schools (Schools & programmes, Exams, Courses) ═════════════════ */ .dw-b .k, .sets .k, .exam-tab > .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; } .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .btn.sm { height: 28px; padding: 0 11px; font-size: var(--fs-xs); } .small { font-size: var(--fs-xs); } p.small { margin: 0; line-height: 1.5; } .seg.wrap { flex-wrap: wrap; max-width: 100%; border-radius: 14px; } .seg.wrap button { height: 28px; } .chips-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .chips-row.nowrap { flex-wrap: nowrap; overflow: hidden; } .pchip { cursor: pointer; border: 0; font-family: inherit; position: relative; z-index: 1; } .pchip:hover { filter: brightness(1.08); } .legend-in { display: inline-flex; gap: 6px; margin-right: 10px; } /* hero: the pipeline, a column per stage */ .pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; min-width: 0; height: 100%; max-height: 132px; } .pipe-c { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: 3px; min-width: 0; height: 100%; } .pipe-b { width: 100%; max-width: 34px; height: 100%; display: flex; align-items: flex-end; border-radius: 7px; background: rgb(255 255 255 / 0.4); overflow: hidden; } .pipe-b i { display: block; width: 100%; border-radius: 7px; background: rgb(20 22 27 / 0.32); } .pipe-b i.on { background: #14161B; } .pipe-c b { font-size: var(--fs-md); font-weight: 560; color: var(--hero-ink); line-height: 1; font-variant-numeric: tabular-nums; } .pipe-c > span:last-child { font-size: 10.5px; color: var(--hero-ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the school cards */ .sc-cards { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .sc-card { background: var(--panel); border-color: var(--line-soft); cursor: pointer; align-content: start; } .sc-card:hover { border-color: var(--line); } .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .steps li { display: grid; gap: 5px; justify-items: start; min-width: 0; position: relative; } .steps li::before { content: ""; position: absolute; left: 26px; right: -2px; top: 10px; height: 2px; border-radius: 2px; background: var(--line); } .steps li:last-child::before { display: none; } .steps li.done::before { background: color-mix(in oklab, var(--pale-blue) 70%, var(--panel)); } .steps .sd { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--chip); color: var(--muted); position: relative; } .steps .sd svg { --od-icon-size: 12px; } .steps .done .sd { background: color-mix(in oklab, var(--pale-blue) 70%, var(--panel)); color: #14161B; } .steps .now .sd { background: var(--hero); color: #14161B; box-shadow: 0 0 0 3px color-mix(in oklab, var(--hero) 30%, transparent); } .steps .sl { font-size: 10.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .steps .now .sl { color: var(--text); } .cols3x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .cols3x > div { background: var(--canvas); border-radius: 10px; padding: 8px 10px; min-width: 0; } .cols3x span { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cols3x b { font-size: var(--fs-lg); font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* programme drawer */ .tierset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; } .tierset legend { font-size: var(--fs-xs); color: var(--text); font-weight: 560; padding: 0; margin-bottom: 6px; } .pgrid > div { grid-template-columns: 72px repeat(3, minmax(0, 1fr)); font-size: var(--fs-xs); color: var(--text-2); } .pgrid > div > span { min-width: 0; overflow-wrap: anywhere; } .pgrid > div.h { color: var(--muted); } .sets { display: grid; gap: 10px; } .setd { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--canvas); } .setd > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; font-size: var(--fs-sm); } .setd > summary::-webkit-details-marker { display: none; } .setd > summary .num { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; } .setd[open] > summary { border-bottom: 1px solid var(--line-soft); } .setd .setf { padding: 12px 14px; } .setf { display: grid; gap: 10px; min-width: 0; } .sets > .setf { padding: 14px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line-soft); } .setrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .setrow .grow { flex: 1 1 180px; min-width: 0; } .empty-sm { display: grid; justify-items: center; gap: 4px; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; font-size: var(--fs-sm); color: var(--muted); } .empty-sm svg { --od-icon-size: 22px; color: var(--muted-2); } .empty-sm b { color: var(--text); font-weight: 520; } .exam-tab { display: grid; gap: 12px; } .paper { display: grid; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel); min-width: 0; } .paper details summary { font-size: var(--fs-xs); cursor: pointer; padding: 2px 0; } .paper details .seg { margin-top: 6px; } .paper .btn { justify-self: start; } .seg.subj button { font-size: var(--fs-xs); } .lx-prog { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--muted); } .lx-prog .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; } .lx-prog .bar i { display: block; height: 100%; width: 0; background: var(--text); border-radius: inherit; transition: width 160ms var(--ease-out); } /* exams hero: the next sittings on a time line */ .xline { position: relative; min-width: 0; height: 100%; max-height: 132px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; } .xline-t { position: relative; border-bottom: 1.5px solid rgb(20 22 27 / 0.35); min-height: 0; } .xline-d { position: absolute; bottom: -5px; width: 9px; height: 9px; border-radius: 50%; background: #14161B; transform: translateX(-50%); } .xline-d.pz { background: transparent; box-shadow: inset 0 0 0 2px #14161B; } .xline-l { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--hero-ink); white-space: nowrap; line-height: 1.15; text-align: center; } .xline-l b { display: block; font-weight: 600; } .xline-l::after { content: ""; position: absolute; left: calc(50% + var(--dx, 0px)); top: 100%; height: var(--stem, 10px); border-left: 1px dashed rgb(20 22 27 / 0.35); } .xline-a { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--hero-ink-2); } .xline-now { position: absolute; bottom: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--hero-ink-2); } /* courses */ .ctl .seg.courses { min-width: 0; flex: 0 1 auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ctl .seg.courses::-webkit-scrollbar { display: none; } .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; } .tierbar { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-xs); color: var(--hero-ink-2); min-width: 0; } .tierbar > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tierbar .sb3 { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgb(255 255 255 / 0.45); gap: 2px; } .tierbar .sb3 i { display: block; height: 100%; background: var(--c); } .tierbar b { color: var(--hero-ink); font-weight: 560; font-variant-numeric: tabular-nums; } .course-box .box-b { gap: 14px; } .course-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .course-h .od-fill { min-width: 200px; } .course-h h2 { margin: 0; font-size: 18px; font-weight: 560; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .course-h .k { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; } .course-h .btns { margin-left: auto; } .tier-box { margin-top: 12px; } .tier-box .dt { margin: 0 -1px; } .tier-box .box-b { padding: 6px 0 0; } .tier-stack { display: flex; flex-direction: column; flex: 1 0 auto; } .tier-stack > .tier-box:last-child { flex: 1 0 auto; } .fmtsec { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px 64px 32px; gap: 8px; align-items: end; } .fmtsec .ib { width: 32px; height: 36px; } .toolset { display: flex; flex-wrap: wrap; gap: 8px 14px; } .toolset .tick { font-size: var(--fs-xs); align-items: center; } @media (max-width: 1280px) { .tiers { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .pipe { gap: 4px; } .fmtsec { grid-template-columns: minmax(0, 1fr) 72px 72px; } .fmtsec > :nth-child(4) { grid-column: 1 / 3; } .course-h .btns { margin-left: 0; } .setd > summary { grid-template-columns: auto minmax(0, 1fr); } .setd > summary .num { grid-column: 1 / -1; } .steps .sl { display: none; } } .form > .btn, #sh-f > .btn { justify-self: start; } /* A choice inside a form field never hides an option: it wraps to a second row */ .fld > .seg { display: flex; flex-wrap: wrap; overflow: visible; border-radius: 14px; } /* Courses hero: exams per course by tier, on the periwinkle */ .tiers-h { display: grid; gap: 7px; align-content: end; min-width: 0; height: 100%; } .tiers-h .tierbar { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 22px; } .tiers-h .tierbar .sb3 { background: transparent; justify-self: start; min-width: 8px; } .tiers-h .tierbar b { text-align: right; } .tier-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: var(--hero-ink-2); margin-top: 2px; } .tier-leg span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .tier-leg i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); } .tier-leg .more { margin-left: auto; } .od-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tier-box .tr[data-st] { cursor: pointer; } .ctl .seg.courses { flex: 1 1 0; min-width: 240px; } #surface { margin-top: 14px; } .tier-stack > * { flex-shrink: 0; } .course-box + .tier-box { margin-top: 12px; } @media (max-width: 640px) { .ctl .seg.courses { flex-basis: 100%; min-width: 0; } } .tier-box .box-b > .dt:last-child { margin-bottom: 0; } .tier-box .box-b { padding-bottom: 4px; } #fe-wrap:empty, #sf-read:empty { display: none; } .xline { min-height: 96px; } @media (max-width: 640px) { .xline { height: 104px; max-height: none; margin-top: 6px; } } /* a lower lane's label sits over the stems of the lanes above it */ .xline-l { background: var(--hero); padding: 0 2px; border-radius: 3px; } .xline-l::after { z-index: -1; } .xline-t { isolation: isolate; } /* ══ Narrow windows (founder, 12 Nov) ════════════════════════════════════════ Every page: the overview row is laid out by its own width (each .ov sits in an .ov-c container that admin.js adds), tiles and heroes measure themselves, sub-lines wrap to two lines instead of truncating, figures step down to fit (CSS clamp, then admin.js's fitter), and the control row keeps the primary button on its line: the search shrinks first, then the segments scroll inside themselves. */ .ov-c { container: ov / inline-size; margin-top: 10px; min-width: 0; } .ov-c > .ov { margin-top: 0; } .ov { height: auto; min-height: 222px; } .ov.tall { height: auto; min-height: 252px; } .ov > .hero, .ov > .pair, .ov > .tile { min-height: 0; } .tile { container: tile / inline-size; } .hero { container: hero / inline-size; } /* a tile's figure, unit and sub-line fit at every width */ .fig { flex-wrap: wrap; row-gap: 3px; } .fig strong, .pair-n strong { min-width: 0; max-width: 100%; font-size: clamp(22px, 15cqi, var(--fs-tile)); } .fig small, .pair-n small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; } .pair-n { flex-wrap: wrap; row-gap: 3px; min-width: 0; } .tile-s { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; overflow: hidden; } .pair .tile > .tile-b > :first-child { flex: 1 1 auto; } .pair .tile > .tile-b > :not(:first-child) { flex: none; } @container tile (max-width: 200px) { .pair .tile > .tile-b > :not(:first-child) { display: none; } } /* a hero's big figure and its visual never overlap */ .hero-num strong, .hero .price-big strong { max-width: 100%; font-size: clamp(34px, 11cqi, var(--fs-hero)); } .hero-split > * { min-width: 0; } @container hero (max-width: 470px) { .hero-split { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } } /* the tiles go 2-up, then 1-up, by the overview row's own width */ @container ov (max-width: 980px) { .ov, .ov.tall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov > .hero, .ov > .bub:first-child { grid-column: 1 / -1; min-height: 222px; } .ov.tall > .hero { min-height: 252px; } .ov > .pair { min-height: 208px; } .ov > .bub { min-height: 208px; } } @container ov (max-width: 560px) { .ov, .ov.tall { grid-template-columns: minmax(0, 1fr); } .ov > .pair { min-height: 0; } } /* the control row keeps the primary button on its line */ @media (min-width: 641px) { .ctl { flex-wrap: nowrap; min-width: 0; } .ctl > * { flex-shrink: 0; } .ctl .search { flex: 0 100 252px; width: auto; min-width: 128px; } .ctl .seg { flex: 0 1 auto; min-width: 72px; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .ctl .seg::-webkit-scrollbar { display: none; } .ctl .seg button { flex: none; } .ctl .cta { flex: none; margin-left: auto; } } /* narrow windows: hero previews and footers wrap instead of cutting their sentence short */ .hero-art { width: min(58%, 440px); } .hero-art .ha span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; } .hero-foot > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } .tiers-h .tierbar { grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 22px; } .tiers-h .tierbar > span:first-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; } @container hero (max-width: 560px) { .hero .al span, .hero .al small, .hero .al b { white-space: normal; overflow: visible; text-overflow: clip; } } @container hero (max-width: 560px) { .hero .nd small.od-truncate { white-space: normal; overflow: visible; text-overflow: clip; } } /* ══ Content (Admin 6): reported mistakes, live questions, bank drafts, the review queue ══════════════════════ A question's body with its key marked, its pictures in order (an empty slot for each one missing), the worked answer, thumbnails in lists, keyboard hints. Colours stay on the companions: pale blue, blush, pink. */ .pic { display: block; width: 100%; height: auto; --c1: var(--pale-blue); --c2: var(--blush); --c3: var(--pink); } .qbody { display: grid; gap: 10px; min-width: 0; } .qtitle { font-weight: 560; color: var(--text); font-size: var(--fs-md); } .qbody .qt { font-size: var(--fs-md); color: var(--text); } .qpics { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; min-width: 0; } .qpics figure { margin: 0; display: grid; gap: 4px; min-width: 0; } .qpics figure .pic { border-radius: 8px; border: 1px solid var(--line-soft); } .qpics figure.hid .pic { opacity: 0.45; } .qpics figure.miss > span { aspect-ratio: 16 / 10; border-radius: 8px; border: 1.5px dashed var(--line); display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); } .qpics figcaption { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; } .qb { display: grid; gap: 6px; min-width: 0; } .qb-l { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; } .qb-l > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; } .qb-l .lab { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--muted); padding-top: 1px; } .qb-l.key { border-color: color-mix(in oklab, var(--pale-blue) 55%, var(--line)); background: color-mix(in oklab, var(--pale-blue) 10%, var(--panel)); } .kt { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; background: var(--chip); color: var(--text-2); } .kt svg { --od-icon-size: 11px; } .kt[data-k="T"], .kt[data-k="pick"] { background: color-mix(in oklab, var(--pale-blue) 26%, var(--panel)); color: color-mix(in oklab, var(--pale-blue) 82%, var(--text)); } .kt[data-k="F"] { background: color-mix(in oklab, var(--blush) 26%, var(--panel)); color: color-mix(in oklab, var(--blush) 82%, var(--text)); } .qopts.emq { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; font-size: var(--fs-sm); color: var(--text-2); } .qopts.emq b { font-family: var(--mono, ui-monospace, monospace); font-weight: 500; color: var(--muted); margin-right: 8px; } .qkey { margin: 0; font-size: var(--fs-xs); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .qkey .mono { overflow-wrap: anywhere; } .worked { border: 1px solid var(--line-soft); border-radius: 12px; padding: 0 12px; } .worked summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--fs-sm); color: var(--text); } .worked summary::-webkit-details-marker { display: none; } .worked summary svg { --od-icon-size: 13px; transition: transform 0.15s; color: var(--muted); } .worked[open] summary svg { transform: rotate(90deg); } .worked p { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); } .qthumb { display: block; width: 44px; height: 28px; border-radius: 6px; overflow: hidden; flex: none; } .qthumb .pic { width: 44px; height: 28px; } .qthumb .pic text { display: none; } .qthumb-i { width: 30px; height: 30px; border-radius: 9px; } .qthumb-i svg { --od-icon-size: 14px; } .kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; border: 1px solid var(--line); font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--muted); margin-left: 4px; } .tagset { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .qchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--r-pill); background: var(--chip-on); color: var(--text); font-size: var(--fs-xs); } .qchip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); } .qchip button svg { --od-icon-size: 11px; } .alrow .tagset { margin-top: 4px; } .alrow .ico-t { width: 30px; height: 30px; border-radius: 9px; } .alrow .ico-t svg { --od-icon-size: 14px; } .pv-app { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); } .pv-app b { display: block; color: var(--text); font-weight: 520; } .pv-app .ico-t { width: 30px; height: 30px; border-radius: 9px; } .edit-list { display: grid; gap: 6px; } .edit-list label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; } .edit-list label b { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--muted); font-weight: 500; } .pic-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; } .pic-ed > div { display: grid; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--line-soft); min-width: 0; } .pic-ed > div.hid .pic { opacity: 0.45; } .pic-ed .pic-b { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .pic-ed .pic-b .ib { width: 28px; height: 28px; } .pic-ed .pic-b small { font-size: var(--fs-xs); color: var(--muted); margin-right: auto; } .drop-in { display: grid; place-items: center; gap: 6px; padding: 14px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: var(--fs-xs); text-align: center; cursor: pointer; } .drop-in:hover, .drop-in:focus-within { border-color: color-mix(in oklab, var(--pale-blue) 60%, var(--line)); color: var(--text-2); } .drop-in input { position: absolute; width: 1px; height: 1px; opacity: 0; } .cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: stretch; } .cgrid > .box.span { grid-column: 1 / -1; } .cgrid .box-b > p.mut, .box-b > p.mut { margin: 0; font-size: var(--fs-sm); line-height: 1.55; } .finding { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); } .finding:last-child { border-bottom: 0; } .finding .ico-t { width: 26px; height: 26px; border-radius: 8px; } .finding .ico-t svg { --od-icon-size: 13px; } .finding code { font-size: var(--fs-xs); color: var(--muted); } .ids { display: flex; flex-wrap: wrap; gap: 6px; } .ids a, .ids span { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; padding: 3px 7px; border-radius: 6px; background: var(--chip); color: var(--text-2); text-decoration: none; } .ids a:hover { background: var(--chip-on); color: var(--text); } .runs .dtr { min-height: 44px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); } .steps.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } .steps .rej .sd { background: color-mix(in oklab, var(--danger) 25%, var(--panel)); color: var(--danger); } .ansb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; font-size: var(--fs-xs); color: var(--muted); } .ansb .meter { height: 6px; } .blk { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--canvas); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; } .blk > .tile-k { display: flex; align-items: center; gap: 6px; } .blk.solver { border-color: color-mix(in oklab, var(--pale-blue) 45%, var(--line)); } .blk.verifier { border-color: color-mix(in oklab, var(--blush) 50%, var(--line)); } .decide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } @media (max-width: 900px) { .cgrid { grid-template-columns: minmax(0, 1fr); } .steps.six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } .steps.six li:nth-child(3)::before { display: none; } } @media (max-width: 640px) { .qb-l { grid-template-columns: 20px minmax(0, 1fr); } .qb-l > .kt { grid-column: 2; justify-self: start; } } /* a long breadcrumb never pushes the bell past the window: the trail shrinks and wraps, the bell keeps its place */ .top > .crumbs { min-width: 0; flex: 0 1 auto; flex-wrap: wrap; } .top-r { flex: none; } .dw-h > .od-fill { min-width: 0; flex: 1 1 auto; } .banner > span:last-child { min-width: 0; overflow-wrap: anywhere; } .pic-ed .pic-b small { flex-basis: 100%; } .pic-ed .pic-b .ib { flex: none; } .drawer { grid-template-columns: minmax(0, 1fr); } /* ════════════════════════════════════════════════════════════════════════════════════════════════════ HYPATIA · the content engine's pieces, on the admin's tokens. Status colours (one set, every page and chart), the phone dock, the loading system, charts, the Gantt and the trace waterfall. Every value is a token from above or declared once here. ════════════════════════════════════════════════════════════════════════════════════════════════════ */ :root { --s-running: #9FB6F2; --s-done: #B9D7B8; --s-failed: #F29C92; --s-paused: #E4C39B; --s-waiting: #E7A8D2; --s-cancelled: #6C6D73; --s-created: #8A8B90; --s-running-ink: #11131A; /* stage tones: read → extract → classify → map → solve → verify → release (no red: red is failure) */ --stg-read: #C3D2EA; --stg-extract: #A9C4E6; --stg-classify: #C9BEEA; --stg-map: #E9C3E0; --stg-solve: #9FB6F2; --stg-verify: #B9D7B8; --stg-release: #D3C1BE; --lane-l: 74%; --lane-c: 0.075; /* lane hues: oklch(var(--lane-l) var(--lane-c) h) */ --lane-l2: 58%; --lane-c2: 0.09; --sk-base: #1F2023; --sk-hi: rgb(255 255 255 / 0.055); --sweep-period: 2600ms; --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; --dock-h: 64px; --hatch: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.16) 0 2px, transparent 2px 6px); --night: rgb(255 255 255 / 0.018); --weekend: rgb(255 255 255 / 0.03); } :root[data-mode="light"] { --s-running: #4F68C0; --s-done: #3C8746; --s-failed: #C2412F; --s-paused: #A3702C; --s-waiting: #B4508F; --s-cancelled: #9A9BA1; --s-created: #A3A4AA; --s-running-ink: #FFFFFF; --stg-read: #8FA7D2; --stg-extract: #6F93C9; --stg-classify: #9887CF; --stg-map: #C77FB2; --stg-solve: #5D78CC; --stg-verify: #5C9A63; --stg-release: #A88A84; --lane-l: 62%; --lane-c: 0.11; --lane-l2: 46%; --lane-c2: 0.12; --sk-base: #E8E9EC; --sk-hi: rgb(255 255 255 / 0.75); --hatch: repeating-linear-gradient(135deg, rgb(20 22 28 / 0.18) 0 2px, transparent 2px 6px); --night: rgb(20 22 28 / 0.025); --weekend: rgb(20 22 28 / 0.04); } .mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0; } .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .grow { flex: 1; min-width: 0; } .row { display: flex; align-items: center; gap: 8px; min-width: 0; } .col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; } /* status: dot + word, one fixed set */ .st[data-s="running"] { --dot: var(--s-running); } .st[data-s="done"] { --dot: var(--s-done); } .st[data-s="failed"] { --dot: var(--s-failed); } .st[data-s="paused"] { --dot: var(--s-paused); } .st[data-s="waiting"] { --dot: var(--s-waiting); } .st[data-s="cancelled"] { --dot: var(--s-cancelled); color: var(--muted); } .st[data-s="created"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--s-created); } .st[data-s="running"] i, .st[data-s="waiting"] i { box-shadow: 0 0 0 0 var(--dot); animation: hy-ping 2.4s var(--ease-out) infinite; } @keyframes hy-ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--dot) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } } .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--chip); color: var(--text-2); font-size: var(--fs-cap); font-weight: 520; letter-spacing: 0.02em; white-space: nowrap; } .badge svg { --od-icon-size: 11px; } .badge.bad { background: color-mix(in oklab, var(--s-failed) 20%, var(--panel)); color: var(--s-failed); } .badge.ok { background: color-mix(in oklab, var(--s-done) 18%, var(--panel)); color: var(--s-done); } .badge.ind { background: color-mix(in oklab, var(--s-running) 18%, var(--panel)); color: color-mix(in oklab, var(--s-running) 80%, var(--text)); } .badge.warn { background: color-mix(in oklab, var(--s-paused) 20%, var(--panel)); color: color-mix(in oklab, var(--s-paused) 85%, var(--text)); } /* the school mark: a lettermark tile, toned per school (never a logo we don't have) */ .smark { --sm: var(--pale-blue); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in oklab, var(--sm) 28%, var(--panel)); color: color-mix(in oklab, var(--sm) 75%, var(--text)); font-size: 9px; font-weight: 650; letter-spacing: 0.02em; line-height: 1; } .smark[data-s="ui"] { --sm: #9FB6F2; } .smark[data-s="unilorin"] { --sm: #B9D7B8; } .smark[data-s="oau"] { --sm: #E9C3E0; } .smark[data-s="lasu"] { --sm: #E4C39B; } :root[data-mode="light"] .smark { background: color-mix(in oklab, var(--sm) 40%, var(--panel)); color: color-mix(in oklab, var(--sm) 30%, #14161B); } .prog { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .prog > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* brand corner */ .ws-av.hy { background: var(--hero); color: var(--hero-ink); } /* ── phone dock: Overview, Review, Runs, Costs, More ── */ .dock { display: none; } @media (max-width: 640px) { .dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); background: color-mix(in oklab, var(--sidebar) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-soft); } .dock a, .dock button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 48px; border-radius: 12px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; } .dock svg { --od-icon-size: 22px; } .dock [aria-current="page"] { color: var(--text); } .dock [aria-current="page"]::before { content: ""; position: absolute; top: 2px; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); } .dock .cnt { position: absolute; top: 2px; left: calc(50% + 6px); padding: 2px 5px; font-size: 10px; background: var(--s-waiting); color: #14161B; } .main { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + var(--gut)) !important; } .ib.menu-btn { display: none !important; } .toast { bottom: calc(var(--dock-h) + 16px); } } /* ════════ the loading system ════════ */ /* One band of light crosses the whole page: every skeleton paints the same viewport-fixed gradient, and hy.js gives each block a negative delay so all of them sit on one shared clock. Calm: one pass, then a rest. */ .sk { display: block; border-radius: 6px; background-color: var(--sk-base); background-image: linear-gradient(100deg, transparent 38%, var(--sk-hi) 50%, transparent 62%); background-size: 200vw 100vh; background-attachment: fixed; background-repeat: no-repeat; animation: hy-sweep var(--sweep-period) linear infinite; } @keyframes hy-sweep { 0% { background-position: -120vw 0; } 70%, 100% { background-position: 20vw 0; } } .sk.l { height: 12px; } .sk.t { height: 30px; border-radius: 8px; } .sk.c { border-radius: 50%; } .sk.pill { border-radius: 999px; } .hero .sk { --sk-base: rgb(20 22 27 / 0.08); --sk-hi: rgb(255 255 255 / 0.45); } .skg { display: grid; gap: 10px; align-content: start; } .skrow { display: grid; align-items: center; gap: 12px; min-height: var(--row-h); padding: 0 16px; border-bottom: 1px solid var(--line-soft); } [data-loading="true"] { pointer-events: none; } [data-loading="true"] .live-only { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .sk { animation: none !important; background-image: none; } } /* arrival: a block fills once, briefly, then holds still */ .arrive { animation: hy-arrive 260ms var(--ease-out) both; } @keyframes hy-arrive { from { opacity: 0; transform: translateY(4px); } } .draw-x { transform-origin: left center; animation: hy-drawx 520ms var(--ease-out) both; } @keyframes hy-drawx { from { transform: scaleX(0); } } .draw-y { transform-origin: center bottom; animation: hy-drawy 480ms var(--ease-out) both; } @keyframes hy-drawy { from { transform: scaleY(0); } } .draw-line { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: hy-drawline 700ms var(--ease-out) forwards; } @keyframes hy-drawline { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .arrive, .draw-x, .draw-y { animation: none !important; } .draw-line { animation: none !important; stroke-dashoffset: 0; } } /* the long-load line: after ~2 s, what the page is doing and how far it has got */ .hy-ll { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--fs-xs); color: var(--muted); min-width: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); } .hy-ll.on { opacity: 1; } .hy-ll > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .hy-ll b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; } .hy-ll .bar { flex: 0 0 120px; height: 2px; border-radius: 2px; background: var(--bar-track); overflow: hidden; } .hy-ll .bar i { display: block; height: 100%; width: 100%; background: var(--text-2); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 160ms linear; } .hy-ll .bar.ind i { width: 30%; transform: none; animation: hy-ind 1.6s var(--ease-out) infinite; } @keyframes hy-ind { from { transform: translateX(-100%); } to { transform: translateX(340%); } } .hy-ll svg { --od-icon-size: 14px; flex: none; } /* live mark: a polled block says it is live and how old its numbers are */ .hy-live { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px; border-radius: var(--r-pill); background: var(--chip); color: var(--text-2); font-size: var(--fs-cap); font-weight: 520; white-space: nowrap; font-variant-numeric: tabular-nums; } .hy-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--s-done); } .hy-live.tick i { animation: hy-tick 900ms var(--ease-out); } @keyframes hy-tick { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--s-done) 70%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } } .hy-live[data-stale="true"] i { background: var(--s-paused); } .hy-live[data-stale="true"] { color: color-mix(in oklab, var(--s-paused) 80%, var(--text)); } .hero .hy-live { background: rgb(255 255 255 / 0.55); color: var(--hero-ink); } /* empty and error: an icon, one line, the one action that helps */ .hy-state { display: grid; justify-items: center; align-content: center; text-align: center; gap: 10px; padding: 28px 16px; min-height: 100%; } .hy-state .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--chip); color: var(--text-2); } .hy-state .ic svg { --od-icon-size: 22px; } .hy-state[data-kind="error"] .ic { background: color-mix(in oklab, var(--s-failed) 18%, var(--panel)); color: var(--s-failed); } .hy-state p { margin: 0; font-size: var(--fs-md); color: var(--text-2); max-width: 44ch; } .hy-state small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; } .hy-state .btn { margin-top: 2px; } .hero .hy-state .ic { background: rgb(255 255 255 / 0.5); color: var(--hero-ink); } .hero .hy-state p { color: var(--hero-ink); } .stale-mark { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0 0 8px; border-radius: 9px; font-size: var(--fs-xs); color: color-mix(in oklab, var(--s-paused) 80%, var(--text)); background: color-mix(in oklab, var(--s-paused) 12%, var(--panel)); min-width: 0; } .stale-mark svg { --od-icon-size: 14px; flex: none; } .stale-mark span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stale-mark button { font-size: var(--fs-xs); font-weight: 560; color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .is-stale > :not(.stale-mark):not(.box-h) { opacity: 0.55; filter: saturate(0.6); transition: opacity var(--t-mid) var(--ease-out); } .banner-err { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: color-mix(in oklab, var(--s-failed) 12%, var(--panel)); color: var(--text); font-size: var(--fs-sm); min-width: 0; } .banner-err svg { --od-icon-size: 16px; color: var(--s-failed); flex: none; } .banner-err span { flex: 1; min-width: 0; } /* a button that writes: its own pending state, then the toast */ .btn[aria-busy="true"], .cta[aria-busy="true"], .pill[aria-busy="true"] { pointer-events: none; opacity: 0.8; } .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: hy-spin 700ms linear infinite; flex: none; } @keyframes hy-spin { to { transform: rotate(360deg); } } .toast .ti { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--s-done); color: #14161B; flex: none; } .toast .ti.bad { background: var(--s-failed); } .toast .ti svg { --od-icon-size: 14px; } .flash { animation: hy-flash 1.2s var(--ease-out); } @keyframes hy-flash { 0% { background: color-mix(in oklab, var(--accent) 22%, var(--panel)); } 100% { background: transparent; } } /* the review-only state switcher, folded bottom-right */ .stsw { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--fs-xs); } .stsw > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); color: var(--text-2); box-shadow: var(--shadow-pop); font-weight: 520; } .stsw > button svg { --od-icon-size: 14px; } .stsw .menu { display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-pop); min-width: 196px; animation: popIn var(--t-mid) var(--ease-out); } .stsw .menu h4 { margin: 4px 8px 4px; font-size: var(--fs-cap); font-weight: 520; color: var(--muted-2); letter-spacing: 0.08em; text-transform: uppercase; } .stsw .menu button { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 9px; text-align: left; color: var(--text-2); } .stsw .menu button svg { --od-icon-size: 14px; color: var(--muted); } .stsw .menu button[aria-checked="true"] { background: var(--chip-on); color: var(--text); } @media (hover: hover) { .stsw .menu button:hover { background: var(--panel-hover); } } .stsw .menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; } @media (max-width: 640px) { .stsw { bottom: calc(var(--dock-h) + 12px); right: 12px; } } /* ════════ charts ════════ */ .vbars { display: flex; align-items: flex-end; gap: 2px; height: var(--h, 34px); min-width: 0; } .vbars i { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 1px 1px; background: var(--c, var(--chip-on)); min-height: 1px; } .vbars i.hi { background: var(--text); } .vbars.bad i { --c: color-mix(in oklab, var(--s-failed) 70%, var(--panel)); } .vbars.ind i { --c: color-mix(in oklab, var(--s-running) 70%, var(--panel)); } .hero .vbars i { background: rgb(20 22 27 / 0.22); } .hero .vbars i.hi { background: var(--hero-ink); } .sbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--bar-track); } .sbar.lg { height: 12px; border-radius: 6px; } .sbar i { display: block; height: 100%; background: var(--c); min-width: 2px; } .hero .sbar { background: rgb(20 22 27 / 0.1); } .lgd { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); } .lgd span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .lgd i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; } .lgd b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; } .hero .lgd { color: var(--hero-ink-2); } .hero .lgd b { color: var(--hero-ink); } .heat { display: grid; gap: 3px; align-items: center; font-size: var(--fs-xs); min-width: 0; } .heat .rl { color: var(--text-2); font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; } .heat .c { height: 20px; border-radius: 4px; background: var(--bar-track); } .heat .hn { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; } .heat .hl { text-align: center; color: var(--muted-2); font-size: 10.5px; } .durs { display: grid; gap: 2px; } .dur { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 54px 54px; gap: 10px; align-items: center; min-height: 26px; font-size: var(--fs-xs); } .dur > span:first-child { font-family: var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dur .tr2 { position: relative; height: 10px; border-radius: 5px; background: var(--bar-track); overflow: hidden; } .dur .tr2 i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; } .dur .tr2 .p95 { background: color-mix(in oklab, var(--s-running) 35%, var(--panel)); } .dur .tr2 .p50 { background: var(--s-running); } .dur .r { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); } .dur .r.m { color: var(--muted); } .ring2 { width: 40px; height: 40px; transform: rotate(-90deg); flex: none; } .ring2 circle { fill: none; stroke-width: 5; } .ring2 .t0 { stroke: var(--bar-track); } .ring2 .t1 { stroke: var(--s-running); stroke-linecap: round; transition: stroke-dashoffset 700ms var(--ease-out); } .ring2.hot .t1 { stroke: var(--s-paused); } .ring2.full .t1 { stroke: var(--s-failed); } /* tile row grammar for Hypatia: four tiles, a hero and three companions, equal height */ .kp { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; } .kp.five { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); } .kp > .tile { min-height: 148px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-width: 0; } .kp .hero { grid-template-rows: auto minmax(0, 1fr) auto; } .kp .fig strong { font-size: var(--fs-tile); } .kp .hero .fig strong { font-size: 44px; font-weight: 300; letter-spacing: -0.035em; } .kp .hero .fig small { color: var(--hero-ink-2); } .kp .tile .viz { min-width: 0; display: flex; align-items: flex-end; } .kp .tile .viz > * { width: 100%; } @media (max-width: 1280px) { .kp.five { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } .kp.five > .hero { grid-row: span 2; } } @media (max-width: 1080px) { .kp { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kp > .hero { grid-column: 1 / -1; grid-row: auto !important; } .kp.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .kp > .tile { min-height: 128px; } } /* rows and tables */ .dtr.click { cursor: pointer; transition: background var(--t-fast) var(--ease-out); } @media (hover: hover) { .dtr.click:hover { background: var(--panel-hover); } } .dtr.click:focus-visible { outline-offset: -2px; } .dtr.sel { background: var(--panel-checked); } .dt .tr { cursor: default; } .dt .tr.click { cursor: pointer; } .capcell { display: grid; gap: 4px; min-width: 0; } .capcell small { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .racc-b { width: 26px; height: 26px; border: 0; background: none; } .racc-b svg { transition: transform var(--t-mid) var(--ease-out); } .racc-b[aria-expanded="true"] svg { transform: rotate(90deg); } .racc-x { padding: 4px 16px 14px 50px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 10px; background: var(--canvas); } .pf .grow { flex: 1; } /* stage bars: a run's stages on one time axis (peek drawer, unfolded rows) */ .stb { display: grid; gap: 5px; } .stb-r { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 52px 54px; gap: 10px; align-items: center; font-size: var(--fs-xs); min-height: 20px; } .stb-r > span:first-child { font-family: var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stb-r .t { position: relative; height: 8px; border-radius: 4px; background: var(--bar-track); } .stb-r .t i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--c, var(--s-done)); min-width: 3px; } .stb-r .t i.run { background: var(--s-running); } .stb-r .t i.fail { background: var(--s-failed); } .stb-r .n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } /* the run drawer: full height, right */ .drawer.wide { width: min(620px, calc(100vw - 24px)); } .dw-h .ico-t { width: 40px; height: 40px; border-radius: 12px; } .dw-h .ico-t svg { --od-icon-size: 18px; } .dw-h > div { min-width: 0; flex: 1; } .dw-h h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-k { display: block; font-size: var(--fs-xs); color: var(--muted); } .dw-f .btn.pri { margin-left: auto; } .dw-sec { display: grid; gap: 8px; min-width: 0; } .dw-sec > .k { display: flex; align-items: center; gap: 8px; } .logs { display: grid; gap: 2px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 4px; max-height: 240px; overflow-y: auto; } .lgl { display: grid; grid-template-columns: 52px auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 28px; padding: 0 8px; border-radius: 7px; font-size: var(--fs-xs); color: var(--text-2); text-align: left; width: 100%; } .lgl > span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; } button.lgl { cursor: pointer; } @media (hover: hover) { button.lgl:hover { background: var(--panel-hover); } } .errbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--s-failed) 12%, var(--panel)); font-family: var(--mono); font-size: 12px; color: var(--text); overflow-wrap: anywhere; } .errbox svg { --od-icon-size: 15px; color: var(--s-failed); margin-top: 1px; } /* hovercard (Gantt bars, waterfall rows) */ .hc { position: fixed; z-index: 80; pointer-events: none; width: 300px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-pop); display: grid; gap: 8px; font-size: var(--fs-xs); color: var(--text-2); opacity: 0; transform: translateY(4px); transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); } .hc.on { opacity: 1; transform: none; } .hc .hc-k { display: flex; align-items: center; gap: 8px; color: var(--muted); } .hc b.t { display: block; font-size: var(--fs-sm); color: var(--text); font-weight: 560; line-height: 1.3; overflow-wrap: anywhere; } .hc dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; } .hc dt { color: var(--muted); } .hc dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hc .stg { display: flex; gap: 2px; height: 6px; } .hc .stg i { flex: 1; border-radius: 2px; background: var(--bar-track); } .hc .stg i.d { background: var(--c); } .hc .stg i.f { background: var(--s-failed); } .hc .stg i.r { background: var(--c); opacity: 0.55; } /* ════════ the Timeline (Gantt) ════════ */ .gt { margin-top: 12px; flex: 1 0 auto; min-height: 560px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-tile); overflow: hidden; position: relative; } .gt:focus-visible { outline-offset: 2px; } .gt-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; min-width: 0; } .gt-bar .seg button { height: 24px; } .gt-bar .sp { flex: 1; } .gt-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; } .gt-chips::-webkit-scrollbar { display: none; } .gchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 9px; border-radius: var(--r-pill); background: var(--chip); color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; flex: none; transition: background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); } .gchip i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); } .gchip i.hatch { background: var(--c); background-image: var(--hatch); } .gchip b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; } .gchip[aria-pressed="false"] { opacity: 0.45; } .gchip[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); } @media (hover: hover) { .gchip:hover { background: var(--chip-hover); } } .gt-mini { position: relative; height: 54px; border-bottom: 1px solid var(--line-soft); background: var(--canvas); touch-action: none; cursor: crosshair; } .gt-mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .gt-brush { position: absolute; top: 4px; bottom: 4px; border-radius: 7px; background: color-mix(in oklab, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--focus) 80%, transparent); cursor: grab; touch-action: none; } .gt-brush:active { cursor: grabbing; } .gt-brush::before, .gt-brush::after { content: ""; position: absolute; top: 50%; width: 4px; height: 18px; margin-top: -9px; border-radius: 2px; background: var(--focus); } .gt-brush::before { left: -2px; } .gt-brush::after { right: -2px; } .gt-brush .h { position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize; } .gt-brush .h.l { left: -7px; } .gt-brush .h.r { right: -7px; } .gt-body { position: relative; min-height: 0; display: grid; grid-template-columns: var(--lw, 248px) minmax(0, 1fr); } .gt-lanes { position: relative; z-index: 3; border-right: 1px solid var(--line-soft); background: var(--panel); overflow: hidden; } .gt-lanes-in { position: absolute; left: 0; right: 0; top: 0; will-change: transform; } .gt-lh { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; text-align: left; width: 100%; } @media (hover: hover) { .gt-lh:hover { background: var(--panel-hover); } } .gt-lh .car { width: 18px; height: 18px; display: grid; place-items: center; color: var(--muted); flex: none; } .gt-lh .car svg { --od-icon-size: 11px; transition: transform var(--t-mid) var(--ease-out); } .gt-lh[aria-expanded="true"] .car svg { transform: rotate(90deg); } .gt-lh .nm { flex: 1; min-width: 0; display: grid; } .gt-lh .nm b { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; } .gt-lh .nm small { color: var(--muted); font-size: var(--fs-cap); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .gt-lh .n { font-size: var(--fs-cap); padding: 2px 6px; border-radius: var(--r-pill); background: var(--chip); color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; } .gt-head { display: grid; grid-template-columns: var(--lw, 248px) minmax(0, 1fr); border-bottom: 1px solid var(--line-soft); } .gt-head .corner { border-right: 1px solid var(--line-soft); padding: 8px 10px; display: grid; align-content: space-between; gap: 6px; font-size: var(--fs-cap); color: var(--muted-2); min-width: 0; } .gt-head .corner .sel { display: flex; gap: 6px; } .gt-head .corner select { height: 24px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--canvas); color: var(--text-2); font-size: var(--fs-cap); padding: 0 22px 0 8px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) 10px, calc(100% - 8px) 10px; background-size: 4px 4px; background-repeat: no-repeat; min-width: 0; flex: 1; } .gt-head .corner .lab { display: flex; justify-content: space-between; gap: 6px; } .gt-axis { position: relative; height: 104px; touch-action: none; cursor: grab; } .gt-axis canvas, .gt-plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .gt-plot { position: relative; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; } .gt-plot.drag, .gt-axis.drag { cursor: grabbing; } .gt-plot canvas.ov { pointer-events: none; } .gt-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .gt-scroll > div { width: 1px; } .gt-foot { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); min-width: 0; flex-wrap: wrap; } .gt-foot kbd, .wf kbd { font: inherit; font-size: 10.5px; padding: 1px 5px; border-radius: 5px; background: var(--chip); color: var(--text-2); border: 1px solid var(--line-soft); } .gt-foot .keys { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; } .gt-foot .keys span { white-space: nowrap; } .gt-foot .sp { flex: 1; } .gt-empty { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; } .gt-ll { position: absolute; left: 12px; bottom: 10px; z-index: 5; background: var(--panel); border-radius: 10px; padding: 4px 10px; } .gt-ll:not(.on) { pointer-events: none; background: transparent; } .gt .kbd-focus { position: absolute; pointer-events: none; border-radius: 6px; box-shadow: 0 0 0 2px var(--focus); z-index: 4; } .gt-now { display: inline-flex; align-items: center; gap: 6px; } .gt-now svg { --od-icon-size: 14px; } .gt.full { position: fixed; inset: 12px; z-index: 55; margin: 0; box-shadow: var(--shadow-pop); } @media (max-width: 900px) { .gt-body, .gt-head { --lw: 188px; } } @media (max-width: 640px) { .gt { min-height: 640px; } .gt-body, .gt-head { --lw: 132px; } .gt-lh { font-size: var(--fs-xs); padding: 0 6px 0 4px; gap: 4px; } .gt-lh .n { display: none; } .gt-head .corner .sel { flex-direction: column; } .gt-foot .keys { display: none; } .gt-bar .search { width: 100%; order: 5; height: 40px; } } /* ════════ the trace waterfall ════════ */ .wf { --stw: 360px; --cw: 92px; --rowh: 32px; position: relative; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-tile); overflow: hidden; min-height: 640px; height: max(640px, calc(100dvh - 140px)); } .wf:focus-visible { outline-offset: 2px; } .wf.full { position: fixed; inset: 12px; z-index: 55; height: auto; box-shadow: var(--shadow-pop); } .wf-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; min-width: 0; } .wf-top .title { font-size: var(--fs-md); font-weight: 560; white-space: nowrap; } .wf-top .sp { flex: 1; } .wf-top .search { width: 220px; } .wf-top .search kbd { margin-left: auto; } .wf-livebtn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--chip); color: var(--muted); font-size: var(--fs-xs); font-weight: 520; } .wf-livebtn i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .wf-livebtn.on { background: color-mix(in oklab, var(--s-done) 18%, var(--panel)); color: var(--text); } .wf-livebtn.on i { background: var(--s-done); --dot: var(--s-done); animation: hy-ping 2.4s var(--ease-out) infinite; } .wf-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h); padding: 0 11px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line-soft); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; } .wf-chip svg { --od-icon-size: 14px; } .wf-chip[aria-pressed="true"] { background: var(--accent-pill); color: var(--accent-pill-ink); border-color: transparent; } @media (hover: hover) { .wf-chip:hover { background: var(--chip); } .wf-chip[aria-pressed="true"]:hover { background: var(--accent-pill); } } .wf-stats { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; } .wf-stats::-webkit-scrollbar { display: none; } .wf-stats > div { padding: 10px 12px; border-right: 1px solid var(--line-soft); min-width: 0; scroll-snap-align: start; } .wf-stats > div:last-child { border-right: 0; } .wf-stats .k { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-stats b { display: block; margin-top: 2px; font-size: 19px; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .wf-stats b.bad { color: var(--s-failed); } .wf-stats small { display: block; font-size: var(--fs-cap); color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1440px) { .wf-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .wf-stats > div:nth-child(5n) { border-right: 0; } .wf-stats > div:nth-child(-n+5) { border-bottom: 1px solid var(--line-soft); } } .wf-mini { position: relative; height: 46px; border-bottom: 1px solid var(--line-soft); background: var(--canvas); display: grid; grid-template-columns: var(--stw) minmax(0, 1fr) var(--cw); touch-action: none; } .wf-mini .lbl { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: var(--fs-xs); color: var(--muted); border-right: 1px solid var(--line-soft); min-width: 0; } .wf-mini .lbl svg { --od-icon-size: 14px; } .wf-mini .cv { position: relative; cursor: crosshair; } .wf-mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .wf-mini .gt-brush { top: 3px; bottom: 3px; } .wf-head { display: grid; grid-template-columns: var(--stw) minmax(0, 1fr) var(--cw); border-bottom: 1px solid var(--line-soft); height: 34px; } .wf-head > span { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: var(--fs-xs); color: var(--muted); border-right: 1px solid var(--line-soft); white-space: nowrap; min-width: 0; } .wf-head > span:last-child { border-right: 0; border-left: 1px solid var(--line-soft); justify-content: flex-end; } .wf-head svg { --od-icon-size: 14px; } .wf-axis { position: relative; cursor: ew-resize; touch-action: none; } .wf-axis canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .wf-body { position: relative; min-height: 0; overflow: hidden; } .wf-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .wf-names { position: absolute; left: 0; top: 0; width: var(--stw); } .wf-plot { position: absolute; top: 0; left: var(--stw); right: 0; bottom: 0; pointer-events: none; } .wf-plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .wf-hit { position: absolute; top: 0; left: var(--stw); right: 0; bottom: 0; touch-action: pan-y; } .wf-r { position: absolute; left: 0; width: var(--stw); height: var(--rowh); display: flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); text-align: left; white-space: nowrap; min-width: 0; } .wf-r:focus-visible { outline-offset: -2px; } @media (hover: hover) { .wf-r:hover, .wf-r.hov { background: var(--panel-hover); } } .wf-r.sel { background: var(--accent-row); } .wf-r.hit .ell:first-of-type { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent); text-underline-offset: 3px; } .wf-r .guides { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; } .wf-r .guides i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); } .wf-r .guides i.elbow { bottom: 50%; } .wf-r .guides i.elbow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 8px; height: 1px; background: var(--line); } .wf-r .car { width: 18px; height: 18px; display: grid; place-items: center; color: var(--muted); flex: none; border-radius: 5px; } .wf-r .car svg { --od-icon-size: 10px; transition: transform var(--t-mid) var(--ease-out); } .wf-r .car.open svg { transform: rotate(90deg); } @media (hover: hover) { .wf-r .car:hover { background: var(--chip); color: var(--text); } } .wf-r .ico { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; background: oklch(var(--lane-l) var(--lane-c) var(--h, 262) / 0.18); color: oklch(var(--lane-l) var(--lane-c) var(--h, 262)); } :root[data-mode="light"] .wf-r .ico { background: oklch(var(--lane-l) var(--lane-c) var(--h, 262) / 0.16); color: oklch(var(--lane-l2) var(--lane-c2) var(--h, 262)); } .wf-r .ico svg { --od-icon-size: 12px; } .wf-r .ico.bad { background: color-mix(in oklab, var(--s-failed) 20%, var(--panel)); color: var(--s-failed); } .wf-r .ico.run { background: var(--hero); color: var(--hero-ink); } .wf-r b { font-weight: 520; color: var(--text); } .wf-r .ell { flex: 0 1 auto; } .wf-r .mut { color: var(--muted); font-size: var(--fs-xs); } .wf-r .n { margin-left: auto; padding-left: 6px; font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; flex: none; } .wf-r .spinr { width: 10px; height: 10px; border-width: 1.5px; color: var(--s-running); } .wf-r.lane { font-size: var(--fs-sm); } .wf-r.run { font-size: var(--fs-md); } .wf-cost { position: absolute; right: 0; width: var(--cw); height: var(--rowh); display: grid; align-content: center; justify-items: end; gap: 2px; padding: 0 12px; border-left: 1px solid var(--line-soft); font-size: var(--fs-cap); color: var(--text-2); font-variant-numeric: tabular-nums; pointer-events: none; background: var(--panel); z-index: 1; } .wf-cost i { display: block; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--text) 55%, transparent); max-width: 100%; } .wf-cost.zero { color: var(--muted-2); } .wf-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; min-width: 0; font-size: var(--fs-xs); color: var(--muted); } .wf-foot .sp { flex: 1; } .wf-foot .at { font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 64px; } .wf-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; } .wf-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .wf-legend i { width: 14px; height: 8px; border-radius: 2px; } .wf-legend .lg-call { background: oklch(var(--lane-l) var(--lane-c) 272); } .wf-legend .lg-step { background: oklch(var(--lane-l) var(--lane-c) 272 / 0.4); box-shadow: inset 0 0 0 1px oklch(var(--lane-l) var(--lane-c) 272); } .wf-legend .lg-cached { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); background-image: radial-gradient(var(--muted) 1px, transparent 1.2px); background-size: 4px 4px; } .wf-legend .lg-wait { background: var(--hatch); box-shadow: inset 0 0 0 1px var(--line); } .wf-legend .lg-hand { height: 0; border-top: 1.5px dashed var(--muted); border-radius: 0; } .wf-legend .lg-fail { background: var(--s-failed); } .wf-legend .lg-crit { background: var(--focus); height: 3px; } .wf-speed { position: relative; } .wf-speed .menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 10; display: grid; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-pop); min-width: 92px; } .wf-speed .menu button { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; border-radius: 8px; font-size: var(--fs-sm); } .wf-speed .menu button[aria-selected="true"] { background: var(--chip-on); } .wf-bubble { position: absolute; z-index: 6; top: 2px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: var(--cta-bg); color: var(--cta-ink); font-size: var(--fs-cap); font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; } .wf-note { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: var(--fs-xs); color: var(--muted); border-bottom: 1px solid var(--line-soft); } .wf-views .seg button { height: 24px; } .wf-alt { position: absolute; inset: 0; overflow: auto; background: var(--panel); } .wf-flame { position: absolute; inset: 0; } .wf-flame canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; } .wf-tbl .dtr { min-height: 34px; font-size: var(--fs-xs); } .wf-tbl .thead button { display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; } .wf-tbl .thead button[aria-sort] { color: var(--text); } .wf-tbl .thead svg { --od-icon-size: 11px; } .wf-bym { display: grid; gap: 6px; } .bym { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 64px 64px; gap: 10px; align-items: center; font-size: var(--fs-xs); min-height: 22px; } .bym > span:first-child { font-family: var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bym .two { display: grid; gap: 2px; } .bym .two i { display: block; height: 4px; border-radius: 2px; } .bym .two i.t { background: var(--s-running); } .bym .two i.c { background: var(--blush); } .bym .r { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); } .wf-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tok { display: grid; gap: 6px; } .tok .bar3 { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; } .tok .bar3 i { display: block; height: 100%; } .tok .bar3 .in { background: var(--s-running); } .tok .bar3 .out { background: var(--pink); } .tok .bar3 .ca { background: var(--s-done); } @media (max-width: 1280px) { .wf { --stw: 300px; } } @media (max-width: 900px) { .wf { --stw: 220px; --cw: 76px; } .wf-top .search { width: 180px; } } @media (max-width: 640px) { .wf { --stw: 0px; --cw: 0px; min-height: 520px; height: auto; grid-template-rows: auto auto auto auto auto auto; } .wf-stats { display: flex; overflow-x: auto; } .wf-stats > div { flex: 0 0 38%; border-bottom: 0 !important; } .wf-top .search { width: 100%; order: 9; height: 40px; } .wf-mini .lbl, .wf-head > span:first-child, .wf-head > span:last-child { display: none; } .wf-mini, .wf-head { grid-template-columns: minmax(0, 1fr); } .wf-body { height: 420px; } .wf-names, .wf-cost { display: none; } .wf-legend { display: none; } } /* the phone's lane list: tap a lane to open its spans */ .wf-phone { display: none; } @media (max-width: 640px) { .wf-phone { display: grid; gap: 2px; padding: 6px; } .wf-phone .lane { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 6px 10px; border-radius: 10px; text-align: left; width: 100%; } .wf-phone .lane .ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: oklch(var(--lane-l) var(--lane-c) var(--h) / 0.2); color: oklch(var(--lane-l) var(--lane-c) var(--h)); } .wf-phone .lane b { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wf-phone .lane small { display: block; font-size: var(--fs-xs); color: var(--muted); } .wf-phone .lane .spark2 { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--bar-track); position: relative; overflow: hidden; } .wf-phone .lane .spark2 i { position: absolute; top: 0; bottom: 0; background: oklch(var(--lane-l) var(--lane-c) var(--h)); border-radius: 2px; } .wf-phone .lane[aria-expanded="true"] { background: var(--panel-checked); } .wf-phone .spans { display: grid; gap: 1px; padding: 0 4px 8px 40px; } .wf-phone .spans button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 44px; align-items: center; text-align: left; font-size: var(--fs-xs); color: var(--text-2); padding: 0 8px; border-radius: 8px; } .wf-phone .spans button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* the run page header */ .runhead { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-tile); overflow: hidden; } .runhead > div { background: var(--panel); padding: 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; } .runhead b { font-weight: 450; font-size: var(--fs-lg); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .runhead b .mut { color: var(--muted); font-size: var(--fs-sm); } .stage-prog { display: flex; gap: 3px; height: 8px; } .stage-prog i { flex: 1; border-radius: 3px; background: var(--bar-track); } .stage-prog i.d { background: var(--c); } .stage-prog i.r { background: var(--c); animation: hy-breathe 2s var(--ease-out) infinite; } .stage-prog i.f { background: var(--s-failed); } @keyframes hy-breathe { 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .stage-prog i.r { animation: none; } } .ctlrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .trace-pick { display: inline-flex; align-items: center; gap: 8px; } .mode-opts { display: grid; gap: 6px; } .will { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); } .will b { color: var(--text); font-weight: 560; } .will ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; } /* home index */ .home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 16px; } .home-card { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 16px; border-radius: var(--r-tile); background: var(--panel); border: 1px solid var(--line-soft); min-height: 168px; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } @media (hover: hover) { .home-card:hover { background: var(--panel-hover); transform: translateY(-2px); } } .home-card .ico-t { width: 36px; height: 36px; border-radius: 10px; } .home-card b { font-size: var(--fs-lg); font-weight: 560; letter-spacing: -0.01em; } .home-card p { margin: 0; font-size: var(--fs-sm); color: var(--muted); } .home-card .tags { display: flex; gap: 6px; flex-wrap: wrap; align-self: end; } /* the loading showcase */ .lx { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; margin-top: 10px; } .lx .box-b { min-height: 150px; } .lx-cap { font-size: var(--fs-xs); color: var(--muted); } /* narrow: the page never swipes sideways */ html, body { max-width: 100%; } .main { overflow-x: hidden; } @media (max-width: 640px) { .ctl .search { min-width: 0; } .runhead { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dur { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 48px 48px; } .stb-r { grid-template-columns: minmax(0, 90px) minmax(0, 1fr) 40px; } .stb-r > :last-child { display: none; } .bym { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 56px; } .bym > :last-child { display: none; } } /* ════════ page pieces added with the pages ════════ */ /* the waterfall stacks its parts top to bottom; the body takes what is left */ .wf { display: flex; flex-direction: column; } .wf > .wf-body { flex: 1 1 auto; min-height: 240px; } .wf > .stale-mark { margin: 0; border-radius: 0; } .wf-sp .wf-r { background: transparent; text-align: left; } .wf-scroll { z-index: 2; } .wf-scroll.drag { cursor: grabbing; } .wf-cv { pointer-events: none; z-index: 1; } .wf-ll { left: calc(var(--stw) + 12px); bottom: 12px; z-index: 6; } .wf-ll.on .hy-ll { opacity: 1; } .wf-axis .wf-bubble { top: 50%; transform: translate(-50%, -50%); } .wf-search.has kbd { display: none; } .wf-search kbd { font-size: 10.5px; } .wf-flameby[hidden] { display: none; } .wf .gt-empty { background: var(--panel); } @media (max-width: 640px) { .wf-sp .wf-r { display: none; } .wf-scroll { left: 0; } .wf-cv { left: 0 !important; right: 0 !important; } .wf-ll { left: 12px; } .wf-top .wf-views { order: 8; } .wf-top [data-crit] { display: none; } } /* stacked day bars (spend by programme) */ .sbars { display: flex; align-items: flex-end; gap: 3px; height: var(--h, 132px); min-width: 0; } .sbars > span { flex: 1 1 0; min-width: 3px; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; position: relative; border-radius: 3px; } .sbars > span > i { display: block; min-height: 0; background: var(--c); border-radius: 2px; transform-origin: bottom; animation: hy-drawy 520ms var(--ease-out) both; } .sbars > span.zero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--bar-track); } .sbars > span.today > i:last-child { box-shadow: 0 -2px 0 var(--text); } .saxis { display: flex; justify-content: space-between; font-size: var(--fs-cap); color: var(--muted-2); margin-top: 6px; font-variant-numeric: tabular-nums; } @keyframes hy-drawy { from { transform: scaleY(0); } } @media (prefers-reduced-motion: reduce) { .sbars > span > i { animation: none; } } /* caps: live runs as rings */ .caps { display: grid; gap: 4px; } .cap { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; text-align: left; width: 100%; } @media (hover: hover) { .cap:hover { background: var(--panel-hover); } } .cap b { display: block; font-weight: 500; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cap small { display: block; font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cap .v { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; } .cap .v small { text-align: right; } /* health tiles */ .hgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 10px; } .hgrid > .tile { min-height: 132px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; } .hgrid .tile-top svg { --od-icon-size: 15px; color: var(--muted); } @media (max-width: 1600px) { .hgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hgrid > .tile { min-height: 120px; } } /* the paused-at-cap banner */ .capban { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px 10px 14px; border-radius: 14px; background: color-mix(in oklab, var(--s-paused) 14%, var(--panel)); border: 1px solid color-mix(in oklab, var(--s-paused) 28%, transparent); font-size: var(--fs-sm); min-width: 0; flex-wrap: wrap; } .capban > svg { --od-icon-size: 18px; color: var(--s-paused); flex: none; } .capban .txt { flex: 1 1 260px; min-width: 0; } .capban .txt b { font-weight: 560; } .capban .txt small { display: block; color: var(--muted); font-size: var(--fs-xs); } .capban .chips { gap: 6px; } .capban .chipb { height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 520; color: var(--text); display: inline-flex; align-items: center; gap: 6px; } @media (hover: hover) { .capban .chipb:hover { background: var(--chip); } } /* the hero's gates */ .gates { display: grid; gap: 6px; align-content: end; } .gate { display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr) 24px; gap: 8px; align-items: center; font-size: var(--fs-xs); color: var(--hero-ink-2); } .gate .t { height: 6px; border-radius: 3px; background: rgb(20 22 27 / 0.12); overflow: hidden; } .gate .t i { display: block; height: 100%; border-radius: inherit; background: var(--hero-ink); } .gate b { text-align: right; color: var(--hero-ink); font-weight: 520; font-variant-numeric: tabular-nums; } .hero .btn.pri { background: #14161B; color: #F4F4F5; } .hero-foot .btn { height: 28px; } /* a form inside a card */ .srcf { display: grid; gap: 10px; } .srcf .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .srcf .hint { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 6px; align-items: center; min-height: 18px; } .srcf .hint svg { --od-icon-size: 13px; } .srcf .hint.ok { color: color-mix(in oklab, var(--s-done) 80%, var(--text)); } .srcf .hint.bad { color: var(--s-failed); } @media (max-width: 640px) { .srcf .two { grid-template-columns: minmax(0, 1fr); } } /* runs table: the inline stage strip of an unfolded row */ .runs-t .tr { min-height: 52px; } .runs-t .nm b { display: block; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); } .runs-t .nm small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .runs-t .kd { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; } .runs-t .kd svg { --od-icon-size: 14px; color: var(--muted); } .tbl-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line-soft); } .tbl-foot .grow { flex: 1; } .page-fill { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; } .page-fill > .box { flex: 1 0 auto; } :root[data-dw="open"] .stsw { opacity: 0; pointer-events: none; transform: translateY(8px); } .stsw { transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .gt-scroll { touch-action: pan-y; z-index: 2; } .gt-plot canvas { z-index: 1; } .gt-axis canvas.ov { pointer-events: none; } .gt-head .corner { position: relative; } .gt-head .corner .strip-l { position: absolute; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: var(--fs-cap); color: var(--muted); white-space: nowrap; } .gt-head .corner .strip-l b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .gt-head .corner .strip-l i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; } .gt-head .corner .strip-l span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .gt-head .corner .tops { display: grid; gap: 6px; } .gt-head .corner label { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 6px; } .gt-head .corner select { width: 100%; } .gt-lh { cursor: pointer; text-align: left; width: 100%; background: var(--panel); } .gt-lh .kico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--chip); color: var(--text-2); flex: none; } .gt-lh .kico svg { --od-icon-size: 12px; } .gt-lh .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; margin: 0 7px; } .gt-lh.folded .nm small::after { content: " · folded"; } .gt .hc { width: 320px; } .gt-bar .search { width: 210px; } .gt-bar select.inp { height: var(--ctl-h); width: auto; max-width: 190px; border-radius: var(--r-pill); padding: 0 28px 0 12px; font-size: var(--fs-sm); } .kp .hero svg.conc { width: 100%; height: 44px; display: block; } .kp .hero svg.conc path.a { fill: rgb(20 22 27 / 0.14); } .kp .hero svg.conc path.l { fill: none; stroke: var(--hero-ink); stroke-width: 1.5; } .gt-live { display: inline-flex; } .gt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 640px) { .gt-bar select.inp { max-width: 100%; flex: 1 1 140px; } .gt-head .corner label { grid-template-columns: minmax(0, 1fr); } .gt-head .corner label > span { display: none; } .gt-axis { height: 104px; } } .gt { display: flex; flex-direction: column; min-height: 640px; } .gt > .gt-body { flex: 1 1 auto; min-height: 380px; } .gt > .stale-mark { margin: 0; border-radius: 0; } .gt-lanes-in .gt-lh { border-radius: 0; } @media (max-width: 640px) { .gt { min-height: 600px; } .gt > .gt-body { min-height: 360px; } } .gt-head .corner { align-content: start; padding-top: 10px; } .gt-head .corner .tops { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .gt-head .corner .tops label { display: block; } .gt-head .corner .tops label > span { display: none; } .gt-head .corner select { height: 26px; } .cta:disabled, .pill:disabled { opacity: 0.42; cursor: not-allowed; transform: none; } .bym { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 112px 64px; } @media (max-width: 640px) { .wf-cv { width: 100% !important; } } /* the reduced-motion preview on the loading page mirrors the media query */ :root.rm .sk { animation: none !important; background-image: none; } :root.rm .arrive, :root.rm .draw-x, :root.rm .draw-y, :root.rm .sbars > span > i, :root.rm .stage-prog i.r { animation: none !important; } :root.rm .hy-live i, :root.rm .st i { animation: none !important; } .lx .box-b { align-content: start; } .lx .demo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lx .refreshing { position: relative; } .lx .refreshing .spin { position: absolute; top: 14px; right: 16px; } .lx .box-f > .grow { white-space: normal; overflow: visible; line-height: 1.4; } .home-card.hero { background: var(--hero); color: var(--hero-ink); border-color: transparent; } .home-card.hero p { color: var(--hero-ink-2); } .home-card.hero .ico-t { background: rgb(255 255 255 / 0.5); color: var(--hero-ink); } .home-card.hero .badge { background: rgb(255 255 255 / 0.5); color: var(--hero-ink); } @media (hover: hover) { .home-card.hero:hover { background: var(--hero); filter: brightness(1.03); } } .tabs { overflow-x: auto; scrollbar-width: none; min-width: 0; flex-shrink: 1; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex: none; } @media (max-width: 640px) { .ctl .ctlrow { order: 5; flex: 1 1 100%; margin-left: 0 !important; } .ctl .ctlrow .pill { flex: 1 1 0; justify-content: center; } .ctl .ctlrow .cta { flex: 1 1 100%; order: 0; } .crumbs [aria-current] { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } } @media (max-width: 640px) { .wf-mini > span:last-child { display: none; } .gt-head .corner .tops { display: none; } .gt-head .corner .strip-l b { display: none; } .gt-head .corner .strip-l { left: 6px; right: 4px; } } .fpop .lanes-only { display: none; } @media (max-width: 640px) { .fpop .lanes-only { display: grid; } } /* Timeline: the idle-tail key in the foot */ .gt-foot .idle-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); } /* a lane with nothing in the window: one quiet line */ .gt-lh.quiet { color: var(--muted); } .gt-lh.quiet .nm b { color: var(--muted); font-weight: 450; } .gt-lh.quiet .nm small { display: none; } .gt-lh.quiet .smark, .gt-lh.quiet .kico, .gt-lh.quiet .sdot { opacity: 0.55; transform: scale(0.82); } @media (max-width: 720px) { .gt-foot .idle-key { display: none; } } /* ───────────────── Hypatia console v2 additions (HAL-5478) ───────────────── */ /* A long load's line appears by itself after 2 s (server-streamed blocks have no script to time it). */ .hy-ll.late { animation: hy-late 320ms var(--ease-out) 2s both; } @keyframes hy-late { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hy-ll.late { animation-duration: 1ms; } } /* A sidebar item that opens the current console: its arrow sits at the end, quiet. */ .nav-i .ext { margin-left: auto; --od-icon-size: 13px; opacity: 0.45; } html.sb-mini .nav-i .ext { display: none; } /* Numbers and their units never wrap, in any table, tile or list (founder, 12 Nov). */ .num, .dtr .n, .dtr .r, .tile .fig strong, .tile .fig small.nw, .cnt, .kv dd, .capcell small, .cap .v, .cap .v small, .tbl-foot .grow { white-space: nowrap; font-variant-numeric: tabular-nums; } /* A pair of cards is one unit that fills the window together (founder, 12 Nov): equal heights, each side scrolls inside its own card past --pair-max, and the shorter side spreads its rows over its own height (.fill) instead of ending in empty space. */ .pair { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 420px)), 1fr)); align-items: stretch; } .pair > .box { min-height: 0; } .pair > .box > .box-b.scroll { overflow: auto; max-height: var(--pair-max, 460px); overscroll-behavior: contain; } .pair > .box > .box-b.fill { display: flex; flex-direction: column; } .pair > .box > .box-b.fill > .caps, .pair > .box > .box-b.fill > .dt { flex: 1 1 auto; display: flex; flex-direction: column; } .pair > .box > .box-b.fill > .caps > *, .pair > .box > .box-b.fill > .dt > .tr { flex: 1 1 auto; } /* ── The dock (founder, 12 Nov: "the mobile does not have a dock?") ── One line, edge to edge, up to 900 px; above that the sidebar or its rail takes over, so no width has neither. Thick frosted glass that content never shows through, a clear top rim, targets of 48 px or more, the safe area respected. Five places; the current one has its filled icon, its label and an accent lens that glides between places. More opens the sidebar's sections as a bottom sheet above the dock. Nothing sits on the dock: the toast, the state switcher and a drawer sit above it. */ @media (max-width: 900px) { :root { --dock-h: 64px; --dock-pad: calc(var(--dock-h) + env(safe-area-inset-bottom)); } .dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: var(--dock-pad); padding: 6px 8px env(safe-area-inset-bottom); gap: 0; background: color-mix(in oklab, var(--sidebar) 90%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 12%, transparent), 0 -10px 28px -14px rgb(0 0 0 / 0.35); } .dock .lens { position: absolute; z-index: 0; top: 7px; left: 8px; height: 50px; width: calc((100% - 16px) / 5); border-radius: 15px; background: color-mix(in oklab, var(--accent) 22%, transparent); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 360ms var(--ease-out), opacity 200ms; pointer-events: none; } .dock .lens[data-none] { opacity: 0; } .dock a, .dock button { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 48px; min-width: 48px; border-radius: 15px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; background: none; border: 0; } .dock [aria-current="page"], .dock button[aria-expanded="true"] { color: var(--text); font-weight: 600; } .dock [aria-current="page"]::before { content: none; } .dock svg { --od-icon-size: 22px; } .dock .cnt { position: absolute; top: 3px; left: calc(50% + 6px); padding: 1px 5px; min-width: 16px; text-align: center; font-size: 10px; font-weight: 650; background: var(--s-waiting); color: #14161B; border-radius: 999px; border: 2px solid var(--sidebar); box-sizing: content-box; } .dock .pdot, .dock .fdot { position: absolute; top: 6px; left: calc(50% + 9px); width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sidebar); } .dock .pdot { background: var(--s-running); animation: pulse 1.6s ease-in-out infinite; } .dock .fdot { background: var(--s-failed); } @media (prefers-reduced-motion: reduce) { .dock .pdot { animation: none; } .dock .lens { transition: none; } } .main { padding-bottom: calc(var(--dock-pad) + var(--gut)) !important; } .ib.menu-btn { display: none !important; } .toast { bottom: calc(var(--dock-pad) + 12px); } .stsw { bottom: calc(var(--dock-pad) + 12px); right: 12px; } /* More: the sidebar's sections as a bottom sheet, above the dock */ .sb { top: auto; left: 0; right: 0; bottom: var(--dock-pad); width: 100%; max-height: min(78dvh, calc(100dvh - var(--dock-pad) - 16px)); overflow-y: auto; border-radius: var(--r-window) var(--r-window) 0 0; border: 1px solid var(--line); border-bottom: 0; transform: translateY(calc(100% + var(--dock-pad) + 24px)); visibility: hidden; padding-bottom: 12px; transition: transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow); } .sb.open { transform: none; visibility: visible; transition: transform var(--t-slow) var(--ease-out); } .sb-scrim { bottom: var(--dock-pad); } /* a drawer is a sheet that stops at the dock, so its footer is never under it */ .drawer { bottom: var(--dock-pad); top: auto; height: min(88dvh, calc(100dvh - var(--dock-pad) - 12px)); } .scrim { bottom: var(--dock-pad); } } @media (min-width: 901px) { .dock { display: none; } } /* A row of tiles never ends with a hole: four tiles are a wide hero over three; below 640 px the odd one out takes the full row. */ @media (max-width: 1080px) { .kp:not(.five) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .kp:not(.five) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kp:not(.five) > .tile:last-child { grid-column: 1 / -1; } } /* The crumbs never wrap: on a phone the page's own name is enough (the dock and the sheet say where you are). */ .crumbs { flex-wrap: nowrap; white-space: nowrap; min-width: 0; overflow: hidden; } .crumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .crumbs > :first-child { display: none; } .crumbs > :nth-child(2) .sep { display: none; } } /* Spread the shorter side of a pair over its own height: heatmap rows, duration rows and form fields grow with the card. */ .pair > .box > .box-b.fill > .heat { flex: 1 1 auto; grid-auto-rows: minmax(24px, 1fr); } .pair > .box > .box-b.fill > .heat .c { height: 100%; min-height: 20px; } .pair > .box > .box-b.fill > .durs { flex: 1 1 auto; grid-auto-rows: minmax(26px, 1fr); } .pair > .box > .box-b.fill > .srcf { flex: 1 1 auto; align-content: space-between; }