/*
 * Shared site theme, linked from every page via <link rel="stylesheet" href="/theme.css">
 * -- the same "single static file, included the same way everywhere" pattern as /nav.js.
 *
 * This holds the palette, base typography, and the component styles the tool pages
 * (Ridgeline, Afterimage, and future lab tools) share almost verbatim -- header.hero,
 * .panel, .dropzone, buttons, disclosure/advanced, etc. Each page still keeps its own
 * <style> block for page-specific layout (hero canvases, crop tools, result grids) and
 * for the couple of things intentionally different per page: .wrap's max-width (780px
 * for content pages, 1080px for tool pages, since their content genuinely differs) and
 * --accent (which palette color that page treats as its primary accent).
 *
 * A page picks its accent by overriding --accent/--accent-dim in its own <style> block,
 * AFTER this file is linked -- e.g. Afterimage sets `:root{ --accent: var(--violet);
 * --accent-dim: var(--violet-dim); }`. Ridgeline doesn't need to override anything since
 * amber is the default.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg: #10131a;
  --bg-panel: #171b24;
  --bg-panel-2: #1d2230;
  --line: #2a3040;
  --ink: #e9e7de;
  --ink-dim: #9aa0ae;
  --amber: #e0a54c;
  --amber-dim: #7a5f34;
  --teal: #5eb0a4;
  --violet: #9b8cd9;
  --violet-dim: #4a4560;
  --danger: #d97a6c;

  /* the page-level "brand color" for this particular tool -- override per page */
  --accent: var(--amber);
  --accent-dim: var(--amber-dim);
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
}
h1, h2, h3{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em 0;
}
h1{ font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 600; }
h2{ font-size: 1.5rem; }
/* Deliberately no max-width here. An earlier version capped every <p> at 62ch for
   readability, which looked fine in isolation but produced a visibly lopsided page
   wherever a lead paragraph sat directly above a full-width panel, grid, or QR row --
   the text would stop 2/3 of the way across while everything below it ran edge to edge.
   Letting paragraphs fill their container keeps every page visually consistent; a
   handful of short, deliberately narrow intro lines (p.lede) opt into their own cap
   locally instead of relying on a blanket rule everything else has to fight around. */
p{ color: var(--ink-dim); }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Shared by the tool pages (Ridgeline, Afterimage, future lab tools) ---------- */

header.hero{ padding: 32px 0 40px; border-bottom: 1px solid var(--line); }
.hero-grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
@media (max-width: 800px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero-line{ color: var(--accent); font-size: 0.95rem; margin-bottom: 14px; display: block; }
#heroCanvas{
  width: 100%; height: 220px; display: block;
  background: linear-gradient(180deg, #161a24 0%, #10131a 100%);
  border: 1px solid var(--line); border-radius: 6px;
}

main{ padding: 48px 0 96px; }
section{ margin-bottom: 56px; }
.step-tag{
  color: var(--teal); font-size: 0.85rem; font-family: 'Inter', sans-serif;
  font-weight: 600; margin-bottom: 6px; display: block;
}

.panel{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }

.dropzone{
  /* block, not the <label> default of inline -- an inline box's border/background doesn't
     grow to enclose a second wrapped line of text, it just lets that line spill out past the
     box and collide with whatever sits below (only surfaced once a dropzone's label text got
     long enough to wrap, in Vectis -- Ridgeline/Afterimage's shorter labels never wrapped). */
  display: block;
  border: 1.5px dashed var(--line); border-radius: 8px; padding: 48px 24px;
  text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.dropzone input{ display: none; }
.dropzone .cta{ color: var(--accent); font-weight: 600; }

.row{ display: flex; gap: 24px; flex-wrap: wrap; }
.col{ flex: 1; min-width: 260px; }

canvas.stage{
  width: 100%; max-width: 100%; display: block; background: #0c0e13;
  border: 1px solid var(--line); border-radius: 6px; cursor: grab;
}
canvas.stage:active{ cursor: grabbing; }

label.field{ display: block; font-size: 0.85rem; color: var(--ink-dim); margin: 18px 0 6px; }
input[type=range]{ width: 100%; accent-color: var(--accent); }
.field-value{ color: var(--ink); font-weight: 600; }

/* Generic text-entry chrome -- added for Vectis, the first lab tool whose primary input is
   typed text/phrases rather than a photo or a slider. Kept here rather than duplicated in a
   page-local <style> block so the next text-input tool gets it for free. */
input[type=text], input[type=search], select{
  display: block; width: 100%;
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--ink);
  padding: 10px 12px; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.9rem;
}
input[type=text]:focus, input[type=search]:focus, select:focus{ outline: none; border-color: var(--accent); }
input[type=text]:disabled, select:disabled{ opacity: 0.5; cursor: not-allowed; }

button.primary{
  background: var(--accent); color: #10131a; border: none; padding: 12px 22px;
  border-radius: 6px; font-weight: 600; font-size: 0.95rem; cursor: pointer; font-family: 'Inter', sans-serif;
}
button.primary:disabled{ background: var(--accent-dim); color: #6b6b6b; cursor: not-allowed; }
button.secondary{
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  padding: 12px 22px; border-radius: 6px; font-weight: 500; cursor: pointer; font-family: 'Inter', sans-serif;
}

.actions{ display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.status{ color: var(--ink-dim); font-size: 0.85rem; }

.divider{ border: none; border-top: 1px solid var(--line); margin: 40px 0; }

footer{ border-top: 1px solid var(--line); padding: 28px 0; color: var(--ink-dim); font-size: 0.82rem; }

details.disclosure{ margin-top: 18px; }
details.disclosure > summary{
  cursor: pointer; color: var(--ink-dim); font-size: 0.85rem; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 7px; user-select: none;
}
details.disclosure > summary::-webkit-details-marker{ display: none; }
details.disclosure > summary::before{
  content: '▸'; color: var(--accent); display: inline-block; transition: transform .15s ease;
}
details.disclosure[open] > summary::before{ transform: rotate(90deg); }
details.disclosure > summary:hover{ color: var(--ink); }
details.disclosure .disclosure-body{ margin-top: 16px; }
details.advanced{ border-top: 1px solid var(--line); padding-top: 24px; }
details.advanced > summary{ font-size: 0.95rem; }
details.advanced > summary .adv-sub{ color: var(--ink-dim); font-weight: 400; font-size: 0.82rem; }