/* =========================================================================
   APPORTUNITIES · the app's skin (v77, 31/10/2026)
   The customer-facing app pages (index.html, register.html, feedback.html, guide.html) wear the live site's design:
   apportunities-site/assets/home/css/home.css (d-daynight: "לילה" / "יום"). The tokens below are copied from it
   value for value (tests/theme.test.mjs compares them), so the app and the site are one world:
     Night (bare :root): a deep ocean night, glowing teal + cyan, hairlines, glass.
     Day (:root[data-mode="day"]): the same world in daylight, off-white with a sea tint, ink-navy type, deep teal.
   The mode lives in <html data-mode="night|day">, set by assets/mode.js before the first paint (the system's
   preference by default, the viewer's choice once made). A daily work tool, not a launch page: no WebGL, no 3D,
   motion is short and quiet, and nothing moves under prefers-reduced-motion.
   Logical properties only (RTL-first). Each page adds its own layout in its <style>, with these tokens only.
   ========================================================================= */

/* ---------- the site's tokens (home.css, verbatim) ---------- */
:root {
  --font: 'Heebo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Heebo', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);

  --r-2xl: 34px;
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --wrap: 1280px;
  --gutter: 48px;
  --sec-y: 176px;

  color-scheme: dark;
}

/* NIGHT */
:root {
  --bg-0: #0a1a2b;
  --bg-1: #0d2138;
  --bg-2: #102844;
  --bg-3: #133051;
  --bg-4: #173961;
  --line: rgba(150, 205, 255, .12);
  --line-2: rgba(150, 205, 255, .20);
  --line-3: rgba(150, 205, 255, .32);
  --ink: #eaf4ff;
  --ink-hi: #ffffff;
  --ink-2: #bccbdd;
  --ink-3: #91a5bd;
  --ink-4: #7a90ab;
  --teal: #2ef2d0;
  --teal-2: #19d2b3;
  --teal-3: #0d8f84;
  --teal-ink: #021411;
  --teal-tx: #8cfbe8;
  --teal-tx-hi: #c9fff5;
  --cyan: #47d7ff;
  --cyan-2: #2aa6e8;
  --cyan-tx: #9be4ff;
  --ice: #dcf8ff;
  --amber: #f3bb6a;
  --amber-tx: #e9c48f;
  --violet: #a99bff;
  --rose: #ff8fa3;
  --soon: #9aacc2;
  --wire-a: #2ef2d0;
  --wire-b: #47d7ff;
  --btn-bg: linear-gradient(180deg, #7dfde8 0%, #2ef2d0 38%, #19d2b3 100%);
  --btn-sh: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,60,50,.25), 0 0 0 1px rgba(46,242,208,.55), 0 16px 44px -14px rgba(46,242,208,.75), 0 0 0 7px rgba(46,242,208,.07);
  --btn-sh-hover: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,60,50,.25), 0 0 0 1px rgba(46,242,208,.8), 0 20px 60px -12px rgba(46,242,208,.9), 0 0 0 9px rgba(46,242,208,.10);
  --btn-ico: rgba(2, 20, 17, .14);
  --btn-shine: rgba(255, 255, 255, .55);
  --teal-rgb: 46 242 208;
  --glow-rgb: 46 242 208;
  --cyan-rgb: 71 215 255;
  --amber-rgb: 243 187 106;
  --violet-rgb: 169 155 255;
  --soon-rgb: 142 160 182;
  --rim-rgb: 150 205 255;
  --glass-rgb: 255 255 255;
  --shadow-rgb: 2 8 18;
  --scrim-rgb: 8 24 42;
  --stmt-rgb: 234 244 255;
  --glow-k: 1;
  --rim-k: 1.25;
  --glass-k: 1.15;
  --shadow-k: 1;
}

/* DAY */
:root[data-mode="day"] {
  --bg-0: #e8eeeb;
  --bg-1: #f4f7f5;
  --bg-2: #fafbfa;
  --bg-3: #ffffff;
  --bg-4: #ffffff;
  --line: rgba(11, 27, 46, .09);
  --line-2: rgba(11, 27, 46, .14);
  --line-3: rgba(11, 27, 46, .24);
  --ink: #0b1b2e;
  --ink-hi: #0b1b2e;
  --ink-2: #2e445d;
  --ink-3: #4e6279;
  --ink-4: #586b83;
  --teal: #057466;
  --teal-2: #0b9a87;
  --teal-3: #055f55;
  --teal-ink: #ffffff;
  --teal-tx: #046b60;
  --teal-tx-hi: #055a50;
  --cyan: #0b6f9c;
  --cyan-2: #0a5f86;
  --cyan-tx: #0b5f86;
  --ice: #0a9e8a;
  --amber: #9a5b10;
  --amber-tx: #9a5b10;
  --violet: #5b49b8;
  --rose: #c2415b;
  --soon: #586b83;
  --wire-a: #0a9e8a;
  --wire-b: #0b6f9c;
  --btn-bg: linear-gradient(180deg, #0b8274 0%, #097a6d 40%, #066459 100%);
  --btn-sh: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 6px rgba(0,40,35,.22), 0 0 0 1px rgba(5,95,85,.62), 0 14px 32px -14px rgba(6,110,98,.55), 0 0 0 6px rgba(10,150,132,.08);
  --btn-sh-hover: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -2px 6px rgba(0,40,35,.22), 0 0 0 1px rgba(5,95,85,.78), 0 18px 40px -14px rgba(6,110,98,.62), 0 0 0 8px rgba(10,150,132,.10);
  --btn-ico: rgba(255, 255, 255, .16);
  --btn-shine: rgba(255, 255, 255, .3);
  --teal-rgb: 10 150 132;
  --glow-rgb: 10 150 132;
  --cyan-rgb: 11 111 156;
  --amber-rgb: 196 122 24;
  --violet-rgb: 91 73 184;
  --soon-rgb: 94 113 137;
  --rim-rgb: 11 27 46;
  --glass-rgb: 255 255 255;
  --shadow-rgb: 18 38 62;
  --scrim-rgb: 244 247 245;
  --stmt-rgb: 11 27 46;
  --glow-k: .32;
  --rim-k: 1;
  --glass-k: 12;
  --shadow-k: .36;
}
:root[data-mode="day"] { color-scheme: light; }

/* ---------- the app's semantic layer: names a work screen needs, made of the site's tokens ----------
   AA was measured for every text colour on its own surfaces (night: the page, the card, a tinted chip; day: white,
   --bg-0 and a tinted chip). Where a site colour is under 4.5:1 as small text in the app, the day mode darkens it here. */
:root {
  --muted: var(--ink-3);                    /* 4.8:1 on a night card, 6.3:1 on white */
  --ok-tx: var(--teal-tx);
  --warn-tx: var(--amber);
  --warn-rgb: var(--amber-rgb);
  --bad-tx: var(--rose);
  --bad-rgb: 255 143 163;
  --info-tx: var(--cyan-tx);
  --info-rgb: var(--cyan-rgb);
  --card-bg: linear-gradient(180deg, rgba(27, 59, 98, .82), rgba(15, 37, 64, .92));
  --card-sh: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgb(var(--rim-rgb) / calc(.13 * var(--rim-k))), 0 30px 60px -30px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k)));
  --card-sh-hover: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgb(var(--teal-rgb) / .38), 0 30px 60px -28px rgb(var(--shadow-rgb) / calc(.95 * var(--shadow-k)));
  --raise: rgb(var(--glass-rgb) / calc(.035 * var(--glass-k)));
  --surface-solid: #142f50;                 /* an opaque card face: dialogs, sheets, a sticky footer inside a card */
  --field-bg: rgb(var(--glass-rgb) / calc(.045 * var(--glass-k)));
  --field-line: var(--line-2);
  --field-line-hover: var(--line-3);
  --scrim: rgb(var(--scrim-rgb) / .74);
  --glass-bar: linear-gradient(180deg, rgba(21, 47, 80, .78), rgba(15, 37, 64, .72));
  --toast-bg: #1d4472;
  --toast-ink: var(--ink-hi);
  --title-grad: linear-gradient(180deg, #ffffff 15%, #a9bfd6 115%);
  --accent-grad: linear-gradient(100deg, #9ffcec 0%, var(--teal) 40%, var(--cyan) 100%);
}
:root[data-mode="day"] {
  --warn-tx: #8a4f0c;                       /* the site's amber is 4.6:1 on --bg-0; this is 5.6:1 */
  --bad-tx: #a3324c;                        /* the site's rose is 4.3:1 on --bg-0; this is 5.7:1 */
  --bad-rgb: 194 65 91;
  --card-bg: linear-gradient(180deg, #ffffff, #fbfcfb);
  --card-sh: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .1), 0 26px 50px -28px rgba(18, 38, 62, .42);
  --card-sh-hover: inset 0 1px 0 #fff, 0 0 0 1px rgba(6, 124, 110, .42), 0 26px 50px -24px rgba(18, 38, 62, .46);
  --raise: rgba(11, 27, 46, .028);
  --surface-solid: #ffffff;
  --field-bg: #ffffff;
  --glass-bar: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(249, 251, 250, .8));
  --toast-bg: #0b1b2e;
  --toast-ink: #ffffff;
  --title-grad: linear-gradient(180deg, #0b1b2e 25%, #2a4661 120%);
  --accent-grad: linear-gradient(100deg, #056f63 0%, #0a8a80 45%, #0b6f9c 100%);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-0); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* the site's night sky, quiet: two soft hazes at the top, the page deepening below */
  background:
    radial-gradient(1100px 620px at 88% -8%, rgb(var(--teal-rgb) / calc(.075 * var(--glow-k))), transparent 62%),
    radial-gradient(900px 560px at 6% -6%, rgb(var(--cyan-rgb) / calc(.07 * var(--glow-k))), transparent 64%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-1) 55%, var(--bg-0) 140%);
  background-attachment: fixed;
}
:root[data-mode="day"] body {
  background:
    radial-gradient(820px 520px at 86% -60px, rgba(255, 214, 160, .34), transparent 72%),
    radial-gradient(980px 640px at 6% -4%, rgba(150, 236, 226, .26), transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-1) 60%, var(--bg-0) 150%);
  background-attachment: fixed;
}
/* film grain over the sky only (behind every box): the site's texture, at work-screen strength */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-mode="day"] body::before { opacity: .035; mix-blend-mode: multiply; filter: invert(1); }
img { max-width: 100%; }
a { color: var(--teal-tx); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-tx-hi); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
bdi, .num { unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.nw { white-space: nowrap; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 0; letter-spacing: 0; direction: ltr; unicode-bidi: isolate; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
::selection { background: rgb(var(--teal-rgb) / .28); color: var(--ink-hi); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.skip-link {
  position: fixed; z-index: 120; inset-block-start: 10px; inset-inline-start: 10px;
  padding: 11px 18px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  color: var(--teal-ink); background: var(--btn-bg); box-shadow: var(--btn-sh);
  transform: translateY(-200%); transition: transform .25s var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; color: var(--teal-ink); outline: 2px solid var(--ink-hi); outline-offset: 3px; }
main:focus { outline: none; }

/* ---------- type ---------- */
.t-title {
  margin: 0; font-weight: 300; letter-spacing: -.012em; line-height: 1.1; text-wrap: balance;
  background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.t-title b, .t-title strong { font-weight: 700; }
.t-title .hl { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgb(var(--glow-rgb) / calc(.24 * var(--glow-k)))); }
:root[data-mode="day"] .t-title .hl { filter: none; }
.lead { color: var(--ink-2); font-weight: 350; text-wrap: pretty; }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.045 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.012 * var(--glass-k))));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 13.5px; line-height: 1.2; font-weight: 500; color: var(--ink-2);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgb(var(--glow-rgb) / var(--glow-k)); flex: none; }
:root[data-mode="day"] .eyebrow { background: rgba(255, 255, 255, .8); border-color: rgba(11, 27, 46, .13); box-shadow: inset 0 1px 0 #fff, 0 6px 20px -12px rgba(18, 38, 62, .32); }
.kicker { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-tx); }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: baseline; gap: 9px; white-space: nowrap; text-decoration: none; color: var(--ink-hi); }
.brand:hover { color: var(--ink-hi); }
.wordmark { direction: ltr; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 18px; letter-spacing: .035em; color: var(--ink-hi); }
.wordmark i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px rgb(var(--glow-rgb) / var(--glow-k)), 0 0 2px #fff inset; flex: none; }
.brand .adam { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.brand .adam b { color: var(--ink-hi); font-weight: 600; }

/* ---------- the glass bar (the site's nav pill), used as each page's header ---------- */
.glassbar {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding-block: 8px; padding-inline: 20px 10px; border-radius: 999px;
  background: var(--glass-bar);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgb(var(--rim-rgb) / calc(.12 * var(--rim-k))), 0 24px 60px -30px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k)));
}
:root[data-mode="day"] .glassbar { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .1), 0 18px 44px -26px rgba(18, 38, 62, .4); }
.glassbar .end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
@media (max-width: 520px) {                /* a phone: the bar keeps to one line */
  .glassbar { padding-inline: 14px 6px; gap: 6px; min-height: 56px; }
  .glassbar .wordmark { font-size: 14px; letter-spacing: .015em; gap: 5px; }
  .glassbar .brand .adam { font-size: 12.5px; }
  .glassbar .navlink { padding-inline: 10px; font-size: 14px; }
}
@media (max-width: 360px) {                /* a small phone (320): the wordmark alone, as the site's nav, or the bar overflows */
  .glassbar .brand .adam { display: none; }
}
.navlink { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-2); text-decoration: none; transition: color .25s var(--ease-out), background-color .25s var(--ease-out); }
.navlink:hover { color: var(--ink-hi); background: rgb(var(--glass-rgb) / calc(.06 * var(--glass-k))); }
:root[data-mode="day"] .navlink:hover { background: rgba(11, 27, 46, .05); }

/* ---------- the day / night switch (the site's, as is): one <button aria-pressed> ---------- */
.mode-toggle {
  position: relative; isolation: isolate; flex: none;
  display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center;
  height: 40px; padding: 3px; margin: 0; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ink-2);
  background: rgb(var(--glass-rgb) / calc(.045 * var(--glass-k)));
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .3s var(--ease-out);
}
.mode-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 999px; }
.mode-toggle .mt-thumb {
  position: absolute; z-index: 0; inset-block: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--teal-rgb) / .2), rgb(var(--teal-rgb) / .07));
  box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .45), 0 0 18px -6px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k)));
  transition: inset-inline-start .55s var(--ease);
}
.mode-toggle .mt-opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding-inline: 11px 13px; transition: color .35s var(--ease-out); }
.mode-toggle .mt-ic { font-size: 14px; line-height: 1; font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif; transition: color .35s var(--ease-out); }
:root:not([data-mode="day"]) .mode-toggle .mt-n, :root[data-mode="day"] .mode-toggle .mt-d { color: var(--ink-hi); }
:root:not([data-mode="day"]) .mode-toggle .mt-n .mt-ic { color: var(--teal); }
:root[data-mode="day"] .mode-toggle .mt-thumb { inset-inline-start: 50%; background: linear-gradient(180deg, #ffffff, #f1faf7); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .42), 0 4px 12px -4px rgba(18, 38, 62, .32); }
:root[data-mode="day"] .mode-toggle .mt-d .mt-ic { color: #a86412; }
@media (hover: hover) and (pointer: fine) { .mode-toggle:hover { box-shadow: inset 0 0 0 1px var(--line-3); } .mode-toggle:hover .mt-opt { color: var(--ink-hi); } }
/* compact (phones, tight bars): the two glyphs only */
.mode-toggle.compact { height: 34px; padding: 2px; }
.mode-toggle.compact .mt-tx { display: none; }
.mode-toggle.compact .mt-opt { width: 26px; height: 30px; padding: 0; gap: 0; }
.mode-toggle.compact .mt-ic { font-size: 13px; }
.mode-toggle.compact .mt-thumb { inset-block: 2px; inset-inline-start: 2px; width: calc(50% - 2px); }
:root[data-mode="day"] .mode-toggle.compact .mt-thumb { inset-inline-start: 50%; }
@media (max-width: 600px) {                /* phones: every switch is the compact one */
  .mode-toggle:not(.full) { height: 34px; padding: 2px; }
  .mode-toggle:not(.full) .mt-tx { display: none; }
  .mode-toggle:not(.full) .mt-opt { width: 26px; height: 30px; padding: 0; gap: 0; }
  .mode-toggle:not(.full) .mt-ic { font-size: 13px; }
  .mode-toggle:not(.full) .mt-thumb { inset-block: 2px; inset-inline-start: 2px; width: calc(50% - 2px); }
  :root[data-mode="day"] .mode-toggle:not(.full) .mt-thumb { inset-inline-start: 50%; }
}
/* the switch itself: the site's soft circular wipe (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: modeWipe .62s var(--ease-io) both; }
@keyframes modeWipe { from { clip-path: circle(0 at var(--vt-x, 80%) var(--vt-y, 40px)); } to { clip-path: circle(160vmax at var(--vt-x, 80%) var(--vt-y, 40px)); } }

/* ---------- buttons ----------
   .btn: the site's pill, button-in-button (an .ico circle), with the shine sweep: the big calls to action.
   :where(button) and .p / .d / .w / .ghost: the app's everyday controls, the same material at work-screen size. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding-block: 6px; padding-inline: 24px 7px; border-radius: 999px; border: 0;
  font-family: var(--font); font-size: 16.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn .ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .5s var(--ease-out); }
.btn .ico svg { width: 17px; height: 17px; }
.btn.no-ico { padding-inline: 24px; }
.btn-primary { color: var(--teal-ink); background: var(--btn-bg); box-shadow: var(--btn-sh); }
.btn-primary:hover { color: var(--teal-ink); }
.btn-primary .ico { background: var(--btn-ico); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(255deg, transparent 22%, var(--btn-shine) 48%, transparent 74%);
  transform: translateX(110%);
}
.btn-glass {
  color: var(--ink);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.075 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.02 * var(--glass-k))));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgb(var(--rim-rgb) / calc(.16 * var(--rim-k))), 0 18px 40px -22px rgb(var(--shadow-rgb) / calc(.8 * var(--shadow-k)));
}
.btn-glass:hover { color: var(--ink-hi); }
.btn-glass .ico { background: rgb(var(--glass-rgb) / calc(.07 * var(--glass-k))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
:root[data-mode="day"] .btn-glass { background: linear-gradient(180deg, #ffffff, #f1f5f4); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .14), 0 14px 30px -18px rgba(18, 38, 62, .42); }
:root[data-mode="day"] .btn-glass .ico { background: rgba(11, 27, 46, .05); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .08); }
.btn-sm { min-height: 42px; font-size: 15px; padding-inline: 18px 5px; gap: 10px; }
.btn-sm .ico { width: 32px; height: 32px; }
.btn-sm .ico svg { width: 15px; height: 15px; }
.btn-sm.no-ico { padding-inline: 18px; }
.btn-block { display: flex; width: 100%; }
.btn-block .ico { margin-inline-start: auto; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { box-shadow: var(--btn-sh-hover); }
  .btn-primary:hover::after { transform: translateX(-110%); transition: transform .95s var(--ease-soft); }
  .btn:hover .ico { transform: translateX(-4px) scale(1.06); }
  .btn-glass:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgb(var(--rim-rgb) / calc(.30 * var(--rim-k))), 0 18px 40px -22px rgb(var(--shadow-rgb) / calc(.8 * var(--shadow-k))); }
  :root[data-mode="day"] .btn-glass:hover { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .24), 0 18px 34px -18px rgba(18, 38, 62, .5); }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: wait; }

/* everyday controls: a glass pill. :where() keeps it light, so any page class wins */
:where(button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 6px 15px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.07 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.025 * var(--glass-k))));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgb(var(--rim-rgb) / calc(.16 * var(--rim-k)));
  transition: box-shadow .25s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out), transform .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
:where(:root[data-mode="day"]) :where(button) { background: linear-gradient(180deg, #ffffff, #f3f6f5); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .14), 0 6px 14px -10px rgba(18, 38, 62, .35); }
:where(button:active) { transform: scale(.97); }
:where(button:disabled) { opacity: .55; cursor: wait; transform: none; }
@media (hover: hover) and (pointer: fine) {
  :where(button:hover) { color: var(--ink-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgb(var(--rim-rgb) / calc(.3 * var(--rim-k))); }
  :where(:root[data-mode="day"]) :where(button:hover) { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .26), 0 8px 18px -10px rgba(18, 38, 62, .4); }
}
button.p, .ab.p { color: var(--teal-ink); background: var(--btn-bg); box-shadow: var(--btn-sh); }
:root[data-mode="day"] button.p, :root[data-mode="day"] .ab.p { background: var(--btn-bg); box-shadow: var(--btn-sh); }
@media (hover: hover) and (pointer: fine) { button.p:hover, .ab.p:hover { color: var(--teal-ink); box-shadow: var(--btn-sh-hover); } :root[data-mode="day"] button.p:hover { box-shadow: var(--btn-sh-hover); } }
button.d, .ab.d { color: var(--bad-tx); }
button.w, .ab.w { color: var(--warn-tx); }
:root:not([data-mode="day"]) button.d { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgb(var(--bad-rgb) / .34); }
:root:not([data-mode="day"]) button.w { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgb(var(--warn-rgb) / .34); }
button.ghost, .ab.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
:root[data-mode="day"] button.ghost { background: transparent; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { button.ghost:hover, :root[data-mode="day"] button.ghost:hover { background: rgb(var(--glass-rgb) / calc(.06 * var(--glass-k))); box-shadow: none; } :root[data-mode="day"] button.ghost:hover { background: rgba(11, 27, 46, .05); } }
/* a link-coloured text button (in a sentence) */
.linklike { display: inline; min-height: 0; padding: 0; border-radius: 4px; background: none; box-shadow: none; color: var(--teal-tx); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
:root[data-mode="day"] .linklike { background: none; box-shadow: none; }
.linklike:hover, :root[data-mode="day"] .linklike:hover { color: var(--teal-tx-hi); box-shadow: none; background: none; }

/* ---------- fields ---------- */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), textarea, select) {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--field-line); background: var(--field-bg); color: var(--ink);
  font-family: var(--font); font-size: 15.5px; line-height: 1.45;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
:where(textarea) { resize: vertical; }
:where(select) { cursor: pointer; }
:where(input, textarea, select)::placeholder { color: var(--muted); opacity: 1; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover, textarea:hover, select:hover) { border-color: var(--field-line-hover); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible, textarea:focus-visible, select:focus-visible) {
  outline: none; border-color: rgb(var(--teal-rgb) / .75); box-shadow: 0 0 0 3px rgb(var(--teal-rgb) / .22);
}
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--teal-2); width: 18px; height: 18px; }
:root:not([data-mode="day"]) select option { background: var(--bg-2); color: var(--ink); }
.field-label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.err { color: var(--bad-tx); font-size: 14px; min-height: 1.3em; margin: 6px 0; }
.ok-msg { color: var(--ok-tx); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 2px 10px; border-radius: 999px;
  font-family: var(--font); font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--ink-2); background: rgb(var(--glass-rgb) / calc(.03 * var(--glass-k)));
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: .9; }
.chip.nodot::before { display: none; }
.chip.s, .chip-live { color: var(--ok-tx); border-color: rgb(var(--teal-rgb) / .38); background: rgb(var(--teal-rgb) / .09); }
.chip.s::before, .chip-live::before { background: var(--teal); box-shadow: 0 0 8px rgb(var(--glow-rgb) / var(--glow-k)); }
.chip.w, .chip-draft { color: var(--warn-tx); border: 1px dashed rgb(var(--warn-rgb) / .55); background: rgb(var(--warn-rgb) / .07); }
.chip.d { color: var(--bad-tx); border-color: rgb(var(--bad-rgb) / .45); background: rgb(var(--bad-rgb) / .08); }
.chip.v, .chip-beta { color: var(--info-tx); border: 1px dotted rgb(var(--info-rgb) / .7); background: rgb(var(--info-rgb) / .07); }
.chip.v::before, .chip-beta::before { background: transparent; border: 1.5px dotted currentColor; width: 7px; height: 7px; }

/* ---------- surfaces ---------- */
/* the double bezel: a glass shell around a core (the site's .shell / .core) */
.shell {
  padding: 7px; border-radius: var(--r-2xl);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.055 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.015 * var(--glass-k))));
  box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.09 * var(--rim-k))), 0 40px 90px -50px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k)));
}
.core {
  position: relative; border-radius: calc(var(--r-2xl) - 7px); overflow: hidden;
  background: linear-gradient(180deg, rgba(24, 54, 92, .86), rgba(14, 35, 61, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.06 * var(--rim-k)));
}
:root[data-mode="day"] .shell { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .07), 0 1px 0 rgba(11, 27, 46, .04), 0 34px 70px -46px rgba(18, 38, 62, .42); }
:root[data-mode="day"] .core { background: linear-gradient(180deg, #ffffff, #fbfcfb); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(11, 27, 46, .08); }
.surface { border-radius: var(--r-lg); background: var(--card-bg); box-shadow: var(--card-sh); }
.hairline { height: 1px; border: 0; margin: 18px 0; background: linear-gradient(90deg, transparent, rgb(var(--rim-rgb) / calc(.18 * var(--rim-k))) 20%, rgb(var(--teal-rgb) / .35) 50%, rgb(var(--rim-rgb) / calc(.18 * var(--rim-k))) 80%, transparent); }

/* ---------- the footer (the site's, short) ---------- */
.app-foot { margin-block-start: 48px; padding-block: 22px 28px; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.app-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.app-foot a { color: var(--ink-2); text-decoration: none; }
.app-foot a:hover { color: var(--ink-hi); text-decoration: underline; }

/* ---------- motion: off for those who ask ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  ::view-transition-new(root) { animation: none; }
}
@media print {
  body { background: #fff; }
  body::before { display: none; }
  .mode-toggle, .skip-link { display: none !important; }
}