/* Dior app — the shell.
   Every rule here is doing one of two jobs: making the thing look like Dior,
   or removing a tell that it is a web page. The second list is the one that
   matters, and it is specific: no rubber-band scroll, no tap highlight, no
   text selection on chrome, no zoom on focus, safe-area padding, and
   transitions short enough (200-260ms) that they read as response rather
   than animation. */

:root{
  --bg:#0A0A0A; --bg-1:#131212; --bg-2:#1B1918; --line:#262322;
  --ink:#ECEAE4; --ink-2:#A79F92; --ink-3:#6F6A62;
  --gold:#C9A227; --gold-dim:#8A6F1B;
  --r:12px; --r2:18px;
  --tab-h:58px; --top-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font:16px/1.5 Jost,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* No rubber-band and no pull-to-refresh: the single biggest tell that a
     standalone app is really a browser. */
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
/* Chrome is furniture, not content: selecting it is always an accident. */
.topbar,.tabs,.tab,.sheet-grip{user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

.app{
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:100svh;
}

/* ---- top bar ---------------------------------------------------------- */
.topbar{
  display:flex;align-items:center;gap:4px;
  height:calc(var(--top-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 8px 0;
  background:var(--bg);border-bottom:1px solid var(--line);
  position:relative;z-index:5;
}
.tb-back{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.tb-back svg{width:24px;height:24px}
.tb-back[hidden]{display:none}
/* The title lives in ONE place at a time. It starts big, inside the screen,
   the way iOS and Material both do it, and only appears in the bar once it
   has scrolled away — otherwise the word sits on the screen twice, which is
   the giveaway of a web page with a header bolted on. */
.tb-title{
  margin:0;font-size:17px;font-weight:600;letter-spacing:.01em;
  padding-left:8px;
  opacity:0;transform:translateY(6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.topbar.is-scrolled .tb-title{opacity:1;transform:none}
.topbar{transition:border-color .2s var(--ease)}
.topbar:not(.is-scrolled){border-color:transparent}

/* ---- screens ---------------------------------------------------------- */
.screens{position:relative;overflow:hidden}
.screen{
  position:absolute;inset:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transform:translateX(8px);
  transition:opacity .2s var(--ease),transform .24s var(--ease),visibility .24s;
}
.screen.is-on{opacity:1;visibility:visible;transform:none}
.pad{padding:18px 16px calc(24px + var(--tab-h) + env(safe-area-inset-bottom))}

/* ---- bottom tabs ------------------------------------------------------ */
.tabs{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  position:relative;z-index:5;
}
/* Material 3's navigation bar, not Material 2's: no drop shadow, a taller
   container, and the active destination marked by a PILL behind the icon
   rather than by colour alone. Colour alone fails for anyone who cannot
   distinguish gold from grey; the pill is a second, redundant signal. */
.tab{
  display:grid;place-items:center;gap:2px;align-content:center;
  height:var(--tab-h);color:var(--ink-3);
  transition:color .18s var(--ease);
  position:relative;
}
.tab-ico{
  width:64px;height:32px;display:grid;place-items:center;border-radius:999px;
  transition:background .22s var(--ease);
}
.tab svg{width:23px;height:23px;transition:transform .22s var(--ease)}
.tab span{font-size:11px;letter-spacing:.02em;transition:font-weight .1s}
.tab.is-on{color:var(--gold)}
.tab.is-on .tab-ico{background:rgba(201,162,39,.16)}
.tab.is-on svg{transform:translateY(-.5px)}
.tab.is-on span{font-weight:600}
.tab:active .tab-ico{transform:scale(.92)}

/* ---- building blocks -------------------------------------------------- */
.h{margin:0 0 4px;font-size:27px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.sub{margin:0 0 18px;color:var(--ink-2);font-size:14px}
.group{margin-bottom:26px}
.group-h{
  margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px;margin-bottom:8px;text-align:left;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);
  transition:background .14s var(--ease),border-color .14s var(--ease);
  min-height:48px;
}
.row:active{background:var(--bg-2)}
.row-main{flex:1;min-width:0}
.row-t{display:block;font-size:15px;line-height:1.3}
.row-s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.row-p{font-family:Jost,sans-serif;font-size:15px;color:var(--gold);white-space:nowrap}
.chev{width:18px;height:18px;color:var(--ink-3);flex:none}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;padding:14px 20px;
  background:var(--gold);color:#0A0A0A;border-radius:var(--r);
  font-size:16px;font-weight:600;letter-spacing:.01em;
  transition:transform .12s var(--ease),opacity .14s var(--ease);
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--quiet{background:transparent;color:var(--ink-2);min-height:44px;font-weight:400}

.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:10px 14px;min-height:44px;display:grid;place-items:center;
  background:var(--bg-1);border:1px solid var(--line);border-radius:999px;
  font-size:14px;color:var(--ink-2);white-space:nowrap;
}
.chip.is-on{background:var(--gold);color:#0A0A0A;border-color:var(--gold)}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.slot{
  min-height:48px;display:grid;place-items:center;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);
  font-size:15px;
}
.slot.is-on{background:var(--gold);color:#0A0A0A;border-color:var(--gold)}

.note{color:var(--ink-2);font-size:14px;line-height:1.55}
.empty{padding:34px 12px;text-align:center;color:var(--ink-3);font-size:14.5px}
.skeleton{
  height:62px;margin-bottom:8px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--bg-1) 25%,var(--bg-2) 50%,var(--bg-1) 75%);
  background-size:200% 100%;animation:sk 1.1s linear infinite;
}
@keyframes sk{to{background-position:-200% 0}}

.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2);padding:16px;margin-bottom:12px}
.card--gold{border-color:var(--gold-dim);background:linear-gradient(180deg,rgba(201,162,39,.08),transparent 60%),var(--bg-1)}
.k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.v{font-size:17px;margin-top:2px}

/* ---- bottom sheet ----------------------------------------------------- */
.sheet-wrap{position:fixed;inset:0;z-index:40;display:grid;align-items:end}
.sheet-wrap[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);animation:fade .2s var(--ease)}
.sheet{
  position:relative;background:var(--bg-1);
  border-radius:var(--r2) var(--r2) 0 0;border-top:1px solid var(--line);
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height:86svh;overflow-y:auto;overscroll-behavior:contain;
  animation:rise .26s var(--ease);
  will-change:transform;
}
@keyframes rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 14px}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom));
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  padding:12px 18px;border-radius:999px;font-size:14px;z-index:60;
  max-width:86vw;text-align:center;
  animation:fade .18s var(--ease);
}
.toast[hidden]{display:none}
.toast.is-bad{border-color:#7a2a22}

input[type=text],input[type=tel],input[type=email],input[type=password],textarea,select{
  width:100%;padding:14px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  /* 16px or iOS Safari zooms the page on focus and never zooms back. */
  font-size:16px;font-family:inherit;
}
label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.field{margin-bottom:14px}

/* Installed, not in a tab: no browser chrome to absorb an overscroll. */
@media (display-mode:standalone){
  html,body{overscroll-behavior:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===========================================================================
   The look.
   Three ideas, and everything below is one of them.

   1. GOLD IS LIGHT, NOT PAINT. On a near-black ground gold reads as a lamp,
      so it glows and bleeds rather than filling shapes. Flat gold blocks look
      like 2014 Material; gold that lights its surroundings does not.

   2. SURFACES ARE GLASS, NOT CARDS. The bars are translucent and blurred so
      content passes under them. That is what makes a screen feel layered
      instead of stacked, and it is the single cheapest thing that separates a
      current app from a dated one.

   3. MOTION IS PHYSICS, NOT TIMING. Things that appear overshoot very
      slightly and settle. A linear fade reads as a web page; a spring reads
      as an object.
   =========================================================================== */

:root{
  --spring:cubic-bezier(.34,1.42,.64,1);
  --glass:rgba(10,10,10,.72);
}

/* A ground with depth: two soft pools of warmth, not flat black. */
body{
  background:
    radial-gradient(90ch 60ch at 12% -8%, rgba(201,162,39,.075), transparent 62%),
    radial-gradient(70ch 50ch at 110% 6%, rgba(201,162,39,.05), transparent 58%),
    var(--bg);
  background-attachment:fixed;
}

/* Glass bars. The saturate() is what stops a blur turning everything grey. */
.topbar,.tabs{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
.tabs{border-top:1px solid rgba(255,255,255,.055)}
.topbar{border-bottom:1px solid transparent}
.topbar.is-scrolled{border-bottom-color:rgba(255,255,255,.055)}

/* The active tab is lit from behind rather than filled. */
.tab.is-on .tab-ico{
  background:radial-gradient(circle at 50% 50%, rgba(201,162,39,.26), rgba(201,162,39,.10) 70%);
  box-shadow:0 0 18px -4px rgba(201,162,39,.45);
}

/* Display type: tighter, more confident, with the optical sizing a variable
   font gives for free at large sizes. */
.h{
  font-size:30px;letter-spacing:-.022em;line-height:1.08;
  font-weight:600;
  background:linear-gradient(180deg,var(--ink) 30%,#B9B2A6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{font-size:14.5px;line-height:1.55}

/* Rows lift slightly and the gold edge lights when pressed. */
.row{
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  transition:transform .18s var(--spring),background .16s var(--ease),
             border-color .16s var(--ease),box-shadow .2s var(--ease);
}
.row:active{
  transform:scale(.982);
  border-color:rgba(201,162,39,.4);
  box-shadow:0 0 22px -8px rgba(201,162,39,.5);
}
.row--hero{
  background:linear-gradient(135deg, rgba(201,162,39,.14), rgba(201,162,39,.03) 58%), var(--bg-1);
  border-color:rgba(201,162,39,.32);
}
.row--hero .row-t{color:var(--ink)}

/* The primary action is a lit surface. */
.btn{
  border-radius:14px;
  background:linear-gradient(180deg,#E3BA3A,var(--gold) 55%,#AE8A1E);
  box-shadow:0 8px 26px -12px rgba(201,162,39,.85), 0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .16s var(--spring),box-shadow .2s var(--ease),opacity .14s;
}
.btn:active{transform:scale(.975);box-shadow:0 4px 14px -10px rgba(201,162,39,.8)}
.btn--ghost,.btn--quiet{background:none;box-shadow:none}
.btn--ghost{border:1px solid rgba(255,255,255,.12)}

.chip,.slot{transition:transform .16s var(--spring),background .16s var(--ease),border-color .16s var(--ease)}
.chip:active,.slot:active{transform:scale(.94)}
.slot.is-on,.chip.is-on{
  background:linear-gradient(180deg,#E3BA3A,var(--gold));
  box-shadow:0 6px 20px -12px rgba(201,162,39,.9);
}

.card{border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 40%),var(--bg-1)}
.card--gold{box-shadow:0 0 34px -18px rgba(201,162,39,.55)}

/* Entrances: content arrives in sequence, each item settling a beat after the
   one above. Capped so a long list never leaves the reader waiting. */
@keyframes rise-in{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to  {opacity:1;transform:none}
}
.screen.is-on .group,
.screen.is-on .card,
.screen.is-on > .pad > .h,
.screen.is-on > .pad > .sub{
  animation:rise-in .42s var(--spring) both;
}
.screen.is-on > .pad > .h{animation-delay:.02s}
.screen.is-on > .pad > .sub{animation-delay:.06s}
.screen.is-on .group:nth-of-type(1){animation-delay:.08s}
.screen.is-on .group:nth-of-type(2){animation-delay:.13s}
.screen.is-on .group:nth-of-type(3){animation-delay:.18s}
.screen.is-on .group:nth-of-type(4){animation-delay:.22s}
.screen.is-on .group:nth-of-type(n+5){animation-delay:.26s}
.stagger{animation:rise-in .4s var(--spring) both;animation-delay:calc(var(--i,0) * .055s + .06s)}

/* The sheet arrives on a spring and the scrim fades under it. */
.sheet{
  animation:rise .34s var(--spring);
  border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 26%),var(--bg-1);
  box-shadow:0 -24px 60px -30px rgba(0,0,0,.95);
}
.sheet-bg{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

.toast{
  background:rgba(27,25,24,.88);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 12px 40px -18px rgba(0,0,0,.9);
  animation:rise-in .3s var(--spring);
}

/* Everything above is decoration. None of it may move for a reader who has
   asked it not to. */
@media (prefers-reduced-motion:reduce){
  .screen.is-on .group,.screen.is-on .card,.stagger,
  .screen.is-on > .pad > .h,.screen.is-on > .pad > .sub,
  .sheet,.toast{animation:none!important}
}

.hint{margin:-4px 0 10px;font-size:13px;color:var(--ink-3);line-height:1.5}

.note[data-state=err]{color:#E4796A}
.note[data-state=ok]{color:var(--gold)}
#loginform .btn{margin-top:4px}


/* ===========================================================================
   40. THE GATE
   The first screen of the app, and for a new customer the only one for a
   minute. Three things it has to do, in this order: look like the studio, ask
   one question, and never look like a web form.

   Everything below the brand mark is a single step. Steps are siblings that
   cross-fade in place rather than pages that navigate, so the keyboard never
   closes between two questions and there is no white flash to give the game
   away.
   =========================================================================== */
.auth{
  position:fixed;inset:0;z-index:40;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(201,162,39,.13),transparent 62%),
    var(--bg);
  display:grid;align-items:center;
  overflow-y:auto;
  padding:calc(env(safe-area-inset-top) + 30px) 22px calc(env(safe-area-inset-bottom) + 26px);
}
.auth[hidden]{display:none}
.auth-in{width:100%;max-width:400px;margin:0 auto}
.auth-step>.auth-h:first-child{margin-top:4px}

/* Only one step is in the layout at a time: a hidden step must not hold height
   and must not be reachable by Tab or by a screen reader. */
.auth-step{display:none}
.auth-step.is-on{display:block;animation:auth-in .3s var(--ease) both}
@keyframes auth-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.auth-h{margin:0 0 6px;font-size:29px;font-weight:600;letter-spacing:-.015em;line-height:1.12}
.auth-sub{margin:0 0 24px;color:var(--ink-2);font-size:14.5px;line-height:1.55}

/* The label wraps the input, so the words are part of the tap target. */
/* .fl beats a bare [hidden] on specificity, so the fallback e-mail field was
   on screen from the start. */
.fl{display:block;margin-bottom:15px}
.fl[hidden]{display:none}
.fl>span{
  display:block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px;
}
.fl input{
  width:100%;padding:15px 14px;background:var(--bg-1);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  font-size:16px;font-family:inherit;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
/* The border and the ground already say which field has focus, so the global
   focus-visible outline on top of them drew a second ring around the first. */
.fl input:focus{border-color:var(--gold-dim);background:var(--bg-2)}
.fl input:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.16)}
.fl input[aria-invalid=true]{border-color:#B4462F}
.fl-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* An eye, not a second password box to type the same thing into again. */
.pw{position:relative;display:block}
.pw input{padding-right:50px}
.pw-eye{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;display:grid;place-items:center;
  color:var(--ink-3);border-radius:50%;
}
.pw-eye svg{width:21px;height:21px}
.pw-eye[aria-pressed=true]{color:var(--gold)}

/* Six digits, spaced out: the code is read off a notification and compared
   character by character, so it is set like a code rather than like prose. */
.in-code{
  font-size:26px!important;letter-spacing:.42em;text-align:center;
  padding-left:calc(14px + .42em)!important;
  font-variant-numeric:tabular-nums;
}

.auth-err{
  margin:2px 0 14px;font-size:13.5px;line-height:1.5;color:#E0836B;
}
.auth-err[hidden]{display:none}
/* The same box carries "that did not work" and "it is on its way". Keeping one
   element means the answer always appears in the same place; the colour is what
   says which kind it is. */
.auth-err[data-ok]{color:var(--gold)}
.auth-hint{margin:-8px 0 16px;font-size:12.5px;color:var(--ink-3)}
.auth-hint[data-ok]{color:var(--gold)}

.auth .btn{margin-top:4px}
.auth-alt{
  display:block;width:100%;margin-top:18px;padding:12px 0;
  font-size:14px;color:var(--ink-2);text-align:center;
}
.auth-alt b{color:var(--gold);font-weight:500}
.auth-quiet{
  display:block;width:100%;margin-top:2px;padding:10px 0;
  font-size:13px;color:var(--ink-3);text-align:center;
}
.auth-legal{
  margin:20px 0 0;font-size:12px;line-height:1.6;color:var(--ink-3);text-align:center;
}
.auth-legal a{color:var(--ink-2)}

/* Progress, for the four registration steps only. Four dots is information; a
   bar that creeps is decoration. */
.auth-dots{display:flex;gap:6px;justify-content:center;margin-top:26px}
.auth-dots[hidden]{display:none}
.auth-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--line);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.auth-dots i.is-on{background:var(--gold);transform:scale(1.25)}
.auth-dots i.is-done{background:var(--gold-dim)}

/* While the gate is up the app behind it must not be reachable at all - a tab
   bar peeking under a login screen is both ugly and a keyboard trap. */
body.is-gated .app{visibility:hidden}

/* ===========================================================================
   41. THE SERVICE LIST, INVERTED
   The price used to be the gold thing in the row, which made the money the
   first thing the eye landed on. The service is what is being chosen, so the
   service is what glows; the figure is plain ivory and answers second.
   =========================================================================== */
#naroci .row-t,#cenik .row-t{color:var(--gold)}
#naroci .row-p,#cenik .row-p{color:var(--ink)}

/* ===========================================================================
   42. THE PRICE LIST
   A menu, not a table. Everything a salon menu has to answer is on the row -
   what it is, how long it takes, what it costs - and the row itself is the
   way to book it, which is the shortest path from reading a price to having
   an appointment.
   =========================================================================== */

/* The heading stays put while its own section scrolls, so you always know
   which category the price under your thumb belongs to. */
.group-h--sticky{
  position:sticky;top:0;z-index:2;
  margin:0 -16px 10px;padding:10px 16px 8px;
  background:linear-gradient(180deg,var(--bg) 72%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.chips--jump{
  position:sticky;top:0;z-index:3;
  margin:0 -16px 18px;padding:4px 16px 10px;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);
  overflow-x:auto;scrollbar-width:none;
}
.chips--jump::-webkit-scrollbar{display:none}

/* A description earns its place only when it says something the name does not,
   so most rows have none and the list stays scannable. */
.row-note{
  display:block;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:var(--ink-2);max-width:30em;
}
.row--price{align-items:flex-start}
.row--price .row-p{padding-top:1px}

/* The surcharges are information, not choices - they are picked during
   booking - so they do not look pressable. */
.row--flat{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;border-bottom:1px solid var(--line);
  text-align:left;
}
.row--flat:last-child{border-bottom:0}

/* The bell sits beside the row, not inside it: two separate jobs - book this,
   or tell me when it frees - and each needs its own tap target. */
.pricerow{display:flex;align-items:stretch;gap:8px;margin-bottom:8px}
.pricerow .row{flex:1;margin-bottom:0}
.bell{
  flex:0 0 48px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-1);color:var(--ink-3);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.bell svg{width:21px;height:21px}
.bell:active{transform:scale(.94)}
.bell[disabled]{opacity:.45}
/* Lit means "this one will reach my phone" - the same gold the notification
   card uses, so the two read as one state. */
.bell[aria-pressed=true]{
  color:var(--gold);border-color:var(--gold-dim);
  background:linear-gradient(180deg,rgba(201,162,39,.14),transparent 70%),var(--bg-1);
}
.hint--bell{margin:-6px 0 16px}

/* ===========================================================================
   43. ADD TO HOME SCREEN — iPhone only
   Apple offers no install prompt and no API to request one, so the only
   honest thing to do is point at the button and say what it is worth. It sits
   above the tab bar as a card rather than a banner across the top, because it
   is an offer, not an alert.
   =========================================================================== */
.a2hs{
  position:fixed;left:12px;right:12px;z-index:41;   /* over the gate, too */
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
  padding:15px 40px 15px 16px;
  background:var(--bg-2);border:1px solid var(--gold-dim);border-radius:var(--r2);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  animation:a2hs-in .32s var(--ease) both;
}
.a2hs[hidden]{display:none}
/* Before sign-in there is no tab bar to clear. */
body.is-gated .a2hs{bottom:calc(env(safe-area-inset-bottom) + 14px)}
@keyframes a2hs-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.a2hs-t{margin:0 0 4px;font-size:15px;font-weight:600}
.a2hs-s{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.a2hs-s b{color:var(--ink);font-weight:600}
/* The share glyph inline in the sentence, so "tap this" needs no screenshot. */
.a2hs-i{display:inline-block;vertical-align:-4px;color:var(--gold)}
.a2hs-i svg{width:17px;height:17px}
.a2hs-x{
  position:absolute;top:6px;right:6px;width:34px;height:34px;
  display:grid;place-items:center;color:var(--ink-3);border-radius:50%;
}
.a2hs-x svg{width:17px;height:17px}

/* ===========================================================================
   44. NOTIFICATIONS ARE ON
   A switched-on alert channel should be visible at a glance - the question in
   somebody's head is "will my phone actually tell me?", and a line of text
   saying so is easy to skim past. The card lights up instead.
   =========================================================================== */
.card--on{
  border-color:var(--gold-dim);
  background:linear-gradient(180deg,rgba(201,162,39,.10),transparent 62%),var(--bg-1);
}
.card--on .k{color:var(--gold)}
.note--on{color:var(--ink)}
/* A lit dot before the sentence: state, not decoration. */
.note--on::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-right:8px;vertical-align:1px;
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}