/* ═══════════════════════════════════════════════════════════════════════════ SITE X-RAY — the app's own sheet, in the CLAY WORLD (owner, 2026-09-05). ⛔ THE APP'S OWN SCOPE, NOT THE SHELL'S. Header, gutter, the shared bar and the card come from os-app.css + work-clay.css; nothing here re-declares them. Every rule hangs off `.osApp[data-app="site-xray"]`. ⚡ ONE DESIGN. Owner, 2026-09-04: the clay world is the only design; the dark theme is closed. So this sheet paints clay directly — cream tiles with the --lift shadow, one violet, mint / peach / rose as the three verdict clays — and reads its tokens from work-clay.css, with the same values as fallbacks so the app cannot fall onto a grey base if a token is missing. ⛔ WHY THE OLD LOOK WAS WRONG (measured 2026-09-05 on 127.0.0.1:4892): the tool pane framed the PUBLIC /analysis website page — its own header, grey cards, monospace key chips, English on a Latvian screen. That page is a stranger's record; this pane is the owner's instrument. Different reader, different grammar: verdicts first, in words the owner asked in; the instrument marks under them; the page itself; then what to do. ⛔ NOTHING HERE INVENTS A NUMBER. Meters are drawn from the run's own marks; a mark the run does not carry is a dash and a dashed frame, never a zero. Colour never travels alone — every colour has its word or number beside. ═══════════════════════════════════════════════════════════════════════════ */ body.os.inthread.osAppOpen #osMain .thread, body.os.inthread.osAppOpen #osMain .composer, body.os.inthread.osAppOpen #osMain .rhead{visibility:hidden} .osApp[data-app="site-xray"]{ --xr-cream:var(--cream,#fffbf4); --xr-cream2:var(--cream2,#f8f2e8); --xr-lav:var(--lav,#e5dcff); --xr-lav2:var(--lav2,#efe9ff); --xr-violet:var(--violet,#7c5cff); --xr-ink:var(--ink,#2b2440); --xr-muted:var(--muted,#6b6380); --xr-faint:var(--faint,#9a92ad); --xr-line:var(--line,rgba(43,36,64,.10)); --xr-mint:var(--mint,#2f7a5c); --xr-amber:var(--amber,#c2410c); --xr-rose:var(--rose,#d6455f); --xr-clay-mint:var(--clay-mint,#dff1e8); --xr-clay-peach:var(--clay-peach,#fbd9c9); --xr-clay-rose:var(--clay-rose,#f9d5dc); --xr-amber-mid:var(--amber-mid,#d98a2b); --xr-lift:var(--lift,inset 0 2px 0 rgba(255,255,255,.8),0 10px 24px rgba(58,51,72,.08)); --xr-lift2:var(--lift-2,inset 0 2px 0 rgba(255,255,255,.8),0 18px 44px rgba(58,51,72,.14)); --xr-clay:var(--clay,inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(58,51,72,.14),0 8px 18px rgba(124,92,255,.22)); --xr-disp:var(--disp,Nunito,'DM Sans',system-ui,sans-serif); --xr-body:var(--body,Nunito,'DM Sans',system-ui,sans-serif); --xr-r:16px; --xr-rs:11px; --xr-onfill:var(--onfill,#ffffff); color:var(--xr-ink);font-family:var(--xr-body)} /* the body column: the card's content column, one left edge (SPEC-APP §4.1) */ .osApp[data-app="site-xray"] .osAppBody{padding:18px 22px 22px} /* ── section grammar ─────────────────────────────────────────────────────── A heading in the display face with a short violet dash — not the shell's uppercase mono label, which is a rail's grammar, not a report's. */ .osApp[data-app="site-xray"] .xrBlock{padding:22px 0 0;border:0} .osApp[data-app="site-xray"] .xrBlock:first-child{padding-top:0} .osApp[data-app="site-xray"] .xrBlock>h3{ display:flex;align-items:center;gap:10px;margin:0 0 12px; font:800 16px/1.2 var(--xr-disp);letter-spacing:-.01em;color:var(--xr-ink);text-transform:none} .osApp[data-app="site-xray"] .xrBlock>h3::before{ content:"";width:22px;height:4px;border-radius:99px;background:var(--xr-violet);flex:none} .osApp[data-app="site-xray"] .xrBlock>h3 .n{ margin-left:auto;font:700 11px var(--xr-body);color:var(--xr-faint)} /* ── the as-of strip: pills, and the re-measure is deliberately plain ─────── */ .osApp[data-app="site-xray"] .xrAsOf{ display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;border:0;background:none} .osApp[data-app="site-xray"] .xrAsOfWhen, .osApp[data-app="site-xray"] .xrAsOfNote{ padding:5px 11px;border-radius:999px;background:var(--xr-cream2); font:700 11.5px/1.3 var(--xr-body);color:var(--xr-muted);font-variant-numeric:tabular-nums} .osApp[data-app="site-xray"] .xrAsOfWhen{color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrAsOfNote{flex:none;font-weight:600} .osApp[data-app="site-xray"] .xrAgain{ margin-left:auto;padding:5px 12px;border-radius:999px;border:1.5px dashed var(--xr-line); background:transparent;font:700 11.5px var(--xr-body);color:var(--xr-muted);cursor:pointer} .osApp[data-app="site-xray"] .xrAgain:hover{border-style:solid;color:var(--xr-ink)} /* ── THE VERDICT: the weakest link, said first ───────────────────────────── The design's answer card — cream, the lift, a 4px violet rule — because this IS the answer the owner asked for. */ /* the verdict tile — violet clay, the answer said first */ .osApp[data-app="site-xray"] .xrGoal.verdict{ background:var(--xr-violet);box-shadow:var(--xr-clay);color:var(--xr-onfill);justify-content:center;gap:4px} .osApp[data-app="site-xray"] .xrGoal.verdict .xrGoalLabel{ font:800 10px/1 var(--xr-body);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)} .osApp[data-app="site-xray"] .xrVerdictLine{ font:800 21px/1.15 var(--xr-disp);letter-spacing:-.02em;color:var(--xr-onfill);text-wrap:balance} .osApp[data-app="site-xray"] .xrGoal.verdict .xrGoalAsk{color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px} .osApp[data-app="site-xray"] .xrGoal.verdict .xrMk{background:rgba(255,251,244,.92)} .osApp[data-app="site-xray"] .xrGoal.verdict:hover{transform:none;box-shadow:var(--xr-clay)} /* ── THE PLATE: five owner questions as clay tiles ───────────────────────── The big number is the answer to the question on the tile; under it the instrument marks that made it, smallest first, each a pill with its dot. ⛔ The worst tile is PEACH CLAY and carries the word — colour never alone. */ .osApp[data-app="site-xray"] .xrPlate{ display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px} .osApp[data-app="site-xray"] .xrGoal{ position:relative;display:flex;flex-direction:column;gap:6px;min-width:0; padding:14px 15px 13px;border-radius:var(--xr-r);border:0; background:var(--xr-cream);box-shadow:var(--xr-lift); transition:transform .18s ease,box-shadow .18s ease} .osApp[data-app="site-xray"] .xrGoal:hover{transform:translateY(-2px);box-shadow:var(--xr-lift2)} .osApp[data-app="site-xray"] .xrGoalScore{ font:800 32px/1 var(--xr-disp);letter-spacing:-.03em;color:var(--xr-ink); font-variant-numeric:tabular-nums} .osApp[data-app="site-xray"] .xrGoalScore i{font:700 13px var(--xr-body);color:var(--xr-faint);font-style:normal;margin-left:2px} .osApp[data-app="site-xray"] .xrGoalLabel{font:800 13.5px/1.25 var(--xr-disp);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrGoalAsk{font:600 11.5px/1.4 var(--xr-body);color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrGoalMks{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px} .osApp[data-app="site-xray"] .xrGoal.worst{background:var(--xr-clay-peach)} .osApp[data-app="site-xray"] .xrGoal.worst .xrGoalScore{color:var(--xr-amber)} .osApp[data-app="site-xray"] .xrGoal.strong{background:var(--xr-clay-mint)} .osApp[data-app="site-xray"] .xrGoal.strong .xrGoalScore{color:var(--xr-mint)} .osApp[data-app="site-xray"] .xrGoal.none{ background:transparent;box-shadow:none;border:1.5px dashed var(--xr-line)} .osApp[data-app="site-xray"] .xrGoal.none .xrGoalScore{color:var(--xr-faint)} .osApp[data-app="site-xray"] .xrTag{ position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:999px; font:800 9.5px/1 var(--xr-body);letter-spacing:.08em;text-transform:uppercase; background:var(--xr-cream);color:var(--xr-amber);box-shadow:var(--xr-lift)} .osApp[data-app="site-xray"] .xrGoal.strong .xrTag{color:var(--xr-mint)} .osApp[data-app="site-xray"] .xrGoal.none .xrTag{color:var(--xr-faint);box-shadow:none;background:var(--xr-cream2)} /* the instrument mark — a pill: dot · number · name. The dot is the verdict clay (mint ≥ 7.5 · amber 5–7.5 · rose < 5); the number says it in digits. */ .osApp[data-app="site-xray"] .xrMk{ display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:999px; background:var(--xr-cream2);font:700 11px/1 var(--xr-body);color:var(--xr-muted); white-space:nowrap;font-variant-numeric:tabular-nums} .osApp[data-app="site-xray"] .xrMk b{color:var(--xr-ink);font-weight:800} .osApp[data-app="site-xray"] .xrMk::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--xr-faint);flex:none} .osApp[data-app="site-xray"] .xrMk.ok::before{background:var(--xr-mint)} .osApp[data-app="site-xray"] .xrMk.mid::before{background:var(--xr-amber-mid)} .osApp[data-app="site-xray"] .xrMk.bad::before{background:var(--xr-rose)} .osApp[data-app="site-xray"] .xrGoal.worst .xrMk{background:rgba(255,251,244,.7)} .osApp[data-app="site-xray"] .xrGoal.strong .xrMk{background:rgba(255,251,244,.7)} /* ── START HERE — ranked moves as clay rows with a violet coin ──────────── */ .osApp[data-app="site-xray"] .xrStart{border:0} .osApp[data-app="site-xray"] .xrStart>.xrNote{margin:-6px 0 12px;font:600 12px/1.4 var(--xr-body);color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrStartList{list-style:none;margin:0;padding:0;counter-reset:xrStart;display:flex;flex-direction:column;gap:8px} .osApp[data-app="site-xray"] .xrStartRow{ position:relative;display:flex;flex-direction:column;gap:3px;counter-increment:xrStart; padding:12px 14px 12px 52px;border:0;border-radius:var(--xr-rs);background:var(--xr-cream);box-shadow:var(--xr-lift)} .osApp[data-app="site-xray"] .xrStartRow+.xrStartRow{border-top:0} .osApp[data-app="site-xray"] .xrStartRow::before{ content:counter(xrStart);position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:50%; display:grid;place-items:center;background:var(--xr-violet);color:var(--xr-onfill); font:800 12px var(--xr-disp);box-shadow:var(--xr-clay)} .osApp[data-app="site-xray"] .xrStartRow .t{font:700 14px/1.45 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrStartRow .xrCosts{font:600 12.5px/1.45 var(--xr-body);color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrStartRow .xrEff{ align-self:flex-start;margin-top:3px;padding:3px 9px;border-radius:999px;background:var(--xr-lav2); font:700 10.5px/1 var(--xr-body);color:var(--xr-violet);text-transform:none} /* ── WHAT WE MEASURED — meters by group ──────────────────────────────────── Three cream cards; inside each, one row per instrument: name, a clay rail with a rounded fill, the number. ⛔ The fill is the run's mark over ten, nothing else; a mark the run lacks draws no rail and prints a dash. */ .osApp[data-app="site-xray"] .xrGroups{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px} .osApp[data-app="site-xray"] .xrGroup{ padding:13px 15px 10px;border-radius:var(--xr-r);background:var(--xr-cream);box-shadow:var(--xr-lift);min-width:0} .osApp[data-app="site-xray"] .xrGroup h4{ margin:0 0 8px;font:800 13.5px/1.2 var(--xr-disp);color:var(--xr-ink);display:flex;align-items:baseline;gap:8px} .osApp[data-app="site-xray"] .xrGroup h4 .n{margin-left:auto;font:800 13px var(--xr-disp);color:var(--xr-muted);font-variant-numeric:tabular-nums} /* ⛔ THE LABEL NEVER TRUNCATES (SPEC-APP §, measured: "Tehnisk…"). The name wraps to a second line; the rail gives way, never the word. */ .osApp[data-app="site-xray"] .xrMeter{ display:grid;grid-template-columns:minmax(0,1fr) 64px 30px;gap:10px;align-items:center;padding:6px 0} .osApp[data-app="site-xray"] .xrMeter .k{font:600 12.5px/1.25 var(--xr-body);color:var(--xr-ink);overflow-wrap:break-word;hyphens:auto} .osApp[data-app="site-xray"] .xrMeter .v{font:800 12.5px var(--xr-disp);color:var(--xr-ink);text-align:right;font-variant-numeric:tabular-nums} .osApp[data-app="site-xray"] .xrMeter.none .k,.osApp[data-app="site-xray"] .xrMeter.none .v{color:var(--xr-faint)} .osApp[data-app="site-xray"] .xrRail{ height:8px;border-radius:999px;background:var(--xr-cream2);box-shadow:inset 0 1px 2px rgba(43,36,64,.12);overflow:hidden} .osApp[data-app="site-xray"] .xrRail i{ display:block;height:100%;border-radius:999px;background:var(--xr-faint); transition:width .5s cubic-bezier(.2,.8,.2,1)} .osApp[data-app="site-xray"] .xrRail.ok i{background:var(--xr-mint)} .osApp[data-app="site-xray"] .xrRail.mid i{background:var(--xr-amber-mid)} .osApp[data-app="site-xray"] .xrRail.bad i{background:var(--xr-rose)} .osApp[data-app="site-xray"] .xrMeter.none .xrRail{background:transparent;box-shadow:none;border:1.5px dashed var(--xr-line)} /* ── HOW THE PAGE LOOKED — desktop and phone in clay frames ───────────────── */ .osApp[data-app="site-xray"] .xrShots{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px;align-items:start} .osApp[data-app="site-xray"] .xrShots figure{margin:0;min-width:0;flex:none} .osApp[data-app="site-xray"] .xrShots figure.ph{flex:none} .osApp[data-app="site-xray"] .xrShots .fr{ border-radius:14px;padding:6px;background:var(--xr-cream);box-shadow:var(--xr-lift);overflow:hidden} .osApp[data-app="site-xray"] .xrShots img{ width:100%;height:auto;display:block;border:0;border-radius:9px;background:var(--xr-cream2); max-height:520px;object-fit:cover;object-position:top} .osApp[data-app="site-xray"] .xrShots figcaption{ margin-top:7px;font:700 11px var(--xr-body);color:var(--xr-muted);text-transform:none} .osApp[data-app="site-xray"] .xrShotsNote{margin:10px 0 0;font:600 11.5px/1.45 var(--xr-body);color:var(--xr-faint)} /* ── COOKIES — the verdict with legal weight gets its own clay ─────────────── */ .osApp[data-app="site-xray"] .xrCookie{ margin:0;padding:13px 16px;border:0;border-radius:var(--xr-rs); font:700 13.5px/1.5 var(--xr-body);color:var(--xr-ink);background:var(--xr-cream);box-shadow:var(--xr-lift)} .osApp[data-app="site-xray"] .xrCookie.good{background:var(--xr-clay-mint)} .osApp[data-app="site-xray"] .xrCookie.warn{background:var(--xr-clay-peach)} .osApp[data-app="site-xray"] .xrCookie.bad{background:var(--xr-clay-rose)} /* ── THE FINDINGS, in peel order — a severity pill and the sentence ───────── */ .osApp[data-app="site-xray"] .xrPeel{border:0} .osApp[data-app="site-xray"] .xrPeel h3{padding-left:0} .osApp[data-app="site-xray"] .xrPeel h3::before{background:var(--xr-lav)} .osApp[data-app="site-xray"] .xrGaps,.osApp[data-app="site-xray"] .xrFind{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .osApp[data-app="site-xray"] .xrFind>li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline; padding:9px 13px;border:0;border-radius:var(--xr-rs);background:var(--xr-cream);box-shadow:var(--xr-lift); font:600 13.5px/1.5 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrFind>li:first-child{border-top:0} .osApp[data-app="site-xray"] .xrFind .sv{ width:auto;padding:3px 9px;border-radius:999px;background:var(--xr-cream2); font:800 10px/1 var(--xr-body);letter-spacing:.04em;text-transform:lowercase;color:var(--xr-muted);white-space:nowrap} .osApp[data-app="site-xray"] .xrFind>li.s-high .sv{background:var(--xr-clay-peach);color:var(--xr-amber)} .osApp[data-app="site-xray"] .xrFind>li.s-medium .sv{background:var(--xr-lav2);color:var(--xr-violet)} .osApp[data-app="site-xray"] .xrGaps li{ padding:9px 13px 9px 30px;position:relative;border-radius:var(--xr-rs);background:var(--xr-clay-peach); font:700 13.5px/1.45 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrGaps li::before{ content:"";position:absolute;left:13px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--xr-amber)} .osApp[data-app="site-xray"] .xrGaps+.xrFind{margin-top:8px} .osApp[data-app="site-xray"] .xrTechBtn{ margin-left:.5em;padding:1px 8px;font:700 10.5px/1.5 var(--xr-body);color:var(--xr-violet); background:var(--xr-lav2);border:0;border-radius:999px;cursor:pointer;opacity:1;vertical-align:baseline} .osApp[data-app="site-xray"] .xrTechBtn:hover{background:var(--xr-lav)} .osApp[data-app="site-xray"] .xrTech{ display:block;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--xr-cream2); font:500 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--xr-muted);white-space:pre-wrap} .osApp[data-app="site-xray"] .xrTech[hidden]{display:none} .osApp[data-app="site-xray"] .xrMore{margin-top:14px;border:0;padding:0} .osApp[data-app="site-xray"] .xrMore summary{ cursor:pointer;display:inline-block;padding:6px 12px;border-radius:999px;border:1.5px dashed var(--xr-line); font:700 12px var(--xr-body);color:var(--xr-muted);list-style:none} .osApp[data-app="site-xray"] .xrMore summary::-webkit-details-marker{display:none} .osApp[data-app="site-xray"] .xrMore[open] summary{border-style:solid;color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrMore ul{margin-top:10px} /* ── SPARK'S READING — quoted prose, an aurora hairline while it works ───── */ .osApp[data-app="site-xray"] .xrExplain{ margin:0 0 8px;padding:0 0 0 14px;border-left:3px solid var(--xr-lav); font:600 14px/1.6 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrExplain:last-child{margin-bottom:0} .osApp[data-app="site-xray"] .xrThinking{ height:3px;border-radius:99px;margin:4px 0 10px; background:linear-gradient(90deg,#22d3ee,#7c5cff 60%,#f472b6);background-size:200% 100%; animation:xrFlow 1.6s linear infinite} @keyframes xrFlow{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.osApp[data-app="site-xray"] .xrThinking{animation:none}} /* ── HISTORY — a strip of small clay tiles, newest first ──────────────────── */ .osApp[data-app="site-xray"] .xrHist .osAppList{ display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin} .osApp[data-app="site-xray"] .xrHist .row{width:auto; flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:118px; padding:9px 12px;border:0;border-radius:var(--xr-rs);background:var(--xr-cream);box-shadow:var(--xr-lift); cursor:pointer;text-align:left;font-family:var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrHist .row:hover{box-shadow:var(--xr-lift2);transform:translateY(-1px)} .osApp[data-app="site-xray"] .xrHist .row .t{font:800 12.5px var(--xr-disp);display:flex;gap:6px;align-items:center} .osApp[data-app="site-xray"] .xrHist .row .s{font:600 10.5px var(--xr-body);color:var(--xr-faint)} .osApp[data-app="site-xray"] .xrHist .row .n{font:800 18px/1 var(--xr-disp);margin-top:4px;font-variant-numeric:tabular-nums} .osApp[data-app="site-xray"] .xrHistNow{ margin:0;padding:2px 7px;border:0;border-radius:999px;background:var(--xr-lav2); font:800 9.5px/1.2 var(--xr-body);color:var(--xr-violet);text-transform:lowercase} .osApp[data-app="site-xray"] .xrHistFail{margin:0;padding:2px 7px;border-radius:999px;background:var(--xr-clay-rose); font:800 9.5px/1.2 var(--xr-body);color:var(--xr-rose);text-transform:lowercase} .osApp[data-app="site-xray"] .xrHist>.osAppNote{margin:0 0 8px;font:600 12px var(--xr-body);color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrHist{border:0} .osApp[data-app="site-xray"] .xrHist .row .n:empty{display:none} /* ── the first-run hero and the shelf ─────────────────────────────────────── */ .osApp[data-app="site-xray"] .xrLead{margin:0 0 10px;font:600 14px/1.5 var(--xr-body);color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrLead b{color:var(--xr-ink);font-weight:800} .osApp[data-app="site-xray"] .xrHeroPts{ list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .osApp[data-app="site-xray"] .xrHeroPts li{ position:relative;padding:12px 14px 12px 28px;border-radius:var(--xr-rs);background:var(--xr-cream);box-shadow:var(--xr-lift); font:700 13px/1.45 var(--xr-body);color:var(--xr-ink)} /* ⛔ the dots are muted, never mint: an unrun tool has no good news to colour */ .osApp[data-app="site-xray"] .xrHeroPts li:before{ content:"";position:absolute;left:13px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--muted,#6b6380)} .osApp[data-app="site-xray"] .osAppSec{margin-top:22px} .osApp[data-app="site-xray"] .osAppSec>h3{ font:800 16px/1.2 var(--xr-disp);letter-spacing:-.01em;text-transform:none;color:var(--xr-ink);margin:0 0 10px} .osApp[data-app="site-xray"] .osAppSec .osAppList .row{ border:0;border-radius:var(--xr-rs);background:var(--xr-cream);box-shadow:var(--xr-lift);font-family:var(--xr-body)} /* ── notes, pages, the footer ─────────────────────────────────────────────── */ .osApp[data-app="site-xray"] .xrNote{margin:10px 0 0;font:600 12px/1.5 var(--xr-body);color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrPages{ margin:16px 0 0;display:flex;flex-wrap:wrap;gap:5px;align-items:center;font:700 11px var(--xr-body);color:var(--xr-faint)} .osApp[data-app="site-xray"] .xrPages b{padding:3px 8px;border-radius:999px;background:var(--xr-cream2);color:var(--xr-muted);font-weight:700} .osApp[data-app="site-xray"] .osAppFoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 22px;font:700 11.5px var(--xr-body);color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrFootActs{margin-left:auto;display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap} .osApp[data-app="site-xray"] .osAppFoot .ghost{ padding:6px 12px;border-radius:999px;border:1.5px dashed var(--xr-line);background:transparent; font:700 12px var(--xr-body);color:var(--xr-muted);cursor:pointer} .osApp[data-app="site-xray"] .osAppFoot .ghost:hover{border-style:solid;color:var(--xr-ink)} .osApp[data-app="site-xray"] .osAppFoot .ghost:disabled{opacity:.5;cursor:default} .osApp[data-app="site-xray"] .osAppFoot .go{ margin:0;padding:7px 14px;border:0;border-radius:999px;background:var(--xr-violet);color:var(--xr-onfill); font:800 12px var(--xr-body);box-shadow:var(--xr-clay);cursor:pointer;text-decoration:none} .osApp[data-app="site-xray"] .xrPin{white-space:nowrap} /* the shared bar, in clay: a cream pill and a solid violet verb */ .osApp[data-app="site-xray"] .osAppBar{padding:14px 22px 0;border:0;background:none} .osApp[data-app="site-xray"] .osAppBar .xrQ{ border-radius:999px;border:0;background:var(--xr-cream);box-shadow:var(--xr-lift); font:700 14px var(--xr-body);color:var(--xr-ink);padding:10px 16px} .osApp[data-app="site-xray"] .osAppBar .go{ border-radius:999px;border:0;background:var(--xr-violet);color:var(--xr-onfill);font:800 13px var(--xr-body); padding:10px 16px;box-shadow:var(--xr-clay);cursor:pointer} .osApp[data-app="site-xray"] .osAppBar .go:disabled{opacity:.6} /* the empty / refusal states wear the same clay */ .osApp[data-app="site-xray"] .osAppEmpty{ padding:22px;border-radius:var(--xr-r);border:1.5px dashed var(--xr-line); font:700 13.5px var(--xr-body);color:var(--xr-muted);text-align:center} .osApp[data-app="site-xray"] .osAppRefuse{ padding:14px 16px;border-radius:var(--xr-rs);background:var(--xr-clay-peach);font:600 13.5px/1.5 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .osAppRefuse b{display:block;font-weight:800;margin-bottom:2px} @media(max-width:640px){ .osApp[data-app="site-xray"] .osAppBody{padding:14px 14px 18px} .osApp[data-app="site-xray"] .xrShots{grid-template-columns:1fr} .osApp[data-app="site-xray"] .xrShots figure.ph{max-width:220px} .osApp[data-app="site-xray"] .xrMeter{grid-template-columns:minmax(0,1fr) 64px 28px} } /* ── THE ADDRESS A FINDING WAS MEASURED ON (task 21067453) ───────────────── A finding measured on /cenas and shown as if about the whole site is a confident wrong address. The tag is a small cream pill, quiet enough to ignore and exact enough to act on. */ .osApp[data-app="site-xray"] .xrPage{ margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--xr-cream2); font:700 10.5px/1.4 var(--xr-body);color:var(--xr-muted);white-space:nowrap} /* ── THE TIME MACHINE (task 723d0474) ────────────────────────────────────── A history tile and its compare pill sit side by side; the compare itself draws the two runs' own pictures in the same clay frames the report uses, and the five goals' movement as rows with an arrow and both numbers. ⛔ The arrow never travels alone — both marks are printed beside it. */ .osApp[data-app="site-xray"] .xrHistRow{display:flex;flex-direction:column;gap:4px;flex:0 0 auto} .osApp[data-app="site-xray"] .xrHistRow .row{flex:1 1 auto} .osApp[data-app="site-xray"] .xrCmpBtn{ padding:4px 10px;border-radius:999px;border:1.5px dashed var(--xr-line);background:transparent; font:700 10.5px var(--xr-body);color:var(--xr-muted);cursor:pointer} .osApp[data-app="site-xray"] .xrCmpBtn:hover{border-style:solid;color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrCmpCols{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:10px} .osApp[data-app="site-xray"] .xrCmpCols h4{ margin:0 0 8px;font:800 12px/1 var(--xr-body);letter-spacing:.08em;text-transform:uppercase;color:var(--xr-faint)} .osApp[data-app="site-xray"] .xrCmpCols .xrShots{grid-template-columns:minmax(0,1fr) 110px;gap:10px} .osApp[data-app="site-xray"] .xrCmpCols .xrShots img{max-height:300px} .osApp[data-app="site-xray"] .xrCmpCols figure{margin:0} .osApp[data-app="site-xray"] .xrCmpCols figure img{ border-radius:9px;background:var(--xr-cream2);box-shadow:var(--xr-lift);padding:0} .osApp[data-app="site-xray"] .xrCmpMoves{ margin-top:14px;padding:12px 15px;border-radius:var(--xr-r);background:var(--xr-cream);box-shadow:var(--xr-lift)} .osApp[data-app="site-xray"] .xrCmpMoves .osAppRow{ grid-template-columns:minmax(0,1fr) auto;padding:6px 0; font:600 12.5px var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrCmpMoves .osAppRow+.osAppRow{border-top:1px solid var(--xr-line)} .osApp[data-app="site-xray"] .xrCmpMoves .v{ font:800 13px var(--xr-disp);font-variant-numeric:tabular-nums;color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrCmp>.xrNote{margin:-4px 0 0} .osApp[data-app="site-xray"] .xrCmp .ghost{ margin-top:12px;padding:6px 12px;border-radius:999px;border:1.5px dashed var(--xr-line); background:transparent;font:700 12px var(--xr-body);color:var(--xr-muted);cursor:pointer} /* ── A RUN, WHILE IT IS RUNNING ───────────────────────────────────────────── ⛔ THE PANE MUST NOT BLINK. Seven to twenty seconds of a real browser used to be one dashed box with three words in it, repainted on every step of the live stream — and because each open added another stream listener, the whole card was rebuilt several times a second and the heading alternated between the app's name and the host. The listener is bound once and paint() is idempotent; this card is what the wait looks like now: the four stages the run publishes, the one in flight marked, and a sentence saying what is happening on the other end. ⛔ An unreached stage is drawn as waiting, never as done — the stage index comes from the stream, never from a timer. */ .osApp[data-app="site-xray"] .xrRun{ padding:20px 22px;border-radius:var(--xr-r);background:var(--xr-cream);box-shadow:var(--xr-lift)} .osApp[data-app="site-xray"] .xrRunHead{ display:flex;align-items:center;gap:9px;font:800 15px/1.3 var(--xr-disp);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrRunHead b{font-weight:800} .osApp[data-app="site-xray"] .xrRunDot{ width:9px;height:9px;border-radius:50%;background:var(--xr-violet);flex:none; animation:xrPulse 1.4s ease-in-out infinite} @keyframes xrPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}} .osApp[data-app="site-xray"] .xrRunSteps{ list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .osApp[data-app="site-xray"] .xrRunSteps li{ position:relative;padding-left:26px;font:600 13px/1.4 var(--xr-body);color:var(--xr-faint)} .osApp[data-app="site-xray"] .xrRunSteps li::before{ content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%; background:var(--xr-cream2);box-shadow:inset 0 1px 2px rgba(43,36,64,.12)} .osApp[data-app="site-xray"] .xrRunSteps li.done{color:var(--xr-muted)} .osApp[data-app="site-xray"] .xrRunSteps li.done::before{background:var(--xr-mint);box-shadow:none} .osApp[data-app="site-xray"] .xrRunSteps li.now{color:var(--xr-ink);font-weight:800} .osApp[data-app="site-xray"] .xrRunSteps li.now::before{ background:var(--xr-violet);box-shadow:0 0 0 4px var(--xr-lav2)} .osApp[data-app="site-xray"] .xrRunNote{ margin:16px 0 0;font:600 12px/1.5 var(--xr-body);color:var(--xr-muted)} @media (prefers-reduced-motion:reduce){ .osApp[data-app="site-xray"] .xrRunDot{animation:none}} /* the mark that pulled the weakest goal down, on the goal's own tile */ .osApp[data-app="site-xray"] .xrPulled{ display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px; font:700 11px/1.3 var(--xr-body);color:var(--xr-amber)} .osApp[data-app="site-xray"] .xrGoal.worst .xrPulled .xrMk{background:rgba(255,251,244,.85)} /* ═══ THE PURPOSE LENS (task 83c95788) ═══════════════════════════════════════ What the page is FOR, what we therefore did NOT ask of it, and what would raise each mark. ⛔ The first card on the report on purpose: an owner reads "here is what we think you are trying to do" BEFORE any number, and can dismiss the whole report in one line if we got it wrong. */ .osApp[data-app="site-xray"] .xrPurpose{ background:var(--xr-lav2);border-radius:var(--xr-r);padding:16px 18px 14px} .osApp[data-app="site-xray"] .xrPurpose h3{margin-top:0} .osApp[data-app="site-xray"] .xrPurposeLead{ margin:2px 0 8px;font:600 15px/1.55 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrPurposeKind{ display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:999px; background:var(--xr-cream);font:800 10.5px/1.4 var(--xr-body);letter-spacing:.03em; text-transform:lowercase;color:var(--xr-violet)} .osApp[data-app="site-xray"] .xrPurposeRow{ margin:4px 0;font:600 13px/1.5 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrPurposeRow b{color:var(--xr-muted);font-weight:800} /* ⚡ "We did not ask you for opening hours, and here is why" — struck through, quiet, and never in the peach of things that cost money. */ .osApp[data-app="site-xray"] .xrGaps.quiet li{ background:var(--xr-cream2);color:var(--xr-muted);font-weight:600} .osApp[data-app="site-xray"] .xrGaps.quiet li::before{background:var(--xr-faint)} .osApp[data-app="site-xray"] .xrGaps.quiet s{color:var(--xr-muted);text-decoration-thickness:1px} .osApp[data-app="site-xray"] .xrWhyNot{ display:block;margin-top:3px;font:600 12px/1.45 var(--xr-body);color:var(--xr-muted)} /* ⛔ THE IMPROVEMENT SITS UNDER ITS OWN RAIL AND SPANS THE WHOLE ROW. The meter is a three-column grid; a fourth cell would squeeze the label, which the rule above this file's meter block forbids. */ .osApp[data-app="site-xray"] .xrMeter{align-items:start} .osApp[data-app="site-xray"] .xrRaise, .osApp[data-app="site-xray"] .xrCeiling{grid-column:1 / -1} .osApp[data-app="site-xray"] .xrRaise{ margin-top:2px;font:600 12px/1.45 var(--xr-body);color:var(--xr-ink)} .osApp[data-app="site-xray"] .xrCeiling{ margin-top:1px;font:600 11.5px/1.4 var(--xr-body);color:var(--xr-faint)}