/* yogo-organizer.com — the Calm skin's tokens (src/ui/ui.css), on a page.
   Light only: the store images are light and sit on this ground, and the
   extension itself ships light by default. Crisp corners, system sans,
   sentence case, one filled button per view.

   The three feature sections double as the store's screenshots: with
   ?slide=N (html.slide) the Nth section alone is laid out on a fixed
   1280×800 canvas and photographed by design/store/promo/compose.mjs. Each
   section's "stage" holds the real windows at slide coordinates; on the
   page the stage scales to its column, on the canvas it is 1:1. */
:root {
  --paper:#F4F5F7; --sheet:#FFFFFF; --sheet-2:#EDEFF2; --sheet-3:#E3E6EA;
  --ink:#1A1F29; --ink-2:#4B5563; --ink-3:#5F6977;
  --rule:#DDE1E6; --rule-hard:#7C8695;
  --stamp:#2757C7; --stamp-bg:#E7EEFB; --stamp-ink:#FFFFFF;
  --purge:#B8311F; --hold:#217A48; --hold-bg:#E3F3E9; --mark-bg:#FBF0D6;
  --shadow-lift:0 2px 6px rgba(20,26,38,.10), 0 16px 36px -14px rgba(20,26,38,.30);
  --r-sm:3px; --r-md:4px; --r-lg:6px;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme:light;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--stamp); text-decoration:none; }
a:hover { text-decoration:underline; }
h1, h2, h3 { margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
h1 { font-size:clamp(34px, 4.6vw, 50px); }
h2 { font-size:clamp(28px, 3.6vw, 40px); }
h3 { font-size:20px; letter-spacing:-.01em; }
p { margin:0; }
.lead { font-size:clamp(17px, 1.5vw, 19px); color:var(--ink-2); line-height:1.5; }
.muted { color:var(--ink-3); }
.accent { color:var(--stamp); }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* Buttons: the same box as the extension's */
.btn {
  font-family:var(--sans); font-size:15px; font-weight:500;
  border:1px solid var(--rule-hard); background:var(--sheet); color:var(--ink);
  padding:0 16px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border-radius:var(--r-sm); white-space:nowrap; text-decoration:none;
}
.btn:hover { background:var(--sheet-2); text-decoration:none; }
.btn.key { background:var(--stamp); border-color:var(--stamp); color:var(--stamp-ink); }
.btn.key:hover { background:var(--stamp); filter:brightness(1.08); }
.btn.big { min-height:48px; padding:0 22px; font-size:17px; }

/* Header / footer */
.top { position:sticky; top:0; z-index:10; background:rgba(244,245,247,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
.top .wrap { min-height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); font-size:16px; }
.brand img { border-radius:var(--r-lg); }
.brand:hover { text-decoration:none; }
.nav { display:flex; align-items:center; gap:22px; }
.nav a { color:var(--ink-2); font-size:15px; }
.nav a[aria-current] { color:var(--ink); font-weight:500; }
.nav a.btn { color:var(--stamp-ink); }
.foot { border-top:1px solid var(--rule); margin-top:96px; padding:32px 0 48px; font-size:14px; color:var(--ink-3); }
.foot .nav a { font-size:14px; }

/* ---- Feature sections = slides ------------------------------------------ */
.feature { padding:64px 0; }
.feature.hero { padding-top:72px; }
.feature .grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:40px; align-items:center; }
.feature .copy { display:flex; flex-direction:column; gap:18px; }
.feature .copy p { color:var(--ink-2); }
.feature .actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.feature .fine { font-size:14px; color:var(--ink-3); }
.eyebrow { font-size:14px; font-weight:600; color:var(--stamp); }

/* The stage: 760×712 slide units (the canvas right of the copy column,
   x 520→1280, y 88→800). On the page it scales to its column; the windows
   keep their slide positions. Clipped at the right edge as on the slide. */
.stage-wrap { position:relative; aspect-ratio:760 / 712; overflow:hidden; }
/* --k is the wrap's width over 760, set by the small script in index.html
   (a ResizeObserver); dividing lengths inside calc() is too new to lean on. */
.stage { position:absolute; left:0; top:0; width:760px; height:712px; transform-origin:0 0; transform:scale(var(--k, 1)); }
.win { position:absolute; background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r-lg);
       box-shadow:var(--shadow-lift); overflow:hidden; }
.win img { display:block; max-width:none; }
.front { z-index:2; }

/* A minimal browser around the live playlist page (section 1): tab strip,
   address bar, the extension's icon at the right end, the popup anchored
   under it. The one drawn element on the site or in the store images. */
.browser .bar { background:#DEE1E6; height:40px; display:flex; align-items:flex-end; padding:0 12px; gap:8px; }
.browser .dots { display:flex; gap:7px; margin:0 8px 14px 0; }
.browser .dots i { width:11px; height:11px; border-radius:50%; background:#C7CACF; display:block; }
.browser .tab { background:#fff; height:32px; border-radius:6px 6px 0 0; padding:0 14px; display:flex; align-items:center;
                font-size:12.5px; color:#3C4043; min-width:230px; }
.browser .addr { background:#fff; height:38px; display:flex; align-items:center; padding:0 12px; gap:12px; border-bottom:1px solid #DADCE0; }
.browser .addr .nav { color:#9AA0A6; font-size:15px; letter-spacing:6px; gap:0; }
.browser .addr .url { width:608px; background:#F1F3F4; border-radius:14px; height:28px; display:flex; align-items:center; padding:0 14px;
                      font-size:12.5px; color:#3C4043; }
.browser .addr .url b { font-weight:500; color:#202124; }
.browser .addr .ext { width:22px; height:22px; border-radius:4px; background:var(--stamp-bg); outline:2px solid var(--stamp); outline-offset:1px; }

/* ---- Slide mode: one section, 1280×800, nothing else ---------------------- */
html.slide, html.slide body { width:1280px; height:800px; overflow:hidden; margin:0; }
html.slide .top, html.slide .foot, html.slide .page-only, html.slide section:not(.on) { display:none !important; }
html.slide .feature.on { position:fixed; inset:0; width:1280px; height:800px; padding:0; margin:0; }
html.slide .feature.on::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, var(--paper) 0 34%, var(--tint) 34% 100%);
}
html.slide .feature.on .wrap { max-width:none; padding:0; }
html.slide .feature.on .grid { display:block; }
html.slide .feature.on .copy { position:absolute; left:72px; top:84px; width:408px; gap:0; }
html.slide .feature.on .eyebrow { display:none; }
html.slide .feature.on .brand-line { display:flex; }
html.slide .feature.on h1, html.slide .feature.on h2 { font-size:46px; line-height:1.08; margin:34px 0 18px; }
html.slide .feature.on .copy p { font-size:19px; line-height:1.45; }
html.slide .feature.on .stage-wrap { position:absolute; left:520px; top:88px; width:760px; height:712px; aspect-ratio:auto; overflow:visible; }
html.slide .feature.on .stage { transform:none; }
html.slide .feature.on .slide-foot { display:flex; }
.brand-line { display:none; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--ink-2); }
.brand-line img { width:28px; height:28px; border-radius:6px; }
.slide-foot { display:none; position:absolute; left:72px; bottom:60px; font-size:13.5px; color:var(--ink-3); gap:10px; align-items:center; }
.slide-foot .dot { width:3px; height:3px; border-radius:50%; background:var(--ink-3); opacity:.7; }
.s1 { --tint:var(--stamp-bg); }
.s2 { --tint:var(--sheet-2); }
.s3 { --tint:var(--hold-bg); }

/* ---- Prose: the run, privacy, and the privacy/support pages -------------- */
.prose { max-width:46rem; }
.prose h2 { margin-bottom:16px; }
.prose p { margin:0 0 16px; color:var(--ink-2); }
.prose p strong { color:var(--ink); font-weight:600; }
.prose .q { font-family:var(--mono); font-size:15px; background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r-md); padding:14px 18px; color:var(--ink); margin:0 0 16px; }
.section { padding:64px 0 0; }
.prose-page { max-width:46rem; padding:56px 24px 0; }
.prose-page h1 { font-size:clamp(30px, 4vw, 40px); margin-bottom:16px; }
.prose-page h2 { font-size:22px; margin:40px 0 10px; }
.prose-page h3 { font-size:18px; margin:28px 0 8px; }
.prose-page p { margin:0 0 14px; color:var(--ink-2); }
.prose-page p strong { color:var(--ink); }
.prose-page ul { padding-left:22px; margin:0 0 14px; color:var(--ink-2); }
.prose-page li { margin:6px 0; }
.prose-page hr { border:0; border-top:1px solid var(--rule); margin:32px 0; }
.prose-page code { font-family:var(--mono); font-size:.9em; background:var(--sheet-2); padding:1px 6px; border-radius:var(--r-sm); }
.prose-page .lead { margin-bottom:24px; }

@media (max-width: 900px) {
  .feature { padding:44px 0; }
  /* minmax(0, …), never bare 1fr: 1fr is minmax(auto, 1fr), and the images'
     intrinsic widths would set the column's minimum and overflow the phone. */
  .feature .grid { grid-template-columns:minmax(0, 1fr); gap:24px; }
  .top .nav { gap:14px; }
  .top .nav a:not(.btn) { display:none; }
}