/* Hallmark · shape: app screen · genre: modern-minimal · theme: Cobalt (deal 1/3, seed one-page-test-console-api-f9f1·6bf633b9·2026-11-06·r0)
 * nav: a top bar with the product name and the signed-in tester · signature: the turn, a request and everything the API answered, with its debug record opening inline · states: signed out, empty, loading, error, full
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: V, the accent was the theme's cobalt; replaced by the brief's cardinal and kept to the primary action, selection and the support badge */
/* waive 48 --font-body: Source Sans 3 replaces the theme's faces because the brief names Stanford's own typeface */
@import url("./tokens.css");
@import url("./base.css");

body { font-size: var(--text-md); }
code, pre, .mono { font-family: var(--font-outlier); font-size: 0.86em; }
h1 { font-size: var(--text-xl); max-width: none; }
h2 { font-size: var(--text-lg); max-width: none; line-height: 1.25; }
h3 { font-size: var(--text-md); max-width: none; }
.hint { color: var(--color-muted); font-size: var(--text-sm); }
.error-line { color: var(--color-error); font-size: var(--text-sm); }

.skip { position: absolute; left: var(--space-md); top: -4rem; background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); z-index: var(--z-tooltip); }
.skip:focus { top: var(--space-xs); }

/* ── the bar ── */
.bar { border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 56px; }
.brand { font-size: var(--text-md); max-width: none; }
.brand strong { font-weight: 600; }
.brand span { color: var(--color-muted); }
.bar-user { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); min-width: 0; }
.bar-user > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { padding-block: var(--space-lg) var(--space-2xl); }
main:focus { outline: none; }

/* ── controls ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; cursor: pointer; position: relative; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: -4px; }
@media (hover: hover) { .btn:hover { background: var(--color-paper-2); border-color: var(--color-muted); } }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); min-width: 5.5rem; }
@media (hover: hover) { .btn.primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); } }
.btn.quiet { border-color: transparent; font-weight: 400; color: var(--color-ink-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

label, legend { font-size: var(--text-sm); color: var(--color-ink-2); }
select, input[type="email"], textarea { width: 100%; min-height: 36px; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline-offset: -2px; }
textarea { resize: vertical; line-height: 1.45; }
input[type="checkbox"] { accent-color: var(--color-accent); width: 16px; height: 16px; margin: 0; }
.row { display: flex; gap: var(--space-xs); }

/* ── signed out ── */
.signin { max-width: 34rem; padding-block: var(--space-xl); display: grid; gap: var(--space-md); }
.google-button { min-height: 44px; }
iframe:focus, iframe:focus-visible { outline: 2px solid var(--color-focus) !important; outline-offset: 2px !important; }
.google-button:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-input); }
.dev-login { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }

/* ── how requests are sent ── */
.setup { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-md); align-items: end; }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); border: 0; padding: 0; margin: 0; }
.checks legend { padding: 0; margin-bottom: var(--space-2xs); }
.checks label { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); min-height: 28px; cursor: pointer; }
.persona-note { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border-radius: var(--radius-input); font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; }
.persona-note b { font-weight: 600; color: var(--color-ink); }
@media (max-width: 48rem) { .setup { grid-template-columns: minmax(0, 1fr); } }

/* ── the thread ── */
.thread { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.turn { display: grid; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); min-width: 0; }
.asked { display: grid; gap: var(--space-2xs); }
.asked-words { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; max-width: none; }
.asked-meta, .status { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.status .ok { color: var(--color-success); font-weight: 600; }
.status .bad { color: var(--color-error); font-weight: 600; }

.answer { font-size: var(--text-md); max-width: 70ch; }
.count { font-weight: 600; max-width: none; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: stretch; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); font-size: var(--text-sm); max-width: 100%; }
.chip-label { padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm); overflow-wrap: anywhere; }
.chip-x { border: 0; background: none; color: var(--color-ink-2); padding: 0 var(--space-sm) 0 var(--space-2xs); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; cursor: pointer; font-size: var(--text-md); line-height: 1; position: relative; }
.chip-x::before { content: ""; position: absolute; inset: -8px -6px; }
@media (hover: hover) { .chip-x:hover { color: var(--color-accent); } }
.chip-x:disabled { opacity: 0.55; cursor: not-allowed; }
.chip.old { background: var(--color-paper-2); color: var(--color-ink-2); }
.chip.old .chip-label { padding-right: var(--space-sm); }
.followups .btn { border-radius: var(--radius-pill); font-weight: 400; }
.group-label { font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-2xs); max-width: none; }

.people { display: grid; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.person { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.person h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; }
.person h3 a { text-decoration: underline; text-decoration-color: var(--color-rule-2); }
@media (hover: hover) { .person h3 a:hover { color: var(--color-accent); text-decoration-color: currentColor; } }
.person .pronouns { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }
.person p, .person li { font-size: var(--text-sm); max-width: none; }
.person .role { color: var(--color-ink); font-size: var(--text-md); }
.person .sub { color: var(--color-ink-2); }
.person ul { margin: 0; padding-left: 1.1em; }
.person .links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); list-style: none; padding: 0; }
.person .links a { color: var(--color-ink-2); }
.badge { display: inline-block; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-accent-deep); font-size: var(--text-sm); font-weight: 600; }
.why-title { font-weight: 600; color: var(--color-ink-2); }
.person .index { grid-column: 1 / -1; margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px dashed var(--color-rule-2); color: var(--color-ink-2); }
.person .index dt { font-weight: 600; display: inline; }
.person .index dd { display: inline; margin: 0 var(--space-md) 0 var(--space-2xs); }
.person .index dl { margin: 0; font-size: var(--text-sm); line-height: 1.7; }
@media (max-width: 48rem) { .person { grid-template-columns: minmax(0, 1fr); } }

.actions, .samples { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
a.btn { text-decoration: none; }

/* an error from the API, shown as the contract describes it */
.problem { display: grid; gap: var(--space-xs); padding: var(--space-md); border: 1px solid var(--color-error); border-radius: var(--radius-input); background: var(--color-paper); }
.problem dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.problem dt { color: var(--color-ink-2); }
.problem dd { margin: 0; overflow-wrap: anywhere; }

/* loading: the shape of what is coming */
.skeleton { display: grid; gap: var(--space-xs); }
.skeleton i { display: block; height: 14px; border-radius: var(--radius-input); background: var(--color-paper-3); animation: pulse 1.2s var(--ease-in-out) infinite alternate; }
.skeleton i:nth-child(1) { width: 62%; } .skeleton i:nth-child(2) { width: 38%; } .skeleton i:nth-child(3) { height: 72px; width: 100%; }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }

/* ── debug: opens inline, under the turn it explains ── */
.debug { border: 1px solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.debug > summary { padding: var(--space-xs) var(--space-md); cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.debug-body { display: grid; gap: var(--space-md); padding: 0 var(--space-md) var(--space-md); min-width: 0; }
.debug h4 { margin: 0 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 600; }
.debug p { font-size: var(--text-sm); max-width: none; }
.debug details > summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-ink-2); padding-block: var(--space-2xs); }
.debug pre { margin: 0; padding: var(--space-sm); background: var(--color-graphite); color: var(--color-graphite-ink); border-radius: var(--radius-input); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; max-height: none; }
.kv { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.kv dt { color: var(--color-ink-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.debug table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.debug th { text-align: left; font-weight: 600; color: var(--color-ink-2); white-space: nowrap; }
.debug th, .debug td { padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0; border-bottom: 1px solid var(--color-rule-2); vertical-align: top; }
.debug td { overflow-wrap: anywhere; }

/* ── empty, composer, checks ── */
.empty { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px dashed var(--color-rule-2); border-radius: var(--radius-card); display: grid; gap: var(--space-sm); }
.composer { margin-top: var(--space-xl); display: grid; gap: var(--space-2xs); }
.composer textarea { min-height: 64px; }
.composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-2xs); }
.composer-foot #state-note { margin-right: auto; }
.contract-checks { margin-top: var(--space-xl); display: grid; gap: var(--space-xs); }