/* * One stylesheet, no external fonts, no CDN, no build step. * * The load-bearing rule here is that the five refusal states each get their own * treatment and none of them is red. Red is reserved for FAIL and ERROR: states * where a check ran and the claim does not hold. A refusal means the check did * not conclude, and colouring it red is how "we did not look" gets read as "we * looked and it is bad", which is the same collapse in the other direction as * rendering unknown as a pass. * * Refusals are separated by hue AND by border pattern, so the distinction * survives monochrome printing and colour-vision deficiency: * unknown dashed slate * unsupported double violet * inconclusive dotted teal * abstain dashed amber * blocked solid indigo, with a left rule */ :root { /* Dark is the default ground. `data-theme` on overrides it in either direction; the sidebar toggle writes that attribute and persists it. */ color-scheme: dark; /* FastCrest tokens, from fastcrest.com's products.css. */ --bg: #0b0d10; --bg-elev: #111419; --bg-deep: #080a0d; --fg: #e8eaed; --fg-dim: #9b9fa7; --fg-bright: #fff; --border: #252931; --border-bright: #454b56; --accent: #fff; /* The one chromatic colour on the whole surface. It marks the active nav item and the primary action. Nothing else. Status is text plus icon. */ /* Strict monochrome, no colour accents: the brand accent is the theme's accent, white on the dark ground and near-black on the light one, like fastcrest.com's primary button. Text on that fill is the theme's ground. */ --brand: var(--accent); --on-brand: var(--bg); /* Names written before the FastCrest tokens landed, aliased onto them so every existing rule keeps working. `var()` resolves at use time, so a theme block only has to redefine the token and these follow. */ --bg-raised: var(--bg-elev); --fg-muted: var(--fg-dim); --rule: var(--border); --accent-strong: var(--brand); --accent-soft: rgba(90, 240, 196, 0.14); --sidebar: var(--bg-deep); --sidebar-muted: var(--fg-dim); /* No shadows anywhere. Kept as a token because existing rules name it. */ --shadow: none; --pass: #5ad19a; --pass-bg: #0e2419; --advisory: #e0bb63; --advisory-bg: #2a2210; --failure: #f08a8a; --failure-bg: #331414; --unknown: #aab4c4; --unknown-bg: #181c23; --unsupported: #b79cf0; --unsupported-bg: #1e1830; --inconclusive: #6ecfd6; --inconclusive-bg: #0f2729; --abstain: #e4b06a; --abstain-bg: #2b2012; --blocked: #9aa8f5; --blocked-bg: #171b33; --inapplicable: #9aa2b0; --inapplicable-bg: #1a1d23; } /* Light, when the reader's system asks for it and they have not pinned dark. Declared before the explicit attribute block below so an explicit choice wins in both directions at equal specificity. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; --bg: #fafafa; --bg-elev: #f0f1f3; --bg-deep: #fff; --fg: #292d33; --fg-dim: #616773; --fg-bright: #101216; --border: #dce0e5; --border-bright: #a2a8b3; --accent: #101216; --accent-soft: rgba(16, 18, 22, 0.06); --pass: #1c6b3c; --pass-bg: #e6f4ea; --advisory: #7a5c00; --advisory-bg: #fdf5dd; --failure: #a01b1b; --failure-bg: #fbe9e9; --unknown: #4a5566; --unknown-bg: #eef0f4; --unsupported: #5d3d9e; --unsupported-bg: #f1ecfb; --inconclusive: #16656b; --inconclusive-bg: #e5f4f5; --abstain: #8a5a10; --abstain-bg: #fbefdd; --blocked: #2d3a8c; --blocked-bg: #e9ecfa; --inapplicable: #5b6472; --inapplicable-bg: #f2f3f5; } } :root[data-theme='light'] { color-scheme: light; --bg: #fafafa; --bg-elev: #f0f1f3; --bg-deep: #fff; --fg: #292d33; --fg-dim: #616773; --fg-bright: #101216; --border: #dce0e5; --border-bright: #a2a8b3; --accent: #101216; --accent-soft: rgba(16, 18, 22, 0.06); --pass: #1c6b3c; --pass-bg: #e6f4ea; --advisory: #7a5c00; --advisory-bg: #fdf5dd; --failure: #a01b1b; --failure-bg: #fbe9e9; --unknown: #4a5566; --unknown-bg: #eef0f4; --unsupported: #5d3d9e; --unsupported-bg: #f1ecfb; --inconclusive: #16656b; --inconclusive-bg: #e5f4f5; --abstain: #8a5a10; --abstain-bg: #fbefdd; --blocked: #2d3a8c; --blocked-bg: #e9ecfa; --inapplicable: #5b6472; --inapplicable-bg: #f2f3f5; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0 1rem 4rem; background: var(--bg); color: var(--fg); font: 400 14px/1.7 system-ui, -apple-system, "Segoe UI", ui-sans-serif, sans-serif; /* The page body never scrolls horizontally. Wide content scrolls inside .scroll-x instead. */ overflow-x: hidden; } main, .site-header, .site-footer { max-width: 52.5rem; margin: 0 auto; } .skip { position: absolute; left: -9999px; } .skip:focus { position: static; display: inline-block; padding: 0.4rem; } .site-header { padding: 1.25rem 0 0.5rem; border-bottom: 1px solid var(--rule); } .wordmark { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; } .wordmark a { color: var(--fg); text-decoration: none; } .tagline { margin: 0.35rem 0 0; color: var(--fg-muted); font-size: 0.85rem; max-width: 48rem; } h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; margin: 1.5rem 0 1rem; } h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; margin: 2rem 0 0.6rem; } h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em; margin: 1.2rem 0 0.4rem; } h4 { font-size: 0.82rem; font-weight: 600; margin: 0.9rem 0 0.3rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; } a { color: var(--accent); } code { font: 0.85em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 4px; padding: 0 0.25em; overflow-wrap: anywhere; } .copyable { user-select: all; cursor: text; } .crumbs { font-size: 0.85rem; color: var(--fg-muted); margin: 0.75rem 0 1rem; } /* --- state treatments ---------------------------------------------------- */ .state { display: inline-block; font: 700 0.72rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.07em; padding: 0.12rem 0.45rem; border-radius: 4px; white-space: nowrap; } .state--pass { color: var(--pass); background: var(--pass-bg); border: 1px solid var(--pass); } .state--warn, .state--review { color: var(--advisory); background: var(--advisory-bg); border: 1px solid var(--advisory); } .state--fail, .state--error { color: var(--failure); background: var(--failure-bg); border: 2px solid var(--failure); } .state--not_applicable{ color: var(--inapplicable); background: var(--inapplicable-bg); border: 1px solid var(--inapplicable); } .state--unknown { color: var(--unknown); background: var(--unknown-bg); border: 1px dashed var(--unknown); } .state--unsupported { color: var(--unsupported); background: var(--unsupported-bg); border: 3px double var(--unsupported); } .state--inconclusive { color: var(--inconclusive); background: var(--inconclusive-bg); border: 2px dotted var(--inconclusive); } .state--abstain { color: var(--abstain); background: var(--abstain-bg); border: 1px dashed var(--abstain); border-width: 2px; } .state--blocked { color: var(--blocked); background: var(--blocked-bg); border: 1px solid var(--blocked); border-left-width: 5px; } .state--review::after { content: " \25B3"; } .state--warn::after { content: " \0021"; } .state-block { margin: 0.5rem 0; padding: 0.55rem 0.7rem; background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 4px; } .state-block--fail, .state-block--error { border-left: 4px solid var(--failure); } .state-block--unknown { border-left: 4px dashed var(--unknown); } .state-block--unsupported { border-left: 4px double var(--unsupported); } .state-block--inconclusive { border-left: 4px dotted var(--inconclusive); } .state-block--abstain { border-left: 4px dashed var(--abstain); } .state-block--blocked { border-left: 6px solid var(--blocked); } .state-block--pass { border-left: 4px solid var(--pass); } .state-meaning { margin: 0.4rem 0 0.2rem; font-size: 0.9rem; } .state-action { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--fg-muted); } .state-action-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; } /* --- unavailable values ------------------------------------------------- */ .unavailable { display: inline-block; font-size: 0.82rem; font-style: italic; color: var(--fg-muted); border-bottom: 1px dashed var(--fg-muted); } .reasons { margin: 0.3rem 0 0.6rem 1.1rem; padding: 0; font-size: 0.88rem; } .reasons li { margin-bottom: 0.25rem; } .reasons-empty { margin: 0.3rem 0 0.6rem; font-size: 0.85rem; color: var(--fg-muted); } /* --- tables -------------------------------------------------------------- */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-raised); margin: 0.5rem 0; } table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.84rem; } caption { caption-side: top; text-align: left; padding: 0.5rem 0.6rem; font-size: 0.78rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; } th, td { text-align: left; padding: 0.45rem 0.6rem; border-top: 1px solid var(--rule); vertical-align: top; } thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); } td.numeric, th.numeric { font-variant-numeric: tabular-nums; } .dataset-avg { color: var(--fg-muted); } /* --- forms --------------------------------------------------------------- */ .filters fieldset { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-raised); padding: 0.75rem 0.9rem 1rem; } .filters legend { font-size: 0.8rem; color: var(--fg-muted); padding: 0 0.35rem; } .filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--fg-muted); } .filters label.checkbox { flex-direction: row; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--fg); } .filters select, .filters button, .filters input[type="text"], .filters input[type="search"], .filters input[type="date"] { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.4rem; color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; } .filters button { background: var(--accent); color: var(--bg-raised); border-color: var(--accent); cursor: pointer; } /* The password gate's login page. Reuses `.filters` for the fieldset and button * so the one form on this surface that is not a filter still looks like it * belongs to the same site; these three rules only add what a text input needs * and that `.filters` never had to style. */ .login-form input[type="password"] { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.4rem; color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; min-width: 16rem; } /* Red is correct here and is not the refusal-palette violation the header * comment warns about: a rejected password is a check that RAN and did not * hold, which is exactly what red is reserved for. */ .login-error { border: 2px solid var(--failure); background: var(--failure-bg); color: var(--failure); border-radius: 4px; padding: 0.5rem 0.7rem; font-size: 0.9rem; } /* --- specific blocks ---------------------------------------------------- */ .population { font-size: 0.9rem; } .summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; } .summary dt { color: var(--fg-muted); } .summary dd { margin: 0; } .verdict-panel, .composite, .origin-panel, .stage, .claim, .diff { border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-raised); padding: 0.75rem 0.9rem; margin: 0.9rem 0; } .verdict-panel h3, .stage h3 { margin-top: 0; } .verdict-detail, .verdict-missing, .verdict-evidence { font-size: 0.87rem; margin: 0.3rem 0; } .composite-value { font-size: 1.05rem; } .composite-value--unavailable strong { color: var(--fg-muted); } .axis-value { font-variant-numeric: tabular-nums; font-weight: 700; } .axis-band { display: block; font-size: 0.78rem; color: var(--fg-muted); } .axis-action { font-size: 0.8rem; color: var(--fg-muted); } .origin-label { font-weight: 700; } .origin--simulated_suggested_by_name .origin-label, .origin-label.origin--simulated_suggested_by_name { border-bottom: 2px dotted var(--abstain); } .rung { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; } .rung-note { display: block; font-size: 0.78rem; color: var(--fg-muted); } .findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .finding { border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-raised); padding: 0.6rem 0.8rem; } .finding--fail, .finding--error { border-left: 4px solid var(--failure); } .finding--unknown { border-left: 4px dashed var(--unknown); } .finding--unsupported { border-left: 4px double var(--unsupported); } .finding--inconclusive { border-left: 4px dotted var(--inconclusive); } .finding--abstain { border-left: 4px dashed var(--abstain); } .finding--blocked { border-left: 6px solid var(--blocked); } .finding--pass { border-left: 4px solid var(--pass); } .finding-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; } .finding-title { font-weight: 600; } .severity { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; } .finding-explanation { font-size: 0.87rem; margin: 0.35rem 0; } .finding-links { font-size: 0.82rem; margin: 0.35rem 0 0; } .rejection-lead { font-size: 1rem; } .rejected-value { border: 2px solid var(--failure); color: var(--failure); } .admissible { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; } .note, .note-inline { font-size: 0.87rem; color: var(--fg-muted); } .site-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--fg-muted); } .site-footer summary { cursor: pointer; } .legend th[scope="row"] { white-space: nowrap; } @media (max-width: 34rem) { .summary { grid-template-columns: 1fr; } .summary dt { margin-top: 0.4rem; } } /* --- customer application shell ----------------------------------------- */ body.app-body { padding: 0; min-height: 100vh; background: var(--bg); color: var(--fg); } .app-shell { min-height: 100vh; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- sidebar ------------------------------------------------------------- */ .sidebar { position: sticky; top: 0; height: 100vh; z-index: 30; display: flex; flex-direction: column; padding: 1.1rem .9rem; color: var(--fg); background: var(--bg-deep); border-right: 1px solid var(--border); } .brand-row { display: flex; align-items: center; justify-content: space-between; min-height: 2.2rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--fg-bright); text-decoration: none; font-size: .95rem; font-weight: 600; letter-spacing: -.025em; } .brand-logo { width: 1.75rem; height: 1.75rem; display: block; filter: invert(0); transition: filter .2s ease; } :root[data-theme='light'] .brand-logo { filter: invert(1); } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .brand-logo { filter: invert(1); } } .workspace-switcher { display: grid; gap: .3rem; margin: 1.4rem 0 .9rem; color: var(--fg-dim); font-size: .68rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; } .workspace-switcher strong { display: block; width: 100%; overflow-wrap: anywhere; color: var(--fg); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: .5rem .55rem; font: 400 .82rem/1.3 inherit; text-transform: none; letter-spacing: 0; } .nav-list { display: grid; gap: 1px; } .nav-list a { display: flex; align-items: center; gap: .7rem; color: var(--fg-dim); text-decoration: none; border-radius: 4px; padding: .5rem .55rem; font-size: .86rem; font-weight: 400; } .nav-list a span { width: 1.05rem; text-align: center; color: var(--fg-dim); } .nav-list a:hover { color: var(--fg-bright); background: var(--bg-elev); } .nav-list a[aria-current="page"] { color: var(--fg-bright); background: var(--bg-elev); box-shadow: inset 2px 0 var(--brand); } .nav-list a[aria-current="page"] span { color: var(--brand); } .sidebar-bottom { position: relative; margin-top: auto; display: grid; gap: .3rem; } .help-link { color: var(--fg-dim); text-decoration: none; font-size: .8rem; padding: .45rem .55rem; border-radius: 4px; } .help-link:hover { color: var(--fg-bright); background: var(--bg-elev); } .theme-toggle { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .55rem; color: var(--fg-dim); background: transparent; border: 1px solid var(--border); border-radius: 4px; font: 400 .8rem/1.3 inherit; text-align: left; cursor: pointer; } .theme-toggle:hover { color: var(--fg-bright); border-color: var(--border-bright); } /* --- topbar -------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 20; min-height: 3.4rem; display: flex; align-items: center; gap: .6rem; padding: .55rem clamp(1rem, 3vw, 2rem); background: var(--bg); border-bottom: 1px solid var(--border); } .topbar-search { display: flex; align-items: center; gap: .35rem; flex: 0 1 22rem; min-width: 0; } .topbar-search input { flex: 1 1 auto; min-width: 0; padding: .4rem .55rem; color: var(--fg); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; font: 400 .84rem/1.3 inherit; } .topbar-search input::placeholder { color: var(--fg-dim); } .topbar-title { flex: 1 1 auto; min-width: 0; font-size: .84rem; font-weight: 500; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jobs-button { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .6rem; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 4px; font-size: .8rem; } .jobs-button:hover { color: var(--fg-bright); border-color: var(--border-bright); } .icon-button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 1rem; cursor: pointer; } .menu-button, .sidebar-close { display: none; font-size: 1.25rem; } .account-wrap { position: relative; } .account-button { display: grid; grid-template-columns: 1.6rem minmax(0, 8rem) auto; align-items: center; gap: .5rem; color: var(--fg); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: .3rem .45rem; text-align: left; cursor: pointer; } .account-button:hover { border-color: var(--border-bright); } .avatar { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 4px; color: var(--on-brand); background: var(--brand); font-size: .74rem; font-weight: 600; } .account-copy { display: grid; min-width: 0; } .account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-copy strong { font-size: .76rem; font-weight: 500; } .account-copy small { color: var(--fg-dim); font-size: .68rem; } .account-menu { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 40; min-width: 10rem; padding: .25rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .account-menu button { width: 100%; border: 0; border-radius: 4px; padding: .45rem .55rem; background: transparent; color: var(--failure); text-align: left; cursor: pointer; font: 400 .82rem/1.3 inherit; } /* --- main ---------------------------------------------------------------- */ .app-main { min-width: 0; } .content, .site-footer { width: min(100% - 2rem, 52.5rem); max-width: none; margin: 0 auto; } .content { padding: 2rem 0 3rem; } .page-heading { margin-bottom: 1.4rem; } .page-heading h1 { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; } .page-heading p { margin: .45rem 0 0; color: var(--fg-dim); font-size: .82rem; max-width: 44rem; line-height: 1.7; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.1rem; padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--fg); text-decoration: none; font-size: .82rem; font-weight: 500; cursor: pointer; } .button:hover { border-color: var(--border-bright); } .button--primary { color: var(--on-brand); background: var(--brand); border-color: var(--brand); } .button--primary:hover { background: var(--brand); border-color: var(--brand); filter: brightness(1.08); } .button--secondary { color: var(--fg); background: var(--bg-elev); } .button--ghost { color: var(--fg-dim); border-color: transparent; } .welcome-card { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; padding: 1.4rem; color: var(--fg); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .welcome-card h2 { margin: .35rem 0 .5rem; max-width: 40rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; } .welcome-card p { max-width: 44rem; margin: 0; color: var(--fg-dim); font-size: .84rem; line-height: 1.7; } .welcome-actions { display: flex; gap: .5rem; flex-shrink: 0; } .eyebrow { display: block; margin-bottom: .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); } .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; } .metric-card, .section-card, .method-card, .choice-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .metric-card { display: grid; padding: .9rem 1rem; } .metric-card span { color: var(--fg-dim); font-size: .74rem; font-weight: 500; } .metric-card strong { margin: .3rem 0; font-size: 1.6rem; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .metric-card small { color: var(--fg-dim); font-size: .7rem; } .section-card { margin-top: 1rem; padding: 1.1rem; } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .8rem; } .section-heading h2 { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em; } .section-heading > a { font-size: .78rem; font-weight: 500; text-decoration: none; } .activity-list { display: grid; } .activity-row { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .65rem .2rem; color: var(--fg); text-decoration: none; border-top: 1px solid var(--border); } .activity-row:first-child { border-top: 0; } .activity-row > span:nth-child(2) { display: grid; } .activity-row small { color: var(--fg-dim); font-size: .74rem; } .file-glyph { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 4px; color: var(--fg-dim); background: var(--bg); border: 1px solid var(--border); } .status-pill, .availability { display: inline-flex; padding: .2rem .45rem; border-radius: 4px; color: var(--fg-dim); background: var(--bg); border: 1px solid var(--border); font-size: .68rem; font-weight: 500; text-transform: lowercase; white-space: nowrap; } .empty-state { display: flex; align-items: center; gap: 1rem; padding: 1rem; color: var(--fg-dim); background: var(--bg); border: 1px dashed var(--border-bright); border-radius: 4px; } .empty-state h3, .empty-state p { margin: 0; } .empty-state h3 { color: var(--fg); font-size: .88rem; font-weight: 500; } .empty-state .button { margin-left: auto; } .empty-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 4px; color: var(--fg-dim); background: var(--bg-elev); border: 1px solid var(--border); } .onboarding-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; align-items: start; } .onboarding-main { padding: 1.3rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .onboarding-main h2 { margin: .4rem 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; } .lede { color: var(--fg-dim); line-height: 1.7; } .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1.3rem 0; } .choice-card { display: grid; gap: .3rem; padding: .9rem; color: var(--fg); text-decoration: none; background: var(--bg); } .choice-card:hover { border-color: var(--brand); } .choice-card span, .choice-card small { color: var(--fg-dim); } .choice-card small { margin-top: .25rem; font-size: .7rem; } .onboarding-actions { display: flex; gap: .5rem; } .setup-steps { list-style: none; display: grid; gap: .9rem; margin: 0; padding: 1.1rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .setup-steps li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .6rem; opacity: .55; } .setup-steps li > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--border); border-radius: 4px; font-weight: 500; font-size: .78rem; } .setup-steps li div { display: grid; } .setup-steps small { color: var(--fg-dim); } .setup-steps .is-current { opacity: 1; } .setup-steps .is-current > span { color: var(--on-brand); background: var(--brand); border-color: var(--brand); } .notice { margin-bottom: 1rem; padding: .8rem .9rem; color: var(--fg); background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 4px; font-size: .84rem; } .method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .method-card { padding: 1rem; } .method-card-head { display: flex; align-items: center; justify-content: space-between; } .method-index { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 4px; color: var(--fg-dim); background: var(--bg); border: 1px solid var(--border); font-size: .72rem; font-weight: 500; } .method-card h2 { margin: .8rem 0 .4rem; font-size: .95rem; font-weight: 600; letter-spacing: -.025em; } .method-card p { min-height: 3.6rem; color: var(--fg-dim); font-size: .8rem; line-height: 1.7; } .method-card > a { font-size: .78rem; font-weight: 500; text-decoration: none; } .scroll-x { border-radius: 4px; } .filters fieldset { border-radius: 4px; } .filters select, .filters button, .filters input[type="text"], .filters input[type="search"], .filters input[type="date"] { min-height: 2rem; border-radius: 4px; } .filters button { padding-inline: .7rem; } input, textarea, select, button { font-family: inherit; } /* Target authoring keeps long nested contracts readable on narrow screens. */ .target-form-grid, .target-contract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } .target-form-grid { margin: 1rem 0; } .target-form label, .target-action-form label { display: grid; align-content: start; gap: .35rem; min-width: 0; font-size: .83rem; } .target-form input, .target-form textarea, .target-action-form input, .target-action-form select { width: 100%; min-width: 0; padding: .55rem .65rem; color: var(--fg); background: var(--bg); border: 1px solid var(--border-bright); border-radius: 4px; } .target-contract { padding: .8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-elev); } .target-contract legend { padding: 0 .35rem; font-weight: 700; } .target-contract label + label { margin-top: .6rem; } .target-contract .note { margin: 0; min-height: 2.5rem; } .target-contract textarea { min-height: 8rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; } .target-contract details { min-width: 0; font-size: .76rem; } .target-contract summary { cursor: pointer; color: var(--fg-dim); } .target-contract pre { max-height: 20rem; margin: .5rem 0 0; padding: .6rem; overflow: auto; background: var(--bg); border: 1px solid var(--border); font-size: .7rem; } .target-guided-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .75rem 0; padding: .75rem; border: 1px solid var(--border); border-radius: 4px; } .target-guided-row label + label { margin-top: 0; } .target-contract [data-add-guided-row] { margin: .25rem 0 .8rem; } .target-action-form { display: grid; gap: .7rem; max-width: 37rem; margin: 1rem 0; } .target-action-form h3 { margin: 0; } .target-action-form button { justify-self: start; } .site-footer { margin-top: 0; padding: 0 0 2rem; border: 0; } .footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .7rem; } .footer-links .note { flex: 1 1 100%; margin: 0 0 .1rem; font-size: .74rem; } .footer-links a { color: var(--fg-dim); font-size: .78rem; text-decoration: none; } .footer-links a:hover { color: var(--fg-bright); text-decoration: underline; } .site-footer details { color: var(--fg-dim); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: .65rem .8rem; } .site-footer summary { font-weight: 500; } .sidebar-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(8, 10, 13, .6); } /* --- shared macros ------------------------------------------------------- */ /* The verdict stamp. Colour is never the only cue: the label text and the glyph both carry the state, and the four states differ by border pattern as well as hue, so the distinction survives monochrome and CVD. */ .verdict-stamp { display: grid; gap: .35rem; margin: .8rem 0; padding: .7rem .85rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .verdict-stamp--pass { border-left: 4px solid var(--pass); } .verdict-stamp--warn { border-left: 4px solid var(--advisory); } .verdict-stamp--blocked { border-left: 6px solid var(--blocked); } .verdict-stamp--unsupported { border-left: 4px double var(--unsupported); } .verdict-stamp .eyebrow { color: var(--abstain); } .verdict-stamp-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .verdict-icon { font-size: .95rem; line-height: 1; } .verdict-stamp--pass .verdict-icon { color: var(--pass); } .verdict-stamp--warn .verdict-icon { color: var(--advisory); } .verdict-stamp--blocked .verdict-icon { color: var(--blocked); } .verdict-stamp--unsupported .verdict-icon { color: var(--unsupported); } .verdict-sentence { margin: 0; font-size: .86rem; line-height: 1.7; } /* A control that looks like a button, focuses like a button, and does nothing, because the wiring named in its title does not exist yet. */ .placeholder-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .6rem; } /* The `stat` macro renders one card; this lays a row of them out. Declared once here rather than per area, so two areas cannot disagree about it. */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: .8rem 0; } .stat { display: grid; padding: .8rem .9rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .stat-label { color: var(--fg-dim); font-size: .74rem; font-weight: 500; } .stat-value { margin: .3rem 0; font-size: 1.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .stat-note { color: var(--fg-dim); font-size: .7rem; } /* The bar is decorative. The list under it is the accessible reading, and it is always rendered, never hidden behind a hover. */ .coverage-bar { margin: .7rem 0; } .coverage-bar-track { display: flex; width: 100%; height: .6rem; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; } .coverage-bar-segment { height: 100%; border-right: 1px solid var(--bg); background: var(--fg-dim); } .coverage-bar-segment:last-child { border-right: 0; } .coverage-bar-segment:nth-child(1) { background: var(--brand); } .coverage-bar-segment:nth-child(2) { background: var(--fg-dim); } .coverage-bar-segment:nth-child(3) { background: var(--border-bright); } .coverage-bar-total { margin: .35rem 0 .2rem; color: var(--fg-dim); font-size: .74rem; } .coverage-bar-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0; padding: 0; font-size: .76rem; color: var(--fg-dim); } /* --- focus, everywhere --------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (max-width: 70rem) { .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar-search { flex-basis: 14rem; } } @media (max-width: 52rem) { .app-shell { display: block; } .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(18rem, 86vw); transition: transform .2s ease; } .sidebar.is-open { transform: translateX(0); } .menu-button, .sidebar-close { display: inline-grid; } .topbar-title { display: none; } .metric-grid { grid-template-columns: 1fr; } .welcome-card { align-items: start; flex-direction: column; } .onboarding-layout { grid-template-columns: 1fr; } .setup-steps { grid-row: 1; } .content { padding-top: 1.4rem; } .account-copy { display: none; } .account-button { grid-template-columns: 1.6rem auto; } } @media (max-width: 36rem) { .target-form-grid, .target-contract-grid, .target-guided-row { grid-template-columns: 1fr; } .choice-grid, .method-grid { grid-template-columns: 1fr; } .welcome-actions, .onboarding-actions { width: 100%; flex-direction: column; } .topbar-search { display: none; } .empty-state { align-items: flex-start; flex-wrap: wrap; } .empty-state .button { margin-left: 3rem; } .content, .site-footer { width: min(100% - 1.25rem, 52.5rem); } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* Promoted from episodes.css: small inline tags for absent/observed/inferred values. */ /* The view tags on a row. An absent view is a lighter, dashed tag, so the * difference survives without colour. */ .plain-tag { display: inline-block; margin: 0 .25rem .25rem 0; padding: .1rem .4rem; color: var(--fg-dim); font-size: .72rem; border: 1px solid var(--border); border-radius: 4px; } .plain-tag--absent { color: var(--border-bright); border-style: dashed; } .plain-tag--observed { color: var(--fg); border-color: var(--border-bright); } .plain-tag--inferred { color: var(--fg-dim); border-style: dashed; }