/* Base tokens, reset and buttons (from Ascent), plus the start screen. */

:root {
  /* Brand */
  --orange: #FC4C02;
  --orange-dim: rgba(252, 76, 2, 0.09);
  --orange-mid: rgba(252, 76, 2, 0.35);
  --orange-glow: rgba(252, 76, 2, 0.14);

  /* Backgrounds */
  --bg: #090909;
  --surface: #131313;
  --surface2: #1b1b1b;
  --surface3: #222222;
  --surface4: #2b2b2b;

  /* Borders */
  --border: #252525;
  --border-hover: #353535;

  /* Text */
  --text: #eeeeee;
  --text-2: #999999;
  --text-3: #555555;
  --muted: #666666;
  --dim: #3a3a3a;

  /* Structure */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --sidebar-w: 232px;
  --nav-h: 58px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-orange: 0 0 0 1px var(--orange-mid), 0 4px 20px var(--orange-glow);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn {
  border: none;
  padding: 7px 16px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, background .15s, border-color .15s, color .15s;
  letter-spacing: .01em;
  white-space: nowrap;
}

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { opacity: .85; }
.btn-primary:disabled { opacity: .3; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}

.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-dim);
}

/* ── page shell ── */
/* AA contrast: hints on the dark surfaces, and white text on the primary button */
:root { --muted: #8b8b8b; }
.btn-primary { background: #d44000; }
.btn-primary:hover { background: #b83800; opacity: 1; }
/* readable small text */
.picker-label { font-size: 11px; }
.story-hinttext { font-size: 11px; }
.story-toolbar button[data-act]:hover { background: #d44000; border-color: #d44000; }
#accentReset { font-size: 11px !important; }
#collageSettings div[style*="10.5px"] { font-size: 12px !important; }
body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.brand { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.brand span { color: var(--orange); }
.tagline { color: var(--text-2); font-size: 12.5px; text-align: right; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.lang { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
.lang-btn { background: none; border: none; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 5px; cursor: pointer; }
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--text); color: #000; }
.foot { color: var(--muted); font-size: 12px; text-align: center; padding: 18px 16px 28px; }
.foot a { color: var(--text-2); }

/* the story editor is the page itself, not an overlay: controls scroll on the
   left, the preview and Download stay in view on the right */
#storyModal.page { position: static; display: block; background: none; padding: 16px 24px 0; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; }
#storyModal.page .modal { max-width: 1240px; margin: 0 auto; height: calc(100vh - 76px); height: calc(100dvh - 76px); max-height: none; background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; }

/* GPX / FIT export help */
.howto { font-size: 12px; color: var(--text-2); }
.howto summary { cursor: pointer; color: var(--text); font-weight: 600; padding: 2px 0; }
.howto summary:hover { color: var(--orange); }
.howto ul { margin: 8px 0 2px 18px; display: grid; gap: 6px; line-height: 1.5; }
.howto b { color: var(--text); font-weight: 600; }

/* themed browser surfaces */
::selection { background: var(--orange-mid); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
input, select { accent-color: var(--orange); }

/* source tabs */
.src { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.seg-btn { background: none; border: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; padding: 8px; border-radius: 6px; cursor: pointer; }
.seg-btn.active { background: var(--text); color: #000; }
.src-pane { display: flex; flex-direction: column; gap: 8px; }
.src-row { display: flex; gap: 8px; flex-wrap: wrap; }
.src-pane .btn { font-size: 13px; padding: 10px 16px; }
.src-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.drop { display: block; border: 1.5px dashed var(--border-hover); border-radius: var(--radius-sm); padding: 22px 12px; text-align: center; color: var(--text-2); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--orange); background: var(--orange-dim); color: var(--text); }
.drop b { color: var(--orange); }
.status { color: var(--text-2); font-size: 12px; }
.status:empty, .error:empty { display: none; }
.error { color: #f87171; font-size: 12px; }
.text-in { width: 100%; margin-top: 8px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; }
.text-in:focus, .unit-row select:focus { outline: none; border-color: var(--orange); }
.unit-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.unit-row select { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; }
.vis-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  .topbar { padding: 12px 16px; }
  .tagline { display: none; }
  #storyModal.page { padding: 12px 16px 0; }
  #storyModal.page .modal { height: auto; overflow: visible; }
  #storyModal.page .story-right { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 8px 0; }
}

/* ── story modal on phones (from Ascent responsive.css) ── */
@media (max-width: 700px) {
  .modal-overlay { padding: 0; align-items: flex-end; }

  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 95vh;
    max-height: 92dvh; /* dvh keeps the action buttons on-screen above the address bar */
    padding: 14px 12px 20px;
  }

  /* sticky header sized to the mobile modal padding, with a bigger,
     higher-contrast close button that stays visible while scrolling */
  .modal-header {
    top: -14px; /* match the mobile modal padding (see story.css note) */
    margin: -14px -12px 0;
    padding: 12px 12px 10px;
    box-shadow: 0 8px 14px -12px rgba(0, 0, 0, .8);
  }
  .modal-close {
    width: 40px;
    height: 40px;
    font-size: 18px;
    background: var(--surface3);
    color: var(--text);
  }

  /* the Story modal fills the screen on mobile — no empty space above it */
  #storyModal .modal {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .modal-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* preview on top so edits are visible while scrolling the controls */
  .story-right { order: -1; position: static; }
  .story-preview {
    height: 42vh !important;
    height: 42dvh !important;
    width: auto !important;
    aspect-ratio: 9/16;
    margin: 0 auto;
  }

  .layout-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .color-swatch { width: 26px; height: 26px; }
  .modal-actions { flex-direction: row; }
  #statToggles { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 420px) {
  .layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story-preview { height: 38vh !important; height: 38dvh !important; }
}