/* Typace — shared stylesheet for /guides/ content pages and /support/.
   Every page links it as `/assets/guide.css?v=N`, and that N must be bumped in every one of
   them whenever this file changes. firebase.json serves *.css as
   `max-age=31536000, immutable` and the filename carries no content hash, so without the bump
   a returning visitor keeps last year's stylesheet: the two-link nav shipped against a cached
   six-link one and read as the change never having happened. The HTML itself is max-age=3600
   and catches up on its own. */
:root{
  /* Light is the default; assets/theme.js sets data-theme="dark" on <html> before first paint
     when the visitor has picked dark. Same palette and token names as index.html's inline
     style — both are the app's brand theme, ThemePalette.kt's Violet ("Plum"). A hex written
     into a rule below is one theme's colour leaking into the other; add a token instead.
     --violet is the plum fill; --violet-light is the accent *ink*: plum on light, amber on dark.
     --brand-rgb / --accent-rgb are those two as channels, for the translucent tints. */
  color-scheme:light;
  --violet:#33204D;
  --violet-light:#5A3F80;
  --brand-rgb:90 63 128;
  --accent-rgb:90 63 128;
  --brand-end:#FFB547;
  --amber-container:#FFE9C7;
  --on-amber-container:#4A2C00;
  --icon-tile:#FFDFA3;
  --chip-bg:#FFD27A;
  --chip-ink:#2B1B40;
  --bg:#F6F3F9;
  --surface:#FFFFFF;
  --surface-2:#F3EFF8;
  --text:#1C1230;
  --text-dim:#5A4F6B;
  --text-faint:#665B78;
  --outline:#E4DDEE;
  --accent-fill:linear-gradient(100deg,#33204D,#5A3F80);
  --on-accent:#FFFFFF;
  /* the keyboard still in assets/mock.css */
  --mock-bg:#ECE8F2;
  --mock-field:#FFFFFF;
  --key-bg:#FFFFFF;
  --key-ink:#1C1230;
  --key-shadow:0 1px 0 rgba(28,18,48,.16);
  --tool-bg:#FFFFFF;
  --enhance-grad:linear-gradient(135deg,#33204D,#5A3F80);
}
/* Dark — the app's dark Violet: the icon's plum and amber. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --violet:#4A3470;
  --violet-light:#FFB547;
  --brand-rgb:122 92 170;
  --accent-rgb:255 181 71;
  --brand-end:#FFE2A8;
  --amber-container:#3D2B57;
  --on-amber-container:#FFE2B3;
  --icon-tile:#34274C;
  --chip-bg:#4E3D70;
  --chip-ink:#F6F1FB;
  --bg:#110A1E;
  --surface:#231936;
  --surface-2:#2E2244;
  --text:#F2EDF8;
  --text-dim:#CBBFDB;
  --text-faint:#A898BD;
  --outline:#372A4F;
  --accent-fill:linear-gradient(100deg,#FFB547,#FFCC80);
  --on-accent:#2B1B40;
  --mock-bg:#0E0E12;
  --mock-field:#2B2140;
  --key-bg:#3A2D52;
  --key-ink:#F6F1FB;
  --key-shadow:none;
  --tool-bg:#2B2140;
  --enhance-grad:linear-gradient(135deg,#FFB547,#FFCC80);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.7;overflow-x:clip;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--violet-light);text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
nav{
  position:sticky;top:0;z-index:50;
  /* Opaque, never frosted: iOS 26 Safari tints its status bar and Smart App Banner from an
     opaque sticky bar and re-samples it on a theme switch; over a translucent one it kept the
     load-time colour. See index.html's nav. */
  background:var(--bg);
  border-bottom:1px solid var(--outline);
}
/* The 24px gap is a floor on the space between the wordmark and the first link. Without it
   space-between simply collapses as the row fills, and the brand ended up ~10px from
   "Features" at around 800px — the scroller is what should absorb the shortfall, not that
   gap. It drops to 12px below 640px, where the wordmark is hidden anyway. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
/* Nothing in this bar may wrap or be squeezed: the brand held its full width and pushed the
   CTA off the right edge, where body's overflow-x:clip hid it outright — on a phone the
   "Get the app" button was simply not on the page. The wordmark is what gives way instead. */
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;color:var(--text);flex-shrink:0;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;border-radius:9px;flex-shrink:0}
.nav-links{display:flex;gap:22px;align-items:center;min-width:0}
/* Two links, so the row only outgrows the bar on a narrow phone — but the scroller stays at
   every width regardless: a flex item with min-width:0 and no overflow just spills its
   children, and a large font scale reaches the same overflow well above that. The gap is a
   little wider than the homepage's 22px, which reads as one cramped pair once there are only
   two items — but not much: at 36px they stopped reading as one menu at all. The same three
   values are written out inline in privacy-policy.html; keep them in step. */
.nav-scroll{
  display:flex;gap:28px;align-items:center;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-links a{color:var(--text-dim);font-size:.92rem;white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-cta{background:var(--violet);color:#fff !important;padding:8px 18px;border-radius:99px;font-weight:600;white-space:nowrap;flex-shrink:0;transition:background .2s}
.nav-cta:hover{background:var(--violet-light);text-decoration:none}
/* Light/dark switch (assets/theme.js). Outside the scroller, beside the CTA, so it never
   scrolls away; it shows the theme a tap would switch *to*. Same rules as index.html's. */
.theme-toggle{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--surface);border:1px solid var(--outline);color:var(--text-dim);
  transition:color .2s,border-color .2s;
}
.theme-toggle:hover{color:var(--text);border-color:var(--violet-light)}
.theme-toggle:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
.theme-toggle .i-sun,[data-theme="dark"] .theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
@media(max-width:860px){.nav-scroll{gap:24px}.nav-links{gap:16px}}
/* 660, not the 640 it was: the theme switch made the row 58px wider, and with the wordmark
   still up the two links overflowed between 641 and 647px with no fade to say so. Measured. */
@media(max-width:660px){
  /* The links used to be hidden outright below this width, which left a phone visitor on a
     guide with no way to reach any other one. They scroll now, exactly as index.html's do;
     the CTA is outside the scroller so it always stays put. The scroller itself is declared
     above; its edge fade lives below, at the width the row actually starts overflowing. */
  .brand .brand-name{display:none}
  .nav-inner{gap:12px}
  .nav-scroll{gap:22px}
  .nav-cta{padding:8px 14px;font-size:.85rem}
}
/* The edge fade is the only thing telling the reader there is more to the right, and it
   applies whether or not there is — so it may only be up at widths where the row actually
   overflows. Measured, not chosen: this bar carries two links, the theme switch and the CTA,
   which fit at every width down to 454px and overflow below it (404px before the switch). It is
   deliberately *not* index.html's number — that bar still has six links and comes up short at
   940px. Re-measure whenever a link or button is added, removed or renamed. The padding is
   what the mask eats instead of the first link, and it is the fade's own width (10/14px) plus
   a little air. */
@media(max-width:400px){.nav-inner{padding-left:16px;padding-right:16px}}
@media(max-width:453px){
  .nav-scroll{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 14px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 14px),transparent);
    padding-left:14px;padding-right:18px;
    scroll-padding-left:14px;scroll-padding-right:18px;
  }
}

/* breadcrumb */
.crumbs{font-size:.85rem;color:var(--text-faint);padding:26px 0 0}
.crumbs a{color:var(--text-faint)}
.crumbs a:hover{color:var(--text-dim)}
.crumbs span{margin:0 8px}

/* article */
article{padding:20px 0 56px}
.eyebrow{color:var(--violet-light);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin:26px 0 14px}
article h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.lede{font-size:1.2rem;color:var(--text-dim);margin-bottom:14px}
.meta{font-size:.85rem;color:var(--text-faint);margin-bottom:8px}
article h2{font-size:clamp(1.45rem,3.5vw,1.9rem);font-weight:800;letter-spacing:-.01em;margin:44px 0 14px;scroll-margin-top:80px}
article h3{font-size:1.2rem;font-weight:700;margin:28px 0 10px}
article p{color:var(--text-dim);margin-bottom:18px}
article ul,article ol{color:var(--text-dim);margin:0 0 18px 1.2rem}
article li{margin-bottom:9px}
article strong{color:var(--text);font-weight:600}
article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:rgb(var(--brand-rgb) / .14);border:1px solid rgb(var(--accent-rgb) / .3);
  color:var(--violet-light);padding:2px 7px;border-radius:6px;
}
article hr{border:none;border-top:1px solid var(--outline);margin:44px 0}

/* table of contents */
.toc{background:var(--surface);border:1px solid var(--outline);border-radius:14px;padding:20px 24px;margin:30px 0}
.toc strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:12px}
.toc ol{margin:0 0 0 1.1rem}
.toc li{margin-bottom:7px}

/* callout / key-takeaway box */
.note{
  background:linear-gradient(160deg,rgb(var(--brand-rgb) / .14),var(--surface) 70%);
  border:1px solid var(--outline);border-left:3px solid var(--violet-light);
  border-radius:12px;padding:18px 22px;margin:24px 0;
}
.note p:last-child{margin-bottom:0}
.note .tag{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--violet-light);margin-bottom:8px}

/* before / after prompt example */
.example{border:1px solid var(--outline);border-radius:16px;overflow:hidden;margin:26px 0;background:var(--surface)}
.example .row{padding:18px 22px}
.example .row+.row{border-top:1px solid var(--outline)}
.example .row.after{background:linear-gradient(160deg,rgb(var(--brand-rgb) / .12),transparent)}
.example .lbl{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:4px 12px;border-radius:99px;margin-bottom:12px}
.example .lbl.before{background:var(--surface-2);color:var(--text-faint)}
.example .lbl.after{background:var(--accent-fill);color:var(--on-accent)}
.example .txt{color:var(--text-dim);font-size:.97rem;line-height:1.7}
.example .row.before .txt{font-style:italic;color:var(--text-faint)}
.example .txt strong{color:var(--text)}

/* setup steps — /support/ only.
   The install steps are the one thing on the site that has to survive being read one-handed,
   on the phone being set up, halfway through a Settings menu. A plain <ol> put the step number
   in the margin at body size and ran the action and the menu path together in one line; these
   give each step its own card, its numeral and a bolded action, and the Settings path is set
   in <code> so it reads as something to follow rather than as prose. */
.setup{counter-reset:step;list-style:none;padding:0;margin:0 0 20px}
.setup li{
  counter-increment:step;position:relative;
  background:var(--surface);border:1px solid var(--outline);border-radius:14px;
  padding:18px 20px 18px 62px;margin:0 0 12px;color:var(--text-dim);
}
.setup li::before{
  content:counter(step);position:absolute;left:18px;top:16px;
  width:28px;height:28px;border-radius:50%;
  background:rgb(var(--brand-rgb) / .24);color:var(--violet-light);
  font-weight:700;font-size:.95rem;line-height:28px;text-align:center;
}
.setup li strong:first-child{display:block;color:var(--text);margin-bottom:5px}
.setup code{font-size:.86em;line-height:1.9;white-space:normal}
@media(max-width:520px){.setup li{padding:16px 16px 16px 54px}.setup li::before{left:14px}}

/* cta band */
.cta-band{
  background:linear-gradient(140deg,rgb(var(--brand-rgb) / .22),rgb(var(--accent-rgb) / .06));
  border:1px solid var(--outline);border-radius:22px;padding:40px 32px;text-align:center;margin:48px 0 12px;
}
.cta-band h2{margin:0 0 10px;font-size:1.5rem}
.cta-band p{color:var(--text-dim);margin-bottom:22px}
.stores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.store-btn{
  display:flex;align-items:center;gap:12px;width:210px;box-sizing:border-box;
  background:var(--surface);border:1px solid var(--outline);border-radius:14px;padding:10px 16px;color:var(--text);
  transition:transform .15s,border-color .2s,background .2s;
}
.store-btn:hover{transform:translateY(-2px);border-color:var(--violet-light);background:var(--surface-2);text-decoration:none}
.store-btn svg{flex-shrink:0}
.store-btn .lines{text-align:left;line-height:1.2}
.store-btn .small{font-size:.68rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em}
.store-btn .big{font-size:1.05rem;font-weight:700}

/* related links */
.related{margin:40px 0 8px}
.related h2{margin-bottom:16px}
/* auto-fill, not auto-fit: with auto-fit a section of three cards collapses the spare
   track and stretches them, so the hub drew three wide cards under one heading and four
   narrow ones under the next. The column rhythm should be the same down the page. */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.related-card{background:var(--surface);border:1px solid var(--outline);border-radius:14px;padding:20px 22px;transition:border-color .2s,transform .15s}
.related-card:hover{border-color:rgb(var(--accent-rgb) / .4);transform:translateY(-3px);text-decoration:none}
.related-card h3{font-size:1.02rem;margin-bottom:6px;color:var(--violet-light)}
.related-card p{font-size:.9rem;color:var(--text-dim);margin:0}

/* hub index */
.hub-hero{text-align:center;padding:30px 0 8px}
.hub-hero h1{font-size:clamp(2rem,5vw,3rem)}
.pillar{margin:44px 0}
.pillar>h2{font-size:1.5rem;margin-bottom:6px}
.pillar>p{color:var(--text-dim);margin-bottom:20px}

/* footer */
footer{border-top:1px solid var(--outline);padding:36px 0;color:var(--text-faint);font-size:.88rem;margin-top:40px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:var(--text-faint)}
.foot-links a:hover{color:var(--text-dim)}
.foot-social{display:flex;gap:10px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--outline);color:var(--text-faint);transition:color .2s,border-color .2s}
.foot-social a:hover{color:var(--text-dim);border-color:var(--text-faint)}
/* On a phone the three groups stack, centred, copyright last. Left in one wrapping row they
   landed on ragged lines, and each link broke across two of its own. */
.foot-links a{white-space:nowrap}
@media(max-width:640px){
  .foot{flex-direction:column;justify-content:center;text-align:center;gap:20px}
  .foot-links{justify-content:center;gap:12px 24px}
  .foot>span{order:1}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}