/* ============================================================================
   redesign:web-WS7a — Log board (.lb-*), Flights (.fl-*) and Log › Close out (.co-*).
   Loaded after kit.css (index.html). Built from the --c-* tokens only (no hex, radius 0, 1px hairlines,
   3px edge accents, nothing animates beyond 180ms ease-out, nothing flashes), so a Day / Dusk / Night
   switch re-colours every rule live. scripts/log_board_test.js lints this file for hex / radius / animation.
   Greyscale rule (I7): state is never hue alone — provenance tags are WORDS with a solid/dashed border,
   and the readiness meter's "needs you" segments carry a hatch pattern as well as the amber fill.
   ============================================================================ */

/* ---------------------------------------------------------------- Log board */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 18px; }
.lb-card { min-width: 0; }
.lb-card-accent { border-left: 3px solid var(--c-accent); }
.lb-h { margin: 0 0 4px; font: 600 12px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.lb-big { font: 600 22px/1.1 var(--font-heading); margin: 4px 0; overflow-wrap: anywhere; }
.lb-sub { font-size: 13px; color: var(--c-ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.lb-sub a { color: var(--c-accent-ink); }
.lb-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb-card .commitq-row { align-items: flex-start; }
.lb-card .commitq-row .cq-msg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.lb-note { font-size: 12px; color: var(--c-ink-3); margin-top: 8px; }
.lb-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.lb-stat-k { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.lb-stat-v { font: 600 20px/1.2 var(--font-heading); }
.lb-stat-v.lb-nt { font-size: 14px; color: var(--c-ink-2); letter-spacing: .02em; }
.lb-need { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-line-2); font-size: 14px; color: var(--c-ink); }
.lb-need:hover { text-decoration: none; background: var(--c-hover-row); }
.lb-need:last-of-type { border-bottom: 0; }
.lb-nr { font: 600 15px/1.2 var(--font-heading); color: var(--c-ink-2); white-space: nowrap; }
.lb-nr.lb-nt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.lb-az { margin-top: 24px; }
.lb-az .az-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; }
.lb-az .az-list > .sec-label { grid-column: 1 / -1; margin-bottom: 6px; }

/* ------------------------------------------------------------------ Flights */
.fl-wrap { container-type: inline-size; container-name: flwrap; }
.fl-frame { padding: 0; }
.fl-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px 16px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--c-line-2); }
.fl-row:last-child { border-bottom: 0; }
.card .fl-row { padding-left: 0; padding-right: 0; }
.fl-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px 16px; padding: 8px 14px; border-bottom: 1px solid var(--c-line); font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.fl-cols span:last-child { text-align: right; }
.fl-route { font: 600 18px/1.2 var(--font-heading); overflow-wrap: anywhere; }
.fl-sub { font-size: 13px; color: var(--c-ink-2); }
.fl-times { font-size: 14px; min-width: 0; }
.fl-att { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.fl-att > p { flex-basis: 100%; margin: 0; }
.fl-match { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.fl-more { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
.fl-group { padding: 10px 14px 4px; font: 600 12px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); border-bottom: 1px solid var(--c-line-2); background: var(--c-surface); }
.card .fl-group { padding-left: 0; padding-right: 0; background: transparent; }
.fl-probable { padding: 8px 10px; border: 1px dashed var(--c-line-control); }
.fl-prob-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.fl-ledger { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fl-form { padding: 10px 12px; background: var(--c-surface); border: 1px solid var(--c-line); }
.fl-details summary { cursor: pointer; }
.fl-details ul { margin: 6px 0 0 16px; padding: 0; font-size: 13px; }
.fl-details li { margin-bottom: 4px; overflow-wrap: anywhere; }
.fl-orph { margin-top: 22px; }
.fl-orph-row { padding: 7px 0; border-bottom: 1px solid var(--c-line-2); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fl-tb-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.fl-toolbar .fl-tb-actions { margin-left: 0; }
@container flwrap (max-width: 760px) {
  .fl-cols { display: none; }
  .fl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fl-leg { grid-column: 1; }
  .fl-match { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .fl-times, .fl-att { grid-column: 1 / -1; }
}
@container flwrap (max-width: 440px) {
  .fl-row { grid-template-columns: minmax(0, 1fr); }
  .fl-match { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- Close out */
.co-head-aside { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.co-meter { display: flex; gap: 3px; margin: 10px 0 4px; }
.co-meter.wide { width: 140px; margin: 0; }
.co-seg { flex: 1 1 0; height: 8px; background: var(--c-satisfied); }
.co-seg.needs {
  background-color: var(--c-caution-fill);
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--c-ink) 55%, transparent) 3px 4px);
}
.co-meter-text { font-size: 13px; color: var(--c-ink-2); }
.co-reconcile { margin-top: 10px; font-size: 13px; color: var(--c-ink-2); max-width: 78ch; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.co-card { padding: 12px 14px; border-top: 3px solid var(--co-edge, var(--c-ink-3)); min-width: 0; --co-text: var(--c-ink-2); }
.co-card.p-observed { --co-edge: var(--c-satisfied); --co-text: var(--c-satisfied); }
.co-card.p-proposed { --co-edge: var(--c-advisory); --co-text: var(--c-advisory); }
.co-card.p-needs    { --co-edge: var(--c-caution-fill); --co-text: var(--c-caution); }
.co-card.p-nothing  { --co-edge: var(--c-ink-3); --co-text: var(--c-ink-2); }
.co-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.co-title { margin: 0; font: 600 12px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.co-prov { font: 600 11px/1.3 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--co-text); border: 1px solid var(--co-text); padding: 1px 6px; white-space: nowrap; }
.co-prov.dashed { border-style: dashed; }
.co-value { font: 600 22px/1.1 var(--font-heading); margin: 6px 0 2px; overflow-wrap: anywhere; }
.co-value.co-muted { color: var(--c-ink-2); }
.co-sub { font-size: 13px; color: var(--c-ink-2); overflow-wrap: anywhere; }
.co-sub + .co-sub { margin-top: 2px; }
.co-note { font-size: 12px; color: var(--c-ink-3); margin-top: 6px; }
.co-warn { font-size: 13px; color: var(--c-caution); margin-top: 6px; }
.co-bad { font-size: 13px; color: var(--c-blocking); margin-top: 6px; }
.co-cons { margin-top: 8px; padding: 8px 10px; background: var(--c-accent-tint); font-size: 13px; line-height: 1.5; color: var(--c-ink); }
.co-cons b { font: 600 11px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); }
.co-cons .co-est { color: var(--c-ink-2); }
.co-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.co-tray { margin-top: 18px; }
.co-tray .commit-tray { margin-top: 8px; }
.co-bar { margin-top: 18px; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.co-bar-copy { min-width: 0; flex: 1 1 320px; }
.co-bar-title { font: 600 18px/1.2 var(--font-heading); }
.co-bar-text { font-size: 13px; color: var(--c-ink-2); margin-top: 2px; }
.co-bar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.co-bar-actions .btn-sub { font: 400 12px/1.1 var(--font-body); opacity: .9; }
.co-saved { font-size: 13px; color: var(--c-ink-2); margin-top: 8px; }
.co-leg-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--c-ink-2); }
.co-leg-pick select { width: auto; max-width: 340px; min-height: 34px; height: 34px; font-size: 13px; }
/* dialog bodies */
.co-fields { display: grid; gap: 10px; }
.co-fields.two { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.co-times-row { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; align-items: center; }
.co-times-row .co-k { font: 600 12px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.co-fieldset { border: 1px solid var(--c-line); padding: 8px 12px 10px; margin: 0; display: grid; gap: 8px; }
.co-fieldset legend { font: 600 12px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); padding: 0 6px; }
.co-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.co-check input { margin-top: 3px; }
.co-check .co-check-sub { display: block; font-size: 12px; color: var(--c-ink-2); }
@media (max-width: 767.98px) {
  .co-head-aside { margin-top: 6px; }
  .co-meter.wide { width: 100%; }
}