/* ═══════════════ e'thix — refinement layer (2026-09-30) ═══════════════
   One design language from the front door (/welcome) through the sign-in into the product. Loaded after every product
   sheet and before foundation.css. It changes how things look and move, never what they are or do: no markup depends on it,
   and removing this file gives back the previous look exactly.

   The direction, in the product's own tokens (ethix.css / core.css): paper, ink and one champagne gold. Hierarchy comes from
   type; gold is a hairline or a highlight; depth is a quiet shadow. What goes:
   - motion that loops forever for no reason and costs the GPU on every frame (spinning conic borders, blurred orbiting blobs,
     a bobbing orb): the elements stay, the loops stop;
   - rainbow gradients (the conic border mixed gold, steel and rose): a gold hairline instead;
   - the glowing orb on the home: the e'thix seal (ink tile, gold mark), as on the sign-in page.
   And one thing arrives: the law's own voice. A statute excerpt is set in the Naskh face (css/fonts.css --statute), so a
   quotation of the law never looks like a sentence the product wrote. */

/* ── 1. borders that spun ── */
.gborder,
.thanks-card,
.plan-card.featured{animation:none;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:var(--gb-fill,var(--surface))}
.thanks-card,.plan-card.featured{animation:rise-in .6s var(--ios) both}

/* ── 2. orbs and blobs: still, and quieter ── */
.aurora::before,.aurora::after,.aurora i{animation:none}
.aurora{opacity:.55}
.av2-orb span,.wse-orb,.ap-orb{animation:none;opacity:.32}
.nf-orb{animation:none}

/* the home's orb → the e'thix seal */
.hero-orb,.c-hero .hero-orb{inline-size:64px;block-size:64px;margin-block-end:20px}
.hero-orb .ho-1,.hero-orb .ho-2{display:none}
.hero-orb .ho-core{inset:0;border-radius:20px;background:#28303B;color:#E2CCA2;animation:none;
  box-shadow:0 16px 30px -16px rgba(28,34,43,.65),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .hero-orb .ho-core{background:#323A47}
.agent .hero-orb .ho-core{color:#C7D3E4}
.hero-orb .ho-core .i{inline-size:28px;block-size:28px;stroke-width:1.6}

/* ── 3. the composer: a gold hairline on focus, not a spinning rainbow and a blurred glow ── */
.composer::before,.composer::after{display:none}
.composer{transition:border-color .25s var(--ease),box-shadow .35s var(--ease)}
.composer:focus-within{border-color:color-mix(in srgb,var(--gold) 65%,var(--line));
  box-shadow:var(--shadow-2),0 0 0 4px color-mix(in srgb,var(--gold) 13%,transparent)}
.composer.recording:focus-within{border-color:var(--line)}

/* ── 4. the primary button: one calm material, the accent the person chose, no sweeping sheen ── */
.b-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-b) 72%,#fff),var(--accent-b) 60%,color-mix(in srgb,var(--accent-c) 55%,var(--accent-b)));
  background-size:auto;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent-c) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}

/* ── 5. the conversation ── */
/* the question: ink, flat, a hairline of light, no drop shadow floating it off the page */
.bubble{background:#2B333F;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="dark"] .bubble{background:#353E4B}
.shell[data-mode="agent"] .bubble{background:#2F3C50}
.bot-av .avatar{box-shadow:0 6px 14px -8px rgba(28,34,43,.5)}
/* the law's voice: statute text in Naskh, a touch larger because Naskh sits smaller than the sans at the same size */
.src-text,.av-text{font-family:var(--statute);font-size:15px;line-height:2;font-weight:500}
.src-ex{font-family:var(--statute);font-size:13.5px}
.src-card{border-inline-start-color:var(--gold)}
/* starters: a gold edge on hover, not a wash of gradient */
.s-card::before{display:none}
@media (hover:hover){.s-card:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}}

/* ── 6. behind a dialog: dimmed, lightly blurred (a full-strength blur of the whole app redraws every frame on a phone) ── */
dialog.sheet::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:rgba(18,22,28,.46)}

/* ── 7. touch screens of any width (an iPad is wider than the phone breakpoint and has no hover): what hover reveals on a
   desktop is simply shown ── */
@media (hover:none){
  .msg-actions{opacity:1;transform:none}
  .s-more{opacity:1}
  .sc-go{opacity:.6;transform:none}
}

/* ── 8. a phone on its side (about 375 px tall): the home keeps its title and starters above the composer, the seal goes ── */
@media (max-height:500px){
  .c-hero .hero-orb{display:none}
  .c-hero{padding-block:12px 8px}
}

/* ── 9. Ethix Deep's level bar on a touch screen: stops a thumb can hit (30 px was a mouse's size) ── */
@media (pointer:coarse){
  .mp-effort{height:40px;padding:3px}
}