/* Easy2audit house style — shared by every page and the generated documents. Colors/typography 1:1 from docs/library/_template/head.html. The tokens below the palette are the UX round of 14 Sep 2026 (docs/library/2026-09-14-ux-ronde.nl.html, section 4), decided by Etienne on 15 Sep: one page width, a type scale with a 12px floor, fixed control heights, and colour only for state — dark green = at target, coral = deviates, muted amber = partly or not measured, navy for a label without a state. --red-* stays for errors of the app itself (a failed call), not for verdicts. */ :root{ --ink:#021019; --navy:#112532; --navy-mid:#2c536c; --navy-soft:#5a839d; --mist:#e0e7ea; --mist-2:#eef2f4; --paper:#f6f8f9; --white:#ffffff; --coral:#e78795; --coral-deep:#c9697a; --coral-tint:#fbeef0; --coral-line:#f1cdd4; --backdrop:#0a141c; --green:#3f9d6b; --green-deep:#2f7d54; --green-tint:#e7f3ec; --green-line:#cfe6d8; --red:#c1543f; --red-deep:#9c4232; --red-tint:#fbeeeb; --red-line:#f0d2c9; --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --serif:"Newsreader",Georgia,"Times New Roman",serif; --shadow:0 24px 80px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); /* state text on its tint: the -deep/-line tones above do not reach 4.5:1 there for 12px text */ --green-ink:#2a7049; /* 5.25:1 on --green-tint */ --coral-ink:#a34a5a; /* 5.05:1 on --coral-tint */ --amber:#b97f2a; --amber-deep:#7a531a; --amber-tint:#faf1e0; --amber-line:#ecd9b4; /* 6.08:1 */ /* layout: one width for the work pages (applied per page in the frame PR) */ --page-max:1200px; --gutter:32px; /* type: six sizes, nothing below 12px */ --fs-xs:12px; /* labels, column heads, pills, captions */ --fs-sm:14px; /* body, table cells, buttons, fields */ --fs-md:16px; /* lead */ --fs-lg:22px; /* h2, Newsreader */ --fs-kpi:28px; /* KPI figure, Newsreader */ --fs-xl:32px; /* h1, Newsreader */ /* lines, shapes, controls */ --line:rgba(44,83,108,.14); --r:4px; --r-panel:8px; --control-h:36px; --control-h-sm:30px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{margin:0;padding:40px 20px;background:var(--backdrop);font-family:var(--sans); color:var(--navy);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;} a{color:inherit;} /* One visible focus for everything reachable by keyboard; light on the dark bar and header. */ :focus-visible{outline:2px solid var(--navy);outline-offset:2px;} .topbar :focus-visible,.head :focus-visible{outline-color:#fff;} .sheet{max-width:940px;margin:0 auto;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);} .sheet.narrow{max-width:480px;} .sheet.wide{max-width:1600px;} .eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-deep);margin:0 0 14px;} /* header */ .head{position:relative;padding:40px 44px 40px;color:#eaf1f4; background:radial-gradient(120% 90% at 100% -10%, rgba(231,135,149,.20), transparent 54%), linear-gradient(155deg,#143042 0%, #112532 46%, #0c1f2b 100%);} .head__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px;} .logo{height:22px;width:auto;color:#fff;display:block;} .kicker{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,241,244,.62);text-align:right;} .kicker .dot{color:var(--coral);margin:0 .5em;} .head .eyebrow{color:var(--coral);} .display{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.12;letter-spacing:-.016em;color:#fff;margin:0;max-width:22ch;text-wrap:balance;} .display b{color:var(--coral);font-weight:500;} .head__lead{font-size:14.5px;line-height:1.62;color:rgba(234,241,244,.82);margin:16px 0 0;max-width:60ch;font-weight:300;} .head__lead b{color:#fff;font-weight:600;} /* the one navigation bar (SAAS-125) — nav.js puts it above the sheet on every page. Chrome on the dark backdrop, so it borrows the header's light-on-navy palette and adds no colour. Named .topbar because @media print already hides that class; report.html gets its pdf for free. */ .topbar{max-width:940px;margin:0 auto 14px;display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px; padding:8px 12px;border-radius:12px;color:#eaf1f4;font-size:var(--fs-sm); background:rgba(255,255,255,.05);border:1px solid rgba(234,241,244,.14);} .topbar a{color:rgba(234,241,244,.76);text-decoration:none;padding:6px 10px;border-radius:7px;white-space:nowrap;} .topbar a:hover{color:#fff;background:rgba(255,255,255,.09);} /* The active item: white with a white underline. Coral is a state colour now, not chrome. */ .topbar a.on{color:#fff;box-shadow:inset 0 -2px 0 #fff;border-radius:7px 7px 0 0;} .topbar__spacer{flex:1 1 auto;} .topbar__tenant{font-size:var(--fs-sm);font-weight:600;color:#fff;padding:0 8px;} /* 32ch: "Hoofdorpse Luchtvaart Club" fits whole. */ .topbar select{font:inherit;font-size:var(--fs-sm);max-width:32ch;height:var(--control-h-sm);padding:0 8px;border-radius:var(--r); color:var(--navy);background:#fff;border:1px solid rgba(234,241,244,.3);} .topbar__lang{display:inline-flex;border:1px solid rgba(234,241,244,.3);border-radius:var(--r);overflow:hidden;margin:0 6px;} .topbar__lang button{font:inherit;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;padding:0 10px;height:28px; border:0;background:transparent;color:rgba(234,241,244,.78);cursor:pointer;} .topbar__lang button.on{background:#fff;color:var(--navy);} /* side panel (SAAS-125) — the detail of a row, pattern from the board mock. In e2a.css and not in controls.html: step 5's dashboard is the next user, and one stylesheet stays one stylesheet. */ .scrim{position:fixed;inset:0;background:rgba(2,16,25,.35);opacity:0;pointer-events:none;transition:opacity .2s;} /* Closed it is not only off screen but really away: visibility keeps its button out of the tab order and out of the screen reader. It turns visible at once on opening (so the button can take focus) and only turns hidden after the slide out, hence the delay on the closed state. */ .drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);background:var(--white); box-shadow:var(--shadow);transform:translateX(102%);visibility:hidden; transition:transform .25s,visibility 0s linear .25s;overflow:auto; padding:22px 26px 40px;z-index:2;} body.drawer-open .scrim{opacity:1;pointer-events:auto;} body.drawer-open .drawer{transform:none;visibility:visible;transition:transform .25s,visibility 0s;} /* The open state carries its own transition (see above), so it is named here as well, or it would keep sliding for someone who asked for no motion. */ @media (prefers-reduced-motion:reduce){.drawer,.scrim,body.drawer-open .drawer{transition:none;}} .drawer__close{position:absolute;top:14px;right:16px;} .drawer__crumbs{font-size:12px;color:var(--navy-soft);margin-bottom:6px;} .drawer__title{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--navy);margin:0 0 4px;text-wrap:balance;} .drawer__sub{font-size:12.5px;color:var(--navy-soft);margin:0 0 18px;} .drawer__note{font-size:12px;color:var(--navy-soft);margin-top:16px;border-top:1px solid var(--mist);padding-top:10px;} /* buttons */ /* One height, never wrapping: a button label is one line (finding A1 broke "Ruggengraat" in two). primary = ink, as on easy2audit.com; secondary (.btn-ghost, the name the pages already use) = white with a mist border; tertiary = text only. */ .btn{appearance:none;border:1px solid transparent;cursor:pointer;font-family:var(--sans);font-size:var(--fs-sm);font-weight:600; border-radius:var(--r);height:var(--control-h);padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px; text-decoration:none;line-height:1;white-space:nowrap;transition:background .12s ease, border-color .12s ease;} .btn:active{transform:translateY(1px);} .btn-primary{background:var(--ink);color:#fff;} .btn-primary:hover{background:var(--navy-mid);} .btn-ghost{background:#fff;border-color:var(--mist);color:var(--navy);} .btn-ghost:hover{border-color:var(--navy-soft);} .btn-tertiary{background:none;color:var(--navy-mid);padding:0 6px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mist);} .btn-tertiary:hover{color:var(--navy);text-decoration-color:var(--navy-soft);} .btn-sm{height:var(--control-h-sm);padding:0 12px;} .btn-tertiary.btn-sm{padding:0 4px;} /* A destructive action (intrekken, ontkoppelen, afmelden) is tertiary in red; its confirm() stays. */ .btn-tertiary.btn-danger{color:var(--red-deep);text-decoration-color:var(--red-line);} .btn-block{width:100%;justify-content:center;} .btn[disabled]{opacity:.5;pointer-events:none;} .msicon{width:21px;height:21px;flex:none;} /* "Sign in with Microsoft", dark theme, on the redlines of the Microsoft Learn branding guidelines (howto-add-branding-in-apps): 41px high, 12px before the logo, between logo and text and after the text, Segoe UI 15px weight 600, white on #2F2F2F, the logo unaltered. Full width in the card, content centred. */ .btn-ms{display:flex;align-items:center;justify-content:center;gap:12px;height:41px;padding:0 12px;background:#2F2F2F;color:#FFFFFF; font-family:"Segoe UI",var(--sans);font-size:15px;font-weight:600;text-decoration:none;border:0;border-radius:0;white-space:nowrap;} .btn-ms:hover{background:#2F2F2F;color:#FFFFFF;} /* sections */ .sec{padding:32px 44px;border-top:1px solid var(--mist);} .sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px;} .sec h2{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.012em;color:var(--navy);margin:0;} .sec h2 b{color:var(--coral-deep);font-weight:500;} .sec__note{font-size:12.5px;color:var(--navy-mid);max-width:46ch;line-height:1.5;margin:0;} .body{font-size:13.5px;line-height:1.65;color:var(--navy-mid);margin:0 0 14px;max-width:74ch;} .body:last-child{margin-bottom:0;} .body b{color:var(--navy);font-weight:600;} .muted{color:var(--navy-mid);} /* status card (signed-in state, errors) */ .card{background:var(--paper);border:1px solid var(--mist);border-radius:10px;padding:18px 20px;} .card.ok{background:var(--green-tint);border-color:var(--green-line);} /* What is already in order, above the counters (golf 1): the tokens of a passing card. */ .goodstrip{background:var(--green-tint);border:1px solid var(--green-line);border-radius:var(--r-panel);color:var(--green-ink); font-size:var(--fs-sm);line-height:1.5;padding:10px 14px;margin:18px 0 0;} .goodstrip b{font-weight:600;} .sec > .goodstrip:first-child{margin-top:0;} .goodstrip b::before{content:"\2713\00a0";} .card.warn{background:var(--amber-tint);border-color:var(--amber-line);} .card.info{background:var(--mist-2);border-color:var(--mist);} .card.err{background:var(--red-tint);border-color:var(--red-line);} .card .who{display:flex;align-items:center;gap:12px;margin-bottom:4px;} .avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:none;} .card .name{font-weight:600;color:var(--navy);font-size:14px;} .card .sub{font-size:12.5px;color:var(--navy-mid);} .card-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} /* form row */ .frow{display:flex;gap:8px;margin-top:12px;} .frow input{flex:1;min-width:0;height:var(--control-h);padding:0 10px;border:1px solid var(--navy-soft);border-radius:var(--r); font-family:var(--sans);font-size:var(--fs-sm);color:var(--navy);background:#fff;} .frow .btn{white-space:nowrap;} /* chips (stat tiles) */ .chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .chips.chips-3{grid-template-columns:repeat(3,1fr);} /* A tile carries no colour of its own: the c-pass/c-fail/c-unknown/c-accent classes the pages set stay valid but no longer paint a border. State belongs in a pill next to the figure. */ .chip{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);padding:14px 16px;} .chip .k{font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);margin:0 0 6px;} .chip .v{font-family:var(--serif);font-size:var(--fs-kpi);font-weight:500;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;} .chip .v small{font-family:var(--sans);font-size:var(--fs-xs);font-weight:500;color:var(--navy-mid);} .chip .tsub{font-size:var(--fs-xs);color:var(--navy-mid);margin-top:4px;line-height:1.4;} /* The working order (Etienne, 16 Sep): cards on the control matrix, one tight column on the start page. */ .steps{margin-bottom:18px;} .steplist{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));} .steplist li{border:1px solid var(--line);border-radius:var(--r-panel);padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:6px;} .steplist li.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);} .stephead{display:flex;align-items:baseline;gap:8px;justify-content:space-between;font-size:var(--fs-sm);} .steplist .say{color:var(--navy);} .stepgo{margin-top:auto;} .steplist.compact{grid-template-columns:1fr;gap:6px;} .steplist.compact li{padding:8px 12px;gap:4px;} /* pills (verdict). Lightly rounded like buttons and tags, not fully round (Etienne, 15 Sep evening): it matches the one-pagers. A pill carries a state word; a name next to it is plain text. */ /* pills: the state colours (Etienne, 15 Sep). Always a dot AND a word, never colour alone. pass = at target, fail = deviates, partial = partly or not measured, unknown = a label without a state (n.v.t., paused, not set). pill-partial is new: the pages move their "deels/niet gemeten" to it in their own PRs; until then those keep pill-unknown and read as a neutral label. */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600; padding:2px 9px 2px 8px;border-radius:var(--r);white-space:nowrap;border:1px solid transparent;line-height:1.4;} .pill::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;} .pill-pass{background:var(--green-tint);color:var(--green-ink);border-color:var(--green-line);} .pill-pass::before{background:var(--green-ink);} .pill-fail{background:var(--coral-tint);color:var(--coral-ink);border-color:var(--coral-line);} .pill-fail::before{background:var(--coral);} .pill-partial{background:var(--amber-tint);color:var(--amber-deep);border-color:var(--amber-line);} .pill-partial::before{background:var(--amber);} .pill-unknown{background:#fff;color:var(--navy);border-color:var(--navy-soft);} .pill-unknown::before{background:var(--navy);} /* tables */ /* No horizontal scrollbar: the table adapts to the width instead of the other way round (decision by Etienne, 7 Sep 2026). Since the UX round the columns size to their content (table-layout:auto) and words stay whole: with fixed layout every column got the same share, and a nine-column table broke its buttons letter by letter (finding A1). Buttons, pills and tags never break. On a phone the old rule stays (fixed, break anywhere) until a page gives its table .tbl--stack: content-sized columns with whole words do not fit 375px. */ .tbl-wrap{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-panel);} .tbl{width:100%;table-layout:auto;border-collapse:collapse;font-size:var(--fs-sm);} .tbl th,.tbl td{overflow-wrap:break-word;} .tbl .btn,.tbl .pill,.tbl .tag{overflow-wrap:normal;} .tbl.controls th:nth-child(1){width:34%;} .tbl.controls th:nth-child(2){width:12%;} .tbl.controls th:nth-child(4){width:14%;} .tbl.reasons th:nth-child(1){width:40%;} /* Report: the gaps and the ISO rollup as tables (UX round). The secondary line under a title is 12px navy-mid, like .sub on the work screens; the rank and the Annex A code are narrow. */ .tbl .sub{display:block;font-size:var(--fs-xs);color:var(--navy-mid);font-weight:400;margin-top:2px;} .tbl.gaps th:nth-child(1),.tbl.iso th:nth-child(1){width:1%;white-space:nowrap;} .tbl.gaps th:nth-child(3){width:22%;} .tbl.iso th:nth-child(3){width:1%;white-space:nowrap;} .tbl.dossier th:nth-child(1){width:26%;} .tbl.dossier th:nth-child(2){width:13%;} .tbl thead th{text-align:left;padding:10px 14px;font-size:var(--fs-xs);font-weight:600; color:var(--navy-mid);border-bottom:1px solid var(--line);background:#fff;overflow-wrap:normal;position:sticky;top:0;} .tbl tbody td{padding:12px 14px;color:var(--navy);border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;} .tbl tbody tr:last-child td{border-bottom:none;} .tbl tbody tr:hover{background:var(--mist-2);} .tbl tbody td:first-child{font-weight:600;color:var(--navy);} .num{font-variant-numeric:tabular-nums;white-space:nowrap;} .tbl td.num{text-align:right;} .tbl th.num{text-align:right;} /* The row's actions: as narrow as its buttons, never under the text. */ .tbl td.actions{width:1%;white-space:nowrap;} .tbl td.nowrap{white-space:nowrap;} /* Folds in a long list (golf 2): the bar of a group, and the fold that hides what already passes. */ summary.chapter{cursor:pointer;display:flex;gap:10px;align-items:baseline;padding:8px 16px;background:var(--paper); font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);border-top:1px solid var(--line);} summary.chapter::-webkit-details-marker{display:none;} summary.chapter::before{content:"\25b8";font-size:10px;color:var(--navy-soft);} details[open] > summary.chapter::before{content:"\25be";} summary.chapter .gsub{font-weight:400;margin-left:auto;} details.passfold > summary{cursor:pointer;font-size:var(--fs-sm);color:var(--navy-mid);padding:8px 16px;} /* Report, round 2 (V14, V15): the instruction under its pill, and the controls behind an Annex A row as a list. */ .tbl .instr{margin-top:4px;} .tbl ul.fromlist{margin:4px 0 0;padding-left:16px;font-size:var(--fs-xs);color:var(--navy-mid);} .tbl ul.fromlist li{margin:1px 0;} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--navy-mid);} .tag{display:inline-block;font-size:var(--fs-xs);font-weight:500;background:#fff;color:var(--navy-mid);border:1px solid var(--mist); border-radius:var(--r);padding:0 6px;margin:1px 2px 1px 0;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums;} .foot{padding:20px 44px 24px;border-top:1px solid var(--mist);display:flex;flex-wrap:wrap;gap:8px 20px; align-items:baseline;font-size:var(--fs-xs);color:var(--navy-mid);} .foot .brand{font-weight:700;color:var(--navy);} .foot .push{margin-left:auto;} .foot a{text-decoration:underline;text-underline-offset:2px;} .loading{padding:60px 44px;text-align:center;color:var(--navy-mid);font-size:13.5px;} .spin{display:inline-block;width:22px;height:22px;border-radius:50%; border:2.5px solid var(--mist);border-top-color:var(--navy);animation:spin .8s linear infinite;margin-bottom:14px;} @keyframes spin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion:reduce){.spin{animation:none;}} @media (max-width:720px){ body{padding:20px 10px;} .head{padding:28px 22px;} .sec{padding:24px 22px;} .foot{padding:18px 22px 22px;} .display{font-size:25px;} .chips{grid-template-columns:repeat(2,1fr);} .tbl{table-layout:fixed;} .tbl th,.tbl td{overflow-wrap:anywhere;} /* A table with .tbl--stack becomes a stack per row on a phone, each cell labelled from data-label. Started as the layer-0 dossier table (.tbl.dossier), which keeps working under its own name. */ .tbl.dossier thead,.tbl--stack thead{display:none;} .tbl.dossier tr,.tbl.dossier td,.tbl--stack tr,.tbl--stack td{display:block;width:auto;} .tbl.dossier tbody td,.tbl--stack tbody td{border-bottom:none;padding:6px 14px;overflow-wrap:break-word;} .tbl.dossier tbody tr,.tbl--stack tbody tr{border-bottom:1px solid var(--line);padding:6px 0;} .tbl.dossier td[data-label]::before,.tbl--stack td[data-label]::before{content:attr(data-label);display:block; font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);margin-bottom:2px;} /* On a phone a long label may wrap between words (never inside one: overflow-wrap stays normal). */ .btn{white-space:normal;overflow-wrap:normal;height:auto;min-height:var(--control-h);padding:8px 16px;text-align:center;line-height:1.3;} .topbar{margin:0 auto 10px;padding:8px;gap:2px;} .topbar__spacer{flex-basis:100%;height:0;} /* tenant, language and sign-out drop to a second line */ .topbar select{max-width:100%;flex:1 1 auto;} } /* A table too wide for a laptop (the admin customer list: eight columns) stacks already below 1100px. */ @media (max-width:1100px){ .tbl--stack-lg thead{display:none;} .tbl--stack-lg tr,.tbl--stack-lg td{display:block;width:auto;} .tbl--stack-lg tbody td{border-bottom:none;padding:6px 14px;overflow-wrap:break-word;} .tbl--stack-lg tbody tr{border-bottom:1px solid var(--line);padding:6px 0;} .tbl--stack-lg td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);margin-bottom:2px;} .tbl--stack-lg td.actions{width:auto;} } /* ---- work screens: body.app (UX round PR 2) ------------------------------------------ Decision by Etienne, 15 Sep: work screens get a light ground, documents stay dark. The pages that are work screens say so with ; report.html, the generated policy documents and the maintenance page do not, and keep the document look above unchanged. One width for every work page (finding B1), a navy bar over the full width with the logo, the page title on the ground instead of in a dark block, and every section a white panel. Coral is no accent here: heading words are navy. */ body.app{background:var(--paper);padding:0 0 48px;font-size:var(--fs-sm);} .app .topbar{max-width:none;margin:0 0 8px;border:0;border-radius:0;background:var(--navy);min-height:56px; padding:8px max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));} .app .topbar a{border-radius:0;height:40px;display:inline-flex;align-items:center;padding:0 12px;} .app .topbar a:hover{background:rgba(255,255,255,.08);} .app .topbar a.topbar__logo{width:116px;height:19px;padding:0;margin-right:16px;background:#fff; -webkit-mask:url(/assets/logo.svg) no-repeat left center/contain;mask:url(/assets/logo.svg) no-repeat left center/contain;} .app .sheet,.app .sheet.wide{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter); background:none;border-radius:0;box-shadow:none;overflow:visible;} /* The sign-in page keeps a narrow column; its bar is as wide as everywhere else. */ .app .sheet.narrow{max-width:calc(640px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter); background:none;border-radius:0;box-shadow:none;overflow:visible;} .app .head{background:none;color:var(--navy);padding:32px 0 24px;} .app .head__top{justify-content:flex-start;gap:12px;margin:0 0 6px;} .app .head .logo{color:var(--navy);height:20px;} body.app:has(> .topbar) .head .logo{display:none;} /* the bar shows it; signed out there is no bar */ .app .kicker{color:var(--navy-mid);text-align:left;font-size:var(--fs-xs);} .app .kicker .dot{color:var(--navy-mid);} .app .head .eyebrow{color:var(--navy-mid);letter-spacing:.08em;margin:0 0 6px;} .app .display{color:var(--navy);font-size:var(--fs-xl);line-height:1.15;max-width:none;} .app .display b{color:var(--navy);} .app .head__lead{color:var(--navy-mid);font-size:var(--fs-md);font-weight:400;max-width:68ch;margin-top:8px;} .app .head__lead b{color:var(--navy);} .app .sec{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);padding:24px;margin:0 0 24px;} .app .sec h2 b{color:var(--navy);} /* Two layers at most: a plain .card inside a panel is a part of it, not a third box. Cards that carry a state (ok, warn, err, info) keep their tint. */ .app .sec .card:not(.ok):not(.warn):not(.err):not(.info){background:none;border:0;border-top:1px solid var(--line); border-radius:0;padding:20px 0 0;margin-top:20px;} .app .sub{font-size:var(--fs-xs);color:var(--navy-mid);} /* Fields at control height. :where keeps this at the lowest weight, so a page's own