/* Spec Plate components. Button, Tag, Plate, Lifecycle and Field follow the system's
   bundle.css; table, notice, choice, code, tabs, stat and icon tile extend it with its tokens. */

/* Button */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 44px; padding: var(--space-3) 20px;
  border: var(--stroke-frame) solid var(--ink); border-radius: var(--radius-none);
  background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.sp-btn:hover { background: var(--plate); }
.sp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sp-btn-signal { background: var(--signal); color: var(--on-signal); border-color: var(--on-signal); }
.sp-btn-signal:hover { background: var(--signal); box-shadow: inset 0 0 0 2px var(--on-signal); }
.sp-btn-ghost { border-color: transparent; padding-left: var(--space-2); padding-right: var(--space-2); }
.sp-btn-ghost:hover { background: transparent; text-decoration: underline; }
.sp-btn-fault { color: var(--fault); border-color: var(--fault); }
.sp-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.sp-btn svg { width: 16px; height: 16px; }

/* Tag */
.sp-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  border: var(--stroke-tag) solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.3; white-space: nowrap;
}
.sp-tag-solid { background: var(--ink); color: var(--alu); }
.sp-tag-signal { background: var(--signal); color: var(--on-signal); border-color: var(--on-signal); }
.sp-tag-ok { color: var(--ok); border-color: var(--ok); }
.sp-tag-fault { color: var(--fault); border-color: var(--fault); }
.sp-dot { width: 8px; height: 8px; border-radius: var(--radius-dot); background: currentColor; flex: none; }

/* Plate */
.sp-plate { background: var(--plate); border: var(--stroke-frame) solid var(--ink); display: flex; flex-direction: column; min-width: 0; }
.sp-plate-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-frame) solid var(--ink);
}
.sp-plate-title {
  margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.15; font-weight: 700;
  font-stretch: 120%; text-transform: uppercase; overflow-wrap: anywhere;
}
.sp-plate-title a { text-decoration: none; }
.sp-plate-title a:hover { text-decoration: underline; }
.sp-plate-body {
  padding: var(--space-4); display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
}
.sp-plate-body > p, .sp-plate-prose { font-family: var(--font-display); font-size: 15px; line-height: 1.5; }
.sp-plate-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-3) var(--space-4); border-top: var(--stroke-hair) dashed var(--rule);
}
.sp-row { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--stroke-hair) dashed var(--rule); }
.sp-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-row-key { color: var(--etch); text-transform: uppercase; flex: none; }
.sp-row-val { text-align: right; overflow-wrap: anywhere; }

/* Lifecycle */
.sp-life {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border: var(--stroke-frame) solid var(--ink); background: var(--plate); margin: 0; padding: 0; list-style: none;
}
.sp-step { padding: 18px var(--space-4); border-right: var(--stroke-frame) solid var(--ink); display: flex; flex-direction: column; gap: 6px; }
.sp-step:last-child { border-right: 0; }
.sp-step-n { font-family: var(--font-mono); font-size: 11px; color: var(--etch); }
.sp-step-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; font-stretch: 115%; text-transform: uppercase; line-height: 1.15; }
.sp-step-now { background: var(--signal); color: var(--on-signal); }
.sp-step-now .sp-step-n { color: var(--on-signal); }
@media (max-width: 640px) {
  .sp-life { grid-auto-flow: row; }
  .sp-step { border-right: 0; border-bottom: var(--stroke-frame) solid var(--ink); }
  .sp-step:last-child { border-bottom: 0; }
}

/* Field */
.sp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-field-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--etch); }
.sp-input {
  width: 100%; min-height: 44px; padding: 10px var(--space-3);
  border: var(--stroke-frame) solid var(--ink); border-radius: var(--radius-none);
  background: var(--plate); color: var(--ink); font-family: var(--font-mono); font-size: 13px;
}
.sp-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
select.sp-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.sp-field-hint { font-size: 13px; color: var(--etch); }
.sp-field-error .sp-input { border-color: var(--fault); }
.sp-field-error .sp-field-hint { color: var(--fault); }

/* Choice: a radio rendered as a selectable plate */
.sp-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); border: 0; margin: 0; padding: 0; }
.sp-choice { position: relative; display: block; cursor: pointer; }
.sp-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sp-choice .sp-plate { height: 100%; }
.sp-choice input:checked + .sp-plate { box-shadow: inset 0 0 0 2px var(--ink); }
.sp-choice input:checked + .sp-plate .sp-plate-head { background: var(--ink); color: var(--alu); }
.sp-choice input:focus-visible + .sp-plate { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Table: rows of a plate, for lists of machines, ledger entries and keys */
.sp-table-wrap { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
.sp-table th {
  text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--etch); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-frame) solid var(--ink); white-space: nowrap;
}
.sp-table td { padding: 10px var(--space-4); border-bottom: var(--stroke-hair) dashed var(--rule); vertical-align: middle; }
.sp-table tr:last-child td { border-bottom: 0; }
.sp-table .num { text-align: right; white-space: nowrap; }
.sp-table .nowrap { white-space: nowrap; }
.sp-table a { text-decoration: none; }
.sp-table a:hover { text-decoration: underline; }

/* Notice: flash messages and inline warnings */
.sp-notice {
  display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4);
  border: var(--stroke-frame) solid var(--ink); background: var(--plate);
}
.sp-notice-ok { border-color: var(--ok); }
.sp-notice-ok .sp-tag { color: var(--ok); border-color: var(--ok); }
.sp-notice-fault { border-color: var(--fault); }
.sp-notice-fault .sp-tag { color: var(--fault); border-color: var(--fault); }

/* Code block */
.sp-code {
  margin: 0; padding: var(--space-4); background: var(--alu); border: var(--stroke-hair) dashed var(--rule);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Tabs: a plate headed by a row of tabs; the selected tab is inked like a checked choice */
.sp-tabs { background: var(--plate); border: var(--stroke-frame) solid var(--ink); min-width: 0; overflow: hidden; }
/* Tabs that do not fit wrap onto another row and stretch to fill it, so none is scrolled out of sight. Each tab's
   dashed rules sit above and to its right; the list overhangs the frame by a pixel to clip those along its edge. */
.sp-tab-list { display: flex; flex-wrap: wrap; margin: -1px -1px 0 0; border-bottom: var(--stroke-frame) solid var(--ink); }
.sp-tab {
  flex: 1 0 auto; min-height: 44px; padding: var(--space-3) var(--space-4);
  border: 0; border-top: var(--stroke-hair) dashed var(--rule); border-right: var(--stroke-hair) dashed var(--rule); border-radius: var(--radius-none);
  background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
.sp-tab:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-tab[aria-selected="true"] { background: var(--ink); color: var(--alu); text-decoration: none; }
.sp-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.sp-tab[aria-selected="true"]:focus-visible { outline-color: var(--alu); }
.sp-tab-panel { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.sp-tab-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.sp-tab-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 44px; }

/* Stat: one large figure, always mono */
.sp-stat, .sp-plate-body > p.sp-stat { font-family: var(--font-mono); font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; }

.sp-plate-title.sp-figure { font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; letter-spacing: 0; }

/* Icon tile: a standalone icon in a dashed square 1.4x the glyph */
.sp-icon { width: 16px; height: 16px; flex: none; }
.sp-icon-tile {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  /* 1px rule border at 2px dash and 2px gap, the spec-row divider's rhythm */
  background:
    linear-gradient(90deg, var(--rule) 50%, transparent 0) top / 4px 1px repeat-x,
    linear-gradient(90deg, var(--rule) 50%, transparent 0) bottom / 4px 1px repeat-x,
    linear-gradient(0deg, var(--rule) 50%, transparent 0) left / 1px 4px repeat-y,
    linear-gradient(0deg, var(--rule) 50%, transparent 0) right / 1px 4px repeat-y;
}
.sp-icon-tile .sp-icon { width: 24px; height: 24px; }