/* The agent wallet demonstrator stylesheet. * * PROVENANCE. The colour, type, space and radius tokens, the base rules, the focus ring, the skip * link and the masthead measurements are copied from the showcase site, read only, in the main * checkout at commit 9451a060 (branch fix/statement-suspend-not-inactive, 26 September 2026): * packages/ui/tokens/tokens.css the light tokens (:root) and the --d-* dark values * apps/site/src/public/ui.css "The dark site" token block, sections 1 to 3, .masthead * The fonts (Inter, IBM Plex Mono, SIL OFL 1.1, licences beside them) and brand/raidiam-wordmark.svg * are copied from apps/site/src/public at the same commit. Nothing here imports from apps/site. * * THEMES. Light is the default. Dark follows prefers-color-scheme unless the reader chose a theme, * which sets data-theme on . The masthead is dark in both themes, because the wordmark is * white and must not be recoloured. * * COLOUR RULES carried from the showcase: green marks only a live reading or a check that passed; * red marks only a refusal; the brand teal is never a button fill. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/Inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/Inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-400-latin.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-500-latin.woff2) format("woff2"); } :root { color-scheme: light; --paper: #F1F4F3; --paper-alt: #F8F8F8; --card: #FFFFFF; --ink: #020C0C; --ink-lead: #3A4A4A; --ink-2: #4F5F5F; --rule: #D6DEDD; --hairline: #D6DEDD; --ok: #0A6B3D; --att: #8A5A00; --no: #B02B17; --wash-ok: #E8F2EC; --wash-att: #FDF3E2; --wash-no: #FBECEB; --wash-teal: #E6F4F3; --link: #195E67; --accent: #195E67; --graphic: #2B9FAF; --button: #0C4140; --on-button: #FFFFFF; --focus-ring: #0C4140; --focus-halo: #FFFFFF; --mast-ground: #030910; --mast-ink: #eaf2ff; --mast-ink-2: #c4d2e4; --mast-rule: #18293a; --sans: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", "Monaco", "Andale Mono", "Menlo", "Consolas", monospace; --t-display: clamp(34px, 4.4vw, 56px); --t-h1: clamp(26px, 2.4vw, 32px); --t-h2: 22px; --t-h3: 18px; --t-body: 17px; --t-small: 15px; --t-label: 14px; --t-mono: 13px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --gutter: clamp(16px, 4vw, 32px); --page-max: 1216px; --read-max: 72ch; --r-1: 4px; --r-2: 10px; --pill: 999px; } @media (max-width: 700px) { :root { --t-body: 16px; } } /* The dark site values (apps/site/src/public/ui.css, "The dark site"). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #030910; --paper-alt: #05101d; --card: #081524; --ink: #eaf2ff; --ink-lead: #aebdd2; --ink-2: #8ea3bd; --rule: #4d6a89; --hairline: #18293a; --ok: #35CC86; --att: #F4A437; --no: #FA555C; --wash-ok: #0B2A1E; --wash-att: #2C2210; --wash-no: #2E1418; --wash-teal: #06222c; --link: #22d3ee; --accent: #22d3ee; --graphic: #0e7f96; --button: #22d3ee; --on-button: #04222b; --focus-ring: #22d3ee; --focus-halo: #030910; } } :root[data-theme="dark"] { color-scheme: dark; --paper: #030910; --paper-alt: #05101d; --card: #081524; --ink: #eaf2ff; --ink-lead: #aebdd2; --ink-2: #8ea3bd; --rule: #4d6a89; --hairline: #18293a; --ok: #35CC86; --att: #F4A437; --no: #FA555C; --wash-ok: #0B2A1E; --wash-att: #2C2210; --wash-no: #2E1418; --wash-teal: #06222c; --link: #22d3ee; --accent: #22d3ee; --graphic: #0e7f96; --button: #22d3ee; --on-button: #04222b; --focus-ring: #22d3ee; --focus-halo: #030910; } /* 1. Base (ui.css section 1) */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: var(--t-body); line-height: 1.55; color: var(--ink); background: var(--paper); font-variant-numeric: tabular-nums; } img, svg { max-width: 100%; display: block; } [hidden] { display: none !important; } h1, h2, h3, p, ul, ol, dl, table, figure { margin: 0; } a { color: var(--link); text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } code, .mono { font-family: var(--mono); font-size: var(--t-mono); line-height: 1.6; overflow-wrap: anywhere; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } .skip { position: absolute; left: var(--s4); top: -100px; padding: var(--s2) var(--s4); background: var(--button); color: var(--on-button); border-radius: var(--r-1); z-index: 100; text-decoration: none; font-weight: 600; } .skip:focus { top: var(--s4); } .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; } /* 2. Type (ui.css section 2) */ h1 { font-size: var(--t-display); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; max-width: 22ch; } h1 .accent { color: var(--accent); } h2 { font-size: var(--t-h1); line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; } h3 { font-size: var(--t-h3); line-height: 1.35; font-weight: 600; } .eyebrow { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); } .lead { font-size: calc(var(--t-body) + 2px); color: var(--ink-lead); max-width: var(--read-max); } .prose > * + * { margin-top: var(--s4); } .prose p { max-width: var(--read-max); } small, .small { font-size: var(--t-small); } /* 3. Masthead (ui.css .masthead, 62px row) */ .masthead { background: var(--mast-ground); border-bottom: 1px solid var(--mast-rule); color: var(--mast-ink); } .masthead-row { display: flex; align-items: center; gap: var(--s5); min-height: 62px; flex-wrap: wrap; } .masthead-brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--mast-ink); text-decoration: none; } .masthead-mark { height: 24px; width: auto; } .masthead-title { font-size: var(--t-label); font-weight: 600; } .masthead-nav { display: flex; gap: var(--s5); margin-left: auto; flex-wrap: wrap; align-items: center; } .masthead-nav a { color: var(--mast-ink-2); text-decoration: none; font-size: var(--t-small); padding: 11px 0; } .masthead-nav a:hover { color: var(--mast-ink); } .masthead-nav a[aria-current="page"] { color: #22d3ee; font-weight: 600; } .theme-toggle { font: inherit; font-size: var(--t-label); color: var(--mast-ink); background: transparent; border: 1px solid #4d6a89; border-radius: var(--pill); padding: 6px 12px; min-height: 36px; cursor: pointer; } .masthead :focus-visible { outline-color: #22d3ee; box-shadow: 0 0 0 2px #030910, 0 0 0 4px #22d3ee; } /* 4. Page */ .aw-banner { background: var(--wash-att); color: var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s3) 0; font-size: var(--t-small); } .aw-banner p { max-width: var(--read-max); } .aw-hero { padding: var(--s8) 0 var(--s6); display: grid; gap: var(--s4); } .aw-chapters ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } .aw-chapters a { display: inline-block; padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--pill); font-size: var(--t-small); text-decoration: none; color: var(--ink); background: var(--card); } .aw-chapters a:hover { border-color: var(--accent); } .aw-band { padding: var(--s7) 0; border-top: 1px solid var(--hairline); display: grid; gap: var(--s5); scroll-margin-top: var(--s4); } .aw-band > *, .prose, .aw-hero > * { min-width: 0; } .aw-band:nth-of-type(even) { background: var(--paper-alt); } .aw-stamp { font-size: var(--t-label); color: var(--ink-2); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; } .aw-stamp .src { display: inline-block; font-weight: 600; padding: 1px 8px; border-radius: var(--pill); border: 1px solid currentColor; } .aw-stamp .src[data-source="live"] { color: var(--ok); background: var(--wash-ok); } .aw-stamp .src[data-source="recorded"] { color: var(--att); background: var(--wash-att); } .aw-stamp .src[data-source="missing"] { color: var(--ink-2); } .aw-absent { color: var(--ink-2); font-style: italic; } .aw-cite a { text-decoration: none; font-size: 0.75em; padding: 0 2px; } .aw-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .aw-stack { display: grid; gap: var(--s6); } .aw-matrix th[scope="row"] { white-space: nowrap; } .aw-grid-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); } .aw-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s4); display: grid; gap: var(--s2); align-content: start; min-width: 0; } .aw-card h3 { overflow-wrap: anywhere; } .aw-card dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); font-size: var(--t-small); } .aw-card dt { color: var(--ink-2); } .aw-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .aw-card ul { padding-left: var(--s5); font-size: var(--t-small); } .aw-scroll { overflow-x: auto; max-width: 100%; position: relative; } table { border-collapse: collapse; width: 100%; font-size: var(--t-small); } th, td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); } thead th { font-size: var(--t-label); color: var(--ink-2); font-weight: 600; } caption { text-align: left; font-weight: 600; padding-bottom: var(--s2); } .aw-matrix td { text-align: center; } .aw-matrix td[data-disclosed="true"] { background: var(--wash-teal); font-weight: 600; } .aw-note { display: block; font-weight: 400; font-size: 12px; color: var(--ink-2); } .aw-checks { list-style: none; padding: 0; display: grid; gap: var(--s1); font-size: var(--t-small); } .aw-checks li { padding-left: 1.4em; position: relative; overflow-wrap: anywhere; } .aw-checks li::before { position: absolute; left: 0; font-weight: 700; } .aw-checks li[data-ok="true"]::before { content: "\2713"; color: var(--ok); } .aw-checks li[data-ok="false"]::before { content: "\2717"; color: var(--no); } .aw-verdict { font-weight: 600; } .aw-verdict[data-accepted="true"] { color: var(--ok); } .aw-verdict[data-accepted="false"] { color: var(--no); } details.aw-drawer { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } details.aw-drawer > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; } details.aw-drawer > div { padding-bottom: var(--s4); } /* The timeline: one bar per credential, its length the lifetime on a log scale. */ .aw-timeline { list-style: none; padding: 0; display: grid; gap: var(--s2); } .aw-timeline li { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s4); align-items: center; font-size: var(--t-small); } .aw-timeline svg { width: 100%; height: 14px; } .aw-timeline .bar { fill: var(--graphic); } .aw-timeline li[data-state="earlier"] .bar, .aw-timeline li[data-state="expired"] .bar { fill: var(--rule); } .aw-timeline .track { fill: var(--hairline); } .aw-timeline .meta { color: var(--ink-2); display: block; font-size: var(--t-label); } @media (max-width: 640px) { .aw-timeline li { grid-template-columns: 1fr; } } /* The controls: traveller, instrument, the buttons, and the live run log. */ .aw-controls { display: grid; gap: var(--s4); } fieldset { border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s4); margin: 0; min-width: 0; background: var(--card); } legend { font-weight: 600; padding: 0 var(--s2); } .aw-choice { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); align-items: start; padding: var(--s2) 0; } .aw-choice input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--button); } .aw-choice span { font-size: var(--t-small); color: var(--ink-2); grid-column: 2; } .aw-actions { display: flex; flex-wrap: wrap; gap: var(--s3); } .aw-button { font: inherit; font-weight: 600; font-size: var(--t-small); min-height: 44px; padding: 10px 18px; border-radius: var(--pill); border: 2px solid var(--button); background: var(--button); color: var(--on-button); cursor: pointer; } .aw-button[data-kind="secondary"] { background: transparent; color: var(--ink); } .aw-button:disabled { opacity: 0.55; cursor: not-allowed; } .aw-log { border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--card); padding: var(--s4); display: grid; gap: var(--s3); min-height: 3em; } .aw-log ol { padding-left: var(--s5); display: grid; gap: var(--s3); } .aw-log pre { margin: var(--s1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t-mono); background: var(--paper-alt); padding: var(--s2); border-radius: var(--r-1); } .aw-log .st-ok { color: var(--ok); font-weight: 600; } .aw-log .st-no { color: var(--no); font-weight: 600; } /* The federation map: roots and their members, no line between members. */ .aw-roots { list-style: none; padding: 0; } .aw-root .aw-members { list-style: none; padding: 0; display: grid; gap: var(--s1); border-left: 3px solid var(--graphic); padding-left: var(--s3); } .aw-sources ol { padding-left: var(--s5); display: grid; gap: var(--s2); font-size: var(--t-small); } .aw-sources li { overflow-wrap: anywhere; } .aw-state { white-space: nowrap; display: inline-block; font-size: var(--t-label); font-weight: 600; padding: 1px 8px; border-radius: var(--pill); border: 1px solid currentColor; } .aw-state[data-state="shown"] { color: var(--ok); background: var(--wash-ok); } .aw-state[data-state="partly"] { color: var(--att); background: var(--wash-att); } .aw-state[data-state="waiting"] { color: var(--ink-2); border-style: dashed; } .aw-state[data-state="absent"] { color: var(--ink-2); } .aw-foot { padding: var(--s6) 0 var(--s7); border-top: 1px solid var(--hairline); color: var(--ink-2); font-size: var(--t-small); } .aw-foot p + p { margin-top: var(--s2); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* The printable briefing (spec 12.2): the patterns page prints without the masthead and controls, with each link's address after its text. */ @media print { .masthead, .skip, .theme-toggle, .aw-chapters, .aw-foot nav { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .aw-band { padding: 12pt 0; break-inside: avoid-page; background: #fff !important; } .aw-scroll { overflow: visible; } table { font-size: 9pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; overflow-wrap: anywhere; } }