/* ─────────────────────────────────────
   Rowbie — Design Tokens
   MType Workroom
───────────────────────────────────── */

:root {
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --page-width: 700px;

  /* ── Corner radius scale ── */
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-xl:  8px;
  --radius-2xl: 10px;

  /* ── Font-size scale ── */
  /* fs-12 also covers what used to be two near-duplicate strays,
     11px and 13px — 199 declarations total merged into one size. */
  --fs-9:  9px;
  --fs-10: 10px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
}

.page-rail {
  max-width: var(--page-width);
  margin: 0 auto;
  width: 100%;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:           #E4E8ED;
  --surface:      #EDF0F4;
  --surface2:     #E6EAF0;
  --border:       #BDC5CE;
  --ink:          #0D1B2A;
  --ink-mid:      #3A5A6A;
  --ink-light:    #26455A;
  --accent:       #0A8AAA;
  --accent-lt:    #CCF0FA;
  --accent-text:  #086A88;
  --ok:           #0A8AAA;
  --ok-lt:        #CCF0FA;
  --warn:         #7A5A00;
  --warn-lt:      #FFF0C0;
  --warn-border:  #C8A030;
  --danger:       #882020;
  --danger-lt:    #F5D8D8;
  --bottom-bg:    #A8B4BE;
  --shadow:       0 2px 12px rgba(13,27,42,0.12);
  --hero-bg:      #C8D0D8;
  --hero-ink:     rgba(13,27,42,0.90);
  --hero-mid:     rgba(13,27,42,0.88);
  --hero-border:  rgba(13,27,42,0.12);
  --progress-track: #BDC5CE;
  --row-hl:       #FFF0A0;
  --row-hl-border:#C8A000;
  --grid-line:    #B0BCC8;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:           #0D1B2A;
  --surface:      #142030;
  --surface2:     #1A2A3A;
  --border:       #1E3448;
  --ink:          #E8E8E4;
  --ink-mid:      #8AABB8;
  --ink-light:    #9BBAC8;
  --accent:       #3CCFEF;
  --accent-lt:    #0A2535;
  --accent-text:  #3CCFEF;
  --ok:           #3CCFEF;
  --ok-lt:        #0A2535;
  --warn:         #E8C84A;
  --warn-lt:      #1E1A08;
  --warn-border:  #AE9011;
  --danger:       #E06060;
  --danger-lt:    #2E1010;
  --bottom-bg:    #080F18;
  --shadow:       0 2px 20px rgba(0,0,0,0.5);
  --hero-bg:      #080F18;
  --hero-ink:     rgba(232,232,228,0.95);
  --hero-mid:     rgba(232,232,228,0.88);
  --hero-border:  rgba(60,207,239,0.12);
  --progress-track: #1E3448;
  --row-hl:       #1A3A48;
  --row-hl-border:#3CCFEF;
  --grid-line:    #1E3448;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}

/* ── App shell ── */
.app-shell {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* ── Scrollable page content ── */
.page-scroll {
  position: fixed;
  inset: 44px 0 48px 0;
  z-index: 101;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: var(--accent) var(--surface2);
  touch-action: pan-x pan-y; /* browser handles scroll; pinch goes to rb_zoom.js */
}

.page-scroll.no-bottom-nav { inset: 44px 0 0 0; }
.page-scroll.no-top-nav    { inset: 0 0 48px 0; }

/* ── Full-screen overlay chrome ── */
/* Opaque shell: full-page overlays (setup wizards, PDF picker, page reorder).
   Pair with a page-prefixed class that sets only z-index. */
.wk-overlay-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

/* Dimmed backdrop: confirm dialogs, loading spinners, lightboxes over existing
   content. Pair with a page-prefixed class that sets z-index, background
   opacity, and alignment/flex-direction. */
.wk-overlay-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
}

/* ── Shared form input chrome ── */
/* Grouped rather than a combinable class: these 5 classes are used across
   ~27 call sites, and every one only needs to add its size/radius delta
   below — no markup changes required to pick up the shared chrome. */
.ps-input, .ps-select, .ca-input, .lg-input, .pp-name-input, .pp-setup-input-sm {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  outline: none;
}

/* ── Shared neutral-button-with-danger-hover idiom ── */
/* .pp-cancel-btn alone spans ~11 call sites — grouped for the same reason
   as the input chrome above. */
.pp-cancel-btn, .ps-btn-discard {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-mid);
  cursor: pointer;
}
.pp-cancel-btn:hover, .ps-btn-discard:hover { border-color: var(--danger); color: var(--danger); }

/* ── Typography ── */
.mono { font-family: var(--font-mono); }

.section-label {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
}

/* ── Shared buttons ── */
.btn-primary {
  height: 40px;
  padding: 0 20px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

.btn-secondary {
  height: 40px;
  padding: 0 18px;
  background: var(--surface2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ── Progress bar ── */
.progress-track {
  height: 5px;
  background: var(--progress-track);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

/* Prevent double-tap-to-zoom on interactive elements (all platforms) */
button, [role="button"], a, input[type="submit"], input[type="button"] {
  touch-action: manipulation;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-light); }

/* ── Shared card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ── Dropdown overlay (click-outside) ── */
.dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
}