/* ============================================================
   miniprompter.app — one stylesheet, used by every page.

   The sibling sites (backuptempo-site, DiskMapper-Site) inline a
   copy of these tokens into index.html and keep the copies in
   sync by hand. That has bitten both of them. Here every page
   links this file instead, so a colour changes in one place.

   Accent is the fill light's own colour: a warm gold, the hue
   RingLightStyle.hazeYellowness pulls the band's halo toward.
   ============================================================ */

/* ---------------------------------------------------------------------------
   Almost every token flips with light and dark. One does not.

   --brand is the wordmark's gold, the same value in both themes, so the name
   reads identically wherever it appears. Brad asked for that specifically.

   It is deliberately NOT --accent, and the two must not be merged: accent
   carries link text and button fills, so in light mode it has to darken to a
   legible brown. A brand mark carries no such duty — WCAG 1.4.3 excludes
   logotypes from the contrast rule. Keep --brand for the wordmark and the
   claim-card tint (mixed from --accent that tint came out muddy on white),
   and nothing else.

   A previous pass made the nav and both hero types a fixed dark band in both
   themes, so the wordmark and the screen illustration always had dark behind
   them. Brad did not like it and it was rolled back. Recorded so it is not
   re-proposed as a fresh idea; the underlying observation still stands, which
   is that the gold is pale on white.
--------------------------------------------------------------------------- */

:root{
  --bg:#0a0a0c; --panel:#141317; --line:#282630; --line-soft:#1a1920;
  --text:#f5f3f0; --dim:#aca69f; --mute:#726c66;
  --accent:#f2b24c; --accent-text:#241703; --warn:#f0b429;
  --glow:#ffd591;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme: dark;
}

/* Fixed in both themes. */
:root{ --brand:#f2b24c; }

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#ffffff; --panel:#f7f7f9; --line:#e2e2e7; --line-soft:#f0f0f3;
    --text:#0d0d10; --dim:#4b4b55; --mute:#84848f;
    --accent:#8a5a08; --accent-text:#ffffff; --warn:#a56a00;
    --glow:#c98a2e;
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f7f7f9; --line:#e2e2e7; --line-soft:#f0f0f3;
  --text:#0d0d10; --dim:#4b4b55; --mute:#84848f;
  --accent:#8a5a08; --accent-text:#ffffff; --warn:#a56a00;
  --glow:#c98a2e;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#0a0a0c; --panel:#141317; --line:#282630; --line-soft:#1a1920;
  --text:#f5f3f0; --dim:#aca69f; --mute:#726c66;
  --accent:#f2b24c; --accent-text:#241703; --warn:#f0b429;
  --glow:#ffd591;
  color-scheme: dark;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
     -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
img{max-width:100%}
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.accent{color:var(--accent)}
.mono{font-family:var(--mono)}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
section{padding:88px 0}
section h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin:10px 0 14px}
.section-sub{color:var(--dim);max-width:62ch;font-size:16px;line-height:1.65}
.skip-link{position:absolute;left:-999px;top:auto;background:var(--accent);color:var(--accent-text);
  padding:10px 16px;border-radius:8px;z-index:100}
.skip-link:focus{left:16px;top:16px}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
  .reveal.in{opacity:1;transform:none}
}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
     background:color-mix(in srgb,var(--bg) 82%,transparent);
     -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:64px;
           display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font-weight:800;font-size:17px;letter-spacing:-.02em;text-decoration:none;
          display:inline-flex;align-items:center;gap:9px}
.wordmark svg,.wordmark img{width:26px;height:26px;border-radius:7px;display:block}
/* The one place --brand is used: the same gold in both themes, by request. */
.wordmark .accent{color:var(--brand)}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:14px;color:var(--dim);transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme-toggle{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--dim);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .15s,color .15s}
.theme-toggle:hover{color:var(--text);border-color:var(--mute)}
.theme-toggle svg{width:17px;height:17px}
.icon-moon{display:none}
:root[data-theme="light"] .icon-sun{display:none}
:root[data-theme="light"] .icon-moon{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .icon-sun{display:none}
  :root:not([data-theme]) .icon-moon{display:block}
}
@media (max-width:800px){ .nav-links{display:none} }
@media (max-width:480px){
  .nav-inner{padding:0 12px;gap:6px}
  .wordmark{font-size:14px;gap:6px}
  .wordmark svg,.wordmark img{width:21px;height:21px}
  .theme-toggle{width:28px;height:28px;border-radius:7px}
  .theme-toggle svg{width:14px;height:14px}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;
     font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;
     font-family:inherit;transition:transform .12s,filter .15s,border-color .15s,background .15s}
.btn-primary{background:var(--accent);color:var(--accent-text);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 26px color-mix(in srgb,var(--accent) 26%,transparent)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,0,0,.25),0 0 38px color-mix(in srgb,var(--accent) 38%,transparent)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--mute);background:color-mix(in srgb,var(--panel) 72%,transparent)}
.btn[aria-disabled="true"]{background:var(--line-soft);color:var(--mute);border-color:var(--line);
  box-shadow:none;cursor:default;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:44px 0 50px}
.footer-inner{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
.footer-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer-links a{text-decoration:none;color:var(--dim);font-size:13.5px}
.footer-links a:hover{color:var(--text)}
.footer-meta{font-size:12.5px;color:var(--mute);line-height:1.7;max-width:52ch}
.footer-meta strong{color:var(--dim)}
.footer-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;font-size:12.5px;color:var(--mute)}

/* ---- footer motif divider ----
   Same idea as the siblings' rule of tick marks, read here as the prompter's
   ten-step speed scale. */
.ticks{display:flex;justify-content:center;gap:5px;height:16px;align-items:flex-end;opacity:.5}
.ticks span{width:2px;background:var(--mute);border-radius:1px}
.ticks span:nth-child(3n){height:16px;background:var(--accent);opacity:.85}
.ticks span:not(:nth-child(3n)){height:9px}

/* ---- sub-page hero ---- */
.page-hero{padding:76px 0 8px;text-align:center}
.page-hero .kicker{display:block;margin-bottom:10px}
.page-hero h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.03em;margin:0 0 16px}
.page-hero .lede{max-width:62ch;margin:0 auto;color:var(--dim);font-size:17px;line-height:1.65}
.page-hero .lede strong{color:var(--text)}
.page-hero .lede a{color:var(--accent)}

/* ---- prose ---- */
.prose{max-width:72ch;margin:0 auto;padding:44px 0 96px}
.prose h1{font-size:clamp(28px,4.4vw,40px);font-weight:800;letter-spacing:-.03em;margin:0 0 22px}
.prose h2{font-size:22px;font-weight:750;letter-spacing:-.01em;margin:44px 0 14px}
.prose h3{font-size:17px;font-weight:700;margin:30px 0 10px}
.prose p{color:var(--dim);font-size:16px;line-height:1.72;margin:0 0 16px}
.prose ul,.prose ol{color:var(--dim);font-size:16px;line-height:1.72;padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--text);font-weight:650}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose code{font-family:var(--mono);font-size:13.5px;background:var(--line-soft);
  padding:2px 6px;border-radius:5px;color:var(--text)}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;overflow-x:auto;margin:0 0 18px}
.prose pre code{background:none;padding:0;font-size:13px;line-height:1.6}
.prose blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:0 10px 10px 0}
.prose blockquote p{margin:0;color:var(--text);font-size:15px}
.prose blockquote p + p{margin-top:10px}
.prose hr{border:0;border-top:1px solid var(--line);margin:38px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--dim)}
.prose th{color:var(--text);font-weight:650}

/* ---- kbd ---- */
kbd{font-family:var(--mono);font-size:12.5px;background:var(--panel);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:6px;padding:2px 7px;color:var(--text);white-space:nowrap}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin-top:38px}
.card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:26px 24px}
.card h3{margin:0 0 9px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.65}
.card .card-icon{display:block;width:26px;height:26px;margin-bottom:16px;color:var(--accent)}

/* ---- claim strip (the two things worth leading with) ---- */
.claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:44px}
/* Tinted with --brand, not --accent. In light mode --accent is a dark brown so
   the fill would read muddy; the claims want the fill light's own gold. */
.claim{border:1px solid color-mix(in srgb,var(--brand) 42%,var(--line));border-radius:14px;
  background:color-mix(in srgb,var(--brand) 9%,transparent);padding:24px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.claim h3{margin:0 0 8px;font-size:16px;font-weight:750}
.claim p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.65}
.claim code{font-family:var(--mono);font-size:12.5px;background:color-mix(in srgb,var(--brand) 20%,transparent);
  padding:2px 6px;border-radius:5px;color:var(--text);white-space:nowrap}
.claim em{color:var(--text);font-style:normal;font-weight:600}

/* ---- download / status card ---- */
.status-card{max-width:520px;margin:36px auto 0;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);padding:32px;text-align:center}
.status-card .mono{display:block;font-size:13px;color:var(--dim);margin-bottom:20px}
.status-card .btn-row{justify-content:center}
.note{max-width:520px;margin:20px auto 0;border:1px dashed color-mix(in srgb,var(--warn) 55%,var(--line));
  background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:12px;padding:14px 18px;
  font-size:13.5px;color:var(--dim);text-align:left;line-height:1.65}
.note strong{color:var(--text)}

/* ---- help layout ---- */
.help-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:52px;
  max-width:1000px;margin:0 auto;padding:44px 24px 96px}
.help-nav{position:sticky;top:88px;align-self:start}
.help-nav h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:0 0 14px;font-weight:500}
.help-nav ul{list-style:none;margin:0;padding:0}
.help-nav li{margin-bottom:2px}
.help-nav a{display:block;padding:7px 12px;border-radius:8px;text-decoration:none;
  font-size:14.5px;color:var(--dim);transition:background .15s,color .15s}
.help-nav a:hover{color:var(--text);background:var(--line-soft)}
.help-nav a[aria-current="page"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:600}
.help-body{min-width:0}
.help-body .prose{max-width:68ch;margin:0;padding:0}
.help-more{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:14px;color:var(--mute)}
.help-more a{color:var(--accent);text-decoration:none}
.help-more a:hover{text-decoration:underline}
@media (max-width:820px){
  .help-shell{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .help-nav{position:static}
  .help-nav ul{display:flex;flex-wrap:wrap;gap:6px}
  .help-nav li{margin:0}
  .help-nav a{border:1px solid var(--line);padding:6px 12px;font-size:13.5px}
}

/* ---- hero ---- */
.hero{padding:76px 0 40px;text-align:center;position:relative;overflow:hidden}
/* A warm wash behind the headline, in both themes. Low enough alpha to be
   almost subliminal on white and to read as spill from the band on black. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 42% at 50% 4%,color-mix(in srgb,var(--brand) 13%,transparent),transparent 70%),
    radial-gradient(70% 55% at 50% 46%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 72%)}
.hero > *{position:relative}
.hero h1{font-size:clamp(34px,6vw,60px);font-weight:800;letter-spacing:-.035em;margin:14px 0 18px;
  line-height:1.06;max-width:16ch;margin-inline:auto}
.hero .lede{max-width:56ch;margin:0 auto 30px;color:var(--dim);font-size:18px;line-height:1.62}
.hero .lede strong{color:var(--text)}
.hero .btn-row{justify-content:center}
.hero-meta{margin-top:16px;font-size:13px;color:var(--mute);font-family:var(--mono)}
.figure-note{color:var(--mute)}

/* ---- the screen figure: a Mac with the band lit around it ---- */
.stage{margin:56px auto 0;max-width:760px;padding:0 24px}
.screen{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:#08080a;border:1px solid var(--line);
  box-shadow:0 30px 90px -30px rgba(242,178,76,.45)}
.screen .desktop{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,#1d1b24 0%,#0c0b10 62%,#08080a 100%)}
/* The band is drawn near-WHITE with a warm cast, not saturated gold, because
   that is what the app actually ships: coreWhiteness 0.8, edgeSoftness 0.1 and
   the gold haze switched off (hazeWidth 0). A gold picture-frame would be the
   pre-Phase-6 look, and it reads as a border rather than as light. The gold
   survives as the glow spilling off the whole figure. */
.screen .band{position:absolute;inset:0;border-radius:18px;
  border:24px solid #fff0dc;filter:blur(2.5px);opacity:.96}
.screen .haze{position:absolute;inset:-6px;border-radius:24px;z-index:1;
  border:30px solid #f2b24c;filter:blur(16px);opacity:.45}
.screen .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:17%;height:4.2%;background:#08080a;border-radius:0 0 8px 8px;z-index:3}
.screen .viewport{position:absolute;top:8%;left:50%;transform:translateX(-50%);
  width:54%;height:48%;background:rgba(8,8,10,.92);border:1px solid rgba(255,255,255,.16);
  border-radius:11px;z-index:2;padding:18px 16px 0;overflow:hidden;text-align:left}
.screen .line{height:7px;border-radius:4px;background:rgba(245,243,240,.5);margin-bottom:11px}
.screen .line.dimmed{background:rgba(245,243,240,.17)}
.screen .readline{position:absolute;left:8px;right:8px;top:34%;height:2px;background:#ff5a4d;
  box-shadow:0 0 8px rgba(255,90,77,.7);border-radius:2px}
@media (max-width:560px){
  .screen .band{border-width:16px}
  .screen .viewport{width:70%;padding:12px 11px 0}
  .screen .line{height:5px;margin-bottom:8px}
}

/* ---- spec list ---- */
.specs{list-style:none;margin:34px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 30px;max-width:820px}
.specs li{color:var(--dim);font-size:14.5px;padding-left:24px;position:relative;line-height:1.6}
.specs li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:3px;background:var(--accent)}
.specs li strong{color:var(--text);font-weight:650}

/* ---- q&a ---- */
.qa{max-width:72ch;margin:0 auto}
.qa-item{border-bottom:1px solid var(--line);padding:24px 0}
.qa-item:first-child{border-top:1px solid var(--line)}
.qa-item h3{margin:0 0 10px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.qa-item p{margin:0 0 12px;color:var(--dim);font-size:15.5px;line-height:1.7}
.qa-item p:last-child{margin-bottom:0}
.qa-item a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.qa-item code{font-family:var(--mono);font-size:13.5px;background:var(--line-soft);
  padding:2px 6px;border-radius:5px;color:var(--text)}