/* Picket UI components (src/ui, ONW-287). Every colour is a token from static/tokens.css.
   Direction-agnostic: this styles the primitives plainly so the gallery and goldens have a baseline;
   a design direction restyles them here, never by forking the markup. */

:root {
  --font-ui: Archivo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* chip */
.ui-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.4;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ui-chip--sim { color: var(--chip-sim-fg); background: var(--chip-sim-bg); border-color: var(--chip-sim-border); }
.ui-chip--advisory { color: var(--caution); border-color: var(--caution-border); }
.ui-chip--monitor { color: var(--text-secondary); }
.ui-chip--caution { color: var(--caution); background: var(--caution-bg); border-color: var(--caution-border); }
.ui-chip--warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.ui-chip--badge { color: var(--warning); border-color: var(--warning-border); }
.ui-chip--provenance { color: var(--text); background: var(--panel-deep); border-color: var(--border-bright); }

/* button */
.ui-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  border-radius: 3px;
  border: 1px solid var(--border-bright);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.ui-button--primary { color: var(--caution); background: var(--caution-bg); border-color: var(--caution-border); }
.ui-button--primary:hover { background: var(--caution-bg-hover); }
.ui-button--secondary:hover { border-color: var(--ring); }
.ui-button--danger { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.ui-button:disabled { cursor: not-allowed; color: var(--text-muted); background: var(--panel); border-color: var(--border); }
.ui-action-note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--caution); }

/* panel / section_head */
.ui-panel { background: var(--panel); border: 1px solid var(--border); }
.ui-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ui-section-title { color: var(--text-secondary); }
.ui-section-meta { color: var(--text-muted); }
.ui-panel-body { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px; }

/* stat */
.ui-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-stat-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.ui-stat-value { font-family: var(--font-mono); font-size: 16px; }
.ui-stat-unit { font-size: 11px; color: var(--text-secondary); }

/* glyph */
.ui-glyph { display: block; flex: 0 0 auto; }

/* track_row */
.ui-track-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.ui-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  background: var(--panel);
  min-width: 0;
}
.ui-track-row.is-selected { background: var(--row-hover); box-shadow: inset 0 0 0 1px var(--ring); }
.ui-track-row.is-hidden { opacity: 0.35; }
.ui-track-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ui-track-id { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); white-space: nowrap; }
.ui-sim-suffix { color: var(--text-secondary); }
.ui-track-desc { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-track-detail { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-track-chips { display: flex; gap: 6px; flex: 0 0 auto; }

/* framing_strip */
/* The lines wrap rather than clip or scroll: none of them may ever be out of view (canvas L1). */
.ui-framing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ui-framing-key { color: var(--text-muted); }

/* debrief (A3). Pass is the selection accent, never green: green means cooperative participation. */
.ui-debrief {
  max-width: 760px;
  padding: 16px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-bright);
  font-family: var(--font-ui);
}
.ui-debrief-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.ui-chip--practice { color: var(--caution); border-color: var(--caution-border); }
.ui-debrief-score { margin: 6px 0 2px; }
.ui-debrief-points { font-family: var(--font-mono); font-size: 28px; color: var(--text-strong); }
.ui-debrief-verdict { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; padding: 2px 8px; border: 1px solid currentColor; vertical-align: middle; }
.ui-debrief-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.ui-debrief-verdict-line { margin: 6px 0 0; font-size: 13px; color: var(--caution); }
.ui-debrief-section { margin-top: 16px; }
.ui-debrief-section h3 { margin: 0 0 8px; font-size: 10px; font-weight: normal; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.ui-dimensions { display: flex; flex-direction: column; gap: 8px; }
.ui-dimension { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 13px; }
.ui-dimension-points { font-family: var(--font-mono); font-size: 12px; color: var(--text-value); }
.ui-dimension-bar { grid-column: 1 / -1; height: 4px; background: var(--panel-deep); }
.ui-dimension-fill { display: block; height: 100%; }
.ui-objectives, .ui-penalties, .ui-gaps { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; }
.ui-objective { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.ui-objective-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; padding-top: 2px; }
.ui-objective-goal { color: var(--text-secondary); }
.ui-objective-did { color: var(--text); }
.ui-penalty { padding: 2px 0; }
.ui-penalty-amount { font-family: var(--font-mono); }
.ui-gap { padding: 2px 0; }
.ui-debrief-note { margin: 16px 0 0; font-size: 11px; color: var(--text-muted); }
.ui-debrief-cta { margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); }
.ui-debrief-cta a { color: var(--accent-text); text-decoration: underline; }

/* debrief_timeline: stops on a rail. Labels alternate above and below, and a label too close to
   another on its side moves out a lane (--lane), so close events never overprint. A narrow card
   gets a plain list (a container query, so the card's width decides, not the window's). */
.ui-timeline {
  /* A lane is 56px of label text at 16px a line (lanes_for in src/ui/debrief.rs). */
  --ui-lane-h: 56px;
  --ui-rail-y: calc(8px + var(--ui-above, 1) * var(--ui-lane-h));
  position: relative;
  height: calc(16px + (var(--ui-above, 1) + var(--ui-below, 1)) * var(--ui-lane-h));
  margin: 0 8px;
  padding: 0;
  list-style: none;
}
.ui-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: var(--ui-rail-y); border-top: 1px solid var(--border-bright); }
.ui-timeline-stop {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* max-content, so a stop at the right end keeps its width instead of shrinking to the space left. */
  width: max-content;
  /* LABEL_W_PCT in src/ui/debrief.rs assumes this width. */
  max-width: 16ch;
  font-size: 11.5px;
  line-height: 1.3;
  transform: translateX(-50%);
  text-align: center;
}
.ui-timeline-stop[data-edge="start"] { transform: none; text-align: left; }
.ui-timeline-stop[data-edge="end"] { transform: translateX(-100%); text-align: right; }
.ui-timeline-stop[data-side="above"] { bottom: calc(100% - var(--ui-rail-y) + 8px + var(--lane, 0) * var(--ui-lane-h)); flex-direction: column-reverse; }
.ui-timeline-stop[data-side="below"] { top: calc(var(--ui-rail-y) + 8px + var(--lane, 0) * var(--ui-lane-h)); }
.ui-timeline-stop::after { content: ""; position: absolute; left: 50%; height: calc(8px + var(--lane, 0) * var(--ui-lane-h)); border-left: 1px solid var(--text-muted); }
.ui-timeline-stop[data-edge="start"]::after { left: 0; }
.ui-timeline-stop[data-edge="end"]::after { left: auto; right: 0; }
.ui-timeline-stop[data-side="above"]::after { bottom: calc(-8px - var(--lane, 0) * var(--ui-lane-h)); }
.ui-timeline-stop[data-side="below"]::after { top: calc(-8px - var(--lane, 0) * var(--ui-lane-h)); }
.ui-timeline-t { font-family: var(--font-mono); color: var(--text-muted); }
.ui-timeline-label { color: var(--text); }
/* The directive badge wraps inside a stop rather than spilling toward the next one. */
.ui-timeline-label .ui-chip { white-space: normal; }
.ui-timeline-frame { container-type: inline-size; }
@container (max-width: 600px) {
  .ui-timeline { height: auto; margin: 0; }
  .ui-timeline::before { display: none; }
  .ui-timeline-stop,
  .ui-timeline-stop[data-side] { position: static; flex-direction: column; width: auto; max-width: none; transform: none; text-align: left; padding: 4px 0; }
  .ui-timeline-stop::after { display: none; }
}

/* task_card (A1) */
.ui-task-card { margin: 14px 0; padding: 12px 14px; background: var(--panel-deep); color: var(--text); border: 1px solid var(--border-bright); }
.ui-task-card h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.6px; }
.ui-task-list { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.ui-task-pass { margin: 6px 0; font-family: var(--font-mono); font-size: 12px; }
.ui-task-rule { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

/* The component gallery (GET /_ui). */
.ui-gallery { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); }
.ui-gallery-head { padding: 16px; border-bottom: 1px solid var(--border); }
.ui-gallery-head h1 { margin: 0 0 6px; font-size: 18px; }
.ui-gallery-head p { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; max-width: 70ch; }
.ui-gallery-nav { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; }
.ui-gallery-nav a { color: var(--ring); }
.ui-gallery main { padding: 0 16px 32px; }
.ui-gallery-group h2 { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; color: var(--text-secondary); margin: 24px 0 8px; }
.ui-gallery-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--border);
}
.ui-gallery-name { padding: 12px 12px 12px 0; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.ui-theme { background: var(--bg); color: var(--text); padding: 12px; min-width: 0; overflow-x: auto; }
.ui-swatch-cell { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ui-swatch { width: 28px; height: 18px; border: 1px solid var(--border-bright); flex: 0 0 auto; }
@media (max-width: 760px) {
  .ui-gallery-row { grid-template-columns: minmax(0, 1fr); }
  .ui-gallery-name { padding-bottom: 0; }
}