/* Layout and behaviour styles. Colours/fonts come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h-static); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0 0 var(--space-3); color: var(--color-heading); }
/* Logo-style capitals for the page's own headings (legal pages keep normal case for readability) */
h1, .section h2 { text-transform: uppercase; letter-spacing: 0.01em; }
/* The logo's font for everything short and loud: buttons, prices, navigation, labels */
.btn, .header-buy, .header-nav a, .hero-price, .buy-price, .order-number, .ship-sign, .facts dt {
  font-family: var(--font-display);
}
.btn, .header-buy, .header-nav a, .ship-sign, .facts dt { text-transform: uppercase; letter-spacing: 0.05em; }
h2 { font-size: var(--text-h2); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
main a:not(.btn):hover, .site-footer a:hover, .header-nav a:hover { color: var(--color-highlight); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-surface); padding: var(--space-2) var(--space-3); }
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-btn);
  font: inherit; font-size: var(--text-btn); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 120ms var(--ease-out), opacity 120ms, filter 120ms, box-shadow 200ms;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(0.97); }
/* Buy / call-to-action buttons: pink inside a yellow frame, with a soft glow of both, so they pop off
   the navy (owner, 2026-10-01: "Yellow frame and pink inside"). */
.btn-primary, .site-header.is-solid .header-buy {
  background: var(--color-accent); color: var(--color-on-accent);
  border: 3px solid var(--color-accent-frame);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(184, 86, 128, 0.45), 0 0 18px rgba(247, 204, 65, 0.28);
}
.btn-primary:hover, .site-header.is-solid .header-buy:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 8px 26px rgba(184, 86, 128, 0.6), 0 0 26px rgba(247, 204, 65, 0.45);
}
.btn[disabled] { opacity: 0.55; cursor: progress; }
/* No finished mask left: a plain, clearly inactive "Sold out" (no pink, no glow) */
.btn-primary.is-sold-out, .btn-primary.is-sold-out:hover {
  background: var(--color-surface); color: var(--color-muted); border-color: var(--color-line);
  box-shadow: none; filter: none; opacity: 1; cursor: not-allowed;
}

/* ---------------------------------------------------------------- Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  color: var(--color-hero-text);
  background: transparent;
  transition: background-color 200ms, color 200ms, box-shadow 200ms;
}
.site-header.is-solid {
  color: var(--color-header-text);
}
/* Centre column holds the mini-shop logo; nav left, Buy right. */
.header-logo-slot { grid-column: 2; grid-row: 1; width: var(--logo-header-w); height: var(--logo-header-h); }
.header-nav { grid-column: 1; grid-row: 1; justify-self: start; display: flex; gap: var(--space-4); }
.header-buy { grid-column: 3; grid-row: 1; justify-self: end; }
.header-nav a { text-decoration: none; font-weight: 500; }
.header-buy {
  text-decoration: none; font-weight: 700; white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-btn);
  background: var(--color-accent); color: var(--color-on-accent);
  border: 3px solid transparent;
  opacity: 0; pointer-events: none; transition: opacity 200ms, box-shadow 200ms, filter 120ms;
}
.site-header.is-solid .header-buy { opacity: 1; pointer-events: auto; background: var(--color-header-accent); color: var(--color-on-header-accent); }
.header-buy { font-size: var(--text-btn); }
@media (max-width: 640px) {
  .header-nav { display: none; }
}
/* Header transition off (the usual case now): a slim bar. Over the landing scene it is see-through
   (the neon sign is the logo there); once the scene has scrolled away it turns navy and the owner's
   logo fades in, centred, with the "Shop" button on the right: the same on phones and computers
   (owner, 2026-10-02). */
.header-logo { display: none; }
.site-header.has-own-bg { height: calc(var(--header-h-static) + env(safe-area-inset-top, 0px)); }
.site-header.has-own-bg .header-logo-slot { width: auto; height: var(--logo-static-h); }
.site-header.has-own-bg .header-logo { display: block; width: auto; height: 100%; opacity: 0; transition: opacity 250ms; }
.site-header.has-own-bg.is-solid .header-logo { opacity: 1; }
.site-header:not(.is-solid) .header-nav a { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }

/* ---------------------------------------------------------------- Hero + scene panel */
/* The hero is only the space the scene takes at the top of the page; the scene itself is the fixed
   panel, which shrinks into the header while the page scrolls (setupScene in app.js). */
.hero { position: relative; height: 100svh; background: var(--color-header-bg); }
/* "Shop now": centred low in the scene (over the wet ground), goes straight to the mask. Sits above
   the scene panel (z 30) and below the header (z 40). */
.hero-shop {
  position: absolute; z-index: 35; left: 0; right: 0; bottom: max(10svh, var(--space-6));
  width: fit-content; margin-inline: auto;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.scene-panel {
  position: fixed; left: 0; top: 0; right: 0; z-index: 30;
  height: 100svh;
  overflow: hidden; contain: strict;
  background: var(--color-header-bg);
  color: var(--color-hero-text);
}
/* Header transition off (config/scene.yaml): the panel is part of the page and scrolls away. */
.scene-panel.is-static { position: absolute; height: 100svh; }
.site-header.has-own-bg.is-solid { background: var(--color-header-bg); box-shadow: 0 1px 0 var(--color-header-line), 0 8px 24px rgba(0, 0, 0, 0.3); }
.scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
/* Fog in front of the picture: navy plus two seamless fog layers sliding in opposite directions
   (compositor-only). An oval opening around the logo (--hx/--hy at --hcx/--hcy, set by app.js)
   shrinks as the visitor scrolls, so the fog closes in until only the logo is left; in the header
   it is the background around the logo. Invisible at landing. */
.fog {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0;
  background: var(--color-header-bg);
  -webkit-mask-image: radial-gradient(ellipse var(--hx, 300vw) var(--hy, 300vh) at var(--hcx, 50%) var(--hcy, 50%), transparent 55%, #000 100%);
          mask-image: radial-gradient(ellipse var(--hx, 300vw) var(--hy, 300vh) at var(--hcx, 50%) var(--hcy, 50%), transparent 55%, #000 100%);
}
.fog::after { /* faint neon light from the sign on the fog */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 70% at 38% 55%, rgba(255, 61, 139, 0.14), transparent 70%),
    radial-gradient(ellipse 30% 70% at 62% 50%, rgba(80, 150, 255, 0.12), transparent 70%);
}
.fog-layer {
  position: absolute; left: 0; top: -15%; width: 200%; height: 130%;
  background: repeat-x 0 50% / 50% 100%;
  animation: fog-drift 70s linear infinite; will-change: transform;
}
.fog-layer--2 { opacity: 0.7; animation-duration: 110s; animation-direction: reverse; }
/* The pictures only when the header transition is on (js/app.js adds .is-on): otherwise they aren't downloaded. */
.fog.is-on .fog-layer { background-image: url("/img/fog-1.webp"); }
.fog.is-on .fog-layer--2 { background-image: url("/img/fog-2.webp"); }
@keyframes fog-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fog-layer { animation: none; } }

/* The 16:9 window. Soft left/right edges blend the video into the wide picture around it. */
.scene-window {
  position: absolute; overflow: hidden;
}
.hero-still, .hero-video, .scene-transition, .scene-final, .hero-mist {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
}
/* Stack: anchor still < live loop / events < transition clip < mist */
.hero-video { opacity: 0; transition: opacity 450ms ease; }
.hero-video.is-active { opacity: 1; }
.scene-window.is-frozen .hero-video { opacity: 0; }
.scene-transition { opacity: 0; }
.scene-window.is-transitioning .scene-transition { opacity: 1; }
.scene-final { opacity: 0; }
.hero-mist { display: none; }
.scene-window.is-misting .hero-mist { display: block; }
.scene-window.is-transitioning .hero-mist { display: none; }
/* Film grain (js/grain.js): a see-through layer over the video and its still. "overlay" shows the grain in
   the mid-tones and lets it fade out in deep black and bright neon, like real film. */
/* Film grain: there from the very first picture. A small ready-made tile (img/grain-first.png, same
   recipe) shows at once, 1 texel = 1 screen pixel; js/grain.js then swaps in the moving grain made in
   the browser. Strength classes are written into the page by the Worker from config/scene.yaml
   (same values as GRAIN_STRENGTH in src/api/scene-config.ts). */
.film-grain {
  position: absolute; inset: 0; pointer-events: none;
  background: url("/img/grain-first.png") repeat 0 0 / 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0;
}
.film-grain.is-on { opacity: var(--grain-strength, 0.18); }
.film-grain--light { --grain-strength: 0.11; }
.film-grain--medium { --grain-strength: 0.18; }
.film-grain--strong { --grain-strength: 0.26; }
@media (min-resolution: 1.2dppx) { .film-grain { background-size: 102.4px 102.4px; } }   /* 1.25x screens */
@media (min-resolution: 1.4dppx) { .film-grain { background-size: 85.33px 85.33px; } }   /* 1.5x */
@media (min-resolution: 1.8dppx) { .film-grain { background-size: 64px 64px; } }         /* 2x */
@media (min-resolution: 2.5dppx) { .film-grain { background-size: 42.67px 42.67px; } }   /* 3x phones */


.video-play {
  position: absolute; bottom: var(--space-4); right: var(--gutter); z-index: 2;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-btn);
  border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer;
}

/* Product copy right under the scene (intro strip) */
.hero-tagline { margin: 0; font-size: var(--text-lead); max-width: 40ch; }
.hero-price { margin: var(--space-2) 0 0; font-size: var(--text-price); font-weight: 800; }
.stock-line { margin: 0 0 var(--space-3); font-weight: 600; min-height: 1.5em; color: var(--color-highlight); }

/* Hanging shipping sign (§5.18): swings in once, swings again when touched. */
/* It comes out of the first Buy now button (owner, 2026-10-02), EU visitors only (js/app.js updateSign). */
.intro-buy { display: flex; flex-direction: column; align-items: center; }
.ship-sign {
  position: relative; z-index: 2;
  margin-top: 28px;
  padding: var(--space-2) var(--space-3);
  border: 0; border-radius: 6px;
  background: var(--color-sign-bg); color: var(--color-sign-text);
  font: inherit; font-weight: 800; font-size: var(--text-small); line-height: 1.25;
  text-align: center; max-width: 12rem; cursor: pointer;
  transform-origin: 50% -28px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.ship-sign::before, .ship-sign::after {
  content: ""; position: absolute; top: -28px; width: 2px; height: 30px; background: var(--color-sign-string);
}
.ship-sign::before { left: 22%; transform: rotate(14deg); transform-origin: bottom; }
.ship-sign::after { right: 22%; transform: rotate(-14deg); transform-origin: bottom; }
.ship-sign.is-in { animation: sign-in 1.3s var(--ease-out) both; }
.ship-sign.is-poked { animation: sign-poke 0.9s ease-out; }
@keyframes sign-in {
  0% { transform: translateY(-40px) rotate(-18deg); opacity: 0; }
  35% { transform: translateY(0) rotate(12deg); opacity: 1; }
  55% { transform: rotate(-7deg); }
  72% { transform: rotate(4deg); }
  86% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
@keyframes sign-poke {
  0% { transform: rotate(0); } 25% { transform: rotate(8deg); } 50% { transform: rotate(-5deg); }
  75% { transform: rotate(2deg); } 100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ship-sign.is-in, .ship-sign.is-poked { animation: none; }
}

/* Product strip right under the scene */
.intro { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.intro h2 { margin: 0; }

/* ---------------------------------------------------------------- Sections */
.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);   /* tighter (owner, 2026-10-02): was --space-6 */
}
.section-lead { font-size: var(--text-lead); color: var(--color-muted); max-width: 60ch; margin: 0 0 var(--space-4); }
/* Yellow section block: the background runs to both screen edges (shadow + clip, no extra markup). */
.block {
  background: var(--color-block-bg); color: var(--color-on-block);
  box-shadow: 0 0 0 100vmax var(--color-block-bg); clip-path: inset(0 -100vmax);
}
.block h2, .block .section-lead, .block a:hover { color: var(--color-on-block); }
.block :focus-visible { outline-color: var(--color-on-block); }
.block .facts div { background: transparent; border-color: rgba(15, 30, 53, 0.3); }
.block .facts dt { color: var(--color-on-block); opacity: 0.75; }

/* Gallery */
/* Two per row, centred: front + back, then the two side views (owner, 2026-10-01). */
.gallery-section > h2, .gallery-section > .section-lead { text-align: center; margin-left: auto; margin-right: auto; }
/* Under the photos: real masks can differ slightly (hand-finished), config/shop.yaml -> mask.gallery_note */
.gallery-note { max-width: 56ch; margin: var(--space-3) auto 0; text-align: center; color: var(--color-muted); }
.gallery {
  list-style: none; margin: 0 auto; padding: 0; max-width: 740px;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
}
.gallery-item {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden;
}
.gallery-item img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 300ms var(--ease-out); }
.gallery-item:hover img { transform: scale(1.03); }

/* Details */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); margin: 0; }
.facts div { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3); }
.facts dt { font-size: var(--text-small); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; font-weight: 600; }

/* Maker */
.maker-grid { display: grid; gap: var(--space-4); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.maker-grid img { border-radius: var(--radius); width: 100%; height: auto; display: block; }
.flag-text {
  background: linear-gradient(to bottom, #9E3039 0 40%, #F5F3EE 40% 60%, #9E3039 60% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buy box */
.buy-box {
  max-width: 480px;
  background: var(--color-surface); border: 1px solid var(--color-line); border-top: 3px solid var(--color-highlight); border-radius: var(--radius);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.buy-name { margin: 0; font-weight: 700; }
.buy-price { margin: 0; font-size: var(--text-price); font-weight: 800; }
.buy-box .stock-line { margin-bottom: var(--space-2); }
.field-label { font-weight: 600; margin-top: var(--space-2); }
select {
  font: inherit; min-height: 48px; padding: 0 var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text);
}
.ship-line { margin: 0; font-weight: 700; }
.delivery-line { margin: 0; color: var(--color-muted); font-size: var(--text-small); }
.duties { background: var(--color-bg); border-radius: var(--radius); padding: var(--space-3); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-small); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.no-ship { margin: 0; }
.btn-buy { width: 100%; margin-top: var(--space-2); }
.form-error { margin: 0; color: var(--color-error); font-weight: 600; min-height: 1.2em; }
.form-error:empty { min-height: 0; }
.trust { margin: 0; font-size: var(--text-small); color: var(--color-muted); text-align: center; }
/* "Tell me when it's back" (sold out only) */
.waitlist { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: var(--space-2); }
.waitlist-heading { margin: 0; font-weight: 700; color: var(--color-highlight); }
.waitlist-intro { margin: 0; color: var(--color-muted); font-size: var(--text-small); }
.waitlist-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.waitlist-row input { flex: 1 1 200px; min-height: 48px; padding: 0 var(--space-3); font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); }
.waitlist-row .btn { flex: 0 0 auto; }
.waitlist-msg { margin: 0; font-weight: 600; min-height: 1.2em; }
.waitlist-msg:empty { min-height: 0; }
.waitlist-page { max-width: 560px; margin: 0 auto; }
.waitlist-page h1 { color: var(--color-heading); }
.cancel-note { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-bg); border-radius: var(--radius); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--color-line); padding: var(--space-3) 0; max-width: 70ch; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary::marker { color: var(--color-highlight); }
.faq summary:hover { color: var(--color-highlight); }
.faq details p { margin: var(--space-2) 0 0; color: var(--color-muted); }

/* Contact + footer */
/* Instagram: the one-colour outline sign (owner, 2026-10-01: the rainbow icon was too loud), muted like
   the other small text, yellow on hover like every link */
.contact-instagram { display: inline-block; line-height: 0; color: var(--color-muted); }
.contact-instagram:hover, .contact-instagram:focus-visible { color: var(--color-highlight); }
.contact-instagram svg { display: block; width: 32px; height: 32px; }
.site-footer {
  padding: var(--space-5) var(--gutter) calc(var(--space-5) + 64px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: var(--text-small); color: var(--color-muted);
  background: var(--color-deep);
}
@media (min-width: 801px) { .site-footer { padding-bottom: var(--space-5); } }
/* Made in Latvia + Instagram, both as crisp SVG icons (img/icons/) */
/* "Made in <flag>", centred (owner, 2026-10-01) */
.footer-made { display: flex; justify-content: center; align-items: center; gap: 0.5em; margin: 0 0 var(--space-3); font-size: var(--text-body, 1rem); color: var(--color-header-text, #f5f3ee); }
.footer-made img { width: auto; height: 1.5em; }


/* ---------------------------------------------------------------- Photo viewer */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden;
}
.viewer::backdrop { background: #000; }
.viewer-stage { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; overflow: hidden; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0; user-select: none; cursor: zoom-in; }
.viewer-stage.is-zoomed img { cursor: grab; }
.viewer-btn {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.viewer-close { top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); right: var(--space-3); }
.viewer-prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.viewer-next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
.viewer-count, .viewer-hint { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-size: var(--text-small); opacity: 0.8; }
.viewer-count { bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
.viewer-hint { bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------- Local test mode badge */
.test-badge {
  display: inline-block; background: #ffe08a; color: #000; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-btn); font-weight: 700; text-decoration: none;
}

/* ---------------------------------------------------------------- Simple pages (legal, thanks, 404) */
.page { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + var(--space-5)) var(--gutter) var(--space-6); }
.page h1 { font-size: var(--text-h2); }
.page h2 { font-size: 1.3rem; margin-top: var(--space-5); }
.page-header {
  position: static; height: calc(var(--header-h-static) + env(safe-area-inset-top, 0px));
  color: var(--color-header-text); background: var(--color-header-bg); box-shadow: 0 1px 0 var(--color-header-line);
}
.page-header .home { grid-column: 2; display: block; height: var(--logo-static-h); }
.page-header .home img { width: auto; height: 100%; }
.page-header + .page { padding-top: var(--space-5); }
.thanks-box { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); }
.order-number { font-size: var(--text-price); font-weight: 800; margin: var(--space-2) 0; color: var(--color-highlight); }
.email-fix { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.email-fix input { flex: 1 1 220px; min-height: 44px; padding: 0 var(--space-3); font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); }
.email-fix .btn { min-height: 44px; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }