/* Onboarding — app-specific views only. Shell, header, toolbar, and .muted come
   from /design-system/hive-chrome.css; tokens from colors_and_type.css. */

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.onb-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.onb-toolnote { color: var(--fg-3); font-size: 12.5px; margin-left: auto; }

.btn-primary { appearance: none; border: 0; background: var(--kiss-red); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-md); cursor: pointer; }
.btn-primary:hover { background: var(--kiss-red-hover, #b00d18); }
.btn-sm { appearance: none; border: 1px solid var(--border-default); background: var(--n-0); color: var(--fg-1); font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.btn-sm:hover { background: var(--bg-subtle); }
.btn-danger { color: var(--error); border-color: var(--error-soft); }
.btn-danger:hover { background: var(--error-soft); }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--n-200); border-radius: var(--radius-lg); margin-top: var(--space-3); }
.onb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.onb-table th, .onb-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--n-100); white-space: nowrap; }
.onb-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); font-weight: 600; background: var(--bg-subtle); }
.onb-table tbody tr:last-child td { border-bottom: 0; }
.onb-table td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.onb-row { cursor: pointer; }
.onb-row:hover { background: var(--bg-subtle); }
.loc-table { min-width: 820px; }
.loc-table th.sortable { cursor: pointer; user-select: none; }
.loc-table th.sortable:hover { color: var(--fg-1); }
.loc-table th:not(.tl), .loc-table td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:last-child) { text-align: right; }
.onb-link { color: var(--fg-link, var(--kiss-red)); text-decoration: none; }
.onb-link:hover { text-decoration: underline; }
.onb-note, .onb-empty { max-width: 78ch; color: var(--fg-2); font-size: 13px; line-height: 1.5; margin: var(--space-4) 0; }

/* ── Grouped onboards ────────────────────────────────────────────────── */
.onb-group { margin: var(--space-5) 0 var(--space-6); }
.onb-group-head { font-size: 14px; font-weight: 600; margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }

/* ── Badges / chips ──────────────────────────────────────────────────── */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); letter-spacing: 0.02em; }
.badge.st-active   { background: var(--warning-soft); color: #92600b; }
.badge.st-planned  { background: var(--info-soft);    color: #1e4e8c; }
.badge.st-live     { background: var(--success-soft); color: #0f6b3f; }
.badge.st-canceled { background: var(--n-100);        color: var(--fg-3); }

.golive { font-size: 13px; }
.golive-rel { color: var(--fg-3); font-size: 12px; }
.gl-past .golive-rel { color: var(--error); }
.gl-soon .golive-rel { color: #92600b; }

.delta-gap { color: #92600b; font-weight: 600; font-family: var(--font-mono); font-size: 12.5px; }
.delta-ok  { color: var(--success); font-size: 12.5px; }

/* ── Map ─────────────────────────────────────────────────────────────── */
#onb-map { height: 68vh; min-height: 420px; margin-top: var(--space-3); border: 1px solid var(--n-200); border-radius: var(--radius-lg); }
.map-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 12.5px; color: var(--fg-2); margin-top: var(--space-4); }
.map-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; border: 1px solid rgba(0,0,0,0.15); }
.map-legend .ring { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; background: transparent; border: 2px solid var(--kiss-red); }
.onb-chip { margin-left: auto; font-size: 12.5px; color: var(--kiss-red); text-decoration: none; font-weight: 600; }
.onb-chip:hover { text-decoration: underline; }
.onb-pop { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; min-width: 180px; }
.onb-pop-onb { margin-top: 4px; font-size: 12px; color: var(--fg-2); }

/* ── Overlay (drawer + create modal) ─────────────────────────────────── */
.onb-scrim { position: fixed; inset: 0; background: rgba(15,23,42,0.35); z-index: 40; }
.onb-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); background: var(--bg-surface, var(--n-0)); z-index: 50; box-shadow: -8px 0 30px rgba(0,0,0,0.18); display: flex; flex-direction: column; }
.onb-panel-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--n-200); }
.onb-panel-head h2 { margin: 0; font-size: 17px; }
.onb-x { appearance: none; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--fg-3); cursor: pointer; padding: 0 4px; }
.onb-x:hover { color: var(--fg-1); }
.onb-panel-body { padding: var(--space-5); overflow-y: auto; }

.field { margin-bottom: var(--space-4); }
.field-row { display: flex; gap: var(--space-4); }
.field-row .field { flex: 1; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--n-0); color: var(--fg-1); }
.field input:disabled { background: var(--bg-subtle); color: var(--fg-3); }

.drawer-actions { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.drawer-msg { font-size: 12.5px; color: var(--fg-3); }
.drawer-msg.error { color: var(--error); }
.drawer-sub { font-size: 13px; font-weight: 650; margin: var(--space-5) 0 var(--space-1); }

.add-list, .check-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.add-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 7px 2px; border-bottom: 1px solid var(--n-100); font-size: 13.5px; }
.add-list li:last-child { border-bottom: 0; }
.check-list li { padding: 5px 2px; font-size: 13.5px; }
.check-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; }