/* ───────────────────────────────────────────────────────────────────────────── Palette Rooted in the consulting site's deep green-teal so the two read as one company. The previous scheme was navy + cyan, which is the single most common machine-generated look there is; the brand hue is what makes it not that. The dark theme is therefore green-black, NOT navy. Light is the default and is NOT overridden by the OS preference. That is a deliberate departure from the usual advice: the consulting site is light-only, so a visitor whose OS is dark would otherwise land on a wall of dark green and see what looks like a different company. Light is the shared identity; dark is opt-in through the toggle, which sets data-theme="dark" on . To follow the OS instead, wrap the dark block in @media (prefers-color-scheme: dark) and target :root:not([data-theme="light"]). Clinical status colours (critical/unstable/tenuous/improving/stable and the vitals) are declared per theme rather than inherited. They are a patient signal, not decoration: the red that reads "critical" on white is not the red that reads "critical" on green-black, and neither may be confused with the teal used for brand and interaction. ───────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* Brand constants — identical to the consulting site. */ --dark-950: #052e2b; --dark-900: #0a3d3a; --dark-800: #0f4c47; --bg: #eff5f4; --bg-tint: #e4efed; --panel: #ffffff; --panel-2: #f2f8f7; --text: #10201f; --muted: #47635f; --line: #cfe2df; /* For STRUCTURAL edges -- the top bar, a form field, a toolbar -- as opposed to the hairlines between cards. --line is deliberately quiet so a list of forty cards does not read as a grid of boxes, but at 1px against --panel in dark mode it is nearly invisible, and a search box you cannot see the edge of does not look like somewhere you can type. */ --line-strong: #9dc4bd; --accent: #0a7a82; --accent-hover: #085f66; --accent-contrast: #ffffff; --accent-soft: rgba(10, 122, 130, 0.10); --on-dark: #06201d; --danger: #b91c1c; --danger-soft: #fdecec; --good: #16794f; --good-soft: #e8f7f0; --warning: #92400e; --warning-bg: #fef3e2; /* Patient status, light theme. */ --status-critical: #b91c1c; --status-unstable: #c2410c; --status-tenuous: #a16207; --status-improving: #15803d; --status-stable: #0f766e; /* Text that sits ON a filled --warning / --danger surface. */ --warning-contrast: #ffffff; --danger-contrast: #ffffff; --shadow: 0 1px 2px rgba(6, 36, 33, .05), 0 8px 24px rgba(6, 36, 33, .07); --page-wash: none; --brand-bar: linear-gradient(90deg, #0a3d3a 0%, #0f4c47 100%); } /* Dark theme — applied only when the toggle has set data-theme="dark". Neutral graphite, NOT dark green and NOT navy. A whole page of brand colour is oppressive at length, and this is a screen people stare at while working a case. The green stays as the brand bar and the teal stays as the accent, so the identity survives without tinting every surface. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #101012; --bg-tint: #17171a; --panel: #18181b; --panel-2: #202025; --text: #ececee; --muted: #a1a1a9; --line: #2e2e35; --line-strong: #4e4e5a; --accent: #4dd8d0; --accent-hover: #7fe6e0; --accent-contrast: #08211f; --accent-soft: rgba(77, 216, 208, 0.12); --on-dark: #ececee; --danger: #fca5a5; --danger-soft: rgba(248, 113, 113, .13); --good: #6ee7b7; --good-soft: rgba(110, 231, 183, .12); --warning: #fcd34d; --warning-bg: rgba(252, 211, 77, .12); --status-critical: #f87171; --status-unstable: #fb923c; --status-tenuous: #fcd34d; --status-improving: #6ee7b7; --status-stable: #5eead4; /* Both are light in this theme, so the text on them must be dark. */ --warning-contrast: #241c04; --danger-contrast: #2b0d0d; --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 28px rgba(0, 0, 0, .45); --page-wash: none; --brand-bar: linear-gradient(90deg, #0a3d3a 0%, #0f4c47 100%); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--page-wash); background-attachment: fixed; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .app-shell { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0; } .hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 20px; } .eyebrow { color: var(--accent); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; } h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.95; } .subtext { color: var(--muted); max-width: 760px; line-height: 1.5; } .status-card, .controls, .case-banner, .chat-window, .chat-form { border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .status-card { white-space: nowrap; border-radius: 999px; padding: 12px 18px; color: var(--text); display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; min-width: 160px; justify-content: center; } .status-card.busy { border-color: var(--warning); background: var(--warning-bg); box-shadow: 0 0 0 4px var(--warning-bg), 0 20px 60px rgba(6, 36, 33, .12); } .busy-banner { border: 1px solid var(--warning); background: linear-gradient(135deg, var(--warning-bg), var(--accent-soft)); border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow); } .busy-banner[hidden] { display: none; } .busy-banner strong { display: block; font-size: 1.05rem; } .busy-banner span:last-child { color: var(--muted); display: block; margin-top: 2px; } .spinner { width: 32px; height: 32px; border-radius: 999px; border: 4px solid var(--line); border-top-color: var(--warning); animation: spin 0.8s linear infinite; flex: 0 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } .dot { width: 14px; height: 14px; border-radius: 999px; display: inline-block; background: var(--muted); flex: 0 0 auto; } .dot.loading { background: var(--warning); box-shadow: 0 0 0 0 var(--warning); animation: pulse-dot 1s ease-in-out infinite; } .dot.ok { background: var(--good); } .dot.error { background: var(--danger); } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 var(--warning); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .controls { border-radius: 18px; padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 14px; } label { color: var(--muted); font-size: 0.9rem; display: grid; gap: 6px; } select, textarea, input[type="text"] { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 12px; padding: 11px 12px; outline: none; } button { border: 1px solid transparent; border-radius: 12px; padding: 12px 16px; cursor: pointer; font-weight: 700; /* Readable by default. Only the filled variants opt into contrast text -- inheriting it here is what made secondary buttons white-on-white. */ color: var(--text); background: var(--panel-2); } button:disabled { opacity: 0.55; cursor: not-allowed; } .primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .secondary { background: var(--panel); color: var(--text); border-color: var(--line); } .secondary:hover { border-color: var(--accent); color: var(--accent); } .end-debrief-btn { background: var(--warning); color: var(--warning-contrast); white-space: nowrap; } .case-banner { border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); } .case-banner strong { color: var(--text); } .stage-chip { margin-left: auto; align-self: center; border-radius: 999px; padding: 5px 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid var(--line); } .stage-chip.stage-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); } .stage-chip.stage-stabilized { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 50%, transparent); background: var(--warning-bg); } .stage-chip.stage-debrief { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); background: var(--good-soft); } /* ── Sim status strip: stability bar, vitals monitor, bedside clock ── */ /* PINNED TO THE BOTTOM, and thin. It lived above the transcript, which meant the one thing a learner rechecks constantly -- the current vitals -- scrolled off the moment the conversation grew, and answering "what is the pressure now" cost a scroll up and back. Sticky at the bottom keeps it beside the box they are typing in. Everything here shrank to one row to earn that position: a fat bar at the bottom just steals the reading area instead. */ .sim-status-strip { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); border-radius: 12px; padding: 7px 14px; margin: 10px 0 0; } .sim-status-strip .status-block { display: flex; align-items: center; gap: 8px; min-width: 0; } .sim-status-strip .vitals-block { flex: 1 1 260px; } /* Labels shrink to quiet prefixes rather than stacked headings. */ .sim-status-strip .status-block-label { margin: 0; white-space: nowrap; font-size: 0.66rem; } .sim-status-strip .stability-label, .sim-status-strip .bedside-clock { font-size: 0.8rem; } /* While a turn is in flight the readings are stale and the input is disabled. Say so, rather than showing a number that is quietly out of date. */ .sim-status-strip.is-updating .stability-block .status-block-label::after { content: " · re-assessing"; color: var(--accent); font-weight: 600; } .sim-status-strip.is-updating .stability-bar, .sim-status-strip.is-updating .vitals-panel { opacity: 0.55; transition: opacity .2s ease; } /* A change that lands while the learner is reading the transcript is easy to miss entirely. Brief, and only on a real transition. */ @keyframes stability-changed { 0% { background: var(--accent-soft); } 100% { background: transparent; } } .sim-status-strip .status-block.just-changed { animation: stability-changed 2s ease-out; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .sim-status-strip .status-block.just-changed { animation: none; } } .status-block-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .stability-bar { display: flex; gap: 4px; margin-bottom: 6px; } .stability-bar .seg { height: 10px; flex: 1; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); transition: background 0.4s ease; } .stability-bar .seg.on.level-critical { background: var(--status-critical); border-color: var(--status-critical); } .stability-bar .seg.on.level-unstable { background: var(--status-unstable); border-color: var(--status-unstable); } .stability-bar .seg.on.level-tenuous { background: var(--status-tenuous); border-color: var(--status-tenuous); } .stability-bar .seg.on.level-improving { background: var(--status-improving); border-color: var(--status-improving); } .stability-bar .seg.on.level-stable { background: var(--status-stable); border-color: var(--status-stable); } .stability-label { font-size: 0.9rem; font-weight: 700; } .stability-label.unknown { color: var(--muted); font-weight: 500; } .stability-label.level-critical { color: var(--danger); } .stability-label.level-unstable { color: var(--status-unstable); } .stability-label.level-tenuous { color: var(--status-tenuous); } .stability-label.level-improving { color: var(--status-improving); } .stability-label.level-stable { color: var(--good); } .stability-trend { font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: normal; margin-left: 6px; } .stability-trend.improving { color: var(--good); } .stability-trend.worsening { color: var(--danger); } .stability-trend.unchanged { color: var(--muted); } .vitals-panel { display: flex; flex-wrap: wrap; gap: 8px; } .vitals-empty { color: var(--muted); font-size: 0.88rem; } .vital-tile { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); } .vital-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .vital-value { font-size: 1rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .bedside-clock { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* ── Quick-action chips ── */ .quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; } .quick-actions .chip { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; } .quick-actions .chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .chat-window { height: min(60vh, 680px); min-height: 420px; overflow-y: auto; border-radius: 22px; padding: 14px; } .empty-state { color: var(--muted); text-align: center; margin-top: 120px; } .message { display: flex; margin: 0 0 8px; } .message.user { justify-content: flex-end; } /* No pre-wrap here: template whitespace around the text would render as blank lines inside the bubble. Learner text keeps its line breaks via .plain. */ .bubble { max-width: min(780px, 92%); padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; line-height: 1.4; font-size: 0.95rem; } .bubble .plain { white-space: pre-wrap; } /* The stabilization checkpoint asks the learner for four things and is scored. As a plain assistant bubble it read as one more line of dialogue and got skimmed. Same bubble, marked: full width, accent edge, so it reads as the case pausing to ask rather than the nurse still talking. */ .bubble.is-checkpoint { max-width: 100%; background: var(--panel); border-color: var(--line-strong); border-left: 3px solid var(--accent); } .bubble.is-checkpoint .role-label { color: var(--accent); } /* ── The debrief, marked off from the case ─────────────────────────────────── It rendered as an ordinary assistant bubble, so it read as one more thing the nurse said. Three things separate it here, and each is doing work: * a labelled rule across the column -- the case is over, and it says so * full column width rather than a bubble -- turns are bubbles, this is not * an accent edge and kicker -- a report, not dialogue The transcript above is deliberately NOT dimmed. Reading back what you did while reading what you should have done is what the debrief is for. */ .scenario-break { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .scenario-break::before, .scenario-break::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); } .debrief-panel { margin: 0 0 10px; padding: 14px 16px 16px; /* --panel, where an assistant bubble is --panel-2: different in both themes. */ background: var(--panel); border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: 10px; line-height: 1.5; } /* The performance half, collapsed until asked for. */ .debrief-detail { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 10px; } /* The button's disabled twin, holding its place while the feedback is written. Same geometry so nothing shifts when the real one replaces it -- the learner sees where the result is going to be before it exists, and the wait is attached to the thing being waited for. */ .debrief-detail-pending { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px dashed var(--line-strong); cursor: default; } .pending-spinner { /* Explicit block: it is a , and transform does not apply to a non-replaced inline box. It is a flex item here so it is blockified anyway, but relying on the parent's display for the animation to work at all is a dependency waiting to break the next time this markup moves. */ display: block; width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: pending-spin 0.8s linear infinite; } @keyframes pending-spin { to { transform: rotate(360deg); } } /* DELIBERATELY NOT GUARDED BY prefers-reduced-motion, matching .spinner in the busy banner. Guarding it made this the only spinner in the app that stopped, so on a machine with reduced motion enabled the page showed one spinner turning and one sitting dead a few inches apart -- which reads as a bug in the dead one, not as a considered accessibility choice. A small in-place rotation carries no motion across the screen and is the convention for a loading indicator. If these are ever softened for reduced motion, soften BOTH: the inconsistency is worse than either choice. */ /* Styled as a BUTTON, not a coloured heading. It was neither obviously clickable nor obviously hiding anything, so the single most useful part of the debrief -- how you actually did -- sat behind something a learner had no reason to press. */ .debrief-detail > summary { cursor: pointer; font-weight: 700; color: var(--accent-contrast); background: var(--accent); list-style: none; padding: 10px 14px; border-radius: 10px; display: flex; align-items: center; gap: 8px; user-select: none; } .debrief-detail > summary:hover { background: var(--accent-hover); } .debrief-detail > summary::-webkit-details-marker { display: none; } .debrief-detail > summary::before { content: "▸"; display: inline-block; font-size: 0.9em; } .debrief-detail[open] > summary::before { content: "▾"; } /* Says what pressing it does. Dropped once open, where it would be noise. */ .debrief-detail > summary::after { content: "Tap to open"; margin-left: auto; font-size: 0.74rem; font-weight: 600; opacity: 0.85; } .debrief-detail[open] > summary::after { content: "Tap to close"; } .debrief-detail > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .debrief-kicker { display: block; margin: 0 0 10px; color: var(--accent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } /* The markdown renderer opens with an h2/h3 that would otherwise push a gap between the kicker and the first line of the diagnosis. */ .debrief-panel > :first-of-type:not(.debrief-kicker), .debrief-kicker + * { margin-top: 0; } .assistant .bubble { background: var(--panel-2); } /* The learner's own turn is a filled accent bubble, so it must set its own text colour. It previously took only a background and let the text inherit — which was fine on the old dark theme and became dark-on-dark the moment the default went light, hiding both the message and its "You" label. */ .user .bubble { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .user .bubble .role-label { color: var(--accent-contrast); opacity: .8; } /* Links and inline code inside the learner's bubble sit on the accent too. */ .user .bubble a, .user .bubble code { color: var(--accent-contrast); } .message.streaming .stream-body::after { content: "▍"; color: var(--accent); animation: rrs-caret-blink 1s step-start infinite; } @keyframes rrs-caret-blink { 50% { opacity: 0; } } .message.error .bubble { border-color: color-mix(in srgb, var(--danger) 60%, transparent); background: var(--danger-soft); } .message.error .role-label { color: var(--danger); } /* Rendered-markdown container: block layout instead of the bubble's pre-wrap. */ .bubble .md { white-space: normal; } .bubble .md p { margin: 0 0 6px; } .bubble .md p:last-child, .bubble .md ul:last-child, .bubble .md ol:last-child { margin-bottom: 0; } .bubble .md ul, .bubble .md ol { margin: 2px 0 6px; padding-left: 20px; } .bubble .md li { margin: 1px 0; } .bubble .md h3, .bubble .md h4, .bubble .md h5 { margin: 8px 0 4px; font-size: 0.95rem; color: var(--accent); } /* Tables in a debrief. The prompt now asks for bullets in the differential, which is where they used to appear, but the model can still reach for one anywhere -- and an unstyled table reads as literal "| pipe | soup |". */ .bubble .md-tablewrap { overflow-x: auto; margin: 6px 0 8px; -webkit-overflow-scrolling: touch; } .bubble .md table { border-collapse: collapse; width: 100%; font-size: 0.9rem; } .bubble .md th, .bubble .md td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border, var(--line)); vertical-align: top; } .bubble .md th { font-weight: 600; color: var(--accent); white-space: nowrap; } .bubble .md tbody tr:last-child td { border-bottom: 0; } /* On a phone a multi-column table forces sideways scrolling through the one thing the learner most wants to read, so stack each row into labelled lines instead. */ @media (max-width: 560px) { .bubble .md table, .bubble .md tbody, .bubble .md tr, .bubble .md td { display: block; width: 100%; } .bubble .md thead { display: none; } .bubble .md tr { padding: 6px 0; border-bottom: 1px solid var(--border, var(--line)); } .bubble .md tbody tr:last-child { border-bottom: 0; } .bubble .md td { padding: 2px 0; border-bottom: 0; } .bubble .md td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--accent); } /* A cell whose header was blank should not render a stray ": ". */ .bubble .md td[data-label=""]::before { content: ""; } } .bubble .md h3:first-child, .bubble .md h4:first-child, .bubble .md h5:first-child { margin-top: 0; } .bubble .md code { background: var(--accent-soft); border-radius: 6px; padding: 1px 5px; font-size: 0.9em; } .role-label { font-size: 0.66rem; color: var(--muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.06em; } .chat-form { border-radius: 18px; padding: 14px; margin-top: 14px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; } textarea { resize: vertical; min-height: 54px; font-size: 1rem; } .disclaimer { color: var(--muted); font-size: 0.85rem; text-align: center; } @media (max-width: 720px) { .sim-status-strip { grid-template-columns: 1fr; } .hero, .chat-form { grid-template-columns: 1fr; display: grid; } .status-card { width: 100%; } } .instructor-panel { width: 100%; border: 1px solid var(--line); background: var(--panel-2); border-radius: 16px; padding: 14px; } .instructor-panel label { width: 100%; } .instructor-panel textarea { width: 100%; min-height: 120px; } .helper-text { color: var(--muted); font-size: 0.85rem; line-height: 1.4; margin: 8px 0 0; } .media-toggle { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 14px; padding: 11px 12px; color: var(--text); min-height: 44px; } .media-toggle[hidden] { display: none; } .media-toggle input { width: 18px; height: 18px; accent-color: var(--accent); } .media-grid { display: grid; gap: 12px; margin-top: 12px; } .study-media { margin: 0; border: 1px solid var(--line); background: var(--accent-soft); border-radius: 14px; overflow: hidden; } /* The whole thumbnail is the button, so the hit target is the picture rather than a link beside it. Reset the UA button chrome; the figure owns the frame. */ .study-media .media-open { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; } .study-media img { display: block; width: 100%; /* Was 520px. A 12-lead arrives ~1800px wide and filled the column, pushing the conversation off screen -- the learner scrolled past their own question to read it. Small enough to stay in the flow; full size is one click away. */ max-height: 220px; object-fit: contain; background: var(--bg); } .study-media .media-zoom { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: rgba(0, 0, 0, 0.62); color: #fff; pointer-events: none; } .study-media .media-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Full-size view. Fixed rather than a modal library: one element, Esc closes, backdrop closes, and it survives every renderMessages rebuild because the click is delegated from the document. */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.86); cursor: zoom-out; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 8px; cursor: default; } .lightbox-close { position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; } body.lightbox-open { overflow: hidden; } .study-media figcaption { color: var(--muted); font-size: 0.85rem; padding: 10px 12px; border-top: 1px solid var(--line); } .feedback-panel { border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 14px; margin-top: 14px; } .feedback-panel[hidden] { display: none; } .feedback-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .feedback-header strong { display: block; color: var(--text); margin-bottom: 2px; } .feedback-header span, .feedback-status { color: var(--muted); font-size: 0.88rem; } .feedback-form-wrap { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; display: grid; gap: 12px; } .feedback-form-wrap[hidden] { display: none; } .feedback-form-wrap textarea, .feedback-form-wrap input[type="text"] { width: 100%; } .feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .feedback-status.ok { color: var(--good); } .feedback-status.error { color: var(--danger); } .feedback-status.saving { color: var(--warning); } /* Admin feedback review */ .admin-shell { max-width: 1180px; } .admin-card { border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); box-shadow: var(--shadow); border-radius: 18px; padding: 18px; margin-bottom: 14px; } .admin-login-form { display: grid; gap: 14px; max-width: 440px; } .admin-login-form input[type="password"] { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 12px; padding: 11px 12px; outline: none; } .admin-alert { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; } .admin-muted, .admin-muted a, .disclaimer a, .admin-list-header a { color: var(--muted); } .admin-list-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .feedback-list { display: grid; gap: 10px; } .feedback-row { border: 1px solid var(--line); background: var(--panel-2); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; } .feedback-row-title { color: var(--accent); font-weight: 800; text-decoration: none; } .feedback-row-meta { color: var(--muted); font-size: 0.85rem; margin-top: 4px; } .feedback-row p { margin: 8px 0 0; color: var(--text); line-height: 1.4; } .admin-small-link, .admin-button-link { text-decoration: none; display: inline-block; border-radius: 12px; padding: 10px 12px; color: var(--accent-contrast); font-weight: 700; } .admin-empty { margin: 32px 0; } .admin-detail-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; } .admin-card h2 { margin: 0 0 10px; font-size: 1.1rem; } .admin-note { border: 1px solid var(--line); background: var(--panel-2); border-radius: 14px; padding: 14px; line-height: 1.45; white-space: pre-wrap; margin-bottom: 18px; } .admin-dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 0.92rem; } .admin-dl dt { color: var(--muted); } .admin-dl dd { margin: 0; word-break: break-word; } .admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; } .danger-button { background: var(--danger); color: var(--danger-contrast); } .admin-transcript { display: grid; gap: 10px; max-height: 720px; overflow-y: auto; } .admin-transcript-msg { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--panel-2); } .admin-transcript-msg.user { background: var(--accent-hover); } .admin-transcript-msg strong { display: block; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .admin-transcript-msg p { white-space: pre-wrap; margin: 0; line-height: 1.4; } code { background: var(--accent-soft); padding: 2px 5px; border-radius: 6px; } @media (max-width: 900px) { .admin-detail-grid, .feedback-row { grid-template-columns: 1fr; } .admin-dl { grid-template-columns: 1fr; } } .admin-top-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .stat-card { border: 1px solid var(--line); background: var(--panel-2); border-radius: 16px; padding: 14px; } .stat-card span { display: block; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; } .stat-card strong { display: block; font-size: 1.55rem; } .admin-stats-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .admin-stats-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .admin-stats-table th, .admin-stats-table td { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: left; vertical-align: top; } .admin-stats-table th:last-child, .admin-stats-table td:last-child { text-align: right; width: 90px; } .recent-events { display: grid; gap: 8px; max-height: 620px; overflow-y: auto; } .recent-event-row { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1.4fr 1fr; gap: 8px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; padding: 10px; font-size: 0.86rem; } .recent-event-row span { color: var(--muted); word-break: break-word; } @media (max-width: 900px) { .stats-grid, .admin-stats-two-col, .recent-event-row { grid-template-columns: 1fr; } .admin-top-actions { justify-content: flex-start; } } /* Admin navigation + graphs/settings refinements */ .admin-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; margin: 16px 0 18px; } .admin-nav-link { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 16px; padding: 14px 16px; text-decoration: none; display: grid; gap: 4px; min-height: 68px; } .admin-nav-link:hover, .admin-nav-link.active { border-color: var(--accent); background: var(--accent-soft); } .admin-nav-link strong { font-size: 0.98rem; } .admin-nav-link span { color: var(--muted); font-size: 0.82rem; line-height: 1.25; } .admin-nav-logout { align-self: stretch; display: flex; } .admin-nav-logout button { width: 100%; min-width: 92px; } .admin-success { border: 1px solid var(--good); background: var(--good-soft); color: var(--good); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; } .admin-graph-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .admin-bar-chart { display: grid; gap: 11px; } .admin-bar-row { display: grid; gap: 6px; } .admin-bar-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; } .admin-bar-meta span { color: var(--text); overflow-wrap: anywhere; } .admin-bar-meta strong { color: var(--accent); } .admin-bar-track { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; border: 1px solid var(--accent-soft); } .admin-bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--status-stable)); min-width: 4px; } .admin-settings-form { display: grid; gap: 14px; margin-top: 16px; } .admin-setting-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr); gap: 18px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 16px; padding: 14px; align-items: center; } .admin-setting-row p { margin: 5px 0 8px; color: var(--muted); line-height: 1.35; } .admin-setting-row small { color: var(--muted); } .admin-setting-row input[type="text"], .admin-setting-row select { width: 100%; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 12px; padding: 11px 12px; outline: none; } .setting-switch { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; } .setting-switch input { width: 20px; height: 20px; } .setting-error { margin-top: 8px; color: var(--danger); font-size: 0.88rem; } @media (max-width: 980px) { .admin-nav, .admin-graph-grid, .admin-setting-row { grid-template-columns: 1fr; } .admin-nav-logout { display: block; } } /* V15 admin navigation/configuration refinements */ .admin-nav { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 22px 0 26px; } .admin-nav-link { min-height: 86px; padding: 18px 20px; border-radius: 20px; } .admin-nav-link strong { font-size: 1.04rem; } .admin-nav-logout { min-height: 86px; } .admin-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; } .admin-action-card { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 18px; padding: 16px; text-decoration: none; display: grid; gap: 8px; align-content: start; } .admin-action-card:hover { border-color: var(--accent); background: var(--accent-soft); } .admin-action-card span { color: var(--muted); line-height: 1.35; } .danger-action button { margin-top: 6px; width: fit-content; } .admin-config-table { display: grid; gap: 10px; margin-top: 16px; } .admin-config-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.6fr) minmax(150px, 0.6fr); gap: 14px; align-items: center; border: 1px solid var(--line); background: var(--panel-2); border-radius: 16px; padding: 14px; } .admin-config-row.header { background: var(--panel-2); color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } .admin-config-row p { margin: 6px 0 8px; color: var(--muted); line-height: 1.35; } .admin-config-row small { color: var(--muted); } .admin-config-row code { overflow-wrap: anywhere; } @media (max-width: 820px) { .admin-config-row, .admin-config-row.header { grid-template-columns: 1fr; } .admin-config-row.header { display: none; } } /* V16 compact admin option buttons */ .admin-nav.admin-nav-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 16px 0 20px; } .admin-nav.admin-nav-buttons .admin-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 0; width: auto; border-radius: 999px; padding: 10px 14px; margin: 2px; gap: 0; background: var(--panel-2); box-shadow: none; } .admin-nav.admin-nav-buttons .admin-nav-link strong { font-size: 0.94rem; line-height: 1; } .admin-nav.admin-nav-buttons .admin-nav-link span { display: none; } .admin-nav.admin-nav-buttons .admin-nav-link.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 40%, transparent); } .admin-nav.admin-nav-buttons .admin-nav-logout { display: inline-flex; align-self: auto; min-height: 0; margin: 2px; } .admin-nav.admin-nav-buttons .admin-nav-logout button { width: auto; min-width: 0; min-height: 0; border-radius: 999px; padding: 10px 14px; line-height: 1; } @media (max-width: 640px) { .admin-nav.admin-nav-buttons { gap: 7px; } .admin-nav.admin-nav-buttons .admin-nav-link, .admin-nav.admin-nav-buttons .admin-nav-logout button { padding: 9px 12px; } } /* V18 beta learner progress */ .learner-panel { display: grid; grid-template-columns: minmax(180px, 260px) auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); } .learner-panel label { margin: 0; } .optional-label { color: var(--muted); font-size: 0.8rem; font-weight: 500; } .link-button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; cursor: pointer; font-weight: 700; color: var(--text); background: var(--panel); min-height: 44px; } .link-button.primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .link-button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .link-button.secondary { background: var(--panel); color: var(--text); border-color: var(--line); } .link-button.secondary:hover { border-color: var(--accent); color: var(--accent); } .learner-panel .link-button { align-self: end; white-space: nowrap; } .progress-shell { max-width: 1050px; } .compact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .progress-identity-card, .progress-section, .muted-section { margin-top: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel-2); box-shadow: 0 18px 60px rgba(6, 36, 33, .10); } .progress-identity-card { display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(160px, auto); align-items: end; gap: 12px; padding: 18px; } .progress-section, .muted-section { padding: 20px; } .progress-section h2, .muted-section h2 { margin: 0 0 14px; font-size: 1.1rem; } .progress-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .stat-card { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2); } .stat-card span { display: block; color: var(--muted); font-size: 0.88rem; margin-bottom: 6px; } .stat-card strong { font-size: 2rem; color: var(--text); } .theme-breakdown { display: grid; gap: 12px; } .theme-row { display: grid; gap: 8px; } .theme-row-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--text); } .theme-row-label span { color: var(--muted); font-size: 0.88rem; white-space: nowrap; } .theme-meter { height: 10px; overflow: hidden; border-radius: 999px; background: var(--line); } .theme-meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--status-stable)); } .progress-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 16px; } .progress-table th, .progress-table td { padding: 12px 10px; border-bottom: 1px solid var(--accent-soft); text-align: left; vertical-align: top; } .progress-table th { color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; } .progress-table td { color: var(--text); } .muted-section p { margin: 0; color: var(--muted); line-height: 1.6; } @media (max-width: 820px) { .learner-panel, .progress-identity-card, .progress-summary-grid { grid-template-columns: 1fr; } .progress-table { display: block; overflow-x: auto; } } /* Compact in-chat pending indicator — deliberately small, no bubble/box. */ .thinking-inline { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px 6px; color: var(--muted); font-size: 0.8rem; } .thinking-inline .dots { display: inline-flex; gap: 4px; } .thinking-inline .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: rrs-dot-pulse 1.2s ease-in-out infinite; } .thinking-inline .dots span:nth-child(2) { animation-delay: 0.2s; } .thinking-inline .dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes rrs-dot-pulse { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .thinking-inline .dots span { animation-duration: 2.4s; } } /* ── Theme toggle ────────────────────────────────────────────────────────── Sits with the other controls rather than floating, so it never covers the transcript on a phone. */ .theme-toggle { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .theme-toggle .theme-icon { font-size: .95rem; } /* Only the label for the theme you can switch TO is shown. */ .theme-toggle .to-dark { display: inline; } .theme-toggle .to-light { display: none; } :root[data-theme="dark"] .theme-toggle .to-dark { display: none; } :root[data-theme="dark"] .theme-toggle .to-light { display: inline; } :root[data-theme="light"] .theme-toggle .to-dark { display: inline; } :root[data-theme="light"] .theme-toggle .to-light { display: none; } /* ── Section banding (home page) ─────────────────────────────────────────── White, pale-green, white. Mirrors the consulting site's .section--alt so the two feel like one property, and stops a long page reading as one slab. */ .band--tint { background: var(--bg-tint); border-block: 1px solid var(--line); padding: 52px 0; margin-block: 76px; } .band--tint > .band-inner { width: min(1080px, calc(100% - 32px)); margin: 0 auto; } .band--tint .band { margin-top: 0; } /* ── Brand bar ───────────────────────────────────────────────────────────── The deep green, used as a band rather than a background. This is where the brand lives in both themes; every other surface stays neutral. */ .brand-bar { background: var(--brand-bar); color: #eafaf8; padding: 11px 0; margin-bottom: 26px; border-bottom: 1px solid rgba(0, 0, 0, .18); } .brand-bar-inner { width: min(1100px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .brand-bar a { color: #eafaf8; text-decoration: none; } .brand-bar .brand-mark { font-weight: 700; letter-spacing: -.01em; font-size: 1rem; } .brand-bar .brand-mark em { font-style: normal; color: #7fe6e0; } .brand-bar .brand-links { display: flex; gap: 14px; align-items: center; font-size: .86rem; } .brand-bar .brand-links a { opacity: .85; } .brand-bar .brand-links a:hover { opacity: 1; text-decoration: underline; } /* On the green bar the toggle needs its own treatment. */ .brand-bar .theme-toggle { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #eafaf8; } .brand-bar .theme-toggle:hover { background: rgba(255, 255, 255, .2); color: #fff; } /* Sign-out in the brand bar reads as a link, not a button. */ .brand-bar .brand-link-button { background: none; border: 0; padding: 0; color: #eafaf8; opacity: .85; font: inherit; font-size: .86rem; font-weight: 400; cursor: pointer; min-height: 0; } .brand-bar .brand-link-button:hover { opacity: 1; text-decoration: underline; } /* End & Debrief before the case has been worked. Dimmed rather than disabled: a disabled button gives no tooltip and swallows the click, so a learner gets silence and no idea why. This one still responds and explains itself. */ button.not-ready { opacity: 0.55; filter: saturate(0.6); } button.not-ready:hover { opacity: 0.8; } /* ── First-use terms gate ─────────────────────────────────────────────────── */ .terms-gate { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 14, 20, 0.72); } .terms-gate-panel { max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; background: var(--panel, #fff); color: inherit; border: 1px solid var(--border, #ccd3dd); border-radius: 10px; padding: 22px 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } .terms-gate-panel h2 { margin: 0 0 10px; font-size: 1.15rem; } .terms-gate-panel ul { margin: 10px 0 14px; padding-left: 20px; } .terms-gate-panel li { margin-bottom: 9px; line-height: 1.5; } .terms-gate-link { margin: 0 0 16px; } .terms-gate-link a { color: var(--accent, #2563eb); } .terms-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* The hidden attribute must actually hide. display:flex above outspecificities the UA's [hidden]{display:none}, which left the terms/survey overlays permanently visible and made "No thanks" appear dead -- found live 2026-08-17 by the first real onboarding walk. */ .terms-gate[hidden] { display: none !important; }