@import url('./heading-highlights.css');

/* Duara: fluid interface layer.
 *
 * The design language here follows Apple's interface principles: motion that
 * starts from the current on-screen value and can be grabbed mid-flight,
 * translucent materials that convey depth instead of hard rules, typography
 * whose tracking and leading change with size, and restraint everywhere else.
 *
 * CASCADE NOTE. Tailwind is loaded from the CDN and injects its utilities into
 * the page at runtime, which puts them after this stylesheet. Any rule below
 * that has to beat a generated utility of equal specificity is marked important
 * for that reason and no other. Where raising specificity was enough, that was
 * used instead.
 *
 * This file only restyles. It adds no layout of its own and renames nothing,
 * so every one of the 234 pages keeps the markup it already ships.
 */

/* ======================================================================
 * 1. Tokens
 * ====================================================================== */

:root {
  /* --- Motion ---------------------------------------------------------
   * CSS transitions cannot model a real spring, so gesture-driven motion
   * runs on the spring integrator in fluid.js instead. These curves cover
   * the non-gestural cases: they approximate a critically damped settle,
   * which is the house default because it never overshoots and never
   * distracts. Overshoot is reserved for motion the user threw.
   *
   * Durations are Apple's response values: 0.4s to reposition something,
   * 0.3s for a sheet, and a fast tier for state that must feel immediate. */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-entrance: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-exit: cubic-bezier(0.64, 0, 0.78, 0);   /* inverse of entrance, so a
                                                    reversible transition
                                                    retraces its own path */
  --ease-momentum: cubic-bezier(0.16, 1.04, 0.3, 1);

  --resp-instant: 120ms;   /* press feedback; anything slower reads as lag */
  --resp-fast: 200ms;
  --resp-move: 400ms;      /* Apple: move/reposition, response 0.4 */
  --resp-reveal: 600ms;
  --resp-stagger: 60ms;
  --resp-sheet: 300ms;     /* Apple: drawer/sheet, response 0.3 */

  /* --- Materials ------------------------------------------------------
   * Bigger surfaces read as thicker: more blur and a deeper shadow. A chip
   * uses thin, a nav bar regular, a sheet thick. */
  --material-thin: saturate(180%) blur(12px);
  --material-regular: saturate(180%) blur(20px);   /* the nav/toolbar material */
  --material-thick: saturate(180%) blur(40px);

  --material-tint-light: rgb(246 250 248 / 0.72);
  --material-tint-lightest: rgb(255 255 255 / 0.76);
  --material-edge: rgb(255 255 255 / 0.55);  /* bright top edge = light
                                                catching the material */

  /* --- Depth ----------------------------------------------------------
   * Shadows are tinted with the brand's dark teal rather than pure black.
   * Neutral black over a warm off-white surface reads as dirt; a tinted
   * shadow reads as shade. Each level pairs a tight contact shadow with a
   * wider ambient one, which is what real occlusion looks like. */
  --shadow-color: 175 30% 12%;
  --elev-1:
    0 1px 2px hsl(var(--shadow-color) / 0.04),
    0 2px 8px -2px hsl(var(--shadow-color) / 0.05);
  --elev-2:
    0 1px 2px hsl(var(--shadow-color) / 0.05),
    0 6px 16px -4px hsl(var(--shadow-color) / 0.08);
  --elev-3:
    0 2px 4px hsl(var(--shadow-color) / 0.05),
    0 12px 32px -8px hsl(var(--shadow-color) / 0.12);
  --elev-4:
    0 2px 6px hsl(var(--shadow-color) / 0.06),
    0 24px 56px -12px hsl(var(--shadow-color) / 0.16);

  /* --- Hairlines ------------------------------------------------------
   * The old design drew a 1px solid rule around everything. A border that
   * is always visible competes with the content it frames. These are the
   * faintest line that still separates. */
  --hairline: rgb(23 29 28 / 0.07);
  --hairline-strong: rgb(23 29 28 / 0.12);

  --brand: #375c58;
  --brand-accent: #1d7d70;

  /* --- Radii ----------------------------------------------------------
   * Nested corners step down so an inner curve stays concentric with the
   * outer one it sits inside. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

/* ======================================================================
 * 2. Typography
 *
 * Tracking is size-specific: large text needs negative tracking because
 * letters read further apart as they grow, and small text needs a little
 * positive tracking to stay legible. A single letter-spacing value is
 * wrong somewhere, so there isn't one.
 *
 * Leading moves inversely to size: tight on display, open on body.
 *
 * Sizes are in rem and scale fluidly, so a reader who has raised their
 * browser text size gets a larger site rather than a broken one.
 * ====================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optical sizing where the face supports it, so stems stay even across the
 * size range rather than thinning out as text grows. */
h1, h2, h3, h4, h5, h6,
.font-display, [class*="text-display"], [class*="text-headline"] {
  font-optical-sizing: auto;
  text-wrap: balance;          /* headings break on sense, not on width */
}

p, li { text-wrap: pretty; }   /* no orphan word on the last line */

/* THE SIZE SCALE IS NOT HERE. It lives in the Tailwind config that every page
 * inlines, as fluid clamp() values with per-step tracking and leading.
 *
 * It was briefly declared here instead, as important overrides, and that was
 * wrong in a way worth recording. The markup is mobile-first, headings are
 * written `text-display-lg-mobile md:text-display-lg`, so an important rule on
 * the base class outranks the md: variant at every width, and roughly 250
 * headings across the site were pinned to their phone size on desktop. Sizes
 * set in the config compile into the base utility and each responsive variant
 * alike, so the breakpoint override keeps working.
 *
 * What remains below are the rules that add to the scale rather than restate
 * it, and none of them touch font-size.
 *
 * Thirty three section headings across the site carry a display size, which
 * on a phone renders them identical to the H1 above them. Held one step down
 * so the page still reads H1 to H3 as three distinct levels. Above 768px the
 * columns are wide enough that the full display size is not competing with
 * anything, so the step only applies on phones.
 *
 * Element plus class outranks a bare utility, so this needs no important, and
 * living inside a max-width query it can never collide with an md: variant. */
@media (max-width: 767px) {
  h2.text-display-lg,
  h2.text-display-lg-mobile {
    font-size: 2rem;
    line-height: 1.14;
    letter-spacing: -0.024em;
  }
}

/* --- Uppercase labels -------------------------------------------------
 * An uppercase run needs markedly more tracking than mixed case at the same
 * size, because there are no descenders or x-height variation to separate
 * the shapes.
 *
 * The markup asks for this with two different utilities (tracking-wider on
 * 1,442 elements and tracking-widest on 223) and both are used at the same
 * two sizes, 12px and 14px. That is 0.05em and 0.1em applied to one size
 * tier, decided by which utility whoever wrote the line happened to reach
 * for rather than by how big the text is.
 *
 * Keyed to size instead. Two classes outrank a single utility class, so
 * these win on specificity and need no important. */
.uppercase.text-xs       { letter-spacing: 0.09em; }   /* 12px */
.uppercase.text-mono-sm  { letter-spacing: 0.065em; }  /* 13px, mono */
.uppercase.text-label-md { letter-spacing: 0.07em; }   /* 14px */

/* Body copy sets a comfortable measure. Past roughly 75 characters the eye
 * starts losing the line return. */
main p:not([class*="max-w"]) { max-width: 72ch; }

/* --- Icon font guard --------------------------------------------------
 * Material Symbols draws through ligatures, so the icon name is real text
 * sitting in the span. Until the font arrives, that text is what renders:
 * "check_circle", "expand_more", "arrow_forward" strewn through the page.
 *
 * Requesting the font with display=block covers the slow case by holding
 * the glyphs invisible while it loads. It does not cover the blocked case:
 * once the block period lapses the fallback face paints the ligature name
 * anyway. This class, set by fluid.js, covers that.
 *
 * Hiding an icon outright is safe here precisely because Phase 1 made every
 * one of them decorative and gave every icon-only control a real label, so
 * nothing is conveyed by the icons alone. The class is added by script and
 * never appears in the markup, so if fluid.js does not run, nothing hides. */
html.icons-pending .material-symbols-outlined { visibility: hidden; }

/* ======================================================================
 * 3. Chrome: the header as a material
 *
 * The header was an opaque strip with a 1px rule under it. It is now a
 * translucent layer that content scrolls beneath, and the rule is replaced
 * by a scroll edge effect: separation appears only once there is content
 * underneath to separate from. At the top of the page there is nothing to
 * divide, so nothing is drawn.
 * ====================================================================== */

body > header {
  background: var(--material-tint-light) !important;

  /* Important because the header carries Tailwind's own backdrop-blur-md
   * utility, which is class-level and injected after this file, so it beat a
   * plain declaration here on specificity. Without this the bar kept a flat
   * 12px blur with no saturation and the material never actually applied: 
   * the rule was present and silently losing. */
  -webkit-backdrop-filter: var(--material-regular) !important;
  backdrop-filter: var(--material-regular) !important;

  border-bottom-color: transparent !important;
  transition:
    background var(--resp-fast) var(--ease-standard),
    box-shadow var(--resp-fast) var(--ease-standard);
}

/* Set by fluid.js once the page has scrolled past the header's own height. */
body > header[data-scrolled="true"] {
  background: var(--material-tint-lightest) !important;
}

/* The bright top edge that makes a translucent surface read as glass rather
 * than as a washed-out panel. */
body > header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--material-edge);
  pointer-events: none;
}

/* --- Scroll edge effect ----------------------------------------------
 * Where content meets the floating header, a short gradient fade rather
 * than a drawn rule. A 1px border is a line that has to justify itself at
 * the top of the page too, where there is nothing underneath it to divide.
 * This exists only while something is actually passing beneath.
 *
 * It sits below the bar rather than on it, so what the eye reads is content
 * dissolving into the chrome, not a border laid over the content. */
body > header::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    hsl(var(--shadow-color) / 0.055),
    hsl(var(--shadow-color) / 0.022) 35%,
    transparent
  );
  transition: opacity var(--resp-fast) var(--ease-standard);
}
body > header[data-scrolled="true"]::after { opacity: 1; }

/* --- Nav links: keep color/focus feedback without decorative underlines. */
header nav a[class*="after:"]::after {
  content: none !important;
}

header nav > div > a,
header nav > a {
  transition: color var(--resp-instant) var(--ease-standard);
}

/* --- Dropdown panels -------------------------------------------------
 * A menu should look like it came out of the control that opened it, so
 * the panel scales from its top edge rather than its centre, and blur and
 * scale animate together: the surface materialises instead of fading in
 * as an already-finished rectangle. */
header nav .group > div[class*="absolute"] > div {
  transform-origin: top center;
  /* FULLY OPAQUE, deliberately. This panel drops out of a translucent header
   * and lands on top of 64px display type, and a light translucent surface
   * stacked on another light surface is the one case the material rules
   * forbid outright: legibility collapses. Even at 94% the heading behind it
   * stayed readable enough to compete, which put two texts in one place.
   *
   * Solid #ffffff is the theme's own surface-container-lowest, so this is the
   * palette's existing colour rather than a new one. No alpha, no backdrop
   * filter. The shadow and the radius are what carry the sense of a floating
   * layer now, and both are kept unchanged.
   *
   * The header itself stays translucent. Only the panel is solid. */
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  border-color: var(--hairline) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-4) !important;
  transform: scale(0.97) translateY(-6px);
  opacity: 0;
  transition:
    opacity var(--resp-fast) var(--ease-standard),
    transform var(--resp-move) var(--ease-standard);
}

header nav .group:hover > div[class*="absolute"] > div,
header nav .group:focus-within > div[class*="absolute"] > div {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Rows inside a menu answer the press itself, not the release. */
header nav .group a[class*="hover:bg-surface"] {
  border-radius: var(--r-sm) !important;
  transition:
    background-color var(--resp-instant) var(--ease-standard),
    transform var(--resp-instant) var(--ease-standard);
}
header nav .group a[class*="hover:bg-surface"]:active { transform: scale(0.985); }

/* ======================================================================
 * 4. Controls
 *
 * Feedback happens on the press and is instant. The scale-down on :active
 * is the point: it is the one part of the interface that must never wait
 * for a network call, a route change, or a transition to finish.
 * ====================================================================== */

a, button, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* The markup writes `transition-all duration-300` on nearly every
 * interactive element. Transitioning `all` animates layout properties too,
 * which is what produces the slightly gluey feel. Narrowed to the
 * compositor-friendly properties and shortened. */
a[class*="transition-all"],
button[class*="transition-all"],
.transition-all {
  transition-property: transform, opacity, background-color, border-color, color, box-shadow !important;
  transition-duration: var(--resp-fast) !important;
  transition-timing-function: var(--ease-standard) !important;
}

/* Primary and secondary actions. The shadow is tinted with the button's own
 * colour so it reads as that button's shadow, and deepens on hover to
 * suggest the surface lifting toward the pointer. */
a[class*="bg-primary"][class*="rounded"],
a[class*="bg-secondary"][class*="rounded"],
button[class*="bg-primary"][class*="rounded"],
button[class*="bg-secondary"][class*="rounded"] {
  box-shadow:
    0 1px 2px hsl(var(--shadow-color) / 0.12),
    0 6px 16px -6px hsl(var(--shadow-color) / 0.28) !important;
}
a[class*="bg-primary"][class*="rounded"]:hover,
a[class*="bg-secondary"][class*="rounded"]:hover,
button[class*="bg-primary"][class*="rounded"]:hover,
button[class*="bg-secondary"][class*="rounded"]:hover {
  box-shadow:
    0 2px 4px hsl(var(--shadow-color) / 0.14),
    0 12px 28px -8px hsl(var(--shadow-color) / 0.32) !important;
}

/* One press response for everything pressable, fired by the browser on
 * pointer-down. 0.97 reads as a press rather than a jump, and the 120ms
 * return sits below the threshold where it starts to feel laggy. */
a[class*="rounded"]:active,
button[class*="rounded"]:active,
[role="button"]:active {
  transform: scale(0.97);
  transition-duration: var(--resp-instant) !important;
}

/* Outlined actions: a hairline until hover, when it takes the brand colour. */
a[class*="border-outline-variant"][class*="rounded"],
button[class*="border-outline-variant"][class*="rounded"] {
  border-color: var(--hairline-strong) !important;
  transition-duration: var(--resp-fast) !important;
}

/* --- Focus -----------------------------------------------------------
 * One visible focus ring, on keyboard navigation only. The offset keeps it
 * clear of the element's own rounding. */
:focus-visible {
  outline: 2px solid var(--brand-accent) !important;
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Forms -----------------------------------------------------------
 * Focus grows a soft ring rather than swapping a border colour, so the
 * change reads as the field becoming active rather than as an error. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
  border-color: var(--hairline-strong) !important;
  border-radius: var(--r-md) !important;
  background-color: rgb(255 255 255 / 0.9);
  transition:
    border-color var(--resp-fast) var(--ease-standard),
    box-shadow var(--resp-fast) var(--ease-standard),
    background-color var(--resp-fast) var(--ease-standard) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-accent) !important;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgb(29 125 112 / 0.12) !important;
  outline: none !important;
}
::placeholder { color: rgb(23 29 28 / 0.38); }

/* --- Accordions ------------------------------------------------------
 * fluid.js takes over the height of every <details> and springs it. The
 * element stays native, so keyboard operation, the state exposed to
 * assistive technology, and find-in-page all keep working. */
.fl-acc-body { overflow: hidden; }

/* The marker is replaced by the chevron already in the markup, so the
 * default triangle has to go in both of its spellings. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }

/* The chevron turns with the state rather than snapping at the end of it. */
details > summary .material-symbols-outlined {
  transition: transform var(--resp-move) var(--ease-entrance);
}
details[open] > summary .material-symbols-outlined { transform: rotate(180deg); }

/* --- Domain search status --------------------------------------------
 * Inline verdict on what has been typed, updated on every keystroke rather
 * than held back until submit. Colour is never the only carrier: each state
 * has its own words, and the element is a live region so the message is
 * announced as well as shown. */
.fl-domain-status {
  margin: 0.5rem 0 0 0.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.006em;
  min-height: 1.25rem;               /* reserved, so nothing reflows on type */
  transition: color var(--resp-fast) var(--ease-standard);
}
.fl-domain-status[data-state="idle"]       { color: transparent; }
.fl-domain-status[data-state="incomplete"] { color: rgb(23 29 28 / 0.55); }
.fl-domain-status[data-state="invalid"]    { color: #ba1a1a; }
.fl-domain-status[data-state="ready"]      { color: #1f4a45; }
.fl-domain-status[data-state="checking"]   { color: rgb(23 29 28 / 0.55); }
.fl-domain-status[data-state="available"]  { color: #1d7d70; }
.fl-domain-status[data-state="taken"]      { color: #ba1a1a; }

/* ======================================================================
 * 5. Surfaces
 *
 * Cards were separated by a 1px rule on every edge. They are now separated
 * by depth, which is how the physical world does it. The border survives as
 * a hairline so a card still has an edge on a busy background.
 * ====================================================================== */

.flat-plus-card,
.bento-card,
.bento-item,
.card-hover,
.card-gradient-hover,
.elevation-surface-1,
.hover-lift {
  border-radius: var(--r-lg);
  transition:
    transform var(--resp-move) var(--ease-standard),
    box-shadow var(--resp-move) var(--ease-standard),
    border-color var(--resp-fast) var(--ease-standard) !important;
}

/* Generic card shapes in the markup: a rounded box with an outline border
 * on a light surface. Softened the same way. */
[class*="rounded-2xl"][class*="border-outline-variant"],
[class*="rounded-xl"][class*="border-outline-variant"] {
  border-color: var(--hairline) !important;
}

/* The lift is a whole 6px rather than the old 2px, paired with a shadow
 * that grows with it. Two pixels is below the threshold where the eye reads
 * motion, so it registered as a flicker rather than as a lift. */
.flat-plus-card:hover,
.bento-card:hover,
.card-hover:hover,
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--elev-3) !important;
}

/* A card that is itself a link gets the same press response as a button. */
a.flat-plus-card:active,
a.bento-card:active,
a.card-hover:active,
a.hover-lift:active {
  transform: translateY(-2px) scale(0.995);
  transition-duration: var(--resp-instant) !important;
}

/* Hover travel belongs to a mouse/trackpad; touch keeps immediate press feedback. */
@media (hover: none), (pointer: coarse) {
  .flat-plus-card:hover, .bento-card:hover, .card-hover:hover, .hover-lift:hover {
    transform: none;
  }
}
/* --- Glass panels ----------------------------------------------------
 * Never stack one light translucent surface on another; legibility
 * collapses. This is the only translucent surface in the content area, and
 * the pages using it place it over imagery. */
.glass-panel,
.glass-nav,
.glass-effect {
  background: var(--material-tint-lightest) !important;
  -webkit-backdrop-filter: var(--material-regular) !important;
  backdrop-filter: var(--material-regular) !important;
  border-top-color: var(--material-edge) !important;
}

/* --- Decoration ------------------------------------------------------
 * The old glows were purple on a teal site, left over from a template.
 * Retuned to the brand and pulled well back: decoration should be felt,
 * not seen. */
.glow-soft { box-shadow: 0 0 60px -20px rgb(55 92 88 / 0.18); }
.subtle-glow { box-shadow: 0 0 60px 8px rgb(55 92 88 / 0.05); }
.shadow-soft { box-shadow: var(--elev-2); }

.hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 78% -10%, rgb(29 125 112 / 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgb(55 92 88 / 0.08), transparent 60%);
}
.mesh-bg {
  background-color: #f8fbfa;
  background-image:
    radial-gradient(at 0% 0%, rgb(29 125 112 / 0.06) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgb(55 92 88 / 0.06) 0px, transparent 50%);
}
.text-gradient {
  background: linear-gradient(135deg, #2b5551 0%, #1d7d70 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Grid patterns sat at 5% in a blue that is no longer in the palette.
 * Re-tinted and pulled back so they read as texture rather than as a grid. */
.grid-pattern,
.bg-grid-subtle {
  background-image:
    linear-gradient(to right, rgb(55 92 88 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(55 92 88 / 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ======================================================================
 * 6. Scroll
 * ====================================================================== */

/* An 8px dark-teal bar was heavier than anything else in the interface.
 * The thumb now reads as a soft overlay and firms up on hover. */
* { scrollbar-width: thin; scrollbar-color: rgb(55 92 88 / 0.28) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(55 92 88 / 0.24);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(55 92 88 / 0.42);
  background-clip: content-box;
}

/* Anchored jumps land below the sticky header rather than under it. */
:target { scroll-margin-top: 6rem; }
[id] { scroll-margin-top: 6rem; }

/* Entrances use temporary Web Animations in fluid.js; no hidden resting state. */

/* ======================================================================
 * 7. Accessibility
 *
 * Three independent user signals, honoured independently. Reduced motion
 * does not mean no feedback: it means feedback without vestibular motion,
 * so opacity and colour survive and travel does not.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  /* Collapse the response tokens first. Every transition in this file is
   * written in terms of them, so this reaches all of them at once.
   *
   * The universal rule below cannot do that job on its own: it is specificity
   * zero, and several rules here are class-level and important, so those beat
   * it and kept their full duration. The token override has no specificity
   * contest to lose: by the time a rule is matched the value is already
   * 0.01ms. The universal rule still earns its place, for the durations that
   * come from Tailwind utilities rather than from this file. */
  :root {
    --resp-instant: 0.01ms;
    --resp-fast: 0.01ms;
    --resp-move: 0.01ms;
    --resp-sheet: 0.01ms;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  header nav .group > div[class*="absolute"] > div {
    transform: none !important;
    transition: opacity 150ms linear !important;
  }

  /* No travel, no overshoot, no scaling. Colour still answers the press. */
  .flat-plus-card:hover, .bento-card:hover, .card-hover:hover, .hover-lift:hover,
  a[class*="rounded"]:active, button[class*="rounded"]:active {
    transform: none !important;
  }

  .float-animation, .shimmer, .animate-pulse { animation: none !important; }

  /* fluid.js leaves <details> entirely native in this mode, so the height is
   * never scripted and no inline height is written. Auto is what the element
   * would do on its own; stating it makes sure a stale inline value from a
   * mid-flight preference change cannot leave a panel stuck at a fixed size. */
  .fl-acc-body { height: auto !important; overflow: visible !important; }
  details > summary .material-symbols-outlined { transition: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  body > header,
  body > header[data-scrolled="true"],
  header nav .group > div[class*="absolute"] > div,
  .glass-panel, .glass-nav, .glass-effect {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body > header[data-scrolled="true"] {
    border-bottom: 1px solid var(--hairline-strong) !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hairline: rgb(23 29 28 / 0.28);
    --hairline-strong: rgb(23 29 28 / 0.45);
  }
  body > header,
  header nav .group > div[class*="absolute"] > div,
  .glass-panel {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--hairline-strong) !important;
  }
  :focus-visible { outline-width: 3px !important; }

  /* The status line carries meaning by colour as well as by wording, so the
   * colours themselves need to hold up at higher contrast. */
  .fl-domain-status[data-state="incomplete"],
  .fl-domain-status[data-state="checking"] { color: #2c3533; }
  .fl-domain-status[data-state="invalid"],
  .fl-domain-status[data-state="taken"]    { color: #8c0009; }
  .fl-domain-status[data-state="ready"],
  .fl-domain-status[data-state="available"]{ color: #14352f; }

  /* The scroll edge is a soft gradient, which at higher contrast reads as
   * nothing at all. Give the header a defined edge instead. */
  body > header[data-scrolled="true"]::after { display: none; }
  body > header[data-scrolled="true"] {
    border-bottom: 1px solid var(--hairline-strong) !important;
  }
}

/* None of the above is meaningful on paper. */
@media print {
  body > header, .dmn-toggle, .dmn-panel, .dmn-scrim { display: none !important; }
}