/* Palette and type from HL-SG-001: paper, ink, graphite, drafting blue, one orange per view. */
:root {
  --paper: #F7F5F0; --sheet: #FFFFFF; --ink: #16222E; --graphite: #4A5868;
  --blue: #2D5B8E; --orange: #E8590C;
  /* #E8590C is 3.29:1 on paper, which fails AA for the small mono labels that use it most.
     The accent keeps its colour for rules, fills and badges; text takes the darker one. */
  --orange-text: #B84400; --hair: #D8D3C8; --hair-2: #EDEAE2; --field: #B9C2CC;
  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; } /* .btn sets display and would otherwise beat the attribute */
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 16.5px; line-height: 1.6; }
a { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { color: var(--orange); border-bottom-color: var(--orange); }
h1, h2, h3, b { font-family: var(--sans); letter-spacing: -0.01em; }
.label, .status, .plate, .who, .rfoot, .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }

/* Full height, so the composer sits at the bottom of the window rather than halfway up
   it while the thread is short. The thread takes the slack; everything else keeps its
   own height. Not applied inside the embed, where the frame's height is whatever the
   content measures and stretching to the viewport would inflate it. */
.sheet { max-width: 1100px; margin: 0 auto; padding: 0 24px 40px; }
/* Standalone, the sheet fills the window so the composer sits at the bottom of it rather
   than halfway up. Embedded, it must not: inside a frame 100vh is the frame's own height,
   so stretching to it makes the page as tall as the frame, the posted height comes back a
   few pixels larger for the padding, and the frame grows on every tick until it hits the
   parent's clamp. MEASURED 2026-09-07, and it filled the page. The embed hugs its content
   instead, and the parent sizes the frame to it, which puts the composer at the bottom
   because there is nothing under it. */
html:not(.embed), html:not(.embed) body { min-height: 100vh; }
html:not(.embed) .sheet { display: flex; flex-direction: column; min-height: 100vh; }

/* `fill` is the embed given a box to fill rather than a page to grow in: the frame owns
   a dialog, so the sheet takes the frame's full height, the thread scrolls inside it and
   the composer rests on the bottom edge instead of floating up under a short thread.
   Percentages, not `vh`: inside a frame `vh` is the viewport, not the frame. */
html.fill, html.fill body { height: 100%; overflow: hidden; }
html.fill .sheet { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; }
html.fill .trace { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html.fill .ask { flex: none; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); background: var(--paper); }
/* Nothing has been asked yet, so the thread is one short block adrift at the top of a tall
   box with the composer far below it. Centred, the same emptiness reads as a starting
   point. It goes back to the top the moment there is a conversation to read. */
html.fill .trace:has(> .empty) { justify-content: center; }
html.fill .empty { padding-bottom: 4px; }
.head { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 10px; border-bottom: 2px solid var(--ink); gap: 16px; }
.head .l, .head .r { display: flex; gap: 20px; align-items: baseline; }
.brand { font-family: var(--sans); font-weight: 800; font-size: 17px; color: var(--ink); border: 0; }
.plate { color: var(--ink); font-weight: 600; }

.hero { padding: 48px 0 20px; }
.eyebrow { color: var(--orange-text); margin: 0 0 14px; }
h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1; margin: 0 0 16px; }
.lede { font-size: 20px; font-weight: 600; margin: 0; max-width: 34em; }

.btn { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 11px 20px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; }
.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn:disabled { opacity: .45; cursor: progress; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: transparent; border-color: var(--orange); color: var(--orange); }
.btn--bare { background: none; border: 0; color: var(--blue); padding: 0; font-size: 13px; cursor: pointer; }
.btn--bare:hover { color: var(--orange); }

/* The composer sits under the thread and stays put while the thread scrolls past it. */
.ask { padding: 10px 0; border-top: 1px solid var(--ink); position: sticky; bottom: 0;
  background: var(--paper); z-index: 3; box-shadow: 0 -14px 20px -14px rgba(22,34,46,.22); }
.ask form { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.ask input[type=text] { font-family: var(--serif); font-size: 17px; padding: 10px 14px; border: 1px solid var(--field); border-radius: 0; background: var(--sheet); color: var(--ink); min-width: 0; }
.ask input[type=text]:focus { border-color: var(--orange); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mic { min-height: 44px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); cursor: pointer; border-radius: 0; display: grid; place-items: center; }
.mic[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--paper); animation: pulse 1.4s ease-in-out infinite; }
.mic:disabled { opacity: .35; cursor: not-allowed; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.undercomposer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.status { margin: 0; min-height: 1.3em; }
.status.working::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: var(--orange); animation: pulse 1s ease-in-out infinite; vertical-align: middle; }
.opts { display: flex; gap: 18px; align-items: center; }
.speak { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.openfull { border: 0; color: var(--blue); display: none; }
.embed .openfull { display: inline; }

.gate { margin: 16px 0; border: 1px solid var(--hair); border-left: 3px solid var(--orange); background: var(--sheet); padding: 16px 20px; }
.gate b { display: block; font-size: 18px; margin-bottom: 6px; }
.gate p { margin: 0 0 12px; color: var(--graphite); }

/* Oldest at the top, newest at the bottom, the way a conversation reads. */
.trace { margin: 8px 0 0; display: flex; flex-direction: column; gap: 16px; }
html:not(.embed) .trace { flex: 1 1 auto; }
.empty { padding: 12px 0 24px; }
.empty .emptylede { margin: 10px 0 20px; color: var(--graphite); max-width: 46em; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-family: var(--serif); font-size: 14.5px; padding: 10px 14px; min-height: 44px; cursor: pointer; text-align: left;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--hair); border-radius: 0; }
.chip:hover { border-color: var(--orange); color: var(--orange); }
.chip em { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-text); margin-left: 7px; }

.turn { border-top: 1px solid var(--hair); padding-top: 14px; }
.you { font-family: var(--sans); font-weight: 700; font-size: 18px; margin: 0 0 10px; }
.you .label { margin-right: 10px; color: var(--blue); }
.said { margin: 12px 0 0; font-size: 18px; line-height: 1.55; max-width: 46em; }
.said .label { display: block; margin-bottom: 5px; }
.said .md p { margin: 0 0 8px; }
.said .md p:last-child { margin-bottom: 0; }

/* Markdown, rendered rather than printed. The record keeps the shape a skill asked for. */
.md h4 { font-family: var(--sans); font-size: 15px; margin: 12px 0 6px; }
.md h4:first-child { margin-top: 0; }
.md ul, .md ol { margin: 6px 0 8px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md code { font-family: var(--mono); font-size: .88em; background: var(--paper); border: 1px solid var(--hair); padding: 0 4px; }
.md pre { margin: 8px 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap;
  word-break: break-word; background: var(--paper); border: 1px solid var(--hair); padding: 10px 12px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; }
.md table { border-collapse: collapse; margin: 8px 0; font-size: 14px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--hair); padding: 5px 10px; text-align: left; vertical-align: top; }
.md th { font-family: var(--sans); font-size: 12px; background: var(--paper); }
.err { color: var(--orange-text); font-family: var(--mono); font-size: 12.5px; margin: 8px 0 0; }

/* The reasoning, while it is being written. Quieter than the answer on purpose: it is
   work in progress, and it folds away once the answer arrives. */
details.think { margin: 8px 0 0; border-left: 2px solid var(--field); padding: 2px 0 2px 12px; }
details.think summary { cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite); }
details.think summary:hover { color: var(--orange); }
details.think[open] summary { color: var(--orange-text); }
.thinktext { margin: 6px 0 2px; font-size: 14.5px; line-height: 1.55; color: var(--graphite); max-width: 46em; white-space: pre-wrap; }

/* What a skill requires an answer to close with. Written rather than spoken, and kept
   in the shape the skill specifies rather than prettified into prose. */
.record { margin: 12px 0 0; border-left: 2px solid var(--blue); padding: 4px 0 4px 14px; }
.record .label { color: var(--blue); }
.record--unchecked { border-left-color: var(--orange); }
.record--unchecked > .label { color: var(--orange-text); }
.record .unchecked { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--graphite); }
.record .unchecked .label { color: var(--orange-text); margin-right: 8px; }
.missing { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--orange); background: var(--paper);
  font-size: 13.5px; line-height: 1.5; color: var(--graphite); }
.missing .label { color: var(--orange-text); margin-right: 8px; }
.record > pre { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair); padding: 10px 12px; overflow-x: auto; max-height: 520px; }

.call { margin: 8px 0 0; border: 1px solid var(--ink); background: var(--sheet); }
.call .rhead { background: var(--ink); color: var(--paper); padding: 8px 14px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.call .rhead .label { color: var(--orange); } /* on ink, where the lighter accent reads */
.call .rhead code { font-family: var(--mono); font-size: 12.5px; color: var(--paper); word-break: break-word; }
.call .rbody { padding: 12px 14px; }
.call .rbody > b { display: block; font-size: 16px; margin-bottom: 8px; }
.call .pending { color: var(--graphite); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.call .pending::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: var(--orange); animation: pulse 1s ease-in-out infinite; vertical-align: middle; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hair); margin: 0 0 8px; }
.grid > div { padding: 8px 12px; border-right: 1px solid var(--hair-2); min-width: 0; }
.grid > div:last-child { border-right: 0; }
.grid b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.grid .label { font-size: 9.5px; }

.refuse { border-left: 3px solid var(--orange); padding: 8px 12px; margin: 8px 0; background: var(--paper); }
.refuse .label { color: var(--orange-text); }
.refuse p { margin: 4px 0 0; font-size: 14.5px; color: var(--graphite); }
.rfoot { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; background: var(--paper); border-top: 1px solid var(--hair); font-size: 9.5px; }
details.raw { margin: 8px 14px 12px; }
details.raw summary { cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
details.raw summary:hover { color: var(--orange); }
details.raw pre { margin: 8px 0 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; background: var(--paper); border: 1px solid var(--hair); padding: 10px; overflow: auto; max-height: 320px; }
.note { font-size: 13.5px; color: var(--graphite); margin: 6px 0 0; }

.foot { margin-top: 24px; padding-top: 14px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--graphite); }

/* --- embedded in the site: no chrome, no page scroll of its own ------------------ */
.embed .head, .embed .hero, .embed .foot { display: none; }
.embed, .embed body, .embed .sheet { background: transparent; }
/* Gutters that grow with the box. A flat 16px inside a thousand-pixel dialog reads as a
   page pressed against its own frame, which is what made it feel airless. */
.embed .sheet { padding: 0 clamp(18px, 3.4vw, 44px) 8px; max-width: none; }
.embed .trace { min-height: 0; padding-top: clamp(14px, 2.2vw, 26px); gap: clamp(16px, 2vw, 24px); }
.embed .empty { padding: 4px 0 18px; }
.embed .ask { border-top: 1px solid var(--hair); position: static; box-shadow: none; }

@media (max-width: 640px) {
  .ask form { grid-template-columns: 46px 1fr; }
  .ask form #send { grid-column: 1 / -1; }
  .grid { grid-template-columns: 1fr 1fr; }
  .head { flex-direction: column; align-items: stretch; gap: 8px; }
}