/*
 * The Workbench's only stylesheet. It is loaded as a same-origin file so the
 * served `style-src 'self'` needs no inline allowance; nothing here is
 * generated, and nothing here carries the readiness marker the entry script
 * writes.
 *
 * Two rules shape everything below.
 *
 * The document's STRUCTURE is the contract: the browser exercises read this
 * application through its `data-workbench-*` attributes and its rendered text,
 * so this file may restyle anything and must rename nothing. Every selector
 * here is a class or an element, never one of those attributes.
 *
 * Nothing is hidden with `display: none` on a state the accessibility tree has
 * to keep. The announced status paragraphs are drawn as nothing when empty
 * rather than removed, and the dialogs' steps are hidden by the `hidden`
 * property, whose user-agent `display: none` no rule here overrides.
 */

:root {
  color-scheme: light dark;

  --workbench-gap: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-pill: 999px;

  --font-ui:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /*
   * The light palette. Every colour is a token so the dark scheme below can
   * redefine the same names rather than restate the rules that use them.
   */
  --page: #f6f7f9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f3f6;
  --border: #e3e6ec;
  --border-strong: #cdd2dc;
  --text: #11141a;
  --text-muted: #5c6472;
  --text-faint: #858d9b;
  --accent: #1a56db;
  --accent-hover: #1749bd;
  --accent-text: #ffffff;
  --accent-quiet: #eaf0fd;
  --good: #087443;
  --good-quiet: #e6f5ec;
  --good-border: #a9ddc0;
  --warn: #8a5a00;
  --warn-quiet: #fdf3e2;
  --mark: #ffe9a3;
  --mark-text: #3d2f00;
  --danger: #b4231b;
  --danger-quiet: #fdeceb;
  --danger-border: #f2c3c0;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
  --shadow: 0 1px 3px rgb(16 24 40 / 8%), 0 8px 24px -8px rgb(16 24 40 / 10%);
  --shadow-lg: 0 24px 64px -16px rgb(16 24 40 / 28%);
  --focus-ring: 0 0 0 3px rgb(26 86 219 / 28%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0f13;
    --surface: #16191f;
    --surface-raised: #1b1f26;
    --surface-sunken: #22262e;
    --border: #282d36;
    --border-strong: #3b424e;
    --text: #e9ecf1;
    --text-muted: #a3abb9;
    --text-faint: #7b8494;
    --accent: #6b9bfa;
    --accent-hover: #86adfd;
    --accent-text: #0a0d12;
    --accent-quiet: #17243a;
    --good: #5ed39a;
    --good-quiet: #10281d;
    --good-border: #245f43;
    --warn: #e5b567;
    --warn-quiet: #2b2213;
    --mark: #6f5613;
    --mark-text: #fdf4da;
    --danger: #f28b82;
    --danger-quiet: #2b1715;
    --danger-border: #5c2b27;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 1px 3px rgb(0 0 0 / 50%), 0 8px 24px -8px rgb(0 0 0 / 60%);
    --shadow-lg: 0 24px 64px -16px rgb(0 0 0 / 70%);
    --focus-ring: 0 0 0 3px rgb(107 155 250 / 35%);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- app bar */

.app-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-bar-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 68rem;
  padding: var(--space-3) var(--space-5);
}

.brand {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.brand-mark {
  color: var(--accent);
  height: 1.5rem;
  width: 1.5rem;
}

.brand-name {
  font-size: 1.0625rem;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.brand-env {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.0625rem 0.5rem;
  text-transform: uppercase;
}

/*
 * The session, in the bar. Its status paragraph is drawn as a quiet line rather
 * than a boxed panel: in the bar it is a label on the application, not a
 * message in the page.
 */
.app-bar-session {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.connect-status {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: 0;
  max-width: 34rem;
}

/*
 * The other half of the announced pair, which is empty whenever the screen's
 * sentence belongs to its sibling. It stays in the document — a live region has
 * to exist before the message it announces — and is drawn as nothing rather
 * than hidden: `display: none` would take it out of the accessibility tree, and
 * showing it again would be the insertion this pair exists to avoid.
 */
.connect-status:empty {
  margin: 0;
}

/* ------------------------------------------------------------------ layout */

.shell {
  margin: 0 auto;
  max-width: 68rem;
  padding: var(--space-6) var(--space-5) var(--space-7);
}

.page-head {
  margin-bottom: var(--space-5);
}

.shell h1 {
  font-size: 1.75rem;
  font-weight: 660;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.lede {
  color: var(--text-muted);
  margin: 0;
  max-width: 46rem;
}

/*
 * The workflow half stacks its panels, and the spacing is carried by the
 * panels rather than by a grid gap.
 *
 * That distinction is load-bearing. Several of these children are ANNOUNCED
 * live regions that sit empty until something fills them, and a live region has
 * to be in the accessibility tree before the message it announces — so they may
 * not be `display: none`. A grid `gap` would still reserve space between every
 * one of them, empty or not, leaving a hole in the page. A top margin applied
 * only to a child that has content spaces exactly what is visible, and leaves
 * an empty region in the document at zero height.
 */
.workflow {
  display: block;
}

.workflow > *:not(:empty) {
  margin-top: var(--space-5);
}

.workflow > *:first-child:not(:empty) {
  margin-top: 0;
}

/* ----------------------------------------------------------------- buttons */

.connect-action,
.workflow-action {
  align-items: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: var(--space-2);
  justify-content: center;
  line-height: 1.2;
  padding: 0.5rem 0.875rem;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
  white-space: nowrap;
}

/* The primary action: the one thing a screen most wants pressed. */
.connect-action {
  background: var(--accent);
  border: 1px solid transparent;
  color: var(--accent-text);
  font-weight: 560;
}

.connect-action:hover {
  background: var(--accent-hover);
}

/*
 * The quiet variant, for a control that leaves rather than invites. It keeps
 * the same box so the two never shift the layout between them, and changes
 * only how much attention it asks for.
 */
.connect-action-quiet {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  font-weight: 520;
}

.connect-action-quiet:hover {
  background: var(--surface-sunken);
}

/* The default action inside the page: secondary by design. */
.workflow-action {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 520;
}

.workflow-action:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
}

/* One page-level action may be the loud one; the toolbar marks it. */
.workflow-action-primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-text);
  font-weight: 560;
}

.workflow-action-primary:hover {
  background: var(--accent-hover);
}

/* --------------------------------------------------------------- cards etc */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.section-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-heading {
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  margin: 0;
}

.section-note {
  color: var(--text-faint);
  font-size: 0.8125rem;
  margin: 0;
}

.toolbar {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.toolbar .workflow-field {
  flex: 1 1 18rem;
  margin: 0;
}

.badge {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
}

.badge-good {
  background: var(--good-quiet);
  border: 1px solid var(--good-border);
  color: var(--good);
}

.badge-warn {
  background: var(--warn-quiet);
  border: 1px solid var(--border-strong);
  color: var(--warn);
}

/* ------------------------------------------------------------------ fields */

.workflow-field {
  display: block;
  margin-top: var(--workbench-gap);
}

.workflow-field > span {
  color: var(--text-muted);
  display: block;
  font-size: 0.8125rem;
  font-weight: 560;
  margin-bottom: var(--space-1);
}

.workflow-field input,
.workflow-field textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: inherit;
  display: block;
  font: inherit;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

.workflow-field textarea {
  resize: vertical;
}

.workflow-field input::placeholder {
  color: var(--text-faint);
}

.workflow-field input:focus,
.workflow-field textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ----------------------------------------------------------------- library */

.library-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.library-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.library-list li:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.library-source {
  font-size: 0.9375rem;
  font-weight: 580;
  margin: 0;
  overflow-wrap: anywhere;
}

.library-facts {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: var(--space-2);
  margin: 0;
}

.library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.library-host {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  margin: var(--space-4) 0 var(--space-2);
}

.library-host:first-of-type {
  margin-top: 0;
}

/*
 * The older versions of one URL, unfolded under its row: a plain sequence,
 * newest first, indented under the row that is its latest.
 */
.library-versions {
  border-left: 2px solid var(--border-strong);
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-4);
}

.library-versions li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.library-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.library-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------------ reader */

/*
 * The document page's way back. It sits above the reader as a quiet control
 * rather than inside the panel, so it is there whatever the page's reads
 * answered.
 */
.document-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.document-nav:empty {
  display: none;
}

.workflow-action-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.workflow-action-quiet:hover {
  background: var(--surface-sunken);
  color: var(--text);
}

.reader-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}

.reader-source {
  font-size: 1.0625rem;
  font-weight: 620;
  margin: 0;
  overflow-wrap: anywhere;
}

.reader-meta {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

/*
 * The document body. `white-space: pre-wrap` keeps the normalizer's own spacing
 * visible instead of letting the browser re-collapse it, so what is on screen
 * is what the receipt covers. The column is capped and scrolled rather than
 * allowed to push the page, so the find field stays reachable while reading.
 */
.reader-text {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  margin: var(--space-3) 0 0;
  max-height: 30rem;
  overflow-wrap: anywhere;
  overflow-y: auto;
  padding: var(--space-4);
  white-space: pre-wrap;
}

.reader-text mark {
  background: var(--mark);
  border-radius: 3px;
  color: var(--mark-text);
  padding: 0 2px;
}

.reader-find {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.reader-tally {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: 0;
  padding-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ proof */

.proof-panel {
  background: var(--good-quiet);
  border: 1px solid var(--good-border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.proof-panel-development {
  background: var(--warn-quiet);
  border-color: var(--border-strong);
}

.proof-quote {
  border-left: 3px solid var(--good);
  font-size: 1rem;
  margin: var(--space-1) 0;
  padding-left: var(--space-3);
}

.proof-fields {
  display: grid;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  gap: 0.125rem;
  margin: 0;
}

.proof-fields p {
  color: var(--text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.proof-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.proof-copy-status {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: 0;
  min-height: 1.2em;
}

/* ------------------------------------------------------------ results etc */

.results {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.results li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.results p {
  margin: 0 0 var(--space-1);
}

.read-panel {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: var(--space-3);
  padding: var(--space-4);
}

.read-panel dl,
.read-fields {
  display: grid;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  gap: var(--space-1);
  margin: 0;
}

/* A failure is stated in the page, in its own colour, and never in a badge. */
.workflow-failure p {
  background: var(--danger-quiet);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  color: var(--danger);
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

/* ---------------------------------------------------------------- dialogs */

/*
 * Every dialog here is opened with `showModal()`, so the browser owns its
 * top-layer placement, its backdrop and the inertness of the document under it;
 * nothing below recreates any of that.
 */
.sign-in,
.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: inherit;
  padding: var(--space-5);
  width: min(32rem, calc(100vw - 2rem));
}

.sign-in::backdrop,
.sheet::backdrop {
  background: rgb(8 10 14 / 55%);
}

.sign-in {
  width: min(26rem, calc(100vw - 2rem));
}

.sign-in h2,
.sheet h2 {
  font-size: 1.125rem;
  font-weight: 620;
  margin: 0 0 var(--space-2);
}

.sign-in-notice,
.sheet-note {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0 0 var(--space-3);
}

/*
 * The sign-in dialog lays its controls out in ONE row: the step's own actions
 * first, then Cancel pushed to the far right. The steps are revealed rather
 * than re-rendered (`createSignInDialog`), so the current step is a `div`
 * between the notice and the Cancel control; it contributes its children to
 * the dialog's flex flow rather than a box of its own, which is what lets a
 * step's `Send code` and the shared `Cancel` share a line. A hidden step keeps
 * the `hidden` attribute's own `display: none`.
 *
 * `[open]` because a `dialog` that is not open is `display: none` in every
 * user-agent stylesheet, and an unconditional `display: flex` here would put
 * the closed dialog on the page.
 */
.sign-in[open] {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-2);
}

.sign-in > h2,
.sign-in > p,
.sign-in .workflow-field,
.sign-in-step > p {
  flex-basis: 100%;
  margin: 0;
}

.sign-in-step:not([hidden]) {
  display: contents;
}

.sign-in-cancel {
  margin-left: auto;
}

.sheet-wide {
  width: min(52rem, calc(100vw - 2rem));
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/*
 * The snippet preview: the published element rendered live, above the exact
 * bytes the copy control writes. The rendered half is what a recipient sees;
 * the source half is what they would paste, so both are shown rather than
 * either standing for the other.
 */
.preview-stage {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* Names what the dashed frame below it encloses. */
.preview-frame-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
}

/*
 * The element inside the preview, styled through the `part` names the
 * published element exposes and in this application's own tokens. This is
 * what the Workbench's preview looks like, not a promise about a recipient's
 * page: the standalone page carries its own stylesheet, and a pasted fragment
 * takes the host page's.
 *
 * The dashed frame is drawn around the element and nothing else, so what a
 * recipient's page will show is told apart from the stage it is previewed on.
 */
.preview-stage witness-quote {
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  display: block;
  font-size: 1.0625rem;
  line-height: 1.55;
  padding: var(--space-3) var(--space-4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*
 * The edit control beneath the frame. Ticked, it reveals a field whose text is
 * written into the element's own text, so the frame above shows what a
 * recipient's page would show of an altered quote and the verdict follows.
 */
.preview-edit {
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  font-size: 0.8125rem;
  font-weight: 560;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.preview-edit input {
  accent-color: var(--accent);
  margin: 0;
}

.preview-stage witness-quote::part(verdict) {
  margin: var(--space-3) 0 0;
  text-align: right;
  white-space: normal;
}

.preview-stage witness-quote::part(badge) {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: help;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
}

.preview-stage witness-quote::part(badge-valid) {
  background: var(--good-quiet);
  border-color: var(--good-border);
  color: var(--good);
}

.preview-stage witness-quote::part(badge-invalid) {
  background: var(--danger-quiet);
  border-color: var(--danger-border);
  color: var(--danger);
}

.preview-stage witness-quote::part(details) {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  white-space: normal;
}

.preview-stage witness-quote::part(summary) {
  color: var(--text);
  cursor: pointer;
  font-weight: 560;
}

.preview-stage witness-quote::part(fields) {
  display: grid;
  gap: var(--space-1) var(--space-4);
  grid-template-columns: max-content minmax(0, 1fr);
  margin: var(--space-2) 0 0;
}

.preview-stage witness-quote::part(field-value) {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.preview-source {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  margin: var(--space-2) 0 0;
  max-height: 16rem;
  overflow: auto;
  padding: var(--space-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.preview-label {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 560;
  margin: var(--space-4) 0 0;
}