/* =========================================================================== CADReview — local review console. One stylesheet, no CDN and no network font: the tool must work with the machine offline, and a drawing must never leave it. Direction: every box rule is a LOGICAL property, so the console mirrors when flips. Physical left/right survives only where the content itself is Latin data (ids, file names, timestamps) and is pinned ltr on purpose. Theme: light is the default in :root; the OS preference applies unless a theme was picked explicitly, and an explicit pick wins in both directions because it lands on before first paint — hence no wrong-theme flash. Palettes are deliberate, not "grey plus one accent": drafting linen and ink with a blueprint blue, graphite and slate in dark. Both checked for WCAG AA on body text; the severity badges are re-cut for dark, where the light fills go invisible, to a mid fill with pale text and a 3:1 boundary. =========================================================================== */ /* --------------------------------------------------------------- design tokens */ :root { color-scheme: light; /* type: one stack per script, chosen from what Windows/macOS/Linux ship. Arabic is a Naskh (document character, not a UI grotesque); Latin body is a humanist sans, Latin display a serif — a real pairing, not one family. */ --font-ar: "Sakkal Majalla", "Segoe UI", Tahoma, "Noto Naskh Arabic", "Traditional Arabic", serif; --font-en: "Segoe UI", Inter, "Helvetica Neue", Arial, "Liberation Sans", sans-serif; --font-display: "Iowan Old Style", Georgia, "Palatino Linotype", "Book Antiqua", serif; --font-mono: Consolas, "Cascadia Mono", "DejaVu Sans Mono", "Courier New", monospace; /* surfaces & ink */ --bg: #e9e7e1; --bg-grain: rgba(26, 34, 44, .035); --paper: #fdfcfa; --paper-2: #f5f3ee; --ink: #1a222c; --ink-strong: #0f151c; --muted: #5a6672; --line: #d6d1c7; --line-strong: #b9b2a4; /* semantics */ --accent: #1f5d8c; --accent-ink: #ffffff; --accent-soft: #eaf1f7; --accent-line: #b9d2e6; --ok: #1a6b3c; --ok-soft: #eaf5ee; --ok-line: #b7d9c3; --bad: #a5122a; --bad-soft: #fbecec; --bad-line: #e3b4b4; --warm: #7d5f0c; --warm-soft: #f7efd8; --warm-line: #ddc98d; --violet: #5b3f96; --violet-soft: #f1ecfa; --violet-line: #cbbbe6; /* severity badges — solid fills, white label */ --sev-critical: #a5122a; --sev-critical-ink: #ffffff; --sev-critical-line: transparent; --sev-high: #b4530c; --sev-high-ink: #ffffff; --sev-high-line: transparent; --sev-medium: #856611; --sev-medium-ink: #ffffff; --sev-medium-line: transparent; --sev-low: #2c5f96; --sev-low-ink: #ffffff; --sev-low-line: transparent; --sev-none: #1a6b3c; --sev-none-ink: #ffffff; --sev-none-line: transparent; --focus: #1f5d8c; --shadow-card: 0 1px 2px rgba(26, 34, 44, .05), 0 8px 24px -12px rgba(26, 34, 44, .18); --shadow-raise: 0 2px 4px rgba(26, 34, 44, .10), 0 14px 32px -14px rgba(26, 34, 44, .28); --radius: 5px; --radius-sm: 3px; --rule: 3px; } /* Dark: applied from the OS preference unless light was picked explicitly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #12151a; --bg-grain: rgba(255, 255, 255, .022); --paper: #1a1f26; --paper-2: #222932; --ink: #e7eaee; --ink-strong: #f6f8fa; --muted: #9aa6b2; --line: #313a45; --line-strong: #48535f; --accent: #79b8e8; --accent-ink: #0c1620; --accent-soft: #16242f; --accent-line: #2c4a60; --ok: #57c281; --ok-soft: #15251b; --ok-line: #26492f; --bad: #ff8497; --bad-soft: #2e181c; --bad-line: #5c2831; --warm: #e0b13f; --warm-soft: #2b2413; --warm-line: #574719; --violet: #b39ae6; --violet-soft: #201b30; --violet-line: #3d3358; --sev-critical: #8d1f31; --sev-critical-ink: #ffe0e5; --sev-critical-line: #b8465a; --sev-high: #8a4a0d; --sev-high-ink: #ffeada; --sev-high-line: #b06a2a; --sev-medium: #6d5511; --sev-medium-ink: #fff2cf; --sev-medium-line: #96792a; --sev-low: #28527d; --sev-low-ink: #e2effa; --sev-low-line: #4d7fae; --sev-none: #1d6b3f; --sev-none-ink: #dcf5e5; --sev-none-line: #3d8f5f; --focus: #ffcf5c; --shadow-card: 0 1px 0 rgba(255, 255, 255, .03), 0 12px 28px -16px rgba(0, 0, 0, .8); --shadow-raise: 0 1px 0 rgba(255, 255, 255, .05), 0 18px 38px -16px rgba(0, 0, 0, .9); } } /* Dark picked explicitly — same tokens, and it must win on a light-set OS too. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #12151a; --bg-grain: rgba(255, 255, 255, .022); --paper: #1a1f26; --paper-2: #222932; --ink: #e7eaee; --ink-strong: #f6f8fa; --muted: #9aa6b2; --line: #313a45; --line-strong: #48535f; --accent: #79b8e8; --accent-ink: #0c1620; --accent-soft: #16242f; --accent-line: #2c4a60; --ok: #57c281; --ok-soft: #15251b; --ok-line: #26492f; --bad: #ff8497; --bad-soft: #2e181c; --bad-line: #5c2831; --warm: #e0b13f; --warm-soft: #2b2413; --warm-line: #574719; --violet: #b39ae6; --violet-soft: #201b30; --violet-line: #3d3358; --sev-critical: #8d1f31; --sev-critical-ink: #ffe0e5; --sev-critical-line: #b8465a; --sev-high: #8a4a0d; --sev-high-ink: #ffeada; --sev-high-line: #b06a2a; --sev-medium: #6d5511; --sev-medium-ink: #fff2cf; --sev-medium-line: #96792a; --sev-low: #28527d; --sev-low-ink: #e2effa; --sev-low-line: #4d7fae; --sev-none: #1d6b3f; --sev-none-ink: #dcf5e5; --sev-none-line: #3d8f5f; --focus: #ffcf5c; --shadow-card: 0 1px 0 rgba(255, 255, 255, .03), 0 12px 28px -16px rgba(0, 0, 0, .8); --shadow-raise: 0 1px 0 rgba(255, 255, 255, .05), 0 18px 38px -16px rgba(0, 0, 0, .9); } /* ------------------------------------------------------------------- base + type */ * { box-sizing: border-box; margin: 0; } html { font-size: 100%; } /* Arabic sets smaller than Latin at the same nominal size; the whole console is rem-based, so one step up on the root restores equal reading weight. */ html[lang="ar"] { font-size: 106.25%; } body { font-family: var(--font-en); background-color: var(--bg); /* A faint diagonal tooth — drafting-paper texture, not a gradient wash. */ background-image: repeating-linear-gradient(135deg, var(--bg-grain) 0 1px, transparent 1px 7px); color: var(--ink); line-height: 1.55; min-height: 100vh; -webkit-text-size-adjust: 100%; } html[lang="ar"] body { font-family: var(--font-ar); } h1, h2, h3, .mark { font-family: var(--font-display); } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--font-ar); } .mark { font-family: var(--font-display); } /* Per-element script overrides: an element that declares its own lang gets that script's stack, which is what keeps the secondary line properly typeset. */ [lang="ar"] { font-family: var(--font-ar); } [lang="en"] { font-family: var(--font-en); } code, .mono, .rid, td.num, .examples, .left-out { font-family: var(--font-mono); } code { font-size: .92em; } a { color: var(--accent); } /* Latin data (ids, file names, timestamps) held ltr and isolated, so a mixed Arabic sentence around it cannot reorder its characters. */ .en { direction: ltr; text-align: start; unicode-bidi: isolate; } /* --------------------------------------------------------------------- skip link */ .skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 20; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 0 0 var(--radius) var(--radius); font-weight: 700; text-decoration: none; } .skip:focus { inset-inline-start: 1rem; } /* ------------------------------------------------------------------------ layout */ .wrap { max-width: 880px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .wrap.wide { max-width: 1140px; } .wrap.reading { max-width: 780px; } /* ------------------------------------------------------------------------ header */ header { border-bottom: var(--rule) solid var(--ink); padding-bottom: 1.1rem; margin-bottom: 2rem; } .brandline { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .mark { font-size: 1.6rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; } .mark a { color: inherit; text-decoration: none; } .mark a:hover span { color: var(--ink); } .mark span { color: var(--accent); transition: color .15s; } .tagline { color: var(--muted); font-size: .95rem; flex: 1 1 16rem; } .topbar { display: flex; align-items: center; gap: .5rem 1.1rem; flex-wrap: wrap; margin-top: .9rem; } .topbar nav ul { display: flex; gap: .2rem 1rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .topbar nav a { color: var(--muted); text-decoration: none; font-size: .84rem; font-weight: 600; padding: .2rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .topbar nav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); } .topbar nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } .prefs { display: flex; align-items: center; gap: .8rem; margin-inline-start: auto; } .prefs .group { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); overflow: hidden; } .prefs .group > * { font: inherit; font-size: .76rem; font-weight: 700; padding: .25rem .7rem; color: var(--muted); text-decoration: none; background: transparent; border: 0; cursor: pointer; transition: background .15s, color .15s; } .prefs .group > *:hover { background: var(--paper-2); color: var(--ink); } .prefs .group [aria-current="true"] { background: var(--ink); color: var(--paper); cursor: default; } .prefs .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } /* ------------------------------------------------------------------- flash blocks */ .error, .notice, .alert, .done-note { padding: .7rem 1rem; margin-bottom: 1.4rem; border-radius: var(--radius-sm); font-size: .92rem; border: 1px solid; border-inline-start-width: 4px; } .error { background: var(--bad-soft); border-color: var(--bad-line); border-inline-start-color: var(--bad); } .notice { background: var(--accent-soft); border-color: var(--accent-line); border-inline-start-color: var(--accent); font-size: .9rem; } .alert { background: var(--warm-soft); border-color: var(--warm-line); border-inline-start-color: var(--warm); font-size: .9rem; } .done-note { background: var(--ok-soft); border-color: var(--ok-line); border-inline-start-color: var(--ok); font-size: .9rem; } .notice b, .alert b, .done-note b { display: block; } /* SLA countdown — computed server-side; amber near the target, red past it. */ .sla { white-space: nowrap; font-size: .84rem; } .sla.ok { color: var(--muted); } .sla.warn { color: var(--warm); font-weight: 600; } .sla.over { color: var(--bad); font-weight: 700; } .sla.done { color: var(--ok); } .sla.none { color: var(--muted); font-style: italic; } /* ------------------------------------------------------------------------- cards */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* Scale contrast carries the hierarchy: section eyebrows are small and spaced, headings are large — no two levels compete at the same size. */ h1 { font-size: 1.55rem; line-height: 1.25; letter-spacing: -.01em; } h2 { font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 2.4rem 0 1rem; } h3 { font-size: 1.02rem; margin: 0; } /* ------------------------------------------------------------------------ tables */ table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--paper); } th, td { border: 1px solid var(--line); padding: .5rem .75rem; text-align: start; } th { background: var(--paper-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } tbody tr:hover td { background: var(--paper-2); } td.en, th.en { direction: ltr; text-align: start; unicode-bidi: isolate; } .scroll-x { overflow-x: auto; } /* ------------------------------------------------------------------------ badges */ .badge { display: inline-block; padding: .12rem .55rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .72rem; font-weight: 700; white-space: nowrap; } .b-CRITICAL { background: var(--sev-critical); color: var(--sev-critical-ink); border-color: var(--sev-critical-line); } .b-HIGH { background: var(--sev-high); color: var(--sev-high-ink); border-color: var(--sev-high-line); } .b-MEDIUM { background: var(--sev-medium); color: var(--sev-medium-ink); border-color: var(--sev-medium-line); } .b-LOW { background: var(--sev-low); color: var(--sev-low-ink); border-color: var(--sev-low-line); } .b-NONE { background: var(--sev-none); color: var(--sev-none-ink); border-color: var(--sev-none-line); } a.open { color: var(--accent); font-weight: 600; text-decoration: none; } a.open:hover { text-decoration: underline; } /* "Back" points the way the reader came from, which flips with the direction. */ .back::before { content: "\2190\00a0"; } [dir="rtl"] .back::before { content: "\2192\00a0"; } .empty { color: var(--muted); font-size: .9rem; padding: 1rem 0; } /* ------------------------------------------------------------- buttons & controls */ button, .btn { background: var(--ink); color: var(--paper); border: 1px solid transparent; padding: .55rem 1.4rem; font-size: .9rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: background .15s, box-shadow .15s, transform .08s; } button:hover, .btn:hover { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-raise); } button:active, .btn:active { transform: translateY(1px); box-shadow: none; } button:disabled { background: var(--muted); color: var(--paper); cursor: not-allowed; box-shadow: none; transform: none; } input[type=text], select, textarea { font-family: inherit; font-size: .88rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem .55rem; width: 100%; } input[type=text]:hover, select:hover, textarea:hover { border-color: var(--line-strong); } textarea { resize: vertical; min-height: 2.6rem; } label { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; } label .hint { font-weight: 400; color: var(--warm); } /* One visible focus treatment everywhere, keyboard-first. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } input[type=text]:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); outline-offset: 1px; } /* ------------------------------------------------------------------------ footer */ footer { margin-top: 3rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--line); padding-top: 1rem; } footer p + p { margin-top: .4rem; } footer a { color: var(--accent); } /* =============================================================== intake (index) */ .drop { margin: 1.6rem 1.6rem 1rem; border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 2.4rem 1.5rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .drop:hover, .drop.hover { border-color: var(--accent); background: var(--accent-soft); } .drop .big { font-size: 1.08rem; font-weight: 600; } .drop .hint { color: var(--muted); font-size: .85rem; margin-top: .4rem; } .drop .file-name { margin-top: .8rem; font-family: var(--font-mono); font-size: .85rem; color: var(--accent); word-break: break-all; direction: ltr; unicode-bidi: isolate; } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; padding: 0 1.6rem 1.2rem; } .fields .opt { font-weight: 400; color: var(--muted); } /* The design basis. It spans the whole row rather than sitting in a 200px column with the other pickers, because it is the only field that carries a disclosure with it — what this basis does NOT examine — and fine print is exactly what that must not become. */ .basis-field { grid-column: 1 / -1; } /* One basis in the catalogue: a stated fact, not a control. Deliberately unlike the selects beside it, so nothing here invites a click that could not change anything. */ .basis-stated { display: block; margin: .2rem 0 .4rem; padding: .5rem .8rem; background: var(--paper-2); border-inline-start: 3px solid var(--accent); font-weight: 400; } .basis-stated b { color: var(--ink-strong); } .basis-packs { display: block; margin-top: .25rem; font-size: .74rem; color: var(--muted); } .basis-packs .en { font-family: var(--font-mono); } /* What the basis does not reach, quoted from its own declaration. Warm rather than muted: it is the sentence an engineer must read before he pays, not a footnote under the fold. */ .basis-gaps { display: block; margin-top: .5rem; padding: .45rem .8rem; font-weight: 400; font-size: .78rem; line-height: 1.55; color: var(--ink); background: var(--warm-soft); border-inline-start: 3px solid var(--warm); } .basis-gaps b { display: block; color: var(--warm); } .basis-gaps[hidden] { display: none; } /* Recognising a citation is not examining a drawing against it — kept visually apart from the gap note above, which is a different kind of statement. */ .basis-reader { display: block; margin-top: .4rem; font-weight: 400; font-size: .76rem; line-height: 1.55; color: var(--muted); } /* The layer profile, full-row for the same reason the basis is: the review is refused without it, and the sentence saying so must not sit in a 200px column as fine print. */ .profile-field { grid-column: 1 / -1; } /* Why the field is not optional. Warm like the basis gaps and for the same reason — it is what an engineer must read before he pays, not a footnote. */ .profile-required { display: block; margin: .4rem 0 .35rem; padding: .45rem .8rem; font-weight: 400; font-size: .78rem; line-height: 1.55; color: var(--ink); background: var(--warm-soft); border-inline-start: 3px solid var(--warm); } /* The three routes to a profile. Muted and listed, because they are instructions to act on rather than a warning to absorb. */ .profile-routes { display: block; font-weight: 400; font-size: .76rem; line-height: 1.55; } .profile-route { display: block; margin-top: .3rem; color: var(--muted); } .profile-route .en { font-family: var(--font-mono); } .actions { display: flex; align-items: center; gap: 1rem; padding: 0 1.6rem 1.6rem; flex-wrap: wrap; } .packs { color: var(--muted); font-size: .8rem; } .spinner { display: none; align-items: center; gap: .6rem; color: var(--muted); font-size: .88rem; } .spinner.on { display: flex; } .spinner::before { content: ''; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner::before { animation-duration: 2.4s; } * { scroll-behavior: auto !important; } } .pill { display: inline-block; padding: .1rem .5rem; border-radius: 10px; font-size: .72rem; font-weight: 700; background: var(--paper-2); color: var(--muted); border: 1px solid var(--line); } .checks { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .35rem; } .checks label { display: flex; align-items: center; gap: .35rem; font-weight: 500; color: var(--ink); font-size: .82rem; } .checks input { width: auto; } /* ============================================================== package (review) */ .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; padding: 1.1rem 1.4rem; } .meta .k, .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .meta .v { font-weight: 600; } .meta form { display: flex; gap: .4rem; align-items: end; } .meta form button { padding: .4rem .9rem; font-size: .8rem; } .tally { display: flex; gap: 1.6rem; flex-wrap: wrap; padding: 1rem 1.4rem; border-top: 1px solid var(--line); } .tally .n { font-size: 1.35rem; font-weight: 700; display: block; line-height: 1.2; } .tally .l { font-size: .74rem; color: var(--muted); } .tally .sev { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .sheet { margin-top: 2.2rem; } .sheet-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; } .sheet-head .n { color: var(--muted); font-size: .82rem; } .disc { margin-top: 1.3rem; } .disc > .t { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .6rem; font-weight: 700; } .finding { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 1rem; overflow: hidden; scroll-margin-top: 1rem; border-inline-start: 4px solid var(--line-strong); } .finding.d-rejected { opacity: .55; filter: grayscale(.65); border-inline-start-color: var(--muted); } .finding.d-rejected:hover, .finding.d-rejected:focus-within { opacity: 1; filter: none; } .finding.d-accepted { border-inline-start-color: var(--ok); } .finding.d-edited { border-inline-start-color: var(--accent); } .finding.d-pending { border-inline-start-color: var(--warm); } .finding.just-saved { box-shadow: 0 0 0 3px var(--accent-line); } .fhead { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; background: var(--paper-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .fhead .rid { font-size: .78rem; color: var(--muted); direction: ltr; unicode-bidi: isolate; } .fhead .clause { font-size: .8rem; } .chip { display: inline-block; padding: .1rem .55rem; border-radius: 10px; font-size: .72rem; font-weight: 700; border: 1px solid var(--line); background: var(--paper-2); color: var(--muted); } .chip.s-accepted { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .chip.s-edited { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .chip.s-rejected { background: var(--paper-2); border-color: var(--line-strong); color: var(--muted); } .chip.s-pending { background: var(--warm-soft); border-color: var(--warm-line); color: var(--warm); } .chip.draft { background: var(--warm-soft); border-color: var(--warm-line); color: var(--warm); } .chip.exp { background: var(--violet-soft); border-color: var(--violet-line); color: var(--violet); } .chip.low { background: var(--paper-2); border-color: var(--line); color: var(--muted); font-weight: 600; } .chip.disp { background: var(--paper); color: var(--ink); } /* Claim class (R-22): what KIND of statement a row is. Colour separates the classes at a glance; the wording, not the colour, is what carries the meaning. */ .chip.claim.c-nonconformity { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); } .chip.claim.c-disclosure { background: var(--paper-2); border-color: var(--line-strong); color: var(--muted); } .chip.claim.c-completeness { background: var(--warm-soft); border-color: var(--warm-line); color: var(--warm); } .chip.claim.c-integrity { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } /* Information asks for no act on the drawing, so it reads quietly — the eye must not stop here looking for something to fix. */ .chip.claim.c-information { background: var(--paper-2); border-color: var(--line); color: var(--muted); } .chip.claim.c-unclassified { background: var(--paper-2); border-color: var(--line); color: var(--muted); border-style: dashed; } /* The claim-class split above the findings list — the headline that replaced one total. */ .claims { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; } .claims .claims-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .claim-stat { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 6px; font-size: .76rem; color: var(--muted); background: var(--paper); } .claim-stat b { display: block; font-size: 1.25rem; line-height: 1.15; color: var(--ink); } .claim-stat.c-nonconformity { border-inline-start: 4px solid var(--bad); } .claim-stat.c-disclosure { border-inline-start: 4px solid var(--line-strong); } .claim-stat.c-completeness { border-inline-start: 4px solid var(--warm); } .claim-stat.c-integrity { border-inline-start: 4px solid var(--accent); } .claim-stat.c-information { border-inline-start: 4px solid var(--line-strong); } .claim-stat.c-unclassified { border-inline-start: 4px dashed var(--line-strong); } .claims-why { font-size: .8rem; color: var(--muted); margin-top: .5rem; } .fhead .grow { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; } .fbody { padding: .8rem .9rem; } .fbody p { margin-bottom: .35rem; } .fbody .loc { font-size: .8rem; color: var(--muted); } /* The element list of a row covering several elements. Never capped, so it scrolls inside its own box rather than pushing the decision form off the screen. */ .fbody details.members { margin: .5rem 0; padding: .4rem .7rem; background: var(--paper-2); border-inline-start: 3px solid var(--line-strong); font-size: .82rem; } .fbody details.members > summary { cursor: pointer; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } .fbody ul.member-list { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 20rem; overflow: auto; } .fbody ul.member-list li { font-family: var(--mono, Consolas, monospace); line-height: 1.6; } /* Arabic labels with Latin values on one line. The LINE is never declared `.en` — that sets direction: ltr over Arabic words and the bidi algorithm then paints the digits of a hex handle away from its letters. Each field is its own isolate so the fields keep their reading order, and each value is a `` so its characters keep theirs. */ .fbody ul.member-list .mfield { unicode-bidi: isolate; } .fbody ul.member-list .mno { color: var(--muted); } .fbody blockquote { margin: .6rem 0; padding: .5rem .8rem; background: var(--paper-2); border-inline-start: 3px solid var(--accent); font-size: .86rem; } /* Not a quotation from the code, so not typeset as one: no quotation block, a muted rule instead of the accent, and the label says which of the two the box carries. A reader who has not read either heading must still not mistake one for the other. */ .fbody .practice { margin: .6rem 0; padding: .5rem .8rem; background: transparent; border: 1px dashed var(--line-strong); border-radius: 3px; font-size: .86rem; } .fbody blockquote .lbl, .fbody .practice .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: block; } .fbody blockquote .lbl .why, .fbody .practice .lbl .why { text-transform: none; letter-spacing: 0; } .fbody .sug { font-size: .86rem; } .fbody .sug b { color: var(--accent); } .fbody .sug-metrics { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin-top: .15rem; } .decide { border-top: 1px dashed var(--line); padding: .8rem .9rem; background: var(--paper); } .edits { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .row2 { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: .7rem; align-items: end; margin-top: .7rem; } .btns { display: flex; gap: .4rem; flex-wrap: wrap; } .btns button { padding: .45rem .9rem; font-size: .82rem; } .btns .ok { background: var(--ok); } .btns .no { background: var(--muted); } .btns .ed { background: var(--accent); color: var(--accent-ink); } .btns .pol { background: var(--violet); } .saved-msg { font-size: .78rem; color: var(--muted); margin-top: .4rem; } .polish-note { font-size: .78rem; color: var(--accent); margin-top: .35rem; } @media (max-width: 820px) { .edits, .row2 { grid-template-columns: 1fr; } } .chain { display: flex; gap: .4rem; flex-wrap: wrap; padding: 1rem 1.4rem; border-top: 1px solid var(--line); align-items: center; } .chain .lead { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); width: 100%; } .chain .step { background: var(--paper); color: var(--muted); border: 1px solid var(--line); padding: .35rem .8rem; font-size: .8rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; } .chain .step:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chain .step.done { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .chain .step.now { background: var(--ink); color: var(--paper); border-color: var(--ink); cursor: default; } .chain .step.now:hover { background: var(--ink); color: var(--paper); } .chain .arrow { color: var(--line-strong); font-weight: 700; } /* The flow arrow follows the reading direction, so the chain never points back. */ .chain .arrow::after { content: "\2192"; } [dir="rtl"] .chain .arrow::after { content: "\2190"; } .chain .next { margin-inline-start: auto; } .clock { padding: 1rem 1.4rem; border-top: 1px solid var(--line); } .clock .big { font-size: 1.1rem; font-weight: 700; } .clock .l { font-size: .76rem; color: var(--muted); } .service { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(280px, 2fr) auto; gap: 1rem; align-items: end; padding: 1.1rem 1.4rem; border-top: 1px solid var(--line); } .service .checks { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .35rem; } .service .checks label { display: flex; align-items: center; gap: .35rem; font-weight: 500; color: var(--ink); font-size: .82rem; } .service .checks input { width: auto; } @media (max-width: 820px) { .service { grid-template-columns: 1fr; } } .delivery { padding: 1.1rem 1.4rem; border-top: 1px solid var(--line); } .delivery ul { margin: .5rem 0 0; padding-inline-start: 1.2rem; font-size: .84rem; } .delivery li.en { direction: ltr; text-align: start; font-family: var(--font-mono); unicode-bidi: isolate; } .delivery .go { background: var(--ok); } /* ================================================================== governance */ .g-head, .p-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .g-head h1, .p-head h1 { font-size: 1.35rem; margin: 0; } .g-stats { display: flex; gap: .9rem; flex-wrap: wrap; margin: 1.2rem 0 1.6rem; } .g-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); border-inline-start: 4px solid var(--accent); padding: .55rem 1rem; min-width: 9rem; } .g-stat b { display: block; font-size: 1.35rem; line-height: 1.2; } .g-stat span { font-size: .76rem; color: var(--muted); } .g-stat.off { border-inline-start-color: var(--bad); } .g-stat.exp { border-inline-start-color: var(--violet); } .g-stat.bar { border-inline-start-color: var(--warm); } .sync { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .sync .hint { color: var(--muted); font-size: .82rem; max-width: 46rem; } table.gov { table-layout: auto; } table.gov td, table.gov th { padding: .45rem .6rem; vertical-align: top; } table.gov td.rule { font-family: var(--font-mono); direction: ltr; text-align: start; unicode-bidi: isolate; font-size: .82rem; word-break: break-all; max-width: 16rem; } table.gov td.num { text-align: center; font-family: var(--font-mono); } table.gov td.rate { text-align: center; font-family: var(--font-mono); font-weight: 700; } tr.under td.rate { color: var(--bad); } tr.d-disabled { background: var(--bad-soft); } tr.d-experimental { background: var(--violet-soft); } tr.d-disabled td.rule, tr.stale td.rule { opacity: .75; } .b-disabled { background: var(--bad); color: var(--paper); } .b-experimental { background: var(--violet); color: var(--paper); } .b-active { background: var(--ok); color: var(--paper); } .thin { color: var(--warm); font-weight: 600; } .why { display: block; font-size: .74rem; color: var(--muted); margin-top: .3rem; max-width: 22rem; } .why time { font-family: var(--font-mono); } .stale-tag { display: inline-block; font-size: .7rem; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 0 .3rem; } .act { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; min-width: 18rem; } .act input[type=text] { flex: 1 1 9rem; min-width: 8rem; font-size: .8rem; } .act button { padding: .32rem .7rem; font-size: .76rem; } .act button.off { background: var(--bad); } .act button.exp { background: var(--violet); } .act button.on { background: var(--ok); } .foot-note { color: var(--muted); font-size: .78rem; margin-top: .9rem; } /* ============================================================= profile draft */ .paste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; padding: 1.4rem 1.6rem; } .paste textarea { min-height: 8rem; font-family: var(--font-mono); font-size: .82rem; direction: ltr; text-align: start; unicode-bidi: isolate; } .paste .opt { font-weight: 400; color: var(--muted); } .paste-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0 1.6rem 1.5rem; } .paste-actions .hint { color: var(--muted); font-size: .82rem; max-width: 44rem; } .chip.on { border-color: var(--accent); color: var(--accent); font-weight: 700; background: var(--accent-soft); } table.map td, table.map th { padding: .45rem .6rem; vertical-align: top; } table.map td.pat { font-family: var(--font-mono); direction: ltr; text-align: start; unicode-bidi: isolate; font-size: .82rem; } table.map td.pat input { font-family: var(--font-mono); direction: ltr; text-align: start; } table.map td.num { text-align: center; font-family: var(--font-mono); } table.map td.tick { text-align: center; } table.map td.tick input { width: auto; transform: scale(1.25); } tr.src-llm { background: var(--violet-soft); } .examples { display: block; font-size: .74rem; color: var(--muted); margin-top: .3rem; direction: ltr; text-align: start; unicode-bidi: isolate; word-break: break-all; max-width: 22rem; } .src { font-size: .74rem; color: var(--muted); display: block; } /* What was measured on a layer, one fact per line (docs/ux-audit-2026-08-13.md §8.1). The list itself follows the page — these are catalogue sentences, not a prompt — while each value the drawing owns is isolated by its own `` in the markup. Declaring the LINE ltr is exactly the mistake §3.3 measured, so nothing here sets `direction`. */ .ev-facts { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .76rem; } .ev-facts li { color: var(--muted); padding: .1rem 0; line-height: 1.6; } .ev-facts .ev-said { color: var(--ink); } .ev-facts .ev-raw { font-family: var(--font-mono); font-size: .72rem; background: var(--paper-2); border-bottom: 1px dotted var(--line); word-break: break-all; } .measured { display: block; margin-top: .35rem; } .measured > b { font-size: .74rem; color: var(--muted); font-weight: 700; } .save-row { display: flex; gap: .9rem; align-items: flex-end; flex-wrap: wrap; margin: 1.2rem 0 .6rem; } .save-row label { flex: 1 1 12rem; } .save-row .tickbox { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); font-weight: 600; } .save-row .tickbox input { width: auto; } /* An Arabic label with Latin names after it. The LINE is not English — declaring it so is what split a hex handle in two on the finding card (docs/ux-audit-2026-08-13.md §3.3) — so only the names carry a direction, through the `` each one is wrapped in. */ .left-out { font-family: var(--font-mono); font-size: .8rem; text-align: start; word-break: break-all; } .left-out-rows { list-style: none; margin: .4rem 0 0; padding: 0; } .left-out-rows > li { margin-bottom: .5rem; } /* ====================================================================== help */ .help-lead { font-size: 1.05rem; border-inline-start: var(--rule) solid var(--accent); padding-inline-start: 1rem; margin-bottom: 2rem; } .toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 2.4rem; box-shadow: var(--shadow-card); } .toc h2 { margin: 0 0 .6rem; } .toc ol { margin: 0; padding-inline-start: 1.4rem; font-size: .9rem; columns: 2; column-gap: 2rem; } .toc li { margin-bottom: .3rem; break-inside: avoid; } @media (max-width: 620px) { .toc ol { columns: 1; } } .help-section { margin-bottom: 3rem; } .help-section > h2 { font-family: var(--font-display); font-size: 1.3rem; text-transform: none; letter-spacing: -.01em; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: .4rem; margin: 0 0 1.1rem; scroll-margin-top: 1rem; } html[lang="ar"] .help-section > h2 { font-family: var(--font-ar); } .help-section p { margin-bottom: .9rem; } .help-section ul, .help-section ol { margin: 0 0 1.1rem; padding-inline-start: 1.4rem; } .help-section li { margin-bottom: .6rem; } .help-block-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--accent); margin-bottom: .4rem; } .help-section table { margin-bottom: .6rem; } .help-note { font-size: .8rem; color: var(--muted); margin-bottom: 1.1rem; } /* The walkthrough invitation. It sits above the prose because it is what a first-time reader should reach for first, so it is given a card of its own rather than a link in a paragraph. */ .tour-invite { background: var(--paper); border: 1px solid var(--line); border-inline-start: var(--rule) solid var(--accent); border-radius: var(--radius); padding: 1.1rem 1.3rem .3rem; margin-bottom: 2.4rem; box-shadow: var(--shadow-card); } .tour-invite > h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: .5rem; } .tour-invite .help-note { display: block; margin-top: .35rem; } a.tour-open { display: inline-block; background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); padding: .45rem 1rem; font-weight: 600; text-decoration: none; } a.tour-open:hover, a.tour-open:focus-visible { background: var(--accent); color: #fff; } .faq details { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--paper); margin-bottom: .6rem; transition: border-color .15s; } .faq details:hover { border-inline-start-color: var(--accent); } .faq details[open] { border-inline-start-color: var(--accent); box-shadow: var(--shadow-card); } .faq summary { cursor: pointer; padding: .7rem .9rem; font-weight: 700; font-size: .95rem; list-style-position: inside; } .faq summary:hover { color: var(--accent); } .faq .answer { padding: 0 .9rem .9rem; font-size: .92rem; } .glossary td:first-child { font-weight: 700; white-space: nowrap; } /* ------------------------------------------------------------------ settings screen */ /* Three tiers, three visual weights: operator settings read as ordinary work, measurement settings carry the warm "this changes a measured number" edge, and the file-only block is deliberately flat and locked-looking. Logical properties throughout, so RTL mirrors. */ .tier { margin: 2rem 0 0; } .tier > h2 { font-size: 1.05rem; margin: 0 0 .3rem; padding-inline-start: .55rem; border-inline-start: var(--rule) solid var(--accent); } .tier.t2 > h2 { border-inline-start-color: var(--warm); } .tier.t3 > h2 { border-inline-start-color: var(--muted); } .tier.t4 > h2 { border-inline-start-color: var(--line-strong); } .tier-body { font-size: .86rem; color: var(--muted); max-width: 62rem; margin: 0 0 1rem; } .tier-body.warn { color: var(--warm); font-weight: 600; } .notice.fp .fp-value { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--accent); background: var(--paper); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); padding: .05rem .4rem; direction: ltr; unicode-bidi: isolate; } .set-paths { font-size: .78rem; color: var(--muted); margin: .5rem 0 0; } .set-paths code { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; } .keylist { font-size: .8rem; margin: .5rem 0 0; padding-inline-start: 1.2rem; } .keylist code { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; } .set-section { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); margin-bottom: 1rem; } .set-section fieldset { border: 0; margin: 0; padding: 0; } .set-section legend, .set-section h3 { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); padding: .6rem .9rem 0; margin: 0; } .set-section legend code, .set-section h3 code { font-family: var(--font-mono); font-size: .72rem; direction: ltr; unicode-bidi: isolate; text-transform: none; letter-spacing: 0; opacity: .72; } /* Arabic is cursive: positive tracking forces gaps between letters that should join, so a section name in Arabic drops the Latin label treatment while the identifier keeps it. */ .set-section legend .set-label { display: inline; letter-spacing: normal; } .t2 .set-section { border-inline-start: var(--rule) solid var(--warm-line); } .t2 .set-section legend { color: var(--warm); } .set-section.locked { border-inline-start: var(--rule) solid var(--line-strong); } .set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .1rem 1.2rem; padding: .6rem .9rem; } .set-row { padding: .45rem 0; border-block-end: 1px dotted var(--line); } .set-row.wide-row { grid-column: 1 / -1; } .set-row.drift { background: var(--warm-soft); border-radius: var(--radius-sm); } .set-row label { margin-bottom: .18rem; } /* What the row is CALLED leads; the identifier follows it, quieter (ux-audit §7.1). The label is page-language prose and therefore sets no `direction` — only the key does, because only the key is Latin. */ .set-label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-strong); } .set-key { font-family: var(--font-mono); font-size: .7rem; font-weight: 400; color: var(--muted); direction: ltr; unicode-bidi: isolate; text-transform: none; } .set-row input[type=text], .set-row select, .set-row textarea { width: 100%; } .set-row textarea { font-family: var(--font-mono); font-size: .8rem; direction: ltr; text-align: start; unicode-bidi: isolate; } .set-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .25rem 0 0; } .eff { font-size: .68rem; border-radius: 999px; padding: .04rem .45rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .eff-live { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); } .eff-restart { color: var(--muted); background: var(--paper-2); } .eff.json { color: var(--violet); border-color: var(--violet-line); background: var(--violet-soft); } .eff.pending { color: var(--warm); border-color: var(--warm-line); background: var(--warm-soft); font-weight: 700; } /* The provider-key table's two states. Their own classes and not `pending`/`eff-live`: an absent API key is not a restart owed, and the settings page's own tests read `pending` as exactly that. */ .eff.key-set { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); } .eff.key-unset { color: var(--warm); border-color: var(--warm-line); background: var(--warm-soft); } label.ran { display: inline; font-size: .68rem; } input.ran { width: auto; min-width: 8rem; font-size: .72rem; padding: .1rem .35rem; opacity: .8; } .set-commit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .9rem; background: var(--paper-2); border-block-start: 1px solid var(--line); border-end-start-radius: var(--radius); border-end-end-radius: var(--radius); } .set-commit input[type=text] { flex: 1 1 14rem; } .set-commit label { font-size: .76rem; } .set-commit label.confirm { flex: 1 1 100%; display: flex; align-items: flex-start; gap: .4rem; color: var(--warm); font-weight: 700; font-size: .8rem; } .set-commit label.confirm input { width: auto; transform: scale(1.2); } table.locked-table td, table.locked-table th, table.hist td, table.hist th { padding: .4rem .6rem; vertical-align: top; } table.locked-table td input, table.hist td input { width: 100%; min-width: 8rem; font-family: var(--font-mono); font-size: .76rem; direction: ltr; text-align: start; unicode-bidi: isolate; background: var(--paper-2); cursor: text; } table.hist td:last-child input { font-family: inherit; direction: inherit; } table.locked-table td.why-cell { font-size: .78rem; color: var(--muted); max-width: 34rem; } table.hist time { font-family: var(--font-mono); font-size: .74rem; } .why-shared { font-size: .8rem; color: var(--muted); margin: .3rem .9rem .6rem; max-width: 62rem; } /* A claim class at zero is printed, not omitted — the package strip states all five so it can say "no potential nonconformities", which is the client's actual question and the normal result. Dimmed rather than hidden: present-but-quiet reads as a measured zero, while an absent row reads as a class nobody looked at. Placed after the .c-* rules so it wins. */ .claim-stat.is-zero { border-inline-start-color: var(--line); } .claim-stat.is-zero b { color: var(--muted); } /* The lifecycle chain's explanatory lines: body size made them compete with the controls they describe. */ .chain .l { font-size: .76rem; color: var(--muted); }