/* ==========================================================================
   Master Camera — User Guide
   Standalone stylesheet (external so it passes the site CSP: style-src 'self').
   Palette, type, and radii mirror the main site (src/styles/variables.css):
   light by default, switching to dark with the system like the rest of the app.
   Flat surfaces, no glow — kept deliberately plain.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg:            #d0d5dd;
  --bg-lift:       #eef1f5;
  --card:          #e8ebf0;
  --card-hover:    #dfe3ea;
  --line:          #b8bec8;
  --line-strong:   #9aa1ac;

  --text:          #1a1d20;
  --muted:         #4a4d50;
  --muted-2:       #7a7d80;

  --brand:         #fc5e56;
  --brand-hover:   #e3554d;
  --brand-strong:  #d1443c;
  --brand-soft:    rgba(252, 94, 86, .10);
  --brand-line:    rgba(252, 94, 86, .30);

  --gold:          #a9720f;
  --gold-soft:     rgba(169, 114, 15, .12);
  --gold-line:     rgba(169, 114, 15, .32);

  --blue:          #2c6bd8;
  --blue-soft:     rgba(44, 107, 216, .10);
  --blue-line:     rgba(44, 107, 216, .30);

  --topbar-bg:     rgba(232, 235, 240, .82);
  --btn-shadow:    0 1px 2px rgba(16, 18, 20, .12), 0 1px 3px rgba(16, 18, 20, .07);

  --radius:        16px;
  --maxw:          1040px;
  --ease:          cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--brand-soft); color: var(--brand-strong); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Sticky top bar ------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 54px;
  display: flex;
  align-items: center;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  transition: color .2s var(--ease);
}
.topbar .back:hover { color: var(--brand); }
.topbar .back .chev {
  font-size: 19px;
  line-height: 1;
  color: var(--brand);
}
.topbar .label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- Shared type ---------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}

/* ---------- Buttons -------------------------------------------------------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-primary {
  color: #fff;
  background: var(--brand);
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost {
  color: var(--text);
  border-color: var(--line-strong);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Hero ----------------------------------------------------------- */
.hero {
  padding: 96px 0 72px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  margin: 0;
  font-size: clamp(36px, 6vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--text);
}
.hero .lede {
  max-width: 600px;
  margin: 20px auto 0;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.5;
  color: var(--muted);
}
.hero .cta-row { margin-top: 30px; justify-content: center; }

/* ---------- Sticky table of contents -------------------------------------- */
.toc {
  position: sticky;
  top: 54px;                       /* sits directly under the topbar */
  z-index: 40;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
}
.toc .wrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.toc .wrap::-webkit-scrollbar { display: none; }
.toc a {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--card);
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.toc a:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }

/* ---------- Doc section --------------------------------------------------- */
.doc {
  padding: 76px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 120px;        /* clears sticky topbar + toc on anchor jump */
}
.doc:first-of-type { border-top: none; }
.doc .wrap { max-width: 840px; }
.doc-head { margin: 0 0 8px; }
.doc-head h2 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
}
.doc .lead {
  margin: 14px 0 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 660px;
}
.doc h3 {
  margin: 42px 0 4px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.doc h3 + .lead { margin-top: 8px; font-size: 16px; }
.doc p { color: var(--muted); }
.doc p strong, .doc li strong { color: var(--text); font-weight: 600; }
.doc a[href^="#"], .doc-link { color: var(--brand-strong); font-weight: 550; }
.doc a[href^="#"]:hover, .doc-link:hover { text-decoration: underline; }
.doc em { color: var(--text); font-style: italic; }

/* ---------- Numbered steps ------------------------------------------------ */
ol.steps-list {
  counter-reset: step;
  list-style: none;
  margin: 18px 0 4px;
  padding: 0;
  display: grid;
  gap: 10px;
}
ol.steps-list > li {
  counter-increment: step;
  position: relative;
  padding: 15px 18px 15px 58px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
ol.steps-list > li::before {
  content: counter(step);
  position: absolute;
  left: 15px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
}

/* ---------- Callouts (note / permission / pro) ---------------------------- */
.callout {
  margin: 20px 0 4px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--bg-lift);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.callout strong { color: var(--text); }
.callout--note { border-left-color: var(--brand); }
.callout--perm { border-left-color: var(--blue); }
.callout--pro  { border-left-color: var(--gold); }

/* ---------- Premium tag --------------------------------------------------- */
.tag-pro {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  padding: 2px 8px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 7px;
}

/* ---------- Feature cards row (three-tabs intro grid) --------------------- */
.mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0 4px;
}
.mini-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.mini-card .ic {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  margin-bottom: 14px;
}
.mini-card h4 { margin: 0 0 5px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.mini-card p  { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- Tables -------------------------------------------------------- */
.table-wrap {
  margin: 20px 0 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
table.gtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.gtable th,
table.gtable td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
table.gtable tr:last-child td { border-bottom: none; }
table.gtable thead th {
  color: var(--muted-2);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--bg-lift);
}
table.gtable tbody td { color: var(--muted); }
table.gtable tbody td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
table.gtable td .tag-pro { margin-left: 6px; }

/* ---------- Screenshot-placeholder figures -------------------------------- */
figure.shot { margin: 22px 0 4px; }
figure.shot .ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
figure.shot .ph .icon { font-size: 25px; opacity: .8; }
figure.shot .ph .kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
}
figure.shot .ph .kind.full   { color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
figure.shot .ph .kind.crop   { color: var(--blue);  background: var(--blue-soft);  border: 1px solid var(--blue-line); }
figure.shot .ph .kind.detail { color: var(--gold);  background: var(--gold-soft);  border: 1px solid var(--gold-line); }
figure.shot .ph .what { font-weight: 650; color: var(--text); font-size: 15.5px; letter-spacing: -.01em; }
figure.shot .ph .spec { color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 460px; }
figure.shot.full   .ph { min-height: 300px; max-width: 260px; margin: 0 auto; }
figure.shot.crop   .ph { min-height: 140px; }
figure.shot.detail .ph { min-height: 96px; }

/* ---------- Real screenshots (replace the placeholders above) -------------
   Each figure kind gets its own cap so a crop of one small control never
   renders larger than the phone screen it was taken from. Widths are chosen
   so the UI inside each shot reads at roughly its real on-device size. */
figure.shot .shot-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--card);
}
/* Whole phone screens */
figure.shot.full .shot-img {
  max-width: 260px;
  border-radius: 28px;
  box-shadow: 0 10px 28px rgba(16, 18, 20, .16);
}
/* A cropped region of a screen (tray, action bar, toolbar) */
figure.shot.crop .shot-img {
  max-width: 560px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(16, 18, 20, .08);
}
/* A single small control, close up (tab bar, mode toggle) */
figure.shot.detail .shot-img {
  max-width: 420px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 18, 20, .08);
}
/* Keep captions tied to the width of the shot they describe */
figure.shot.crop   figcaption { max-width: 560px; margin-left: auto; margin-right: auto; }
figure.shot.detail figcaption { max-width: 420px; margin-left: auto; margin-right: auto; }
figure.shot figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted-2);
}
figure.shot.full figcaption { max-width: 260px; margin-left: auto; margin-right: auto; }
.shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shot-row figure.shot { margin-top: 0; }
.shot-row figure.shot.full .ph { max-width: none; }
/* Two-up rows: fill the column instead of the standalone caps above.
   Declared last so it beats the equal-specificity per-kind rules. */
.shot-row figure.shot .shot-img,
.shot-row figure.shot figcaption { max-width: 100%; }

/* ---------- Footer --------------------------------------------------------- */
.foot {
  text-align: center;
  padding: 84px 0 96px;
  border-top: 1px solid var(--line);
}
.foot .cta-title {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.14;
}
.foot .f-sub {
  margin: 14px auto 0;
  max-width: 460px;
  font-size: 17px;
  color: var(--muted);
}
.foot .cta-row { margin-top: 26px; justify-content: center; }
.foot .back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 32px;
  font-size: 14.5px;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.foot .back-link:hover { color: var(--brand); }
.support-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  padding: 20px 32px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
}
.support-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}
.support-email {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--brand-strong);
}
.support-email:hover { color: var(--brand-hover); text-decoration: underline; }

.foot .kw {
  max-width: 780px;
  margin: 48px auto 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted-2);
}

/* ---------- Responsive ----------------------------------------------------- */
@media (max-width: 820px) {
  .doc { padding: 60px 0; }
  .hero { padding: 76px 0 60px; }
}
@media (max-width: 700px) {
  .mini-cards { grid-template-columns: 1fr; }
  .shot-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .btn, .toc a, .topbar .back, .foot .back-link { transition: none; }
}