/* Shared by the six guide pages, privacy, terms and feedback.
   Linked last in <head>, so it overrides the per-page inline rules. */

/* ---- links and focus: the brand green is too pale for the light theme ----
   #34d399 on #eef3f0 is about 1.7:1. #0c7455 is about 5:1 on the same background. */
:root{--focus:#34d399;--ease-out:cubic-bezier(0.23, 1, 0.32, 1)}
/* light: ink3 darkened to about 5.7:1 on the page, so captions and notes stay
   readable at 4.5:1 and above even over the tinted layer behind them */
:root[data-theme='light']{--brand:#0c7455;--focus:#0c7455;--ink3:#52635b}
/* the ring only: a focused control keeps its own shape */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* anchor jumps (#smartscreen, #tray, #reminders) stop clear of the sticky header */
html{scroll-padding-top:96px}

/* ---- headings: the same weight as the landing page's section headings ---- */
.pane h2{font-size:21px;font-weight:800;line-height:1.25;letter-spacing:-.02em}

/* ---- Manrope fallback: a local face scaled to Manrope's width and vertical metrics,
   so the swap when the web font arrives does not shift the layout ---- */
@font-face{font-family:'Manrope Fallback';src:local('Segoe UI');font-weight:200 599;
  size-adjust:101.8%;ascent-override:105.1%;descent-override:29.5%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Segoe UI Bold'),local('Segoe UI');font-weight:600 800;
  size-adjust:96.5%;ascent-override:110.9%;descent-override:31.1%;line-gap-override:0%}
body{font-family:'Manrope','Manrope Fallback','Segoe UI',system-ui,sans-serif}

/* ---- skip link ---- */
.skip{position:absolute;left:12px;top:-64px;z-index:200;padding:10px 16px;border-radius:12px;
  background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;text-decoration:none;
  transition:top .12s}
.skip:focus{top:12px}

/* ---- header: Download link, and the theme button stays on the right at phone width ---- */
.nav-dl{flex:none;display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
  background:linear-gradient(135deg,#34d399,#0ea5e9);color:#04211a;font-weight:700;font-size:14px;
  text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.45);
  transition:filter .14s var(--ease-out),transform .1s var(--ease-out)}
.nav-dl:hover{filter:brightness(1.07)}
.nav-dl:active{transform:scale(.96)}
@media(max-width:600px){
  .nav-links{display:none}
  .nav .theme-seg{margin-left:auto}
}
@media(max-width:430px){
  .nav-dl{padding:8px 14px}
}
/* The bar may grow: at a large text size or a narrow window its items wrap onto a
   second row instead of overflowing. Its corners are a fixed radius, so a 56px
   bar is still a pill and a taller one stays a rounded rectangle. */
header{border-radius:28px}
.nav{height:auto;min-height:56px;flex-wrap:wrap;row-gap:6px;padding-block:6px}

/* ---- page frame: <main> holds the pane, the footer sits outside the article ---- */
main.wrap{margin-bottom:30px}
.site-foot{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 16px 56px;
  border:0;color:var(--ink3);font-size:14px}
.site-foot .foot-row{border-top:1px solid var(--hr);padding-top:22px}
.site-foot p{margin:0 0 10px;color:var(--ink3)}
.site-foot a{color:var(--ink2);text-underline-offset:3px}
.site-foot a:hover{color:var(--ink)}
.foot-guides{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 14px}
.foot-guides strong{color:var(--ink);font-size:13.5px}

/* ---- screenshots ----
   The image files are added separately. width/height reserve the space, the
   background shows while it loads, and a figure whose image failed to load
   (the <img> removes itself) is hidden instead of leaving an empty box. */
.shot{margin:26px 0 8px}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1280/800;border-radius:14px;
  outline:1px solid oklch(1 0 0 / 0.1);outline-offset:-1px;background:var(--glass-hi)}
:root[data-theme='light'] .shot img{outline-color:oklch(0 0 0 / 0.1)}
.shot figcaption{margin-top:10px;font-size:13.5px;color:var(--ink3);max-width:70ch}
.shot:not(:has(img)){display:none}
.shot .th-light{display:none}
/* the dark image steps aside only when a light one exists, so a missing light
   file never leaves an empty figure */
:root[data-theme='light'] .shot:has(.th-light) .th-dark{display:none}
:root[data-theme='light'] .shot .th-light{display:block}

/* ---- download help card: on a phone it never takes more than ~45% of the screen
   (it scrolls inside), and its heading, which takes focus for keyboard users,
   needs no ring of its own ---- */
.win-dl-help-h:focus,.win-dl-help-h:focus-visible{outline:none}
@media (max-width:560px){
  .win-dl-help{max-height:45vh;max-height:45dvh;overscroll-behavior:contain}
}

/* ---- theme switch: a short colour fade. The class is on <html> only for ~300ms
   after a click on the control (never on first load), and only colours move:
   no backdrop-filter or box-shadow transitions ---- */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out)!important}

@media (prefers-reduced-motion:reduce){
  .skip,.nav-dl{transition:none}
  html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:none!important}
}

/* ---- more contrast: solid panels, readable edges, nothing translucent ---- */
@media (prefers-contrast:more){
  :root{--ink2:#d6e6de;--ink3:#bdd0c7;--glass-edge:rgba(255,255,255,.6);--hr:rgba(255,255,255,.45);--box-ink:#e3f2ea}
  :root[data-theme='light']{--ink2:#26362e;--ink3:#33453c;--glass-edge:rgba(20,40,32,.65);--hr:rgba(20,40,32,.5);--box-ink:#16352a}
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .aura{display:none}
  header,.pane{background:#101a15;border:1px solid var(--glass-edge)}
  :root[data-theme='light'] header,:root[data-theme='light'] .pane{background:#f6faf8}
  header::before,.pane::before{display:none}
  .win-dl-help{border:1px solid var(--glass-edge)}
  .msg,.kbd,code,.win-dl-key{border:1px solid var(--glass-edge)}
  select,textarea,input[type='text']{border-color:var(--ink3)}
  .shot img{outline-color:var(--glass-edge)}
  html.not-windows [data-win-download]{opacity:1;background:var(--bg);background-image:none;color:var(--ink2);
    border:1px dashed var(--ink2)}
}

/* ---- forced colours (Windows High Contrast): real borders instead of tints and
   gradients; the disabled download button differs by border style, not by dimming ---- */
@media (forced-colors:active){
  :focus-visible{outline:2px solid Highlight}
  header,.pane,.win-dl-help,.msg,.box{border:1px solid CanvasText}
  header::before,.pane::before{display:none}
  .nav-dl,.btn-dl,.btn-send{border:1px solid ButtonText;background:ButtonFace;background-image:none;color:ButtonText;box-shadow:none}
  .nav-dl:hover,.btn-dl:hover,.btn-send:hover:not(:disabled){border-color:Highlight}
  .btn-send:disabled{border-style:dashed;border-color:GrayText;color:GrayText;opacity:1}
  html.not-windows [data-win-download]{opacity:1;border:1px dashed GrayText;color:GrayText;box-shadow:none}
  select,textarea,input[type='text']{border:1px solid FieldText}
  .kbd,code,.win-dl-key{border:1px solid CanvasText}
  .shot img{outline:1px solid CanvasText;outline-offset:-1px}
}