/*
 * Tassutori design layer on top of Beer CSS.
 * Tokens (colour, elevation, motion) + component styling for a modern,
 * tactile calculator UI. Beer CSS still provides the app shell and components.
 */

/* ---- Brand theme (Material 3, seed #293a8a) ----
 * The complete Beer CSS / Material 3 token set, generated from the Tassutori
 * brand indigo #293a8a. Declared with the same selectors Beer CSS uses
 * (:root,body.light and body.dark) so this block — loaded after beer.min.css —
 * replaces the stock purple theme wholesale, and ui("mode") keeps flipping
 * light/dark exactly as before. No component below references raw hex; they
 * all read these tokens.
 *
 * Light primary is the brand hex itself (tone ~30, 10:1 contrast with white);
 * dark primary is its tone-80 sibling with the brand hex as the container,
 * per Material dark-scheme convention. */
:root,
body.light {
  --primary: #293a8a;
  --on-primary: #ffffff;
  --primary-container: #dde1ff;
  --on-primary-container: #001159;
  --secondary: #5a5d72;
  --on-secondary: #ffffff;
  --secondary-container: #dfe1f9;
  --on-secondary-container: #171b2c;
  --tertiary: #76536d;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffd7f1;
  --on-tertiary-container: #2d1228;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #faf8ff;
  --on-background: #1a1b21;
  --surface: #faf8ff;
  --on-surface: #1a1b21;
  --surface-variant: #e2e1ec;
  --on-surface-variant: #45464f;
  --outline: #757680;
  --outline-variant: #c5c6d0;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2f3036;
  --inverse-on-surface: #f1f0f7;
  --inverse-primary: #b8c3ff;
  --surface-dim: #dad9e0;
  --surface-bright: #faf8ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3fa;
  --surface-container: #efedf4;
  --surface-container-high: #e9e7ef;
  --surface-container-highest: #e3e1e9;

  /* Semantic status palette (light). Material 3 has no success/warning tones,
     so these are defined once here and flip with the theme below. Used for
     color-coded results, gauges, category dots and callouts. Backgrounds are
     always derived via color-mix(... , transparent) so the same token reads on
     any surface (the indigo result card and the page surface alike). */
  --et-good: #18794e;
  --et-caution: #9a5a00;
  --et-risk: #b3261e;
  --et-info: #2e5aac;
  --et-neutral: var(--on-surface-variant);
}
body.dark {
  --primary: #b8c3ff;
  --on-primary: #0e2478;
  --primary-container: #293a8a;
  --on-primary-container: #dde1ff;
  --secondary: #c3c5dd;
  --on-secondary: #2c2f42;
  --secondary-container: #434659;
  --on-secondary-container: #dfe1f9;
  --tertiary: #e4bad6;
  --on-tertiary: #44263e;
  --tertiary-container: #5c3c55;
  --on-tertiary-container: #ffd7f1;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #121318;
  --on-background: #e3e1e9;
  --surface: #121318;
  --on-surface: #e3e1e9;
  --surface-variant: #45464f;
  --on-surface-variant: #c5c6d0;
  --outline: #8f909a;
  --outline-variant: #45464f;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e3e1e9;
  --inverse-on-surface: #2f3036;
  --inverse-primary: #293a8a;
  --surface-dim: #121318;
  --surface-bright: #38393f;
  --surface-container-lowest: #0d0e13;
  --surface-container-low: #1a1b21;
  --surface-container: #1e1f25;
  --surface-container-high: #282a2f;
  --surface-container-highest: #33353a;

  /* Semantic status palette (dark) — lighter tones that read on dark surfaces. */
  --et-good: #5bd99a;
  --et-caution: #f4b75e;
  --et-risk: #f2887e;
  --et-info: #9ab4f5;
  --et-neutral: var(--on-surface-variant);
}

/* ---- Design tokens ----
 * Colour and border come from Beer CSS's own theme variables, which Beer CSS
 * flips between light and dark on ui("mode", …). Our aliases below are defined on
 * `body` (not :root) so they inherit the active theme's value and switch with it.
 * Layout/motion tokens (no colour) live on :root. */
:root {
  /* Icons are inline SVG (see icon()), so Beer CSS's Material Symbols icon font
     is never used. Its @font-face still points at a woff2 we don't vendor, and
     Beer CSS's bare `i { font-family: var(--font-icon) }` matches our <i>
     wrappers — which made the browser request the missing font (404). Repoint
     the icon-font token at a system stack so nothing is ever fetched and any
     stray Beer CSS <i>text</i> degrades to readable text instead of tofu. */
  --font-icon: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --et-max: 1120px;
  --et-radius: 0.5rem;
  --et-ease: cubic-bezier(.2,.7,.2,1);
  /* Springy settle (slight overshoot) for elements that respond to touch. */
  --et-spring: cubic-bezier(.34, 1.56, .64, 1);
  --et-dur: 200ms;

  /* Two-layer depth: a tight contact shadow + a wide soft ambient. */
  --et-sh-1: 0 1px 2px rgba(15,23,42,.05), 0 3px 10px rgba(15,23,42,.05);
  --et-sh-2: 0 2px 5px rgba(15,23,42,.07), 0 12px 32px rgba(15,23,42,.10);
  --et-glow: 0 10px 30px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Theme-following colour aliases — resolve to Beer CSS native tokens. */
body {
  --et-muted: var(--on-surface-variant);
  --et-line: var(--outline-variant);
  --et-line-strong: var(--outline);
}

body.dark {
  --et-sh-1: 0 1px 2px rgba(0,0,0,.4);
  --et-sh-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
}

/* ---- Base ---- */
html, body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body { background: var(--surface, #fff); }

/* ---- Type scale ----
   Beer CSS ships Material display sizes (h1 3.56rem … h4 2rem) meant for app
   splash screens, far too large for a content site. This block is the
   site-wide default — h1 caps at 2rem — so any heading without a component
   rule lands on a sensible size instead of a Material one. Component rules
   below only deviate deliberately (compact form group titles, section heads,
   the uppercase results kicker). */
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; }
h3 { font-size: 1.18rem; line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.35; }
h5 { font-size: 1rem; line-height: 1.4; }
h6 { font-size: 0.95rem; line-height: 1.4; }

.et-main { max-width: var(--et-max); margin-inline: auto; padding: 1rem 1rem 6rem; }
@media (min-width: 993px) { .et-main { padding: 1.5rem 1.75rem 2.5rem; } }
/* Generous vertical rhythm between top-level content sections (ads, FAQ,
   related panels, landing/home blocks). Block margins collapse between adjacent
   siblings, so this yields a consistent ~5rem gap. margin-block only touches the
   top/bottom, so centred boxes (margin-inline:auto) stay centred. */
.et-main > section { margin-block: 3rem; }

/* ---- Brand ---- */
.et-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-decoration: none; }
.et-brand span { font-size: 1.75rem; letter-spacing: -0.01em; }
/* The brand lives in a Beer CSS .button, which clamps child img/svg to a fixed
   1.5rem icon box (min/max on both axes). The logo is brand artwork, not a
   button icon, so we release that clamp and size it explicitly. */
.et-brand img.et-logo:not(.responsive) {
  border-radius: 0;
  block-size: 2.25rem; inline-size: auto;
  min-block-size: 2.25rem; max-block-size: 2.25rem;
  min-inline-size: auto;  max-inline-size: none;
}

/* ---- Icons (inline Material SVG) ----
   icon() emits <i class="et-ico"><svg class="et-i">. The <i> keeps Beer CSS's
   icon-slot box (so nav/button layout is native and unbroken); the inner <svg>
   draws the glyph and inherits currentColor. */
.et-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
/* Beer CSS positions an icon's inner image/svg with
   `i > :is(img,svg){ position:absolute; inset:0; inline-size:100%; block-size:100%;
    padding:inherit }`. That model assumes a SQUARE <i>. In the collapsed rail and
   bottom bar Beer CSS pads <i> into a non-square pill, so a 100%×100% SVG that also
   inherits that padding is stretched and pushed off, and disappears. We keep Beer
   CSS's centering model but give the glyph a fixed square size and zero its
   inherited padding, so it renders identically in every bar — exactly like the
   expanded sidebar, where Beer CSS adds no padding. */
.et-i {
  position: static; padding: 0;
  block-size: 1.4rem; inline-size: 1.4rem; min-inline-size: 1.4rem;
  fill: currentColor; flex: none;
}
.et-hero h1 .et-i { block-size: 1.55rem; inline-size: 1.55rem; min-inline-size: 1.55rem; }
.et-related__grid a .et-i, .et-tile .et-i { block-size: 1.5rem; inline-size: 1.5rem; min-inline-size: 1.5rem; }
/* Client-rendered lists (Suosikit, recents) can't inline SVGs, so the glyph
   inside the et-ico wrapper is the per-icon file painted as a currentColor
   mask — it themes in both modes and picks up tile/chip colours like any
   inline SVG icon (the wrapper still gets the .et-tile i chip background). */
.et-mico {
  display: inline-block; flex: none;
  inline-size: 1.5rem; block-size: 1.5rem;
  background: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.et-search-row__icon .et-mico { inline-size: 1.2rem; block-size: 1.2rem; }

/* ---- Top bar ---- */
/* A crisp bottom divider (native --outline-variant) separates the top bar from
   the content below, which uses a different surface shade. */
nav.top.et-top { border-block-end: 1px solid var(--outline-variant); box-shadow: var(--et-sh-1); }
/* Auto-hide on scroll: the bar slides up out of view when the user scrolls down
   and returns the instant they scroll up — maximising reading space while nav
   stays a flick away. Transform is GPU-cheap and reflows nothing; the extra
   1rem clears the drop shadow so no hairline peeks at the viewport top. */
nav.top.et-top { transition: transform 250ms var(--et-ease); will-change: transform; }
nav.top.et-top.et-hidden { transform: translateY(calc(-100% - 1rem)); }
@media (prefers-reduced-motion: reduce) {
  nav.top.et-top { transition: none; }
}
/* Frosted app chrome: content scrolls under translucent blurred bars. The
   blur covers only the two small fixed bars, so it stays cheap to composite. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  nav.top.et-top, nav.bottom.et-bottom {
    background-color: color-mix(in srgb, var(--surface-container) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}


/* ---- Hero ---- */
.et-hero { margin-bottom: 1.25rem; }
.et-hero h1 { display: flex; align-items: center; gap: 0.65rem; margin: 0.1rem 0; }
.et-hero h1 i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; font-size: 1.6rem; border-radius: var(--et-radius);
  color: var(--on-primary-container); background: var(--primary-container);
}
/* ---- Calculator hero: context pill + share, large sans title ---- */
.et-hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.8rem; }
/* Compact context pill: minimal padding/gap, small icon. */
.et-hero__pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem 0.2rem 0.25rem; border-radius: 999px;
  background: var(--surface-container-low, var(--surface)); border: 1px solid var(--et-line);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--et-muted); text-decoration: none; line-height: 1;
  transition: border-color var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease);
}
.et-hero__pill:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); }
.et-hero__pill .et-ico { background: var(--surface); border-radius: 50%; padding: 0.22rem; color: var(--primary); }
.et-hero__pill .et-i { block-size: 0.95rem; inline-size: 0.95rem; min-inline-size: 0.95rem; }
/* Small round hero tool buttons (favourite + share). */
.et-hero__tools { display: inline-flex; gap: 0.4rem; flex: none; }
.et-hero__btn {
  inline-size: 2rem; block-size: 2rem; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-container-low, var(--surface)); border: 1px solid var(--et-line);
  color: var(--on-surface); cursor: pointer;
  transition: border-color var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease), box-shadow var(--et-dur) var(--et-ease);
}
.et-hero__btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); box-shadow: var(--et-sh-1); }
.et-hero__btn .et-i { block-size: 1.1rem; inline-size: 1.1rem; min-inline-size: 1.1rem; }
/* Active favourite (filled star) state, toggled by app.js. */
.et-hero__btn[aria-pressed="true"] { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
/* Large title in the same system sans as the wordmark + all headings (one
   consistent brand voice), no icon chip. */
.et-hero--calc h1 {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.12; margin: 0.1rem 0 0;
}
.et-hero--calc .et-lead { font-size: 1.1rem; margin-top: 0.55rem; max-width: 42rem; }

/* Centered hero variant (info pages and category/subcategory landings). */
.et-hero--center h1 { justify-content: center; text-align: center; }
.et-hero--center .et-lead { margin-inline: auto; text-align: center; }
.et-hero--center .et-landing-count { text-align: center; }
/* Landing pages: section headings centered too, so every heading level reads
   the same (cluster heads already are). Calculator pages stay left-aligned. */
.et-landing-main :is(.et-related, .et-features, .et-usecases, .et-faq) h2 { text-align: center; }
/* The FAQ heading is a flex row (icon + text), so centre it via justify-content. */
.et-landing-main .et-faq h2 { justify-content: center; }
.et-lead { color: var(--et-muted); margin-top: 0.35rem;}

/* ---- Cards ---- */
.et-card {
  padding: 1.25rem; border-radius: var(--et-radius); margin-bottom: 1rem;
  background: var(--surface-container-low, var(--surface));
  border: 1px solid var(--et-line);
  box-shadow: var(--et-sh-1);
  transition: box-shadow var(--et-dur) var(--et-ease), transform 250ms var(--et-spring);
}
.et-calc { margin-top: 0.5rem; }
/* Bespoke full-width body (layout: custom) — countdown, keypad, dice, etc.
   Centred, capped reading width; the page composes its own widgets inside
   using the shared kit, so it feels purpose-built yet stays on-brand. */
.et-custom { margin: 0.5rem auto 0; }
/* In a single-column custom layout the result card must not stick. */
.et-custom .et-results { position: static; }

/* Countdown display — big day/hour/min/sec cards. A shared bespoke widget for
   the countdown calculator and every holiday "days until" page. Lives in a
   primary-container card, so it uses --on-primary-container. */
.et-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.et-countdown__unit {
  text-align: center; padding: 0.9rem 0.4rem; border-radius: var(--et-radius);
  background: color-mix(in srgb, var(--on-primary-container) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-primary-container) 12%, transparent);
}
.et-countdown__num {
  font-size: clamp(1.7rem, 1.1rem + 3vw, 2.6rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--on-primary-container);
}
.et-countdown__label {
  margin-block-start: 0.4rem; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--on-primary-container) 62%, transparent);
}
.et-cd-picker { margin-block-end: 1rem; }
.et-cd-target { margin-block-start: 1rem; text-align: center; color: color-mix(in srgb, var(--on-primary-container) 80%, transparent); }

/* ---- Keypad keys (shared by the basic + scientific calculators) ----
   NOT Beer CSS .button, which visually merges adjacent buttons into one bar.
   Each .et-key is a self-contained, separated grid cell. The page sets the
   grid (column count) and may shrink keys for a denser layout. */
.et-key {
  appearance: none; cursor: pointer; font: inherit; margin: 0;
  min-height: 3.4rem; padding: 0.5rem; border-radius: var(--et-radius);
  border: 1px solid var(--et-line); background: var(--surface); color: var(--on-surface);
  font-size: 1.2rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.12s var(--et-ease), border-color 0.12s var(--et-ease), transform 0.06s var(--et-ease);
}
.et-key:hover { border-color: color-mix(in srgb, var(--primary) 42%, transparent); }
.et-key:active { transform: translateY(1px); }
.et-key:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.et-key--fn { color: var(--et-muted); font-size: 1rem; font-weight: 700; }   /* CA/CE/BS, sin, π … */
.et-key--op {                                                                /* ÷ × − + */
  color: var(--primary); font-weight: 700;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 20%, var(--et-line));
}
.et-key--op:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.et-key--eq { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }
.et-key--eq:hover { background: color-mix(in srgb, var(--primary) 88%, #000); border-color: transparent; }
.et-key--wide { grid-column: 1 / -1; }   /* full-width key (basic calc "=") */

/* ---- Calculator form ---- */
.et-field-group { margin-bottom: 1.3rem; }
/* Form headings are h2/h3 for a sequential outline (the form card renders
   right after the page h1) but keep their compact group-title look. Scoped to
   the input card; the results card titles itself via .et-results__title. */
.et-calc article.et-card:not(.et-results) :is(h2, h3),
.et-field-group > :is(h2, h3) { font-size: 0.95rem; margin: 0.2rem 0 0.7rem; color: var(--on-surface); }
.et-card .field { transition: box-shadow var(--et-dur) var(--et-ease); }
.et-card .field:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.et-field-help { color: var(--et-muted); font-size: 0.9rem; margin: 0 0 0.9rem; }

/* Quick-value preset chips (e.g. Pikahinnat). */
.et-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 1rem; }
/* Preset-group caption: hidden — the chips are self-explanatory. Kept in the
   DOM (and on the group's aria-label) for screen readers. */
.et-presets__label { display: none; }
.et-presets .chip { cursor: pointer; }

/* Reset ("Tyhjennä") sits quietly at the bottom-right of the input card. */
.et-form-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.et-form-actions .et-i { inline-size: 1.1rem; block-size: 1.1rem; }

/* ---- Checkbox / switch glyphs (font-free) ----
   Beer CSS draws these controls as Material Symbols font ligatures
   (content:"check_box" etc). The site ships no icon font (icons are inline
   SVG), so the glyphs rendered as literal text. Paint them instead from the
   same outlined SVGs as a currentColor mask — identical to how icon() works,
   so they theme in light/dark and stay fully offline. Relative URLs resolve
   against this stylesheet, so they are correct under both /development and /. */
.checkbox > span:before {
  content: "";
  border-radius: 0;
  background-color: var(--on-surface-variant);
  -webkit-mask: url("../icons/check_box_outline_blank.svg") center / contain no-repeat;
  mask: url("../icons/check_box_outline_blank.svg") center / contain no-repeat;
}
.checkbox > input:checked + span:before {
  background-color: var(--primary);
  -webkit-mask-image: url("../icons/check_box.svg");
  mask-image: url("../icons/check_box.svg");
}
.checkbox > input:indeterminate + span:before {
  background-color: var(--primary);
  -webkit-mask-image: url("../icons/indeterminate_check_box.svg");
  mask-image: url("../icons/indeterminate_check_box.svg");
}
/* The switch knob/track are CSS-drawn already; only the tiny "check" ligature
   inside the checked knob needs suppressing so no literal word shows. */
.switch > input:checked + span:before { content: ""; }

/* ---- Results panel (the star) ---- */
.et-results {
  min-height: 180px;
  background: linear-gradient(180deg, var(--primary-container), color-mix(in srgb, var(--primary-container) 35%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  box-shadow: var(--et-glow);
}
@media (min-width: 993px) { .et-results { position: sticky; top: 5.25rem; } }
.et-results__title { font-size: 0.72rem; margin: 0 0 0.9rem; color: var(--on-primary-container); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.et-result-hero { text-align: center; padding: 0.4rem 0 1rem; }
.et-result-hero__value {
  font-size: clamp(2.4rem, 1.8rem + 3vw, 3.2rem); font-weight: 800; line-height: 1.08;
  color: var(--on-primary-container); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  /* Finnish number formatting uses no-break spaces, so a long value is one
     unbreakable token: app.js shrinks the font to fit first, and only if the
     floor is reached does the value wrap (never clips). */
  overflow-wrap: anywhere;
}
.et-result-hero__label { margin-top: 0.5rem; font-size: 0.9rem; color: color-mix(in srgb, var(--on-primary-container) 78%, transparent); }

.et-result-rows { border-top: 1px solid color-mix(in srgb, var(--on-primary-container) 16%, transparent); }
.et-result { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; }
.et-result + .et-result { border-top: 1px solid color-mix(in srgb, var(--on-primary-container) 12%, transparent); }
.et-result__label { font-size: 0.9rem; color: color-mix(in srgb, var(--on-primary-container) 75%, transparent); }
.et-result__value {
  font-size: 1.15rem; font-weight: 700; color: var(--on-primary-container);
  font-variant-numeric: tabular-nums; text-align: end;
  /* Long values (hex/binary strings, big sums) wrap instead of overflowing. */
  min-inline-size: 0; overflow-wrap: anywhere;
}

/* ---- Article ---- */
/* Reading column kept at ~46rem (≈65–75 chars/line — the readable optimum;
   wider lines are harder to track). Typography tuned for comfortable long-form. */
.et-article {
  margin: 2.5rem auto 0;
  padding:1.75rem;
  font-size: 1.05rem; line-height: 1.75; color: var(--on-surface);
}
.et-article h2 { margin: 2.5rem 0 0.6rem; }
.et-article h3 { margin: 1.75rem 0 0.4rem; }
.et-article p, .et-article ul { margin: 0.85rem 0; }
.et-article strong { color: var(--on-surface); }
/* The first element should sit flush with the article top — no stacked margin. */
.et-article > :first-child { margin-top: 0; }
/* Lead-in: the article's opening paragraph reads larger and softer. */
.et-article > p:first-of-type { font-size: 1.15rem; line-height: 1.7; color: var(--et-muted); }
.et-article .et-formula {
  margin: 1rem 0;
  background: var(--surface-container, color-mix(in srgb, var(--primary) 7%, var(--surface)));
  border: 1px solid var(--et-line);
  border-left: 3px solid var(--primary);
  padding: 0.75rem 1rem; border-radius: var(--et-radius);
  text-align: center; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* =================================================================== *
 *  Calculator design system
 *  Reusable, theme-following building blocks shared by every calculator
 *  and landing page. Two families:
 *    A. RESULT WIDGETS  — live inside the results card (on --primary-
 *       container, so text uses --on-primary-container).
 *    B. CONTENT BLOCKS  — live in the article / landing body (on --surface).
 *  Semantic tone (good/caution/risk/info/neutral) is selected per element
 *  with an .is-* modifier that sets --et-tone; backgrounds derive from it via
 *  color-mix so one set of classes reads correctly on either surface.
 * =================================================================== */

/* Tone selector — set once, consumed by every component below. */
.is-good    { --et-tone: var(--et-good); }
.is-caution { --et-tone: var(--et-caution); }
.is-risk    { --et-tone: var(--et-risk); }
.is-info    { --et-tone: var(--et-info); }
.is-neutral { --et-tone: var(--et-neutral); }

/* ---- A. Result widgets (results card context) ---- */

/* Status pill — the headline verdict (e.g. "Normipainoinen"). */
.et-statuspill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.95rem; border-radius: 999px;
  font-weight: 600; font-size: 0.92rem;
  color: var(--et-tone, var(--on-primary-container));
  background: color-mix(in srgb, var(--et-tone, var(--primary)) 18%, transparent);
}
.et-statuspill::before {
  content: ""; inline-size: 0.5rem; block-size: 0.5rem;
  border-radius: 50%; background: currentColor; flex: none;
}

/* Gauge / range bar — a coloured scale with a marker and boundary ticks.
   The page sets the segment gradient (inline, from semantic tokens) and JS
   sets --et-pos (0–100%) for the marker. */
.et-gauge { margin: 1.1rem 0 0.4rem; }
.et-gauge__track {
  position: relative; block-size: 0.55rem; border-radius: 999px;
  background: var(--et-gauge-grad, var(--surface-variant));
}
.et-gauge__marker {
  position: absolute; inset-block-start: 50%; inset-inline-start: var(--et-pos, 50%);
  inline-size: 0.22rem; block-size: 1.15rem; border-radius: 999px;
  background: var(--on-primary-container);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-container) 85%, transparent);
  transform: translate(-50%, -50%);
  transition: inset-inline-start var(--et-dur) var(--et-ease);
}
.et-gauge__ticks { position: relative; block-size: 1.1rem; margin-block-start: 0.45rem; }
.et-gauge__tick {
  position: absolute; transform: translateX(-50%);
  font-size: 0.7rem; white-space: nowrap;
  color: color-mix(in srgb, var(--on-primary-container) 65%, transparent);
}

/* Metric grid — small result sub-cards (replaces flat label/value rows). */
.et-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-block-start: 0.9rem; }
.et-metrics--1 { grid-template-columns: 1fr; }
.et-metric {
  padding: 0.7rem 0.85rem; border-radius: var(--et-radius);
  background: color-mix(in srgb, var(--on-primary-container) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-primary-container) 12%, transparent);
}
.et-metric__label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--on-primary-container) 62%, transparent);
}
.et-metric__value {
  margin-block-start: 0.25rem; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--on-primary-container);
  overflow-wrap: anywhere;
}
.et-metric__value.is-good    { color: var(--et-good); }
.et-metric__value.is-caution { color: var(--et-caution); }
.et-metric__value.is-risk    { color: var(--et-risk); }
.et-metric__value.is-info    { color: var(--et-info); }

/* Split bar — a two-tone proportion bar with legend (e.g. principal vs interest). */
.et-split { margin-block-start: 1rem; }
.et-split__bar { display: flex; block-size: 0.55rem; border-radius: 999px; overflow: hidden; background: var(--surface-variant); }
.et-split__a { background: var(--primary); }
.et-split__b { background: var(--et-caution); }
.et-split__legend { display: flex; justify-content: space-between; margin-block-start: 0.5rem; font-size: 0.8rem; color: color-mix(in srgb, var(--on-primary-container) 75%, transparent); }
.et-split__legend b { color: var(--on-primary-container); }
.et-split__legend b.is-caution { color: var(--et-caution); }

/* Segmented toggle — a pill group for mode/unit/type choices. */
.et-segmented { display: inline-flex; padding: 0.2rem; gap: 0.2rem; border-radius: 999px; background: var(--surface-container-high, var(--surface-variant)); }
.et-segmented__btn {
  border: 0; cursor: pointer; padding: 0.45rem 0.95rem; border-radius: 999px;
  font: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--on-surface-variant); background: transparent;
  transition: background-color var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease);
}
.et-segmented__btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* ---- B. Content blocks (article / landing context) ---- */

/* Category list — colour-coded cards explaining ranges/classes. */
.et-catlist { display: grid; gap: 0.7rem; margin: 1.25rem 0; }
.et-catitem {
  padding: 1rem 1.15rem; border-radius: var(--et-radius);
  border: 1px solid var(--et-line);
  border-inline-start: 3px solid var(--et-tone, var(--et-line));
  background: color-mix(in srgb, var(--et-tone, var(--on-surface)) 6%, var(--surface-container-low, var(--surface)));
}
.et-catitem__title { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--on-surface); }
.et-catitem__title::before {
  content: ""; inline-size: 0.62rem; block-size: 0.62rem; border-radius: 50%;
  background: var(--et-tone, var(--et-neutral)); flex: none;
}
.et-catitem__text { margin-block-start: 0.45rem; color: var(--et-muted); line-height: 1.6; font-size: 0.96rem; }

/* Icon list — icon chip + title + paragraph (e.g. tips / strategies). */
.et-iconlist { display: grid; gap: 1.15rem; margin: 1.25rem 0; }
.et-iconitem { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.et-iconitem > .et-ico {
  inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--et-radius);
  background: var(--primary-container); color: var(--on-primary-container); flex: none;
}
.et-iconitem > .et-ico .et-i { inline-size: 1.3rem; block-size: 1.3rem; }
.et-iconitem__title { font-weight: 700; color: var(--on-surface); }
.et-iconitem__text { margin-block-start: 0.25rem; color: var(--et-muted); line-height: 1.6; }

/* Callout — info/tip/caution/risk note box. */
.et-callout {
  display: flex; gap: 0.75rem; align-items: flex-start;
  margin: 1.5rem 0; padding: 0.95rem 1.15rem; border-radius: var(--et-radius);
  border: 1px solid color-mix(in srgb, var(--et-tone, var(--primary)) 32%, transparent);
  background: color-mix(in srgb, var(--et-tone, var(--primary)) 10%, transparent);
  color: var(--on-surface); line-height: 1.6;
}
.et-callout .et-i { color: var(--et-tone, var(--primary)); flex: none; margin-block-start: 0.1rem; }
.et-callout > div { min-inline-size: 0; }

/* Comparison table — styled header + zebra rows for any article <table>. */
.et-article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; overflow: hidden; border-radius: var(--et-radius); }
.et-article thead th { background: var(--primary-container); color: var(--on-primary-container); text-align: start; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.7rem 0.9rem; }
.et-article tbody td { padding: 0.7rem 0.9rem; border-block-start: 1px solid var(--et-line); }
.et-article tbody tr:nth-child(even) { background: color-mix(in srgb, var(--on-surface) 3%, transparent); }

/* ---- Discovery panels: related / more-in-subcategory / popular ---- */
.et-linkcards {
  margin: 2.25rem auto 0;
  padding: 1.5rem; border-radius: calc(var(--et-radius) + 0.35rem);
  border: 1px solid var(--et-line); background: var(--surface-container-low, var(--surface));
}
.et-linkcards__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.et-linkcards__head h2 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.25rem; margin: 0; }
.et-linkcards__head h2 .et-i { color: var(--primary); }
.et-linkcards__more {
  display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
  color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.et-linkcards__more .et-i { block-size: 1rem; inline-size: 1rem; min-inline-size: 1rem; }
.et-linkcards__grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 600px) { .et-linkcards__grid { grid-template-columns: 1fr 1fr; } }
.et-linkcard {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.85rem; border-radius: var(--et-radius);
  border: 1px solid var(--et-line); background: var(--surface);
  text-decoration: none; color: var(--on-surface); min-inline-size: 0;
  transition: border-color var(--et-dur) var(--et-ease), box-shadow var(--et-dur) var(--et-ease), transform 250ms var(--et-spring);
}
.et-linkcard:hover { border-color: color-mix(in srgb, var(--primary) 38%, transparent); box-shadow: var(--et-sh-1); transform: translateY(-2px); }
.et-linkcard__icon {
  flex: none; inline-size: 2.2rem; block-size: 2.2rem; border-radius: var(--et-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--on-primary-container);
}
.et-linkcard__icon .et-i { block-size: 1.2rem; inline-size: 1.2rem; min-inline-size: 1.2rem; }
.et-linkcard__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.et-linkcard__title {
  font-weight: 600; font-size: 0.95rem; line-height: 1.25; color: var(--on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-linkcard__sub { font-size: 0.78rem; color: var(--et-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-linkcard__arrow { flex: none; color: var(--et-muted); transition: transform var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease); }
.et-linkcard__arrow .et-i { block-size: 1.1rem; inline-size: 1.1rem; min-inline-size: 1.1rem; }
.et-linkcard:hover .et-linkcard__arrow { color: var(--primary); transform: translateX(3px); }

/* ---- FAQ ---- */
/* Contained panel holding the heading + all Q&A cards (Apple-/fintech-style). */
.et-faq {
  margin: 2.25rem auto 0;
  padding: 1.5rem; border-radius: calc(var(--et-radius) + 0.35rem);
  border: 1px solid var(--et-line); background: var(--surface-container-low, var(--surface));
}
.et-faq h2 {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1.4rem; margin: 0 0 1.1rem;
}
.et-faq h2 .et-i { color: var(--primary); }
.et-faq__list { display: grid; gap: 0.7rem; }
.et-faq details {
  border: 1px solid var(--et-line); border-radius: var(--et-radius);
  background: var(--surface);
  transition: box-shadow var(--et-dur) var(--et-ease), border-color var(--et-dur) var(--et-ease);
}
.et-faq details[open] {
  box-shadow: var(--et-sh-1);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--et-line));
}
.et-faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.2rem; font-weight: 600; font-size: 1.05rem;
  line-height: 1.4; color: var(--on-surface);
  transition: color var(--et-dur) var(--et-ease);
}
.et-faq summary::-webkit-details-marker { display: none; }
.et-faq summary:hover { color: var(--primary); }
.et-faq__q { flex: 1; }
.et-faq__chevron {
  flex: none; color: var(--et-muted);
  transition: transform var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease);
}
.et-faq details[open] .et-faq__chevron { transform: rotate(180deg); color: var(--primary); }
.et-faq__a { padding: 0 1.2rem 1.2rem; color: var(--et-muted); line-height: 1.7; }

/* ---- Homepage hero + search ---- */
.et-home-hero { margin: 1.5rem auto 2rem; text-align: center; }
.et-home-hero h1 { margin: 0; }
.et-home-hero .et-lead { margin: 0.6rem auto 1.4rem;}
.et-home-search {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; max-width: 32rem; min-width: 0; box-sizing: border-box;
  margin-inline: auto;
  padding: 1.5rem 1.1rem; border-radius: 2rem; cursor: text;
  border: 1px solid var(--outline-variant); background: var(--surface-container);
  color: var(--et-muted); font-size: 1.05rem;
  box-shadow: var(--et-sh-1);
  transition: border-color var(--et-dur) var(--et-ease), box-shadow var(--et-dur) var(--et-ease);
}
.et-home-search:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: var(--et-sh-2); }
/* Icon stays fixed; label takes the rest and may ellipsize rather than overflow. */
.et-home-search > .et-ico { flex: none; }
.et-home-search > span { flex: 1; min-width: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 30rem) {
  .et-home-search { padding: 0.7rem 1rem; font-size: 1rem; gap: 0.5rem; }
}
.et-home-all { max-width: var(--et-max); margin: 2rem auto 0; text-align: center; }
/* Text-link variant only — a Beer CSS .button inside keeps its native colours. */
.et-home-all a:not(.button) { color: var(--primary); text-decoration: none; font-weight: 600; }

/* ---- A–Ö index ---- */
.et-azjump {
  display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center;
  max-width: var(--et-max); margin: 0 auto 1.5rem;
}
.et-azjump a {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 2rem; block-size: 2rem; padding: 0 0.4rem; border-radius: var(--et-radius);
  border: 1px solid var(--outline-variant); text-decoration: none;
  color: var(--on-surface); font-weight: 700;
}
.et-azjump a:hover { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.et-azlist { max-width: var(--et-max); margin: 0 auto; }
.et-azgroup { margin-bottom: 1.5rem; scroll-margin-top: 5rem; }
.et-azgroup__letter {
  font-size: 1.3rem; color: var(--primary);
  padding-bottom: 0.3rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--outline-variant);
}
.et-azgroup ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0.15rem;
}
@media (min-width: 600px) { .et-azgroup ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 993px) { .et-azgroup ul { grid-template-columns: repeat(3, 1fr); } }
.et-azgroup li a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: var(--et-radius);
  text-decoration: none; color: var(--on-surface);
}
.et-azgroup li a:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); color: var(--primary); }
.et-azgroup li .et-i { color: var(--et-muted); }

/* ---- Browse drawer drill-down ---- */
.et-drawer__head {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
  padding-block-end: 0.6rem; border-block-end: 1px solid var(--outline-variant);
}
.et-browse { position: relative; overflow-y: auto; }
.et-browse__panel { display: none; flex-direction: column; }
.et-browse__panel.is-active { display: flex; }
.et-browse__row, .et-browse__back {
  /* Beer CSS styles bare <button> as a pill: content-box sizing, 0.5rem inline
     margins, centered content and a fixed 2.5rem height. Neutralise those so
     <button> rows render identically to <a> rows (no overflow, same left edge,
     same height). */
  box-sizing: border-box; margin: 0; block-size: auto; justify-content: flex-start;
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.7rem 0.6rem; border: 0; background: transparent; cursor: pointer;
  text-align: start; text-decoration: none; color: var(--on-surface);
  font: inherit; border-radius: var(--et-radius);
  transition: transform 200ms var(--et-spring), background-color var(--et-dur) var(--et-ease);
}
.et-browse__row:hover, .et-browse__back:hover {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
}
.et-browse__label { flex: 1; min-inline-size: 0; font-weight: 600; }
.et-browse__chev { flex: none; color: var(--et-muted); }
.et-browse__back { font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; }
.et-browse__chev-back { transform: rotate(180deg); color: var(--primary); }
.et-browse__all { color: var(--primary); font-weight: 700; }

/* ---- Landing pages (category pillar / subcategory cluster) ---- */
.et-landing { max-width: var(--et-max); margin: 0 auto; }
/* Subcategory pillar listing uses row cards — capped to a comfortable 2-column
   reading width (matches the related-calculator panels). */
.et-landing--list { max-width: 52rem; }
.et-landing__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem;
}
@media (min-width: 600px) { .et-landing__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 993px) { .et-landing__grid { grid-template-columns: repeat(4, 1fr); } }
.et-landing__tile { justify-content: flex-start; }
.et-tile__title { line-height: 1.3; }
.et-tile__count { font-size: 0.78rem; font-weight: 500; color: var(--et-muted); }
.et-landing-count { margin-top: 0.85rem; }
.et-landing-count .chip { color: var(--et-muted); }

/* ---- Related / tiles ---- */
.et-related { max-width: var(--et-max); margin: 2.25rem auto 0; }
.et-related h2 {font-size: 1.75rem;margin-bottom:1.5rem;text-align: center;line-height: 2.15rem;}
/* Centred one-line intro under a section heading (homepage sections). */
.et-section-lead { max-width: 40rem; margin: -0.5rem auto 1.1rem; text-align: center; color: var(--et-muted); }
.et-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
@media (min-width: 600px) { .et-related__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 993px) { .et-related__grid { grid-template-columns: repeat(4, 1fr); } }

/* Compact pill links for secondary navigation (sibling topics / other
   categories): icon + name + count badge on one line, wrapping centered row. */
.et-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.et-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.95rem; border: 1px solid var(--et-line);
  border-radius: var(--et-radius);
  background: var(--surface-container-low, var(--surface));
  color: var(--on-surface); text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
  transition: transform 250ms var(--et-spring), color var(--et-dur) var(--et-ease);
}
.et-pills .et-pill .et-i {
  block-size: 1.15rem; inline-size: 1.15rem; min-inline-size: 1.15rem;
  color: var(--primary);
}
.et-pill:hover { color: var(--primary); }
.et-pill__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 1.5rem; block-size: 1.5rem; padding: 0 0.4rem;
  border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: var(--secondary-container); color: var(--on-secondary-container);
}

/* On calculator pages keep the related section in the same centered column as
   the article/FAQ above it, so the whole page reads as one aligned stack. */
#et-calc-root .et-related { margin:auto 0; }
#et-calc-root .et-related__grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  #et-calc-root .et-related__grid { grid-template-columns: repeat(4, 1fr); }
}
.et-related__grid a, .et-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center;
  padding: 1.15rem 0.6rem; border-radius: var(--et-radius); border: 1px solid var(--et-line);
  background: var(--surface-container-low, var(--surface)); box-shadow: var(--et-sh-1);
  text-decoration: none; font-weight: 600; color: var(--on-surface);
  transition: transform 250ms var(--et-spring), box-shadow var(--et-dur) var(--et-ease), border-color var(--et-dur) var(--et-ease);
}
.et-related__grid a i, .et-tile i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; font-size: 1.5rem; border-radius: var(--et-radius);
  background: var(--primary-container); color: var(--on-primary-container);
}
/* "Show all" tile that closes a capped cluster grid. */
.et-tile--all { border-style: dashed; }
.et-tile--all .et-tile__title { color: var(--primary); }

/* ---- Landing editorial sections (pillar / cluster rich content) ---- */
/* Expanded subcategory block on a category page: heading + its calculator tiles. */
.et-cluster { max-width: var(--et-max); margin: 2.5rem auto 0; }
.et-cluster__head { text-align: center; margin-bottom: 1.1rem; }
.et-cluster__head h2 {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.5rem; margin: 0 0 0.3rem;
}
.et-cluster__head h2 a { color: var(--on-surface); text-decoration: none; }
.et-cluster__head h2 a:hover { color: var(--primary); }
.et-cluster__head .et-lead { margin: 0 auto;}

/* "Why use" feature rows grouped in one soft card. */
.et-features { margin: 2.5rem auto 0; }
.et-features > h2 { font-size: 1.5rem; text-align: center; margin-bottom: 1.1rem; }
.et-features__list {
  display: grid; gap: 1.1rem;
  padding: 1.5rem; border-radius: var(--et-radius);
  border: 1px solid var(--et-line); background: var(--surface-container-low, var(--surface));
}
.et-features__row { display: flex; gap: 0.9rem; align-items: flex-start; line-height: 1.55; }
.et-features__row > .et-i { flex: none; margin-top: 0.05rem; color: var(--primary); }
.et-features__row strong { color: var(--on-surface); }

/* Use-case cards (responsive 1 → 2 columns). */
/* One cohesive panel (matches the FAQ/related boxes): heading + use-case items
   flowing inside a single container, items borderless so it reads as one box. */
.et-usecases {
  margin: 2.5rem auto 0;
  padding: 1.75rem; border-radius: calc(var(--et-radius) + 0.35rem);
  border: 1px solid var(--et-line); background: var(--surface-container-low, var(--surface));
}
.et-usecases > h2 {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-size: 1.4rem; margin: 0 0 1.5rem;
}
.et-usecases > h2 .et-i { color: var(--primary); }
.et-usecases__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 700px) { .et-usecases__grid { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
.et-usecase { padding: 0; border: 0; background: none;  box-shadow:none;}
.et-usecase h3 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.02rem; margin: 0 0 0.4rem; color: var(--on-surface);
}
.et-usecase h3 > .et-ico {
  flex: none; color: var(--on-primary-container); background: var(--primary-container);
  inline-size: 2rem; block-size: 2rem; border-radius: var(--et-radius);
}
.et-usecase h3 > .et-ico .et-i { inline-size: 1.2rem; block-size: 1.2rem; min-inline-size: 1.2rem; }
.et-usecase p { margin: 0; color: var(--et-muted); line-height: 1.6; font-size: 0.95rem; }

/* ---- Short answer (the standout quick answer; also an AI/snippet target) ---- */
.et-answer {
  margin: 1.75rem auto 0; padding: 1.1rem 1.25rem;
  border-radius: var(--et-radius);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 1.05rem; line-height: 1.6;
}
.et-answer strong { color: var(--on-primary-container); font-weight: 700; }

/* ---- Partner box (clearly labelled commercial links, native service-list look).
   Brand decision: this panel is always a calm GREEN family ("go", not the
   theme's tertiary which can land on warm/red tones). The four component
   tokens below are defined for light and overridden under body.dark, so the
   box still flips correctly with the BeerCSS mode switch. ---- */
.et-partners {
  --pbox-bg: #e6f3e7;        /* soft green container */
  --pbox-on: #173b22;        /* deep green text */
  --pbox-accent: #2e7d32;    /* CTA pill */
  --pbox-on-accent: #ffffff;
  margin: 1.75rem auto 0; padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--pbox-accent) 35%, transparent);
  border-radius: var(--et-radius);
  background: var(--pbox-bg);
  color: var(--pbox-on);
}
body.dark .et-partners {
  --pbox-bg: #1e2b21;
  --pbox-on: #c4e5c8;
  --pbox-accent: #84ce8c;
  --pbox-on-accent: #0c2912;
}
.et-partners__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.et-partners__head h2 { font-size: 1.25rem; margin: 0; flex: 1; color: var(--pbox-on); }
/* Shared "Mainos" disclosure chip — inherits its context's text colour so it
   works on both the green list box and the brand-tinted detail card. */
.et-ad__label {
  flex: none; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.7;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px; padding: 0.1rem 0.55rem;
}
/* Initials chip shown when a partner has no vendored logo. */
.et-ad__ini { display: grid; place-items: center; inline-size: 100%; block-size: 100%; font-weight: 800; }
.et-partners__logo {
  flex: none; display: grid; place-items: center; overflow: hidden;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 0.6rem;
  background: color-mix(in srgb, var(--pbox-on) 8%, transparent);
}
.et-partners__logo img { max-inline-size: 78%; max-block-size: 78%; object-fit: contain; }
.et-partners__logo .et-ad__ini { font-size: 1.1rem; color: var(--pbox-on); }
.et-partners__list { list-style: none; margin: 0; padding: 0; }
.et-partners__list > li + li {
  border-top: 1px solid color-mix(in srgb, var(--pbox-on) 14%, transparent);
}
/* Grid (logo · text · CTA) so the CTA never competes with the description for
   width. On mobile the CTA drops to its own full-width row beneath the text. */
.et-partners__list a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.4rem 0.9rem; padding: 0.75rem 0.15rem;
  text-decoration: none; color: var(--pbox-on);
  border-radius: var(--et-radius);
  transition: background var(--et-dur) var(--et-ease);
}
.et-partners__text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.et-partners__name { font-weight: 700; }
.et-partners__desc { font-size: 0.9rem; line-height: 1.45; opacity: 0.85; }
.et-partners__cta {
  justify-self: end; display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--pbox-accent); color: var(--pbox-on-accent);
  font-size: 0.86rem; font-weight: 600; white-space: nowrap;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  box-shadow: var(--et-sh-1);
  transition: transform var(--et-dur) var(--et-ease), box-shadow var(--et-dur) var(--et-ease);
}
.et-partners__cta .et-i { block-size: 1rem; inline-size: 1rem; min-inline-size: 1rem; }
.et-partners__note { margin: 0 0.15rem 0.5rem; font-size: 0.78rem; color: var(--pbox-on); opacity: 0.75; }
@media (hover: hover) {
  .et-partners__list a:hover { background: color-mix(in srgb, var(--pbox-on) 8%, transparent); }
  .et-partners__list a:hover .et-partners__cta { transform: translateY(-1px); box-shadow: var(--et-sh-2); }
}
@media (max-width: 600px) {
  .et-partners__list a { grid-template-columns: auto 1fr; }
  .et-partners__cta { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 0.15rem; }
}

/* ---- Partner detail ad (one rich card: logo · headline · benefits · CTA) ----
   Brand-tinted via the theme's --primary, so it flips with the BeerCSS dark/
   light switch with no per-mode overrides. ---- */
.et-ad-detail {
  position: relative; margin: 1.75rem auto 0;
  /* extra top padding reserves a strip for the absolute "Mainos" chip so it
     never overlaps the eyebrow, however long the eyebrow text is */
  padding: 2.5rem 1.5rem 1.25rem; border-radius: calc(var(--et-radius) + 0.4rem);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface)),
    color-mix(in srgb, var(--primary) 3%, var(--surface)));
}
.et-ad-detail .et-ad__label { position: absolute; top: 0.85rem; right: 1rem; }
.et-ad-detail__main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; }
.et-ad-detail__logo {
  flex: none; display: grid; place-items: center; overflow: hidden;
  inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--et-radius);
  background: var(--surface); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
}
.et-ad-detail__logo img { max-inline-size: 80%; max-block-size: 80%; object-fit: contain; }
.et-ad-detail__logo .et-ad__ini { font-size: 1.6rem; color: var(--primary); }
.et-ad-detail__body { min-width: 0; }
.et-ad-detail__eyebrow {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 0.2rem;
}
.et-ad-detail__title { font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.5rem; font-weight: 700; }
.et-ad-detail__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.et-ad-detail__benefits li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.92rem; line-height: 1.4; }
.et-ad-detail__benefits .et-i {
  color: var(--primary); margin-top: 0.1rem;
  block-size: 1.1rem; inline-size: 1.1rem; min-inline-size: 1.1rem;
}
.et-ad-detail__cta {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--primary); color: var(--on-primary); text-decoration: none;
  font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  padding: 0.65rem 1.3rem; border-radius: 999px; box-shadow: var(--et-sh-1);
  transition: transform var(--et-dur) var(--et-ease), box-shadow var(--et-dur) var(--et-ease);
}
.et-ad-detail__cta .et-i { block-size: 1.05rem; inline-size: 1.05rem; min-inline-size: 1.05rem; }
.et-ad-detail__more {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.9rem;
  font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none;
}
.et-ad-detail__more .et-i { block-size: 1rem; inline-size: 1rem; min-inline-size: 1rem; }
.et-ad-detail__note { margin: 0.75rem 0 0; font-size: 0.76rem; opacity: 0.7; }
@media (hover: hover) {
  .et-ad-detail__cta:hover { transform: translateY(-1px); box-shadow: var(--et-sh-2); }
  .et-ad-detail__more:hover { text-decoration: underline; }
}
@media (max-width: 600px) {
  .et-ad-detail { padding: 2.5rem 1.25rem 1.25rem; }
  .et-ad-detail__main { grid-template-columns: auto 1fr; gap: 0.9rem 1rem; }
  .et-ad-detail__logo { inline-size: 3.5rem; block-size: 3.5rem; }
  .et-ad-detail__cta { grid-column: 1 / -1; justify-content: center; }
}

/* ---- Action toolbar (rounded-outline icon buttons, centered) ---- */
.et-actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.et-action {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--et-line); background: transparent; cursor: pointer;
  color: var(--et-muted);
  transition: background var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease), border-color var(--et-dur) var(--et-ease);
}
.et-action .et-i { inline-size: 1.25rem; block-size: 1.25rem; }
.et-action:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); }
.et-action.is-on { border-color: var(--primary); color: var(--primary); }

/* "More" menu anchor + items. The menu opens upward, anchored to the button's
   right edge, on focus-within (Beer CSS native). */
.et-actions__more { position: relative; display: inline-flex; }
#et-more-menu {
  inset: auto 0 calc(100% + 0.35rem) auto;
  transform-origin: bottom right; min-inline-size: 11rem; inline-size: max-content;
}
.et-actions__more:focus-within > #et-more-menu {
  opacity: 1; visibility: visible; transform: scale(1);
}
#et-more-menu li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.05rem 0.50rem; cursor: pointer; white-space: nowrap;
}
#et-more-menu li:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
#et-more-menu .et-i { inline-size: 1.15rem; block-size: 1.15rem; }

/* ---- Helpful vote ---- */
.et-helpful {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin: 2rem auto 0; padding: 0.8rem 1rem;
  border: 1px solid var(--et-line); border-radius: var(--et-radius);
  background: var(--surface-container-low, var(--surface));
}
.et-helpful__q { font-weight: 600; }
/* Keep the two buttons together as one unbreakable group. */
.et-helpful__actions { display: inline-flex; gap: 0.4rem; flex: none; margin-inline-start: auto; }
.et-helpful__btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--et-line); background: var(--surface);
  color: var(--on-surface); cursor: pointer; font-weight: 600; font-size: 0.9rem;
  transition: background var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease), border-color var(--et-dur) var(--et-ease);
}
.et-helpful__btn .et-i { width: 1rem; height: 1rem; min-inline-size: 1rem; }
.et-helpful__btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); }
.et-helpful__btn.is-on { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.et-helpful__btn:disabled { cursor: default; opacity: 0.85; }
.et-helpful__msg { color: var(--et-muted); font-size: 0.88rem; flex-basis: 100%; }
/* Small screens: question on its own line, two equal-width buttons below. */
@media (max-width: 30rem) {
  .et-helpful { gap: 0.6rem; }
  .et-helpful__q { flex-basis: 100%; }
  .et-helpful__actions { width: 100%; margin-inline-start: 0; }
  .et-helpful__btn { flex: 1; justify-content: center; }
}

/* ---- Kebab menu (top bar) ---- */
/* The absolute-positioned <menu> must anchor to the ⋮ button itself, not the
   sticky top bar; Beer's .left variant right-aligns the dropdown to it. */
#et-more { position: relative; }
/* Right-anchor the dropdown to the button's right edge. BeerCSS's base menu is
   left-anchored (inset:auto auto 0 0) and only visibility:hidden when closed, so
   near the right edge its 13.5rem width would spill past the viewport and create
   horizontal overflow that shoves the whole top bar. Anchoring right opens it
   leftward, into the page. */
.et-more-menu { inset: auto 0 0 auto; min-inline-size: 13.5rem; border-radius: var(--et-radius); padding-block: 0.4rem; }
.et-more-menu > li > a { gap: 0.65rem; padding: 0.65rem 1rem; font-size: 0.9rem; cursor: pointer; }
.et-more-menu .et-i { inline-size: 1.15rem; block-size: 1.15rem; min-inline-size: 1.15rem; }

/* Empty-state note inside a personal list (Suosikit page). */
.et-empty { color: var(--et-muted); margin: 0; }

/* ---- Search (command palette) ---- */
/* Top-bar search field (tablet/desktop): a quiet pill that opens the overlay.
   Beer CSS paints buttons primary, so the pill resets to a bordered field look. */
.et-topsearch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-inline-size: 15rem; block-size: 2.5rem; padding: 0 0.5rem 0 0.9rem; margin: 0;
  border: 1px solid var(--outline-variant); border-radius: 9999px !important;
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
  color: var(--et-muted); font-size: 0.9rem; font-weight: 400;
  box-shadow: none; cursor: pointer;
  transition: border-color var(--et-dur) var(--et-ease), box-shadow var(--et-dur) var(--et-ease);
}
.et-topsearch:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: var(--et-sh-1); }
.et-topsearch > span { flex: 1; text-align: start; }
.et-topsearch .et-i { inline-size: 1.1rem; block-size: 1.1rem; min-inline-size: 1.1rem; }
.et-topsearch kbd {
  font-family: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1;
  padding: 0.25rem 0.5rem; border: 1px solid var(--outline-variant);
  border-radius: 0.4rem; background: var(--surface); color: var(--et-muted);
}

/* The palette: pill input on top, grouped rows below. The second shadow layer
   dims the whole page behind it — a scrim with no extra DOM (the dialog is
   opened non-modally, so there is no native ::backdrop to use). */
.et-search-dialog {
  position: fixed; inset: 0 auto auto 50%; transform: translateX(-50%);
  inline-size: min(680px, calc(100vw - 1.5rem)); max-inline-size: none;
  margin-block-start: 3.5rem; padding: 0; max-block-size: min(34rem, 85vh);
  border: 1px solid var(--outline-variant); border-radius: 1rem !important;
  background: var(--surface-container); color: var(--on-surface);
  box-shadow: var(--et-sh-2), 0 0 0 100vmax rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.et-search-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-block-end: 1px solid var(--outline-variant);
}
.et-search-bar > .et-ico { color: var(--et-muted); flex: none; margin-inline-start: 0.35rem; }
.et-search-bar input {
  flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent;
  color: var(--on-surface); font-size: 1.05rem; padding: 0.4rem 0;
}
.et-search-results, .et-search-home {
  overflow-y: auto; max-block-size: calc(min(34rem, 85vh) - 4.5rem);
  padding-block-end: 0.5rem;
}
/* Quiet section kickers — small and muted so the eye lands on the results. */
.et-search-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--et-muted); opacity: 0.75; margin: 0; padding: 0.9rem 1.1rem 0.3rem;
}
/* Beer CSS's base `a` rule centers anchor content (justify-content:center for
   buttons); rows must restate start alignment to read as a left-aligned list. */
.et-search-row {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem;
  margin-inline: 0.5rem; padding: 0.5rem 0.6rem;
  border-radius: calc(var(--et-radius) + 2px);
  text-decoration: none; color: var(--on-surface); text-align: start;
}
.et-search-row:hover, .et-search-row:focus,
.et-search-row.is-sel { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.et-search-row__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: 0.65rem;
  background: var(--primary-container); color: var(--on-primary-container);
}
.et-search-row__icon .et-i { inline-size: 1.2rem; block-size: 1.2rem; min-inline-size: 1.2rem; }
/* The text block owns the remaining row width: keeps every title on the same
   left edge and lets the long-title ellipsis actually engage. */
.et-search-row__text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-inline-size: 0; }
.et-search-row__title { max-inline-size: 100%; }
.et-search-row__title {
  font-weight: 600; font-size: 0.95rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-search-row__sub { font-size: 0.8rem; color: var(--et-muted); line-height: 1.3; }
.et-search-hit { color: var(--primary); }
.et-search-empty { padding: 1.25rem; text-align: center; color: var(--et-muted); }

/* ---- Embed dialog ---- */
.et-embed-dialog { max-width: 32rem; }
/* h2 for outline order; global h2 size, only the margin is dialog-specific. */
.et-embed-dialog__title { margin: 0 0 0.5rem; }
.et-embed-dialog textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

/* ---- Toast ---- */
#et-toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%) translateY(1rem);
  z-index: 1000; padding: 0.7rem 1.1rem; border-radius: var(--et-radius);
  background: var(--inverse-surface, #2b2b2b); color: var(--inverse-on-surface, #fff);
  box-shadow: var(--et-sh-2); font-size: 0.9rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity var(--et-dur) var(--et-ease), transform var(--et-dur) var(--et-ease);
}
#et-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 600px) { #et-toast { bottom: 5rem; } }

/* ---- Footer ---- */
/* Dividers are 1px hairlines that fade toward the edges (painted as a
   background gradient — borders can't fade). Softer than a full-width rule,
   and theme-native: the line colour follows --et-line in both modes. */
.et-footer {
  max-width: var(--et-max); margin: 3.5rem auto 0; padding: 2rem 1rem 1.5rem;
  background:
    linear-gradient(90deg, transparent, var(--et-line) 15%, var(--et-line) 85%, transparent)
    top / 100% 1px no-repeat;
}
.et-footer__brand {
  display: inline-flex; align-items: center; gap: 0.5rem; margin:2.15rem 0 0.75rem 0; justify-self: center;
  font-weight: 700; font-size: 1.75rem; color: var(--on-surface); text-decoration: none;
}
/* Readable measure (~60ch) instead of a viewport-wide centered block, so the
   tagline keeps tidy two-to-three even lines on desktop. */
.et-footer__desc {
  color: var(--et-muted); margin: 0.75rem auto 0;
  text-align: center; text-wrap: balance;
}
/* Bottom bar: copyright left, links right on one line; stacks centered on
   small screens. No inline margin/padding of its own — its edges and hairline
   align with the footer content above. */
.et-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 0.5rem 1.5rem; margin: 1.75rem 0 0; padding:0.90rem;
  background:
    linear-gradient(90deg, transparent, var(--et-line) 15%, var(--et-line) 85%, transparent)
    top / 100% 1px no-repeat;
}
.et-footer__links { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
  .et-footer__bottom { flex-direction: column; justify-content: center; gap: 0.75rem; }
}
.et-footer__links a { text-decoration: none; color: var(--et-muted); font-size: 0.85rem; }
.et-footer__links a:hover { color: var(--primary); }
.et-footer__meta { font-size: 0.85rem; color: var(--et-muted); margin: 0; }
.et-muted { color: var(--et-muted); font-size: 0.85rem; }

/* ---- Consistent corner radius (Beer CSS hardcodes several) ---- */
:where(button, .button, .chip, article, .surface, .surface-container, dialog, fieldset,
       table, .field, input:not([type=checkbox]):not([type=radio]):not([type=range]),
       textarea, select) { border-radius: var(--et-radius) !important; }
.circle { border-radius: 50% !important; }
nav:is(.top, .bottom) > a > i { border-radius: var(--et-radius) !important; }

/* ---- Motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .et-card:hover { transform: translateY(-2px); box-shadow: var(--et-sh-2); }
  .et-related__grid a:hover, .et-tile:hover { transform: translateY(-3px); box-shadow: var(--et-sh-2); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
  /* Press compression on everything tappable (springy release via each
     element's own transform transition). */
  button:active, .button:active, .chip:active, .et-tile:active,
  .et-related__grid a:active, .et-pill:active,
  .et-browse__row:active, .et-browse__back:active { transform: scale(0.97); }
  .et-main > * { animation: et-rise 0.45s var(--et-ease) both; }
  .et-result-hero__value.is-pulse { animation: et-pulse 0.5s var(--et-ease); }
}
/* App-like cross-fade between page navigations (progressive enhancement:
   unsupported browsers simply navigate normally). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Dialog scrim: frosted on desktop only — a full-viewport backdrop blur is
   too costly on low-end phones, which keep the plain dim. */
@media (min-width: 993px) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    dialog::backdrop {
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
  }
}
@keyframes et-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes et-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---- Print: a clean factsheet (inputs, result, formula, sources) ---- */
@media print {
  nav.top, nav.bottom, .et-footer,
  .et-actions, .et-helpful, .et-related, .et-faq, .no-print,
  #et-toast, .et-embed-dialog { display: none !important; }

  body { background: #fff !important; color: #000 !important; }
  body:has(> main) { display: block !important; }
  .et-main { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .et-main > * { animation: none !important; }

  .et-card, .et-results, .et-answer, .et-article .et-formula {
    box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important;
    break-inside: avoid;
  }
  .et-results { background: #f4f4f4 !important; }
  .et-result-hero__value, .et-result__value, .et-result__label,
  .et-result-hero__label, .et-results__title { color: #000 !important; }
  .et-hero h1 i { background: none !important; color: #000 !important; }
  .et-calc { display: block !important; }
  .et-calc > * { width: 100% !important; max-width: 100% !important; }
  .et-meta { color: #333 !important; }
  a { color: #000 !important; text-decoration: none; }

  /* Print footer: provenance for the printed sheet. */
  .et-main::after {
    content: "Lähde: Tassutori.fi — " attr(data-calc-id);
    display: block; margin-top: 1.5rem; padding-top: 0.5rem;
    border-top: 1px solid #ccc; font-size: 0.75rem; color: #555;
  }
}

/* ============================================================== *
 *  Tassutori additions (on top of the ported Omalaskuri layer).
 *  All colour/border via BeerCSS theme tokens so dark/light flip.
 * ============================================================== */

/* ---- Palveluhaku finder (front page hero + archive bar) ---- */
.et-finder {
  display: grid;
  gap: 1.5rem;
  text-align: start;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--et-sh-1);
}
@media (min-width: 840px) {
  .et-finder--hero { grid-template-columns: 1.2fr 1fr; align-items: start; gap: 2.5rem; padding: 2rem 2.25rem; }
}
.et-finder__title { margin: 0; font-size: 1.6rem; }
.et-finder__label { margin: 0.15rem 0 0.9rem; font-weight: 600; color: var(--on-surface-variant); }
.et-finder__main { display: grid; gap: 0.8rem; align-content: start; }
.et-finder__search { margin: 0; }
.et-finder__go { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); background: var(--primary); color: var(--on-primary); }
.et-finder__sort { margin: 0; }
.et-finder__sort select { width: 100%; }
.et-finder__submit {
  appearance: none; border: 0; cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  border-radius: 0.6rem; padding: 0.85rem 1rem; font-size: 1rem; font-weight: 600;
  transition: filter var(--et-dur) var(--et-ease);
}
.et-finder__submit:hover { filter: brightness(1.06); }
.et-finder__cats { border: 0; margin: 0; padding: 0; min-width: 0; }
.et-finder__cats legend { font-weight: 600; padding: 0; margin-bottom: 0.6rem; color: var(--on-surface); }
.et-finder__catgrid { display: grid; grid-template-columns: 1fr; gap: 0.35rem 1.25rem; }
@media (min-width: 560px) { .et-finder__catgrid { grid-template-columns: 1fr 1fr; } }
.et-finder__cat { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0; cursor: pointer; }
.et-finder__cat span { line-height: 1.3; }

/* Inline bar variant used at the top of the Palvelut archive. */
.et-finder--bar { grid-template-columns: 1fr; padding: 1.25rem; }
@media (min-width: 840px) { .et-finder--bar .et-finder__main { grid-template-columns: 2fr 1fr auto; align-items: end; gap: 0.8rem; } }

/* ---- Breadcrumb ---- */
.et-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem;
  font-size: 0.85rem; color: var(--on-surface-variant); margin-bottom: 1rem;
}
.et-breadcrumb a { color: inherit; text-decoration: none; }
.et-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.et-breadcrumb [aria-current="page"] { color: var(--on-surface); font-weight: 600; }
.et-breadcrumb__sep .et-i, .et-breadcrumb__sep { block-size: 1rem; inline-size: 1rem; min-inline-size: 1rem; opacity: 0.6; }

/* ---- Article prose ---- */
.et-prose { line-height: 1.7; color: var(--on-surface); }
.et-prose > * + * { margin-top: 1rem; }
.et-prose h2 { margin-top: 2rem; }
.et-prose h3 { margin-top: 1.5rem; }
.et-prose a { color: var(--primary); }
.et-prose img { max-width: 100%; height: auto; border-radius: var(--et-radius); }
.et-prose ul, .et-prose ol { padding-inline-start: 1.4rem; }
.et-prose li + li { margin-top: 0.35rem; }
.et-article__meta { display: flex; align-items: center; gap: 0.4rem; color: var(--on-surface-variant); font-size: 0.9rem; }
.et-article__hero img { width: 100%; height: auto; border-radius: 1rem; margin: 1rem 0; }
.et-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.et-tags a { font-size: 0.8rem; padding: 0.25rem 0.7rem; border: 1px solid var(--outline-variant); border-radius: 999px; color: var(--on-surface-variant); text-decoration: none; }
.et-tags a:hover { border-color: var(--primary); color: var(--primary); }

/* ---- Pagination ---- */
.et-pagination { display: flex; justify-content: center; gap: 0.35rem; margin: 2.5rem 0; flex-wrap: wrap; }
.et-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
  border: 1px solid var(--outline-variant); border-radius: 0.5rem;
  color: var(--on-surface); text-decoration: none;
}
.et-pagination .page-numbers.current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.et-pagination .page-numbers:hover { border-color: var(--primary); }

/* ---- Drawer section separator + menu fallback ---- */
.et-browse__sep { padding: 0.9rem 1rem 0.3rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-surface-variant); }
.et-menu-list { list-style: none; margin: 0; padding: 0; }

/* ---- Generic searchform field ---- */
.et-searchform { margin: 1rem auto; max-width: 32rem; }