/* StayOs on CRED's NeoPOP (github.com/CRED-CLUB/neopop-web, Apache 2.0).
   Values below come from NeoPOP's primitives: colours.ts, opacity.ts, buttons.ts,
   typography.ts and the Button, ElevatedCard, InputField, Radio, Tags, Toast,
   BottomSheet and SearchBar styles. Light paper background with ink outlines and neon
   fills, square everything, and ink "plunk" edges 3px deep on the right and bottom, skewed 45°; a press moves the face
   3px down-right into its edges. Gilroy and Cirka are CRED's licensed fonts, so Plus
   Jakarta Sans and DM Serif Display stand in. */

:root {
  color-scheme: light;

  /* mainColors */
  --black: #0d0d0d;
  --white: #ffffff;
  --red: #EE4D37;
  --yellow: #F08D32;
  --blue: #144CC7;
  --green: #06C270;

  /* popBlack / black */
  --pop-black-100: #8A8A8A;
  --pop-black-200: #3D3D3D;
  --pop-black-300: var(--surface-2);
  --pop-black-400: var(--surface);
  /* popWhite / white */
  --pop-white-100: #D2D2D2;
  --pop-white-200: #E0E0E0;
  --pop-white-300: #EFEFEF;
  --pop-white-400: #FBFBFB;

  /* Brand palette (500 is the face, 600/700 are its edges) */
  --poli-purple-300: #B49AFF; --poli-purple-500: #6A35FF; --poli-purple-600: #4A25B3; --poli-purple-700: #351A80; --poli-purple-800: #20104D;
  --neo-paccha-300: #EEFF8A; --neo-paccha-500: #D4FF1F; --neo-paccha-600: #A0B22D; --neo-paccha-700: #727F20; --neo-paccha-800: #454C13;
  --park-green-300: #7DFFBE; --park-green-500: #1AFF8C; --park-green-600: #29B379; --park-green-700: #1E8057;
  --pink-pong-300: #FF8CC6; --pink-pong-500: #FF2E93; --pink-pong-600: #B32E4E; --pink-pong-700: #802138;
  --mannna-300: #FFE5A2; --mannna-500: #FFCB45; --mannna-600: #B38E30; --mannna-700: #806623;
  --orange-sunshine-300: #FFB27A; --orange-sunshine-500: #FF8744; --orange-sunshine-600: #B35F30; --orange-sunshine-700: #804322;
  --yoyo-300: #D59FFF; --yoyo-500: #AA3FFF; --yoyo-600: #772CB3; --yoyo-700: #552080;
  --info-400: #2C5ECD;

  /* Neon accents: fills, markers and glows on the light ground (text on them is ink) */
  --neon: var(--neo-paccha-500);
  --neon-lime: #D4FF1F;
  --neon-yellow: #FFE81A;
  --neon-orange: #FF7A1A;
  --neon-red: #FF2D4B;
  --neon-pink: #FF2E93;
  --neon-violet: #7B3BFF;
  --neon-blue: #2E5BFF;
  --neon-cyan: #00E1FF;
  --neon-green: #1AFF8C;
  /* Darker cuts of the neons for text on the light ground */
  --ink-pink: #D4006E;
  --ink-blue: #1F45E0;
  --ink-orange: #C24E00;
  --ink-green: #00874A;
  --ink-red: #D3001F;
  /* What each colour means: lime = find, pink = list, blue = talk, green = confirm,
     orange = alerts and ratings, red = flags and removal, violet = compare and visits, cyan = map */
  /* Readable accent for text on the light ground */
  --accent-ink: #5B22F5;

  /* Font opacities (FontOpacity: heading .9, sub-heading .7, body .5, lighter .3) */
  --fg: #0d0d0d;
  --ink: rgba(13, 13, 13, 0.92);
  --ink-70: rgba(13, 13, 13, 0.72);
  --ink-muted: rgba(13, 13, 13, 0.6);
  --ink-faint: rgba(13, 13, 13, 0.4);
  --on-light: #0d0d0d;

  /* Surfaces (containerCard) */
  --bg: #F6F5EF;
  --bg-sunk: #EFEEE6;
  --surface: #FFFFFF;
  --surface-2: #F1F0E9;
  --stroke: rgba(13, 13, 13, 0.14);
  /* Default edges for cards: ink */
  --card-edge-right: var(--fg);
  --card-edge-bottom: var(--fg);

  /* Names the pages use, pointed at NeoPOP colours */
  --highlight: var(--neo-paccha-500);
  --on-highlight: var(--black);
  --lavender: var(--poli-purple-300);
  --butter: var(--neo-paccha-500);
  --blush: var(--pink-pong-300);
  --mint: var(--park-green-300);
  --peach: var(--orange-sunshine-300);
  --success: var(--green);
  --warning: var(--yellow);
  --error: var(--red);
  --info: var(--blue);

  /* Type */
  --font-sans: "Plus Jakarta Sans", "Gilroy", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "DM Serif Display", "Cirka", Georgia, serif;

  /* Space and size */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --plunk: 3px;
  --control-lg: 50px;
  --control-md: 40px;
  --control-sm: 30px;

  /* Motion: NeoPOP presses in 120ms ease-in-out */
  --duration-press: 120ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Muted light tiles so the neon pins and routes stand out */
  --tiles-filter: saturate(.45) contrast(1.04) brightness(1.03);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
::selection { background: var(--neon); color: var(--fg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--font-sans); letter-spacing: .4px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
h1, h2, h3, h4 { margin: 0; }
.serif { font-family: var(--font-serif); font-weight: 400; }
/* Caps: tc12eb / tc10b, 2px tracking above 8px */
/* Where StayOs is live */
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 5px; background: var(--neon); box-shadow: inset 0 0 0 1.5px var(--fg), 3px 3px 0 0 var(--fg); color: var(--fg); font: 700 11px/1.25 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; }
.live-pill i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--neon-pink); }
.live-pill i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: live-ping 1.8s var(--ease) infinite; }
@keyframes live-ping { to { transform: scale(2.6); opacity: 0; } }
.soon-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); margin: 0 var(--plunk) var(--plunk) 0; padding: 0 12px; border: 1px dashed rgba(13, 13, 13, 0.3); color: var(--ink-muted); font: 700 11px/1.25 var(--font-sans); letter-spacing: .4px; cursor: default; }
.caps, .eyebrow { font: 800 12px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; }
.eyebrow { color: var(--ink-muted); }
.muted { color: var(--ink-muted); font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Wordmark */
.wordmark { font: 800 22px/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--fg); }
.wordmark i { font-family: var(--font-serif); font-style: normal; font-weight: 400; letter-spacing: 0; color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: .38em; text-underline-offset: -.22em; text-decoration-skip-ink: none; }
.logo-capsule { display: inline-flex; align-items: center; height: 48px; margin: 0 var(--plunk) var(--plunk) 0; padding: 0 18px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); }
.logo-capsule.pk { --er: var(--fg); --eb: var(--fg); }

/* Headline: extra-bold heading (th34eb), serif heading line in neo-paccha */
.mh { text-align: center; text-wrap: balance; }
.mh .a { display: block; font: 800 34px/1.25 var(--font-sans); letter-spacing: .2px; color: var(--ink); }
.mh .b { display: block; margin-top: 2px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.25; letter-spacing: .2px; color: var(--mark-ink, var(--accent-ink)); }
.mh .b, .mh .b .w > span { text-decoration: underline; text-decoration-color: var(--mark, var(--neon)); text-decoration-thickness: .4em; text-underline-offset: -.24em; text-decoration-skip-ink: none; }
.mh-xl .a, .mh-xl .b { font-size: clamp(34px, 5vw, 56px); letter-spacing: 0; }
.mh-left { text-align: left; }
.lead { font: 500 16px/1.5 var(--font-sans); letter-spacing: .4px; color: var(--ink-70); max-width: 60ch; margin: var(--space-4) auto 0; text-align: center; }
@media (max-width: 760px) {
  .mh .a, .mh .b { font-size: 28px; }
}

/* ---- Elevated edges (ElevatedButton / ElevatedCard) ----
   Right edge skewY(45deg), bottom edge skewX(45deg), 3px deep; a press translates the face 3px,3px. */
.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .stat, .step, .mo-card, .art-card,
.choice label, .map-ctl button, .pin, .pk {
  position: relative;
  --er: var(--fg);
  --eb: var(--fg);
}
:is(.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .stat, .step, .mo-card, .art-card, .choice label, .map-ctl button, .pin, .pk)::before,
:is(.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .stat, .step, .mo-card, .art-card, .choice label, .map-ctl button, .pin, .pk)::after {
  content: ""; position: absolute; pointer-events: none; transition: opacity var(--duration-press) ease-in-out;
}
/* right edge */
:is(.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .stat, .step, .mo-card, .art-card, .choice label, .map-ctl button, .pin, .pk)::before {
  left: 100%; top: 0; width: var(--plunk); height: calc(100% + var(--plunk)); background: var(--er);
  clip-path: polygon(0 0, 100% var(--plunk), 100% 100%, 0 calc(100% - var(--plunk)));
}
/* bottom edge */
:is(.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .stat, .step, .mo-card, .art-card, .choice label, .map-ctl button, .pin, .pk)::after {
  left: 0; top: 100%; width: calc(100% + var(--plunk)); height: var(--plunk); background: var(--eb);
  clip-path: polygon(0 0, calc(100% - var(--plunk)) 0, 100% 100%, var(--plunk) 100%);
}
:is(.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .choice label, .map-ctl button, .pin):not([disabled]):active {
  transform: translate(var(--plunk), var(--plunk));
}
:is(.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .choice label, .map-ctl button, .pin):not([disabled]):active::before,
:is(.btn, .round, .chip, .lc, .lcard, .thread, .tile, .hood, .choice label, .map-ctl button, .pin):not([disabled]):active::after { opacity: 0; }

/* ---- Button: ElevatedButton on a dark ground ----
   primary = light-mode primary (white face), default = light-mode secondary (black face, white border) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--control-md); margin: 0 var(--plunk) var(--plunk) 0; padding: 0 20px; border: 0; border-radius: 0; background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); font: 700 13px/1.25 var(--font-sans); letter-spacing: .2px; cursor: pointer; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-press) ease-in-out; --er: var(--fg); --eb: var(--fg); }
/* Plain buttons light up yellow on hover; zero specificity so every colour variant keeps its own face */
:where(.btn:not([disabled])):hover { background-color: var(--neon-yellow); }
.btn-primary { background: var(--neon); color: var(--black); box-shadow: none; --er: var(--fg); --eb: var(--fg); }
.btn-soft { background: var(--neon-green); color: var(--black); box-shadow: none; --er: var(--fg); --eb: var(--fg); }
.btn-pink { background: var(--neon-pink); color: var(--black); box-shadow: none; }
.btn-blue { background: var(--neon-blue); color: var(--white); box-shadow: none; }
.btn-green { background: var(--neon-green); color: var(--black); box-shadow: none; }
.btn-orange { background: var(--neon-orange); color: var(--black); box-shadow: none; }
.btn-red { background: var(--neon-red); color: var(--black); box-shadow: none; }
.btn-cyan { background: var(--neon-cyan); color: var(--black); box-shadow: none; }
.btn-yellow { background: var(--neon-yellow); color: var(--black); box-shadow: none; }
.btn-brand { background: var(--neon-violet); color: var(--white); box-shadow: none; --er: var(--fg); --eb: var(--fg); }
/* For light grounds (bottom sheet): dark-mode primary */
.btn-dark { background: var(--fg); color: var(--white); box-shadow: none; --er: var(--fg); --eb: var(--fg); }
.btn-light { background: var(--surface); }
/* Continue with Google: white face, ink outline, Google's mark on the left */
.btn-google { gap: 12px; background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn-google .g-logo { width: 20px; height: 20px; flex: none; }
/* Google's own sign-in button, drawn by Google inside this box */
.gbtn { display: flex; justify-content: center; min-height: 44px; width: 100%; }
.gbtn.busy { opacity: .5; pointer-events: none; }
.btn-lg { height: var(--control-lg); padding: 0 30px; font-size: 14px; }
.btn-sm { height: var(--control-sm); padding: 0 25px; font-size: 11px; letter-spacing: .4px; }
.btn-block { width: calc(100% - var(--plunk)); }
.btn[disabled] { background: #E4E3DB; color: var(--ink-faint); box-shadow: none; cursor: not-allowed; --er: var(--fg); --eb: var(--fg); }
/* LinkButton: text with a 1px underline */
.text-link, .link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 0 1px; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--ink); font: 700 13px/1.25 var(--font-sans); letter-spacing: .2px; cursor: pointer; }
.text-link:hover, .link-btn:hover { color: var(--accent-ink); }

/* Square icon key */
.round:not([disabled]):hover { background: var(--neon-cyan); }
.round { width: 40px; height: 40px; margin: 0 var(--plunk) var(--plunk) 0; border: 0; border-radius: 0; background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform var(--duration-press) ease-in-out; --er: var(--fg); --eb: var(--fg); }
.round[disabled] { opacity: .35; cursor: default; }
.round-sm { width: 32px; height: 32px; }
.save.on { background: var(--neon-pink); color: var(--black); box-shadow: none; --er: var(--fg); --eb: var(--fg); }
.save.on .ico { fill: currentColor; }

/* ---- Tags (padding 5px 10px 4px, caps 10 bold) and location chips ---- */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 4px; font: 700 10px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--black); background: var(--pop-white-200); }
.tag.butter { background: var(--neon-lime); } .tag.lavender { background: var(--neon-violet); color: var(--white); } .tag.blush { background: var(--neon-pink); } .tag.mint { background: var(--neon-green); } .tag.peach { background: var(--neon-orange); }
.tag.blue { background: var(--neon-blue); color: var(--white); } .tag.red { background: var(--neon-red); } .tag.cyan { background: var(--neon-cyan); } .tag.yellow { background: var(--neon-yellow); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 4px; background: var(--surface); color: var(--fg); font: 700 10px/1.25 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; }
.pill .ico { width: 11px; height: 11px; }
.pill.blush { background: var(--neo-paccha-500); color: var(--black); }
/* Filter chips: small elevated buttons; the picked one is a white primary */
.chips-row { display: flex; flex-wrap: wrap; gap: 10px 9px; }
.chip { display: inline-flex; align-items: center; justify-content: center; height: var(--control-sm); margin: 0 var(--plunk) var(--plunk) 0; padding: 0 14px; border: 0; border-radius: 0; background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.5); font: 700 11px/1.25 var(--font-sans); letter-spacing: .4px; cursor: pointer; transition: transform var(--duration-press) ease-in-out; --er: var(--fg); --eb: var(--fg); }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.chip.on { background: var(--chip-on, var(--neon)); color: var(--black); box-shadow: none; --er: var(--fg); --eb: var(--fg); }
.chips-row > .chip:nth-child(6n+2) { --chip-on: var(--neon-pink); }
.chips-row > .chip:nth-child(6n+3) { --chip-on: var(--neon-cyan); }
.chips-row > .chip:nth-child(6n+4) { --chip-on: var(--neon-orange); }
.chips-row > .chip:nth-child(6n+5) { --chip-on: var(--neon-green); }
.chips-row > .chip:nth-child(6n+6) { --chip-on: var(--neon-yellow); }
.chip:not(.on):hover { background: color-mix(in srgb, var(--chip-on, var(--neon)) 30%, var(--surface)); }

/* ---- SearchBar: 1px #3D3D3D border on popBlack 400, white when active ---- */
.input { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--fg); border-radius: 0; padding: 0 15px; min-height: 46px; transition: border-color var(--duration-fast) var(--ease); }
.input:focus-within { border-color: var(--fg); box-shadow: 3px 3px 0 0 var(--neon); }
.input .ico { color: var(--pop-white-100); }
.input input, .input select, .input textarea { flex: 1; min-width: 0; border: 0; background: transparent; font: 600 15px/1.25 var(--font-sans); letter-spacing: .4px; color: var(--ink); caret-color: var(--blue); outline: none; padding: 12px 0; appearance: none; }
.input textarea { resize: vertical; min-height: 84px; font-weight: 500; line-height: 1.5; }
.input select { cursor: pointer; padding-right: 24px; background: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%) calc(100% - 9px) 52% / 5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink-muted) 50%) calc(100% - 4px) 52% / 5px 5px no-repeat; }
.input select option { background: var(--surface); color: var(--fg); }
/* NeoPOP dropdown (enhanceSelect in shared.js)
   Trigger: a raised face with plunk edges and a paccha chevron cap; it sinks into the
   page while the menu is open. Menu: a raised panel of rows that cascade in; the row
   under the cursor turns white, the picked one is poli-purple with a check tile. */
.input.dd { position: relative; margin: 0 var(--plunk) var(--plunk) 0; padding-right: 6px; background: var(--surface); border-color: var(--fg); --er: var(--fg); --eb: var(--fg); transition: transform var(--duration-press) ease-in-out, border-color var(--duration-fast) var(--ease); }
.input.dd::before, .input.dd::after { content: ""; position: absolute; pointer-events: none; transition: opacity var(--duration-press) ease-in-out; }
.input.dd::before { left: calc(100% + 1px); top: -1px; width: var(--plunk); height: calc(100% + 2px + var(--plunk)); background: var(--er); clip-path: polygon(0 0, 100% var(--plunk), 100% 100%, 0 calc(100% - var(--plunk))); }
.input.dd::after { left: -1px; top: calc(100% + 1px); width: calc(100% + 2px + var(--plunk)); height: var(--plunk); background: var(--eb); clip-path: polygon(0 0, calc(100% - var(--plunk)) 0, 100% 100%, var(--plunk) 100%); }
.input.dd:has(.dd-btn:active), .input.dd.open { transform: translate(var(--plunk), var(--plunk)); }
.input.dd:has(.dd-btn:active)::before, .input.dd:has(.dd-btn:active)::after, .input.dd.open::before, .input.dd.open::after { opacity: 0; }
.input.dd.open { z-index: 1400; border-color: var(--neo-paccha-500); }
.dd select { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.dd-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: 600 15px/1.25 var(--font-sans); letter-spacing: .4px; text-align: left; cursor: pointer; outline: none; }
.dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn span.ph { color: var(--ink-faint); }
.dd-btn .ico { flex: none; width: 32px; height: 32px; padding: 8px; background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.25); transition: transform .35s var(--ease-out-expo), background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.dd-btn:hover .ico, .dd-btn:focus-visible .ico { background: var(--neon); color: var(--black); box-shadow: none; }
.dd.open .dd-btn .ico { transform: rotate(180deg); background: var(--neo-paccha-500); color: var(--black); box-shadow: none; }
.dd-btn:focus-visible { outline: none; }
.input.dd:has(.dd-btn:focus-visible) { outline: 2px solid var(--info-400); outline-offset: 3px; }

.dd-menu { position: absolute; left: -1px; right: -1px; top: calc(100% + 10px); z-index: 1400; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); --er: var(--fg); --eb: var(--fg); transform-origin: top center; animation: dd-drop .32s var(--ease-out-expo); }
.dd-menu::before, .dd-menu::after { content: ""; position: absolute; pointer-events: none; }
.dd-menu::before { left: 100%; top: 0; width: 4px; height: calc(100% + 4px); background: var(--er); clip-path: polygon(0 0, 100% 4px, 100% 100%, 0 calc(100% - 4px)); }
.dd-menu::after { left: 0; top: 100%; width: calc(100% + 4px); height: 4px; background: var(--eb); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 4px 100%); }
.dd-menu.up { top: auto; bottom: calc(100% + 10px); transform-origin: bottom center; animation-name: dd-drop-up; }
.dd-menu[hidden] { display: none; }
.dd-list { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 1px; scrollbar-width: thin; scrollbar-color: rgba(13, 13, 13, 0.35) transparent; }
@keyframes dd-drop { from { opacity: 0; transform: translate(-4px, -10px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 -8px -8px 0); } }
@keyframes dd-drop-up { from { opacity: 0; transform: translate(-4px, 10px); clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 -8px -8px 0); } }
.dd-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px 0 16px; border: 0; border-bottom: 1px solid rgba(13, 13, 13, 0.1); background: var(--surface); color: var(--ink-70); font: 700 14px/1.25 var(--font-sans); letter-spacing: .2px; text-align: left; cursor: pointer; animation: dd-row .3s var(--ease-out-expo) backwards; animation-delay: calc(var(--i, 0) * 28ms); transition: background-color .14s var(--ease), color .14s var(--ease), padding .2s var(--ease-out-expo); }
.dd-opt:last-child { border-bottom: 0; }
.dd-opt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--neon-pink); transform: scaleY(0); transition: transform .2s var(--ease-out-expo); }
@keyframes dd-row { from { opacity: 0; transform: translateY(-6px); } }
.dd-opt.hi, .dd-opt:hover { background: var(--neon); color: var(--black); padding-left: 22px; }
.dd-opt.hi::before, .dd-opt:hover::before { transform: none; }
.dd-opt.on { background: var(--neon-violet); color: var(--white); }
.dd-opt.on.hi, .dd-opt.on:hover { background: var(--poli-purple-400, #7B5CFF); color: var(--white); }
.dd-opt:active { transform: translate(1px, 1px); }
.dd-opt .ico { width: 22px; height: 22px; padding: 4px; flex: none; background: var(--neo-paccha-500); color: var(--black); stroke-width: 3; animation: pop .35s var(--ease-spring); }
.input input::placeholder, .input textarea::placeholder { color: var(--ink-faint); }
/* InputField: caps label (tc10b) above; red label and edge on error */
.field { display: flex; flex-direction: column; gap: 10px; }
.field > label, .field-label { font: 700 10px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
.field-label small, .field > label small { font-weight: 600; letter-spacing: 1px; color: var(--ink-faint); }
.field.invalid .input { border-color: var(--red); }
.field.invalid > label { color: var(--red); }
.field.invalid > label::after { content: "Required"; margin-left: 8px; padding: 2px 6px 1px; background: var(--red); color: var(--black); font-size: 9px; }
.form-error { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 15px; border-radius: 4px; background: var(--red); color: var(--black); font: 600 13px/1.25 var(--font-sans); letter-spacing: .4px; }
.form-error::before { content: "Error"; flex: none; padding: 3px 6px 2px; background: var(--surface); color: var(--red); font: 700 9px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; }

/* Radio container: popBlack 400 with a faint border; picked = poli-purple 500, info-400 border */
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.choice label { display: flex; flex-direction: column; gap: 2px; margin: 0 var(--plunk) var(--plunk) 0; padding: 12px 16px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); cursor: pointer; transition: transform var(--duration-press) ease-in-out, background-color var(--duration-fast) var(--ease); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice strong { font: 700 14px/1.25 var(--font-sans); letter-spacing: .2px; }
.choice small { font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.choice label:has(input:checked) { background: var(--neon-violet); box-shadow: inset 0 0 0 1px var(--info-400); --er: var(--fg); --eb: var(--fg); }
.choice label:has(input:checked) { color: var(--white); }
.choice label:has(input:checked) small { color: rgba(255, 255, 255, 0.8); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--info-400); outline-offset: 3px; }

/* Checkbox (NeoPOP dark): 20px square, white border; checked fills white; plunk shows while pressed */
.np-check { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font: 600 13px/1.25 var(--font-sans); letter-spacing: .2px; color: var(--ink); user-select: none; -webkit-tap-highlight-color: transparent; }
.np-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.np-check .box { position: relative; width: 20px; height: 20px; flex: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); display: grid; place-items: center; transition: background-color var(--duration-fast) ease; }
.np-check input:checked + .box { background: var(--neon); }
.np-check input:checked + .box::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(-45deg); }
.np-check:active .box { box-shadow: inset 0 0 0 1.5px var(--fg), inset 3px 3px 0 0 var(--fg); }
.np-check input:focus-visible + .box { outline: 2px solid var(--info-400); outline-offset: 3px; }

/* Toggle (NeoPOP dark): 40x22 square switch with a square knob and mark */
.np-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; border: 1px solid var(--fg); background: var(--surface); transition: background-color .15s ease; }
.np-toggle input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.np-toggle .mark { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: var(--surface); border: 1px solid var(--fg); transition: transform .15s ease, background-color .15s ease; }
.np-toggle .mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); background: var(--pop-white-200); }
.np-toggle:has(input:checked) { background: var(--neon); }
.np-toggle input:checked ~ .mark { transform: translateX(18px); background: var(--fg); border-color: var(--fg); }
.np-toggle input:checked ~ .mark::after { background: var(--white); }
.np-toggle:has(input:focus-visible) { outline: 2px solid var(--info-400); outline-offset: 3px; }

/* ---- Listing photo and card (ElevatedCard on containerCard) ---- */
.ph { position: relative; overflow: hidden; background: var(--surface-2); }
.ph > svg, .ph > img { width: 100%; height: 100%; object-fit: cover; }
.ph .pill { position: absolute; top: 10px; right: 10px; }
.lc { display: flex; flex-direction: column; margin: 0 var(--plunk) var(--plunk) 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); cursor: pointer; transition: transform var(--duration-press) ease-in-out; }
.lc .ph { height: 168px; margin: 1px 1px 0; }
/* Sample homes: shown so the map isn't empty before real listings, always labelled */
.sample-tag { display: inline-flex; align-items: center; padding: 2px 7px 1px; background: var(--neon-yellow); color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); font: 800 9.5px/1.4 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; }
.strip { display: flex; justify-content: space-between; gap: 8px; margin: 0 1px; padding: 7px 12px 6px; background: var(--neo-paccha-500); color: var(--black); font: 700 10px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.strip em { font-style: normal; }
.lc-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.lc-name { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.25; letter-spacing: .2px; margin: 0 0 12px; color: var(--ink); }
.grp { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.grp:first-of-type { padding-top: 0; }
.r { display: flex; align-items: center; gap: 10px; font: 500 13px/1.5 var(--font-sans); letter-spacing: .4px; color: var(--ink-70); min-width: 0; }
.r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.from { margin-top: 12px; font: 700 10px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
/* Money in the serif: prices read premium, not discount */
.price { font: 400 24px/1.2 var(--font-serif); letter-spacing: 0; color: var(--ink); }
.unit { font: 500 12px/1.5 var(--font-sans); color: var(--ink-muted); }

/* ---- Toast: slides down from the top, 4px corners, 15px padding (th13sb) ----
   NeoPOP puts #F8F8F8 text on green and orange; that fails contrast, so those use black */
.toast { position: fixed; left: 50%; top: 0; transform: translate(-50%, -130%); display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(460px, calc(100% - 16px)); margin-top: max(8px, env(safe-area-inset-top)); padding: 15px; border-radius: 4px; background: var(--green); color: var(--black); font: 600 13px/1.25 var(--font-sans); letter-spacing: .4px; z-index: 3000; transition: transform .35s var(--ease-spring); }
.toast .ico { width: 18px; height: 18px; }
.toast { box-shadow: inset 0 0 0 1.5px var(--fg), 4px 4px 0 0 var(--fg); }
.toast:not(.info):not(.warning):not(.error) { background: var(--neon-green); }
.toast.info { background: var(--neon-blue); color: var(--white); }
.toast.warning { background: var(--neon-orange); }
.toast.error { background: var(--neon-red); }
.toast.show { transform: translate(-50%, 0); }

/* ---- Maps ---- */
.leaflet-container { isolation: isolate; font: 400 14px/1.5 var(--font-sans); background: var(--surface-2); }
.leaflet-container a.btn-primary { color: var(--black); }
.base-tiles { filter: var(--tiles-filter); }
.leaflet-control-attribution { font-size: 10px; background: var(--surface) !important; color: var(--ink-muted); }
.leaflet-control-attribution a { color: var(--ink-70); }
.pin-wrap { background: none; border: 0; }
/* Price pin: a small elevated key on a stem */
.price-wrap::after { content: ""; position: absolute; left: -1px; top: -10px; width: 2px; height: 10px; background: var(--fg); }
.price-wrap::before { content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--fg); }
.pin { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 13px); margin: 0 var(--plunk) var(--plunk) 0; padding: 6px 9px 5px; background: var(--neon-cyan); color: var(--black); box-shadow: inset 0 0 0 1.5px var(--fg); font: 800 12px/1.25 var(--font-sans); letter-spacing: .2px; white-space: nowrap; cursor: pointer; transition: transform var(--duration-press) ease-in-out, padding var(--duration-slow) var(--ease), font-size var(--duration-slow) var(--ease); animation: pin-in .4s var(--ease-spring) backwards; --er: var(--fg); --eb: var(--fg); }
.pin.flagged { box-shadow: inset 0 0 0 1.5px var(--fg), 0 0 0 2px var(--error); }
.pin-flag { position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--error); color: var(--white); font: 900 11px/1 var(--font-sans); font-style: normal; box-shadow: 0 0 0 2px var(--white); }
.pin-flag::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--error); z-index: -1; animation: live-ping 1.6s var(--ease) infinite; }
.flag-note { display: flex; align-items: center; gap: 6px; padding: 5px 8px 4px; background: rgba(255,90,78,.14); box-shadow: inset 3px 0 0 0 var(--error); color: #C4281C; font: 700 11px/1.3 var(--font-sans); letter-spacing: .2px; }
.flag-note .ico { width: 13px; height: 13px; flex: none; color: var(--error); }
.legend .lg-flag { width: 12px; height: 12px; border-radius: 50%; background: var(--error); }
.pin.room { background: #B79BFF; --er: var(--fg); --eb: var(--fg); }
.pin.move { background: var(--neo-paccha-500); --er: var(--fg); --eb: var(--fg); }
.pin:hover { transform: scale(1.08); }
.pin.active { background: var(--neon-pink); color: var(--black); color: var(--white); transform: scale(1.12); --er: var(--fg); --eb: var(--fg); }
.far .pin { font-size: 0; padding: 5px; translate: -50% calc(-100% - 8px); }
.far .price-wrap::after { height: 5px; top: -5px; }
.drop-pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); filter: drop-shadow(3px 3px 0 var(--fg)); cursor: grab; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font: 700 10px/1.25 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-70); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; }
.legend { transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.pop-open .legend { opacity: 0; transform: translateY(8px); pointer-events: none; }
/* Popup: an elevated card */
.leaflet-popup-content-wrapper { background: var(--surface); color: var(--ink); border-radius: 0; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--fg), 4px 4px 0 0 var(--fg); }
.leaflet-popup-content { margin: 0; width: 320px !important; font: inherit; }
.leaflet-popup-tip-container { margin-top: -1px; }
.leaflet-popup-tip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); }
.pop { position: relative; display: grid; grid-template-columns: 108px 1fr; }
.pop-media { min-height: 128px; height: calc(100% - 2px); margin: 1px 0 0 1px; }
.pop-flag { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px 2px; background: var(--neo-paccha-500); color: var(--black); font: 700 9px/1.25 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; }
.pop-b { min-width: 0; padding: 12px 14px; }
.pop-where { display: flex; align-items: center; gap: 5px; padding-right: 26px; font: 700 10px/1.25 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-muted); }
.pop-where .ico { width: 12px; height: 12px; }
.pop-where span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-b strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-family: var(--font-serif); font-weight: 400; font-size: 19px; line-height: 1.25; }
.pop-b .r { margin-top: 4px; font-size: 12px; gap: 6px; }
.pop-b .r .ico { width: 14px; height: 14px; }
.pop-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: 8px; }
.pop .price { display: block; font-size: 20px; }
.pop .unit { display: block; }
.pop .btn-sm { margin-bottom: 0; padding: 0 16px; }
.pop-foot { grid-column: 1 / -1; border-top: 1px solid var(--stroke); margin: 0 1px 1px; }
.pop-more { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px 10px; border: 0; background: var(--surface-2); color: var(--fg); font: 700 10px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.pop-more:hover { background: var(--neon-cyan); color: var(--black); }
.pop-more .ico { transition: transform var(--duration-base) var(--ease); }
.pop-more:hover .ico { transform: translateX(3px); }
.pop-x { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border: 0; background: var(--surface); color: var(--ink-70); box-shadow: inset 0 0 0 1px var(--stroke); display: grid; place-items: center; cursor: pointer; }
.pop-x:hover { color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }

/* Map controls: elevated square keys */
.map-ctl { display: flex; flex-direction: column; gap: 9px; }
.map-ctl button:not([disabled]):hover { background: var(--neon-cyan); }
.map-ctl button { width: 40px; height: 40px; margin: 0 var(--plunk) var(--plunk) 0; border: 0; border-radius: 0; background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); display: grid; place-items: center; cursor: pointer; transition: transform var(--duration-press) ease-in-out; --er: var(--fg); --eb: var(--fg); }
.map-ctl button[disabled] { opacity: .35; cursor: default; }
.map-ctl button.busy .ico { animation: spin 1s linear infinite; }

/* ---- Motion ---- */
@keyframes pin-in { from { opacity: 0; transform: scale(.3) translateY(6px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop { 40% { transform: scale(1.35); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.enter { animation: fade-up .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.save.pop .ico { animation: pop .45s var(--ease-spring); }
.ph > img { animation: fade-in .3s var(--ease); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip-container { animation: bubble-in .25s var(--ease); }

/* Scroll reveals: fade and rise once, staggered children follow 70ms apart */
:root { --ease-out-expo: cubic-bezier(.16, 1, .3, 1); }
@keyframes reveal-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes line-up { from { clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes ping { 0% { outline: 2px solid rgba(229, 254, 64, .9); outline-offset: 0; } 100% { outline: 2px solid rgba(229, 254, 64, 0); outline-offset: 12px; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes flash { 0% { color: var(--accent-ink); } 100% { color: var(--ink-muted); } }
[data-reveal]:not(.in) { opacity: 0; }
[data-reveal]:not([data-reveal="stagger"]).in { animation: reveal-up .8s var(--ease-out-expo) backwards; }
[data-reveal="stagger"]:not(.in) { opacity: 1; }
[data-reveal="stagger"]:not(.in) > * { opacity: 0; }
[data-reveal="stagger"].in > * { animation: reveal-up .7s var(--ease-out-expo) backwards; animation-delay: calc(var(--n, 0) * 70ms); }

/* Shine: a light sweep across filled buttons on hover */
.btn-primary, .btn-soft, .btn-brand, .btn-dark, .btn-pink, .btn-blue, .btn-green, .btn-orange, .btn-red, .btn-cyan, .btn-yellow { background-image: linear-gradient(110deg, transparent 38%, var(--shine, rgba(255, 255, 255, 0.45)) 50%, transparent 62%); background-size: 250% 100%; background-position: 160% 0; background-repeat: no-repeat; }
.btn-primary, .btn-soft, .btn-pink, .btn-green, .btn-orange, .btn-red, .btn-cyan, .btn-yellow { --shine: rgba(255, 255, 255, 0.7); }
:is(.btn-primary, .btn-soft, .btn-brand, .btn-dark, .btn-pink, .btn-blue, .btn-green, .btn-orange, .btn-red, .btn-cyan, .btn-yellow):not([disabled]):hover { animation: shine .85s var(--ease-out-expo); }

/* Photos ease in a little on hover */
:is(.lc, .lcard, .tile) .ph > :is(svg, img) { transition: transform .6s var(--ease-out-expo); }
:is(.lc, .lcard, .tile):hover .ph > :is(svg, img) { transform: scale(1.06); }

/* The selected map pin pulses */
.pin.active { animation: ping 1.6s var(--ease) infinite; }

/* Map tiles loading shimmer */
.leaflet-container.tiles-loading::after { content: ""; position: absolute; inset: 0; z-index: 399; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(13, 13, 13, 0.06) 50%, transparent 70%); background-size: 200% 100%; animation: sweep 1.2s linear infinite; }

/* Toast life bar */
.toast { overflow: hidden; }
.toast-life { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .35; transform-origin: left; }
.toast.show .toast-life { animation: drain var(--life, 3200ms) linear forwards; }

/* Search suggestions */
.suggest { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 1300; padding: 6px 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg), 4px 4px 0 0 var(--fg); text-align: left; animation: drop-in .18s var(--ease); }
.sg { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; cursor: pointer; color: var(--ink); transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.sg b { display: block; font: 700 14px/1.25 var(--font-sans); letter-spacing: .2px; }
.sg small { display: block; margin-top: 2px; font: 700 9px/1.25 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; opacity: .6; }
.sg mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--neo-paccha-500); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sg em { font: 700 10px/1.25 var(--font-sans); font-style: normal; letter-spacing: 1px; opacity: .6; }
.sg.on, .sg:hover { background: var(--neon-cyan); color: var(--black); }
.sg-head { padding: 10px 14px 4px; font: 700 9px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); }
.sg-loading { padding-bottom: 10px; animation: fade-in .3s var(--ease); }
.sg.place .ico { color: var(--accent-ink); }
.sg.place.on .ico, .sg.place:hover .ico { color: var(--black); }
.sg.on mark, .sg:hover mark { text-decoration-color: var(--black); }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-shadow: inset 0 0 0 1px var(--fg); color: var(--ink-muted); font: 700 11px/1 var(--font-sans); }

/* Panel contents cascade in when a drawer opens */
.drawer.open :is(form, #detailTop .d-content) > * { animation: reveal-up .55s var(--ease-out-expo) backwards; animation-delay: calc(120ms + var(--n, 0) * 40ms); }
.flash { animation: flash .9s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---- Auth pages ---- */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.auth-main { display: flex; flex-direction: column; padding: var(--space-6) var(--space-12); }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.auth-box { width: 100%; max-width: 440px; margin: auto; padding: var(--space-12) 0; animation: fade-up .5s var(--ease) backwards; }
.auth-box .mh { text-align: left; }
.auth-box .lead { text-align: left; margin: var(--space-3) 0 var(--space-8); }
.auth-form { display: grid; gap: var(--space-5); }
.pw-toggle { background: none; border: 0; padding: 0; font: 700 10px/1.25 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-70); cursor: pointer; }
.pw-toggle:hover { color: var(--fg); }
.hint { font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.auth-switch { margin-top: var(--space-8); color: var(--ink-70); text-align: center; font-size: 14px; }
.auth-switch a { font-weight: 700; color: var(--fg); border-bottom: 1px solid currentColor; }
.legal { font-size: 12px; color: var(--ink-muted); text-align: center; margin: 0; }
.legal a { border-bottom: 1px solid currentColor; }
.demo-note { font-size: 12px; color: var(--ink-muted); text-align: center; margin: 0; }
.auth-art { position: relative; background: var(--poli-purple-500); color: var(--white); margin: var(--space-6) calc(var(--space-6) + var(--plunk)) calc(var(--space-6) + var(--plunk)) 0; padding: var(--space-16) var(--space-12); display: flex; flex-direction: column; justify-content: center; gap: var(--space-12); box-shadow: 6px 6px 0 0 var(--fg); }
.auth-art .mh .a { color: var(--white); }
.auth-art .lead { color: rgba(255, 255, 255, 0.85); }
.art-card { background: var(--surface); padding: 12px; max-width: 460px; margin: 0 var(--plunk) var(--plunk) auto; margin-left: auto; margin-right: auto; width: calc(100% - var(--plunk)); --er: var(--fg); --eb: var(--fg); }
.art-card svg { width: 100%; height: auto; }
@media (max-width: 900px) {
  .auth-grid { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-main { padding: var(--space-4); }
  .auth-box { padding: var(--space-8) 0; }
}

/* Search inputs bring their own clear button; hide the browser's */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }