/* ===================================================================== Ross design system - v2 (2026-09-12) Source of truth: finance.matthewstrachanross.com (ross-finance index.html, commits of 12 Sep 2026), itself derived from matthewstrachanross.com. Generalised for every personal-project HTML page: dashboards, trackers, tools, docs. When the finance dashboard and this file disagree, the dashboard wins: re-derive this file, never the reverse. Rules of the house - Light is the default (); dark via data-theme="dark". The viewer's OS setting is deliberately ignored: the page decides. - Two typefaces, split by size: everything at 14px (body, labels, table copy, controls) is Inter; every other size on the scale (page title, hero figure, stat values, rail headings, dialog titles, code) is Manrope. Body 14px. Big numbers are weight 500 with tight negative tracking, never bold. - Everything interactive is a pill (border-radius 999px). Segmented controls are lozenges: 3px inset pills inside a pill track. Cards are 20px radius, 34/38px padding on desktop, 16/14px on mobile, page-colour ground with a --line hairline border. The ground is flat: no dot grid, no gradients. - Colour is tokens only. Semantic: --good / --warn / --crit. Series: --s1..--s3. No raw hex in page CSS. - Plain hyphen only (no em or en dashes) in copy, code and file names. - Mobile (<=640px) is designed to 400px: tables become wrapped card rows, header collapses behind the hamburger, no horizontal scroll anywhere. ===================================================================== */ :root{ color-scheme: light; --bg:#efefef; --ink:#1f2124; --muted:#51555b; --line:rgba(34,37,41,.14); --panel:#e4e5e6; --panel-line:rgba(34,37,41,.08); --pill-bg:#1f2124; --pill-ink:#ffffff; --pill2-bg:#e2e2e2; --pill2-ink:#1f2124; --pill2-hover:#d8d8d8; --grid:rgba(34,37,41,.09); --axis:rgba(34,37,41,.26); --s1:#F53030; --s2:#008300; --s3:#4697FB; --good:#0ca30c; --warn:#fab219; --crit:#d03b3b; --goodtext:#006300; --seq250:#86b6ef; --seq450:#3987e5; --shadow:0 12px 34px rgba(0,0,0,.18); --font:"Inter",system-ui,-apple-system,sans-serif; --font-display:"Manrope",system-ui,-apple-system,sans-serif; } :root[data-theme="dark"]{ color-scheme: dark; --bg:#1a1b1f; --ink:#f2f2f1; --muted:#aeb1b6; --line:rgba(255,255,255,.11); --panel:#232428; --panel-line:rgba(255,255,255,.07); --pill-bg:#ffffff; --pill-ink:#0a0a0a; --pill2-bg:#2a2a2a; --pill2-ink:#ffffff; --pill2-hover:#3a3a3a; --grid:rgba(255,255,255,.07); --axis:rgba(255,255,255,.2); --goodtext:#0ca30c; --shadow:0 12px 34px rgba(0,0,0,.3); } /* ---------- base ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--font); font-size:14px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased} a{color:inherit} button, input, select, textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--axis);outline-offset:2px} .muted{color:var(--muted)} .small{font-size:14px} .right{text-align:right} .pos{color:var(--goodtext);font-weight:600} .neg{color:var(--crit);font-weight:600} .spacer{flex:1} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .stack{display:grid;gap:14px} /* ---------- header ---------- */ header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:12px;padding:16px 32px;flex-wrap:wrap} header.top h1{font-size:20pt;margin:0;font-weight:700;letter-spacing:-.02em;white-space:nowrap} .logo{width:26px;height:26px;flex-shrink:0;display:block} [data-theme="dark"] .logo{filter:invert(1)} .avatars{display:flex;align-items:center;flex-shrink:0} .avatars img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line); box-shadow:0 0 0 2px var(--bg);display:block} .avatars img+img{margin-left:-10px} .hdr-state{display:none} .hamburger{display:none;background:transparent;border:1px solid var(--line);border-radius:10px; color:var(--ink);padding:7px 9px;cursor:pointer;line-height:0} .top-controls{display:contents} @media(max-width:640px){ .hdr-state{display:inline;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap} header.top{flex-wrap:nowrap} header.top h1{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .hamburger{display:inline-flex;align-items:center} .top-controls{display:none} .top-controls.open{display:flex;flex-direction:column;align-items:stretch;gap:14px; position:absolute;top:100%;left:0;right:0;background:var(--bg); border-bottom:1px solid var(--line);padding:16px 14px;z-index:60} .top-controls.open .seg{display:flex;width:100%;flex-wrap:wrap} .top-controls.open .seg button{flex:1;font-size:14px;padding:7px 0;text-align:center} .top-controls.open .badge{width:100%;justify-content:center;font-size:14px;padding:10px 0} .top-controls.open details.menu{align-self:flex-end;width:auto} .top-controls.open details.menu summary{display:none} .top-controls.open .menu-list{position:static;background:transparent;border:0;box-shadow:none; padding:0;min-width:0;gap:10px;justify-items:end} .top-controls.open .menu-list button{text-align:right;padding:4px 0;color:var(--ink)} } /* ---------- pills: segmented control, ghost button, primary button, badge, chip ---------- */ .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} .seg button{background:transparent;border:0;color:var(--muted);margin:3px;padding:3px 12px;border-radius:999px;cursor:pointer; font:inherit;font-size:14px;font-weight:500;transition:background-color 180ms ease,color 180ms ease} .seg button.on{background:var(--pill-bg);color:var(--pill-ink);font-weight:600} button.ghost, a.ghost{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--muted); padding:6px 15px;cursor:pointer;font:inherit;font-size:14px;font-weight:500;transition:all 180ms ease} button.ghost:hover, a.ghost:hover{color:var(--ink);border-color:var(--axis)} a.ghost{text-decoration:none;display:inline-block} button.primary{background:var(--pill-bg);color:var(--pill-ink);border:1px solid var(--pill-bg);border-radius:999px; padding:6px 15px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;transition:opacity 180ms ease} button.primary:hover{opacity:.88} button:disabled{opacity:.45;cursor:default} .badge{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500; border-radius:999px;padding:6px 15px;border:1px solid var(--line);color:var(--muted)} .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--muted)} .badge .dot.ok{background:var(--good)} .badge .dot.warn{background:var(--warn)} .badge .dot.crit{background:var(--crit)} .chip{font-size:14px;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--muted);white-space:nowrap} .status-chip{font-size:14px;border-radius:999px;padding:2px 10px;font-weight:600;display:inline-flex;gap:4px;align-items:center} .count{font-size:12px;font-weight:700;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center; background:var(--pill-bg);color:var(--pill-ink);font-variant-numeric:tabular-nums} .count.warn{background:var(--warn);color:#1f2124} /* ---------- overflow menu ---------- */ details.menu{position:relative} details.menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px; padding:6px 14px;color:var(--muted);font-size:14px;line-height:1.2} details.menu summary::before{content:none} details.menu summary::-webkit-details-marker{display:none} details.menu[open] summary{color:var(--ink)} .menu-list{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel); border:1px solid var(--line);border-radius:14px;padding:6px;display:grid;gap:2px;min-width:180px; box-shadow:var(--shadow);z-index:80} .menu-list button{background:transparent;border:0;border-radius:9px;color:var(--ink); padding:9px 13px;cursor:pointer;font:inherit;font-size:14px;text-align:left} .menu-list button:hover{background:var(--pill2-bg)} /* ---------- layout + cards ---------- */ main{max-width:1120px;margin:0 auto;padding:64px 28px 28px;display:grid;gap:28px} main>*, .threecol>div, .twocol>div{min-width:0} .card{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:34px 38px;overflow:hidden} .card h2, .eyebrow{font-size:14px;margin:0 0 22px;color:var(--muted);font-weight:600;letter-spacing:.01em} .card h2.hdr-lg, .eyebrow.hdr-lg{font-size:14px;font-weight:700;color:var(--ink)} .card h2.gap-hdr{margin-bottom:32px} .card h3{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:0 0 12px} /* hero: open on the page, not in a card; one dominant number or headline */ .hero-open{padding:26px 6px 6px} .hero-open .lbl{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.01em} .hero-open .big{font-size:clamp(64px,9vw,104px);font-weight:500;letter-spacing:-.045em;line-height:1.02;margin:6px 0 14px} .hero-open .big.text{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.03em;line-height:1.12;max-width:26ch;text-wrap:balance} .hero-open .row b{color:var(--ink);font-weight:500} .hero-open .dot{width:8px;height:8px;border-radius:50%;display:inline-block} .hero-open .sep{opacity:.45} /* stats */ .stat .lbl{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.01em} .stat .val{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums} .stat .sub{font-size:14px;color:var(--muted);margin-top:6px;max-width:34ch} .stat.small .val{font-size:22px;letter-spacing:-.015em} /* quiet columns inside one card */ .threecol{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0} .threecol>div{padding:0 34px} .threecol>div:first-child{padding-left:0} .threecol>div:last-child{padding-right:0} .threecol>div+div{border-left:1px solid var(--line)} .twocol{display:grid;grid-template-columns:1fr 1fr;gap:0} .twocol>div{padding:0 34px} .twocol>div:first-child{padding-left:0} .twocol>div+div{border-left:1px solid var(--line)} @media(max-width:920px){ .threecol,.twocol{grid-template-columns:1fr} .threecol>div,.twocol>div{padding:22px 0} .threecol>div+div,.twocol>div+div{border-left:0;border-top:1px solid var(--line)} } /* ---------- tables ---------- */ table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} th{font-size:14px;letter-spacing:.01em;color:var(--muted);text-align:left; font-weight:600;padding:10px 10px;border-bottom:1px solid var(--line)} td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px} tr:last-child td{border-bottom:0} td.num,th.num{text-align:right} .railhead td{font-weight:500;color:var(--ink);padding:34px 10px 12px;font-size:24px;letter-spacing:-.02em} .editable{border-bottom:1px dashed transparent;cursor:text;transition:border-color 150ms ease} tr:hover .editable, .editable:hover{border-bottom-color:var(--axis);color:var(--ink)} input.inline{font:inherit;width:110px;background:var(--bg);color:var(--ink);border:1px solid var(--axis);border-radius:8px;padding:2px 6px} .rowtool{opacity:0;transition:opacity 150ms ease} tr:hover .rowtool{opacity:.6} .qdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:2px;background:var(--muted)} .qdot.ok{background:var(--good)} .qdot.warn{background:var(--warn)} .qdot.err{background:var(--crit)} /* list rows (label / value pairs, message lists, queues) */ .lrow{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .lrow:last-child{border-bottom:0} .lrow .lname{flex:1;min-width:0;overflow-wrap:anywhere} .lrow .lval{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap} .lrow .lsub{display:block;color:var(--muted);font-size:14px} /* progress bar */ .bar{height:10px;border-radius:999px;background:var(--grid);position:relative;overflow:hidden} .bar>i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:999px 0 0 999px;opacity:.8} .bar>b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--muted)} /* range slider */ input[type=range].gap{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px; background:linear-gradient(90deg,var(--axis),var(--grid),var(--axis));outline:none} input[type=range].gap::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px; border-radius:50%;background:var(--ink);border:3px solid var(--bg);box-shadow:0 1px 6px rgba(0,0,0,.35);cursor:grab} input[type=range].gap::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid var(--bg);cursor:grab} .gap-ends{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.01em;margin-top:8px} /* ---------- disclosures ---------- */ details.rail{margin-top:10px;border-bottom:1px solid var(--line)} details.rail:last-of-type{border-bottom:0} details.rail:not([open]) summary{padding-bottom:18px} details.rail summary{cursor:pointer;list-style:none;font-weight:500;color:var(--ink); padding:22px 10px 12px;font-size:24px;letter-spacing:-.02em;display:flex;align-items:center} .rail-tot{margin-left:auto;font-size:22px;font-weight:500;letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums} details.rail summary::-webkit-details-marker{display:none} details.rail summary::before{content:"+";display:inline-block;width:30px;color:var(--muted);transition:color 150ms ease} details.rail summary:hover::before{color:var(--ink)} details.rail[open] summary::before{content:"-"} details.rail summary .muted{font-size:14px;letter-spacing:0} details.sec summary{cursor:pointer;list-style:none;font-size:14px;font-weight:500;color:var(--muted); padding:14px 0;border-top:1px solid var(--line);transition:color 150ms ease} details.sec summary:hover{color:var(--ink)} details.sec summary::-webkit-details-marker{display:none} details.sec summary::before{content:"+";display:inline-block;width:20px;color:var(--muted)} details.sec[open] summary::before{content:"-"} details.sec>div{padding:4px 0 18px} /* ---------- forms, dialog, tooltip ---------- */ .field{display:grid;gap:5px;margin-bottom:12px} .field label{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.01em} .field input,.field select,.field textarea{font:inherit;background:transparent;color:var(--ink); border:1px solid var(--line);border-radius:10px;padding:8px 11px;width:100%} .field textarea{min-height:120px;resize:vertical;line-height:1.55} .field .hint{color:var(--muted);font-size:14px} .grid{display:grid;gap:14px}.cols2{grid-template-columns:1fr 1fr} dialog{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:20px;max-width:620px;width:92%;padding:28px;font-family:inherit} dialog::backdrop{background:rgba(10,10,12,.55);backdrop-filter:blur(3px)} dialog h3{font-weight:500;letter-spacing:-.02em;font-size:22px;margin-top:0} .tip{position:relative;cursor:default} /* hover tooltips were removed on 12 Sep; put the fact in the copy instead */ .tooltip{position:fixed;pointer-events:none;background:var(--bg);border:1px solid var(--line);border-radius:12px; padding:9px 12px;font-size:14px;box-shadow:var(--shadow);z-index:99;display:none} .toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--pill-bg);color:var(--pill-ink); padding:9px 16px;border-radius:999px;box-shadow:var(--shadow);font-size:14px;font-weight:500;opacity:0;transition:opacity .2s;pointer-events:none;z-index:99} .toast.show{opacity:1} .empty{color:var(--muted);padding:18px 0} .footer-note{color:var(--muted);font-size:14px;text-align:center;margin:18px auto 0;max-width:640px;line-height:1.8} svg text{font:14px var(--font);fill:var(--muted)} @media(prefers-reduced-motion:reduce){*{transition:none !important}} /* ---------- type split (12 Sep 2026): 14px copy is Inter, every other size is Manrope ---------- */ header.top h1,.hero-open .big,.stat .val,.railhead td,details.rail summary,.rail-tot,dialog h3,.card h3, code,pre,kbd{font-family:var(--font-display)} details.rail summary .muted{font-family:var(--font)} code,kbd{font-size:13px;font-weight:600;letter-spacing:0;background:var(--pill2-bg);border-radius:6px;padding:1px 6px} pre{font-size:13px;line-height:1.6;background:var(--pill2-bg);border-radius:12px;padding:14px 16px;overflow-x:auto;margin:0} pre code{background:none;padding:0;font-weight:500} /* ---------- mobile (<=640px, designed to 400px) ---------- */ @media(max-width:640px){ header.top{padding:10px 14px;gap:8px} header.top h1{font-size:17px} .seg button{padding:4px 10px} button.ghost, a.ghost, button.primary{padding:5px 11px} main{padding:26px 13px 13px;gap:16px} .card{padding:16px 14px;border-radius:16px} .card h2{margin-bottom:14px} .card h2.gap-hdr{margin-bottom:24px} .hero-open{padding:6px 2px 2px} .hero-open .big{font-size:clamp(42px,14vw,64px)} .hero-open .big.text{font-size:clamp(22px,6.5vw,30px)} .hero-open .row{row-gap:4px} .stat .val{font-size:28px} .stat.small .val{font-size:20px} /* tables become wrapped card rows - no horizontal scroll anywhere */ table,tbody{display:block;width:100%} thead{display:none} tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:3px;padding:11px 2px;border-bottom:1px solid var(--line)} tbody tr:last-child{border-bottom:0} td{display:block;border:0;padding:0;white-space:normal;text-align:left} td:first-child{flex:1 1 auto;min-width:0} td.num{text-align:right} td:first-child + td.num{margin-left:auto} .railhead td{font-size:18px;padding-top:22px} details.rail summary{font-size:18px;padding:16px 8px 10px} details.sec summary{padding:11px 0} .footer-note{padding:0 6px} dialog{padding:18px} .grid.cols2{grid-template-columns:1fr} } @media(max-width:430px){ .seg button{padding:5px 8px} .hero-open .big{font-size:clamp(38px,15vw,52px)} }