/* COSIGNA verifier — brand tokens v0.1.1 S5 Canonical COSIGNA ink/paper/gold palette. Desktop-first (1280px) + responsive down to 360px. WCAG AA contrast both themes. */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ /* WP2 complete: tokens.css (linked in before this file) supplies every canonical token AND the legacy-alias block (--ink, --paper, --bg, --accent, --grad, the --ag- family), so the plain per-file forwarders that used to live here are gone. Only the PROTECTED integrity aliases remain: their !important is an alias-level cascade lock (a tenant overriding --success/--danger directly still loses) that tokens.css's non-!important legacy aliases do NOT replicate. --pending has no tokens.css legacy alias, so it is defined here. */ :root { --success: var(--verdict-ok, #0F766E) !important; /* PROTECTED — alias lock: a tenant overriding --success directly still loses */ --danger: var(--verdict-danger, #B91C1C) !important; /* PROTECTED — alias lock */ --pending: var(--verdict-pending, #92520A) !important; /* v0.200 P0-5: PROTECTED — 3rd integrity state alias lock */ --ag-success: var(--verdict-ok, #0F766E) !important; /* PROTECTED — alias lock */ --ag-danger: var(--verdict-danger, #B91C1C) !important; /* PROTECTED — alias lock */ } /* Dark mode: only the PROTECTED integrity aliases keep an explicit per-file !important lock (dark variants). All plain surface/text/border/accent dark forwarders are removed — tokens.css's dark blocks + legacy aliases resolve them identically. */ [data-theme="dark"] { --success: var(--verdict-ok, #5bbf8e) !important; /* PROTECTED dark variant — alias lock */ --danger: var(--verdict-danger,#e8736b) !important; /* PROTECTED dark variant — alias lock */ --pending: var(--verdict-pending,#d97706) !important; /* v0.200 P0-5: PROTECTED dark variant — alias lock */ --ag-success: var(--verdict-ok, #5bbf8e) !important; /* PROTECTED dark variant — alias lock */ --ag-danger: var(--verdict-danger,#e8736b) !important; /* PROTECTED dark variant — alias lock */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --success: var(--verdict-ok, #5bbf8e) !important; /* PROTECTED dark variant — alias lock */ --danger: var(--verdict-danger,#e8736b) !important; /* PROTECTED dark variant — alias lock */ --pending: var(--verdict-pending,#d97706) !important; /* v0.200 P0-5: PROTECTED dark variant — alias lock */ --ag-success: var(--verdict-ok, #5bbf8e) !important; /* PROTECTED dark variant — alias lock */ --ag-danger: var(--verdict-danger,#e8736b) !important; /* PROTECTED dark variant — alias lock */ } } /* ── Reset & base ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); /* v0.532.0 D-5b WP4: aurora ABOVE base --bg; WP5: --material-body-bg paper shields body text from the aurora (AA contrast) */ background: var(--material-body-bg), var(--material-aurora), var(--bg); background-repeat: no-repeat; background-attachment: fixed; color: var(--text); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; } /* ── App shell ───────────────────────────────────────────────────────────── */ .app { width: 100%; max-width: 1200px; padding: var(--s4) var(--s4) var(--s12); display: flex; flex-direction: column; gap: var(--s6); } /* ── Header ──────────────────────────────────────────────────────────────── */ /* W2-A A2: .v-header bespoke chrome (background, border-radius, padding, text-align, box-shadow) deleted — these overrode the governed .cg-topbar--app chrome at equal specificity. position:relative is needed for dropdown anchor on .v-header — kept. .v-header__top first instance (justify-content:space-between) deleted — governed by topbar.css three-column grid (brand | title | actions). bare .brand-lockup (height:36px, order:-1) deleted — governed by topbar.css .cg-topbar--app .brand-lockup (44px @desktop). .v-header__logo font-size:32px (BASE rule) deleted — was winning over the governed .cg-topbar__title via equal-specificity + load-order (the plan's ROOT CAUSE). Governed by topbar.css .cg-topbar__title (clamp(20px,3.5vw,30px)). */ .v-header { position: relative; /* kept: anchors dropdown menus (lang-flag etc.) */ } .v-header__logo { /* W2-A A2: font-size removed — governed by topbar.css .cg-topbar__title */ font-weight: 800; /* v0.311.0: 700→800, match app heading standard */ letter-spacing: 0.04em; color: var(--on-ink, #FAF8F3); text-align: center; } .v-header__sub { font-size: 14px; font-weight: 400; /* v0.311.0: second line = weight 400 (Title+SecondLine pattern) */ color: var(--on-ink, #FAF8F3); /* CRITICAL: keep --on-ink (NOT --text-muted: #6B7280 fails WCAG on navy ~2.9:1) */ /* v0.532.0 D-5b WP5: removed opacity:0.75 — the WP1 chrome sheen lightened the topbar bg, so 0.75 near-white dropped to 3.75:1; full #FAF8F3 = 5.24 (muted by size/weight, not alpha) */ text-align: center; /* v0.311.0: consistent with .v-header__logo alignment */ margin-top: var(--s1); } /* v0.67.1 theme-toggle-removed: .v-header__theme-btn rules deleted; OS prefers-color-scheme drives theme */ /* v0.67.0 flag-only language (dark-header pill; menu opens below, right-aligned) */ /* v0.67.1 theme-toggle-removed: flag pill now sits flush at the clean top-right (no theme btn to dodge) */ .lang-flag { /* v0.68.0: in-flow within .v-header__top (relative anchors the dropdown menu) */ position: relative; } .lang-flag__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; /* v0.67.1: pad to a ≥44×44px touch target (was 5px 9px) so the flag pill never collides/disappears on mobile */ padding: 10px 14px; min-width: 44px; min-height: 44px; font-size: 15px; line-height: 1; color: var(--on-ink, #FAF8F3); } .lang-flag__caret { font-size: 9px; opacity: .6; } .lang-flag__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--field, #fff); border: 1px solid var(--border, #e3ddd0); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(20,37,61,.14); min-width: 150px; } .lang-flag__menu[hidden] { display: none; } .lang-flag__menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--brand-ink, #14253D); cursor: pointer; } .lang-flag__menu button:hover { background: var(--surface-ivory, #F3EFE6); } /* ── ag-card ─────────────────────────────────────────────────────────────── */ .ag-card { /* v0.532.0 D-5b WP4: material card glass — verifier's card primitive (see docs/MOCKUP_ux_revamp_extended_2026-07-19.html surface-2, the "Load the ceremony files" panel). */ background: var(--material-card-bg, linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.52))); border: 1px solid var(--material-card-border, rgba(255,255,255,.72)); border-radius: var(--material-card-radius, 14px); backdrop-filter: var(--material-card-blur, blur(16px) saturate(1.45)); -webkit-backdrop-filter: var(--material-card-blur, blur(16px) saturate(1.45)); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); box-shadow: var(--material-card-rim, inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px -12px rgba(20,37,61,.30)); } .ag-card__title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: var(--s2); color: var(--text); } /* ── Drop-zone pair ──────────────────────────────────────────────────────── */ .drop-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } @media (max-width: 680px) { .drop-pair { grid-template-columns: 1fr; } } .drop-zone { border: 2px dashed var(--border); border-radius: var(--ag-radius-xl); padding: var(--s8) var(--s4); text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; display: flex; flex-direction: column; align-items: center; gap: var(--s3); min-height: 160px; justify-content: center; position: relative; outline: none; } .drop-zone:hover, .drop-zone:focus-visible { border-color: var(--accent); background: rgba(195,161,75,.06); } .drop-zone.drag-over { border-color: var(--accent); background: rgba(195,161,75,.10); } .drop-zone.loaded { border-color: var(--success); border-style: solid; background: rgba(15,118,110,.04); } .drop-zone__icon { font-size: 40px; line-height: 1; } .drop-zone__label { font-size: 15px; font-weight: 600; color: var(--text); } .drop-zone__hint { font-size: 13px; color: var(--text-muted); } .drop-zone__filename { font-size: 12px; font-family: var(--font-mono); color: var(--success); font-weight: 600; word-break: break-all; } .drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } /* ── URL load panel ──────────────────────────────────────────────────────── */ .url-panel { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--ag-radius-lg); } .url-panel__sep { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; padding: var(--s2) 0; } .ag-input { flex: 1; padding: 10px var(--s4); border: 1.5px solid var(--border); border-radius: var(--ag-radius-md); font-family: var(--font); font-size: 14px; background: var(--field); color: var(--text); outline: none; transition: border-color 0.2s; } .ag-input:focus { border-color: var(--accent); } .ag-input::placeholder { color: var(--text-muted); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 12px var(--s6); border: none; border-radius: var(--ag-radius-lg); font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s; text-decoration: none; white-space: nowrap; } .ag-btn:active { transform: scale(0.97); } .ag-btn:disabled { opacity: 0.42; cursor: not-allowed; } .ag-btn--primary { background: var(--grad); color: var(--on-ink, #FAF8F3); box-shadow: 0 2px 12px rgba(20,37,61,.25); } .ag-btn--primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(20,37,61,.38); } .ag-btn--ghost { background: transparent; border: 1.5px solid var(--border); color: var(--text); } .ag-btn--ghost:not(:disabled):hover { background: var(--surface-2); } .ag-btn--sm { font-size: 13px; min-height: 36px; padding: 8px var(--s4); } /* ── Badges ──────────────────────────────────────────────────────────────── */ .ag-badge { display: inline-flex; align-items: center; gap: var(--s1); padding: 3px var(--s3); border-radius: var(--ag-radius-full); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .ag-badge--success { background: #d6ede5; color: #1a5c41; } /* skin tints — no token yet */ .ag-badge--danger { background: #fce8e7; color: var(--verdict-danger-border, #8c1d18); } .ag-badge--warning { background: #fef3cd; color: var(--state-attestation, #7a4400); } .ag-badge--info { background: #e8edf5; color: var(--brand-ink, #14253D); } .ag-badge--neutral { background: var(--surface-2); color: var(--text-muted); } [data-theme="dark"] .ag-badge--success { background: var(--state-ok-dark-surface, #143d2b); color: var(--verdict-ok, #5bbf8e); } [data-theme="dark"] .ag-badge--danger { background: var(--state-danger-dark-bg, #3d1614); color: var(--verdict-danger, #e8736b); } [data-theme="dark"] .ag-badge--warning { background: #3d2600; color: var(--brand-gold, #d8b864); } [data-theme="dark"] .ag-badge--info { background: var(--surface-ivory, #1d3147); color: #a8bdd4; } [data-theme="dark"] .ag-badge--neutral { background: var(--border-default, #27405e); color: var(--text-muted, #8896a8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ag-badge--success { background: var(--state-ok-dark-surface, #143d2b); color: var(--verdict-ok, #5bbf8e); } :root:not([data-theme="light"]) .ag-badge--danger { background: var(--state-danger-dark-bg, #3d1614); color: var(--verdict-danger, #e8736b); } :root:not([data-theme="light"]) .ag-badge--warning { background: #3d2600; color: var(--brand-gold, #d8b864); } :root:not([data-theme="light"]) .ag-badge--info { background: var(--surface-ivory, #1d3147); color: #a8bdd4; } :root:not([data-theme="light"]) .ag-badge--neutral { background: var(--border-default, #27405e); color: var(--text-muted, #8896a8); } } /* ── Verify button row ───────────────────────────────────────────────────── */ .verify-row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; } .verify-row .ag-btn { min-width: 200px; } /* ── Results section ─────────────────────────────────────────────────────── */ .results { display: none; flex-direction: column; gap: var(--s6); animation: agFadeIn 0.4s ease; } .results.visible { display: flex; } /* ── Verdict banner ──────────────────────────────────────────────────────── */ .verdict { border-radius: var(--ag-radius-xl); padding: var(--s6) var(--s8); display: flex; align-items: center; gap: var(--s6); animation: agFadeIn 0.35s ease; } .verdict__icon { font-size: 52px; flex-shrink: 0; line-height: 1; } .verdict__body { flex: 1; } .verdict__title { font-size: 22px; font-weight: 800; /* Title = big + 800 (Title+SecondLine pattern) */ margin-bottom: var(--s1); line-height: 1.2; /* alignment set per verdict state (all coloured banners → text starts at .verdict__body left) */ } .verdict__detail { font-size: 14px; font-weight: 400; /* v0.311.0: second line = weight 400 (Title+SecondLine pattern) */ /* CRITICAL CONTRAST RULE: verdict banners are coloured/ink backgrounds. Use white + opacity ≥0.90 — NEVER --text-muted (#6B7280 → ~2.9:1 on navy → WCAG FAIL). */ color: #fff; /* white on coloured verdict bg (matches verdict--ok/broken/etc. intent) */ opacity: 0.9; /* ≥0.70 required; 0.9 gives ~14:1 on navy, ~12:1 on teal */ line-height: 1.5; } /* ── Eight canonical verdict states (all must remain present) ───────────── WP0: every state carries a NON-COLOUR cue so that a colour re-skin or greyscale print can NEVER make a BROKEN/MISMATCH look OK. Two axes of non-colour distinction: 1. ::before content glyph (class-bound; survives palette swaps) 2. border-style (solid for OK/open; dashed for failure states) The ::before is position:absolute so it doesn't break the flex layout. */ .verdict { position: relative; } /* anchor for ::before badge */ /* OK — loop closed and sound */ .verdict--ok { background: var(--success); /* rewired from hardcoded #0F766E (WP0) → var(--verdict-ok) via alias */ color: #fff; /* white text on coloured verdict bg — intentional, not a brand token */ border: 3px solid rgba(255,255,255,0.25); /* solid — non-colour shape cue (WP0) */ } .verdict--ok::before { content: '\2714'; /* ✔ CHECK MARK — non-colour shape cue (WP0) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; font-weight: 900; line-height: 1; opacity: 0.7; pointer-events: none; } /* BROKEN_LINK / DUPLICATE_SIGNER — chain tampered or structurally invalid */ .verdict--broken { background: var(--danger); /* rewired from hardcoded #B91C1C (WP0) → var(--verdict-danger) via alias */ color: #fff; /* white text on coloured verdict bg — intentional */ border: 3px dashed var(--verdict-danger-border, #8c1d18); /* DASHED — shape cue (WP0); border uses PROTECTED dark variant */ } .verdict--broken::before { content: '\2716'; /* ✖ HEAVY MULTIPLICATION X — non-colour shape cue (WP0) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; font-weight: 900; line-height: 1; opacity: 0.7; pointer-events: none; } /* NOT_CLOSED / SCHEMA_ERROR — ring not yet complete, or malformed JSON */ /* v0.200 P0-5: rewired from unlocked --state-warning → locked --pending (--verdict-pending) */ .verdict--not-closed { background: var(--pending, #92520A); /* v0.200 P0-5: LOCKED via --pending alias (!important chain) */ color: #fff; /* white text on coloured verdict bg — intentional */ border: 3px dashed rgba(255,255,255,0.35); /* v0.200 P0-5: dashed — non-colour shape cue distinguishes from OK solid */ } .verdict--not-closed::before { content: '\1F513'; /* 🔓 OPEN LOCK — non-colour shape cue (WP0) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; line-height: 1; opacity: 0.7; pointer-events: none; } /* DOC_HASH_MISMATCH / PDF_MISMATCH — crime-grade wrong document */ .verdict--doc-mismatch { background: var(--danger); /* rewired from hardcoded #B91C1C (WP0) → var(--verdict-danger) via alias */ color: #fff; /* white text on coloured verdict bg — intentional */ border: 4px dashed var(--verdict-danger-border, #8c1d18); /* DASHED 4px — distinct from broken's 3px dashed (WP0) */ } .verdict--doc-mismatch::before { content: '\26D4'; /* ⛔ NO ENTRY — ✗-in-octagon, distinct from plain ✖ of broken (WP0) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; line-height: 1; opacity: 0.7; pointer-events: none; } /* MISSING_ATTESTATION — signer refused predecessor */ .verdict--attestation { background: var(--state-attestation, #7a4400); color: #fff; /* white text on coloured verdict bg — intentional */ border: 3px dashed #5a3200; /* DASHED — attestation refusal is also a failure shape (WP0) */ /* NOTE: #5a3200 = deep attestation-brown border — no token defined; FLAGGED for Opus */ } .verdict--attestation::before { content: '\2716'; /* ✖ HEAVY MULTIPLICATION X — non-colour shape cue (WP0) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; font-weight: 900; line-height: 1; opacity: 0.7; pointer-events: none; } @media (max-width: 600px) { .verdict { flex-direction: column; text-align: center; gap: var(--s3); } .verdict__title { font-size: 18px; } .verdict__icon { font-size: 40px; } } /* ── Chain walk (timeline) ───────────────────────────────────────────────── */ .chain-walk { display: flex; flex-direction: column; gap: 0; } .chain-block { display: flex; gap: var(--s4); position: relative; animation: agFadeIn 0.3s ease both; } /* Connecting line between blocks */ .chain-block:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 44px; bottom: 0; width: 2px; background: var(--border); z-index: 0; } .chain-block--ok:not(:last-child)::after { background: rgba(15,118,110,.4); } /* tinted verdict-ok — rgba; no color-mix needed */ .chain-block--broken:not(:last-child)::after { background: rgba(185,28,28,.4); } /* tinted verdict-danger */ .chain-block--refused:not(:last-child)::after { background: rgba(122,68,0,.4); } /* tinted attestation */ /* Stagger fade-in per block */ .chain-block:nth-child(1) { animation-delay: 0.05s; } .chain-block:nth-child(2) { animation-delay: 0.10s; } .chain-block:nth-child(3) { animation-delay: 0.15s; } .chain-block:nth-child(4) { animation-delay: 0.20s; } .chain-block:nth-child(5) { animation-delay: 0.25s; } .chain-block:nth-child(n+6) { animation-delay: 0.28s; } .chain-block__icon-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; z-index: 1; } .chain-block__role-icon { width: 40px; height: 40px; border-radius: var(--ag-radius-full); background: var(--surface-2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .chain-block--ok .chain-block__role-icon { border-color: var(--success); background: rgba(15,118,110,.1); } .chain-block--broken .chain-block__role-icon { border-color: var(--danger); background: rgba(185,28,28,.1); } .chain-block--refused .chain-block__role-icon { border-color: var(--state-attestation, #7a4400); background: rgba(122,68,0,.1); } .chain-block__content { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--ag-radius-lg); padding: var(--s4); margin-bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .chain-block--ok .chain-block__content { border-color: rgba(15,118,110,.3); } /* tinted verdict-ok */ .chain-block--broken .chain-block__content { border-color: rgba(185,28,28,.4); } /* tinted verdict-danger */ .chain-block--refused .chain-block__content { border-color: rgba(122,68,0,.4); } /* tinted attestation */ .chain-block__header { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .chain-block__signer { font-weight: 700; font-size: 15px; } .chain-block__ts { font-size: 12px; color: var(--text-muted); margin-left: auto; } .chain-block__face { display: flex; align-items: center; gap: var(--s3); } /* v0.402.0 COSignPad — self-declared signature row in the chain walk (honest label + optional thumbnail). */ .chain-block__signpad { display: flex; align-items: center; gap: var(--s3, 12px); flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border, #E3DCCC); } .chain-block__signpad-label { font-size: 12px; color: var(--text-muted, #6B7280); line-height: 1.4; } .chain-block__signpad-img { height: 40px; max-width: 160px; object-fit: contain; background: #fff; border: 1px solid var(--border, #E3DCCC); border-radius: var(--ag-radius-sm, 4px); padding: 3px; flex-shrink: 0; } .chain-block__face-img { width: 44px; height: 44px; border-radius: var(--ag-radius-full); object-fit: cover; border: 2px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .chain-block__face-placeholder { width: 44px; height: 44px; border-radius: var(--ag-radius-full); background: var(--surface-2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .chain-block__checks { display: flex; flex-direction: column; gap: var(--s2); } .check-row { display: flex; align-items: flex-start; gap: var(--s2); font-size: 13px; line-height: 1.4; } .check-row__label { color: var(--text-muted); min-width: 120px; flex-shrink: 0; font-weight: 500; } .check-row__value { font-family: var(--font-mono); font-size: 12px; word-break: break-all; } .check-ok { color: var(--success); font-weight: 700; } .check-fail { color: var(--danger); font-weight: 700; } .check-skip { color: var(--text-muted); font-style: italic; } /* ── Hash comparison panel ───────────────────────────────────────────────── */ .hash-panel { display: flex; flex-direction: column; gap: var(--s4); } .hash-row { display: flex; flex-direction: column; gap: var(--s2); } .hash-row__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .hash-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--ag-radius-md); padding: var(--s3) var(--s4); font-family: var(--font-mono); font-size: 12px; word-break: break-all; color: var(--text-muted); cursor: pointer; transition: color 0.15s; user-select: all; } .hash-block:hover { color: var(--text); } .hash-block .hash-short { font-weight: 700; color: var(--text); } .hash-match-indicator { display: flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; padding: var(--s3) var(--s4); border-radius: var(--ag-radius-md); } .hash-match-indicator--ok { background: #d6ede5; /* skin ok-tint — no dedicated token yet */ color: #1a5c41; /* skin ok-text — no dedicated token yet */ border: 1px solid rgba(15,118,110,.4); /* tinted verdict-ok */ } .hash-match-indicator--fail { background: #fce8e7; /* skin fail-tint */ color: var(--verdict-danger-border, #8c1d18); /* PROTECTED dark border used as fail-text */ border: 1px solid rgba(185,28,28,.4); /* tinted verdict-danger */ } [data-theme="dark"] .hash-match-indicator--ok { background: var(--state-ok-dark-surface, #143d2b); border-color: var(--verdict-ok, #0F766E); color: var(--verdict-ok, #5bbf8e); } [data-theme="dark"] .hash-match-indicator--fail { background: var(--state-danger-dark-bg, #3d1614); border-color: var(--verdict-danger, #B91C1C); color: var(--verdict-danger, #e8736b); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hash-match-indicator--ok { background: var(--state-ok-dark-surface, #143d2b); border-color: var(--verdict-ok, #0F766E); color: var(--verdict-ok, #5bbf8e); } :root:not([data-theme="light"]) .hash-match-indicator--fail { background: var(--state-danger-dark-bg, #3d1614); border-color: var(--verdict-danger, #B91C1C); color: var(--verdict-danger, #e8736b); } } .hash-chars { display: flex; flex-wrap: wrap; gap: 1px; margin-top: var(--s2); font-family: var(--font-mono); font-size: 10px; } .hash-char { width: 14px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 2px; } .hash-char--match { background: rgba(15,118,110,.2); color: var(--success); font-weight: 700; } /* tinted verdict-ok */ .hash-char--mismatch { background: rgba(185,28,28,.2); color: var(--danger); font-weight: 700; } /* tinted verdict-danger */ /* ── OpenTimestamps panel ────────────────────────────────────────────────── */ .anchor-panel { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--surface-2); border-radius: var(--ag-radius-md); border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); } .anchor-panel__icon { font-size: 20px; flex-shrink: 0; } .anchor-panel__text { line-height: 1.5; } .anchor-panel__text strong { color: var(--text); } /* ── Chain summary strip ─────────────────────────────────────────────────── */ .chain-summary { display: flex; gap: var(--s4); flex-wrap: wrap; } .chain-summary__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .chain-summary__value { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; } .chain-summary__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; } /* ── Spinner ─────────────────────────────────────────────────────────────── */ .spinner { width: 24px; height: 24px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: var(--ag-radius-full); animation: agSpin 0.8s linear infinite; flex-shrink: 0; } /* ── Error / info inline ─────────────────────────────────────────────────── */ .inline-error { font-size: 13px; color: var(--danger); display: flex; align-items: center; gap: var(--s2); } .inline-info { font-size: 13px; color: var(--text-muted); } /* ── Section title ───────────────────────────────────────────────────────── */ .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--s3); } /* ── Face hash mono ──────────────────────────────────────────────────────── */ .mono-hash { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); word-break: break-all; } .mono-hash .short { font-weight: 700; color: var(--text); } /* ── CTA footer ──────────────────────────────────────────────────────────── */ .cta-footer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ag-radius-xl); padding: var(--s6) var(--s8); display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; box-shadow: var(--shadow); } .cta-footer__body { flex: 1; min-width: 220px; } .cta-footer__heading { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: var(--s2); } .cta-footer__copy { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .cta-footer__btn { display: inline-flex; align-items: center; gap: var(--s2); padding: 10px var(--s6); border: 1.5px solid var(--accent); border-radius: var(--ag-radius-lg); font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--accent); background: transparent; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; flex-shrink: 0; } .cta-footer__btn:hover { background: rgba(195,161,75,.08); } [data-theme="dark"] .cta-footer__btn:hover { background: rgba(216,184,100,.10); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-footer__btn:hover { background: rgba(216,184,100,.10); } } @media (max-width: 600px) { .cta-footer { flex-direction: column; gap: var(--s4); padding: var(--s6); } } /* ── Animations ──────────────────────────────────────────────────────────── */ @keyframes agFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes agSpin { to { transform: rotate(360deg); } } @keyframes agPulse { 0%,100% { opacity:1; } 50% { opacity:.5; } } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (min-width: 769px) { .app { padding: var(--s8) var(--s6) var(--s12); } /* W2-A A2: .v-header { padding } deleted — governed by topbar.css .cg-topbar--app */ /* W2-A A2: .v-header__logo { font-size: 28px } deleted (rule #2 of 4) — governed by topbar.css .cg-topbar__title */ /* W2-A A2: bare .brand-lockup { height: 34px } deleted (rule #3 of 4) — governed by topbar.css .cg-topbar--app .brand-lockup */ } @media (max-width: 480px) { .hash-chars { font-size: 9px; } .hash-char { width: 12px; height: 16px; } .chain-block__checks .check-row { flex-direction: column; gap: 2px; } .check-row__label { min-width: unset; } .chain-summary { gap: var(--s6); } .url-panel { flex-direction: column; align-items: stretch; } } /* v0.66.0 eIDAS it-1b qsig: qualified professional signatures section ──────── */ .qsig-list { display: flex; flex-direction: column; gap: var(--s4); } .qsig-entry { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ag-radius-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .qsig-badge { display: inline-flex; flex-direction: column; align-self: flex-start; gap: 2px; padding: var(--s2) var(--s4); border-radius: var(--ag-radius-md); background: rgba(15,118,110,.10); /* tinted verdict-ok */ border: 1px solid var(--success); } .qsig-badge__label { font-size: 14px; font-weight: 700; color: var(--success); display: flex; align-items: center; gap: var(--s2); } .qsig-badge__sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .qsig-selfasserted { font-size: 13px; font-style: italic; color: var(--text-muted); line-height: 1.5; padding: var(--s2) var(--s3); border-left: 3px solid var(--gold); background: rgba(195,161,75,.06); border-radius: 0 var(--ag-radius-md) var(--ag-radius-md) 0; } .qsig-kv { display: flex; flex-direction: column; gap: var(--s2); } .qsig-kv__row { display: flex; align-items: flex-start; gap: var(--s2); font-size: 13px; line-height: 1.4; } .qsig-kv__label { color: var(--text-muted); min-width: 120px; flex-shrink: 0; font-weight: 500; } .qsig-kv__value { color: var(--text); font-weight: 600; word-break: break-word; } [data-theme="dark"] .qsig-badge { background: rgba(91,191,142,.12); } /* tinted verdict-ok-dark */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qsig-badge { background: rgba(91,191,142,.12); } /* tinted verdict-ok-dark */ } @media (max-width: 480px) { .qsig-kv__row { flex-direction: column; gap: 2px; } .qsig-kv__label { min-width: unset; } } /* v0.1.4 — live version chip (verifier has no camera; no Center Stage note here) */ .app-version { position: fixed; right: 8px; bottom: 6px; font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); opacity: .65; pointer-events: none; z-index: 5; } /* ═══ v0.116 S-verifier (gated rework, founder-validated plan) ═══ */ /* W2-A A2: .v-header__top .brand-home { order:-1 } deleted — the verifier markup has been migrated to the governed .cg-topbar__brand layout (three-column grid); the flex order hack is no longer needed. */ /* W2-A A2: .v-header__lang-flag { position:absolute } deleted — flag misalignment fix; the governed .cg-topbar__actions slot (grid column 3) positions the flag correctly without absolute positioning. */ /* W2-A A2: .v-header__top restatement (justify-content:center + .brand-home reset) deleted — governed by topbar.css .cg-topbar--app three-column grid. .v-header__top .brand-lockup height:36px deleted (rule #3 of 4) — governed by topbar.css (44px). .v-header__logo font-size:32px (rule #4 of 4, @769) deleted — governed by topbar.css .cg-topbar__title. */ /* v0.312.0 Sxx-verify: Q3 — .ag-btn--link: secondary text-link style for the cert link inside the ring-summary card (State C). Does NOT cross-reuse .owner-strip__links a. */ .ag-btn--link { display: inline; background: none; border: none; padding: 0; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--accent, #C3A14B); text-decoration: underline; cursor: pointer; white-space: nowrap; } .ag-btn--link:hover { color: var(--ink, #14253D); } /* v0.312.0 Sxx-verify: Q5 — signee-map
mobile behaviour. Desktop (>680px): summary hidden, details always open. Mobile (≤680px): summary visible, details collapsed by default (reuses existing 680px breakpoint). */ .signee-map-details > .signee-map-details__summary { display: none; /* desktop: always-open, no toggle needed */ } @media (max-width: 680px) { .signee-map-details > .signee-map-details__summary { display: list-item; /* show toggle on mobile */ } .signee-map-details:not([open]) > *:not(summary) { display: none; /* collapse content when closed */ } } /* Verdict seal — the médaillon (Seal B, founder-ruled 2026-06-11) + its failure variants */ .verdict__icon svg { width: 68px; height: 68px; display: block; } /* #E8D9A8 = warm cream gold — dateline on coloured verdict bg; FLAGGED: no canonical token; skin literal kept */ .verdict__dateline { font-size: 13.5px; font-weight: 600; color: #E8D9A8; margin: 3px 0 7px; } /* Signature summary — document row + stat grid */ .chain-summary__doc { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; word-break: break-word; } .chain-summary__doc-badge { font-size: 12.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; } .chain-summary__doc-badge--ok { background: rgba(15,118,110,.12); color: var(--verdict-ok, #0F766E); } .chain-summary__doc-badge--fail { background: rgba(185,28,28,.12); color: var(--verdict-danger, #B91C1C); } /* Technical-detail folds (hash panel + per-block) — quiet by design (R4: fold; geeks will find it) */ /* v0.W3-B B2+B3: unified boxed disclosure pattern for tech-details and legal-note-accordion summaries */ .tech-details { margin-top: var(--s3); } .tech-details > summary, .legal-note-accordion > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--ag-radius-md); background: var(--surface-2); font-weight: 600; color: var(--text-muted); } .tech-details > summary { font-size: 12.5px; } .legal-note-accordion { margin-bottom: var(--s4); } /* v0.W3-B B3: moved from inline style on
*/ .legal-note-accordion > summary { font-size: 14px; } .tech-details > summary::-webkit-details-marker, .legal-note-accordion > summary::-webkit-details-marker { display: none; } /* Chevron replaces the old ▸ ::before — rotates on [open] */ .tech-details > summary::after, .legal-note-accordion > summary::after { content: '›'; font-size: 18px; line-height: 1; transform: rotate(0deg); transition: transform .2s ease; flex-shrink: 0; } .tech-details[open] > summary::after, .legal-note-accordion[open] > summary::after { transform: rotate(90deg); } .tech-details > .tech-details__body { margin-top: var(--s3); } /* Chain walk role marks (emoji retired on the results side, R6 verifier-only) */ .chain-block__role-icon svg { width: 26px; height: 26px; display: block; } /* v0.117 S-sovereignty: chain-valid-but-document-unchecked — honest amber, never the full green */ /* v0.200 P0-5: rewired from unlocked --state-warning-alt → locked --pending (--verdict-pending) */ /* WP0: dashed border — non-colour shape cue (distinct from OK solid; consistent with other pending states) */ .verdict--unchecked { background: var(--pending, #92520A); /* v0.200 P0-5: LOCKED via --pending alias (!important chain) */ color: #fff; /* white text on coloured verdict bg — intentional */ border: 3px dashed rgba(255,255,255,0.35); /* v0.200 P0-5: dashed — non-colour shape cue */ } .verdict--unchecked::before { content: '\003F'; /* ? — document pending, non-colour shape cue (WP0) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; font-weight: 900; line-height: 1; opacity: 0.7; pointer-events: none; } /* v0.200 P0-5: .verdict--unanchored — chain valid, no Bitcoin anchor (served verifier cv-unanchored) */ /* LOCKED: uses --pending alias → --verdict-pending !important; hostile --state-warning cannot win */ .verdict--unanchored { background: var(--pending, #92520A); /* v0.200 P0-5: LOCKED via --pending alias (!important chain) */ color: #fff; border: 3px dashed rgba(255,255,255,0.35); /* dashed — non-colour shape cue (not a BROKEN failure, but not OK) */ } .verdict--unanchored::before { content: '\26A0'; /* ⚠ WARNING SIGN — distinct from 🔓 and ✖ (v0.200 P0-5 non-colour cue) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; font-weight: 900; line-height: 1; opacity: 0.7; pointer-events: none; } /* v0.515 A1 (C3): .verdict--pending — OTS anchor submitted, awaiting Bitcoin confirmation. AMBER (same --pending alias as --unchecked/--unanchored) — NOT red. A legitimately PENDING timestamp must never scare verifiers (F5 over-red guard, REV4 §A1). Uses a ⏳ clock non-colour shape cue to distinguish from ⚠ (integrity warning) and ? (doc pending). */ .verdict--pending { background: var(--pending, #92520A); /* v0.515 A1-C3: LOCKED via --pending alias (!important chain) */ color: #fff; border: 3px dashed rgba(255,255,255,0.35); /* dashed — non-colour shape cue (not a confirmed/broken state) */ } .verdict--pending::before { content: '\23F3'; /* ⏳ HOURGLASS NOT DONE — pending anchor (distinct from ⚠ integrity/? doc cues) */ position: absolute; top: var(--s2); right: var(--s3); font-size: 11px; font-weight: 900; line-height: 1; opacity: 0.7; pointer-events: none; } /* ── v0.515 A1 (C3): anchor chip — WITNESS-BINDS-GREEN model ──────────────────────── Small display-only chip next to the main verdict showing the Bitcoin-anchor state. It does NOT gate the main green (witness/chain/seal own that); it surfaces the progressive timestamp guarantee. Four colour intents: confirmed → positive (teal/green via --verdict-ok) pending → amber (via --pending) neutral → muted (none / stub) invalid → red (via --danger) — a tampered OTS, surfaced red on the chip only. */ .anchor-chip { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 5px 12px; border-radius: var(--ag-radius-full, 9999px); font-family: var(--font); font-size: 12.5px; font-weight: 600; line-height: 1.3; border: 1.5px solid transparent; } .anchor-chip--confirmed { background: rgba(15, 118, 110, 0.12); /* tint of --verdict-ok */ color: var(--success, #0F766E); border-color: rgba(15, 118, 110, 0.35); } .anchor-chip--pending { background: rgba(146, 82, 10, 0.12); /* tint of --pending */ color: var(--pending, #92520A); border-color: rgba(146, 82, 10, 0.35); } .anchor-chip--neutral { background: var(--surface-2, #F3EFE6); color: var(--text-muted, #6B7280); border-color: var(--border, #E3DCCC); } .anchor-chip--invalid { background: rgba(185, 28, 28, 0.10); /* tint of --danger */ color: var(--danger, #B91C1C); border-color: rgba(185, 28, 28, 0.40); } /* W2-A A2: .v-header__logo { font-size: 28px } deleted (rule #4 of 4, the last standalone bare rule ~v0.121.2 "compact header") — governed by topbar.css .cg-topbar__title. All four .v-header__logo font-size rules have been neutralised; the .cg-topbar__title governed size now wins cleanly. */ /* #7a5e12 = deep brand-gold on cream — close to but darker than --brand-gold-dark (#8a6d1f); FLAGGED for Opus */ .hash-match-indicator--waiting { background: rgba(195,161,75,.16); color: #7a5e12; } /* v0.121.2 D-1: owner strip — a signed-in member opening their OWN ceremony is recognised as owner (nickname + recap/certificate + back), instead of the cold public funnel. Rendering only. v0.W2-B: restyled as action bar — Back (ghost btn) left, title lead centre, primary actions right. justify-content:space-between gives Back/lead/actions their natural positions. */ .owner-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; max-width:760px; margin:0 auto 14px; padding:10px 16px; background:var(--ivory,#F3EFE6); border:1px solid var(--gold,#C3A14B); border-radius:12px; font-size:14px; } /* v0.529.5 D-21 SEVERE: was var(--ink), the BRAND ink — a constant #14253D that does NOT flip with the scheme (tokens.css redefines --text-ink in dark, never --brand-ink). The strip's background IS --ivory, which DOES flip (#F3EFE6 -> #1d3147). In dark that put navy text on a navy panel: 1.16:1, "Your ceremony" all but invisible. --text is the alias that flips (--text -> --text-ink -> #FAF8F3 in dark), which is what body copy on a themed surface needs. */ .owner-strip__lead{ color:var(--text,#14253D); flex:1; text-align:center; min-width:0; } .owner-strip__name{ color:var(--gold,#C3A14B); font-weight:700; } .owner-strip__actions{ display:flex; gap:8px; flex-wrap:wrap; } /* ── v0.405.0 ITEM 5: Print button (screen only) ──────────────────────────── */ .print-btn { display: inline-flex; align-items: center; gap: var(--s2, 8px); padding: 8px var(--s4, 16px); border: 1.5px solid var(--border, #E3DCCC); border-radius: var(--ag-radius-lg, 12px); background: transparent; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-muted, #6B7280); cursor: pointer; transition: background 0.15s, color 0.15s; } .print-btn:hover { background: var(--surface-2, #F3EFE6); color: var(--text, #14253D); } /* ── v0.405.0 ITEM 5: Courtroom print optimisation ────────────────────────── */ @media print { /* 1. Hide all non-essential chrome */ .v-header, [data-header="app"], /* v0.503.0 S-F1: governed chrome replaces .v-header */ .lang-flag, .owner-strip, #input-card, .cta-footer, footer, .motto-bar, .app-version, .print-btn, .ag-btn, .verify-row, .url-panel, .drop-pair, .tech-details > summary, [data-i18n="verify.input.intro"], [data-i18n="verify.primary.label"], [data-i18n="verify.primary.note"], [data-i18n="verify.offline.summary"], [data-i18n="verify.anchor.intro"], [data-i18n="verify.anchor.site_link"], [data-i18n="verify.chain_walk.intro"] { display: none !important; } /* 2. Force black-on-white, no backgrounds */ * { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* 3. Reset layout for A4/Letter */ body { padding: 0 !important; margin: 0 !important; } .app { max-width: 100% !important; padding: 8mm 10mm !important; gap: 6mm !important; } /* 4. Verdict banner: retain coloured background for the seal icon (non-colour cue survives grayscale) */ .verdict--ok { background: #0F766E !important; color: #fff !important; } .verdict--broken { background: #B91C1C !important; color: #fff !important; } .verdict--not-closed { background: #92520A !important; color: #fff !important; } .verdict--doc-mismatch { background: #B91C1C !important; color: #fff !important; } .verdict--unchecked { background: #92520A !important; color: #fff !important; } .verdict--pending { background: #92520A !important; color: #fff !important; } /* v0.515 A1-C3 */ .verdict--unanchored { background: #92520A !important; color: #fff !important; } /* v0.515 A1-C3 */ .verdict__title { color: #fff !important; } .verdict__detail { color: rgba(255,255,255,0.9) !important; } .verdict__dateline { color: #E8D9A8 !important; } /* 5. Cards: thin borders, no shadows */ .ag-card { border: 1px solid #ccc !important; border-radius: 4px !important; padding: 6mm !important; page-break-inside: avoid; } /* 6. Results section: always visible when printing */ #results { display: flex !important; } /* 7. Chain blocks: avoid orphaned blocks across pages */ .chain-block { page-break-inside: avoid; } .chain-block__content { border: 1px solid #ccc !important; } .chain-block__role-icon { border: 1px solid #ccc !important; background: #f5f5f5 !important; } /* 8. Expand all tech-details folds so nothing is hidden in print */ .tech-details { display: block !important; } .tech-details > .tech-details__body { display: block !important; margin-top: 4px !important; } /* 9. Hash / mono text: wrap, don't clip */ .hash-block, .mono-hash, .check-row__value { word-break: break-all !important; font-size: 10px !important; } /* 10. Face images: keep aspect, max 40px */ .chain-block__face-img { width: 36px !important; height: 36px !important; } /* 11. Anchor panel */ .anchor-panel { border: 1px solid #ccc !important; background: #f9f9f9 !important; } /* 12. Page breaks: verdict first, then summary, then chain */ #verdict-banner { page-break-after: avoid; } #chain-walk { page-break-before: avoid; } /* 13. Remove animations */ * { animation: none !important; transition: none !important; } }