/* ========================================================================= app.css — design tokens and components Density is the point: this is a data-entry tool used with a patient waiting, so controls are compact, the step rail is always visible, and explanatory text is demoted below the thing it explains rather than shouting beside it. The dark palette hangs off [data-theme="dark"] on and nothing else. src/theme.js sets that attribute during head parsing — resolving "follow the system" itself — so there is one dark palette here rather than one for the media query and a second for the manual choice, which would drift. ========================================================================= */ :root { color-scheme: light; /* surfaces */ --bg: #f1f4f7; --surface: #ffffff; --surface-2: #fafbfc; --surface-3: #f0f2f5; --line: #d9dee6; --line-2: #bcc5d1; --line-strong: #98a4b3; /* ink */ --ink: #14171c; --ink-2: #545b66; --ink-3: #7b828d; /* accent + status */ --accent: #155e75; --accent-hi: #0e4b5e; --accent-ink: #124f62; --accent-soft: #eaf6f8; --accent-line: #a9d7df; --accent-ring: rgba(21, 94, 117, .22); /* Text and glyphs sitting ON --accent. Not always white: the dark palette's accent is a light cyan, which white type cannot be read against. */ --on-accent: #ffffff; /* The logo tile only. Fixed in both themes — it is the mark, and it matches the favicon and the installed app icon, so it must not follow the UI accent when that lightens for dark mode. */ --brand: #155e75; --warn: #a55a09; --warn-soft: #fdf6e8; --warn-line: #f0d9a8; --danger: #bc2626; --danger-soft: #fdf2f2; --danger-line: #f3c9c9; --ok: #0a7a52; --ok-soft: #eefaf4; --ok-line: #b3e3ce; /* Favourite star, and the lit top edge of the app bar. */ --star: #b77900; --star-hi: #9a6700; --star-soft: #fff7d6; --edge-hi: rgba(255, 255, 255, .8); --r-sm: 6px; --r: 9px; --r-lg: 13px; --shadow-1: 0 1px 2px rgba(16, 22, 34, .07); --shadow-2: 0 8px 28px -6px rgba(16, 22, 34, .18), 0 2px 6px rgba(16, 22, 34, .06); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --rail-w: 236px; --bar-h: 56px; } :root[data-theme="dark"] { /* Also switches the browser's own furniture — scrollbars, the date and time pickers, and select popups — which no token can reach. */ color-scheme: dark; --bg: #0e1116; --surface: #161a21; --surface-2: #1b2028; --surface-3: #222831; --line: #272d37; --line-2: #46505f; --line-strong: #626e7f; --ink: #e8ebf0; --ink-2: #a3acba; --ink-3: #7b8494; --accent: #44a9bb; --accent-hi: #68bdca; --accent-ink: #9ed9e2; --accent-soft: #132a30; --accent-line: #285a64; --accent-ring: rgba(68, 169, 187, .3); --on-accent: #06222a; --warn: #e5aa55; --warn-soft: #2a2216; --warn-line: #4d3d1f; --danger: #f08a8a; --danger-soft: #2c1a1a; --danger-line: #5a2e2e; --ok: #4fc79b; --ok-soft: #12271f; --ok-line: #26543f; --star: #e5b545; --star-hi: #f2ca70; --star-soft: #2f2513; --edge-hi: rgba(255, 255, 255, .05); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4); } * { box-sizing: border-box; } body { margin: 0; font: 14px/1.5 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } /* ===================================================================== app bar ===================================================================== */ .appbar { height: var(--bar-h); background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 0 var(--edge-hi); display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 30; } .appbar .mark { width: 30px; height: 30px; border-radius: 7px; background: var(--brand); display: grid; place-items: center; flex: none; overflow: hidden; box-shadow: 0 1px 2px rgba(10, 55, 68, .24); } .appbar .mark svg { width: 30px; height: 30px; display: block; } .appbar .mark-c { fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; } .appbar .mark-mountain { fill: #e3a62f; } .appbar .mark-snow { fill: #fff; } .appbar .name { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; } .appbar .div { width: 1px; height: 20px; background: var(--line); } .appbar .ctx { font-size: 13px; color: var(--ink-2); min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; } .appbar .ctx b { font-weight: 600; color: var(--ink); } .appbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Who the packet is filed as, readable from any scroll position. */ .ctx-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; min-width: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 3px 8px 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; } .ctx-chip:hover { color: var(--ink); border-color: var(--ink-3); } .ctx-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .ctx-chip .caret { opacity: .55; font-size: 10px; flex: none; } @media (max-width: 900px) { .ctx-chip { display: none; } } .pill { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; } .pill.ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); } .pill.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); } .pill.danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); } .pill.accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); } /* ===================================================================== shell ===================================================================== */ .shell { max-width: 1240px; margin: 0 auto; padding: 22px 20px 80px; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 28px; align-items: start; } /* ---------- step rail ---------- */ .rail { position: sticky; top: calc(var(--bar-h) + 22px); display: grid; gap: 14px; padding-right: 20px; border-right: 1px solid var(--line); } .steps { display: grid; gap: 1px; } .step { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); font-size: 13px; border: 1px solid transparent; text-align: left; width: 100%; background: none; font-family: inherit; } .step:hover { background: var(--surface-3); color: var(--ink); } .step.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .step .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 650; background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--line); flex: none; } .step.active .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .step.done .n { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .step.done.active .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .step .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .step .flag { font-size: 10.5px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); } .rail-box { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow-1); } .rail-box h3 { margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; } .rail-box ul { margin: 0; padding-left: 15px; font-size: 12.5px; color: var(--ink-2); } .rail-box li { margin: 3px 0; } .rail-box .btn { width: 100%; justify-content: center; } .rail-links { display: grid; gap: 2px; } .linkbtn { background: none; border: 0; padding: 6px 9px; font: inherit; font-size: 12.5px; color: var(--ink-2); text-align: left; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; gap: 8px; } .linkbtn:hover { background: var(--surface-3); color: var(--ink); } /* ===================================================================== cards ===================================================================== */ .flow { display: grid; gap: 16px; min-width: 0; } .workflow-intro { overflow: hidden; border: 1px solid var(--line-2); border-top: 3px solid var(--accent); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); } .workflow-copy { padding: 24px 26px 22px; } .eyebrow { margin-bottom: 7px; color: var(--accent); font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; } .workflow-copy h1 { margin: 0; max-width: 720px; font-size: clamp(21px, 2.6vw, 29px); line-height: 1.18; letter-spacing: -.025em; } .workflow-copy > p { max-width: 740px; margin: 9px 0 19px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; } .workflow-status { max-width: 520px; } .status-top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; color: var(--ink-2); font-size: 11.5px; } .status-top strong { color: var(--accent-ink); font-weight: 700; } .meter { height: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-3); } .meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; } .flow-map { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line-2); background: var(--surface-2); list-style: none; } .flow-map li { display: flex; gap: 9px; min-width: 0; padding: 13px 14px; border-right: 1px solid var(--line); } .flow-map li:last-child { border-right: 0; } .map-n { display: grid; flex: none; width: 20px; height: 20px; place-items: center; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; font-weight: 750; } .map-copy { display: grid; gap: 1px; min-width: 0; } .map-copy strong { font-size: 11.5px; } .map-copy small { color: var(--ink-3); font-size: 10.5px; line-height: 1.35; } .card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-1); scroll-margin-top: calc(var(--bar-h) + 16px); } .card-h { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0; } .card-h .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line); flex: none; } .card-title { display: grid; gap: 1px; min-width: 0; } .card-h h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .card-h .h-sub { font-size: 11.5px; color: var(--ink-3); } .card-h .h-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .card-b { padding: 20px 20px 22px; } .card-b > :first-child { margin-top: 0; } .sub-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ink-3); margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; } .sub-h::after { content: ""; flex: 1; height: 1px; background: var(--line-2); } .card-b > .sub-h:first-child { margin-top: 0; } /* ===================================================================== form controls ===================================================================== */ .field { display: grid; gap: 5px; min-width: 0; } .field > label, .lbl-t { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; } .field > label .opt, .lbl-t .opt { font-weight: 400; color: var(--ink-3); font-size: 12px; } .field .hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; } input[type=text], input[type=date], input[type=time], select, textarea { width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); transition: border-color .12s, box-shadow .12s; } textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .75; } input:hover, select:hover, textarea:hover { border-color: var(--ink-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* No color-scheme override here: the picker follows :root, so the popup and its indicator match the theme instead of being a white panel in a dark app. */ input[type=date], input[type=time] { cursor: pointer; font-variant-numeric: tabular-nums; } input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .72; } input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; } select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; } /* ===================================================================== outstanding items Two intensities. A field the validator can still name carries a quiet "Required" tag from the moment it matters; the red treatment — outline, inline message, flash on arrival — waits until the reader asks to be shown what is missing, or until a generate is actually blocked. Colour is never the only signal: the tag, the message, and the count all carry the meaning in text. ===================================================================== */ .req-tag[hidden] { display: none; } .req-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); } .has-issue .req-tag { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); } /* Group controls have no single input to outline, so the marking goes on a wrapper that stays out of the way of the layout it sits in. */ .issue-wrap { display: grid; gap: 5px; justify-items: start; } [data-issue-key] { scroll-margin-top: calc(var(--bar-h) + 24px); } .field-err { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; line-height: 1.45; color: var(--danger); font-weight: 500; } .field-err[hidden] { display: none; } .field-err .err-ico { flex: none; width: 13px; height: 13px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: var(--surface); background: var(--danger); } .needs-value .seg, .needs-value > .chips .chip { border-color: var(--warn-line); } .has-issue > input, .has-issue > textarea, .has-issue > select, .has-issue .seg { border-color: var(--danger); background: var(--danger-soft); } .has-issue > input:focus, .has-issue > textarea:focus, .has-issue > select:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-line); } .has-issue > label { color: var(--danger); } .has-issue > .chips .chip { border-color: var(--danger-line); } .has-issue .empty-state { border-color: var(--danger-line); } @keyframes issue-flash { from { box-shadow: 0 0 0 4px var(--danger-line); } to { box-shadow: 0 0 0 4px transparent; } } .flash { border-radius: var(--r-sm); animation: issue-flash 1.4s ease-out 1; } @media (prefers-reduced-motion: reduce) { .flash { animation: none; box-shadow: 0 0 0 3px var(--danger-line); } } /* Every outstanding item is a jump to the control it is about. */ .issue-list { display: grid; gap: 4px; margin-top: 6px; } .issue-link { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 12.5px; line-height: 1.45; color: inherit; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; cursor: pointer; } .issue-link:hover { background: var(--surface); border-color: var(--line-2); } .issue-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .issue-link .issue-msg { flex: 1; min-width: 0; } .issue-link .issue-go { flex: none; opacity: .5; font-weight: 700; } .issue-link:hover .issue-go { opacity: 1; } .issue-list.compact .issue-link { padding: 4px 6px; font-size: 12px; color: var(--ink-2); } .issue-list.compact .issue-link:hover { color: var(--ink); background: var(--surface-3); } .status-actions { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; } .card-h .sec-count { margin-left: auto; display: flex; align-items: center; gap: 8px; } .card-h .sec-count:empty { display: none; } .card-h .sec-count + .h-right { margin-left: 8px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; } .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px 14px; } .grid-3-1-1 { display: grid; grid-template-columns: 3fr 1fr 1.2fr; gap: 12px 14px; } .stack { display: grid; gap: 12px; } /* ===================================================================== buttons ===================================================================== */ .btn { font: inherit; font-size: 13px; font-weight: 600; height: 32px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-3); border-color: var(--ink-3); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); } .btn.primary:disabled { opacity: .5; cursor: not-allowed; background: var(--accent); } .btn.lg { height: 38px; font-size: 13.5px; padding: 0 16px; } .btn.sm { height: 27px; font-size: 12px; padding: 0 9px; } .btn.ghost { border-color: transparent; background: none; color: var(--ink-2); } .btn.ghost:hover { background: var(--surface-3); color: var(--ink); border-color: transparent; } .btn.danger { color: var(--danger); } .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger-line); } /* Icon-only: square, so the glyph is centred rather than floating in a pill. Every one of these must carry an aria-label — there is no text to read. */ .btn.icon { padding: 0; aspect-ratio: 1; justify-content: center; } .btn.icon svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bar .spacer { flex: 1; } /* ===================================================================== toggles: segmented (one of) and chips (any of) ===================================================================== */ .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-sm); } .seg button { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none; color: var(--ink-2); padding: 5px 12px; border-radius: 5px; cursor: pointer; } .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; } .chip:hover { border-color: var(--ink-3); color: var(--ink); } .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .chip-group { display: grid; gap: 6px; } .chip-group .g-lbl { font-size: 11.5px; color: var(--ink-3); font-weight: 600; } .check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; color: var(--ink); } .check input { width: auto; height: auto; margin: 2px 0 0; accent-color: var(--accent); flex: none; } .check .c-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } /* ===================================================================== patient label — settings that appear only once the toggle is on ===================================================================== */ .label-opts { display: grid; gap: 12px; margin: 10px 0 0 24px; /* aligns under the toggle's own label */ padding-left: 12px; border-left: 2px solid var(--line); } /* The preview is a real PDF of the real label, so it is shown at close to its printed proportions rather than stretched to the width of the card. */ .label-preview { margin: 12px 0 0 24px; max-width: 340px; aspect-ratio: 2.75 / 1; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; overflow: hidden; } .label-preview iframe { width: 100%; height: 100%; border: 0; display: block; } .label-preview .muted { font-size: 12px; } /* ===================================================================== callouts — one style, four intents, always below what they explain ===================================================================== */ .callout { display: flex; gap: 9px; padding: 9px 11px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); } .callout .ico { flex: none; font-size: 12px; line-height: 1.35; opacity: .9; } .callout b { color: var(--ink); font-weight: 650; } .callout.info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); } .callout.info b { color: var(--accent-ink); } .callout.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .callout.warn b { color: var(--warn); } .callout.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); } .callout.danger b { color: var(--danger); } .callout.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .callout.ok b { color: var(--ok); } .callout ul { margin: 5px 0 0; padding-left: 16px; } details.explain { margin-top: 4px; } details.explain > summary { cursor: pointer; font-size: 12px; color: var(--ink-3); list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; } details.explain > summary::-webkit-details-marker { display: none; } details.explain > summary::before { content: "›"; transition: transform .15s; display: inline-block; } details.explain[open] > summary::before { transform: rotate(90deg); } details.explain > summary:hover { color: var(--ink); } details.explain .body { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; padding: 8px 0 2px 12px; border-left: 2px solid var(--line); margin-top: 4px; } details.explain .body b { color: var(--ink); } /* ===================================================================== packet picker ===================================================================== */ .packets { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 8px; } .packet { border: 1px solid var(--line-2); border-left: 3px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; cursor: pointer; background: var(--surface); text-align: left; font: inherit; display: grid; gap: 6px; align-content: start; transition: border-color .12s, background .12s; } .packet:hover { border-color: var(--ink-3); } .packet[aria-pressed="true"] { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); } .packet .nm { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); } .packet-top { display: flex; align-items: flex-start; gap: 8px; } .packet-top .nm { flex: 1; } .packet-star { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 1px; border-radius: 4px; } .packet-star:hover, .packet-star:focus-visible { color: var(--star-hi); background: var(--star-soft); outline: none; } .packet-star.active { color: var(--star); } .packet-controls { margin-top: 12px; } .packet[aria-pressed="true"] .nm { color: var(--accent-ink); } .packet .fm { display: flex; flex-wrap: wrap; gap: 4px; } .packet .fm span { font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--line); } .packet[aria-pressed="true"] .fm span { background: var(--surface); color: var(--accent-ink); border-color: var(--accent-line); } .packet .fm i { font-style: normal; font-size: 11px; color: var(--ink-3); } /* ===================================================================== people — dropdown + selected-person card ===================================================================== */ .person { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); } .person .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none; } .person .who { min-width: 0; display: grid; gap: 1px; } .person .who .nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person .who .meta { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person .acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; } .sigbox { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); } .sigbox img { height: 34px; max-width: 168px; object-fit: contain; object-position: left center; flex: none; } /* Signatures are stored as dark ink on transparent, for stamping onto white paper. Inverted here so the preview is legible on a dark surface; the stored image, and therefore the PDF, is untouched. */ :root[data-theme="dark"] .sigbox img { filter: invert(1) hue-rotate(180deg); } .sigbox .empty { height: 34px; width: 130px; flex: none; border: 1px dashed var(--line-2); border-radius: var(--r-sm); display: grid; place-items: center; font-size: 11px; color: var(--ink-3); } .sigbox .acts { margin-left: auto; display: flex; gap: 6px; } /* The name gives up width first; the role is short and must stay whole rather than being clipped to "Atte". Only an element can ellipse, so the name is one — a bare text node would just get cut off by the container. */ .sigbox .sig-who { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; min-width: 0; } .sigbox .sig-who .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sigbox .sig-who .role { font-weight: 400; color: var(--ink-3); font-size: 11px; flex: none; white-space: nowrap; } .sig-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* ===================================================================== signers & facility — settled summary and the open editor ===================================================================== */ /* Facility spans both rows beside the two provider slots: it is the widest control of the three (quick-pick chips) and the two others are short. */ .team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 18px; align-items: start; } .team-grid > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .team-grid > :nth-child(2) { grid-column: 2; grid-row: 1; } .team-grid > :nth-child(3) { grid-column: 2; grid-row: 2; } /* The single-column override has to match the :nth-child placement above on specificity, or those rules keep the children in column 2 and the grid quietly invents an implicit second column to hold them. */ @media (max-width: 880px) { .team-grid { grid-template-columns: minmax(0, 1fr); } .team-grid > :nth-child(1), .team-grid > :nth-child(2), .team-grid > :nth-child(3) { grid-column: 1; grid-row: auto; } } .card.settled .card-b { padding: 14px 20px 15px; } .filed-as { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 22px; } .fa-item { display: grid; gap: 2px; min-width: 0; } .fa-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .fa-v { display: flex; align-items: center; gap: 7px; min-width: 0; } .fa-v .av { width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); display: grid; place-items: center; font-size: 9px; font-weight: 700; flex: none; } .fa-n { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fa-m { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty-state { padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); text-align: center; color: var(--ink-3); font-size: 12.5px; display: grid; gap: 9px; justify-items: center; } /* ===================================================================== profile manager rows ===================================================================== */ .plist { display: grid; gap: 6px; } .prow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); } .prow .who { min-width: 0; flex: 1; display: grid; gap: 1px; } .prow .who .nm { font-size: 13px; font-weight: 600; } .prow .who .meta { font-size: 11.5px; color: var(--ink-3); } .prow .acts { display: flex; gap: 5px; flex: none; } .tabs { display: flex; gap: 2px; padding: 2px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-sm); } .tabs button { flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none; color: var(--ink-2); padding: 6px 10px; border-radius: 5px; cursor: pointer; } .tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } /* ===================================================================== dialogs ===================================================================== */ dialog { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; max-width: 520px; width: calc(100% - 32px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); } dialog::backdrop { background: rgba(10, 14, 22, .5); backdrop-filter: blur(2px); } dialog .d-h { padding: 15px 18px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } dialog .d-h h3 { margin: 0; font-size: 14.5px; font-weight: 650; } dialog .d-h .x { margin-left: auto; } dialog .d-b { padding: 16px 18px; display: grid; gap: 12px; max-height: 70vh; overflow: auto; } dialog .d-f { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } dialog .d-f .spacer { flex: 1; } #sigpad { border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: #fff; touch-action: none; width: 100%; display: block; cursor: crosshair; } .sig-tabs { max-width: 260px; } .sig-panel[hidden] { display: none; } .sig-upload { min-height: 108px; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); display: grid; gap: 5px; place-items: center; text-align: center; cursor: pointer; } .sig-upload:hover { border-color: var(--accent); background: var(--accent-soft); } .sig-upload:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); } .sig-upload-title { color: var(--accent); font-size: 13px; font-weight: 650; } .sig-upload input { max-width: 100%; font: inherit; font-size: 12px; color: var(--ink-2); } .sig-upload-preview { min-height: 66px; margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; } .sig-upload-preview img { display: block; width: 100%; height: 72px; object-fit: contain; } .sig-upload-preview .error { color: var(--danger); font-size: 12px; text-align: center; } /* ===================================================================== generate output ===================================================================== */ .result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ok-line); background: var(--ok-soft); border-radius: var(--r); } .result .t { display: grid; gap: 1px; } .result .t .nm { font-size: 13px; font-weight: 650; color: var(--ok); } .result .t .meta { font-size: 11.5px; color: var(--ink-2); } .result .acts { margin-left: auto; display: flex; gap: 8px; } .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(520px, calc(100% - 32px)); box-shadow: var(--shadow-2); background: var(--surface); } .muted { color: var(--ink-3); font-size: 12px; } .mono { font-family: var(--mono); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===================================================================== QI & impact panel ===================================================================== */ dialog.wide { max-width: 780px; } .qi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .qi-kpi { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 10px 12px; display: grid; gap: 2px; } .qi-kpi .k-v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-ink); } .qi-kpi .k-l { font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .qi-kpi .k-s { font-size: 10.5px; color: var(--ink-3); line-height: 1.35; } .qi-spark { width: 100%; height: 46px; display: block; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); } .qi-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .qi-spark-line.down-good { stroke: var(--ok); } .qi-spark-med { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .qi-spark.empty { display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--ink-3); } .qi-table { width: 100%; border-collapse: collapse; font-size: 12px; } .qi-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 650; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); } .qi-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; line-height: 1.45; } .qi-table tr:last-child td { border-bottom: 0; } .qi-code { font-family: var(--mono); font-size: 11px; color: var(--ink); } .qi-clock { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 12px 14px; } .qi-clock-v { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); flex: 1; } .qi-scale { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .qi-scale .chip { min-width: 30px; justify-content: center; } .qi-never { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-2); line-height: 1.6; } /* ===================================================================== responsive ===================================================================== */ @media (max-width: 980px) { .shell { grid-template-columns: 1fr; padding-top: 16px; } .rail { position: static; padding-right: 0; border-right: 0; } .steps { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 2px; } .step { width: auto; flex: none; } .step .lbl { max-width: 130px; } } @media (max-width: 640px) { .grid2, .grid3, .grid-2-1, .grid-3-1-1 { grid-template-columns: 1fr; } .appbar .ctx, .appbar .div { display: none; } .shell { padding-inline: 12px; } .workflow-copy { padding: 20px 18px; } .flow-map { grid-template-columns: 1fr 1fr; } .flow-map li:nth-child(2) { border-right: 0; } .flow-map li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .card-b { padding: 17px 15px 20px; } .card-h { padding-inline: 15px; align-items: flex-start; } .card-h .h-right { align-self: center; } } /* Web-only chrome: the loading cover and the update prompt. Appended after app.css by tools/build_web.cjs, so the offline build never carries it. */ .boot { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg, #f6f7f9); } .boot-card { display: grid; justify-items: center; gap: 14px; padding: 28px 34px; text-align: center; } .boot-spinner { width: 26px; height: 26px; border: 3px solid rgba(21, 94, 117, 0.22); border-top-color: #155e75; border-radius: 50%; animation: boot-spin 0.8s linear infinite; } @keyframes boot-spin { to { transform: rotate(360deg); } } /* Respect a reduced-motion preference: hold the ring still rather than spin it. */ @media (prefers-reduced-motion: reduce) { .boot-spinner { animation: none; } } .boot-msg { margin: 0; font-size: 15px; color: var(--ink, #1f2933); } .boot-failed .boot-msg { font-weight: 600; } .boot-detail { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--muted, #5b6b7a); } .boot-failed .boot-spinner { display: none; } .update-bar { position: fixed; z-index: 55; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #1f2933; color: #fff; font-size: 13px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24); } .update-bar .btn { white-space: nowrap; }