/*
 * COMPONENTS — one block per module under ../src/components and ../src/app.
 *
 * In unity-surfaces these are Tailwind class recipes living beside each
 * component (`buttonVariants`, `panelChrome`, `badgeVariants`, …). The block
 * comments name the recipe each one was ported from; at the port, each block
 * is replaced by that recipe and this file is deleted. Semantic tokens only.
 */

/* -------------------------------------------------------------- shell -- */
/* The static frame in index.html, driven by src/app/layout.mjs. The nav item is Unity's `productNavItemClassName` (ghost, md). */

/* src/app/layout.mjs — apps/web components/layout/authenticated-shell.tsx: nav, page, footer in one column. */
.top, main, .foot {
  width: 100%; max-width: var(--container-panel); margin-inline: auto;
  padding-left: max(var(--spacing-inset), env(safe-area-inset-left)); padding-right: max(var(--spacing-inset), env(safe-area-inset-right));
}
.top { display: flex; align-items: center; gap: 2px; padding-block: 14px 6px; }
.top nav { display: flex; gap: 2px; margin: 0 auto 0 -10px; }
.top nav a, .top button {
  font: 400 var(--text-small)/1 var(--font-sans); color: var(--color-foreground-dim);
  text-decoration: none; background: transparent; border: 0; cursor: pointer;
  height: 36px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--radius-button);
  transition: color var(--motion-compact) var(--ease-standard), background-color var(--motion-compact) var(--ease-standard);
}
.top nav a:hover, .top button:hover { color: var(--color-foreground); background: color-mix(in oklab, var(--color-foreground) 5%, transparent); }
.top nav a[aria-current="page"] { color: var(--color-foreground); font-weight: 500; }
.top button { margin-right: -10px; }

main { flex: 1; padding-block: 20px 40px; }
/* apps/web components/layout/context-gateway-footer.tsx, its last row only: small text, dot-separated, links fade on hover. */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding-block: 0 max(20px, env(safe-area-inset-bottom)); font-size: var(--text-compact); color: var(--color-foreground-dim); }
.foot a { text-decoration: none; transition: opacity var(--motion-compact) var(--ease-standard); }
.foot a:hover { opacity: 0.65; }
.view { display: grid; gap: var(--spacing-small); }
.view > :empty { position: absolute; }           /* empty slots and live regions take no room */
.head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.head h1 { margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.back { justify-self: start; color: var(--color-foreground-dim); text-decoration: none; font-size: var(--text-small); margin-bottom: -8px; padding: 6px 0; }
.back:hover { color: var(--color-foreground); }
.dim { color: var(--color-foreground-dim); }
.small { font-size: var(--text-small); }

/* ------------------------------------------------------------ buttons -- */
/* src/components/ui-presentation/button.mjs — Unity `buttonVariants`: default (foreground fill), outline, ghost. */

.btn {
  font: 400 var(--text-small)/1 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 36px; padding: 0 20px; border-radius: var(--radius-button);
  border: 1px solid var(--color-foreground); background: var(--color-foreground); color: var(--color-background);
  transition: background-color var(--motion-compact) var(--ease-standard), border-color var(--motion-compact) var(--ease-standard), color var(--motion-compact) var(--ease-standard), translate var(--motion-compact) var(--ease-standard);
}
.btn:hover:not(:disabled) { background: color-mix(in oklab, var(--color-foreground) 80%, transparent); }
.btn:active:not(:disabled) { translate: 0 1px; }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn.outline { border-color: color-mix(in oklab, var(--color-ring) 30%, transparent); background: var(--color-background); color: var(--color-foreground); }
.btn.outline:hover:not(:disabled) { border-color: color-mix(in oklab, var(--color-ring) 50%, transparent); background: color-mix(in oklab, var(--color-foreground) 5%, var(--color-background)); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--color-foreground-dim); padding-inline: 12px; }
.btn.ghost:hover:not(:disabled) { background: color-mix(in oklab, var(--color-foreground) 5%, transparent); color: var(--color-foreground); }
.btn.ghost.danger { color: var(--color-destructive-foreground); }
.btn.full { width: 100%; height: var(--spacing-button); font-size: var(--text-body); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actions .push { margin-left: auto; }
.head > .btn.ghost:last-child { margin-right: -12px; }

/* ------------------------------------------------------------- fields -- */
/* src/components/ui/field.mjs, schema-fields.mjs — Unity `Input` outline variant + `FieldLegend` label; focus is `stateFocusWithin`. */

.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-small); font-weight: 500; }
.field .hint { font-size: var(--text-compact); color: var(--color-foreground-dim); }
.field.check { display: flex; align-items: center; gap: 10px; }
input, select, textarea {
  font: 400 var(--text-button)/var(--default-line-height) var(--font-sans); color: var(--color-foreground);
  width: 100%; min-width: 0; height: var(--spacing-button); padding: 4px 12px;
  background: var(--color-background); border: 1px solid color-mix(in oklab, var(--color-ring) 30%, transparent); border-radius: var(--radius-button);
  transition: border-color var(--motion-compact) var(--ease-standard), box-shadow var(--motion-compact) var(--ease-standard);
}
textarea { height: auto; }
input::placeholder { color: var(--color-muted-foreground); }
input:hover, select:hover, textarea:hover { border-color: var(--color-accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 10%, transparent); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; flex: none; accent-color: var(--color-foreground); }
form { display: grid; gap: var(--spacing-small); }

/* -------------------------------------------------------------- panels -- */
/* src/components/layout/page-panel.mjs — Unity `panelChrome`: a card-radius surface on the canvas, ringed by the border. */

.panel h2 { overflow-wrap: anywhere; }
.panel h2.long { font-size: var(--text-body); font-weight: 400; text-wrap: pretty; }
.panel { background: var(--color-background); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-border); padding: var(--spacing-small); display: grid; gap: var(--spacing-small); }
/* Unity connect-flow tone box, error tone. */
.panel.error { box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-destructive-foreground) 30%, transparent); background: color-mix(in oklab, var(--color-destructive) 10%, var(--color-background)); }
.err { color: var(--color-destructive-foreground); font-size: var(--text-small); }
.msg { color: var(--color-foreground-dim); font-size: var(--text-small); }
.msg:empty { position: absolute; }

/* src/components/elements/source-row.mjs — Unity `SourceRowList` (`panelActionChrome`): one surface, rows split by an inset hairline. */
.rows { list-style: none; margin: 0; padding: 0; background: var(--color-background); border-radius: var(--radius-card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-border) 60%, transparent), var(--shadow-surface-2); overflow: hidden; }
.rows > li + li::before { content: ""; display: block; margin-left: 16px; border-top: 1px solid color-mix(in oklab, var(--color-border) 70%, transparent); }
.row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--spacing-button); padding: 6px 16px;
  font: 500 var(--text-button)/1.3 var(--font-sans); color: var(--color-foreground); text-align: left; text-decoration: none;
  background: transparent; border: 0; border-radius: 0;
  transition: background-color var(--motion-compact) var(--ease-standard);
}
a.row, button.row { cursor: pointer; }
a.row:hover, button.row:hover:not(:disabled) { background: color-mix(in oklab, var(--color-muted) 40%, transparent); }
.row:focus-visible { box-shadow: inset 0 0 0 2px var(--color-ring); border-radius: var(--radius-card); }
.row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A run that did not succeed: its name, then why, cut to one line. Beside the name where there is room, under it on a phone. */
.row .who { display: flex; align-items: baseline; gap: 10px; }
.row .name { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .why { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: var(--text-small); color: var(--color-foreground-dim); }
@media (max-width: 560px) { .row .who { flex-direction: column; align-items: stretch; gap: 1px; } .row .why { flex: none; } }
.row .meta { font-weight: 400; font-size: var(--text-small); color: var(--color-muted-foreground); white-space: nowrap; }
.row .chev { width: 20px; height: 20px; flex: none; color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent); transition: color var(--motion-compact) var(--ease-standard); }
.row:hover .chev { color: var(--color-foreground); }
.row.off, .row:disabled { color: var(--color-muted-foreground); }
button.row:disabled { cursor: not-allowed; background: color-mix(in oklab, var(--color-muted) 50%, transparent); }

/* src/components/chrome/badge.mjs — Unity `Badge`: mono, uppercase, wide tracking, a dot for state. */
.badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  font: 500 var(--text-pill)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 8px; border-radius: 8px; background: var(--color-muted); color: var(--color-foreground-dim);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--color-success-reversed); color: var(--color-success-foreground); }
.badge.warn { background: var(--color-warning-reversed); color: var(--color-warning-foreground); }
.badge.bad { background: var(--color-destructive-reversed); color: var(--color-destructive-foreground); }
.badge.live { background: color-mix(in oklab, var(--color-accent) 10%, var(--color-background)); color: var(--color-accent-foreground); }
/* Unity `spin`, on a ring instead of the dot, while a run is working. */
.badge.live::before { width: 8px; height: 8px; background: none; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .badge.live::before { animation: none; } }

/* ------------------------------------------------------------------ run -- */
/* src/features/runs/run-detail-client.mjs; `details` is src/components/settings/settings-disclosure-section.mjs. */

.what { color: var(--color-foreground-dim); font-size: var(--text-small); overflow-wrap: anywhere; }
.choices { display: grid; gap: 8px; }
.choices .btn.ghost { padding-inline: 20px; }
.choices .btn { justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: var(--spacing-button); padding-block: 8px; font-size: var(--text-body); }
.counts { width: 100%; border-collapse: collapse; font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.counts td { padding: 8px 0; border-top: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
.counts tr:first-child td { border-top: 0; padding-top: 0; }
.counts td:last-child { text-align: right; color: var(--color-foreground-dim); padding-left: 16px; }
/* A scope read with a caveat (`degraded`): amber, not the red of a failure — the hue pulled toward the text colour, as the
   accent's foreground is, so it reads as text in both schemes. Its label opens to the connector's note. */
.counts .partial { color: color-mix(in oklab, var(--color-warning) 70%, var(--color-foreground)); }
.counts td.read-partial { white-space: nowrap; }
.counts .scope-note > summary { padding: 0; font-size: inherit; color: var(--color-foreground); }
.counts .scope-note > summary .chev { color: var(--color-muted-foreground); }
.counts .scope-note > p { margin: 4px 0 0; color: var(--color-foreground-dim); text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

details > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  font-size: var(--text-small); color: var(--color-foreground-dim);
  transition: color var(--motion-compact) var(--ease-standard);
}
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { color: var(--color-foreground); }
details > summary .chev { width: 16px; height: 16px; transition: rotate var(--motion-small) var(--ease-standard); }
details[open] > summary .chev { rotate: 90deg; }
.drawers { display: grid; }
.result-section { position: relative; min-width: 0; }
.result-section > details > summary { min-height: var(--spacing-button); box-sizing: border-box; padding-right: 140px; }
.result-download { position: absolute; top: 0; right: 0; }
.result-json { white-space: pre; max-width: 100%; box-sizing: border-box; }

/* Read-only: frames in, nothing out. */
.frame { margin: 4px 0 8px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-background); box-shadow: 0 0 0 1px var(--color-border); min-height: 44px; display: grid; }
.frame { position: relative; }
.frame canvas { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.frame .msg { padding: 12px 16px; align-self: center; }
/* A note over a picture that is being kept: small, in a corner, taking no room. */
.frame .msg.over { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: var(--radius-button); background: var(--color-background); box-shadow: 0 0 0 1px var(--color-border); font-size: var(--text-compact); }
.log { margin: 4px 0 8px; max-height: 260px; overflow: auto; background: var(--color-background); box-shadow: 0 0 0 1px var(--color-border); border-radius: var(--radius-card); padding: 10px 12px; font: 400 var(--text-fine)/var(--text-fine--line-height) var(--font-mono); }
.log div { display: flex; gap: 10px; }
.log .t { color: var(--color-muted-foreground); flex: none; min-width: 8ch; }
.log .n { color: var(--color-muted-foreground); flex: none; }
.log .d { color: var(--color-foreground-dim); overflow-wrap: anywhere; min-width: 0; }
.rows .row > .btn.ghost { margin-right: -8px; height: 32px; }

/* Scope checklist: Unity checkbox (16px, foreground accent) in wrapping pills. */
.checks { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.checks legend { padding: 0 0 8px; font-size: var(--text-small); font-weight: 500; display: flex; gap: 10px; align-items: baseline; }
.checks legend .err { font-weight: 400; }
.checks label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 10px; cursor: pointer;
  font-size: var(--text-small); background: var(--color-background); border-radius: var(--radius-button);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ring) 30%, transparent);
  transition: box-shadow var(--motion-compact) var(--ease-standard), color var(--motion-compact) var(--ease-standard);
}
.checks label:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ring) 60%, transparent); }
.checks label:has(input:not(:checked)) { color: var(--color-foreground-dim); }
.checks label:has(input:focus-visible) { box-shadow: 0 0 0 1px var(--color-ring), 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent); }
.checks input:focus-visible { box-shadow: none; }
@media (pointer: coarse) { .checks label { min-height: var(--spacing-button); } }