/* base.css - reset, scrollbars, :root vars, body + background, wordmark, .workspace grid. Part of the split-up style.css; see index.html for load order. */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* Unified scrollbars — match the cards dropdown (thin gold) everywhere. */
  * { scrollbar-width: thin; scrollbar-color: rgba(180,130,60,0.2) transparent; }
  body.light * { scrollbar-color: rgba(120,80,30,0.25) transparent; }

  :root {
    color-scheme: dark; /* tells browser to render native controls (selects, scrollbars) in dark mode */
    --parchment: #f4e8c1;
    --parchment-dark: #e8d5a3;
    --parchment-darker: #d4b87a;
    --ink: #2c1a0e;
    --ink-light: #5a3e28;
    --red-wax: #8b1a1a;
    --gold: #b8860b;
    --gold-light: #d4a017;
    --border-ornate: #7a5c2e;
    --bg-dark: #1a0f07;
    --panel-bg: rgba(20, 10, 3, 0.92);
    --input-bg: rgba(244, 232, 193, 0.08);
    --input-border: rgba(180, 130, 60, 0.35);
    --label-color: #dabb80;
    --card-w: 380px;
    --card-h: 531px;
  }

  body {
    background: var(--bg-dark);
    color: #ead898;
    font-family: 'Crimson Pro', Georgia, serif;
    height: 100vh;        /* fallback for older browsers */
    height: 100dvh;       /* dynamic viewport — excludes OS nav bar + browser chrome */
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Subtle dungeon stone pattern background */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px),
      repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px);
    pointer-events: none;
    z-index: 0;
  }

  /* Wordmark — merged into the top bar (former page <header>) */
  .bar-wordmark {
    font-family: var(--arc-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--arc-gold);
    /* Match the left rail's 278px grid column so this divider lines up exactly with
       the rail's right edge below it. */
    width: 278px;
    padding: 0 0.95rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    border-right: 1px solid var(--arc-rule);
  }
  .bar-wordmark .ornament { margin: 0 0.4rem 0 0; color: var(--arc-gold-hi); font-size: 0.72em; }

  .ornament {
    display: inline-block;
    color: var(--gold);
    margin: 0 0.6rem;
    opacity: 0.7;
    font-size: 1.1em;
  }

  .workspace {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 278px minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0;
    flex: 1;
    min-height: 0;
  }