/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * macrostructure: Workbench · nav: N9 bracketed key-hint bar · footer: none (tool)
 * theme: studied-DNA (source: https://stripe.dev) · studied: yes · DNA-source: url
 * observed-fonts: sohne-var + sohne-mono → Inter Tight + Geist Mono
 * observed-paper: #eaeaea · observed-ink: #1e1e1e · observed-highlight: #c4e817
 */

@import url("/tokens.css");

*, *::before, *::after { box-sizing: border-box; }

/* Class-level display rules below would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

html, body { height: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------- type roles */

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-display);
  letter-spacing: var(--track-display);
  line-height: 0.95;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* stripe.dev counts its sections in superscript parens beside the title. */
.display sup {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 300;
  letter-spacing: var(--track-label);
  vertical-align: super;
  margin-left: 0.35em;
  color: var(--color-ink-muted);
}

/* The slash-label: mono, uppercase, sitting on a hairline that spans its column. */
.rubric {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.rubric::before { content: "/"; color: var(--color-ink-faint); }

/* An identifier beside a label keeps its own case — an uppercased UUID is noise. */
.rubric .mono { text-transform: none; color: var(--color-ink-muted); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
}

/* The ■ EXAMPLE: device — a mono note on a dotted rule. */
.note {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-bottom: var(--rule-hair) dotted var(--color-rule);
  padding-bottom: var(--space-2xs);
}

.note::before { content: "■ "; }

/* ------------------------------------------------------------------- top bar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  min-height: var(--topbar-h);
  padding: 0 var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule-ink);
  background: var(--color-paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }

.brand .mark {
  width: 14px;
  height: 14px;
  background: var(--color-ink);
  flex: none;
}

.brand .name {
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-body);
  white-space: nowrap;
}

.brand .tag {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border: var(--rule-hair) dotted var(--color-rule);
  border-radius: var(--radius-chip);
  padding: 2px 6px;
}

.topbar-right { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }

.target {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.target b { color: var(--color-ink); font-weight: 400; }

/* ------------------------------------------------------ key-hint chip (N9 nav) */

.key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  background: var(--color-wash);
  border: 0;
  border-radius: var(--radius-chip);
  padding: 5px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.key:hover { background: var(--color-wash-strong); }
.key .k { letter-spacing: -0.08em; color: var(--color-ink-muted); }
.key.is-active { background: var(--color-ink); color: var(--color-ink-invert); }
.key.is-active .k { color: var(--color-ink-invert); opacity: 0.6; }

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

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 0;
}

/* The dashed column split, straight off the featured-post / featured-video divide,
   with crop marks pinned at its corners — the blueprint device. */
.work {
  position: relative;
  min-width: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  border-right: var(--rule-hair) dashed var(--color-rule);
  background-image: var(--crop-mark), var(--crop-mark), var(--crop-mark), var(--crop-mark);
  background-repeat: no-repeat;
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-size: 9px 9px;
}

.panel-head { padding-bottom: var(--space-xs); }

.tabs { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

.panel { display: none; flex-direction: column; gap: var(--space-lg); }
.panel.is-active { display: flex; }

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

.card {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-ink);
}

.card-actions, .presets { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }

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

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm) var(--space-md);
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.field .hint {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  color: var(--color-ink-muted);
}

input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea {
  background: var(--color-paper-raised);
  border: var(--rule-hair) solid var(--color-rule-soft);
  border-radius: var(--radius-field);
  padding: 0 9px;
  height: var(--control-h);
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}

input:hover, select:hover, textarea:hover { border-color: var(--color-rule); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

textarea {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  resize: vertical;
  height: auto;
  min-height: 62px;
  padding: 7px 9px;
}

input::placeholder, textarea::placeholder { color: var(--color-ink-muted); }

/* ------------------------------------------------------------------- actions */

button.primary,
button.ghost,
button.danger {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--track-body);
  border-radius: var(--radius-pill);
  padding: 0 18px;
  height: var(--control-h);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

button.primary {
  background: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  color: var(--color-ink-invert);
}
button.primary:hover { background: var(--color-ink-soft); border-color: var(--color-ink-soft); }

button.ghost {
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
}
button.ghost:hover { border-color: var(--color-ink); background: var(--color-wash); }

button.ghost.small, button.danger.small {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0 11px;
  height: 26px;
}

.card-head button.ghost.small, .card-head button.danger { height: var(--control-h); }

button.danger {
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-soft);
}
button.danger:hover { border-color: var(--color-alert); color: var(--color-alert); background: var(--color-alert-wash); }

button:focus-visible, .key:focus-visible, a:focus-visible, tr:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: var(--color-rule-soft);
  border-style: dashed;
}
button:disabled:hover { background: transparent; border-color: var(--color-rule-soft); }

.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.toggle input { accent-color: var(--color-ink); }

/* ---------------------------------------------------------------- spec plate */

/* The live SDK snippet sits in a plate: full-ink frame, caption bar, square. */
.card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.plate {
  flex: 1;
  min-width: 260px;
  border: var(--rule-hair) solid var(--color-rule-ink);
  border-radius: var(--radius-plate);
  background: var(--color-plate);
}

.plate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 4px 8px;
  border-bottom: var(--rule-hair) solid var(--color-rule-ink);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.snippet {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
  line-height: 1.6;
  margin: 0;
  padding: var(--space-sm);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-ink);
}

.snippet.preview { max-height: 200px; overflow: auto; }

/* --------------------------------------------------------------------- table */

.table-wrap { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; }

table.grid th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: var(--space-xs) var(--space-sm) var(--space-2xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

table.grid td {
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: var(--rule-hair) dotted var(--color-rule-soft);
  vertical-align: middle;
}

table.grid tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
table.grid tbody tr:hover { background: var(--color-wash); }
table.grid tr.is-selected { background: var(--color-wash-strong); }
table.grid tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--color-ink); padding-left: var(--space-xs); }

table.grid td.mono, table.grid th.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
}

/* Identifiers here run to 90 characters. One line each, with the full value on hover. */
table.grid td.mono {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.grid td.actions { text-align: right; white-space: nowrap; padding-right: 0; }
table.grid .empty-row td {
  color: var(--color-ink-muted);
  cursor: default;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
table.grid .empty-row td:first-child { box-shadow: none; }

/* --------------------------------------------------------------------- phase */

/* Monochrome by default; the lime is reserved for what is live right now. */
.phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.phase::before {
  content: "";
  width: 7px;
  height: 7px;
  border: var(--rule-hair) solid var(--color-ink);
  background: transparent;
  flex: none;
}

.phase.running::before, .phase.ready::before { background: var(--color-highlight); }
.phase.succeeded::before { background: var(--color-ink); }
.phase.failed::before { background: var(--color-alert); border-color: var(--color-alert); }
.phase.failed { color: var(--color-alert); }
.phase.terminated::before { background: var(--color-rule); border-color: var(--color-rule); }
.phase.queued::before, .phase.creating::before, .phase.pending::before {
  background: repeating-linear-gradient(45deg, var(--color-ink) 0 1px, transparent 1px 3px);
}

a.host {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-bottom: 1px;
}
a.host:hover { border-bottom-color: var(--color-ink); background: var(--color-highlight); }

/* -------------------------------------------------------------------- detail */

.detail-section { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-xs); }
.detail-section .row { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }
.detail-section .row input[type="text"] { flex: 1; min-width: 220px; }

.output {
  background: var(--color-plate);
  border: var(--rule-hair) solid var(--color-rule-ink);
  border-radius: var(--radius-plate);
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
  line-height: 1.65;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.output .err { color: var(--color-alert); }
.output .ts { color: var(--color-ink-muted); }

.kv {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.kv dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: 5px 0;
  border-bottom: var(--rule-hair) dotted var(--color-rule-soft);
}

.kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
  word-break: break-all;
  padding: 5px 0;
  border-bottom: var(--rule-hair) dotted var(--color-rule-soft);
}

.breadcrumb {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  letter-spacing: var(--track-label);
  color: var(--color-ink-muted);
}

.breadcrumb button {
  background: none;
  border: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.breadcrumb button:hover { border-bottom-color: var(--color-ink); }

/* ------------------------------------------------------------------ call log */

.calls {
  position: sticky;
  top: var(--topbar-h);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h));
  overflow: hidden;
  background: var(--color-paper);
}

.calls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-lg) var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-ink);
  margin: 0 var(--space-lg) 0 var(--space-lg);
  padding-left: 0;
  padding-right: 0;
}

.call-log { list-style: none; margin: 0; padding: 0 var(--space-lg) var(--space-lg); overflow-y: auto; }

.call-log .empty {
  padding: var(--space-md) 0;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.6;
}

/* Each call is a numbered plate. Not a window: a figure. */
.call-entry {
  border: var(--rule-hair) solid var(--color-rule-ink);
  background: var(--color-plate);
  margin-top: var(--space-sm);
  animation: plate-in var(--dur-mid) var(--ease-out) both;
}

@keyframes plate-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.call-entry > summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 5px 8px;
  cursor: pointer;
  list-style: none;
  border-bottom: var(--rule-hair) solid transparent;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.call-entry[open] > summary { border-bottom-color: var(--color-rule-ink); }
.call-entry > summary::-webkit-details-marker { display: none; }
.call-entry > summary:hover { background: var(--color-wash); }

.call-entry .idx { color: var(--color-ink-muted); }

.call-entry .status {
  width: 7px;
  height: 7px;
  background: var(--color-highlight);
  flex: none;
}

.call-entry.is-error .status { background: var(--color-alert); }

.call-entry .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink);
}

.call-entry .ms { color: var(--color-ink-muted); }

.call-entry .body { padding: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-xs); }
.call-entry .body .snippet { padding: 0; font-size: var(--text-sm); }
.call-entry .result { color: var(--color-ink-soft); max-height: 240px; overflow: auto; }
.call-entry.is-error .result { color: var(--color-alert); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .work { border-right: 0; border-bottom: var(--rule-hair) dashed var(--color-rule); }
  .calls { position: static; max-height: 520px; }
  .calls-head { padding-top: var(--space-md); }
}

@media (max-width: 640px) {
  .work { padding: var(--space-md); }
  .work::before { display: none; }
  .call-log, .calls-head { padding-left: var(--space-md); padding-right: var(--space-md); }
  .calls-head { margin-left: var(--space-md); margin-right: var(--space-md); }
  .card-head { flex-direction: column; align-items: flex-start; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .call-entry { animation: none; }
}