/*
  Lumen public pages - shared styling (blog, help, changelog, about, legal).
  Direction A "Slate": cool neutral ground, gold accent, Cormorant Garamond
  for display/editorial and Geist for all UI/body text.
  Pulls tokens from design-system.css. Keep it calm: flat ground, restrained
  radii, no glassmorphism.
*/

*{box-sizing:border-box}

/* Always reserve room for the scrollbar. A short page has no scrollbar and a
   long one does, and without this every centred page jumps sideways by the
   width of that bar the moment you click through. */
html{scrollbar-gutter:stable}

/* thin, visible keyboard focus ring (only shows for keyboard users) */
:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-radius:3px}

/* respect reduced-motion: only affects visitors who ask for it */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
body > main{flex:1 0 auto}
body > .site-footer{flex-shrink:0}
a{color:inherit;text-decoration:none}

.page{max-width:1280px;margin:0 auto;padding:0 56px}

/* ---- header ---- */
.site-header{border-bottom:1px solid var(--border)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{font-family:var(--serif);font-size:var(--fs-section);font-weight:var(--w-med);color:var(--text-bright);letter-spacing:.01em}
.site-nav{display:flex;gap:32px;font-size:var(--fs-sm);color:var(--text)}
.site-nav a{position:relative}
.site-nav a:hover{color:var(--gold)}
.site-nav a[aria-current]{color:var(--gold)}
.blog-nav-badge{position:absolute;top:-8px;right:-13px;display:grid;min-width:16px;height:16px;place-items:center;
  padding:0 4px;border-radius:999px;background:#E05252;color:white;font-size:var(--fs-ui-3xs);font-weight:var(--w-bold);
  line-height:1;box-shadow:0 0 0 2px var(--bg)}
.blog-nav-badge[hidden]{display:none}
/* On a narrow phone the name and the four links no longer fit on one line, so
   the bar grows a row instead of pushing links off the edge. */
@media (max-width:640px){
  .site-header .bar{height:auto;flex-wrap:wrap;gap:4px 20px;padding-top:14px;padding-bottom:14px}
  .brand{font-size:var(--fs-card)}
  .site-nav{width:100%;flex-wrap:wrap;gap:8px 20px}
}

/* ---- page head ----
   COLOUR SYSTEM: gold = top titles (page + card titles); blue = smaller
   titles, subheads, labels, numbers. Links gold. Body stays neutral. */
.eyebrow{font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--a-blue);font-weight:var(--w-med)}
.page-hero{padding:66px 0 34px}
.page-title{font-family:var(--serif);font-weight:var(--w-normal);font-size:var(--fs-display);line-height:var(--lh-tight);margin:14px 0 0;color:var(--text-bright);letter-spacing:-.005em}
.page-title em{font-family:inherit;font-style:italic;font-weight:var(--w-normal);color:var(--gold)}
.lede{margin:20px 0 0;font-size:var(--fs-lead);color:var(--text-muted);max-width:560px;line-height:1.55}

.section-label{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--a-blue);font-weight:var(--w-med);margin:56px 0 18px}

/* ---- search (visual placeholder for now) ---- */
.searchbar{display:flex;align-items:center;gap:12px;margin:34px 0 0;max-width:560px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:7px 16px}
.searchbar svg{flex:none;color:var(--text-muted)}
.searchbar .ph{color:var(--text-muted);font-size:var(--fs-sm)}
.searchbar .kbd{margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted);border:1px solid var(--border);border-radius:6px;padding:3px 8px}

/* ---- list rows (popular articles, post lists) ---- */
.row-list{display:flex;flex-direction:column;gap:2px}
.row{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--border)}
.row:first-child{border-top:1px solid var(--border)}
.row .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.row .row-title{color:var(--text-bright);font-size:var(--fs-body)}
.row .arw{margin-left:auto;color:var(--text-muted)}
.row:hover .row-title{color:var(--gold)}

/* ---- cards ---- */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:28px 28px 24px}
.card-title{display:inline-block}
.card-title h3{font-family:var(--serif);font-weight:var(--w-med);font-size:var(--fs-card);margin:0 0 4px;color:var(--gold);transition:color .15s}
.card-title:hover h3{color:var(--gold-deep)}
.card .card-count{font-size:var(--fs-sm);color:var(--text-muted)}
.card .card-sub{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0}
/* the article links are the point of the card, so they read near-white; only
   the "3 articles" count stays grey */
.card .card-sub a{display:block;font-size:var(--fs-sm);color:var(--text-bright);padding:4px 10px;margin:0 -10px;border-radius:var(--r-sm);transition:color .15s,background .15s}
.card .card-sub a:hover{color:var(--a-blue);background:var(--surface-2)}

/*
  ---- TYPE SYSTEM ----
  Cormorant Garamond is used for display and editorial type.
  Geist is used for UI and body type.
  Weights: 450 normal, 500 medium, 600 semibold, 700 bold.
  Sizes use the existing rem-based --fs-* tokens.
*/
.prose{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--w-body);color:var(--text);max-width:var(--measure)}
.prose h2{font-family:var(--serif);font-weight:var(--w-display);font-size:var(--fs-h2);line-height:1.15;color:var(--a-blue);margin:48px 0 14px}
.prose h2:first-child{margin-top:8px}
.prose h3{font-family:var(--sans);font-weight:var(--w-semi);font-size:var(--fs-h3);color:var(--a-blue);text-transform:uppercase;letter-spacing:.08em;margin:30px 0 8px}
.prose p{margin:0 0 16px;font-weight:var(--w-body)}
.prose a{color:var(--a-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--a-blue)}
.prose a:hover{color:var(--a-blue);text-decoration-color:currentColor}
.prose strong{color:var(--text-bright);font-weight:var(--w-semi)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin:0 0 7px}
.prose img{max-width:100%;height:auto;border-radius:var(--r-md);margin:24px 0}

/* Enlarged images in blog posts. Keep this global so native dialog styling
   cannot win when article content is rendered from Markdown. */
.blog-image-view{
  position:fixed!important;inset:0!important;box-sizing:border-box!important;
  width:100dvw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:40px!important;border:0!important;background:transparent!important;
  color:var(--text)!important;overflow:hidden!important;z-index:1000
}
.blog-image-view:not([open]){display:none!important}
.blog-image-view[open]{display:flex!important;align-items:center;justify-content:center}
.blog-image-view::backdrop{background:rgba(9,10,12,.92)}
.blog-image-view img{
  display:block;max-width:calc(100dvw - 80px);max-height:calc(100dvh - 80px);
  width:auto;height:auto;margin:0;border:1px solid var(--border-strong);
  border-radius:var(--r-md);background:var(--surface)
}
.blog-image-close{
  position:fixed!important;top:20px!important;right:20px!important;left:auto!important;bottom:auto!important;
  z-index:1;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);color:var(--text);cursor:pointer
}
.blog-image-close:hover{border-color:var(--gold);color:var(--gold)}
.prose blockquote{margin:28px 0;padding:24px 28px;background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:var(--r-md);
  font-family:var(--serif);font-style:italic;font-size:var(--fs-card);line-height:1.4;color:var(--text-bright)}
.prose blockquote p{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:var(--fs-sm);
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.prose th,.prose td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:11px 14px;text-align:left;vertical-align:top}
.prose th:last-child,.prose td:last-child{border-right:none}
.prose tbody tr:last-child td{border-bottom:none}
/* header row reads as a label, not as another line of body copy */
.prose th{color:var(--text-muted);font-weight:var(--w-med);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.14em;padding-top:13px;padding-bottom:13px;
  background:var(--a-purple-wash);border-bottom:1px solid rgba(155,130,230,.45)}
.prose tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.prose td:first-child{color:var(--text-bright);font-weight:var(--w-med)}
.prose td:nth-child(2){color:var(--a-blue);font-weight:var(--w-semi);white-space:nowrap}
.prose code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-size:.9em}
@media (max-width:640px){
  .prose table{display:block;width:100%;border:0;border-radius:0;overflow:visible}
  .prose thead{display:none}
  .prose tbody,.prose tr,.prose td{display:block;width:100%}
  .prose tr{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin:0 0 12px;background:var(--surface)}
  .prose tbody tr:nth-child(even){background:var(--surface)}
  .prose td{border-right:none;padding:10px 12px}
  .prose td:first-child{background:var(--a-purple-wash);border-bottom:1px solid rgba(155,130,230,.45)}
  .prose td:nth-child(2),.prose td:nth-child(3){white-space:normal}
  .prose table.comparison-table td:nth-child(2)::before{content:"Lumen Tool";display:block;margin-bottom:2px;color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--w-med);text-transform:uppercase;letter-spacing:.12em}
  .prose table.comparison-table td:nth-child(3)::before{content:"set.a.light 3D";display:block;margin-bottom:2px;color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--w-med);text-transform:uppercase;letter-spacing:.12em}
}

/* ---- help shell (sidebar + content) ---- */
/* padding-top ONLY - .page owns the side padding, and a shorthand here would
   wipe it out and make help pages wider than every other page */
.help-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;padding-top:44px}
.help-shell--article{grid-template-columns:250px minmax(0,1fr) 200px}
.help-shell--category{grid-template-columns:250px minmax(0,1fr) 200px}
.help-shell .help-sidebar{position:sticky;top:32px}
.help-content{min-width:0}
.help-toc__section{position:sticky;top:32px}
.help-toc__section{padding-top:28px}
.help-toc__label{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--a-blue);font-weight:var(--w-med);margin:0 0 14px}
.help-toc nav{display:flex;flex-direction:column;gap:10px}
.help-toc a{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.4}
.help-toc a:hover{color:var(--gold)}
@media (max-width:1080px){.help-toc{display:none}.help-side-tools{display:none}.help-shell--article,.help-shell--category{grid-template-columns:250px minmax(0,1fr)}}
@media (max-width:860px){
  .help-shell{grid-template-columns:1fr;gap:0}
  .help-shell .help-sidebar{position:static;margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border)}
}

/* ---- legal pages (summary sidebar + numbered sections) ---- */
.legal-shell{display:grid;grid-template-columns:300px minmax(0,1fr);gap:72px;align-items:start;padding:8px 0 0}
.legal-summary{position:sticky;top:32px}
.legal-content{max-width:var(--measure)}
.legal-summary__card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 20px}
.legal-row{padding:16px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.legal-row:last-child{border-bottom:none}
.legal-row__label{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--a-blue);font-weight:var(--w-med)}
.legal-row__text{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.legal-content{min-width:0}
.legal-intro{font-size:var(--fs-lead);color:var(--text);line-height:1.55;margin:0 0 8px}
.legal-settings-mount{margin:0 0 8px}
.legal-section{padding:30px 0;border-top:1px solid var(--border)}
.legal-section:first-of-type{border-top:none;padding-top:8px}
.legal-section h2{display:flex;align-items:baseline;gap:12px;font-family:var(--sans);font-weight:var(--w-semi);
  font-size:var(--fs-h3);color:var(--text-bright);margin:0 0 12px}
.legal-num{font-family:var(--serif);font-style:italic;font-weight:var(--w-normal);font-size:var(--fs-ui-title);color:var(--a-blue);
  line-height:1;flex:none;min-width:28px}
.legal-section p{font-size:var(--fs-sm);line-height:1.7;color:var(--text);margin:0 0 12px}
.legal-section p:last-child{margin-bottom:0}
@media (max-width:860px){
  .legal-shell{grid-template-columns:1fr;gap:8px}
  .legal-summary{position:static;margin-bottom:28px}
}

/* ---- analytics settings ---- */
.lcb-btn{font-family:var(--sans);font-size:var(--fs-ui-sm);font-weight:var(--w-med);line-height:1.2;padding:6px 12px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.lcb-btn.primary{background:var(--gold);color:#1a1712}
.lcb-btn.primary:hover{background:var(--gold-deep)}
/* dark-theme default (used by the settings block on the privacy page) */
.lcb-btn.ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.lcb-btn.ghost:hover{border-color:var(--text-muted);color:var(--text-bright)}
.lcb-btn:disabled{opacity:.45;cursor:default}

.lcs{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:20px 22px;margin:24px 0}
.lcs-state{display:flex;flex-direction:column;gap:2px}
.lcs-state strong{color:var(--text-bright);font-size:var(--fs-body)}
.lcs-state span{color:var(--text-muted);font-size:var(--fs-sm)}
.lcs-actions{display:flex;gap:10px}

/* ---- small helpers ---- */
.backlink{font-size:var(--fs-sm);color:var(--text-muted)}
.backlink:hover{color:var(--text-bright)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--text-bright)}
.crumbs__sep{color:var(--text-muted);opacity:.5}
.crumbs__current{color:var(--text-bright)}
.meta-line{color:var(--text-muted);font-size:var(--fs-sm)}

@media (max-width:720px){
  .page{padding:0 22px}
  .page-title{font-size:var(--fs-hero-mobile)}
  .card-grid{grid-template-columns:1fr}
}
/* ---- sign-in buttons ----
   The two roads on the sign-in card: getting a link, or paying and starting an
   account. Side by side, each as wide as its own words. */
.signin-actions{display:flex;justify-content:center;gap:10px}
/* Both buttons are built from the same box, down to the line around them, so
   they end up exactly the same height. */
.signin-actions .signin-submit,
.signin-actions .signin-signup{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:var(--w-med);line-height:1.2;
  border-radius:var(--r-sm);padding:10px 20px;border:1px solid transparent;cursor:pointer;
  min-width:150px}
.signin-actions .signin-signup{color:var(--a-amber);background:transparent;border-color:var(--a-amber);
  transition:background .15s,color .15s}
.signin-actions .signin-signup:hover{background:var(--a-amber);color:#1a1712}

/* Room for two lines of answer is kept free from the start, so the sign-in
   card does not jump the moment the message appears. */
.signin-card .signin-status{min-height:45px;line-height:1.6;text-align:center}