/* site/sov-coder/sov-coder.css: the SOV coder's own layer over craton-ui.css.
   Tokens only (--ui-*), so light and dark come from the design system. Colour
   carries meaning and nothing else: green is coded above the gate, violet is
   waiting for a person, grey is no answer, blue is work in flight. Nothing
   here fetches anything. */

.sc-page main section { padding-left: 0; padding-right: 0; }
/* Components set display, which would beat the hidden attribute. */
.sc-page [hidden] { display: none !important; }

/* ---------- the input ---------- */

.sc-hero { padding: var(--ui-space-10) 0 var(--ui-space-10); background: var(--ui-bg); }
.sc-head { max-width: 760px; }
.sc-head .ui-lede { max-width: 44ch; }

.sc-input {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--ui-space-5) var(--ui-space-7); align-items: start;
  margin: var(--ui-space-8) 0 0;
}
.sc-drop { grid-column: 1; grid-row: 1; position: relative; min-width: 0; }
.sc-privacy { grid-column: 2; grid-row: 1; }
.sc-actions, .sc-input .ui-note, .sc-caps { grid-column: 1 / -1; }
.sc-input .ui-note { margin: 0; }
.sc-input .ui-note:empty { display: none; }

.sc-drop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.sc-count { font-size: var(--ui-type-small); color: var(--ui-muted); }
.sc-rows {
  display: block; min-height: 280px; padding: 16px 18px; line-height: 1.6;
  border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-1);
  white-space: pre; overflow-wrap: normal; overflow-x: auto; max-height: 560px;
}
.sc-drop.is-over .sc-rows {
  border-color: var(--ui-accent); border-style: dashed; box-shadow: var(--ui-ring);
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface));
}
.sc-drop-hint { margin: 10px 0 0; font-size: var(--ui-type-fine); color: var(--ui-muted); }

.sc-privacy {
  display: flex; gap: 12px; align-items: flex-start; margin: 34px 0 0;
  padding: 16px 18px; border-radius: var(--ui-radius-md);
  background: var(--ui-surface); border: 1px solid var(--ui-line);
  font-size: 15px; line-height: 1.5; color: var(--ui-ink-2);
}
.sc-privacy svg {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  fill: none; stroke: var(--ui-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sc-privacy p { margin: 0; }

.sc-actions { margin: 0; }
.sc-file { position: relative; cursor: pointer; }
.sc-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sc-file:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.sc-caps { margin: 0; }

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

.sc-results { padding-top: var(--ui-space-9); }
.sc-progress { max-width: 560px; margin: 0 0 var(--ui-space-7); }
.sc-progress-line {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px;
  font-size: 15px; color: var(--ui-muted);
}
.sc-progress-text { color: var(--ui-ink); font-weight: var(--ui-weight-semibold); }
.sc-progress-fill { background: var(--ui-running); }
/* While a batch is out, a soft sweep says work is in flight. */
.sc-progress.is-busy .ui-meter-track { position: relative; }
.sc-progress.is-busy .ui-meter-track::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-running) 35%, transparent), transparent);
  animation: sc-sweep 1.4s var(--ui-ease-in-out) infinite;
}
@keyframes sc-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sc-progress.is-busy .ui-meter-track::after { animation: none; opacity: 0.5; }
}

.sc-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-6) var(--ui-space-9); margin: 0 0 var(--ui-space-6); }
.sc-stat .ui-stat-num { font-size: var(--ui-type-stat-md); line-height: 1; }
.sc-stat .ui-stat-label { display: block; margin-top: 8px; font-size: 17px; }
.sc-stat-good .ui-stat-num { color: var(--ui-good); }
.sc-stat-look .ui-stat-num { color: var(--ui-queued); }
.sc-stat-none .ui-stat-num { color: var(--ui-muted); }

/* One square per row, in order: the whole schedule at a glance. */
.sc-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; max-width: 760px; }
.sc-dot {
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-line-strong);
  transition: background-color var(--ui-dur) var(--ui-ease);
}
.sc-dot.is-coded { background: var(--ui-good); box-shadow: none; }
.sc-dot.is-needs-review { background: var(--ui-queued); box-shadow: none; }
.sc-dot.is-unanswered { background: var(--ui-faint); box-shadow: none; }
.sc-dot.is-too-long { background: transparent; box-shadow: inset 0 0 0 2px var(--ui-bad); }
.sc-dot.is-sending { background: var(--ui-running); box-shadow: none; animation: sc-breathe 1.2s var(--ui-ease-in-out) infinite; }
@keyframes sc-breathe { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .sc-dot.is-sending { animation: none; }
}

.sc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: var(--ui-type-fine); color: var(--ui-muted); }
.sc-key { display: inline-flex; align-items: center; gap: 6px; }
.sc-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.sc-key-good::before { background: var(--ui-good); }
.sc-key-look::before { background: var(--ui-queued); }
.sc-key-none::before { background: var(--ui-faint); }
.sc-key-wait::before { background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-line-strong); }

.sc-group { margin: var(--ui-space-9) 0 0; }
.sc-group-head { margin: 0 0 var(--ui-space-4); }
.sc-group-head .ui-hint { margin-top: 4px; }

.sc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sc-card {
  min-width: 0; padding: 18px 20px 20px; border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
}
.sc-card-quiet { box-shadow: none; }
.sc-card-head { display: flex; align-items: center; gap: 10px; }
.sc-card-head::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ui-queued);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-queued) 22%, transparent);
}
.sc-card-quiet .sc-card-head::before { background: var(--ui-faint); box-shadow: none; }
.sc-card-row { font-size: var(--ui-type-caption); font-weight: 650; letter-spacing: var(--ui-tracking-caps); text-transform: uppercase; color: var(--ui-muted); }
.sc-card-text { margin: 6px 0 0; font: 15px/1.45 var(--ui-font-mono); color: var(--ui-ink); overflow-wrap: anywhere; }
.sc-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; margin: 16px 0 0; }
.sc-field { min-width: 0; }
.sc-field .ui-label { margin: 0 0 6px; }

.sc-code { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.sc-code-num {
  flex: none; padding: 2px 8px; border-radius: 6px; background: var(--ui-surface-2);
  font: var(--ui-weight-semibold) 13.5px/1.4 var(--ui-font-mono); color: var(--ui-ink);
}
.sc-code-name { font-size: 15px; line-height: 1.35; color: var(--ui-ink); overflow-wrap: anywhere; }
.sc-proposal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.sc-proposal-tag { font-size: var(--ui-type-fine); font-weight: 650; letter-spacing: var(--ui-tracking-caps); text-transform: uppercase; color: var(--ui-queued); }

.sc-why { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 13.5px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.sc-meter { position: relative; flex: none; width: 76px; height: 6px; border-radius: 6px; background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.sc-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--ui-good); }
.sc-meter.is-look .sc-meter-fill { background: var(--ui-queued); }
.sc-meter-gate { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ui-ink-2); }

.sc-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.sc-pick {
  height: auto; min-height: 34px; padding: 6px 12px; white-space: normal; text-align: left;
  font-size: 14px; line-height: 1.25;
}

.sc-table .sc-rownum { width: 56px; color: var(--ui-muted); }
.sc-table .sc-text { max-width: 36ch; font: 14px/1.45 var(--ui-font-mono); color: var(--ui-ink-2); overflow-wrap: anywhere; }
.sc-table .sc-cell { min-width: 200px; }
.sc-table .sc-cell .sc-code-name { font-size: 14px; }
.sc-table .sc-why { margin-top: 6px; }

.sc-done { margin: var(--ui-space-8) 0 0; }
.sc-results .ui-note:empty { display: none; }

.sc-credit { margin: var(--ui-space-8) 0 0; padding: var(--ui-space-5) 0 0; border-top: 1px solid var(--ui-line); }
.sc-credit-line { margin: 0 0 6px; max-width: 90ch; font-size: var(--ui-type-small); color: var(--ui-muted); }
.sc-credit-line b { color: var(--ui-ink); }
.sc-credit code { font-size: 13px; color: var(--ui-ink-2); overflow-wrap: anywhere; }
.sc-runs { margin-top: var(--ui-space-3); }
.sc-run-list { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.sc-run-list li { margin: 0 0 4px; overflow-wrap: anywhere; }
.sc-run-when { color: var(--ui-muted); }

/* ---------- switched off ---------- */

.sc-off-card {
  padding: var(--ui-space-8) var(--ui-space-7); border-radius: var(--ui-radius-xl); text-align: center;
  background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
}
.sc-off-card .ui-hint { max-width: 48ch; margin: 10px auto 0; font-size: 16px; }
.sc-off-card .ui-actions { margin-top: var(--ui-space-6); }
.sc-off-art { width: 72px; height: 72px; margin: 0 auto var(--ui-space-4); display: block; fill: none; stroke: var(--ui-muted); stroke-width: 3; stroke-linecap: round; }
.sc-off-art circle:last-child { fill: var(--ui-muted); stroke: none; }

/* ---------- how it works ---------- */

.sc-art-card { fill: var(--ui-surface-2); }
.sc-art-pick { fill: var(--ui-accent-soft); stroke: var(--ui-accent); stroke-width: 2; }
.sc-art-line { fill: var(--ui-line-strong); }
.sc-art-track { fill: var(--ui-surface-2); stroke: var(--ui-line-strong); }
.sc-art-fill { fill: var(--ui-good); }
.sc-art-gate { stroke: var(--ui-ink); stroke-width: 3; stroke-linecap: round; }
.sc-art-you { fill: none; stroke: var(--ui-queued); stroke-width: 3; stroke-linecap: round; }
.sc-more { margin: var(--ui-space-7) 0 0; }

/* ---------- narrower screens ---------- */

@media (max-width: 980px) {
  .sc-input { grid-template-columns: minmax(0, 1fr); }
  .sc-drop, .sc-privacy { grid-column: 1; grid-row: auto; }
  .sc-privacy { margin: 0; }
  .ui-steplist-cards.sc-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sc-hero { padding: var(--ui-space-8) 0 var(--ui-space-9); }
  .sc-input { margin-top: var(--ui-space-7); }
  .sc-rows { min-height: 220px; font-size: 14px; }
  .sc-fields { grid-template-columns: minmax(0, 1fr); }
  .sc-stats { gap: var(--ui-space-5) var(--ui-space-7); }
  .sc-actions .ui-btn-lg { width: 100%; }
  .sc-table .sc-cell { min-width: 0; }
  .sc-table .sc-rownum { width: auto; font-size: var(--ui-type-caption); font-weight: 650; letter-spacing: var(--ui-tracking-caps); text-transform: uppercase; }
  .sc-table .sc-rownum::before { content: "Row "; }
  .sc-table tbody tr:hover td { background: none; }
  .sc-table .sc-text { max-width: none; }
  .sc-done .ui-btn { width: 100%; }
}