@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  --bg:        #f0f4f9;
  --card:      #ffffff;
  --text:      #0f172a;
  --muted:     #64748b;
  --border:    #dde3ec;
  --border-md: #b8c5d6;

  --navy:      #0c1a35;
  --blue:      #1d4ed8;
  --blue-mid:  #2563eb;
  --blue-lt:   #eff6ff;
  --blue-bd:   #bfdbfe;

  --green:     #059669;
  --green-bg:  #ecfdf5;
  --green-bd:  #a7f3d0;

  --red:       #dc2626;
  --red-bg:    #fef2f2;
  --red-bd:    #fecaca;

  --amber:     #d97706;
  --amber-bg:  #fffbeb;
  --amber-bd:  #fde68a;

  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(12,26,53,0.07), 0 1px 2px rgba(12,26,53,0.04);
  --shadow:    0 4px 18px rgba(12,26,53,0.09), 0 1px 4px rgba(12,26,53,0.05);
  --shadow-lg: 0 14px 44px rgba(12,26,53,0.14), 0 4px 14px rgba(12,26,53,0.07);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── App header — full-bleed, stays pinned to the top while scrolling ────────── */
.hero {
  background: linear-gradient(135deg, #0c1a35 0%, #162b55 55%, #0e2245 100%);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(12,26,53,0.25);
}

/* Radial glow + subtle grid overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 72% 50%, rgba(29,78,216,0.28) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.022'%3E%3Cpath d='M0 0h40v40H0zm40 40h40v40H40z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Thin gradient accent line at bottom of header */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,0.7) 25%, rgba(99,179,237,0.9) 55%, rgba(29,78,216,0.5) 80%, transparent 100%);
}

.hero-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 13px;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.13);
}

.hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 3px;
}

.hero-title {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin: 0;
}

.hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  font-weight: 400;
}

.hero-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Legacy hero element suppression */
.hero-panel, .eyebrow, .hero p, .hero-row, .hero h1,
.simple-hero { display: none !important; }

/* ── Page shell ─────────────────────────────────────────────────────────────── */
.page-shell {
  max-width: 1340px;
  margin: 0 auto;
  padding: 24px 20px 56px;
}

/* ── Two-column layout ──────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 282px 1fr;
  gap: 22px;
  align-items: start;
}

/* Grid items default to min-width:auto, meaning they won't shrink below
   their content's natural width. On pages with a wide table (Branch
   Configuration, Review) or any other unbreakable-wide content, that lets
   .content force the whole grid wider than the page, which visually reads
   as the sidebar "stretching" and can throw off the sidebar's sticky
   positioning. This lets .content shrink to its actual 1fr allocation and
   scroll internally instead. */
.content { min-width: 0; }

.sidebar {
  position: sticky;
  /* --hero-height is measured and set by app.js so this sits just below the
     sticky header instead of guessing a fixed pixel value (the header's
     height changes at the mobile breakpoint). */
  top: calc(var(--hero-height, 96px) + 16px);
  display: grid;
  gap: 14px;
}

/* ── Base card ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.sidebar .card,
.content  .card { padding: 20px 22px; }

/* ── Sidebar headings ───────────────────────────────────────────────────────── */
.sidebar h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--navy);
}
.sidebar h3::before {
  content: '';
  display: block;
  width: 3px;
  height: 13px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Collapsible sidebar sections (native <details>/<summary>) ────────────────
   Keeps the sidebar short enough for sticky positioning to behave well —
   only Progress stays fully expanded; Save & Resume keeps the token box
   visible but tucks "resume with a token" away, and Upload workbook is
   collapsed by default since it's only needed after a correction. */
.sidebar-collapse > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-collapse > summary::-webkit-details-marker,
.sidebar-collapse > summary::marker { display: none; }
.sidebar-collapse > summary > h3 { margin: 0; }
.sidebar-collapse-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.sidebar-collapse .chevron {
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.sidebar-collapse[open] .chevron { transform: rotate(180deg); }
.sidebar-collapse-body { margin-top: 14px; }
.sidebar-collapse-inline {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.content h2 { margin-top: 0; }

/* ── Token / sidebar form ───────────────────────────────────────────────────── */
.meta-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.token-box { display: grid; gap: 7px; }
.token-box small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ── Inputs ─────────────────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=date], input[type=number],
input[type=password], textarea, select {
  width: 100%;
  border: 1.5px solid var(--border-md);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
button {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  transition: all 0.18s;
  white-space: nowrap;
}
button:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, #1d4ed8 0%, #1539a8 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(29,78,216,0.35), 0 1px 2px rgba(29,78,216,0.18);
  border: 1px solid transparent;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 16px rgba(29,78,216,0.45), 0 1px 3px rgba(29,78,216,0.18);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) !important; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--border-md);
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #7e94b0;
}
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-row, .wizard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizard-nav {
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  padding-bottom: 6px;
  border-top: 1px solid var(--border);
  align-items: center;
  /* Stays visible at the bottom of the viewport while scrolling through a
     long section, so Next/Back don't require scrolling all the way down.
     Sticks only within the card's own height, so it scrolls away normally
     once you reach the end of the card (e.g. past the review page).
     Kept deliberately plain (no shadow, no edge-to-edge bleed) so it reads
     as part of the card rather than a bolted-on floating bar. */
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--card);
  /* Without an explicit width, this shrank to fit its own content once
     "stuck" instead of spanning the card's full width, leaving bare page
     background visible on either side of Back/Next. Forcing 100% (of the
     card's content box, same as any normal block child) fixes that. */
  width: 100%;
}
.right { justify-content: flex-end; }

/* ── Content header ─────────────────────────────────────────────────────────── */
.content-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.content-head h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.35px;
  color: var(--navy);
  margin: 0 0 2px;
}
.content-head .muted { font-size: 12.5px; color: var(--muted); }

.page-chip {
  white-space: nowrap;
  background: var(--blue-lt);
  color: var(--blue);
  border: 1.5px solid var(--blue-bd);
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 700;
  font-size: 11.5px;
  flex-shrink: 0;
}

.help-link {
  white-space: nowrap;
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--border-md);
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 11.5px;
  flex-shrink: 0;
  text-decoration: none;
  transition: all 0.15s;
}
.help-link:hover { background: #f8fafc; border-color: #7e94b0; }

/* ── Progress list ──────────────────────────────────────────────────────────── */
.progress-bar-wrap  { margin-bottom: 14px; }
.progress-bar-track {
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 5px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue) 0%, #60a5fa 100%);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.progress-bar-label { font-size: 11px; color: var(--muted); text-align: right; font-weight: 600; }

.progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 3px;
  cursor: default;
  transition: background 0.12s, border-color 0.12s;
}

.progress-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--border);
  color: var(--muted);
  flex-shrink: 0;
  transition: all 0.2s;
}
.progress-step-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.progress-item.active {
  background: var(--blue-lt);
  border-color: var(--blue-bd);
  color: var(--blue);
  font-weight: 600;
}
.progress-item.active .progress-step-num {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.14);
}

.progress-item.done { color: var(--green); }
.progress-item.done .progress-step-num {
  background: var(--green);
  color: #fff;
  font-size: 11px;
}

.progress-item.clickable { cursor: pointer; }
.progress-item.clickable:hover { background: #f8fafc; border-color: var(--border); }

.progress-save { margin-top: 1px; font-size: 10px; color: var(--muted); }

/* ── Form grid ──────────────────────────────────────────────────────────────── */
.section-title { font-size: 18px; margin: 0 0 4px; font-weight: 700; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  /* The sticky Back/Next bar covers this same strip of viewport for as
     long as you're scrolling through a page taller than one screen (that's
     inherent to position:sticky — it isn't reserved extra scroll space,
     it just floats over whatever's underneath). This reserves enough
     empty room at the end so the last real field always clears it instead
     of being covered. ~90px comfortably clears the bar's own height. */
  margin-bottom: 90px;
}

/* ── Section banner ─────────────────────────────────────────────────────────── */
.section-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a6e 100%);
  color: #fff;
  border-radius: 10px;
  padding: 16px 20px;
  border: none;
  box-shadow: 0 2px 10px rgba(12,26,53,0.22);
}
.section-banner .muted { color: rgba(255,255,255,0.65); font-size: 12px; }

/* ── Field cards ────────────────────────────────────────────────────────────── */
.field-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-card:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.08);
}
.field-card.full { grid-column: 1 / -1; }
.field-card label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  margin-bottom: 7px;
}
.field-help {
  margin-top: 7px;
  font-size: 12px;
  color: var(--muted);
  white-space: pre-line;
  line-height: 1.5;
}
.example {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--bg);
  font-size: 12px;
  color: var(--muted);
  white-space: pre-line;
}

/* ── Note cards ─────────────────────────────────────────────────────────────── */
.note-card {
  grid-column: 1 / -1;
  position: relative;
  border-left: 4px solid var(--blue);
  border-top: 1px solid var(--blue-bd);
  border-right: 1px solid var(--blue-bd);
  border-bottom: 1px solid var(--blue-bd);
  border-radius: 0 10px 10px 0;
  padding: 13px 16px 13px 44px;
  background: linear-gradient(135deg, #eff6ff 0%, #e8f1ff 100%);
  font-size: 13px;
  color: #1e3360;
  line-height: 1.55;
}
.note-card::before {
  content: 'ℹ';
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 15px;
  color: var(--blue);
  line-height: 1;
  font-style: normal;
}
.note-card strong { display: block; margin-bottom: 5px; font-weight: 700; color: var(--navy); }
.note-card .field-help { color: #334155; }

.note-card.warning {
  border-left-color: var(--amber);
  border-top-color: var(--amber-bd);
  border-right-color: var(--amber-bd);
  border-bottom-color: var(--amber-bd);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #7c4a00;
}
.note-card.warning::before { content: '⚠'; color: var(--amber); }

/* ── Counter pills ──────────────────────────────────────────────────────────── */
.counter-row { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.counter-pill { border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 700; background: var(--bg); color: var(--muted); }
.counter-pill.ok   { color: var(--green); background: var(--green-bg); }
.counter-pill.warn { color: var(--amber); background: var(--amber-bg); }
.counter-pill.over { color: var(--red);   background: var(--red-bg); }

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.notice  { border-left: 3px solid var(--blue); background: var(--blue-lt); padding: 12px 16px; border-radius: 0 8px 8px 0; margin-bottom: 14px; font-size: 13px; }
.alert   { margin-top: 12px; padding: 12px 16px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: 13px; line-height: 1.55; white-space: pre-line; }
.alert.success { background: var(--green-bg); color: #065f46; border: 1px solid var(--green-bd); }
.alert.error   { background: var(--red-bg);   color: #7f1d1d; border: 1px solid var(--red-bd); white-space: pre-line; }
.alert.info    { background: var(--blue-lt);  color: #1e40af; border: 1px solid var(--blue-bd); }

#nav-message { margin-top: 14px; }
#nav-message.alert { display: block; }

/* ── Readonly / review ──────────────────────────────────────────────────────── */
.readonly-wrap {
  white-space: pre-line;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  line-height: 1.55;
  font-size: 13px;
}
.review-card {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  margin-bottom: 12px;
  /* Long unbroken answer text can make .review-table wider than this card
     — scroll it within the card instead of forcing the page wider. */
  overflow-x: auto;
}
.review-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.review-table { width: 100%; border-collapse: collapse; }
.review-table td { border-top: 1px solid var(--border); padding: 8px; vertical-align: top; font-size: 12.5px; }
.review-table td:first-child { width: 36%; font-weight: 600; color: #334155; }

/* ── Autosave indicator ─────────────────────────────────────────────────────── */
.autosave-indicator { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: right; }

/* ── Validation ─────────────────────────────────────────────────────────────── */
.field-card.invalid { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(220,38,38,0.1) !important; }
.field-card.invalid input, .field-card.invalid textarea, .field-card.invalid select { border-color: var(--red) !important; }
label .req-star { color: var(--red); margin-left: 2px; font-weight: 700; }

/* ── Branch table ───────────────────────────────────────────────────────────── */
.branch-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.branch-table th, .branch-table td { border: 1px solid var(--border); padding: 9px 10px; vertical-align: top; }
.branch-table th { background: var(--navy); color: #fff; text-align: left; font-size: 12px; font-weight: 600; }
.branch-table input { width: 100%; }
.branch-block {
  margin-top: 14px;
  /* Long branch names/abbreviations can make .branch-table wider than this
     card — scroll it within the card instead of forcing the page wider. */
  overflow-x: auto;
}
.clear-branch-row { padding: 4px 8px !important; font-size: 11px !important; color: var(--red); background: var(--red-bg); border: 1px solid var(--red-bd); border-radius: 5px; }

/* ── Schedule widget ────────────────────────────────────────────────────────── */
.schedule-widget, .holidays-widget { background: #fff; }
.schedule-rows { display: grid; gap: 10px; margin: 10px 0; }
.schedule-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--bg);
}
.schedule-days { display: flex; gap: 6px; flex-wrap: wrap; }
.day-check, .inline-check, .holiday-check { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.day-check input, .inline-check input, .holiday-check input { width: auto; }

/* ── Holiday widget ─────────────────────────────────────────────────────────── */
.holiday-list { margin-top: 12px; }
.holiday-row-section { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 14px; margin-top: 14px; width: 100%; clear: both; }
.holiday-row-like-schedule { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.holiday-row-like-schedule label { font-size: 13px; margin-bottom: 5px; }
.holiday-action { align-self: center; padding-top: 20px; }
.additional-holiday-section { border-top: 1px solid var(--border); }
.holiday-check-grid, .custom-holidays { display: none !important; }

/* ── PAPI / Sierra test result ──────────────────────────────────────────────── */
#papi-test-result { border-radius: 8px; font-size: 12.5px; line-height: 1.5; white-space: pre-line; }

/* ── Voice TTS button ───────────────────────────────────────────────────────── */
.voice-tts-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--blue-bd);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.voice-tts-btn:hover { background: var(--blue-lt); border-color: var(--blue); }

/* ── Voice TTS disclaimer ───────────────────────────────────────────────────── */
.tts-disclaimer {
  margin-top: 8px;
  padding: 10px 13px;
  border-left: 3px solid var(--blue);
  background: var(--blue-lt);
  border-radius: 0 7px 7px 0;
  font-size: 11.5px;
  color: #1e3360;
  line-height: 1.5;
}
.tts-disclaimer strong { color: var(--red); }

/* ── Disabled card ──────────────────────────────────────────────────────────── */
.disabled-card { opacity: .5; background: var(--bg) !important; }
.disabled-card input { cursor: not-allowed; background: var(--border) !important; }

/* ── Branch bulk upload ─────────────────────────────────────────────────────── */
#branch-bulk-upload { display: none; }
.branch-bulk-label { cursor: pointer; }

/* ── Misc utility ───────────────────────────────────────────────────────────── */
small, .muted { color: var(--muted); line-height: 1.45; font-size: 12.5px; }
.downloads a { display: inline-block; margin-right: 10px; font-weight: 600; color: var(--blue); text-decoration: none; }
.footer-note { margin-top: 18px; color: var(--muted); font-size: 12px; }

/* ── Holiday legacy ─────────────────────────────────────────────────────────── */
.holiday-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px 18px; }
.holiday-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 0; }
.holiday-check input { width: auto; }
.custom-holiday-block { clear: both; display: block; width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.custom-holiday-row { display: grid; grid-template-columns: 1fr 200px auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.custom-holiday-row label { font-size: 13px; margin-bottom: 5px; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
/* This app targets computers, not phones — a 12" laptop (~1200-1366px wide
   maximized) should always get the two-column sticky-sidebar layout, which
   is more compact than stacking the sidebar above the content. Only
   collapse to single-column for something narrower than any real laptop
   (a split/half-width window, or a genuinely small device). */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}
@media (max-width: 700px) {
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 16px; }
  .hero-badges { justify-content: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .content-head { flex-direction: column; }
  .page-shell { padding: 16px 12px 40px; }
  .schedule-row { grid-template-columns: 1fr; }
  .holiday-row-like-schedule { grid-template-columns: 1fr; }
  .holiday-grid { grid-template-columns: 1fr; }
  .custom-holiday-row { grid-template-columns: 1fr; }
}