/* Token values kept in sync with base.css (the source of truth). base.css
   loads first; this block must match it or it would override with stale values. */
:root {
  --dark:       #1a1a1a;
  --gray:       #555;
  --light-gray: #f5f5f5;
  --border:     #e2e2e2;
  --white:      #fff;
  --muted:      #999;
  --warn-bg:    #fff8e1;
  --warn-border:#f9a825;
}

body {
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header (2026 redesign — 52px sticky dark bar) ── */
header {
  background: var(--dark);
  color: var(--white);
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: 52px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
header .logo {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
  line-height: 1;
}
header .logo span { color: var(--red); }
header nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
  align-items: center;
}
header nav a {
  color: #888;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
  white-space: nowrap;
}
header nav a:hover,
header nav a.active { color: var(--white); }

/* ── Layout ── */
main.page {
  flex: 1;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 28px 52px;
}
/* ── Footer ── */
footer {
  background: var(--page-bg);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 20px 28px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
footer a { color: var(--red); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── Tool grid (hub page) ── */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.tool-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tool-card:hover {
  border-color: var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tool-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  color: var(--red);
}
.tool-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
}
.tool-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.tool-formats { font-size: 0.8rem; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.link-btn { color: var(--red); cursor: pointer; text-decoration: underline; }

/* ── Group slot grid ── */
.block-section { margin-bottom: 24px; }
.block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* "Populate Names by:" segmented toggle — label + Tag|Room buttons read as one
   bordered component sitting to the right of the Sort button. */
.name-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 5px 3px 10px;
}
.name-toggle-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.name-toggle-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 0;
  background: var(--border);
}
.name-toggle-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
  color: var(--gray);
  transition: background 0.15s, color 0.15s;
}
.name-toggle-btn:hover { background: var(--light-gray); }
.name-toggle-btn.is-active {
  background: var(--red);
  color: var(--white);
}

/* Give the Sort button a stronger border than the default .btn-outline, plus a
   hover fill that matches the group cards / input fields (#e8e8e8 + darker
   border) so its interactivity is obvious. */
.sort-btn { border: 2px solid #999; }
.sort-btn:hover { background: #e8e8e8; border-color: var(--gray); opacity: 1; }

.rearrange-header { margin-bottom: 20px; }
.rearrange-title  { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.rearrange-hint   { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }

.slots-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.slots-half {
  display: flex;
  gap: 4px;
}
.slot-label-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.slot-label {
  width: 22px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.slots-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.slot-item {
  height: 32px;
  display: flex;
  align-items: center;
}
.group-card {
  flex: 1;
  height: 30px;
  background: var(--light-gray);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  min-width: 0;
  transition: background 0.1s, border-color 0.1s;
}
.group-card:hover { background: #e8e8e8; border-color: #bbb; }
.slot-item.drag-over { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 4px; }
.slot-empty-card {
  flex: 1;
  height: 30px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
}
.group-tag   { font-weight: 600; font-size: 0.82rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-mnets { font-size: 0.74rem; color: var(--muted); font-family: monospace; white-space: nowrap; flex-shrink: 0; }
.group-types { font-size: 0.70rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* ── Tool list (single-column with problem/solution) ── */
.tool-list { display: flex; flex-direction: column; gap: 16px; }
.tool-list-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  align-items: start;
  text-decoration: none;
  color: var(--dark);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tool-list-item:hover {
  border-color: var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.tool-list-item:hover .tool-name { color: var(--red); }
.tool-list-left { display: flex; }
.tool-card-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tool-list-right { font-size: 0.875rem; line-height: 1.6; }
.tool-list-right p + p { margin-top: 8px; }
.tool-list-right .problem-label { font-weight: 600; color: var(--dark); }
.tool-list-right .solution-label { font-weight: 600; color: var(--red); }
.suite-overview {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 28px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--dark);
}
.suite-overview h2 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }

/* ── Tutorial invite banner (2026 redesign: soft red-light, icon well) ──────
   Default styles live here (moved off inline) so the page reads cleanly; the
   inline-style green "done" state set by index.html's JS still overrides. */
.tutorial-banner-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1.5px solid var(--red-border);
  border-radius: 11px;
  background: var(--red-light);
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tutorial-banner-link:hover {
  border-color: var(--red);
  box-shadow: 0 3px 12px rgba(192,57,43,0.1);
  transform: translateY(-1px);
}
.tutorial-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--red-border);
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1;
}
@media (max-width: 680px) {
  .tool-list-item { grid-template-columns: 1fr; gap: 12px; }
  .slots-grid { grid-template-columns: 1fr; }
  .slots-half:last-child { margin-top: 8px; }
}

/* ── Info table ── */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.info-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border);
  color: var(--gray);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.info-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

/* ── Docs ── */
.doc-list {
  padding-left: 20px;
  line-height: 2;
  font-size: 0.93rem;
}
.doc-list li { margin-bottom: 4px; }
.muted-text { color: var(--muted); font-size: 0.88rem; }

/* ── Bug report link ── */
.bug-link-wrap { text-align: right; margin: 6px 0 -4px; }
.bug-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: color 0.15s, border-color 0.15s;
}
.bug-link:hover { color: var(--red); border-color: #e88; }
.bug-link--inline { margin-left: auto; }

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid #ddd;
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tool cards (hub page) — 2026 redesign: 2-col horizontal cards ──────────
   Class names kept (.tool-grid-square / .tool-card-square) so the hub JS and
   tutorial selectors keep working; only the geometry changed from the old
   4-col square layout to the hand-off's 2-col icon-well + body + description. */
.tool-grid-square {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tool-card-square {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 18px 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  text-decoration: none;
  color: var(--dark);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.045);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s, opacity 0.15s;
  position: relative;
}
.tool-card-square:hover {
  border-color: var(--red);
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}
.tool-card-square:hover .tool-name-sq { color: var(--red); }
.tool-card-square:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--red);
}

/* ── Disabled / unavailable card states (2026 redesign) ──────────────────
   Replaces the old green "highlighted = usable" model with a grayed-out
   "unavailable" model:
     .locked     — no file uploaded yet (all cards dim)
     .wrong-type — a file is loaded but this tool can't use it
     .dim        — MTDZ hub variant (file not yet uploaded)
   An "available" card is simply the default (no modifier) appearance.
   Cards keep their click handler so the warning-flash still fires; we dim
   visually and rely on JS for the flash-on-disabled-click affordance. */
.tool-card-square.locked,
.tool-card-square.wrong-type,
.tool-card-square.dim {
  opacity: 0.4;
  box-shadow: none;
  cursor: not-allowed;
}
.tool-card-square.locked:hover,
.tool-card-square.wrong-type:hover,
.tool-card-square.dim:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}
.tool-card-square.locked:hover .tool-name-sq,
.tool-card-square.wrong-type:hover .tool-name-sq,
.tool-card-square.dim:hover .tool-name-sq {
  color: var(--dark);
}

/* "Available / click-me" state — used by the config-tools tutorial mock to
   spotlight the one applicable tool once the demo file is dropped. Restyled
   from the old green to the 2026 red accent so it reads as part of the
   redesign; also forces opacity/cursor back so it wins over a lingering
   .dim (the card starts dimmed like the live hub, then un-dims to this). */
.tool-card-square.highlighted {
  opacity: 1;
  cursor: pointer;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-light);
  background: var(--red-light);
}
.tool-card-square.highlighted:hover {
  border-color: var(--red);
  box-shadow: 0 3px 14px rgba(192,57,43,0.2);
}
.tool-card-square.warning-flash {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 4px rgba(192,57,43,0.2) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tool-card-square .tool-icon-sq {
  width: 44px;
  height: 44px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--red);
  flex-shrink: 0;
  line-height: 1;
}
.tool-card-square.highlighted .tool-icon-sq {
  color: var(--red);
  background: var(--white);
  border-color: var(--red-border);
}
.tool-card-square .tool-card-body {
  flex: 1;
  min-width: 0;
}
.tool-card-square .tool-name-sq {
  font-weight: 700;
  font-size: 0.9375rem;        /* 15px */
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  transition: color 0.15s;
}
.tool-card-square .tool-formats-sq {
  font-size: 0.6875rem;        /* 11px */
  font-family: var(--font-mono);
  color: var(--muted);
  margin-bottom: 6px;
}
.tool-card-square .tool-desc-sq {
  font-size: 0.8125rem;        /* 13px */
  color: var(--gray);
  line-height: 1.5;
}

/* Resume Session card (wide, short, above tool grid on hub page).
   Grayed-out by default — it only becomes active (full color, green icon well)
   once a VRF Tools JSON session is loaded and JS adds .highlighted. */
.resume-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: not-allowed;
  opacity: 0.55;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  margin-bottom: 16px;
}
.resume-card.highlighted {
  opacity: 1;
  cursor: pointer;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46,125,50,0.15);
  background: #f1f8f1;
}
.resume-card.highlighted:hover {
  border-color: var(--green);
  box-shadow: 0 3px 14px rgba(46,125,50,0.2);
}
.resume-card .resume-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: 9px;
  color: var(--red);
}
.resume-card.highlighted .resume-icon {
  background: var(--green-light);
  border-color: #b2e5c8;
  color: var(--green);
}
.resume-card .resume-body { flex: 1; }
.resume-card .resume-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.resume-card .resume-hint {
  font-size: 0.82rem;
  color: var(--muted);
}
.resume-card.highlighted .resume-title { color: var(--green); }

/* ── Floating save button ── */
.float-save-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 12px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(204,0,0,0.3);
  z-index: 900;
  display: none;
  align-items: center;
  gap: 7px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.float-save-btn.visible { display: flex; }
.float-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(204,0,0,0.4);
}
.float-save-btn .save-icon { font-size: 1rem; }

/* ── Editable controller name ── */
.ctrl-name-input {
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid var(--border);
  background: var(--light-gray);
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 350px;
  min-width: 100px;
  transition: border-color 0.15s, background 0.15s;
  color: var(--dark);
}
.ctrl-name-input:hover {
  border-color: var(--gray);
  background: #e8e8e8;
}
.ctrl-name-input:focus {
  outline: none;
  border-color: var(--red);
  background: var(--white);
}

/* ── IP address input (block header) ── */
.ctrl-ip-input {
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--light-gray);
  padding: 2px 6px;
  border-radius: 4px;
  width: 130px;
  transition: border-color 0.15s, background 0.15s;
  color: var(--dark);
  font-family: monospace;
}
.ctrl-ip-input:hover { border-color: var(--gray); background: #e8e8e8; }
.ctrl-ip-input:focus { outline: none; border-color: var(--red); background: var(--white); }

/* ── Expansion controller toggle row ── */
.expansion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.expansion-opt { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.expansion-parent-select {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.85rem;
  background: var(--white);
}
.expansion-limit-msg { font-size: 0.8rem; font-weight: 600; }

/* ── Zero-groups warning (DSB exported without group assignment) ── */
.zero-groups-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.zero-groups-warning span { flex: 1; min-width: 0; }

/* ── No-controller ghost notice ── */
.no-ctrl-notice {
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.no-ctrl-notice strong { color: var(--dark); }

/* ── Generate-blocks toggle ── */
.generate-blocks-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

/* ── Series tab bar (mixed 200+400 sessions) ── */
.series-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.series-tab {
  padding: 8px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s;
}
.series-tab.active { color: var(--red); border-bottom-color: var(--red); }
.series-tab:hover:not(.active) { color: var(--dark); }

/* ── Series breadcrumb (shown after series selection in mixed sessions) ── */
.series-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.series-breadcrumb-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
}
.series-breadcrumb-change {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
}
.series-breadcrumb-change:hover { color: var(--red); text-decoration: underline; }

/* ── Inline group tag editing ── */
.group-tag {
  position: relative;
}
.group-tag-edit {
  position: absolute;
  inset: 0;
  z-index: 10;
  border: 2px solid var(--red);
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 600;
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--white);
  color: var(--dark);
  outline: none;
  min-width: 60px;
}

/* ── Back to tools link ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 18px;
  transition: opacity 0.15s;
}
.back-link:hover { opacity: 0.8; }

/* ── Tool instructions card ── */
.instruct-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--dark);
}
.instruct-card .instruct-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

/* ── Responsive hub cards ── */
@media (max-width: 640px) {
  .tool-grid-square { grid-template-columns: 1fr; }
}