/* ============================================================
     Push Relay — demo/subscribe page prototype (Phase D)
     Direction: clean product/SaaS · soft, rounded, one accent (emerald)
     Theme-aware (light default + full dark). Reduced-motion safe.
     ============================================================ */

  :root {
    color-scheme: light dark;

    /* palette — light (cool neutrals, biased toward the cobalt accent so they read "chosen") */
    --ground:      #F5F6F8;
    --surface:     #FFFFFF;
    --surface-2:   #EDF1F7;
    --ink:         #121826;
    --muted:       #565E72;
    --line:        #E1E6EF;

    /* single accent — cobalt = live / delivered / subscribed */
    --accent:      #2F6FED;
    --accent-strong:#1E52C7;
    --accent-soft: #E4ECFD;
    --on-accent:   #FFFFFF;

    /* semantic (kept separate from the accent) */
    --warn:        #8F4C05;   /* darkened for AA (>=4.5:1) on --warn-soft */
    --warn-soft:   #FBEEDA;
    --danger:      #BE3A2C;
    --danger-soft: #F7E5E2;
    --neutral-soft:#EAEDF2;

    --focus:       #2F6FED;

    --r-sm: 9px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:104px;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

    --shadow-sm: 0 1px 2px rgba(16,32,26,.06), 0 1px 3px rgba(16,32,26,.05);
    --shadow-md: 0 6px 18px rgba(16,32,26,.09), 0 2px 5px rgba(16,32,26,.05);
    --shadow-lg: 0 24px 60px rgba(16,32,26,.16), 0 8px 20px rgba(16,32,26,.08);

    --dur-fast:140ms; --dur:260ms; --dur-slow:560ms;
    --ease: cubic-bezier(.22,.61,.36,1);

    --maxw: 660px;
  }

  /* dark palette — applied on OS-dark (unless explicitly light) and on explicit toggle */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:      #0C1017;
      --surface:     #141B27;
      --surface-2:   #1A2231;
      --ink:         #E7EBF4;
      --muted:       #93A0B5;
      --line:        #232C3B;
      --accent:      #5B8DF6;
      --accent-strong:#86AEFA;
      --accent-soft: #142743;
      --on-accent:   #08121F;
      --warn:        #EDB365;
      --warn-soft:   #2A2212;
      --danger:      #F0897C;
      --danger-soft: #2E1917;
      --neutral-soft:#1D2634;
      --focus:       #5B8DF6;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
      --shadow-md: 0 6px 20px rgba(0,0,0,.45);
      --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"] {
    --ground:      #0C1017;
    --surface:     #141B27;
    --surface-2:   #1A2231;
    --ink:         #E7EBF4;
    --muted:       #93A0B5;
    --line:        #232C3B;
    --accent:      #5B8DF6;
    --accent-strong:#86AEFA;
    --accent-soft: #142743;
    --on-accent:   #08121F;
    --warn:        #EDB365;
    --warn-soft:   #2A2212;
    --danger:      #F0897C;
    --danger-soft: #2E1917;
    --neutral-soft:#1D2634;
    --focus:       #5B8DF6;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 20px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.4);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font-family: var(--sans);
    background: var(--ground);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--s5);
  }

  a { color: var(--accent-strong); text-underline-offset: 3px; }

  :focus-visible {
    outline: 2.5px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
  }

  h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.02em; line-height: 1.12; }

  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .eyebrow {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin: 0 0 var(--s3);
  }

  /* ---------- top bar ---------- */
  header.bar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--ground) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .bar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4);
    padding-block: var(--s3);
  }
  .brand { display: flex; align-items: center; gap: var(--s3); font-family: var(--mono); font-weight: 600; letter-spacing: -0.01em; }
  .brand .sig {
    width: 12px; height: 12px; border-radius: var(--r-pill);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    position: relative;
  }
  .brand .sig::after {
    content:""; position:absolute; inset:-4px; border-radius:var(--r-pill);
    border: 1.5px solid var(--accent);
    animation: pingsmall 2.4s var(--ease) infinite;
  }
  @keyframes pingsmall { 0%{transform:scale(.7);opacity:.9} 80%,100%{transform:scale(2.1);opacity:0} }
  .bar a.ghlink {
    font-family: var(--mono); font-size:.82rem; text-decoration:none; color: var(--muted);
    border:1px solid var(--line); border-radius: var(--r-pill);
    padding: 6px 14px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .bar a.ghlink:hover { color: var(--ink); border-color: var(--muted); }

  /* shared top-nav (Demo / Keys / Docs) + right-hand bar group */
  .bar__right { display: flex; align-items: center; gap: var(--s4); }
  nav.nav { display: flex; gap: var(--s2); font-family: var(--mono); font-size: .85rem; }
  nav.nav a { text-decoration: none; color: var(--muted); padding: 6px 12px; border-radius: var(--r-pill); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  nav.nav a:hover { color: var(--ink); }
  nav.nav a[aria-current] { color: var(--ink); background: var(--surface-2); }
  @media (max-width: 480px) { .bar__right { gap: var(--s3); } .bar a.ghlink { display: none; } }

  /* ---------- hero ---------- */
  .hero { padding-block: var(--s9) var(--s7); position: relative; text-align: center; }
  .rings {
    position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
    z-index:0; overflow:hidden;
  }
  .rings span {
    position:absolute; width:120px; height:120px; border-radius:var(--r-pill);
    border:1.5px solid var(--accent);
    opacity:0;
    animation: ping 4.2s var(--ease) infinite;
  }
  .rings span:nth-child(2){ animation-delay:1.4s; }
  .rings span:nth-child(3){ animation-delay:2.8s; }
  @keyframes ping { 0%{transform:scale(.5);opacity:.5} 70%{opacity:.08} 100%{transform:scale(5.5);opacity:0} }

  .hero__glyph {
    position: relative; z-index:1;
    width: 68px; height: 68px; margin: 0 auto var(--s5);
    display: grid; place-items: center;
    background: var(--surface); border:1px solid var(--line);
    border-radius: 20px; box-shadow: var(--shadow-md);
  }
  .hero__glyph svg { width: 34px; height: 34px; color: var(--accent); }
  .hero h1 { position:relative; z-index:1; font-size: clamp(2rem, 6.4vw, 3rem); font-weight: 800; }
  .hero p.lede {
    position:relative; z-index:1;
    max-width: 46ch; margin: var(--s4) auto 0; color: var(--muted);
    font-size: clamp(1.02rem, 2.6vw, 1.16rem);
  }

  /* ---------- subscribe card ---------- */
  .card {
    position: relative; z-index: 1;
    margin-top: var(--s7);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--s6);
    text-align: left;
    overflow: clip;
  }
  .card__top {
    display:flex; align-items:center; justify-content:space-between; gap: var(--s3);
    margin-bottom: var(--s5);
  }
  .card__label { font-family: var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
  .pill {
    display:inline-flex; align-items:center; gap:7px;
    font-family: var(--mono); font-size:.78rem; font-weight:600;
    padding: 5px 12px; border-radius: var(--r-pill);
    border:1px solid var(--line); background: var(--surface-2); color: var(--muted);
  }
  .pill .dot { width:8px; height:8px; border-radius:var(--r-pill); background: var(--muted); }
  .pill[data-tone="live"]   { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; }
  .pill[data-tone="live"] .dot { background: var(--accent); }
  .pill[data-tone="warn"]   { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
  .pill[data-tone="warn"] .dot { background: var(--warn); }
  .pill[data-tone="danger"] { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
  .pill[data-tone="danger"] .dot { background: var(--danger); }

  .panel { display: none; animation: panelin var(--dur) var(--ease); }
  .panel[data-active="true"] { display: block; }
  @keyframes panelin { from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

  .panel h2 { font-size: 1.4rem; font-weight: 750; margin-bottom: var(--s2); }
  .panel p { margin: 0; color: var(--muted); }
  .panel p + p { margin-top: var(--s3); }

  .field { margin: var(--s5) 0 var(--s4); }
  .field label { display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom: var(--s2); }
  .field input {
    width:100%; font-family: var(--mono); font-size: .98rem;
    padding: 12px 14px; border-radius: var(--r-md);
    border:1px solid var(--line); background: var(--ground); color: var(--ink);
  }
  .field input:focus-visible { border-color: var(--accent); outline-offset:0; }

  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family: var(--sans); font-size: 1rem; font-weight: 650;
    padding: 14px 22px; border-radius: var(--r-md);
    border: 1px solid transparent; cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .btn--primary { width:100%; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
  .btn--primary:hover { background: var(--accent-strong); }
  .btn--primary:active { transform: translateY(1px); }
  .btn--ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
  .btn--ghost:hover { border-color: var(--muted); }
  .btn[disabled] { opacity: .6; cursor: not-allowed; }
  .btn .spin { width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .statusline { margin-top: var(--s6); font-family: var(--mono); font-size:.82rem; color: var(--muted); }
  .statusline b { color: var(--ink); font-weight:600; }

  /* Card rhythm: give the primary action clear air above and below. These beat the generic
     `.panel p { margin: 0 }` rule (higher specificity), so the status line no longer collapses
     flush against the button. */
  .panel .btn { margin-top: var(--s6); }
  .panel .statusline { margin-top: var(--s5); }

  .note {
    margin-top: var(--s4); padding: var(--s4);
    border-radius: var(--r-md); font-size:.92rem; line-height:1.5;
    border:1px solid var(--line);
  }
  .note--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
  .note--info { background: var(--surface-2); color: var(--muted); }
  .note--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
  .note b { color: inherit; }
  details.help { margin-top: var(--s3); font-size:.9rem; }
  details.help summary { cursor:pointer; color: var(--accent-strong); font-family: var(--mono); font-size:.82rem; }
  details.help ol { margin: var(--s3) 0 0; padding-left: 1.2em; color: var(--muted); }

  /* mock browser permission chip — anchored to the top of the window, like a real
     browser prompt (outside the card). Shown only during the 'prompt' state. */
  .permchip {
    position: fixed; z-index: 60;
    top: 70px;
    left: max(var(--s5), calc((100vw - var(--maxw)) / 2));
    width: min(340px, calc(100vw - 2 * var(--s5)));
    background: var(--surface); border:1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--s4);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .permchip.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .permchip .pc__head { display:flex; gap:10px; align-items:flex-start; }
  .permchip .pc__ico { width:30px;height:30px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-strong);flex:none; }
  .permchip .pc__ico svg{width:16px;height:16px;}
  .permchip .pc__t { font-size:.9rem; }
  .permchip .pc__t b { display:block; }
  .permchip .pc__t span { color: var(--muted); font-size:.82rem; }
  .permchip .pc__actions { display:flex; gap:8px; justify-content:flex-end; margin-top: var(--s3); }
  .permchip .pc__actions button { font-family:var(--sans); font-size:.85rem; font-weight:600; padding:7px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; }
  .permchip .pc__actions .allow { background: var(--accent); color: var(--on-accent); border-color:transparent; }

  /* mock OS notification (payoff, sent state) */
  .toast {
    margin-top: var(--s5);
    display:flex; gap: var(--s3); align-items:flex-start;
    background: var(--surface); border:1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: var(--s4);
    animation: toastin var(--dur-slow) var(--ease);
  }
  @keyframes toastin { from{ opacity:0; transform: translateY(12px) scale(.98);} to{opacity:1; transform:none;} }
  .toast__app { width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none; }
  .toast__app svg{width:20px;height:20px;}
  .toast__body b { display:block; font-size:.98rem; }
  .toast__body p { margin:2px 0 0; font-size:.9rem; color:var(--muted); }
  .toast__meta { margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--muted); white-space:nowrap; }

  /* ---------- how it works ---------- */
  section.block { padding-block: var(--s8); }
  section.block h2.htitle { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 780; text-align:center; }
  .steps { display:grid; gap: var(--s4); margin-top: var(--s7); }
  .step {
    display:grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items:start;
    background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s5);
  }
  .step__n { font-family:var(--mono); font-size:.9rem; font-weight:700; color: var(--accent-strong); padding-top:2px; }
  .step h3 { font-size:1.06rem; font-weight:700; }
  .step p { margin: 6px 0 0; color: var(--muted); font-size:.96rem; }
  .step p code { font-family:var(--mono); font-size:.86em; background:var(--surface-2); padding:1px 6px; border-radius:6px; }

  /* ---------- dev section ---------- */
  .dev { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-xl); padding: var(--s6); }
  .dev p { color: var(--muted); margin: var(--s2) 0 var(--s5); max-width: 52ch; }
  pre.code {
    margin:0; overflow-x:auto; background: var(--ground); border:1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s4);
    font-family: var(--mono); font-size:.85rem; line-height:1.7; color: var(--ink);
  }
  pre.code .c { color: var(--muted); }
  pre.code .k { color: var(--accent-strong); }

  /* ---------- footer ---------- */
  footer.foot { border-top:1px solid var(--line); margin-top: var(--s8); }
  .foot__inner { display:flex; flex-wrap:wrap; gap: var(--s3) var(--s5); justify-content:space-between; align-items:center; padding-block: var(--s6); color: var(--muted); font-family:var(--mono); font-size:.8rem; }

  @media (max-width: 480px) {
    .card { padding: var(--s5); }
    .hero { padding-block: var(--s7) var(--s6); }
  }

  @media (prefers-reduced-motion: reduce) {
    .rings span, .brand .sig::after { animation: none; }
    .panel, .toast { animation: none; }
    .spin { animation-duration: 2s; }
    * { scroll-behavior: auto; }
  }

  /* ---------- PWA install (add to home screen) ---------- */
  /* A floating action button — keeps the install affordance out of the top nav (which it would
     otherwise overflow on mobile). Revealed by install.js only in a browser when installable. */
  .installfab {
    position: fixed; z-index: 70;
    right: max(var(--s5), env(safe-area-inset-right, 0px));
    bottom: max(var(--s5), env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sans); font-size: .92rem; font-weight: 650; cursor: pointer;
    color: var(--on-accent); background: var(--accent); border: none;
    border-radius: var(--r-pill); padding: 12px 18px; box-shadow: var(--shadow-lg);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .installfab:hover { background: var(--accent-strong); }
  .installfab:active { transform: translateY(1px); }
  .installfab svg { width: 16px; height: 16px; }
  /* `display: inline-flex` would otherwise defeat the `hidden` attribute — this restores it, so the
     FAB shows only when install.js reveals it (browser + installable), never in the installed app. */
  .installfab[hidden] { display: none; }

  /* Prevent iOS Safari from auto-zooming on input focus: form controls must be ≥16px on phones.
     (The zoom otherwise sticks, forcing the user to pinch back out.) */
  @media (max-width: 640px) {
    input, textarea, select { font-size: 16px !important; }
  }

  .iosheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; background: rgba(8,12,20,.5); padding: var(--s5); }
  .iosheet[hidden] { display: none; }
  .iosheet__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s6); max-width: 420px; width: 100%; margin-bottom: env(safe-area-inset-bottom); animation: panelin var(--dur) var(--ease); }
  .iosheet__card h3 { font-size: 1.1rem; font-weight: 750; }
  .iosheet__card p { color: var(--muted); margin: var(--s2) 0 var(--s4); font-size: .95rem; }
  .iosheet__steps { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
  .iosheet__steps li { display: flex; gap: var(--s3); align-items: center; font-size: .95rem; }
  .iosheet__steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; font-weight: 700; }
  .iosheet__steps .shareico { display: inline-flex; vertical-align: -3px; color: var(--accent-strong); }
  .iosheet__close { margin-top: var(--s5); width: 100%; }