/* Spec Plate components. Button, Tag, Plate, Lifecycle and Field follow the system's
   bundle.css; table, notice, choice, code, 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;
}

/* 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; }