/* ════ PR v2 — stylesheet (externalized from index.html for CSP) ════ */ :root { --bg-grad-1: #f8f7f6; --bg-grad-2: #f8f7f6; --card: #ffffff; --tx: #1a1a18; --tx70: rgba(26,26,24,.72); --tx55: rgba(26,26,24,.55); --tx40: rgba(26,26,24,.40); --tx20: rgba(26,26,24,.20); --tx10: rgba(26,26,24,.07); --bd: rgba(26,26,24,.08); --bd2: rgba(26,26,24,.14); --pill: #ecebe6; --pill-bd: rgba(26,26,24,.06); /* PR identity — dusky rust accent (PR v2 brand colour; v1 used the default green which collided with FCA). --warn shifts away from rust to a deeper red so warning state stays visually distinct from the brand. */ --app: #c0573b; --app-dim: rgba(192,87,59,.12); --app-bd: rgba(192,87,59,.22); --app-strong: #9b4530; --warn: #a83838; --warn-dim: rgba(168,56,56,.10); --info: #5677a3; --info-dim: rgba(86,119,163,.10); /* Voice/dictation accent kept distinct from --app so the dictation buttons read as a different action class regardless of brand. */ --voice: #6d4cb0; --voice-dim: rgba(109,76,176,.10); --voice-bd: rgba(109,76,176,.30); --chat-fill: #faf1ee; --chat-fill-bd: rgba(192,87,59,.20); /* Severity palette (reused from FCA v2 for assessment scoring) */ --sev-none: #b8c5b8; --sev-mild: #6cae8a; --sev-mod: #d99a3a; --sev-sev: #d36a3e; --sev-ext: #b04545; --field-bg: #f7f6f1; --field-bd: rgba(26,26,24,.07); --shadow-sm: 0 1px 2px rgba(26,26,24,.04); --shadow-md: 0 3.5px 21.5px rgba(26,26,24,.06), 0 1px 2px rgba(26,26,24,.04); } /* ─── Dark theme ───────────────────────────────────────────── Overrides the :root tokens above when [data-theme="dark"] is set on by the bootstrap script in . PR's dusky rust --app is shifted brighter (#e08161) so it stays legible on dark surfaces while still reading as the PR brand colour. */ :root[data-theme="dark"] { /* Neutral grey palette — three tones for the three layers: #1a1a1a (deepest, page bg) → #1f1f1f (mid, fields/secondary) → #242424 (top, raised cards). */ --bg-grad-1: #1a1a1a; --bg-grad-2: #1f1f1f; --card: #242424; --tx: #f1efe8; --tx70: rgba(241,239,232,.72); --tx55: rgba(241,239,232,.55); --tx40: rgba(241,239,232,.40); --tx20: rgba(241,239,232,.20); --tx10: rgba(241,239,232,.08); --bd: rgba(255,255,255,.08); --bd2: rgba(255,255,255,.14); --pill: #2a2a2a; --pill-bd: rgba(255,255,255,.08); --app: #e08161; /* PR rust, brighter for dark legibility */ --app-dim: rgba(224,129,97,.18); --app-bd: rgba(224,129,97,.34); --app-strong: #f0a78c; --warn: #d96868; --warn-dim: rgba(217,104,104,.16); --info: #7fa3d5; --info-dim: rgba(127,163,213,.16); --voice: #a585e2; --voice-dim: rgba(165,133,226,.16); --voice-bd: rgba(165,133,226,.34); --chat-fill: #242424; --chat-fill-bd: rgba(224,129,97,.24); --field-bg: #1f1f1f; --field-bd: rgba(255,255,255,.08); --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 3.5px 21.5px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35); } /* ─── Dark mode: hardcoded-surface overrides ───────────────── Some rules below bake in light cream gradients or near-white solids that don't read against the dark base. Override those specific surfaces here so cards, banners, and input fields look right in dark mode. */ [data-theme="dark"] .msg-user.voice { background: rgba(165,133,226,.16); border-color: rgba(165,133,226,.34); } /* Assistant chat bubbles hardcode a light grey (#ececec) + near-black text (#222). Flip to neutral mid-grey + light text for dark mode. */ [data-theme="dark"] .msg-asst { background: #2a2a2a; color: var(--tx); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .summary-tabs { background: linear-gradient(180deg, #242424 0%, #1f1f1f 100%); } [data-theme="dark"] .summary-tab.active { background: var(--card); } [data-theme="dark"] .summary-card, [data-theme="dark"] .subgroup, [data-theme="dark"] .supports-block { background: #1f1f1f; } /* .section-card is the main card pattern used inside each tab pane (Participant → NDIS participant details, Nominee/guardian, etc.). It hardcodes #fcfbf6 so flip to dark card surface here. */ [data-theme="dark"] .section-card { background: #242424; border-color: rgba(255,255,255,.08); } /* Empty / dashed-outline states and the draft / picker lists also bake in a near-white cream — flip to a slightly darker shade so they sit a touch below the section cards. */ [data-theme="dark"] .at-empty { background: #1f1f1f; border-color: rgba(255,255,255,.10); } [data-theme="dark"] .draft-item, [data-theme="dark"] .picker-item { background: #1f1f1f; border-color: rgba(255,255,255,.08); } /* Inputs that hardcode #fff on :focus — flip to the field token so click-into-field doesn't flash a white interior. */ [data-theme="dark"] textarea:focus, [data-theme="dark"] input[type="text"]:focus, [data-theme="dark"] input[type="email"]:focus, [data-theme="dark"] input[type="date"]:focus, [data-theme="dark"] input[type="number"]:focus, [data-theme="dark"] .field input:focus, [data-theme="dark"] .field textarea:focus, [data-theme="dark"] .settings-field input:focus, [data-theme="dark"] .settings-field textarea:focus, [data-theme="dark"] .form-field input:focus, [data-theme="dark"] .form-field select:focus, [data-theme="dark"] .form-field textarea:focus, [data-theme="dark"] .row-value:focus, [data-theme="dark"] .row-value[contenteditable="true"]:focus, [data-theme="dark"] .loa-row-grid > select:focus, [data-theme="dark"] .loa-row-grid > input:focus { background: var(--field-bg); color: var(--tx); } /* Save-status / .btn hovers (light fill) — flip in dark. */ [data-theme="dark"] .save-status:hover, [data-theme="dark"] .actions .btn:hover { background: rgba(255,255,255,.06); } /* Active state — inverted for dark legibility. */ [data-theme="dark"] .actions .btn.is-active, [data-theme="dark"] .actions .btn:active, [data-theme="dark"] .save-status.is-active, [data-theme="dark"] .save-status:active { background: #f1efe8; color: #1a1a18; border-color: #f1efe8; } [data-theme="dark"] .actions .btn.is-active svg, [data-theme="dark"] .actions .btn:active svg { color: #1a1a18; } /* ── Supports tab + AT-items stack: dark surfaces. This pane was added after the dark pass and hardcodes light #fff / #fcfbf6 / #fafaf7 with no dark override, so it renders white-on-white in dark. Flip to the same card / field tokens used by .section-card so the Supports tab is legible. */ [data-theme="dark"] .sup-card, [data-theme="dark"] .sup-mode-card, [data-theme="dark"] .at-card-header, [data-theme="dark"] .sp-item-remove { background: #242424; border-color: rgba(255,255,255,.08); } [data-theme="dark"] .at-card { background: #1f1f1f; border-color: rgba(255,255,255,.08); } [data-theme="dark"] .sup-card.is-on, [data-theme="dark"] .sup-mode-card.is-on { background: rgba(192,87,59,.14); border-color: var(--app); } [data-theme="dark"] .sup-field input, [data-theme="dark"] .sup-field textarea, [data-theme="dark"] .sup-field input:focus, [data-theme="dark"] .sup-field textarea:focus, [data-theme="dark"] .sup-other-row input[type="text"], [data-theme="dark"] .sup-other-row input[type="text"]:focus, [data-theme="dark"] .at-cost-input { background: var(--field-bg); color: var(--tx); } [data-theme="dark"] .sup-field input[disabled], [data-theme="dark"] .sup-other-row input[disabled] { background: rgba(255,255,255,.04); color: var(--tx40); } [data-theme="dark"] .sp-item-remove:hover { background: rgba(192,87,59,.16); border-color: var(--app-bd); } [data-theme="dark"] .pill-opt { background: var(--field-bg); border-color: var(--bd2); } [data-theme="dark"] .pill-opt.sel-tier-low, [data-theme="dark"] .pill-opt.sel-risk-low { background: rgba(108,174,138,.22); color: #8fd1ab; border-color: rgba(108,174,138,.40); } [data-theme="dark"] .pill-opt.sel-tier-mid { background: rgba(217,154,58,.22); color: #e6b765; border-color: rgba(217,154,58,.40); } [data-theme="dark"] .pill-opt.sel-tier-high, [data-theme="dark"] .pill-opt.sel-risk-high { background: rgba(176,69,69,.22); color: #e89a9a; border-color: rgba(176,69,69,.40); } * { box-sizing: border-box; } textarea { font-family: inherit; font-size: 12px; color: var(--tx); width: 100%; padding: 7px 10px; border: 1px solid var(--bd2); border-radius: 7px; background: var(--field-bg); resize: vertical; min-height: 62px; } textarea:focus { outline: 2px solid var(--app-bd); background: #fff; border-color: var(--app-bd); } html, body { height: 100%; margin: 0; } body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif; color: var(--tx); background: var(--bg-grad-1); background-attachment: fixed; font-size: 12.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; } /* Sidebar push: shift the app right when the shared caw-sb rail expands on hover/focus/menu-open, mirroring the workspace at my/. Embedded mode (inside the iframe overlay) has no sidebar inside the iframe — the parent provides nav — so no push needed there. */ html.pr-standalone .app { padding-left: 70px; transition: padding-left .28s cubic-bezier(.4, 0, .2, 1); } html.pr-embedded .app { padding-left: 12.5px; } /* Shift the app right when the sidebar is clicked open. The existing transition: padding-left .28s on .app animates both directions. */ @media (min-width: 901px) { html.pr-standalone:has(.caw-sb.caw-sb-open) .app { padding-left: 250px; } } .app { display: flex; flex-direction: column; height: 100vh; padding: 12.5px 12.5px 12.5px 70px; gap: 11px; } /* ───── Top bar ─────────────────────────────────────────── */ /* The topbar mirrors the workspace split below (.main is 1fr / 2fr — chat on the left, artifact/editor on the right). Crumbs sit in the left half, the V1-fallback pill sits at the left edge of the right half (so it lines up vertically with the editor's Participant tab), and the right action cluster pushes to the far right via margin-left:auto. */ .topbar { display: grid; grid-template-columns: 1fr 2fr; align-items: center; padding: 3.5px 0; } .topbar-half-left { display: flex; align-items: center; padding: 0 10px 0 7px; min-width: 0; } /* Left padding = 1 (.summary border) + 7 (.summary-tabs padding) so V1's left edge lines up with the Participant tab below. */ .topbar-half-right { display: flex; align-items: center; padding: 0 7px 0 8px; gap: 7px; min-width: 0; } .topbar .actions-left { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 7px; } /* Narrower laptops (~1440px) can't fit all buttons at full width inside the 2fr right column. Collapse the save-status text to just its dot and tighten cluster gaps — recovers ~70px, which covers typical 1366–1500 laptop widths without breaking the V1 alignment with the Participant tab. */ @media (max-width: 1500px) and (min-width: 901px) { .topbar .actions { gap: 5px; } .topbar .actions-left { gap: 5px; } .topbar .save-status > span:not(.dot) { display: none; } .topbar .save-status { padding: 0 9px; gap: 0; } } .crumbs { display: flex; align-items: center; gap: 7px; color: var(--tx55); font-size: 11.5px; font-weight: 500; min-width: 0; flex-wrap: nowrap; } .crumb-logo { width: 20px; height: 20px; display: grid; place-items: center; color: var(--app); } .crumb-logo svg { width: 16px; height: 16px; } .crumb-logo img { width: 16px; height: 16px; object-fit: contain; display: block; } [data-theme="dark"] .crumb-logo img { content: url("https://my.capacoty.app/white-icon.png"); } .crumb-chip { width: 20px; height: 20px; border-radius: 5.5px; background: var(--app); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; } .crumb-title { display: flex; align-items: center; gap: 7px; color: var(--tx); font-weight: 600; font-size: 12.5px; min-width: 0; } .crumb-title svg { width: 14.5px; height: 14.5px; color: var(--tx55); flex-shrink: 0; } /* Keep the participant name on a single line — truncate with an ellipsis instead of wrapping to two rows on long names (and when the wider "Paediatric" badge is present). Full name stays available on hover (title attr) and in the Summary. */ #crumb-participant { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .chev { color: var(--tx40); } .v2-badge { margin-left: 3.5px; padding: 2px 7px; background: var(--voice-dim); color: var(--voice); border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .mode-badge { margin-left: 3.5px; padding: 2px 8px 2px 6.5px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 4.5px; } .mode-badge.adult { background: var(--app-dim); color: var(--app-strong); } .mode-badge.paed { background: rgba(86,119,163,.14); color: #36507a; } .mode-badge .dot { width: 5.5px; height: 5.5px; border-radius: 50%; background: currentColor; } /* ── Customise modal — assessor profile + branding. Ported from FCA v2's settings-grid / theme-pick / logo-row pattern so the two tools look identical when an OT switches between them. ── */ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12.5px 14.5px; } .settings-field { display: flex; flex-direction: column; gap: 5.5px; } .settings-field.full { grid-column: 1 / -1; } .settings-field label { font-size: 11px; font-weight: 500; color: var(--tx55); } .settings-field input[type="text"], .settings-field input[type="tel"], .settings-field input[type="email"], .settings-field textarea { font-family: inherit; font-size: 12.5px; background: var(--field-bg); border: 1px solid var(--field-bd); border-radius: 9px; padding: 9px 11px; color: var(--tx); outline: none; } .settings-field input:focus, .settings-field textarea:focus { background: #fff; border-color: var(--app-bd); box-shadow: 0 0 0 2.5px var(--app-dim); } .settings-hint { font-size: 10.5px; color: var(--tx55); margin: 3.5px 0 0 0; } .theme-pick { display: inline-flex; gap: 6.5px; flex-wrap: wrap; } .theme-pick button { width: 27px; height: 27px; border-radius: 999px; border: 2px solid transparent; background: var(--c, var(--app)); cursor: pointer; transition: transform .12s; } .theme-pick button:hover { transform: scale(1.08); } .theme-pick button.active { border-color: var(--tx); box-shadow: 0 0 0 2px var(--bg-grad-1), 0 0 0 3.5px var(--tx); } .logo-row { display: flex; gap: 12.5px; align-items: flex-start; } .logo-preview { width: 86.5px; height: 57.5px; background: var(--field-bg); border: 1px solid var(--field-bd); border-radius: 7px; display: grid; place-items: center; overflow: hidden; } .logo-preview .ph { font-size: 10px; color: var(--tx40); padding: 3.5px; text-align: center; } .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-actions { display: flex; flex-direction: column; gap: 5.5px; } @media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr; } } .progress-pill { margin-left: 9px; display: inline-flex; align-items: center; gap: 7px; padding: 3.5px 10px 3.5px 5.5px; background: var(--card); border: 1px solid var(--bd); border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--tx70); box-shadow: var(--shadow-sm); } .progress-bar { width: 50.5px; height: 4.5px; border-radius: 999px; background: var(--tx10); overflow: hidden; } .progress-bar > span { display: block; height: 100%; background: var(--app); border-radius: 999px; transition: width .3s; } /* ════════════════════════════════════════════════════════════ Topbar action cluster — flat-pill restyle (parity with FCA v2). All topbar pills share the same 32px height + 10px radius so the row reads as a single coherent control strip. Default: transparent + 1px grey border. Hover: white fill. Active: black with white text (toggled / pressed). Generate report stays loud: filled --app + rich multi-colour Google Docs glyph on the left. CSS rules are scoped to .actions (and unique IDs) so other .btn / .btn-primary usages elsewhere in the tool are untouched. ──────────────────────────────────────────────────────────── */ /* Save status — flat pill with status dot; darker font so the "Saved · 12s ago" / "Sign in to save" still reads clearly. Locked to the same height/line-height/border combo as the other topbar pills (32px tall, 30px line-height inside a 1px border) so the row is pixel-aligned. */ .save-status { display: inline-flex; align-items: center; gap: 7px; height: 32px; line-height: 30px; padding: 0 12px; background: transparent; border: 1px solid var(--bd); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--tx); box-shadow: none; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; transition: background .15s, border-color .15s, color .15s; } .save-status:hover { background: #fff; border-color: var(--bd2); } .save-status.is-active, .save-status:active { background: #000; color: #fff; border-color: #000; } .save-status.is-active .dot, .save-status:active .dot { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,.25); } /* Use-old-V1 — locked to the same height/line-height/border as the rest of the topbar pills, keeps warm fallback colours. */ .version-switch-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; line-height: 30px; padding: 0 12px; background: var(--warn-dim); color: var(--warn); border: 1px solid rgba(192, 87, 59, .35); border-radius: 10px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; transition: background .15s, color .15s, border-color .15s; } .version-switch-pill:hover { background: var(--warn); color: #fff; border-color: var(--warn); } .version-switch-pill svg { width: 14px; height: 14px; color: currentColor; flex-shrink: 0; } .save-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--app); box-shadow: 0 0 0 2.5px var(--app-dim); transition: background .2s, box-shadow .2s; } .save-status.saved .dot { background: #4caf6c; box-shadow: 0 0 0 2.5px rgba(76,175,108,.18); } .save-status.saving .dot { background: var(--warn); box-shadow: 0 0 0 2.5px var(--warn-dim); animation: pulse-dot 1.1s infinite; } .save-status.unsaved .dot { background: var(--tx40); box-shadow: 0 0 0 2.5px var(--tx10); } .save-status.error .dot { background: var(--warn); box-shadow: 0 0 0 2.5px var(--warn-dim); } .save-status.signed-out .dot { background: var(--tx40); box-shadow: 0 0 0 2.5px var(--tx10); } @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } } .actions { display: flex; justify-content: flex-end; gap: 7px; } /* Base .btn — kept for general usage elsewhere in the tool. */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11.5px; border-radius: 9px; background: var(--card); border: 1px solid var(--bd); color: var(--tx); font-size: 11.5px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-sm); font-family: inherit; } .btn:hover { border-color: var(--bd2); } .btn svg { width: 13.5px; height: 13.5px; color: var(--tx55); } .btn-primary { background: var(--app); color: #fff; border-color: var(--app); } .btn-primary:hover { background: var(--app-strong); border-color: var(--app-strong); } .btn-primary svg { color: rgba(255,255,255,.85); } .btn-ghost { background: transparent; box-shadow: none; } .btn-disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; } /* Topbar-scoped .btn overrides — flat pill, transparent → white → black. Locked to the same 32px height + 30px line-height as the other topbar pills so every height is pixel-identical. */ .actions .btn { height: 32px; line-height: 30px; padding: 0 12px; background: transparent; border: 1px solid var(--bd); border-radius: 10px; color: var(--tx); font-size: 12px; font-weight: 500; box-sizing: border-box; box-shadow: none; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, border-color .15s, color .15s; } .actions .btn svg { width: 14px; height: 14px; color: var(--tx55); transition: color .15s; flex-shrink: 0; } .actions .btn:hover { background: #fff; border-color: var(--bd2); } .actions .btn.is-active, .actions .btn:active { background: #000; color: #fff; border-color: #000; } .actions .btn.is-active svg, .actions .btn:active svg { color: #fff; } .actions .btn.topbar-label-btn { padding: 0 12px; } /* Generate report — primary CTA. Filled --app + soft shadow. Locked to the same 32px height as the rest of the topbar. */ #btn-generate { height: 32px; line-height: 30px; padding: 0 13px 0 10px; border-radius: 10px; background: var(--app); border: 1px solid var(--app); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(30, 141, 141, .25); gap: 8px; box-sizing: border-box; display: inline-flex; align-items: center; } #btn-generate:hover { background: var(--app-strong); border-color: var(--app-strong); box-shadow: 0 2px 6px rgba(30, 141, 141, .32); } #btn-generate .gdocs-icon { width: 15px; height: 15px; flex-shrink: 0; } #btn-generate > svg:not(.gdocs-icon) { width: 12px; height: 12px; color: rgba(255,255,255,.85); } /* Generate button — gated state when required fields are still missing. Mirrors FCA v2's pattern: visually muted + a "N missing" hint, but the button stays clickable so a click scrolls / switches to the first missing field's tab instead of opening the generate flow. */ #btn-generate.btn-gate { background: var(--field-bg, #f6f4ef); color: var(--tx55, rgba(14,21,48,.55)); border-color: var(--bd2); box-shadow: none; } #btn-generate.btn-gate .gdocs-icon { opacity: .5; } #btn-generate.btn-gate > svg:not(.gdocs-icon) { color: var(--tx55, rgba(14,21,48,.55)); } #btn-generate.btn-gate:hover { background: var(--tx10); border-color: var(--tx20); color: var(--tx, #0e1530); } #btn-generate .gen-hint { display: none; font-size: 10.5px; font-weight: 600; margin-left: 1px; padding: 2px 7px; border-radius: 999px; background: rgba(192,87,59,.14); color: #7a2a14; letter-spacing: .02em; } #btn-generate.btn-gate .gen-hint { display: none; } .topbar-label-btn span { font-size: 12px; } /* ───── Main split ───────────────────────────────────────── */ /* Chat / summary ratio is 1fr / 2fr so the summary (right pane) gets ~67% of the workspace — the OT spends most of their time there filling/editing the assessment fields, not in the chat. */ .main { flex: 1; display: grid; grid-template-columns: 1fr 2fr; min-height: 0; } /* ───── Chat panel (left) ───────────────────────────────── */ /* min-width: 0 prevents this grid item's intrinsic min-content from pushing the columns away from the 1fr/2fr ratio — without it, message bubbles can grow the chat column wider than 1fr and the topbar (which uses the same ratio) would no longer line up. */ .chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 3.5px 21.5px 5.5px 7px; } .chat-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12.5px; padding: 21.5px 3.5px 16px 3.5px; scroll-behavior: smooth; } .session-marker { align-self: stretch; display: flex; align-items: center; gap: 9px; margin: 2px 0 3.5px 0; font-size: 10.5px; font-weight: 500; color: var(--tx40); text-transform: uppercase; letter-spacing: 0.05em; } .session-marker::before, .session-marker::after { content: ""; flex: 1; height: 1px; background: var(--bd); } .msg-user-row { align-self: flex-end; display: flex; align-items: flex-end; gap: 7px; max-width: 90%; } .msg-user-row .msg-user { align-self: auto; max-width: none; } .msg-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: #d4f564; color: #0a0a0a; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; letter-spacing: -.02em; line-height: 1; } .msg-user { align-self: flex-end; max-width: 82%; background: var(--card); border: 1px solid var(--bd2); border-radius: 14.5px 14.5px 3.5px 14.5px; padding: 10px 14.5px; font-size: 12px; color: var(--tx); box-shadow: var(--shadow-sm); } .msg-user.voice { background: linear-gradient(180deg, #f4eef8 0%, #ede4f5 100%); border-color: var(--voice-bd); max-width: 88%; } .msg-user.voice .voice-head { display: flex; align-items: center; gap: 6.5px; font-size: 10px; font-weight: 600; color: var(--voice); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6.5px; } .msg-asst { align-self: flex-start; max-width: 88%; background: #ececec; border: 1px solid var(--bd2); border-radius: 14.5px 14.5px 14.5px 3.5px; padding: 10px 14.5px; font-size: 12px; color: #222; line-height: 1.55; } .msg-asst strong { color: var(--tx); font-weight: 600; } .msg-asst .asst-list { margin: 5.5px 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2.5px; } .msg-asst .asst-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--tx70); } /* Typing-dots indicator — mirrors FCA v2 so the three v2 tools share the same idle-spinner visual while waiting on extract / polish. */ .typing-dots { display: inline-flex; gap: 2.5px; padding: 0 3.5px; vertical-align: middle; } .typing-dots span { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--tx40); animation: typing 1.2s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: .15s; } .typing-dots span:nth-child(3) { animation-delay: .30s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-2.5px); opacity: 1; } } /* Tool/system chip — "Updated draft · N fields" style. Ported from FCA v2. */ .msg-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--bd); border-radius: 999px; padding: 6.5px 12.5px 6.5px 7px; font-size: 11px; font-weight: 500; color: var(--tx70); box-shadow: var(--shadow-sm); max-width: 100%; } .msg-tool .tool-icon { width: 18px; height: 18px; display: grid; place-items: center; background: var(--app-dim); color: var(--app); border-radius: 5.5px; } .msg-tool .tool-icon svg { width: 11px; height: 11px; } .msg-tool .tool-meta { color: var(--tx40); font-weight: 400; padding-left: 2px; } /* Chat composer — mirrors FCA v2's .composer shape. Pill-style dictate CTAs on the left, circular send button on the right. */ .composer { margin-top: 3.5px; background: var(--card); border: 1px solid var(--bd); border-radius: 16px; padding: 11px 11px 9px 14.5px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 7px; } .composer.listening { border-color: var(--app-bd); box-shadow: 0 0 0 3.5px var(--app-dim), var(--shadow-md); } .composer-input { border: 0; outline: none; background: transparent; width: 100%; font-family: inherit; font-size: 12.5px; color: var(--tx); padding: 5.5px 0; line-height: 1.5; } .composer-input::placeholder { color: var(--tx40); } .composer-row { display: flex; justify-content: space-between; align-items: center; } .composer-tools { display: flex; gap: 5px; flex-wrap: wrap; } .send { width: 30.5px; height: 30.5px; border-radius: 999px; background: #1a1a18; color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; } .send svg { width: 12.5px; height: 12.5px; } .dictate-cta { display: inline-flex; align-items: center; gap: 7px; padding: 6.5px 11px; background: var(--voice-dim); color: var(--voice); border: 1px solid var(--voice-bd); border-radius: 999px; font-size: 11px; font-weight: 500; font-family: inherit; cursor: pointer; } .dictate-cta:hover { background: rgba(109,76,176,.15); } .dictate-cta svg { width: 12.5px; height: 12.5px; } .dictate-cta--quick { background: var(--tx10); color: var(--tx70); border-color: var(--bd); } .dictate-cta--quick:hover { background: rgba(26,26,24,.07); color: var(--tx); } .dictate-cta--quick.dictate-active, .dictate-cta.dictate-active { background: var(--app); border-color: var(--app); color: #fff; } .btn-kbd { font-size: 9.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.06); color: inherit; line-height: 1.3; } .dictate-cta.dictate-active .btn-kbd, .dictate-cta--quick.dictate-active .btn-kbd { background: rgba(255,255,255,.22); } .dictate-status { display: none; align-items: center; gap: 9px; padding: 0 2px; font-size: 11px; color: var(--app-strong); } .composer.listening .dictate-status { display: flex; } .dictate-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12.5px; } .dictate-bars span { display: block; width: 2px; border-radius: 1px; background: var(--app); animation: bars 0.9s infinite ease-in-out; } .dictate-bars span:nth-child(1) { height: 30%; animation-delay: 0s; } .dictate-bars span:nth-child(2) { height: 80%; animation-delay: .12s; } .dictate-bars span:nth-child(3) { height: 55%; animation-delay: .24s; } .dictate-bars span:nth-child(4) { height: 95%; animation-delay: .36s; } .dictate-bars span:nth-child(5) { height: 40%; animation-delay: .48s; } @keyframes bars { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.4); } } /* Suggestion chips above the input */ .suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; } .suggestion-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--bd2); background: var(--card); font-size: 11px; color: var(--tx70); cursor: pointer; box-shadow: var(--shadow-sm); } .suggestion-chip:hover { border-color: var(--app-bd); color: var(--app-strong); } /* "Review {tab} →" chips emitted in the post-dictation routing summary. Mirrors .suggestion-chip but with an app-coloured accent so the OT reads them as primary CTAs rather than optional suggestions. */ .route-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--app-bd); background: var(--app-dim); font-size: 11px; font-weight: 600; color: var(--app-strong); font-family: inherit; cursor: pointer; transition: background .12s, border-color .12s; } .route-chip:hover { background: var(--app); color: #fff; border-color: var(--app); } /* ───── Summary panel (right) ─────────────────────────────── */ /* min-width: 0 — see matching note on .chat. Together these keep the .main grid honouring its 1fr/2fr ratio, so the topbar (which uses the same ratio) lines up above the editor. */ .summary { background: var(--card); border: 1px solid var(--bd); border-radius: 18px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; } .summary-tabs { display: flex; gap: 0; padding: 4px 7px 0 7px; background: linear-gradient(180deg, #fbfaf5 0%, #f6f4ee 100%); border-bottom: 1px solid var(--bd); } .summary-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; cursor: pointer; font-size: 11.5px; font-weight: 500; color: var(--tx55); border: 1px solid transparent; border-bottom: none; border-radius: 9px 9px 0 0; background: transparent; position: relative; top: 1px; } .summary-tab:hover { color: var(--tx70); } .summary-tab.active { background: var(--card); border-color: var(--bd); color: var(--tx); font-weight: 600; } .summary-tab .tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tx20); } .summary-tab.active .tab-dot, .summary-tab.done .tab-dot { background: #4caf6c; } .summary-tab.partial .tab-dot { background: var(--warn); } .summary-body { flex: 1; overflow-y: auto; padding: 16px 18px 22px; } .summary-heading { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--tx); margin: 2px 0 4px 0; } .summary-sub { font-size: 11.5px; color: var(--tx55); margin: 0 0 13px 0; line-height: 1.5; } /* Pre-flight modal — quick quality scan before generate (HAL pattern). Five severity buckets: ok (green), info (neutral), warn (amber), error (red — blocks confirm). Each row has an icon, label, detail line, and an optional "Jump" button that closes the modal and switchTab()s to the offending tab. */ .pfm-check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--bd); background: var(--card, #fff); font-size: 11.5px; } .pfm-check.ok { border-color: rgba(50,126,88,.18); background: rgba(50,126,88,.04); } .pfm-check.info { border-color: var(--bd); } .pfm-check.warn { border-color: rgba(217,154,58,.30); background: rgba(217,154,58,.06); } .pfm-check.error { border-color: rgba(192,87,59,.30); background: rgba(192,87,59,.06); } .pfm-icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px; } .pfm-check.ok .pfm-icon { background: var(--app); } .pfm-check.info .pfm-icon { background: var(--tx40, #888); } .pfm-check.warn .pfm-icon { background: #d99a3a; } .pfm-check.error .pfm-icon { background: #c0573b; } .pfm-body { flex: 1; min-width: 0; } .pfm-label { font-weight: 600; color: var(--tx); margin-bottom: 1px; } .pfm-detail { font-size: 11px; color: var(--tx55); line-height: 1.5; } .pfm-jump { flex-shrink: 0; align-self: center; background: transparent; border: 1px solid var(--bd); border-radius: 6px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; color: var(--tx70); cursor: pointer; font-family: inherit; } .pfm-jump:hover { border-color: var(--app); color: var(--app-strong); } /* Supports tab — v1-parity UX. Catalogue-driven checkbox grid; per-item expand below the checkbox. Three streams use the same `.sup-card` skeleton with stream-specific content. AT mode picker (`.sup-mode-card`) uses 3 radio cards in a row. The is-on state lifts the selected card with a tinted border. */ .sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } @media (max-width: 720px) { .sup-grid { grid-template-columns: 1fr; } } .sup-card { background: #fff; border: 1px solid var(--bd); border-radius: 8px; padding: 8px 10px; transition: border-color .12s, background-color .12s; } .sup-card.is-on { border-color: var(--app); background: rgba(192,87,59,.04); } .sup-card-head { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--tx); } .sup-card-head input[type="checkbox"] { accent-color: var(--app); } .sup-card-label { flex: 1; min-width: 0; } .sup-card-expand { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bd); display: flex; flex-direction: column; gap: 7px; } .sup-card-expand--two { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; } @media (max-width: 720px) { .sup-card-expand--two { grid-template-columns: 1fr; } } .sup-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--tx70); } .sup-field span { font-weight: 500; } .sup-field input, .sup-field textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--bd); border-radius: 6px; background: #fcfbf6; font-family: inherit; font-size: 12.5px; color: var(--tx); line-height: 1.5; } .sup-field input:focus, .sup-field textarea:focus { outline: 2px solid var(--app); outline-offset: -1px; background: #fff; } .sup-field input[disabled] { background: #f4f1e6; color: var(--tx55); cursor: not-allowed; } .sup-field.is-disabled span { color: var(--tx40); } .sup-field--narrow input { width: 100%; } .sup-field--checkbox { flex-direction: row; align-items: center; gap: 7px; font-size: 12px; } .sup-field--checkbox input { accent-color: var(--app); } .sup-mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; } @media (max-width: 720px) { .sup-mode-row { grid-template-columns: 1fr; } } .sup-mode-card { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; cursor: pointer; } .sup-mode-card.is-on { border-color: var(--app); background: rgba(192,87,59,.04); } .sup-mode-card input[type="radio"] { accent-color: var(--app); margin-top: 2px; flex-shrink: 0; } .sup-mode-title { font-weight: 600; font-size: 12.5px; color: var(--tx); margin-bottom: 2px; } .sup-mode-hint { font-size: 11px; color: var(--tx55); line-height: 1.5; } .sup-subhead { margin: 14px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tx55); } .sup-empty-note { margin: 6px 0; font-size: 11.5px; color: var(--tx55); line-height: 1.55; font-style: italic; } .sup-other-row { display: grid; grid-template-columns: 2fr auto 1fr 22px; gap: 6px; align-items: center; margin-top: 6px; } @media (max-width: 720px) { .sup-other-row { grid-template-columns: 1fr; } } .sup-other-row input[type="text"] { padding: 6px 8px; border: 1px solid var(--bd); border-radius: 6px; background: #fcfbf6; font-family: inherit; font-size: 12px; } .sup-other-row input[type="text"]:focus { outline: 2px solid var(--app); outline-offset: -1px; background: #fff; } .sup-other-row input[disabled] { background: #f4f1e6; color: var(--tx55); } /* ── Money input: a locked "$" prefix sits in front of the field so the OT types the amount only (e.g. 10.99). The "$" is a non-editable sibling, not part of the input, so it can never be deleted; the report adds its own "$" too. .is-block stretches the wrapper across full-width fields. ── */ .money-field { position: relative; display: inline-flex; align-items: stretch; } .money-field.is-block { display: flex; width: 100%; } .money-field.is-block > input { width: 100%; } .money-field > .money-pre { position: absolute; left: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; color: var(--tx40); pointer-events: none; z-index: 1; } .money-field > input { padding-left: 17px !important; } .sup-other-field { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tx70); } .sup-other-field input { accent-color: var(--app); } .sup-card--cons { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; } .sup-card-cons-cost { font-size: 11px; color: var(--tx55); text-align: right; white-space: nowrap; } .sp-item-remove { appearance: none; width: 22px; height: 22px; border: 1px solid var(--bd); border-radius: 6px; background: #fff; color: var(--tx55); font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sp-item-remove:hover { color: #8e3a32; border-color: #e7c4c0; background: #fdf6f5; } /* Section card pattern (used inside each tab pane) */ .section-card { background: #fcfbf6; border: 1px solid var(--bd); border-radius: 12px; padding: 13px 14.5px; margin-bottom: 12px; } .section-card h3 { margin: 0 0 8px 0; font-size: 12.5px; font-weight: 600; color: var(--tx); display: flex; align-items: center; gap: 6.5px; } .section-card .hint { font-size: 10.5px; color: var(--tx55); font-weight: 400; } .section-card .partial-badge { margin-left: auto; font-size: 9.5px; font-weight: 600; color: var(--warn); background: var(--warn-dim); padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } /* Field row (label / value) */ .row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--tx10); } .row:last-child { border-bottom: none; } .row-label { flex: 0 0 130px; font-size: 11.5px; font-weight: 500; color: var(--tx55); } .row-label .req { color: var(--warn); margin-left: 2px; } .row-value { flex: 1; font-size: 12px; color: var(--tx); padding: 3px 6px; border-radius: 5px; cursor: text; min-height: 22px; white-space: pre-wrap; word-break: break-word; } .row-value.empty { color: var(--tx40); font-style: italic; } .row-value:focus, .row-value[contenteditable="true"]:focus { outline: 2px solid var(--app-bd); background: #fff; } .row-value:hover:not([contenteditable="true"]) { background: var(--tx10); } .row-meta { font-size: 9.5px; padding: 2px 6px; border-radius: 999px; background: var(--chat-fill); color: var(--app); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .row-meta.voice { background: var(--voice-dim); color: var(--voice); } /* AT Items table */ /* AT items — card stack */ .at-card { border: 1px solid var(--bd2); border-radius: 10px; background: #fafaf7; margin-bottom: 8px; overflow: hidden; } .at-card-header { display: flex; align-items: center; gap: 10px; padding: 9px 12px 8px; border-bottom: 1px solid var(--bd); background: #fff; } .at-card-num { font-size: 10px; color: var(--tx40); font-weight: 600; min-width: 16px; } .at-card-name { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--tx); padding: 0; outline: none; } .at-card-name::placeholder { color: var(--tx40); font-weight: 400; } .at-card-name:focus { color: var(--app-strong); } .at-cost-badge { display: flex; align-items: center; gap: 5px; } .at-cost-badge > span { font-size: 10px; color: var(--tx40); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .at-cost-input { border: 1px solid var(--bd2); border-radius: 6px; padding: 3px 7px; font-family: inherit; font-size: 11.5px; color: var(--tx); background: #fff; width: 84px; text-align: right; outline: none; } .at-cost-input:focus { border-color: var(--app-bd); } .at-card-remove { background: transparent; border: none; cursor: pointer; color: var(--tx40); font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 4px; } .at-card-remove:hover { color: var(--warn); background: var(--warn-dim); } .at-card-body { padding: 9px 12px 10px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start; } .at-meta-group { display: flex; flex-direction: column; gap: 4px; } .at-meta-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tx40); } .pill-row { display: flex; gap: 4px; flex-wrap: wrap; } .pill-opt { padding: 3px 11px; border-radius: 999px; border: 1px solid var(--bd2); background: #fff; color: var(--tx55); font-size: 10.5px; font-weight: 500; cursor: pointer; white-space: nowrap; user-select: none; transition: all .1s; } .pill-opt:hover { border-color: var(--app-bd); color: var(--app); } .pill-opt.sel-tier-low { background: rgba(108,174,138,.15); color: #2f6e4e; border-color: rgba(108,174,138,.30); } .pill-opt.sel-tier-mid { background: rgba(217,154,58,.15); color: #8a5e1a; border-color: rgba(217,154,58,.30); } .pill-opt.sel-tier-high { background: rgba(176,69,69,.14); color: #862c2c; border-color: rgba(176,69,69,.25); } .pill-opt.sel-risk-low { background: rgba(108,174,138,.15); color: #2f6e4e; border-color: rgba(108,174,138,.30); } .pill-opt.sel-risk-high { background: rgba(176,69,69,.14); color: #862c2c; border-color: rgba(176,69,69,.25); } .pill-opt.sel-yes { background: var(--app-dim); color: var(--app-strong); border-color: var(--app-bd); } .pill-opt.sel-no { background: var(--tx10); color: var(--tx55); border-color: var(--bd2); font-weight: 600; } .at-card-just-row { padding: 0 12px; border-top: 1px solid var(--bd); } .at-card-just-row input { width: 100%; border: none; background: transparent; font-family: inherit; font-size: 11px; color: var(--tx55); padding: 7px 0; outline: none; } .at-card-just-row input::placeholder { color: var(--tx40); } .at-empty { padding: 14px; text-align: center; font-size: 11.5px; color: var(--tx55); border: 1px dashed var(--bd2); border-radius: 9px; background: #fbfbf6; } /* Rich empty-state — ported from FCA v2 for the Assessments tab so the first impression matches across tools (icon + heading + body). The existing `.at-empty` stays for AT items + AT features which use a more compact dashed-border treatment. */ .empty-state { display: flex; flex-direction: column; align-items: center; padding: 32.5px 18px 25px; text-align: center; color: var(--tx55); } .empty-state .ico { width: 50.5px; height: 50.5px; border-radius: 12.5px; background: var(--field-bg); color: var(--tx40); display: grid; place-items: center; margin-bottom: 11px; } .empty-state .ico svg { width: 21.5px; height: 21.5px; } .empty-state .es-title { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif; font-size: 16px; font-weight: 500; color: var(--tx); margin-bottom: 5.5px; } .empty-state .es-body { font-size: 12px; line-height: 1.55; max-width: 40ch; margin-bottom: 12.5px; } .at-quote-warn { margin-top: 9px; display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; border-radius: 8px; background: var(--warn-dim); color: #813a23; font-size: 11px; line-height: 1.45; border: 1px solid rgba(192,87,59,.20); } .at-quote-warn svg { width: 13.5px; height: 13.5px; flex-shrink: 0; margin-top: 1.5px; color: var(--warn); } .add-row-btn { margin-top: 7px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--card); border: 1px dashed var(--bd2); color: var(--tx70); font-size: 11.5px; cursor: pointer; font-family: inherit; } .add-row-btn:hover { border-color: var(--app-bd); color: var(--app-strong); } /* Inline ✨ Polish button — injected after every textarea by wireTabEvents */ .polish-bubble { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2.5px 7px; border-radius: 999px; background: var(--voice-dim); color: var(--voice); border: 1px solid var(--voice-bd); font-size: 9.5px; font-weight: 600; cursor: pointer; opacity: .55; transition: opacity .15s; text-transform: uppercase; letter-spacing: 0.04em; user-select: none; line-height: 1; } .polish-bubble:hover { opacity: 1; } .polish-host { position: relative; } /* LOA row — Function tab (P3c). Compact row pattern: bold task label above a 3-column grid (LOA / aids / recommendation). Used across Physical, Personal ADL, IADL, and Communication & Cognition. */ .loa-row { margin: 0 0 10px; } .loa-row:last-child { margin-bottom: 0; } .loa-row-label { font-size: 11.5px; font-weight: 600; color: var(--tx); margin: 0 0 5px; display: flex; align-items: baseline; gap: 6px; } .loa-row-label .hint { font-size: 10.5px; font-weight: 500; color: var(--tx55); } .loa-row-grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1.8fr; gap: 6px 8px; } .loa-row-grid > select, .loa-row-grid > input[type="text"], .loa-row-grid > input[type="number"] { width: 100%; padding: 6px 9px; border: 1px solid var(--bd2); border-radius: 7px; font-family: inherit; font-size: 12px; color: var(--tx); background: var(--field-bg); } .loa-row-grid > select:focus, .loa-row-grid > input:focus { outline: 2px solid var(--app-bd); background: #fff; border-color: var(--app-bd); } /* Special rows (falls, pressure injury, ROM/strength, continence) lay out in a wider 2-column inner grid for their bespoke field sets. */ .loa-row.special .loa-row-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; } .loa-row.special .loa-row-grid > .field-pair { display: flex; flex-direction: column; gap: 3px; } .loa-row.special .loa-row-grid > .field-pair > label { font-size: 10.5px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: 0.04em; } .loa-row.special .loa-row-grid > .field-pair > input, .loa-row.special .loa-row-grid > .field-pair > select { padding: 6px 9px; border: 1px solid var(--bd2); border-radius: 7px; font-family: inherit; font-size: 12px; color: var(--tx); background: var(--field-bg); } .loa-row.special .pi-risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; grid-column: 1 / -1; font-size: 11.5px; color: var(--tx); } .loa-row.special .pi-risk-grid label { display: flex; align-items: center; gap: 6px; } .loa-row.special .rec-row { grid-column: 1 / -1; } /* Form controls inside the summary */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 13px; } .form-field { display: flex; flex-direction: column; gap: 4px; } .form-field > label { font-size: 10.5px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: 0.04em; } .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field select, .form-field textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--bd2); border-radius: 7px; font-family: inherit; font-size: 12px; color: var(--tx); background: var(--field-bg); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--app-bd); background: #fff; border-color: var(--app-bd); } .form-field textarea { min-height: 60px; resize: vertical; } .yn-group { display: inline-flex; gap: 4px; padding: 3px; background: var(--tx10); border-radius: 999px; } .yn-btn { padding: 4px 12px; font-size: 11px; font-weight: 600; border-radius: 999px; cursor: pointer; color: var(--tx55); border: 1px solid transparent; } .yn-btn.active-yes { background: var(--app); color: #fff; border-color: var(--app); } .yn-btn.active-no { background: var(--card); color: var(--tx); border-color: var(--bd2); } /* ───── Assessments + Goals tab styling — backfilled 2026-05-28 for the classes shipped without CSS in commits 9108452 (Assessments UX → FCA shape) and 43d2ec8 (§B.3 Goals/Supports tab UIs). ───── */ /* Picker modal — rows + add button */ .ax-add-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 13px; border-radius: 9px; background: var(--app); color: #fff; border: 1px solid var(--app); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); white-space: nowrap; } .ax-add-btn:hover { background: var(--app-strong); border-color: var(--app-strong); } .ax-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--bd); border-radius: 9px; background: var(--card); color: var(--tx); cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; } .ax-pick-row:hover { border-color: var(--app-bd); background: var(--app-dim); } .ax-pick-row.is-added, .ax-pick-row[disabled] { opacity: .55; cursor: not-allowed; background: var(--field-bg); } .ax-pick-row.is-added:hover, .ax-pick-row[disabled]:hover { border-color: var(--bd); background: var(--field-bg); } .ax-pick-row .ap-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .ax-pick-row .ap-row-label { font-size: 12.5px; font-weight: 600; color: var(--tx); } .ax-pick-row .ap-row-desc { font-size: 11px; color: var(--tx55); line-height: 1.4; } .ax-pick-row .ap-row-state { font-size: 10.5px; font-weight: 600; color: var(--tx55); padding: 3px 8px; border-radius: 999px; background: var(--tx10); white-space: nowrap; } .ax-pick-row .ap-row-state--add { color: var(--app-strong); background: var(--app-dim); } /* Assessment toolbar + pills */ .ax-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px 0; flex-wrap: wrap; } .ax-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; } .ax-pills-empty { font-size: 11.5px; color: var(--tx55); } .ax-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1px solid var(--bd2); background: var(--card); font-family: inherit; font-size: 11px; color: var(--tx); cursor: pointer; } .ax-pill:hover { border-color: var(--app-bd); } .ax-pill-name { white-space: nowrap; } .ax-pill-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; font-size: 14px; line-height: 1; color: var(--tx55); cursor: pointer; background: transparent; } .ax-pill-x:hover { background: var(--bd); color: var(--tx); } /* Assessment cards (the per-instrument scoring cards) */ .ax-cards { display: flex; flex-direction: column; gap: 12px; } .ax-empty { padding: 24px 20px; border: 1px dashed var(--bd2); border-radius: 12px; background: var(--field-bg); text-align: center; font-size: 12.5px; color: var(--tx70); } .ax-empty p { margin: 0; } .ax-card { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; } .ax-card-head { display: flex; align-items: flex-start; gap: 8px; } .ax-card-title-wrap { flex: 1; min-width: 0; } .ax-card-title { font-size: 13px; font-weight: 600; color: var(--tx); } .ax-card-subtitle { font-size: 11px; color: var(--tx55); margin-top: 2px; } .ax-card-remove { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--tx55); font-size: 16px; line-height: 1; cursor: pointer; } .ax-card-remove:hover { background: var(--bd); color: var(--tx); } .ax-card-body { display: flex; flex-direction: column; gap: 8px; } .ax-meta-row { font-size: 10.5px; color: var(--tx55); margin-top: 4px; } .ax-sev-row { font-size: 11px; color: var(--tx70); } .score-rows { display: flex; flex-direction: column; gap: 6px; } .ax-items-toggle { align-self: flex-start; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--bd); background: var(--field-bg); font-family: inherit; font-size: 11px; color: var(--tx70); cursor: pointer; } .ax-items-toggle:hover { border-color: var(--app-bd); color: var(--tx); } .ax-comments { display: flex; flex-direction: column; gap: 4px; } .ax-comments span { font-size: 11px; color: var(--tx70); font-weight: 500; } .ax-comments textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--bd); border-radius: 8px; background: var(--field-bg); color: var(--tx); font-family: inherit; font-size: 12px; line-height: 1.45; resize: vertical; } .ax-comments textarea:focus { outline: 2px solid var(--app-bd); } /* Goal cards (active + inactive) */ .gl-card { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; } .gl-card--inactive { background: var(--field-bg); } .gl-card-head { display: flex; align-items: center; gap: 8px; } .gl-card-slot { font-size: 10.5px; font-weight: 600; color: var(--app-strong); background: var(--app-dim); padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .gl-card-slot--inactive { color: var(--tx55); background: var(--bd); } .gl-card-status { margin-left: auto; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--bd); background: var(--field-bg); font-family: inherit; font-size: 11.5px; color: var(--tx); cursor: pointer; } .gl-card-menu { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--bd); background: var(--field-bg); color: var(--tx55); font-size: 13px; line-height: 1; cursor: pointer; } .gl-card-menu:hover { border-color: var(--app-bd); color: var(--tx); background: var(--app-dim); } .gl-card-stmt { display: flex; flex-direction: column; gap: 4px; } .gl-card-stmt span { font-size: 11px; color: var(--tx70); font-weight: 500; } .gl-card-stmt textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--bd); border-radius: 8px; background: var(--field-bg); color: var(--tx); font-family: inherit; font-size: 12px; line-height: 1.45; resize: vertical; } .gl-card-stmt textarea:focus { outline: 2px solid var(--app-bd); } .gl-card-progress { display: flex; flex-direction: column; gap: 6px; } .gl-card-progress-label { font-size: 11px; color: var(--tx70); font-weight: 500; } .gl-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .gl-bullet { display: flex; align-items: flex-start; gap: 6px; } .gl-bullet-dot { color: var(--tx55); font-size: 13px; line-height: 1.6; flex-shrink: 0; } .gl-bullet textarea { flex: 1; padding: 6px 9px; border: 1px solid var(--bd); border-radius: 7px; background: var(--field-bg); color: var(--tx); font-family: inherit; font-size: 12px; line-height: 1.45; resize: vertical; } .gl-bullet textarea:focus { outline: 2px solid var(--app-bd); } .gl-bullet-remove { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--tx55); font-size: 13px; line-height: 1; cursor: pointer; flex-shrink: 0; } .gl-bullet-remove:hover { background: var(--bd); color: var(--tx); } .gl-bullet-add { align-self: flex-start; padding: 5px 10px; border-radius: 7px; border: 1px dashed var(--bd2); background: transparent; font-family: inherit; font-size: 11px; color: var(--tx70); cursor: pointer; } .gl-bullet-add:hover { border-color: var(--app-bd); color: var(--app-strong); } .gl-add-btn { display: inline-flex; align-items: center; margin-top: 8px; padding: 7px 13px; border-radius: 9px; background: var(--app); color: #fff; border: 1px solid var(--app); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); } .gl-add-btn:hover { background: var(--app-strong); border-color: var(--app-strong); } .gl-add-btn[disabled] { opacity: .5; cursor: not-allowed; } .btn-secondary.gl-add-btn { background: var(--field-bg); color: var(--tx); border-color: var(--bd); } .btn-secondary.gl-add-btn:hover { border-color: var(--app-bd); background: var(--app-dim); } .gl-empty-note { font-size: 11.5px; color: var(--tx55); padding: 6px 0; margin: 0 0 8px 0; } .gl-cap-hint { display: block; font-size: 10.5px; color: var(--tx55); margin-top: 5px; } /* Per-instrument score rows + chips + items panel — backfilled 2026-05-29 for classes from _prBuildAxCard / _prItemControl that ship in commits 9108452 + 43d2ec8 without matching CSS. */ .score-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .score-label { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--tx); } .score-max { font-size: 11px; color: var(--tx55); } .ax-req { color: var(--app); font-weight: 700; } .score-input { width: 80px; padding: 6px 9px; border: 1px solid var(--bd); border-radius: 7px; background: var(--field-bg); color: var(--tx); font-family: inherit; font-size: 12.5px; font-weight: 500; text-align: right; } .score-input:focus { outline: 2px solid var(--app-bd); background: var(--card); } .score-input[readonly] { background: var(--tx10); color: var(--tx55); cursor: default; } .ax-meta-chip { display: inline-block; font-size: 10px; font-weight: 600; color: var(--tx55); background: var(--tx10); padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; } .ax-sev { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } /* Severity-chip colours keyed to the sevFn class suffixes the configs actually emit (none / mild / mod / sev / ext / info). */ .ax-sev--none { background: rgba(60,140,90,.12); color: #2f6f4c; } .ax-sev--ok { background: rgba(60,140,90,.12); color: #2f6f4c; } .ax-sev--mild { background: var(--app-dim); color: var(--app-strong); } .ax-sev--mod { background: var(--warn-dim); color: var(--warn); } .ax-sev--sev { background: var(--warn-dim); color: var(--warn); } .ax-sev--ext { background: var(--warn); color: #fff; } .ax-sev--info { background: var(--tx10); color: var(--tx70); } .ax-items-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-top: 4px; background: var(--field-bg); border: 1px solid var(--bd); border-radius: 9px; } .ax-items-hint { font-size: 11px; color: var(--tx70); line-height: 1.45; padding-bottom: 4px; border-bottom: 1px dashed var(--bd); } .ax-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .ax-item-label { flex: 1; min-width: 0; font-size: 11.5px; color: var(--tx); } .ax-item-select { padding: 5px 8px; border-radius: 7px; border: 1px solid var(--bd); background: var(--card); color: var(--tx); font-family: inherit; font-size: 11.5px; cursor: pointer; min-width: 140px; } .ax-item-select:focus { outline: 2px solid var(--app-bd); } .ax-item-text { flex: 1 1 220px; min-width: 180px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--bd); background: var(--card); color: var(--tx); font-family: inherit; font-size: 11.5px; } .ax-item-text:focus { outline: 2px solid var(--app-bd); } .ax-range { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .ax-item-range { width: 160px; accent-color: var(--app); } .ax-range-val { font-size: 11.5px; font-weight: 600; color: var(--tx); min-width: 40px; text-align: right; } .ax-chips { display: inline-flex; gap: 4px; flex-shrink: 0; } .ax-chip { min-width: 28px; padding: 4px 8px; border: 1px solid var(--bd); border-radius: 7px; background: var(--card); color: var(--tx70); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .12s; } .ax-chip:hover { border-color: var(--app-bd); color: var(--tx); } .ax-chip.is-on { background: var(--app); color: #fff; border-color: var(--app); } .ax-chip.is-on:hover { background: var(--app-strong); border-color: var(--app-strong); } /* Multi-column instrument cards (ABAS-3, Vineland, ALSAR, D-REF, PEDI-CAT, SP-2, CIQ-R) — ported from FCA v2's mc-card grid. */ .ax-card.mc-card .mc-section { margin-top: 12px; } .ax-card.mc-card .mc-section + .mc-section { margin-top: 18px; } .ax-card.mc-card .mc-section-h { font-size: 11px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .ax-card.mc-card .mc-row { display: grid; gap: 8px; padding: 5px 8px; align-items: center; border-radius: 6px; } .ax-card.mc-card .mc-row + .mc-row { border-top: 1px solid var(--bd); } .ax-card.mc-card .mc-row.mc-head { padding: 4px 8px; border-bottom: 1px solid var(--bd2); } .ax-card.mc-card .mc-cell { font-size: 12px; color: var(--tx); display: flex; align-items: center; min-width: 0; } .ax-card.mc-card .mc-cell.mc-h { font-size: 10px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: 0.04em; } .ax-card.mc-card .mc-cell.mc-rowlabel { font-size: 12px; font-weight: 500; color: var(--tx); padding-right: 4px; } .ax-card.mc-card .mc-input { width: 100%; box-sizing: border-box; padding: 5.5px 8px; border: 1px solid var(--bd2); border-radius: 6px; background: var(--card); font-family: inherit; font-size: 12px; color: var(--tx); outline: none; transition: border-color .12s, box-shadow .12s, background .12s; } .ax-card.mc-card .mc-input:focus { border-color: var(--app-bd); box-shadow: 0 0 0 2.5px var(--app-dim); } .ax-card.mc-card .mc-input.mc-readonly { background: var(--field-bg); color: var(--tx55); cursor: not-allowed; } .ax-card.mc-card select.mc-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 22px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 7px center; } /* Multi-line narrative cells (DACSA-3 environmental / personal / recs). */ .ax-card.mc-card .mc-input.mc-textarea { min-height: 58px; resize: vertical; line-height: 1.45; padding: 7px 9px; } .ax-card.mc-card .mc-cell:has(> .mc-textarea) { align-items: stretch; } /* Standardised-assessments scoring cards (Custom-template item entry: LEFS / FIM / MFIS / MBI / Waterlow / ALSAR …). The card plus its chip, select and toggle controls hardcode #fff, so in dark mode the (correctly light) score-row text sat on a white card and was unreadable. Flip these surfaces to the dark card / field tones — the tokenised text colours then read correctly. Active chips / pills keep their lilac --app fill via the later, equal-specificity .active rules. */ [data-theme="dark"] .assess-card { background: #242424; border-color: rgba(255,255,255,.08); } [data-theme="dark"] .assess-card.partial { background: linear-gradient(180deg, rgba(224,122,90,.12) 0%, #242424 55%); border-color: rgba(224,122,90,.30); } [data-theme="dark"] .chip-btn { background: #1f1f1f; border-color: rgba(255,255,255,.10); } [data-theme="dark"] .chip-btn:hover { background: #2a2a2a; border-color: rgba(255,255,255,.18); } [data-theme="dark"] .scored-row .select-narrow { background: #1f1f1f; border-color: rgba(255,255,255,.10); } [data-theme="dark"] .toggle-pill { background: #1f1f1f; border-color: rgba(255,255,255,.10); } [data-theme="dark"] .toggle-pill .tp-pts { background: rgba(255,255,255,.10); } /* Assessments list — styled to match FCA v2's compact, info-dense look */ .assess-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 12px 13px 10px; margin-bottom: 10px; box-shadow: var(--shadow-sm); } .assess-card.scored { padding-bottom: 11px; } /* Card states — match FCA v2's .ax-card.partial / .empty so a half- filled assessment reads warm-warning at a glance and an attached- but-untouched one reads dashed-placeholder. Hover restores the normal border colour so removing/editing isn't obscured. */ .assess-card.partial { border-color: rgba(192,87,59,.22); background: linear-gradient(180deg, #fdf8f5 0%, #fff 50%); } .assess-card.empty { border-style: dashed; background: var(--field-bg); } .assess-card:hover { border-color: var(--bd2, var(--bd)); } .assess-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; } .assess-head .name { font-size: 13px; font-weight: 600; color: var(--tx); letter-spacing: -.005em; } .assess-head .hint { font-size: 10.5px; color: var(--tx55); font-weight: 400; flex: 1; min-width: 0; } .assess-head button { background: transparent; border: none; cursor: pointer; color: var(--tx40); font-size: 16px; line-height: 1; padding: 0 4px; flex-shrink: 0; } .assess-head button:hover { color: var(--warn); } .assess-head .sev-tag { padding: 1px 8px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; color: #fff; } .assess-head .sev-tag.sev-none { background: var(--sev-none); } .assess-head .sev-tag.sev-mild { background: var(--sev-mild); } .assess-head .sev-tag.sev-mod { background: var(--sev-mod); } .assess-head .sev-tag.sev-sev { background: var(--sev-sev); } .assess-head .sev-tag.sev-ext { background: var(--sev-ext); } .assess-pick { display: flex; gap: 8px; align-items: center; padding: 11px 13px; border: 1px dashed var(--bd2); border-radius: 12px; cursor: pointer; color: var(--tx70); font-size: 11.5px; background: var(--field-bg); } .assess-pick:hover { border-color: var(--app-bd); color: var(--app-strong); background: var(--app-dim); } .assess-pick svg { width: 13.5px; height: 13.5px; color: var(--tx55); } /* Custom-template item-level scoring card — tighter, more compact look matching FCA v2's chip + score-row pattern. */ .assess-card.scored .legend-strip { display: flex; flex-wrap: wrap; gap: 3px 11px; padding: 5px 10px; margin: 5px 0 8px; background: var(--field-bg); border: 1px solid var(--field-bd); border-radius: 7px; font-size: 10px; color: var(--tx55); } .assess-card.scored .legend-strip span { white-space: nowrap; } .scored-rows { display: flex; flex-direction: column; gap: 2px; } .scored-row { display: flex; align-items: center; gap: 8px; padding: 3.5px 6px; border-bottom: 1px solid var(--tx10); font-size: 11.5px; } .scored-row:last-child { border-bottom: none; } .sr-label { flex: 1; color: var(--tx); font-size: 11.5px; } .chips { display: inline-flex; gap: 2.5px; } .chip-btn { width: 22px; height: 22px; border: 1px solid var(--bd); border-radius: 5px; background: #fff; color: var(--tx70); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .chip-btn:hover { border-color: var(--bd2); } .chip-btn.active { background: var(--app); color: #fff; border-color: var(--app); } .scored-group { margin: 6px 0; padding: 6px 9px; background: var(--field-bg); border: 1px solid var(--field-bd); border-radius: 9px; } .sg-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--bd); } .sg-head .sg-tot { font-size: 11px; font-weight: 700; color: var(--app-strong); text-transform: none; letter-spacing: 0; } .assess-totals { margin-top: 10px; padding: 7px 11px; background: var(--app-dim); color: var(--app-strong); border-radius: 8px; font-size: 11.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .assess-totals .num { font-weight: 700; font-size: 13.5px; } .whodas-mode-row { display: flex; gap: 5px; margin: 8px 0 4px; } .mode-tab { background: var(--card); border: 1px solid var(--bd); color: var(--tx55); padding: 4px 10px; border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } .mode-tab.active { background: var(--app); border-color: var(--app); color: #fff; } /* Select-card per-item dropdown (MBI / Lawton bespoke options) */ .scored-row .select-narrow { min-width: 260px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--bd); border-radius: 7px; background: #fff; font-family: inherit; font-size: 11px; color: var(--tx); } .scored-row .select-narrow:focus { outline: 2px solid var(--app-bd); border-color: var(--app-bd); } /* Waterlow toggle pills */ .toggle-row { display: flex; flex-wrap: wrap; gap: 5px; } .toggle-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 10px; border: 1px solid var(--bd); border-radius: 999px; background: #fff; color: var(--tx70); font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; line-height: 1.2; } .toggle-pill:hover { border-color: var(--app-bd); } .toggle-pill.active { background: var(--app); color: #fff; border-color: var(--app); font-weight: 600; } .toggle-pill .tp-pts { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.06); color: inherit; } .toggle-pill.active .tp-pts { background: rgba(255,255,255,.22); } /* ALSAR three-axis layout */ .alsar-header { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); align-items: center; gap: 8px; padding: 4px 8px 6px; border-bottom: 1px solid var(--tx10); font-size: 10.5px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: 0.04em; } .alsar-header .axis-head { text-align: center; } .alsar-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--tx10); font-size: 11.5px; } .alsar-row:last-child { border-bottom: none; } .alsar-axis-cell { display: inline-flex; justify-content: center; } /* ───── Modals ─────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(26,26,24,.45); backdrop-filter: blur(2px); } .modal-overlay.open { display: flex; } .modal-card { background: var(--card); border-radius: 16px; max-width: 560px; width: calc(100% - 32px); max-height: 88vh; overflow: hidden; box-shadow: 0 12px 48px rgba(26,26,24,.18); display: flex; flex-direction: column; } .modal-card.wide { max-width: 760px; } .modal-card.narrow { max-width: 440px; } /* ── Customise modal: FCA-style split layout (controls left · live preview right). Scoped to #customise-modal so other modals keep their existing chrome. ── */ #customise-modal .modal-card { max-width: 880px; } #customise-modal .modal-head h3 { margin: 0; font-weight: 500; font-size: 18px; color: var(--tx); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif; } #customise-modal .modal-head .modal-close svg { width: 14.5px; height: 14.5px; } #customise-modal .modal-body.settings-split { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 312px; } #customise-modal .settings-main { padding: 14px 22px 18px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-width: 0; } #customise-modal .settings-preview { background: var(--field-bg); border-left: 1px solid var(--bd); padding: 18px; overflow-y: auto; } #customise-modal .settings-preview > div { position: sticky; top: 0; } #customise-modal #colour-presets-mount { margin-bottom: 14px; } #customise-modal .settings-section { padding: 16px 0; border-top: 1px solid var(--bd); } #customise-modal .settings-section:first-of-type { padding-top: 2px; border-top: none; } #customise-modal .settings-section.compact { padding-top: 0; } #customise-modal .settings-section-head { margin-bottom: 12px; } #customise-modal .settings-section.compact .settings-section-head { margin-bottom: 9px; } #customise-modal .settings-section-head h4 { margin: 0 0 2px 0; font-weight: 600; font-size: 13.5px; color: var(--tx); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif; } #customise-modal .settings-section-sub { font-size: 11.5px; color: var(--tx55); line-height: 1.4; } #customise-modal .settings-split .settings-section.compact .settings-grid { grid-template-columns: 1fr 1fr; gap: 9px 11px; } #customise-modal .settings-split .settings-field { min-width: 0; } @media (max-width: 720px) { #customise-modal .modal-card { max-width: 560px; } #customise-modal .modal-body.settings-split { grid-template-columns: 1fr; overflow-y: auto; } #customise-modal .settings-main { overflow: visible; } #customise-modal .settings-preview { border-left: none; border-top: 1px solid var(--bd); } #customise-modal .settings-preview > div { position: static; } } .modal-head { padding: 14px 18px 11px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 10px; } .modal-head h2 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--tx); } .modal-head .modal-close { margin-left: auto; background: transparent; border: none; cursor: pointer; color: var(--tx55); font-size: 18px; padding: 0 4px; line-height: 1; } .modal-body { flex: 1; overflow-y: auto; padding: 16px 18px; font-size: 12.5px; color: var(--tx); } .modal-foot { padding: 12px 18px; border-top: 1px solid var(--bd); display: flex; gap: 8px; justify-content: flex-end; } .spl-label { display: block; font-size: 11px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: .04em; } /* Drafts modal list */ .drafts-list { display: flex; flex-direction: column; gap: 6px; } .draft-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--bd); border-radius: 10px; background: #fcfbf6; cursor: pointer; } .draft-item:hover { border-color: var(--app-bd); } .draft-item .name { font-weight: 600; color: var(--tx); font-size: 12px; } .draft-item .meta { font-size: 10.5px; color: var(--tx55); margin-top: 2px; } .draft-item .pct { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--app); background: var(--app-dim); padding: 2px 8px; border-radius: 999px; } .draft-item .actions { margin-left: 8px; display: flex; gap: 4px; } .draft-item .actions button { background: transparent; border: 1px solid var(--bd); border-radius: 6px; padding: 3px 7px; font-size: 10.5px; cursor: pointer; color: var(--tx55); } .draft-item .actions button:hover { color: var(--warn); border-color: var(--warn); } .picker-item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--bd); border-radius: 8px; cursor: pointer; background: #fcfbf6; } .picker-item:hover { border-color: var(--app-bd); } .picker-item .pi-name { font-weight: 600; font-size: 12px; color: var(--tx); } .picker-item .pi-desc { font-size: 10.5px; color: var(--tx55); margin-top: 2px; line-height: 1.4; } .picker-item .pi-tag { margin-left: auto; font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--app-dim); color: var(--app-strong); text-transform: uppercase; letter-spacing: 0.04em; } .picker-item.added { opacity: .55; pointer-events: none; } /* Toast — fill and text auto-invert with theme. Light: var(--tx)=dark, var(--card)=white → dark pill, white text. Dark : var(--tx)=light, var(--card)=dark → light pill, dark text. Was `color:#fff` which collided with the light --tx in dark mode (white-on-white). */ .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--tx); color: var(--card); padding: 9px 18px; border-radius: 999px; font-size: 12px; font-weight: 500; box-shadow: var(--shadow-md); z-index: 400; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } /* Customisation reminder banner */ .customise-reminder { margin: 10px 0 14px 0; padding: 10px 13px; background: linear-gradient(90deg, var(--app-dim) 0%, transparent 80%); border: 1px solid var(--app-bd); border-left: 3px solid var(--app); border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; font-size: 11.5px; color: var(--tx); } .customise-reminder svg { width: 15px; height: 15px; color: var(--app); flex-shrink: 0; margin-top: 1px; } .customise-reminder .title { font-weight: 600; margin-bottom: 2px; color: var(--app-strong); } .customise-reminder .body { color: var(--tx70); line-height: 1.45; } .customise-reminder a { color: var(--app-strong); font-weight: 600; cursor: pointer; } /* NDIS-number chip (UX portability item 4) */ .row-ndis-warn { margin-left: 8px; flex-shrink: 0; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; background: var(--warn-dim); color: var(--warn); text-transform: uppercase; letter-spacing: 0.04em; } .row-ndis-warn.valid { background: var(--app-dim); color: var(--app-strong); text-transform: none; letter-spacing: 0; font-weight: 500; } /* Pre-flight checklist (UX portability item 15) — severity-coded rows with a Jump button per check so the OT can hop straight to the gap. */ .pfm-check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--bd); background: var(--card); font-size: 11.5px; } .pfm-check.ok { border-color: rgba(50,126,88,.18); background: rgba(50,126,88,.04); } .pfm-check.info { border-color: var(--bd); } .pfm-check.warn { border-color: rgba(217,154,58,.30); background: rgba(217,154,58,.06); } .pfm-check.error { border-color: rgba(192,87,59,.30); background: rgba(192,87,59,.06); } .pfm-icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px; } .pfm-check.ok .pfm-icon { background: var(--app); } .pfm-check.info .pfm-icon { background: var(--tx40); } .pfm-check.warn .pfm-icon { background: var(--sev-mod); } .pfm-check.error .pfm-icon { background: var(--warn); } .pfm-body { flex: 1; min-width: 0; } .pfm-label { font-weight: 600; color: var(--tx); margin-bottom: 1px; } .pfm-detail { font-size: 11px; color: var(--tx55); line-height: 1.5; } .pfm-jump { flex-shrink: 0; align-self: center; background: transparent; border: 1px solid var(--bd); border-radius: 6px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; color: var(--tx70); cursor: pointer; font-family: inherit; } .pfm-jump:hover { border-color: var(--app-bd); color: var(--app-strong); } /* Polish modal diff view (UX portability item 10) — opt-in word-level LCS diff. del = strike-through red, add = highlight green. */ .polish-diff-view .del { background: rgba(192,87,59,.14); color: var(--warn); text-decoration: line-through; padding: 0 2px; border-radius: 3px; } .polish-diff-view .add { background: rgba(50,126,88,.16); color: var(--app-strong); padding: 0 2px; border-radius: 3px; } .polish-diff-toggle:hover { border-color: var(--app-bd); color: var(--app-strong); } .polish-diff-toggle.active { background: var(--app-dim); color: var(--app-strong); border-color: var(--app-bd); } /* Drafts hover preview (UX portability item 9) — popover on hover. Body fetched on first hover, then cached. Anchored to the row. */ .draft-preview-pop { position: fixed; z-index: 220; min-width: 260px; max-width: 340px; background: var(--card); border: 1px solid var(--bd); border-radius: 11px; box-shadow: 0 12px 36px rgba(26,26,24,.18); padding: 11px 13px; font-size: 11.5px; line-height: 1.5; pointer-events: none; } .draft-preview-pop .dpp-name { font-weight: 600; color: var(--tx); margin-bottom: 5px; font-size: 12.5px; } .draft-preview-pop .dpp-meta { color: var(--tx55); font-size: 10.5px; margin-bottom: 7px; } .draft-preview-pop .dpp-row { display: flex; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--tx10); } .draft-preview-pop .dpp-row:last-child { border-bottom: none; } .draft-preview-pop .dpp-label { color: var(--tx55); font-weight: 500; flex: 0 0 80px; font-size: 10.5px; } .draft-preview-pop .dpp-value { color: var(--tx); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draft-preview-pop .dpp-loading { color: var(--tx55); font-style: italic; padding: 6px 0; } /* Mobile section dropdown (UX portability item 6) — shown <700px in place of the horizontal tab rail. Status glyphs are inserted via _refreshSumTabSelectStatus(). */ .summary-tab-select { display: none; width: 100%; padding: 8px 12px; border: 1px solid var(--bd); border-radius: 9px; background: var(--card); color: var(--tx); font-family: inherit; font-size: 12.5px; font-weight: 500; margin: 4px 0; } /* G11 defensive nowrap so future topbar content can't compress the row. `.save-status` and `.btn` are flex items inside .actions / .crumbs. */ .save-status, .topbar .btn, .progress-pill, .mode-badge { white-space: nowrap; flex-shrink: 0; } /* Mobile responsiveness */ @media (max-width: 900px) { .main { grid-template-columns: 1fr; } .summary { display: none; } body.show-summary .summary { display: flex; } body.show-summary .chat { display: none; } } @media (max-width: 700px) { .summary-tabs { display: none; } .summary-tab-select { display: block; } } /* Hide-when-empty utility */ .hidden, [hidden] { display: none !important; } /* ════════════════════════════════════════════════════════════════ Reports bell — topbar dropdown listing in-progress + recently- completed report generations (Phase A2). Lives next to the V1-fallback pill; data comes from /v2/jobs (cross-tool — SAH/AT/FCA jobs all surface here so a user who closes the per-tool generate modal doesn't lose the download. 2h plain-bytes retention; Phase B will layer in indefinite E2EE archive. ════════════════════════════════════════════════════════════════ */ /* Theme-aware (light + dark via [data-theme="dark"] on ). All surface / text / border colours route through the v2 theme tokens so the bell tracks the rest of the workspace UI. Status-icon tints and the primary CTA need explicit dark overrides further down. */ .reports-bell-wrap { position: relative; flex-shrink: 0; } .reports-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--card); color: var(--tx); border: 1px solid var(--bd2); border-radius: 10px; cursor: pointer; flex-shrink: 0; box-sizing: border-box; transition: background .15s, border-color .15s, color .15s; } .reports-bell-btn:hover { background: var(--field-bg); border-color: var(--bd2); } .reports-bell-btn svg { width: 15px; height: 15px; } /* Live-activity indicator — a small spinning ring at bottom-right when any job has status='running'. Visually distinct from the top-right unread badge so both can coexist. */ /* Live-activity indicator — when any job has status='running' the button's solid border becomes transparent and a conic-gradient ring rotates around the perimeter, matching the workspace hub's Downloads button treatment. Coexists with the top-right unread badge. */ .reports-bell-btn.is-busy { border-color: transparent; } .reports-bell-btn.is-busy::after { content: ''; position: absolute; inset: -1px; border-radius: 11px; padding: 1.5px; background: conic-gradient( from 0deg, transparent 0deg, var(--app-strong) 90deg, transparent 200deg, transparent 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: reportsBellSpin .8s linear infinite; pointer-events: none; } .reports-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: #d04848; color: #fff; font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; border-radius: 999px; /* Ring matches the topbar surface so the badge looks "cut out" of the bell button. var(--card) flips light/dark automatically. */ border: 1.5px solid var(--card); pointer-events: none; } .reports-bell-badge:empty { display: none; } .reports-bell-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 340px; max-height: 440px; background: var(--card); color: var(--tx); border: 1px solid var(--bd2); border-radius: 12px; box-shadow: var(--shadow-md); display: none; flex-direction: column; z-index: 1500; } .reports-bell-panel.open { display: flex; } .reports-bell-head { padding: 12px 14px 10px; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--bd); } .reports-bell-body { flex: 1; overflow-y: auto; max-height: 360px; padding: 4px 0; } .reports-bell-empty { padding: 22px 14px; text-align: center; font-size: 12px; color: var(--tx55); line-height: 1.5; } .reports-bell-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bd); } .reports-bell-row:last-child { border-bottom: 0; } .reports-bell-row:hover { background: var(--field-bg); } .reports-bell-ic { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--field-bg); color: var(--tx70); flex-shrink: 0; } .reports-bell-ic svg { width: 14px; height: 14px; } /* Status-icon tints — light-mode pastels. Dark-mode overrides below re-tune the backgrounds (low-opacity colour wash on dark) so they read as the same status family without glowing. */ .reports-bell-ic.is-running { background: #eef5ff; color: #2870c4; } .reports-bell-ic.is-ready { background: #eaf6ee; color: #2c7a3f; } .reports-bell-ic.is-error { background: #fdecec; color: #b3322b; } .reports-bell-ic.is-archived { background: #f0eefa; color: #5b50aa; } [data-theme="dark"] .reports-bell-ic.is-running { background: rgba(79,158,230,.16); color: #7cb8ec; } [data-theme="dark"] .reports-bell-ic.is-ready { background: rgba(82,180,108,.16); color: #87cf99; } [data-theme="dark"] .reports-bell-ic.is-error { background: rgba(208,72,72,.18); color: #e88a82; } [data-theme="dark"] .reports-bell-ic.is-archived { background: rgba(140,124,210,.18); color: #b5acdc; } .reports-bell-spin { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: reportsBellSpin .8s linear infinite; } @keyframes reportsBellSpin { to { transform: rotate(360deg); } } .reports-bell-meta { min-width: 0; } .reports-bell-meta.is-clickable { cursor: pointer; } .reports-bell-meta.is-clickable:hover .reports-bell-title { text-decoration: underline; } .reports-bell-meta.is-clickable:focus-visible { outline: 2px solid var(--app-bd); outline-offset: 2px; border-radius: 6px; } .reports-bell-title { font-size: 12.5px; font-weight: 600; color: var(--tx); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reports-bell-sub { font-size: 11px; color: var(--tx55); margin-top: 2px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reports-bell-row.has-error .reports-bell-sub { color: #b3322b; white-space: normal; } [data-theme="dark"] .reports-bell-row.has-error .reports-bell-sub { color: #e88a82; } .reports-bell-actions { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-shrink: 0; } .reports-bell-act { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; background: var(--card); color: var(--tx); border: 1px solid var(--bd2); border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; } .reports-bell-act:hover { background: var(--field-bg); border-color: var(--bd2); } /* Primary CTA: dark-on-light in light mode, light-on-dark in dark mode. var(--tx) already does that flip — paired with var(--card) for fill and text-color contrast it stays a high-contrast pill in both. */ .reports-bell-act.primary { background: var(--tx); color: var(--card); border-color: var(--tx); } .reports-bell-act.primary:hover { filter: brightness(1.08); } .reports-bell-act svg { width: 11px; height: 11px; } .reports-bell-act.icon-only { width: 24px; padding: 0; justify-content: center; } .reports-bell-act.danger:hover { background: rgba(208,72,72,.10); border-color: rgba(208,72,72,.45); color: #b3322b; } [data-theme="dark"] .reports-bell-act.danger:hover { color: #e88a82; } .reports-bell-act.is-disabled, .reports-bell-act.is-disabled:hover { background: var(--field-bg); color: var(--tx55); border-color: var(--bd); cursor: not-allowed; filter: none; } .reports-bell-act.is-disabled svg { opacity: .6; } .reports-bell-lockbadge { display: inline-block; margin-left: 6px; padding: 1px 6px; background: var(--card); color: var(--tx55); border: 1px solid var(--bd2); border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .reports-bell-foot { padding: 9px 14px; font-size: 10.5px; color: var(--tx40); border-top: 1px solid var(--bd); background: var(--field-bg); border-radius: 0 0 12px 12px; } /* ─── Drop-shadow removal ───────────────────────────────────── Strip every drop-shadow across SAH v2. The :not chain excludes focus states so elements that use box-shadow as a focus ring keep their accessibility indicator. */ *:not(:focus):not(:focus-visible):not(:focus-within) { box-shadow: none !important; } /* ── CSP utility classes (auto-generated from former inline style="") ── */ .at-none.at-none{display:none} .atu-1.atu-1{width:0%} .atu-2.atu-2{color:#aaa;font-size:11px} .atu-3.atu-3{padding:0 4px 4px} .atu-4.atu-4{position:fixed;inset:0;background:var(--surface,#faf8f4);z-index:280;align-items:center;justify-content:center;padding:24px} .atu-5.atu-5{max-width:420px;text-align:center} .atu-6.atu-6{font-size:32px;line-height:1;margin-bottom:14px} .atu-7.atu-7{font-size:15px;font-weight:600;color:var(--tx);margin-bottom:8px} .atu-8.atu-8{font-size:12.5px;color:var(--tx55);line-height:1.6;margin:0 0 18px} .atu-9.atu-9{z-index:210} .atu-10.atu-10{font-size:11.5px;color:var(--tx55);margin:0 0 12px;line-height:1.55} .atu-11.atu-11{display:flex;flex-direction:column;gap:7px} .atu-12.atu-12{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx55)} .atu-13.atu-13{z-index:215} .atu-14.atu-14{max-width:540px} .atu-15.atu-15{width:100%;box-sizing:border-box;padding:7px 10px;font-size:13px;border:1px solid var(--bd);border-radius:8px;background:#fcfbf6;margin-bottom:10px;font-family:inherit} .atu-16.atu-16{display:flex;flex-direction:column;gap:5px;max-height:60vh;overflow-y:auto} .atu-17.atu-17{font-size:11.5px;color:var(--tx55);text-align:center;padding:18px 0} .atu-18.atu-18{padding:14px 22px 4px} .atu-19.atu-19{font-size:12.5px;color:var(--tx55);margin:0 0 14px 0} .atu-20.atu-20{--c:#327e58} .atu-21.atu-21{--c:#3461e8} .atu-22.atu-22{--c:#7a52d4} .atu-23.atu-23{--c:#1f8a8a} .atu-24.atu-24{--c:#e0682a} .atu-25.atu-25{--c:#c0392b} .atu-26.atu-26{--c:#d34ba3} .atu-27.atu-27{font-size:11px;color:var(--tx55)} .atu-28.atu-28{font-size:11.5px;color:var(--tx55);margin:0 0 8px} .atu-29.atu-29{width:100%;min-height:80px;margin-top:5px;padding:8px 10px;border:1px solid var(--bd2);border-radius:8px;font-family:inherit;font-size:12px;background:var(--field-bg);color:var(--tx70)} .atu-30.atu-30{display:flex;align-items:center;margin-top:10px;gap:6px} .atu-31.atu-31{margin:0} .atu-32.atu-32{margin-left:auto;background:transparent;border:1px solid var(--bd);border-radius:6px;padding:3px 9px;font-size:10.5px;font-weight:600;color:var(--tx55);cursor:pointer;text-transform:uppercase;letter-spacing:0.04em} .atu-33.atu-33{width:100%;min-height:120px;margin-top:5px;padding:8px 10px;border:1px solid var(--bd2);border-radius:8px;font-family:inherit;font-size:12px;background:#fff;color:var(--tx)} .atu-34.atu-34{width:100%;min-height:120px;margin-top:5px;padding:8px 10px;border:1px solid var(--bd2);border-radius:8px;background:#fff;color:var(--tx);font-size:12px;line-height:1.55;white-space:pre-wrap} .atu-35.atu-35{font-size:11px;color:var(--tx55);margin-top:6px} .atu-36.atu-36{color:var(--sev-sev);font-size:12px;margin-top:6px} .atu-37.atu-37{font-size:12px;color:var(--tx);line-height:1.55;margin:0 0 12px} .atu-38.atu-38{padding:22px 24px;max-width:620px} .atu-39.atu-39{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;background:var(--app-dim);border:1px solid var(--app-bd);font-size:11px;font-weight:600;color:var(--app-strong);margin-bottom:14px} .atu-40.atu-40{margin:0 0 10px;color:var(--tx);font-size:13px;line-height:1.55} .atu-41.atu-41{margin:0;color:var(--tx55);font-size:11.5px;line-height:1.6} .atu-42.atu-42{border-style:dashed} .atu-43.atu-43{color:var(--tx55);font-size:13px;line-height:1.6;margin:8px 0 0} .atu-44.atu-44{padding:14px;font-size:12.5px;color:var(--tx55);text-align:center} .atu-45.atu-45{font-size:11.5px;color:var(--tx55);margin-top:6px} .atu-46.atu-46{margin-top:8px} .atu-47.atu-47{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .atu-48.atu-48{color:var(--sev-sev)} .atu-49.atu-49{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;color:var(--tx55)} .atu-50.atu-50{color:var(--tx40);font-style:italic} .atu-51.atu-51{font-size:11px;color:var(--tx55);text-align:center;padding:14px 0} .atu-52.atu-52{font-size:11px;color:var(--sev-sev);text-align:center;padding:14px 0} .atu-53.atu-53{flex:1;min-width:0} .atu-54.atu-54{margin:6px 0 0;color:var(--tx70)} .atu-55.atu-55{margin-top:6px} /* A11Y-7 (QC 2026-06-25): visually-hidden page heading — gives the editor a single top-level

for screen-reader page-title/heading navigation without changing the visible design. */ .sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}