/* A Rough Idea semantic tokens: see tokens.css and README for source revision. */
:root { color-scheme: light; --playground-max-width: 100rem; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ds-surface-default); color: var(--ds-text-default); font: var(--ds-font-size-300)/var(--ds-line-height-base) var(--ds-font-family-base); }
main { display: flex; flex-direction: column; height: 100svh; min-height: 36rem; max-width: var(--playground-max-width); margin: 0 auto; padding: var(--ds-space-4) var(--ds-space-8); }
.masthead { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: var(--ds-space-4); border-bottom: 2px solid var(--ds-border-strong); padding-bottom: var(--ds-space-3); }
.brand { display: flex; align-items: center; gap: var(--ds-space-3); font-size: var(--ds-font-size-200); font-weight: var(--ds-font-weight-bold); letter-spacing: var(--ds-letter-spacing-widest); text-transform: uppercase; }
.eyebrow, label, h2, summary { font-size: var(--ds-font-size-200); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; }
.eyebrow { margin: 0; color: var(--ds-text-muted); }
.overview { display: grid; flex-shrink: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-6); align-items: center; padding: var(--ds-space-4) 0; }
.intro-block, .connection-panel { min-width: 0; }
h1 { font-size: clamp(24px, 3vw, 32px); line-height: var(--ds-line-height-tight); font-weight: var(--ds-font-weight-medium); letter-spacing: -.04em; margin: var(--ds-space-1) 0; }
.intro { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-font-size-400); }
.connection { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); background: var(--ds-surface-subtle); border: 1px solid var(--ds-border-default); padding: var(--ds-space-3); }
.connection > div { min-width: 0; }
.model { font: var(--ds-font-size-200)/var(--ds-line-height-base) var(--ds-font-family-mono); margin: var(--ds-space-1) 0 0; overflow-wrap: anywhere; }
.connection-settings { position: relative; margin-top: var(--ds-space-1); }
.connection-body, .candidate-body { position: absolute; z-index: 2; width: 100%; max-height: min(24rem, 50svh); overflow: auto; overscroll-behavior: contain; padding: var(--ds-space-4); border: 1px solid var(--ds-border-strong); background: var(--ds-surface-default); }
.connection-body { top: 100%; right: 0; }
.connection-settings label { display: block; }
.connection-settings code { display: block; padding: var(--ds-space-3); background: var(--ds-surface-subtle); font: var(--ds-font-size-200)/var(--ds-line-height-relaxed) var(--ds-font-family-mono); overflow-wrap: anywhere; }
label { display: block; }
.workspace { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-6); }
.prompt-panel, .output-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.prompt-panel { border-top: 2px solid var(--ds-border-strong); padding-top: var(--ds-space-3); }
textarea, input, button { font: inherit; border-radius: var(--ds-radius-none); }
textarea, input { border: 1px solid var(--ds-input-border); background: var(--ds-input-bg); color: var(--ds-input-fg); }
textarea { display: block; flex: 1; min-height: 3rem; width: 100%; padding: var(--ds-space-3); margin: var(--ds-space-2) 0 var(--ds-space-3); resize: none; font: var(--ds-font-size-400)/var(--ds-line-height-relaxed) var(--ds-font-family-mono); }
textarea:focus, input:focus { border-color: var(--ds-input-border-focus); }
:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 3px; }
.controls { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: var(--ds-space-3); align-items: end; }
input { display: block; width: 96px; min-height: var(--ds-control-height-lg); padding: var(--ds-space-2) var(--ds-space-3); margin-top: var(--ds-space-2); }
button { display: inline-flex; justify-content: center; align-items: center; gap: var(--ds-space-4); cursor: pointer; min-height: 40px; border: 1px solid var(--ds-button-border); padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-font-size-200); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; background: var(--ds-button-bg); color: var(--ds-button-fg); }
button:hover { background: var(--ds-color-gray-500); }
button:disabled { cursor: default; background: var(--ds-color-gray-100); color: var(--ds-color-gray-400); border-color: var(--ds-border-default); }
#generate { margin-left: auto; min-width: 150px; }
.secondary { background: transparent; color: var(--ds-text-default); }
.secondary:hover { background: var(--ds-surface-inverse); color: var(--ds-text-inverse); }
#connect { flex-shrink: 0; }
.hint { font-size: var(--ds-font-size-200); color: var(--ds-text-muted); line-height: var(--ds-line-height-relaxed); }
.hint a { color: var(--ds-text-default); text-decoration: underline; text-underline-offset: 2px; }
.hint a:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 2px; }
.connection-panel > .hint, .connection-body > .setup { margin: var(--ds-space-2) 0 0; }
.connection-body > .setup { margin-top: 0; }
form > .hint { flex-shrink: 0; margin: var(--ds-space-2) 0 0; }
.result { display: flex; flex: 1; flex-direction: column; min-height: 0; border: 1px solid var(--ds-border-default); border-top: 2px solid var(--ds-border-strong); background: var(--ds-surface-subtle); padding: var(--ds-space-3) var(--ds-space-4); }
.panel-heading { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-height-md); }
h2 { margin: 0; }
#copy { min-height: var(--ds-control-height-md); padding: var(--ds-space-1) var(--ds-space-3); }
pre { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; font: var(--ds-font-size-400)/var(--ds-line-height-relaxed) var(--ds-font-family-mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--ds-space-2) 0; }
#status { flex-shrink: 0; margin: var(--ds-space-2) 0 0; }
.result:has(#completion:not([hidden])) #status { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#usage { flex-shrink: 0; margin: auto 0 0; padding-top: var(--ds-space-2); }
#usage:empty { display: none; }
#error { flex-shrink: 0; margin: 0 0 var(--ds-space-2); border: 1px solid var(--ds-border-strong); border-left-width: 4px; padding: var(--ds-space-3); background: var(--ds-surface-subtle); }
#candidates { position: relative; flex-shrink: 0; margin-top: var(--ds-space-1); }
.candidate-body { bottom: calc(100% + var(--ds-space-1)); left: 0; }
.candidate-body > .hint { margin-top: 0; }
#requests { position: relative; flex-shrink: 0; }
.request-body { position: absolute; z-index: 2; bottom: calc(100% + var(--ds-space-1)); left: 0; width: 100%; max-height: min(24rem, 50svh); overflow: auto; overscroll-behavior: contain; padding: var(--ds-space-4); border: 1px solid var(--ds-border-strong); background: var(--ds-surface-default); }
.request-body > .hint { margin: 0 0 var(--ds-space-1); }
.request-body pre { margin: 0 0 var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-subtle); font-size: var(--ds-font-size-200); }
summary { cursor: pointer; padding: var(--ds-space-2) 0; }
#candidate-count { color: var(--ds-text-muted); font-weight: var(--ds-font-weight-medium); margin-left: var(--ds-space-1); }
footer { display: flex; flex-shrink: 0; justify-content: space-between; gap: var(--ds-space-4); font: var(--ds-font-size-100)/var(--ds-line-height-relaxed) var(--ds-font-family-mono); color: var(--ds-text-muted); margin-top: var(--ds-space-3); padding-top: var(--ds-space-2); border-top: 1px solid var(--ds-border-default); text-transform: uppercase; letter-spacing: var(--ds-letter-spacing-wide); }
[hidden] { display: none !important; }
@media (max-width: 959px) {
  main { min-height: 40rem; max-width: 840px; padding: var(--ds-space-3) var(--ds-space-4); }
  .overview, .workspace { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); }
  .overview { padding: var(--ds-space-3) 0; }
  .intro-block > .eyebrow { display: none; }
  .intro { font-size: var(--ds-font-size-300); }
  .workspace { grid-template-rows: minmax(12rem, 1fr) minmax(8rem, 1fr); }
  .prompt-panel { padding-top: var(--ds-space-2); }
  .keyboard-hint { display: none; }
  .controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-2); }
  #generate { grid-column: 1 / -1; }
  .controls label { min-width: 0; font-size: var(--ds-font-size-100); }
  input { font-size: var(--ds-font-size-400); min-height: 44px; margin-top: var(--ds-space-1); }
  .controls input { width: 100%; }
  button { min-height: 44px; }
  #generate { min-width: 0; padding: var(--ds-space-2) var(--ds-space-3); gap: var(--ds-space-2); }
  .result { padding: var(--ds-space-2) var(--ds-space-3); }
  #copy { min-height: 32px; }
  #status { margin-top: var(--ds-space-1); }
  #usage { font-size: var(--ds-font-size-100); padding-top: var(--ds-space-1); }
  footer { margin-top: var(--ds-space-2); padding-top: var(--ds-space-1); }
}
@media (max-width: 600px) {
  .brand img { width: 24px; height: 24px; }
  .masthead { padding-bottom: var(--ds-space-2); }
  .masthead > .eyebrow { font-size: var(--ds-font-size-100); }
  #connect { max-width: 8.5rem; padding: var(--ds-space-2); }
  .connection .eyebrow { font-size: var(--ds-font-size-100); }
  .connection .model { font-size: var(--ds-font-size-100); }
  footer { gap: var(--ds-space-2); font-size: var(--ds-font-size-75); }
}

/* Where a prompt goes (ui/diagnose.js): each hop marked by a square, filled when it answers, red where
   the problem is, hollow when not reached. */
.hops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--ds-space-1) 0 0; padding: 0; list-style: none; border: 1px solid var(--ds-border-default); }
.hop { display: grid; gap: 2px; min-width: 0; padding: var(--ds-space-2) var(--ds-space-3); border-right: 1px solid var(--ds-border-default); }
.hop:last-child { border-right: 0; }
.hop-name { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-font-size-100); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-text-muted); }
.hop-name::before { content: ""; width: 9px; height: 9px; flex: none; border: 1px solid var(--ds-text-muted); }
.hop-ok .hop-name::before { background: var(--ds-border-strong); border-color: var(--ds-border-strong); }
.hop-bad .hop-name::before { background: var(--ds-state-danger); border-color: var(--ds-state-danger); }
.hop-where { font: var(--ds-font-size-100)/var(--ds-line-height-base) var(--ds-font-family-mono); overflow-wrap: anywhere; }
#error ol { margin: var(--ds-space-2) 0; padding-left: var(--ds-space-5); }
#error p { margin: var(--ds-space-2) 0 0; }
#error code, .trust code { display: block; margin-top: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-default); font: var(--ds-font-size-200)/var(--ds-line-height-relaxed) var(--ds-font-family-mono); overflow-wrap: anywhere; }
.trust-yes { color: var(--ds-text-default); }
.trust-no { color: var(--ds-state-danger); }
@media (max-width: 600px) { .hops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hop:nth-child(2) { border-right: 0; } .hop:nth-child(-n+2) { border-bottom: 1px solid var(--ds-border-default); } }

.trust { margin-top: var(--ds-space-1); }
.trust p { margin: var(--ds-space-1) 0 0; }

/* The model picker (ui/switcher.js), on the page the model proxy server serves only. */
.switcher { margin-top: var(--ds-space-2); }
.switcher-row { display: flex; gap: var(--ds-space-2); margin-top: var(--ds-space-1); }
select { flex: 1; min-width: 0; min-height: 40px; padding: var(--ds-space-2) var(--ds-space-3); font: inherit; border: 1px solid var(--ds-input-border); border-radius: var(--ds-radius-none); background: var(--ds-input-bg); color: var(--ds-input-fg); }
select:focus { border-color: var(--ds-input-border-focus); }
select:disabled { cursor: default; background: var(--ds-color-gray-100); color: var(--ds-color-gray-400); border-color: var(--ds-border-default); }
#load-profile { flex-shrink: 0; }
.switcher .hint { margin: var(--ds-space-1) 0 0; }

/* The first token's candidates (ui/candidates.js): one scale for every bar; with the toggle on, the raw
   probability is the faint bar behind the one as sampled. */
.toggle { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-font-size-200); cursor: pointer; }
.toggle input { width: auto; min-height: 0; margin: 0; }
.bars { display: grid; gap: 3px; margin: var(--ds-space-3) 0 0; padding: 0; list-style: none; }
.bar-row { display: grid; grid-template-columns: minmax(4rem, 9rem) minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--ds-space-2); font: var(--ds-font-size-200)/1.4 var(--ds-font-family-mono); }
.bar-token { overflow: hidden; white-space: pre; text-overflow: ellipsis; }
.bar-track { position: relative; height: 14px; }
.bar-raw, .bar-value { position: absolute; top: 0; bottom: 0; left: 0; min-width: 1px; }
.bar-raw { background: var(--ds-border-default); }
.bar-value { top: 3px; bottom: 3px; background: var(--ds-border-strong); }
.bar-row:has(.bar-raw) .bar-value { top: 4px; bottom: 4px; }
.bar-row:not(:has(.bar-raw)) .bar-value { top: 0; bottom: 0; }
.bar-number { text-align: right; color: var(--ds-text-muted); }
.bar-cut .bar-token { color: var(--ds-text-muted); }