/* נר. One screen, no chrome.
   Colour comes from the sky at the user's own location, so nothing here
   hardcodes a theme: the palette arrives as custom properties on :root
   and everything reads from it. */

:root{
  --sky-top:#0F1A3A;
  --sky-mid:#0B1330;
  --sky-bot:#070B1A;
  --ink:#FFFFFF;
  --ink-dim:rgba(255,255,255,.62);
  --glow:#FFB25A;
  --glow-a:0;
  --stars:0;
  --sheet:rgba(10,14,28,.82);
  --sheet-solid:rgba(10,14,28,.94);
  --sheet-line:rgba(255,255,255,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/*
  The hidden attribute has to actually hide.

  A browser hides [hidden] with display:none from its own stylesheet,
  and any rule written here beats that no matter how weak it looks. So
  .ask{display:flex} quietly cancelled it, and the location offer stayed
  on screen after it had been answered: the code had set hidden, the
  page had ignored it, and the tests were reading the property rather
  than looking at the screen.
*/
[hidden]{display:none !important}

html,body{height:100%;margin:0;padding:0}
body{
  min-height:100dvh;
  background:var(--sky-bot);
  color:var(--ink);
  font-family:Heebo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  transition:color .9s var(--ease);
}

/* ---------- sky ---------- */

/* Two layers so a palette change fades rather than snaps. The inactive
   one is repainted, then swapped by flipping opacity. */
.sky{
  position:fixed; inset:0; z-index:0;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-bot) 100%);
  transition:opacity 1.2s var(--ease);
}
#skyB{opacity:0}

.stars{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:var(--stars);
  transition:opacity 1.6s var(--ease);
  background-repeat:repeat;
  background-size:260px 260px;
  background-image:
    radial-gradient(1.4px 1.4px at 34px 22px,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.1px 1.1px at 122px 61px,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.6px 1.6px at 198px 38px,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 78px 140px,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.3px 1.3px at 232px 168px,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1px 1px at 12px 210px,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1.5px 1.5px at 160px 232px,rgba(255,255,255,.8),transparent 60%);
}
@media (prefers-reduced-motion:no-preference){
  .stars{animation:twinkle 9s ease-in-out infinite}
}
@keyframes twinkle{0%,100%{filter:brightness(1)}50%{filter:brightness(.72)}}

/* The light the candles throw back onto the room. */
.horizon-glow{
  position:fixed; left:50%; bottom:-14vh; z-index:1;
  width:150vw; height:56vh; transform:translateX(-50%);
  pointer-events:none;
  opacity:var(--glow-a);
  transition:opacity 2.4s var(--ease);
  background:radial-gradient(ellipse at 50% 100%,var(--glow) 0%,transparent 62%);
  mix-blend-mode:screen;
}

/* ---------- layout ---------- */

.screen{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  height:100dvh;
  padding:
    calc(env(safe-area-inset-top,0px) + 18px)
    calc(env(safe-area-inset-right,0px) + 20px)
    calc(env(safe-area-inset-bottom,0px) + 12px)
    calc(env(safe-area-inset-left,0px) + 20px);
}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
.place,.clock{font-size:14px;font-weight:300;color:var(--ink-dim);letter-spacing:.01em}
.place{
  background:none;border:0;padding:2px 0;color:var(--ink-dim);
  font:inherit;cursor:pointer;
  border-bottom:1px dotted rgba(255,255,255,.28);
}
.clock{font-variant-numeric:tabular-nums}

/* ---------- the countdown ---------- */

/*
  The clock and the candles belong together near the top.

  Centring the text block in all the leftover space opened a hole between
  the last line and the first wick, and pushed the candles onto the floor.
  The text now takes only the room it needs, the candles follow it
  immediately, and whatever is left over falls underneath them where an
  empty stretch of sky is what it should look like anyway.
*/
.middle{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;text-align:center;padding-top:clamp(6px,4dvh,44px)}

/* The location offer is tall, and on a short screen it was landing on
   top of the candles. While it is up, the candles give way to it: it is
   the one thing on that screen worth reading first. */
body.asking .candle-svg{height:clamp(96px,20dvh,150px)}
body.asking .handle{margin-top:4px}
/* On the very first screen the offer leads and the clock waits its turn,
   which is also what makes the two of them fit on a short phone. */
body.asking .count-main{font-size:clamp(42px,12.5vw,66px)}
body.asking .count-sub{font-size:clamp(15px,4.2vw,21px)}
body.asking .title{font-size:17px;margin-top:9px}
body.asking .meta{font-size:13px}

.count{display:flex;flex-direction:column;align-items:center;line-height:.98}
.count-main{
  font-size:clamp(56px,19vw,104px);
  font-weight:200;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.count-sub{
  font-size:clamp(20px,6vw,30px);
  font-weight:200;
  color:var(--ink-dim);
  margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.title{font-size:20px;font-weight:400;margin:14px 0 0;letter-spacing:.01em}
.meta{
  margin:6px 0 0;font-size:14px;font-weight:300;color:var(--ink-dim);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
}
.meta-btn{
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px dotted rgba(255,255,255,.3);
  font-variant-numeric:tabular-nums;
}
.meta-sep::before{content:"·"}
.meta:empty,.meta-sep:empty::before{content:""}

/* Shabbat is not a time to count. */
body[data-phase="lit"] .count{opacity:.55;transition:opacity 1.6s var(--ease)}

/* The location offer. Knowing where he stands is the point of the whole
   thing, so on the first screen it is the one thing with weight. */
.ask{margin:26px 0 0;display:flex;flex-direction:column;align-items:center;gap:9px;max-width:330px}
.ask-text{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-dim);text-align:center}
.ask-yes{
  font:inherit;font-size:15px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  border:0;border-radius:999px;padding:12px 22px;
  background:var(--glow);color:#2b1c00;
  box-shadow:0 7px 18px rgba(0,0,0,.2);
}
.ask-yes:active{transform:translateY(1px)}
.ask-yes svg{opacity:.85}
.ask-no{
  font:inherit;font-size:13px;cursor:pointer;border:0;background:none;
  color:var(--ink-dim);padding:4px 8px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.25);
}

/* ---------- candles ---------- */

.candles{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(10px,3.5dvh,34px)}

/* Height leads and the width follows from the viewBox, so a short screen
   makes the candles smaller instead of cutting their feet off. A phone in
   landscape is the case that caught this. */
.candle-svg{
  height:clamp(150px,34dvh,284px);
  width:auto;max-width:70vw;
  display:block;overflow:visible;
}
.candle-hit{
  position:absolute;inset:auto 0 0;height:100%;
  background:none;border:0;padding:0;cursor:pointer;z-index:3;
}
.nudge{margin:8px 0 0;font-size:13px;color:var(--ink-dim);letter-spacing:.02em}

/*
  Which parts of the artwork the state machine shows.

  Only opacity and transform are switched, never display, so every change
  can be a transition and the browser never has to lay anything out
  again. The flames start hidden and the wax never does: a candle that is
  not yet lit is still a candle.
*/
.pair,.single{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.single{opacity:0;transform:scale(.9)}
.candles[data-state="havdalah"] .pair{opacity:0;transform:scale(.88)}
.candles[data-state="havdalah"] .single{opacity:1;transform:scale(1)}

.rflame{opacity:0;transition:opacity .55s var(--ease)}
.candles[data-state="lit"] .pair .rflame,
.candles[data-state="havdalah"] .single .rflame{opacity:1}

/*
  The floor carries the light the flames throw. In daylight there is no
  throwing to do, so it follows the same figure the sky already computes
  rather than sitting there as a dark band under a bright morning.
*/
/*
  Tied to the stars, not to the flame.

  It hung off the glow at first, and the glow is forced up through
  Shabbat, so a bright Yom Kippur morning got a night floor: a grey
  slab across a pale sky. The star figure is the one that already
  means darkness, so the reflection now arrives exactly when they do.
*/
.rnight{opacity:var(--stars);transition:opacity 2.2s var(--ease)}
.rspillgroup{opacity:calc(.35 + var(--glow-a) * .65);transition:opacity 2.2s var(--ease)}
.candles[data-state="idle"] .rspillgroup{opacity:calc(.15 + var(--glow-a) * .45)}

/* Idle candles step back without disappearing. */
.candles[data-state="idle"] .candle-svg{transform:scale(.86);opacity:.8}
.candle-svg{transition:transform .8s var(--ease),opacity .8s var(--ease)}

@media (prefers-reduced-motion:no-preference){
  .candles.nudging .pair{animation:shiver .5s ease-in-out}
  /* Catching: the wick takes it, it overshoots, it settles. */
  .candles.catching .pair .rflame{animation:catch .75s cubic-bezier(.34,1.42,.64,1) both}
  .candles.catching .pair .rf-out,
  .candles.catching .pair .rf-mid,
  .candles.catching .pair .rf-core{animation:none}
}
@keyframes shiver{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-2.5px)}
  75%{transform:translateX(2.5px)}
}
@keyframes catch{
  0%   {opacity:0;transform:scaleY(.05) scaleX(.5)}
  35%  {opacity:1;transform:scaleY(1.28) scaleX(.86)}
  62%  {transform:scaleY(.9) scaleX(1.08)}
  82%  {transform:scaleY(1.05) scaleX(.97)}
  100% {opacity:1;transform:scaleY(1) scaleX(1)}
}

  @media (prefers-reduced-motion:no-preference){
    .rflame{animation:rbreathe 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
    .rf-out{animation:rsway 1.9s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
    .rf-mid{animation:rsway 2.7s ease-in-out infinite reverse;transform-box:fill-box;transform-origin:50% 100%}
    .rf-core{animation:rflick .9s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
    .rf-root{animation:rroot 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
    .rhalo{animation:rglow 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 60%}
    .rbloom{animation:rbloomp 5.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 60%}
    .rsmoke{animation:rsmoke 6.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  }
  @keyframes rbreathe{
    0%{transform:scaleY(.95) scaleX(1.025)} 28%{transform:scaleY(1.055) scaleX(.978)}
    53%{transform:scaleY(.985) scaleX(1.01)} 74%{transform:scaleY(1.03) scaleX(.99)}
    100%{transform:scaleY(.95) scaleX(1.025)}
  }
  @keyframes rsway{
    0%{transform:skewX(-2.8deg) translateX(-.7px)} 35%{transform:skewX(1.5deg) translateX(.3px)}
    62%{transform:skewX(3.2deg) translateX(.8px)} 100%{transform:skewX(-2.8deg) translateX(-.7px)}
  }
  @keyframes rflick{
    0%,100%{transform:scaleY(1) translateY(0);opacity:.94}
    32%{transform:scaleY(.85) translateY(1.5px);opacity:1}
    58%{transform:scaleY(1.12) translateY(-1.8px);opacity:.8}
    79%{transform:scaleY(.96) translateY(.4px);opacity:.99}
  }
  @keyframes rroot{
    0%,100%{transform:scaleY(1) scaleX(1);opacity:.9}
    50%{transform:scaleY(1.12) scaleX(.94);opacity:1}
  }
  @keyframes rglow{
    0%{opacity:.76;transform:scale(.955)} 28%{opacity:1;transform:scale(1.07)}
    53%{opacity:.84;transform:scale(.99)} 74%{opacity:.94;transform:scale(1.045)}
    100%{opacity:.76;transform:scale(.955)}
  }
  @keyframes rbloomp{
    0%,100%{opacity:.62;transform:scale(.97)} 50%{opacity:.9;transform:scale(1.06)}
  }
  @keyframes rsmoke{
    0%{opacity:0;transform:translateY(4px) scaleY(.8)}
    22%{opacity:.1}
    100%{opacity:0;transform:translateY(-16px) scaleY(1.25)}
  }

/* The floor of the screen: two real buttons, equal weight. Sharing is
   the only way this site travels, so it is not an icon in a corner. */
.foot{
  flex:0 0 auto;display:flex;gap:9px;justify-content:center;align-items:center;
  margin-top:12px;padding-bottom:2px;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:14px;font-weight:400;cursor:pointer;
  color:var(--ink);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:11px 18px;min-height:44px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pill:active{transform:translateY(1px)}
.pill svg{opacity:.8}
.pill.share{background:rgba(255,255,255,.2)}

body[data-lum="light"] .pill{
  background:rgba(27,36,48,.07);border-color:rgba(27,36,48,.16);color:var(--ink);
}
body[data-lum="light"] .pill.share{background:rgba(27,36,48,.12)}

/* ---------- sheet and picker ---------- */

.scrim{position:fixed;inset:0;z-index:8;background:rgba(4,7,16,.45);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

.sheet,.picker{
  position:fixed;left:0;right:0;bottom:0;z-index:9;
  max-height:82dvh;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--sheet);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-top:1px solid var(--sheet-line);
  border-radius:22px 22px 0 0;
  padding:
    18px
    calc(env(safe-area-inset-right,0px) + 20px)
    calc(env(safe-area-inset-bottom,0px) + 22px)
    calc(env(safe-area-inset-left,0px) + 20px);
  animation:rise .34s var(--ease);
}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}

.sheet-close{
  position:absolute;inset-inline-end:14px;top:12px;
  background:none;border:0;color:var(--ink-dim);font-size:17px;cursor:pointer;
  width:34px;height:34px;line-height:1;
}

.tabs{display:flex;gap:7px;margin:2px 0 16px;flex-wrap:wrap}
/* They were plain words with a hairline under the active one, which
   read as a heading rather than as something to press. */
.tab{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  padding:8px 15px;border-radius:999px;font:inherit;font-size:13.5px;cursor:pointer;
  color:var(--ink-dim);min-height:38px;
}
.tab[aria-selected="true"]{
  color:#2b1c00;background:var(--glow);border-color:transparent;font-weight:500;
}
body[data-lum="light"] .tab{background:rgba(27,36,48,.06);border-color:rgba(27,36,48,.12)}

.sheet-body{font-size:15px;line-height:1.75}

.bracha{margin:0 0 20px}
.bracha .he{font-size:21px;font-weight:400;line-height:1.95;margin:0 0 6px}
.bracha .tr{font-size:14px;color:var(--ink-dim);direction:ltr;text-align:left;margin:0 0 4px;font-style:italic}
.bracha .en{font-size:14px;color:var(--ink-dim);direction:ltr;text-align:left;margin:0}

.note{
  font-size:14px;color:var(--ink-dim);line-height:1.7;
  border-inline-start:2px solid var(--glow);padding-inline-start:12px;margin:0 0 18px;
}

.times{list-style:none;margin:0;padding:0}
.times li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.times li:last-child{border-bottom:0}
.times .t-val{font-variant-numeric:tabular-nums;color:var(--ink)}
.times .t-key{color:var(--ink-dim)}

.cta-line{
  display:block;text-align:center;text-decoration:none;
  background:var(--glow);color:#2b1c00;font-weight:500;font-size:16px;
  padding:15px;border-radius:14px;margin:16px 0 10px;
}
.cta-line:active{transform:translateY(1px)}
.fine{font-size:12.5px;color:var(--ink-dim);line-height:1.6;margin:0}

.sponsor{
  display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:14px;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  color:var(--ink-dim);text-decoration:none;font-size:13px;line-height:1.5;
}
.sponsor img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.sponsor b{display:block;color:var(--ink);font-weight:500;font-size:14px}

/* picker */
.picker-title{font-size:15px;font-weight:400;margin:0 0 12px;color:var(--ink-dim)}
.picker-search{
  width:100%;margin:0 0 10px;padding:11px 14px;font:inherit;font-size:16px;
  color:var(--ink);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
}
.picker-search::placeholder{color:rgba(255,255,255,.45)}
.picker-list{max-height:56dvh;overflow:auto;-webkit-overflow-scrolling:touch}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;padding:14px 2px;font:inherit;font-size:16px;color:var(--ink);
  cursor:pointer;text-align:start;border-bottom:1px solid rgba(255,255,255,.07);
}
.opt small{color:var(--ink-dim);font-size:13px}
.opt[aria-selected="true"]{color:var(--glow)}
.opt[aria-selected="true"]::after{content:"✓";color:var(--glow)}

/* ---------- day mode ---------- */

/* High sun means a pale sky, so the ink flips rather than fighting it. */
body[data-lum="light"]{
  --ink:#1B2430;
  --ink-dim:rgba(27,36,48,.66);
  --sheet:rgba(255,253,248,.88);
  --sheet-solid:rgba(255,253,248,.96);
  --sheet-line:rgba(27,36,48,.12);
}
body[data-lum="light"] .place,
body[data-lum="light"] .meta-btn{border-bottom-color:rgba(27,36,48,.3)}
body[data-lum="light"] .ask-no{color:var(--ink-dim);text-decoration-color:rgba(27,36,48,.28)}
body[data-lum="light"] .scrim{background:rgba(20,26,36,.28)}
body[data-lum="light"] .times li{border-bottom-color:rgba(27,36,48,.1)}
body[data-lum="light"] .opt{border-bottom-color:rgba(27,36,48,.08)}
body[data-lum="light"] .sponsor{border-color:rgba(27,36,48,.14)}

@media (min-width:560px){
  .screen{max-width:520px;margin:0 auto}
  .sheet,.picker{left:50%;transform:translateX(-50%);max-width:520px;border-radius:22px 22px 0 0}
  @keyframes rise{from{transform:translateX(-50%) translateY(16px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
}

/* The one link out of the app, for crawlers and for anyone who wants a
   list rather than a countdown. Quiet enough not to break the screen. */
.byline{flex:0 0 auto;text-align:center;padding:0 0 4px;margin-top:-4px}
.byline a{color:var(--ink-dim);font-size:11.5px;text-decoration:none;opacity:.7;letter-spacing:.02em}
.byline a:hover{opacity:1}

/* The button answering with what it found, and the corner catching the
   eye that was on the button. Both fade out on their own. */
.ask-yes.found{background:#7bd88f;color:#123a1e}
.place.found{
  color:var(--ink);
  border-bottom-color:var(--glow);
  animation:placeFound 1.6s ease-out;
}
@keyframes placeFound{
  0%   {transform:scale(1);   opacity:.6}
  22%  {transform:scale(1.14); opacity:1}
  46%  {transform:scale(.99)}
  100% {transform:scale(1);   opacity:1}
}

/* ---------- the two things you do with a page you liked ---------- */

/*
  Stuck to the floor of the sheet.

  They were at the end of a long blessing, which meant that finding them
  required already knowing they were there. A button nobody scrolls to
  is a button that does not exist, so the row rides along instead, and
  the sheet's own padding is cancelled out so it reaches both edges.
*/
.sheet-actions{
  position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) * -1 - 22px);
  z-index:2;
  display:flex;gap:9px;margin:20px -20px 0;
  padding:14px calc(env(safe-area-inset-right,0px) + 20px)
          calc(env(safe-area-inset-bottom,0px) + 22px)
          calc(env(safe-area-inset-left,0px) + 20px);
  border-top:1px solid rgba(255,255,255,.09);
  background:var(--sheet-solid);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
.act{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:13.5px;font-weight:400;cursor:pointer;
  color:var(--ink);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  padding:12px 10px;min-height:46px;line-height:1.3;text-align:center;
}
.act:active{transform:translateY(1px)}
.act svg{opacity:.75;flex:0 0 auto}

.hint{
  margin:12px 0 0;padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-size:13.5px;line-height:1.65;color:var(--ink-dim);
}
.hint p{margin:0 0 7px;color:var(--ink)}
.hint ol{margin:0;padding-inline-start:19px}
.hint li{margin:5px 0}

body[data-lum="light"] .sheet-actions{border-top-color:rgba(27,36,48,.12)}
body[data-lum="light"] .act{background:rgba(27,36,48,.05);border-color:rgba(27,36,48,.14)}
body[data-lum="light"] .hint{background:rgba(27,36,48,.04);border-color:rgba(27,36,48,.12)}

/* Share, on the screen rather than behind a drawer: one tap from the
   thing worth sharing, and quiet enough to ignore. */
.topright{display:flex;align-items:center;gap:6px}
.iconbtn{
  display:grid;place-items:center;width:32px;height:32px;
  border:0;border-radius:50%;background:none;color:var(--ink-dim);
  cursor:pointer;padding:0;
}
.iconbtn:active{transform:translateY(1px);color:var(--ink)}
.said{font-size:12px;color:var(--ink-dim);white-space:nowrap}
.sheet-actions .act{max-width:none}

/* The divider between the offer that keeps us and the one that does not. */
.orline{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--ink-dim);font-size:12.5px}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.cta-line.quiet{
  background:none;color:var(--ink);
  border:1px solid rgba(255,255,255,.18);font-weight:400;
}
body[data-lum="light"] .orline::before,
body[data-lum="light"] .orline::after{background:rgba(27,36,48,.14)}
body[data-lum="light"] .cta-line.quiet{border-color:rgba(27,36,48,.2)}

/* The notification row, above everything else in the reminder tab. */
.pushrow{margin:0 0 6px}
.pushrow .note{border-inline-start-color:var(--glow)}

/* The one nudge on the main screen: keep the site, get the reminder. */
.setup{
  flex:0 0 auto;align-self:center;margin:2px 0 0;
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--ink);opacity:.9;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  display:inline-flex;align-items:center;gap:6px;
}
.setup:active{transform:translateY(1px)}
body[data-lum="light"] .setup{border-color:rgba(27,36,48,.2)}