/* Lommekjent. One stylesheet for every page, in the same language as the landing page: a cream ground with
   white panels and generous round corners, pill buttons, a floating dark navigation bar, Bricolage Grotesque for
   titles and Inter for text. One tint colour (the brand) for actions, so white-label stays intact.
   The brand arrives per request as --brand (fills), --on-brand (text on fills), --tint (text in the brand colour),
   --font (body) and --display (titles). */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/media/bricolage-grotesque.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/media/instrument-serif-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/media/inter.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --serif: "Instrument Serif", Georgia, serif;
  --brand: #a06c24; --on-brand: #ffffff; --tint: #a06c24; /* bronze gold: white text reads on it */
  --night: #0a0a0c;             /* the dark of the logo */
  --night-2: #161618;
  --nav: #ebe5d9;               /* warm sand: navigation bar, sign-in pages, toasts */
  --nav-edge: #dcd3c2;
  --gold: #d6a858;               /* the ring in the logo */
  --on-night: #f5f2ec;
  --on-night-2: #a8a196;
  --ground: #f4f1e9;            /* cream, like the light version of the logo */
  --surface: #ffffff;
  --text: #141316;
  --muted: #6b6459;
  --faint: #9b9488;
  --line: rgba(20, 19, 22, 0.1);
  --fill: rgba(20, 19, 22, 0.06);
  --fill2: rgba(20, 19, 22, 0.11);
  --field: #f8f6f0;
  --danger: #d70015;
  --ok: #248a3d;
  --switch: var(--brand);
  --warn: #b25000;
  --material: rgba(235, 229, 217, 0.88);
  --shadow: 0 1px 2px rgba(20, 19, 22, 0.04), 0 18px 40px -26px rgba(70, 45, 20, 0.28);
  --r-panel: 28px; --r-ctl: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* analytics */
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c-muted: #aeb4be; --good: #1a7f4b; --bad: #c4372c;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--ground); color: var(--text);
  font: 400 16px/1.47 var(--font); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; color: var(--text); }
h1 { font-family: var(--display); font-size: 2.5rem; font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; }
h3 { font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); } /* section header, like the landing page's kickers */
::selection { background: var(--gold); color: var(--night); }
p { margin: 0; }
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
strong, b { font-weight: 600; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; line-height: 1.4; }
.error { color: var(--danger); font-size: 0.875rem; }
.error:empty { display: none; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.center { display: flex; justify-content: center; }
.url { font: 0.875rem/1.4 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; word-break: break-all; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.powered { text-align: center; color: var(--faint); font-size: 0.75rem; padding: 2.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
:focus { outline: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; border-radius: 14px; }

/* ---------- buttons: filled (primary), grey (default), plain (quiet) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px;
  padding: 0.65rem 1.35rem; border: 0; border-radius: 999px; background: var(--fill); color: var(--text);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color 0.2s, opacity 0.15s, transform 0.35s var(--spring), box-shadow 0.3s;
}
.btn:hover { background: var(--fill2); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: scale(0.97); opacity: 0.85; }
.btn.primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand) 80%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--brand) 90%, transparent); }
.btn.quiet { background: transparent; color: var(--tint); }
.btn.quiet:hover { background: var(--fill); }
.btn.danger { color: var(--danger); }
.btn.primary.danger { background: var(--danger); color: #fff; }
.btn.sm { min-height: 32px; padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.875rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: default; transform: none; }
.btn.block { width: 100%; }

/* ---------- form fields ---------- */
label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
label > small, legend small { font-size: 0.75rem; color: var(--faint); font-weight: 400; }
input, select, textarea {
  display: block; width: 100%; margin-top: 0.4rem; padding: 0.8rem 1rem; border: 0; border-radius: var(--r-ctl);
  background: var(--field); color: var(--text); font: inherit; font-size: 1rem; letter-spacing: -0.011em;
  transition: background-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 1.5px var(--brand), 0 0 0 5px color-mix(in srgb, var(--brand) 20%, transparent); outline: none; }
input.bad { box-shadow: 0 0 0 2px var(--danger); }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
textarea.mono { font: 0.8125rem/1.45 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }
select {
  padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3-3 3 3M3 7.5l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center;
}
input[type="search"] { padding-left: 2.3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%238e8e93' stroke-width='1.7'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%238e8e93' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.8rem center; }
input[type="search"]::-webkit-search-decoration { display: none; }
/* colour well: a round swatch, as in iOS */
input[type="color"] { width: 44px; height: 44px; padding: 3px; border-radius: 50%; background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #5ac8fa, #007aff, #af52de, #ff2d55, #ff3b30); cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 2px solid #fff; border-radius: 50%; }
input[type="color"]::-moz-color-swatch { border: 2px solid #fff; border-radius: 50%; }
/* file picker: a grey button and the file name */
input[type="file"] { padding: 0.45rem 0.5rem; font-size: 0.875rem; color: var(--muted); cursor: pointer; }
input[type="file"]::file-selector-button { margin-right: 0.75rem; padding: 0.4rem 0.9rem; border: 0; border-radius: 999px; background: #fff; color: var(--tint); font: inherit; font-weight: 600; box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.15); cursor: pointer; }
/* switches */
input[type="checkbox"] {
  position: relative; display: inline-block; flex: none; width: 51px; height: 31px; margin: 0 0.75rem 0 0; padding: 0;
  border-radius: 999px; background: var(--fill2); vertical-align: middle; cursor: pointer; transition: background-color 0.2s;
}
input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06); transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1); }
input[type="checkbox"]:checked { background: var(--switch); }
input[type="checkbox"]:checked::after { transform: translateX(20px); }
input[type="checkbox"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 28%, transparent); background: var(--fill2); }
input[type="checkbox"]:checked:focus { background: var(--switch); }
input[type="checkbox"]::after { transition: transform 0.35s var(--spring); }
.check { display: flex; align-items: center; gap: 0; min-height: 44px; font-size: 1rem; color: var(--text); cursor: pointer; }
.check > span, .check > small { margin-left: 0.45rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 0.25rem; font-size: 1rem; color: var(--text); }
details summary { cursor: pointer; color: var(--tint); font-weight: 500; width: fit-content; list-style-position: inside; }
details.more { padding-top: 0.25rem; }

/* ---------- navigation bar ---------- */
.topbar {
  position: sticky; top: 10px; z-index: 30; display: flex; align-items: center; gap: 1.25rem;
  width: min(1100px, calc(100% - 20px)); margin: 10px auto 0; min-height: 56px; padding: 0.45rem 0.6rem 0.45rem 0.6rem;
  border-radius: 999px; background: var(--material); color: var(--text);
  -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px);
  box-shadow: inset 0 0 0 1px var(--nav-edge), 0 14px 34px -18px rgba(70, 45, 20, 0.35);
}
.brandlink { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; color: var(--text); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.03em; text-decoration: none; }
.brandlink:hover { text-decoration: none; }
.mark { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; }
.mark.big { width: 72px; height: 72px; border-radius: 22px; font-size: 1.35rem; }
/* An uploaded logo keeps its own shape (--ar, trimmed by the server) and is placed for what it sits on, the same
   way as on the cards: own background as is, bare when it stands out, otherwise on a light or dark plate. */
.mark.has-img {
  --mh: 36px; display: inline-flex; align-items: center; justify-content: center;
  width: calc((var(--mh) - 8px) * var(--ar, 1) + 14px); height: var(--mh); max-width: 170px;
  padding: 4px 7px; border-radius: 11px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.2);
}
.mark.has-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mark.has-img.dark { background: #141316; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); }
.mark.has-img.bare, .mark.has-img.own { width: calc(var(--mh) * var(--ar, 1)); padding: 0; background: none; box-shadow: none; }
.mark.has-img.own img { border-radius: 9px; }
.mark.big.has-img { --mh: 76px; max-width: 300px; padding: 9px 14px; border-radius: 20px; }
.mark.big.has-img.bare, .mark.big.has-img.own { padding: 0; }
/* When the logo replaces the written name it gets a little more room */
.brandlink.has-logo .mark.has-img { --mh: 40px; max-width: 190px; }
main.auth > .mark.big.has-img { --mh: 92px; max-width: 320px; margin-bottom: 1.75rem; }
.joinhead .mark.has-img { --mh: 44px; max-width: 220px; }
.pc-mark.has-img { overflow: hidden; }
#nav { display: flex; align-items: center; gap: 0.15rem; flex: 1; min-width: 0; }
#nav a, #nav button {
  flex: none; padding: 0.5rem 0.9rem; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: inherit; font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
#nav a:hover, #nav button:hover { background: rgba(255, 255, 255, 0.6); color: var(--text); text-decoration: none; }
#nav a[aria-current="page"] { background: #fff; color: var(--text); font-weight: 600; }
#nav #leave { color: var(--tint); }
#nav .end { margin-left: auto; background: var(--text); color: #fff; font-weight: 600; }
#nav .end:hover { background: var(--night-2); color: #fff; }
/* The glass lens (navglass.js): a pane of Liquid Glass that rests under the current section and glides to the item
   under the pointer. Nearly clear, it brightens and saturates what is behind it, with a thin specular rim that
   catches light top-left and bottom-right, as in the iOS 27 tab bar. */
#nav.has-lens { position: relative; isolation: isolate; }
#nav.has-lens a, #nav.has-lens button { position: relative; z-index: 1; transition: color 0.3s var(--ease), transform 0.45s var(--spring); }
#nav.has-lens a:hover, #nav.has-lens button:not(.end):hover { background: none; }
#nav.has-lens a[aria-current="page"] { background: none; color: var(--text); }
#nav.has-lens .under-lens { color: var(--text); transform: scale(1.04); }
.navlens {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; /* position, size and stretch are set per frame by navglass.js */
  border-radius: 999px; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
  /* on the light bar the glass is a brighter, whiter pane with a soft lavender shadow under it */
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.95), transparent 65%),
    rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(1.6) brightness(1.08); backdrop-filter: blur(6px) saturate(1.6) brightness(1.08);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 1),
    inset 0 -1px 0.5px rgba(176, 124, 46, 0.12),
    inset 0 0 12px rgba(255, 255, 255, 0.6),
    0 6px 16px -8px rgba(90, 60, 25, 0.45),
    0 0 0 0.5px rgba(176, 124, 46, 0.18);
  transition: opacity 0.3s var(--ease);
  will-change: transform, width;
}
.navlens::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(176, 124, 46, 0.08) 52%, rgba(255, 255, 255, 0.35) 74%, rgba(255, 255, 255, 0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.navlens.on { opacity: 1; }


/* ---------- page layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 2.25rem max(1.25rem, env(safe-area-inset-left)) 2.5rem; }
.wrap.narrow { max-width: 560px; }
.wrap > * + * { margin-top: 1.75rem; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.head > .muted { font-size: 0.9375rem; }
section > h2 + p.muted, section > h2 + .muted { margin-top: 0.35rem; }

/* Panels: white rounded groups on the grey ground (inset grouped). Forms in the console sit in one. */
.panel, .banner, .table-scroll, .gallery, .facts > div, .editor > form, .editor > #pform,
.wrap form.stack:not(.bare), .chartcard, .kpi, .empty {
  background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow);
}
.wrap form.stack:not(.bare), .editor > form, .editor > #pform, .panel { padding: 1.5rem; }
.wrap .banner form.stack, .wrap .gallery form.stack, .wrap .chartcard form.stack { background: none; padding: 0; box-shadow: none; border-radius: 0; }
.banner { padding: 1rem 1.15rem; }
.banner.stack > * + * { margin-top: 0.75rem; }
section.stack > h2 + p.small { margin-top: 0.35rem; }
.wrap section.stack > form.stack { margin-top: 0.75rem; }

/* sign-in, setup, invite and error pages */
.auth { width: 100%; max-width: 420px; margin: 0 auto; padding: max(10vh, 3rem) 1.25rem 2rem; }
body:has(> main.auth), html:has(main.auth) {
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(214, 168, 88, 0.55), transparent 70%),
    radial-gradient(50% 40% at 85% 100%, rgba(176, 124, 46, 0.22), transparent 70%),
    var(--nav);
  background-attachment: fixed; color: var(--text);
}
main.auth > h1 { color: var(--text); font-size: 2.75rem; }
main.auth > p.muted { color: var(--muted); }
main.auth > .mark { box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brand) 70%, transparent); }
body:has(> main.auth) .powered { color: var(--faint); }
/* Back to the landing page, top left of the sign-in page (only where the landing page is shown) */
.auth-back {
  position: absolute; top: calc(1rem + env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left));
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem 0.55rem 0.85rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.6); color: var(--text); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--nav-edge);
  transition: background-color 0.2s, transform 0.35s var(--spring);
}
.auth-back:hover { background: #fff; text-decoration: none; transform: translateX(-2px); }
.auth-back span { transition: transform 0.35s var(--spring); }
.auth-back:hover span { transform: translateX(-3px); }
.auth-back + main.auth { padding-top: max(12vh, 5.5rem); }
.auth .mark { margin-bottom: 1.25rem; }
.auth h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.auth > p.muted { margin-bottom: 1.5rem; }
.auth h1 + form { margin-top: 1.5rem; }
.auth form { background: var(--surface); color: var(--text); border-radius: var(--r-panel); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); padding: 1.5rem; }
.auth form .btn.primary { width: 100%; min-height: 50px; font-size: 1.0625rem; margin-top: 1.5rem; }
.auth form .error + .btn.primary { margin-top: 0.75rem; }
.auth.oops { text-align: center; padding-top: max(16vh, 4rem); }
.auth.oops h1 { font-size: 2.25rem; }
.auth.oops .muted { margin: 0.5rem 0 1.75rem; }
.oops-code { font-family: var(--serif); font-style: italic; font-size: 4.5rem; line-height: 1; color: var(--brand) !important; margin-bottom: 0.75rem; }

/* ---------- lists and tables (inset grouped) ---------- */
.table-scroll { overflow-x: auto; padding: 0.2rem 1.15rem; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th { padding: 0.8rem 0.75rem 0.45rem 0; text-align: left; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
td { padding: 0.75rem 0.75rem 0.75rem 0; border-top: 0.5px solid var(--line); vertical-align: middle; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:first-child td { border-top: 0; }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
td .row { flex-wrap: nowrap; }
.pill { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--fill); color: var(--muted); font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.pill.on { background: color-mix(in srgb, var(--ok) 13%, #fff); color: var(--ok); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0; }
.facts > div { display: flex; flex-direction: column; padding: 1.25rem 1.4rem; }
.facts dt { order: 2; color: var(--muted); font-size: 0.8125rem; }
.facts dd { margin: 0; font-family: var(--display); font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.items { display: grid; gap: 0.5rem; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.2rem; border-radius: 20px; transition: transform 0.35s var(--spring), background-color 0.2s; background: var(--surface); color: var(--text); box-shadow: var(--shadow); text-decoration: none; }
a.item:hover { text-decoration: none; background: #fdfcf8; transform: translateY(-2px); }
a.item > span:last-child { color: var(--faint); font-size: 1.25rem; }
.empty { display: grid; justify-items: center; gap: 0.5rem; padding: 3rem 1.5rem; text-align: center; }
.empty > svg { width: 44px; height: 44px; color: var(--tint); margin-bottom: 0.25rem; }
.empty strong { font-family: var(--display); font-size: 1.375rem; letter-spacing: -0.03em; }
.empty p { max-width: 46ch; }
.empty .btn { margin-top: 0.75rem; }
.search { max-width: 460px; }

/* segmented control */
.segs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--fill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segs::-webkit-scrollbar { display: none; }
.segs button { flex: none; padding: 0.5rem 1.05rem; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 0.15s, box-shadow 0.15s; }
.segs button[aria-pressed="true"] { background: var(--text); color: var(--ground); font-weight: 600; box-shadow: 0 6px 14px -8px rgba(20, 19, 22, 0.6); }

/* editor with a sticky live preview beside it */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
.editor .preview { position: sticky; top: 5rem; }
.editor .preview > .muted { margin-top: 0.75rem; text-align: center; }
@media (max-width: 860px) { .editor { grid-template-columns: 1fr; } .editor .preview { position: static; order: -1; } }
.joinbox { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; padding: 1.5rem; border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow); }
.joinbox img { width: 148px; height: 148px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 0.5px var(--line); }
.logopick { display: flex; gap: 1rem; align-items: center; }
.logopick .mark.big { background: var(--fill); color: var(--faint); }
.logopick .stack > * + * { margin-top: 0.4rem; }

/* toast: a floating capsule, like a HUD */
#toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 0.75rem);
  max-width: min(440px, calc(100vw - 2rem)); padding: 0.75rem 1.15rem; border-radius: 22px;
  background: rgba(235, 229, 217, 0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--text);
  font-size: 0.9375rem; font-weight: 500; text-align: center; box-shadow: inset 0 0 0 1px var(--nav-edge), 0 14px 34px -14px rgba(70, 45, 20, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: rgba(215, 0, 21, 0.94); color: #fff; box-shadow: 0 14px 34px -14px rgba(120, 0, 10, 0.5); }

/* alert sheet (replaces confirm/prompt) */
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1.5rem; background: rgba(0, 0, 0, 0); transition: background-color 0.18s; }
.sheet-backdrop.in { background: rgba(18, 12, 31, 0.42); }
.sheet { width: min(320px, 100%); overflow: hidden; border-radius: 26px; background: rgba(250, 248, 243, 0.95); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.35); text-align: center; transform: scale(1.1); opacity: 0; transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.18s; }
.sheet-backdrop.in .sheet { transform: scale(1); opacity: 1; }
.sheet-body { padding: 1.2rem 1rem 1rem; }
.sheet h2 { font-size: 1.25rem; letter-spacing: -0.03em; }
.sheet p { margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.35; color: var(--text); }
.sheet-input { margin-top: 0.9rem; padding: 0.5rem 0.6rem; border-radius: 8px; background: #fff; font-size: 0.9375rem; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.3); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid rgba(60, 60, 67, 0.29); }
.sheet-actions button { min-height: 50px; border: 0; background: none; color: var(--tint); font: inherit; font-size: 1.0625rem; cursor: pointer; }
.sheet-actions button + button { border-left: 0.5px solid rgba(60, 60, 67, 0.29); }
.sheet-actions button:hover { background: rgba(0, 0, 0, 0.04); }
.sheet-actions .strong { font-weight: 600; }
.sheet-actions .destructive { color: var(--danger); font-weight: 600; }

/* ---------- the pass card: the one expressive element ---------- */
.pcard {
  --card-bg: #333; --card-fg: #fff; --notch: var(--ground);
  width: min(340px, 100%); padding: 22px; overflow: hidden; border-radius: 26px; background-color: var(--card-bg); color: var(--card-fg);
  /* the same brushed-metal sheen as the Wallet pass picture: broad bands of light and shade across the card */
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0.2) 29%, rgba(255, 255, 255, 0) 41%,
    rgba(0, 0, 0, 0.09) 52%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.1) 72%, rgba(255, 255, 255, 0) 84%, rgba(0, 0, 0, 0.07) 96%);
  box-shadow: 0 18px 34px -20px rgba(60, 70, 90, 0.4), 0 1px 3px rgba(60, 70, 90, 0.1);
}
.pc-head { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 1.1rem; }
.pc-title { flex: 1; min-width: 0; align-self: center; }
.pc-mark { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--card-fg); color: var(--card-bg); font-size: 0.75rem; font-weight: 700; }
.pc-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.pc-prog { font-size: 0.8125rem; opacity: 0.78; }
.pc-stamps { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px; }
.pc-slot { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--card-fg) 38%, transparent); }
.pc-slot.on { border-color: var(--card-fg); background: var(--card-fg); }
.more-tpls { display: grid; gap: 10px; }
.more-tpls summary { cursor: pointer; font-weight: 600; color: var(--brand, #a06c24); padding: 6px 0; }
.more-tpls[open] summary { margin-bottom: 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 4px; }
.swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--surface, #fff); box-shadow: 0 0 0 1px rgba(20, 19, 22, 0.16);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sw) 70%, #fff), var(--sw) 55%, color-mix(in srgb, var(--sw) 75%, #000)); cursor: pointer; transition: transform 0.15s; }
.swatch:hover { transform: scale(1.1); }
.swatch:focus-visible { outline: 2px solid var(--brand, #a06c24); outline-offset: 2px; }
.pc-slot.last:not(.on) { border: 3px solid var(--reward, #f3d08a); }
.pc-slot svg { width: 58%; height: 58%; fill: var(--card-bg); }
.pc-slot.pop { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }
.pc-points { display: flex; align-items: baseline; gap: 0.5rem; }
.pc-points b { font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.pc-label { align-self: center; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.78; }
.pc-points.pc-word b { font-size: 2.4rem; }
.pc-perks { display: grid; gap: 0.3rem; margin: 0.9rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.pc-perks li::before { content: "✓"; margin-right: 0.5rem; opacity: 0.8; }
.pc-rewards { display: grid; gap: 0.3rem; margin: 0.9rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.pc-rewards li { display: flex; justify-content: space-between; gap: 1rem; opacity: 0.7; }
.pc-rewards li.ok { opacity: 1; font-weight: 600; }
.pc-rewards b { font-variant-numeric: tabular-nums; }
.pc-terms { margin: 0.8rem 0 0; font-size: 0.72rem; line-height: 1.4; opacity: 0.7; }
.pcard.expired { filter: grayscale(0.85); opacity: 0.85; }
.pc-bar { height: 8px; margin-top: 0.9rem; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--card-fg) 25%, transparent); }
.pc-bar i { display: block; height: 100%; border-radius: 99px; background: var(--card-fg); transition: width 0.4s; }
.pc-perf { position: relative; margin: 20px -20px 16px; border-top: 2px dashed color-mix(in srgb, var(--card-fg) 36%, transparent); }
.pc-perf::before, .pc-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--notch); }
.pc-perf::before { left: -10px; }
.pc-perf::after { right: -10px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pc-note { font-weight: 600; line-height: 1.3; }
.pc-who { margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 400; opacity: 0.78; }
.pc-qr { flex: none; width: 72px; height: 72px; margin: -4px -6px 0 0; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.pc-news { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid color-mix(in srgb, var(--card-fg) 25%, transparent); font-size: 0.9rem; }
.chartcard .pcard, .panel .pcard, .banner .pcard { --notch: var(--surface); }
/* The business logo on the card, sized by its shape (--ar, width / height) and placed by logoPlacement() in card.js:
   own = it has its own background; bare = straight on the card; light / dark = on a plate that makes it readable.
   A wordmark (logo-wide) replaces the name and gets more room. */
.pc-logo {
  --lh: 46px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: calc((var(--lh) - 12px) * var(--ar, 1) + 18px); height: var(--lh); max-width: 68%;
  padding: 6px 9px; border-radius: 13px; background: #fff; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.25);
}
.pc-logo img { display: block; width: 100%; height: 100%; padding: 0; object-fit: contain; }
.pc-logo.dark { background: #141316; }
.pc-logo.bare { width: calc(var(--lh) * var(--ar, 1)); padding: 0; border-radius: 0; background: none; box-shadow: none; }
.pc-logo.own { width: calc(var(--lh) * var(--ar, 1)); padding: 0; background: none; }
.pc-logo.own img { border-radius: 11px; }
.pc-head.logo-wide .pc-logo { --lh: 54px; max-width: 74%; }
.pc-head.logo-wide { align-items: center; }
.pc-head.logo-wide .pc-prog { opacity: 0.85; }
.pcard.glass .pc-logo.light { background: #fff; }
.pcard.glass .pc-logo.dark { background: #141316; }
.pcard.glass .pc-logo.bare, .pcard.glass .pc-logo.own { background: none; }

/* ---------- Liquid Glass cards (a per-card option) ----------
   Modelled on Apple's material as iOS 27 tunes it: the pane itself is nearly colourless and diffuses what is behind it
   strongly; its edge catches light as a thin specular rim, brightest where the light falls (top left, bottom right);
   a faint inner glow gives the glass thickness. No gloss, no gradient sheen. Everything ON the glass (stamps, logo,
   code) is solid, so it reads at a glance. Two looks, like the system setting: clear and tinted. */
.pcard.glass {
  --card-fg: #fff !important;
  position: relative; isolation: isolate; overflow: visible;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(34px) saturate(1.6) brightness(1.04); backdrop-filter: blur(34px) saturate(1.6) brightness(1.04);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.10), inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 10px 34px -10px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.pcard.glass.tinted { background: color-mix(in srgb, var(--card-bg) 52%, rgba(0, 0, 0, 0.12)); }
.pcard.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.18) 22%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.18) 78%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.pcard.glass .pc-mark { background: #fff; color: color-mix(in srgb, var(--card-bg) 75%, #000); }
.pcard.glass .pc-slot { border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; }
.pcard.glass .pc-slot.on { border-color: #fff; background: #fff; }
.pcard.glass .pc-slot svg { fill: color-mix(in srgb, var(--card-bg) 80%, #000); }
.pcard.glass .pc-perf { border-top-color: rgba(255, 255, 255, 0.45); } /* same dashed line and side notches as a solid card */
/* On a full-page glass backdrop there is no plain colour to cut the notches with, so they are left out there */
body.glass-page .pcard.glass .pc-perf::before, body.glass-page .pcard.glass .pc-perf::after { display: none; }
.pcard.glass .pc-bar { background: rgba(255, 255, 255, 0.22); }
.pcard.glass .pc-bar i { background: #fff; }
.pcard.glass .pc-news { border-top-color: rgba(255, 255, 255, 0.3); }
.pcard.glass .pc-qr { box-shadow: none; }
/* What the glass sits on: a calm wallpaper of defined shapes in the card's colour, so the diffusion is visible. */
.glass-stage, body.glass-page {
  --wall: color-mix(in srgb, var(--card-bg) 40%, #0e0e14);
  --s1: color-mix(in srgb, var(--card-bg) 85%, #fff);
  --s2: color-mix(in srgb, var(--card-bg) 55%, #ff7a59);
  --s3: color-mix(in srgb, var(--card-bg) 55%, #ffd36b);
  background:
    radial-gradient(circle at 18% 22%, var(--s1) 0 14%, transparent 21%),
    radial-gradient(circle at 86% 46%, var(--s2) 0 16%, transparent 24%),
    radial-gradient(circle at 30% 88%, var(--s3) 0 10%, transparent 17%),
    linear-gradient(160deg, color-mix(in srgb, var(--card-bg) 70%, #0e0e14), var(--wall) 70%);
}
/* The stage is exactly the card's size and shape, so a glass card has the same outline as a solid one. */
.glass-stage { position: relative; isolation: isolate; width: min(340px, 100%); padding: 0; border-radius: 26px; overflow: hidden; }
.glass-stage .pcard { width: 100%; }
.editor .preview .glass-stage { margin: 0 auto; }
body.glass-page { color: #fff; background-attachment: fixed; background-size: 100vw 100vh; }
body.glass-page .joinhead, body.glass-page .intro h1 { color: #fff; }
body.glass-page .join .intro p, body.glass-page .passpage .intro p, body.glass-page .join .intro .muted { color: rgba(255, 255, 255, 0.82); }
body.glass-page .hint, body.glass-page .powered { color: rgba(255, 255, 255, 0.75); }
body.glass-page .join .segs { background: rgba(255, 255, 255, 0.16); }
body.glass-page .join .segs button { color: #fff; }
body.glass-page .join .segs button[aria-pressed="true"] { color: var(--text); }
body.glass-page .wbtn.google { box-shadow: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pcard.glass { background: color-mix(in srgb, var(--card-bg) 55%, #222); }
}
@media (prefers-reduced-transparency: reduce) {
  .pcard.glass, .pcard.glass.tinted { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--card-bg) 60%, #1c1c1e); }
}

/* ---------- customer pages: sign up and the card ---------- */
.public .join, .public .passpage { max-width: 420px; margin: 0 auto; padding: calc(2rem + env(safe-area-inset-top)) 1.25rem 1rem; }
.public .pcard { width: 100%; }
body.public:not(.glass-page) {
  background:
    radial-gradient(70% 38% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 75%),
    var(--ground);
  background-attachment: fixed;
}
.joinhead { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.03em; }
.join .segs { margin-bottom: 1.25rem; }
.join .intro, .passpage .intro { margin: 0 0 1.5rem; }
.join .intro p, .passpage .intro p { margin-top: 0.4rem; color: var(--muted); font-size: 1.0625rem; }
.join form { margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow); }
.join form .btn.primary { width: 100%; min-height: 50px; font-size: 1.0625rem; }
.passpage .stack { margin-top: 1.25rem; }
.wbtn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.8rem 1rem; border-radius: 12px; background: #000; color: #fff; font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.wbtn:hover { text-decoration: none; opacity: 0.88; }
.wbtn.google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; }
.hint { color: var(--muted); font-size: 0.875rem; text-align: center; }

/* ---------- staff scanner ---------- */
.viewfinder { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 32px; background: #000; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.3); }
.viewfinder video { display: block; width: 100%; height: 100%; object-fit: cover; }
.viewfinder .vf-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; text-align: center; }
.vf-frame { position: absolute; inset: 14%; pointer-events: none; }
.vf-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; opacity: 0.95; }
.vf-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.vf-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.vf-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.vf-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.vf-frame::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--brand), transparent); box-shadow: 0 0 14px var(--brand); animation: sweep 2.2s ease-in-out infinite alternate; }
@keyframes sweep { from { top: 6%; } to { top: 94%; } }
.vf-frame.ok i { border-color: #34c759; transition: border-color 0.15s; }
.vf-frame.ok::after { display: none; }
.bigfield { font-size: 1.125rem; letter-spacing: 0.02em; }
.actions { display: grid; gap: 0.75rem; }
.actions .btn { min-height: 50px; }
.stepper { display: inline-flex; align-items: center; gap: 0.35rem; padding: 3px; border-radius: 999px; background: var(--fill); }
.stepper button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.15); }
.stepper button:active { transform: scale(0.94); }
.stepper output { min-width: 2.2rem; text-align: center; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- cards page ---------- */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem 1.5rem; }
.cardtile { display: grid; gap: 0.75rem; align-content: start; }
.cardtile.off .tilepv { opacity: 0.5; }
.tilemeta { display: grid; gap: 0.15rem; }
.tilemeta strong { font-size: 1.0625rem; }
.gallery { display: grid; gap: 1rem; padding: 1.25rem; }
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.tpl { display: grid; gap: 0.3rem; align-content: start; padding: 1.15rem; border: 0; border-radius: 22px; background: var(--field); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s, transform 0.35s var(--spring); }
.tpl:hover { background: #efe9dc; transform: translateY(-2px); }
.tpl:active { transform: scale(0.98); }
.tpl:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); }
.tplicon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 0.4rem; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.tplicon svg { width: 22px; height: 22px; }
.tierrow { display: grid; grid-template-columns: 1fr 4rem auto; gap: 0.75rem; align-items: end; padding: 1rem; border-radius: 20px; background: var(--field); }
.tierrow input:not([type="color"]):not([type="checkbox"]) { background: #fff; }
.tierrow .wide { grid-column: 1 / -1; }
.tierrow .on-sale { min-height: 44px; }
textarea[name="perks"] { min-height: 4.5rem; }

/* points program builder */
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 6rem auto; gap: 0.6rem; align-items: end; }
.lrow.bonus { grid-template-columns: minmax(0, 1fr) 6rem auto; }
.lrow.bonus > div { grid-column: 1 / -1; order: 3; }
.lrow.reward { grid-template-columns: minmax(0, 1fr) 8rem auto; }
.days { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.35rem; }
.days button { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--fill); color: var(--text); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
.days button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.psec { display: grid; gap: 0.75rem; padding-top: 1.25rem; border-top: 0.5px solid var(--line); }
.psec h2 { font-size: 1.25rem; }

/* lock-screen notification preview */
.notif { display: flex; gap: 0.7rem; align-items: flex-start; max-width: 360px; padding: 0.8rem 0.9rem; border-radius: 20px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.notif > div { flex: 1; min-width: 0; }
.notif-icon { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--brand); color: var(--on-brand); font-size: 0.75rem; font-weight: 700; }
.notif-top { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.notif-top span { color: var(--muted); }
.notif p { margin-top: 0.1rem; font-size: 0.9375rem; overflow-wrap: anywhere; }
.preview .notif { margin: 0 auto; }
.notif-icon.has-img { padding: 5px; background: var(--icon-bg, var(--brand)); }
.notif-icon.has-img.own { padding: 0; overflow: hidden; }
.notif-icon.has-img.light img, .notif-icon.has-img.dark img { padding: 3px; border-radius: 6px; background: #fff; }
.notif-icon.has-img.dark img { background: #141316; }
.notif-icon.has-img img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- analytics ---------- */
.an-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.custom-range { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.custom-range label { margin: 0; }
.custom-range input { margin-top: 0.15rem; padding: 0.45rem 0.6rem; background: #fff; box-shadow: inset 0 0 0 0.5px var(--line); }
.menu { position: relative; }
.menu > div { position: absolute; top: calc(100% + 8px); right: 0; z-index: 25; display: grid; min-width: 240px; padding: 0.4rem; border-radius: 20px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.menu > div[hidden] { display: none; }
.menu a { padding: 0.6rem 0.85rem; border-radius: 14px; color: var(--text); font-size: 0.9375rem; text-decoration: none; }
.menu a:hover { background: var(--fill); text-decoration: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; }
.kpi { display: grid; gap: 0.15rem; align-content: start; padding: 1.2rem 1.35rem; }
.kpi > span:first-child { color: var(--muted); font-size: 0.8125rem; }
.kpi > b { font-family: var(--display); font-size: 2.125rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
.kpis.minor .kpi > b { font-size: 1.375rem; }
.chartcard .kpis.minor .kpi { box-shadow: none; background: var(--field); }
.delta { display: inline-flex; gap: 0.25rem; align-items: center; font-size: 0.8125rem; font-weight: 600; }
.delta i { font-size: 0.6rem; font-style: normal; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); font-weight: 400; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.wrap #anbody > * + * { margin-top: 1rem; }
.chartcard { min-width: 0; padding: 1.4rem 1.5rem; }
.chartcard > header { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.25rem; }
.chartcard h2 { font-size: 1.25rem; letter-spacing: -0.03em; }
.chartcard .sub { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.8125rem; }
.chartcard .table-scroll { box-shadow: none; padding: 0; border-radius: 0; }
.chart, .heat { position: relative; }
.chart svg { display: block; max-width: 100%; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.chart .cross line { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.tt { position: absolute; z-index: 5; display: grid; gap: 0.1rem; padding: 0.5rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); font-size: 0.8125rem; white-space: nowrap; pointer-events: none; }
.tt[hidden] { display: none; }
.tt i, .legend i, .sb-key i { display: inline-block; width: 9px; height: 9px; margin-right: 0.4rem; border-radius: 3px; }
.legend { display: flex; gap: 1rem; margin-bottom: 0.4rem; color: var(--muted); font-size: 0.8125rem; }
.tview { margin-top: 0.6rem; font-size: 0.875rem; }
.tview .table-scroll { max-height: 260px; overflow: auto; background: none; }
.bl { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.bl li { display: grid; grid-template-columns: minmax(6rem, 40%) 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.9375rem; }
.bl-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-l small { display: block; color: var(--muted); font-size: 0.75rem; }
.bl-t { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--fill); }
.bl-t span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bl b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sb { display: flex; gap: 2px; height: 14px; margin: 0.4rem 0 0.75rem; overflow: hidden; border-radius: 7px; }
.sb span { min-width: 3px; }
.sb-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.35rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.sb-key small { color: var(--muted); }
.heat-grid { display: grid; grid-template-columns: 2.2rem repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.heat-grid .hc { aspect-ratio: 1; min-height: 10px; border-radius: 3px; }
.hd, .hl { color: var(--muted); font-size: 0.6875rem; }
.heat-key { display: flex; gap: 3px; align-items: center; justify-content: flex-end; margin-top: 0.6rem; color: var(--muted); font-size: 0.6875rem; }
.heat-key i { width: 14px; height: 10px; border-radius: 2px; }
.seg-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.seg-extra div { display: grid; gap: 0.2rem; justify-items: start; padding: 0.95rem 1.05rem; border-radius: 20px; background: var(--field); }
.seg-extra b { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.seg-extra .btn { margin-top: 0.3rem; background: #fff; }
.attn { display: grid; gap: 0.5rem; }
.attn .item { box-shadow: none; background: var(--field); }
.attn h3 { margin: 0.6rem 0 0.15rem; }
.sortable th button { all: unset; cursor: pointer; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; }
.sortable th button[aria-sort] { color: var(--text); }
.sortable tbody tr { cursor: pointer; }
.sortable tbody tr:hover td { background: #faf8f2; }
.usebar { display: inline-block; width: 56px; height: 6px; margin-right: 0.35rem; overflow: hidden; border-radius: 3px; background: var(--fill2); vertical-align: middle; }
.usebar i { display: block; height: 100%; background: var(--c1); }
.usebar.hot i { background: var(--c2); }
.linkbuilder { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-top: 1rem; }
.linkbuilder label { flex: 1 1 140px; margin: 0; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; }
  h1 { font-size: 2.1rem; }
  main.auth > h1 { font-size: 2.35rem; }
  .wrap { padding-top: 1.25rem; }
  .wrap > * + * { margin-top: 1.5rem; }
  /* nav bar: name and Sign out on top, the sections scroll sideways underneath */
  .topbar { flex-wrap: wrap; gap: 0.35rem 0.75rem; top: calc(6px + env(safe-area-inset-top)); width: calc(100% - 12px); margin-top: calc(6px + env(safe-area-inset-top)); padding: 0.5rem 0.75rem 0.55rem; border-radius: 26px; }
  .brandlink { min-height: 40px; }
  #nav { order: 3; flex: 1 0 100%; margin: 0 -0.75rem; padding: 0 0.75rem 0.1rem; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 0.75rem; }
  #nav::-webkit-scrollbar { display: none; }
  #nav a, #nav button { padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.9375rem; }
  /* Sign out rides along at the right end of the scrolling row, always in view */
  #nav .end, #nav.has-lens .end { position: sticky; right: 0; z-index: 2; margin-left: auto; box-shadow: -10px 0 12px -4px var(--nav); }
  /* tables become stacked rows: the first cell is the title, the others are "label  value" lines */
  .table-scroll:not(.keep) { padding: 0 1rem; overflow: visible; }
  .table-scroll:not(.keep) table, .table-scroll:not(.keep) tbody, .table-scroll:not(.keep) tr, .table-scroll:not(.keep) td { display: block; width: 100%; }
  .table-scroll:not(.keep) thead { display: none; }
  .table-scroll:not(.keep) tr { padding: 0.8rem 0; border-top: 0.5px solid var(--line); }
  .table-scroll:not(.keep) tbody tr:first-child { border-top: 0; }
  .table-scroll:not(.keep) td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; border: 0; text-align: right; }
  .table-scroll:not(.keep) td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 0.875rem; text-align: left; }
  .table-scroll:not(.keep) td:first-child { justify-content: flex-start; padding-bottom: 0.25rem; font-size: 1.0625rem; text-align: left; }
  .table-scroll:not(.keep) td:first-child::before, .table-scroll:not(.keep) td:empty, .table-scroll:not(.keep) td:not([data-label])::before, .table-scroll:not(.keep) td[data-label=""]::before { display: none; }
  .table-scroll:not(.keep) td:first-child > div { margin-left: 0.4rem; }
  .table-scroll:not(.keep) td:last-child:not(:first-child) { justify-content: flex-start; padding-top: 0.5rem; }
  .table-scroll:not(.keep) td:last-child .row { justify-content: flex-start !important; }
  .tview .table-scroll { overflow: auto; }
  .tview table { display: table; }
  .editor .preview .pcard { margin: 0 auto; }
  .head .btn.primary { min-height: 40px; }
  .lrow, .lrow.bonus { grid-template-columns: 1fr 1fr; }
  .lrow.reward { grid-template-columns: 1fr 6rem auto; }
  .bl li { grid-template-columns: 1fr auto; }
  .bl-t { grid-column: 1 / -1; order: 3; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi > b { font-size: 1.6rem; }
  .check small { display: none; }
  .joinbox { flex-direction: column; align-items: flex-start; }
  .wrap form.stack .btn.primary[type="submit"], .editor form .row > .btn.primary { flex: 1 1 auto; }
  .tierrow { grid-template-columns: 1fr 44px; }
  .tierrow .on-sale, .tierrow [data-rm] { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vf-frame::after { top: 50%; }
}
@media print {
  .topbar, #toast, .powered, .btn { display: none !important; }
  body { background: #fff; }
}

/* Entrances: panels rise in softly when a view renders, as sections do on the landing page. */
@media (prefers-reduced-motion: no-preference) {
  .wrap > * { animation: rise 0.6s var(--ease) both; }
  .wrap > *:nth-child(2) { animation-delay: 0.04s; }
  .wrap > *:nth-child(3) { animation-delay: 0.08s; }
  .wrap > *:nth-child(n+4) { animation-delay: 0.12s; }
  main.auth > * { animation: rise 0.7s var(--ease) both; }
  main.auth > *:nth-child(2) { animation-delay: 0.06s; }
  main.auth > *:nth-child(n+3) { animation-delay: 0.12s; }
  .cardgrid > *, .kpis > *, .facts > div { animation: rise 0.6s var(--ease) both; }
  .cardgrid > *:nth-child(2), .kpis > *:nth-child(2), .facts > div:nth-child(2) { animation-delay: 0.05s; }
  .cardgrid > *:nth-child(3), .kpis > *:nth-child(3), .facts > div:nth-child(3) { animation-delay: 0.1s; }
  .cardgrid > *:nth-child(n+4), .kpis > *:nth-child(n+4), .facts > div:nth-child(n+4) { animation-delay: 0.15s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }