/* xunu — shared shell. Tokens, type, surfaces, nav. */ /* Theme: the light palette is the default; the dark one applies when the OS asks for it AND the person has not chosen light, or whenever they have chosen dark. The choice is `data-theme` on , written by ui.js (and by the tiny head script in every page, before this sheet loads, so there is no flash). The dark block appears twice because a CSS rule cannot sit both inside and outside a media query. */ :root{--ink:#14171C;--mute:#5A6472;--faint:#8A94A2;--bg:#F4F6F8;--card:#FFF;--line:#E1E6EB; --sunk:#EDF0F4;--petrol:#1F5673;--petrol-soft:rgba(31,86,115,.09);--on-petrol:#fff; --green:#1B6B4A;--green-soft:rgba(27,107,74,.11);--amber:#9C6414;--amber-soft:rgba(156,100,20,.13); --red:#A81F2B;--red-soft:rgba(168,31,43,.10);--r:14px;--page:1080px; --shadow:0 1px 2px rgba(20,23,28,.04),0 8px 24px rgba(20,23,28,.05);color-scheme:light} @media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#E8ECF1;--mute:#98A3B2;--faint:#6B7684;--bg:#0E1116; --card:#161A21;--line:#252B34;--sunk:#11151A;--petrol:#79ADCB;--petrol-soft:rgba(121,173,203,.13);--on-petrol:#0E1116; --green:#5BB58C;--green-soft:rgba(91,181,140,.14);--amber:#D3A055;--amber-soft:rgba(211,160,85,.15); --red:#E0707B;--red-soft:rgba(224,112,123,.13);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.34);color-scheme:dark}} :root[data-theme=dark]{--ink:#E8ECF1;--mute:#98A3B2;--faint:#6B7684;--bg:#0E1116; --card:#161A21;--line:#252B34;--sunk:#11151A;--petrol:#79ADCB;--petrol-soft:rgba(121,173,203,.13);--on-petrol:#0E1116; --green:#5BB58C;--green-soft:rgba(91,181,140,.14);--amber:#D3A055;--amber-soft:rgba(211,160,85,.15); --red:#E0707B;--red-soft:rgba(224,112,123,.13);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.34);color-scheme:dark} html{scrollbar-gutter:stable} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} a{color:var(--petrol)} :focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:6px} /* ── masthead ─────────────────────────────────────────────────────── */ /* Fixed height, never wraps. Previously min-height + flex-wrap, so a longer status string ("CLAUDE ROUTING · QIADO GMBH FY2025" vs "POC PACK · 10 AUG 2026") could wrap to a second line and the header changed height between pages — and again on load when LOADING was replaced. */ header{border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:20} .mast{max-width:var(--page);margin:0 auto;padding:0 22px;display:flex;align-items:center; gap:22px;height:56px;flex-wrap:nowrap;overflow:hidden} .brand{font-weight:800;letter-spacing:-.4px;font-size:15.5px;text-decoration:none;color:var(--ink); display:flex;align-items:center;gap:9px;flex:0 0 auto} .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto} .brand .dot.off{background:var(--amber)} nav{display:flex;gap:3px;margin-right:auto;flex:0 0 auto} nav a{padding:6px 13px;border-radius:8px;text-decoration:none;color:var(--mute); font-size:13.5px;font-weight:640;white-space:nowrap; /* reserve the selected weight so the pill doesn't nudge its neighbours */ border:1px solid transparent} nav a:hover{background:var(--sunk);color:var(--ink)} nav a[aria-current=page]{background:var(--petrol-soft);color:var(--petrol)} .meta{font-size:10.5px;font-weight:750;letter-spacing:1.2px;color:var(--faint); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0} @media(max-width:720px){.meta{display:none}} /* ── the shell controls: language and theme ─────────────────────────── Mounted by ui.js into every masthead, between the nav and the status text, in the same order on every page. Segmented controls, not menus: two and three states. */ .ctl{display:flex;gap:8px;align-items:center;flex:0 0 auto} .seg{display:flex;gap:2px;background:var(--sunk);border:1px solid var(--line); border-radius:7px;padding:2px} .seg button{font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:2px 7px;line-height:1.5; border:0;border-radius:5px;color:var(--faint);background:none;cursor:pointer;min-width:26px} .seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)} .seg button:hover{color:var(--ink)} .seg-theme button{font-size:13px;line-height:1.2;padding:1px 7px} /* ── layout ───────────────────────────────────────────────────────── */ .wrap{max-width:var(--page);margin:0 auto;padding:28px 22px 60px;display:flex;flex-direction:column;gap:16px} h1{font-size:clamp(25px,3.6vw,34px);line-height:1.08;letter-spacing:-1.1px;font-weight:800; margin:0;max-width:22ch;text-wrap:balance} h2{font-size:19px;font-weight:750;letter-spacing:-.3px;margin:0} .lede{color:var(--mute);max-width:68ch;margin:0} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px} .bh{font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase; color:var(--faint);margin:16px 0 0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} @media(max-width:820px){.grid2{grid-template-columns:1fr}} .lab{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase; display:flex;align-items:center;gap:7px;color:var(--faint)} .lab::before{content:"";width:16px;height:2px;border-radius:1px;background:currentColor} .lab.ok{color:var(--green)}.lab.q{color:var(--amber)}.lab.n{color:var(--petrol)}.lab.x{color:var(--red)} /* ── data ─────────────────────────────────────────────────────────── */ /* A flex/grid item defaults to min-width:auto, so an overflow-x container inside one grows to fit its content instead of scrolling — the table then widens the page and everything, including the sticky header, shifts. min-width:0 lets it actually scroll. */ .card>*,.grid2>*,.duo>*,.trio>*{min-width:0} .tbl{overflow-x:auto;min-width:0;max-width:100%} table{width:100%;border-collapse:collapse;font-size:13px;min-width:420px} th{text-align:left;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint); padding:7px 9px;border-bottom:1px solid var(--line);font-weight:800;white-space:nowrap} td{padding:7px 9px;border-bottom:1px solid var(--line)} tr:last-child td{border-bottom:none} td.n,th.n{text-align:right;white-space:nowrap} .neg{color:var(--red)} .bar{height:7px;border-radius:4px;background:var(--petrol);min-width:2px} .bar.dn{background:var(--red)} .tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.9px;padding:3px 7px; border-radius:5px;white-space:nowrap} .pass{background:var(--green-soft);color:var(--green)} .fail{background:var(--red-soft);color:var(--red)} .warn{background:var(--amber-soft);color:var(--amber)} .info{background:var(--petrol-soft);color:var(--petrol)} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--faint)} pre{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--sunk); border:1px solid var(--line);border-radius:9px;padding:12px;overflow-x:auto;margin:10px 0 0;max-height:340px} details{border-top:1px solid var(--line);padding-top:10px} summary{cursor:pointer;font-size:11px;color:var(--faint);font-weight:750;letter-spacing:.7px; text-transform:uppercase} ul{margin:0;padding-left:18px}li{font-size:13.5px;margin:3px 0} button{font:inherit;cursor:pointer;border-radius:9px;border:1px solid var(--line); background:var(--card);color:var(--ink);padding:8px 14px;font-weight:620;font-size:13.5px} button.go{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700} button:disabled{opacity:.45;cursor:default} .spin{width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--petrol); border-radius:50%;animation:s .7s linear infinite;display:inline-block} @keyframes s{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.spin{animation:none}} /* ── waterfall ──────────────────────────────────────────────────────── Movement decomposed by driver. Rows rather than columns because driver names are long ("Social Security Expenses") and there are up to nine. Colour: petrol raises the KPI, amber lowers it. NOT red/green — measured against the dataviz validator, this project's --green/--red separate at ΔE 5.9 (light) and 2.9 (dark) under deuteranopia, i.e. indistinguishable for roughly one man in twelve. Petrol/amber measure 17.2 and 16.0. Polarity is carried twice more regardless: the bar's direction from the zero line, and the sign on the value. Negative bars also take a 45° texture, so the chart survives greyscale print and forced-colors. */ .wfsub{font-size:11.5px;color:var(--faint);line-height:1.45;margin-top:5px;max-width:66ch} .wf{display:flex;flex-direction:column;gap:0;margin-top:10px} .wfrow{display:grid;grid-template-columns:minmax(96px,26%) 1fr minmax(84px,17%); align-items:stretch;gap:10px;min-height:26px} .wflbl{font-size:12.5px;color:var(--ink);align-self:center;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .wflbl .cid{color:var(--faint);font-size:11px;margin-left:5px} .wfval{font-size:12.5px;color:var(--ink);text-align:right;align-self:center; font-variant-numeric:tabular-nums;font-weight:640} /* percent beside the absolute change: when one member is 250x another, the bar cannot show both, and the percentage is the scale-free comparison that can */ .wfval .sub{display:block;font-size:10.5px;font-weight:600;color:var(--faint); margin-top:1px} /* the track carries the zero rule, so it runs unbroken down the rows */ .wftrack{position:relative;min-width:0} .wftrack::before{content:"";position:absolute;top:0;bottom:0;width:1px; background:var(--line);left:var(--zero)} .wfbar{position:absolute;top:4px;bottom:4px;border-radius:3px;min-width:2px} .wfbar.up{background:var(--petrol)} .wfbar.dn{background:var(--amber)} .wfbar.dn::after{content:"";position:absolute;inset:0;border-radius:3px; background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.30) 5px 7px)} .wfrow.tot{border-top:1px solid var(--line);margin-top:5px;padding-top:5px} .wfrow.tot .wflbl,.wfrow.tot .wfval{font-weight:780} .wfbar.net{background:var(--mute)} /* hover: the value is already on the row, so the tooltip carries share-of-total */ .wfbar[data-tip]:hover::before{content:attr(data-tip);position:absolute;left:50%; bottom:calc(100% + 6px);transform:translateX(-50%);z-index:5; /* wraps rather than runs off the right edge — the rightmost bars sit near the container edge and a nowrap tip was being clipped mid-sentence */ width:max-content;max-width:min(300px,42vw);white-space:normal;line-height:1.4; background:var(--ink);color:var(--card);font-size:11.5px;font-weight:600; padding:4px 8px;border-radius:6px;pointer-events:none;box-shadow:var(--shadow)} .wfkey{display:flex;gap:14px;align-items:center;margin-top:11px;flex-wrap:wrap} .wfkey span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mute)} .wfkey i{width:11px;height:11px;border-radius:3px;display:inline-block;position:relative} .wfkey i.up{background:var(--petrol)} .wfkey i.dn{background:var(--amber)} .wfkey i.dn::after{content:"";position:absolute;inset:0;border-radius:3px; background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(255,255,255,.30) 4px 6px)} details.tv{margin-top:10px} details.tv summary{font-size:11.5px;color:var(--mute);cursor:pointer; list-style:none;display:inline-flex;align-items:center;gap:5px} details.tv summary::-webkit-details-marker{display:none} details.tv summary::before{content:"▸";font-size:9px} details.tv[open] summary::before{content:"▾"} details.tv summary:hover{color:var(--ink)} @media(max-width:560px){.wfrow{grid-template-columns:minmax(72px,34%) 1fr minmax(70px,26%);gap:7px} .wflbl,.wfval{font-size:11.5px}} /* the table view sits inside the waterfall, so its mini-bars follow the chart's language rather than the app's red — one component must not speak two. Negative VALUES stay red: that is text with a minus sign, read on its own, not a hue compared against another hue. */ details.tv .bar{background:var(--petrol)} details.tv .bar.dn{background:var(--amber)} /* ── dumbbell (rank) ────────────────────────────────────────────────── Before → after per member. The segment length IS the change, and the endpoints keep the levels visible — a 50k fall from 2m and from 60k are not the same story, and a bar of the delta alone hides that. `from` is neutral (where it was); the segment and `to` carry direction in the same validated petrol/amber pair the waterfall uses. */ .dbseg{position:absolute;top:50%;height:2px;transform:translateY(-50%);border-radius:1px} .dbseg.up{background:var(--petrol)} .dbseg.dn{background:var(--amber)} .dbdot{position:absolute;top:50%;width:9px;height:9px;border-radius:50%; transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--card)} .dbdot.from{background:var(--faint)} .dbdot.to.up{background:var(--petrol)} .dbdot.to.dn{background:var(--amber)} .dbhit{position:absolute;top:0;bottom:0;left:0;right:0} .dbhit[data-tip]:hover::before{content:attr(data-tip);position:absolute;left:50%; bottom:calc(100% - 2px);transform:translateX(-50%);z-index:5;width:max-content; max-width:min(300px,42vw);white-space:normal;line-height:1.4; background:var(--ink);color:var(--card);font-size:11.5px;font-weight:600; padding:4px 8px;border-radius:6px;pointer-events:none;box-shadow:var(--shadow)} /* ── magnitude bars (aggregate) ─────────────────────────────────────── One hue for every bar. Nominal categories are not coloured by their value: length already encodes magnitude, and spending the identity channel to re-encode it is the commonest chart mistake there is. One series, so the title carries identity and there is no legend box. */ .wfbar.solo{background:var(--petrol)} .wfzeroval{position:absolute;top:50%;transform:translate(-50%,-50%); width:2px;height:9px;border-radius:1px;background:var(--line)} /* ── stat tile ──────────────────────────────────────────────────────── A single figure is not a one-bar bar chart. */ .stat{border:1px solid var(--line);border-radius:11px;padding:15px 17px;background:var(--card)} .stat .k{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:var(--faint)} .stat .v{font-size:30px;font-weight:780;letter-spacing:-.7px;margin-top:5px; font-variant-numeric:tabular-nums;line-height:1.1} .stat .p{font-size:12px;color:var(--mute);margin-top:3px} .cov{font-size:11px;color:var(--faint);margin-top:9px} /* ── KPI small multiples ────────────────────────────────────────────── One chart per KPI, each with its own y-scale. That is not a stylistic choice: these carry Currency, Percent, Days and Ratio, and putting two scales on one axis is the commonest way to make a chart lie. Grain is an explicit control rather than a default, because /api/kpis returns 19 periods across four grains — year, halves, quarters, months — and drawing them on one axis is exactly the defect this project already shipped: periods sorted as strings, so a month sat beside a full year. */ .kgrain{display:flex;gap:6px;align-items:center;margin-bottom:12px} .kgrain b{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:var(--faint);margin-right:3px} .kgrain button{font-size:12px;font-weight:640;padding:4px 11px;border-radius:8px; border:1px solid var(--line);background:var(--card);color:var(--mute);cursor:pointer} .kgrain button[aria-pressed=true]{background:var(--petrol-soft);color:var(--petrol); border-color:transparent} .kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px} .kcard{border:1px solid var(--line);border-radius:11px;padding:12px 13px 9px;background:var(--card)} .kcard .kn{font-size:12px;font-weight:700;color:var(--ink)} .kcard .ku{font-size:10px;color:var(--faint);font-weight:600;letter-spacing:.4px} .kcard .kv{font-size:19px;font-weight:760;letter-spacing:-.3px;margin-top:3px; font-variant-numeric:tabular-nums;line-height:1.15} .kcard .kd{font-size:11px;color:var(--mute);margin-top:1px} .kcard.off{background:var(--sunk)} .kcard.off .kv{color:var(--faint);font-size:13px;font-weight:700;letter-spacing:0} .spark{display:block;width:100%;height:44px;margin-top:7px;overflow:visible} .spark path{fill:none;stroke:var(--petrol);stroke-width:2;stroke-linejoin:round; stroke-linecap:round;vector-effect:non-scaling-stroke} .spark .zero{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke} .spark circle{fill:var(--petrol);stroke:var(--card);stroke-width:2; vector-effect:non-scaling-stroke} .spark rect.hit{fill:transparent} .spark rect.hit:hover{fill:var(--petrol-soft)}