/* The hidden attribute is display:none from the *user-agent* stylesheet, which
   any author rule carrying a display beats — so .row{display:flex} on a hidden
   element wins and the element stays on the screen. Not hypothetical here: the
   API key box was visible under a local model, which is the one arrangement
   where there is no key. Reported from a phone, with a screenshot of it.
   Every element this page hides is hidden by setting the property, so the fix
   is one rule rather than a display audit of each. !important because it has to
   beat a class, which is exactly what the user-agent rule could not do. */
[hidden]{display:none !important}
.panel{border-top:1px solid var(--line);padding-top:1.5rem;margin-bottom:2.5rem}
.panel h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.5rem 0 .6rem}
.panel h2:first-of-type{margin-top:0}
/* The gap is between touch targets, so it is a touch measurement. Two of these
   wrap onto separate lines on a phone, and 8px is the least that reads as two
   controls rather than one strip.
   The bottom margin is the part that was missing: the row below carries a
   bottom margin and no top one, so the Ask button sat **flush** against the
   example above it — zero pixels, measured on an iPhone and reported from one.
   An element with no margin on the edge where the next one begins is the same
   shape the console's row rule was fixed for, one container over. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .75rem}
/* Same touch rules as the front door's controls: no :hover state on a device
   that has no pointer, because iOS spends the first tap applying it. */
.chip{font:inherit;font-size:.9rem;background:transparent;color:var(--fg);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;cursor:pointer;
  touch-action:manipulation;min-height:36px}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.chip-quiet{color:var(--muted);font-size:.82rem}
.chip:active{border-color:var(--muted)}
@media (hover: hover){.chip:hover{border-color:var(--muted)}}
/* flex-end aligns *margin* boxes, so every child of an edge-aligned row has its
   margin on that edge reset. The console learned this one from a button hanging
   below the control beside it; the rule travelled here with the check. */
.row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0 0 .75rem}
.row > *{margin-bottom:0}
/* A .note carries a top margin and no bottom one, so a row of controls under a
   line of text sat **flush** against it — zero pixels, measured. That is the
   Ask button's defect one section up, and the reason it is a rule here rather
   than a margin on the one row is that it was the second instance. */
.note + .row{margin-top:.75rem}
select,input,textarea{font:inherit;font-size:.95rem;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:6px;padding:.5rem .6rem;min-height:40px;min-width:0}
/* 14rem rather than 10: two of these side by side at 390 leave about 170px each,
   which truncates a model name before its size — and the size is the choice
   being made. At this basis they wrap to one per line on a phone and still sit
   side by side anywhere wider. Measured at 390 and at 1440. */
select{flex:1 1 14rem}
input#key{flex:1 1 14rem}
textarea{width:100%;resize:vertical;margin-bottom:.6rem}
button.quiet{background:transparent;color:var(--accent);border:1px solid var(--accent)}
/* A downloading model is the one thing on this page that takes minutes, and
   until there was a bar the only sign of it was a line of status text that a
   reader could not tell from the line before. The width is in the stylesheet
   rather than on the element: this page is style-src 'self', and the console
   learned that one by rendering every migration's progress bar full. */
#local-progress{flex:1 1 8rem;height:.5rem;min-width:6rem}
.note{font-size:.88rem;color:var(--muted);margin:.4rem 0 0}
.note.warn{color:#a35}
.status{font-size:.9rem;color:var(--muted);min-height:1.4rem;margin:.6rem 0 0}
.status.warn{color:#a35}
.catalogue{display:flex;flex-wrap:wrap;gap:.35rem;margin:1rem 0 0}
.tool{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem}
.tool-absent code{text-decoration:line-through;opacity:.6}
/* Permission is information here rather than decoration, and the three colours
   are the brand's own: read teal, write blue, admin violet. "not offered" is
   deliberately none of them — it is the absence of a permission, not one. */
.badge{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  border-radius:3px;padding:.1rem .35rem;border:1px solid currentColor;white-space:nowrap}
.badge-read{color:#2a6f77}
.badge-write{color:#3b62a8}
.badge-admin{color:#6a4c9c}
.badge-none{color:var(--muted)}
@media (prefers-color-scheme:dark){.badge-read{color:#7fc8cf}.badge-write{color:#8fb0ee}.badge-admin{color:#b49ae0}}
.trace{margin:1rem 0 0;display:flex;flex-direction:column;gap:.3rem}
/* Before the first question there is no trace and no answer, and their margins
   were still a hole between the Ask button and the credit line under it. Seen
   on a screenshot rather than in a check — an empty box has no width and no
   height and every rule about it passes. */
.trace:empty{margin:0}
.trace-row{display:flex;align-items:baseline;gap:.45rem;min-width:0}
.trace-call{overflow-wrap:anywhere;min-width:0;font-size:.85rem}
.trace-note{font-size:.85rem;color:var(--muted);padding-left:.4rem;overflow-wrap:anywhere}
.trace-refused{color:#a35}
.trace-thought{font-size:.85rem;color:var(--muted);font-style:italic;overflow-wrap:anywhere}
.answer{margin:1.25rem 0 0;padding:.9rem 1rem;border:1px solid var(--line);border-radius:6px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.credit{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line)}