Spry/css/themes/spry-theme-dwarf.css

/*
 * Spry CSS theme: "dwarf" — a GNOME libadwaita / Adwaita clone
 * ---------------------------------------------------------------------
 * Ported from the ARC Adwaita reference (libadwaita's own stylesheet):
 * flat 9px buttons with 17px side padding, bold labels and 7%/16%
 * currentColor hovers; opaque accent primaries that brighten 10% on
 * hover; filled borderless entries (#e6e6e7 / #38383c) with a 2px
 * accent focus edge; boxed-row cards (12px radius, shade hairline, no
 * shadow); a hairline-outlined progress trough; 46x26 switches; dim
 * caption column headers; GTK tab bars (the checked tab is a
 * view-surface card bridging the strip's hairline into the panel);
 * flat headerbar dialogs with a centred bold title; a link/accent
 * split (#0461be / #81d0ff text over the same #3584e4 accent_bg in
 * both modes). Shadows appear only on popovers and dialogs. Light +
 * dark: the Adwaita dark palette repeats verbatim in the forced-dark
 * and auto-dark blocks below.
 */

/* Light scope (Adwaita light). -------------------------------------------- */

[data-theme="dwarf"],
html:has(#spry-theme-dwarf:checked) {
  color-scheme: light;

  /* Palette — libadwaita named colours (adwaita.scss) */
  --spry-bg: #fafafb;            /* window_bg_color */
  --spry-bg-alt: #ebebed;        /* sidebar_bg_color band */
  --spry-bg-inset: #e6e6e7;      /* entry_bg fill: wells, code, disabled */
  --spry-surface: #ffffff;       /* card / boxed rows */
  --spry-surface-hover: #f4f4f5;
  --spry-headerbar-bg: #ffffff;  /* headerbar_bg_color */
  --spry-view-bg: #ffffff;       /* view_bg_color: active tab card */
  --spry-dialog-bg: #fafafb;     /* dialog_bg_color (AdwDialog, not popover white) */
  --spry-popover-bg: #ffffff;    /* popover_bg_color */
  --spry-popover-border: transparent;
  --spry-fg: #323237;            /* window_fg (opaque equivalent) */
  --spry-fg-muted: #5e5c64;      /* secondary */
  --spry-border: rgb(0 0 6 / 0.12);         /* headerbar-shade hairline: visible on light */
  --spry-border-strong: transparent;        /* filled entries have no edge */
  --spry-headerbar-shade: rgb(0 0 6 / 0.12);
  --spry-switch-knob: #ffffff;   /* slider_color */
  --spry-accent: #3584e4;        /* accent_bg_color */
  --spry-accent-hover: color-mix(in srgb, var(--spry-accent) 90%, #fff);
  --spry-accent-fg: #ffffff;     /* accent_fg_color */
  --spry-accent-soft: color-mix(in srgb, var(--spry-accent) 25%, transparent);
  --spry-danger: #c30000;        /* destructive_color (text) */
  --spry-danger-bg: #e01b24;     /* destructive_bg_color */
  --spry-danger-fg: #ffffff;     /* destructive_fg_color */
  --spry-success: #1b8553;       /* success_color */
  --spry-warning: #9c6e03;       /* warning_color */
  --spry-info: #2190a4;
  --spry-link: #0461be;          /* accent_color (text) */
  --spry-link-hover: color-mix(in srgb, var(--spry-link) 85%, #000);
  --spry-backdrop: rgb(0 0 6 / 0.14);       /* dimming 14% */

  /* Overlay scrollbars, as GNOME draws them */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--spry-fg) 20%, transparent) transparent;

  /* Typography — Cantarell / Adwaita Sans, compact GTK metrics */
  --spry-font: Cantarell, "Adwaita Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --spry-font-heading: var(--spry-font);
  --spry-font-mono: "Adwaita Mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spry-font-size: 0.95rem;
  --spry-line-height: 1.55;
  --spry-heading-weight: 700;

  /* Shape, depth, motion — flat controls; radii 9/12/15 like libadwaita */
  --spry-radius: 12px;
  --spry-radius-sm: 9px;
  --spry-radius-lg: 15px;
  --spry-radius-pill: 999px;
  --spry-border-width: 1px;
  --spry-shadow: none;
  --spry-shadow-lg: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 5px 1px rgb(0 0 0 / 0.09),
    0 2px 14px 3px rgb(0 0 0 / 0.05);
  --spry-popover-shadow: var(--spry-shadow-lg);
  --spry-glass: none;
  --spry-transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Dialog motion: the AdwFloatingSheet spring (scale 0.8, damping 0.62 /
     stiffness 500, overshoot via linear()) for WINDOWS. Drawers and the
     modal backdrop opt out below — they settle without the bounce. */
  --spry-dialog-duration: 333ms;
  --spry-dialog-ease: linear(0, 0.0195, 0.0714, 0.1464, 0.2365, 0.3348, 0.4359, 0.5353, 0.6296, 0.7165, 0.7944, 0.8625, 0.9203, 0.968, 1.0062, 1.0355, 1.0568, 1.0712, 1.0797, 1.0833, 1.0829, 1.0795, 1.0739, 1.0668, 1.0588, 1.0504, 1.042, 1.0339, 1.0264, 1.0196, 1.0136, 1.0084, 1.0041, 1.0006, 0.9979, 0.9959, 1);
  --spry-dialog-close-duration: 128ms;
  --spry-dialog-close-ease: linear(0, 0.0148, 0.0549, 0.1141, 0.1868, 0.2684, 0.3547, 0.4422, 0.5284, 0.6108, 0.6881, 0.7588, 0.8225, 0.8785, 0.9268, 0.9677, 1);
  --spry-dialog-in: scale(0.8);

  /* Drawers slide home smoothly, no bounce */
  & :is(.drawer-left, .drawer-right) {
    --spry-dialog-duration: 200ms;
    --spry-dialog-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --spry-dialog-close-duration: 150ms;
    --spry-dialog-close-ease: ease;
  }

  /* The modal backdrop fades on a plain ease, never the spring */
  & dialog::backdrop,
  & [popover]::backdrop {
    transition-duration: 200ms;
    transition-timing-function: ease;
  }

  & dialog[open]::backdrop,
  & :popover-open::backdrop {
    transition-duration: 200ms;
    transition-timing-function: ease;
  }

  /* Controls — filled, borderless entries (34px metrics) */
  --spry-control-bg: #e6e6e7;
  --spry-control-fg: var(--spry-fg);
  --spry-control-border: transparent;
  --spry-control-radius: var(--spry-radius-sm);
  --spry-control-padding-x: 0.55rem;
  --spry-control-padding-y: 0.4rem;
  --spry-focus-ring: inset 0 0 0 2px var(--spry-accent);

  /* Buttons — flat; hover/active are 7%/16% fills of the label colour */
  --spry-btn-bg: transparent;
  --spry-btn-fg: var(--spry-fg);
  --spry-btn-border: transparent;
  --spry-btn-bg-hover: color-mix(in srgb, var(--spry-fg) 7%, transparent);
  --spry-btn-bg-active: color-mix(in srgb, var(--spry-fg) 16%, transparent);

  /* Cards / tables / progress */
  --spry-card-bg: var(--spry-surface);
  --spry-card-border: rgb(0 0 6 / 0.07);
  --spry-card-padding: 0.75rem;
  --spry-card-shadow: none;
  --spry-table-header-bg: transparent;
  --spry-table-hover: color-mix(in srgb, var(--spry-fg) 4%, transparent);
  --spry-progress-bg: color-mix(in srgb, var(--spry-fg) 15%, transparent);
  --spry-progress-fg: var(--spry-accent);

  /* Text selection is a 25% accent wash, as in _colors.scss */
  & ::selection { background-color: color-mix(in srgb, var(--spry-accent) 25%, transparent); }

  /* Headings modest (title-1..4 scale); labels bold and compact */
  & :where(h1, .h1) { font-size: 1.5rem; font-weight: 800; }
  & :where(h2, .h2) { font-size: 1.3rem; font-weight: 800; }
  & :where(h3, .h3) { font-size: 1.15rem; }
  & :where(h4, .h4) { font-size: 1.05rem; }
  & :where(h5, .h5) { font-size: 0.95rem; }
  & :where(h6, .h6) { font-size: 0.82rem; text-transform: none; letter-spacing: normal; }
  & :is(.label, .field .label) { font-weight: 700; font-size: 0.9rem; }

  /* Buttons: 9px radius (core's --spry-control-radius) with libadwaita's
     17px side padding and bold labels; :where keeps .btn-sm/.btn-lg (0,2,0)
     and the variant classes winning. .btn-lg alone is a pill, as in Adwaita. */
  & :where(.btn:not(.btn-link), input[type="submit"], input[type="reset"], input[type="button"]) {
    padding-inline: 1.06rem;
    font-weight: 700;
  }
  & :is(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]).btn-lg {
    border-radius: var(--spry-radius-pill);
  }

  /* Opaque primaries darken 20% on press, as GTK's active overlay does */
  & .btn-primary:active {
    background: color-mix(in srgb, var(--spry-accent) 80%, #000);
    border-color: transparent;
  }

  /* Destructive is a flat destructive-bg fill (10% white hover, 20% black press);
     the outline action is a flat accent-coloured button */
  & .btn-danger {
    background: var(--spry-danger-bg);
    border-color: transparent;
    color: var(--spry-danger-fg);
  }
  & .btn-danger:hover {
    background: color-mix(in srgb, var(--spry-danger-bg) 90%, #fff);
    border-color: transparent;
    color: var(--spry-danger-fg);
  }
  & .btn-danger:active {
    background: color-mix(in srgb, var(--spry-danger-bg) 80%, #000);
    border-color: transparent;
    color: var(--spry-danger-fg);
  }
  & .btn-outline { background: transparent; border-color: transparent; color: var(--spry-link); }
  & .btn-outline:hover {
    background: color-mix(in srgb, var(--spry-accent) 10%, transparent);
    border-color: transparent;
    color: var(--spry-link);
  }
  & .btn-ghost:hover {
    background: color-mix(in srgb, var(--spry-fg) 7%, transparent);
    border-color: transparent;
  }

  /* Topbar as a headerbar: 47px banded bar, shade edge under it, flat bold
     nav; the brand reads as a window title (no accent on hover) */
  & .topbar {
    min-height: 2.938rem;
    background: var(--spry-headerbar-bg);
    border-bottom-color: var(--spry-headerbar-shade);
  }
  & .topbar-brand:hover { color: var(--spry-fg); }
  & .nav a { border-radius: var(--spry-radius-sm); font-weight: 700; color: var(--spry-fg); }
  & .nav a:hover { background: color-mix(in srgb, var(--spry-fg) 7%, transparent); color: var(--spry-fg); }
  & .nav a.active { background: color-mix(in srgb, var(--spry-fg) 10%, transparent); color: var(--spry-fg); }

  /* GtkDropDown selects are buttons: bold, with a raised hover fill */
  & select { font-weight: 700; }
  & select:hover { background: color-mix(in srgb, var(--spry-fg) 15%, var(--spry-control-bg)); }

  /* Sidebar rows: 36px, rounded, neutral 7% hover; the selected row is a
     neutral 10% fill (navigation-sidebars select with a shade, not accent) */
  & .menu a { min-height: 2.25rem; padding: 0.4rem 0.75rem; }
  & .menu a:hover { background: color-mix(in srgb, var(--spry-fg) 7%, transparent); color: var(--spry-fg); }
  & .menu a.active {
    background: color-mix(in srgb, var(--spry-fg) 10%, transparent);
    color: var(--spry-fg);
    border-radius: var(--spry-radius-sm);
  }

  /* Submenu and popover-menu items keep the neutral 10% menu hover; rows are
     6px and the sheets carry the reference's 6px popover inset */
  & :where(.submenu, .popover-menu) { padding: 0.375rem; }
  & .submenu a:hover { background: color-mix(in srgb, var(--spry-fg) 10%, transparent); color: var(--spry-fg); }
  & .popover-menu a, & .popover-menu button { border-radius: 6px; }
  & .popover-menu a:hover, & .popover-menu button:hover {
    background: color-mix(in srgb, var(--spry-fg) 10%, transparent);
    color: var(--spry-fg);
  }

  /* kbd keeps an edge even though filled entries have none */
  & :where(kbd) {
    background: var(--spry-bg-inset);
    border-color: color-mix(in srgb, var(--spry-fg) 35%, transparent);
  }

  /* Switch: 46x26 track, 20px knob with the slider's drop shadow, 15% trough */
  & .switch .track {
    width: 2.875rem;
    height: 1.625rem;
    background: color-mix(in srgb, var(--spry-fg) 15%, transparent);
  }
  & .switch input:not(:checked):hover + .track {
    background: color-mix(in srgb, var(--spry-fg) 20%, transparent);
  }
  & .switch .track::after {
    top: 0.1875rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--spry-switch-knob);
    box-shadow: 0 1px 3px rgb(0 0 6 / 0.2);
  }
  & .switch input:checked + .track::after { translate: 1.25rem 0; }

  /* Spinner: AdwSpinner — libadwaita's faint ring plus a round-capped arc whose
     ends ease apart and back together while it turns (the paintable's own
     constants and easing), drawn as an animated SVG mask over currentColor at
     the core's sizes; dark needs no extra colours */
  --spry-spinner-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cstyle%3ec\
ircle%7bfill:none;stroke:%23000;stroke-width:2;stroke-linecap:round%7dg%7btransform-origin:8px 8px;a\
nimation:t 1.2s linear infinite%7d.a%7banimation:d 1.59s linear infinite%7d@keyframes t%7bto%7btrans\
form:rotate(1turn)%7d%7d@keyframes d%7b0%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-17.5%7d\
1.25%25%7bstroke-dasharray:0.849 99.151;stroke-dashoffset:-16.938%7d2.5%25%7bstroke-dasharray:1.145 \
98.855;stroke-dashoffset:-16.375%7d3.75%25%7bstroke-dasharray:1.635 98.365;stroke-dashoffset:-15.812\
%7d5%25%7bstroke-dasharray:2.315 97.685;stroke-dashoffset:-15.25%7d6.25%25%7bstroke-dasharray:3.179 \
96.821;stroke-dashoffset:-14.688%7d7.5%25%7bstroke-dasharray:4.22 95.78;stroke-dashoffset:-14.125%7d\
8.75%25%7bstroke-dasharray:5.427 94.57300000000001;stroke-dashoffset:-13.563%7d10%25%7bstroke-dashar\
ray:6.79 93.21;stroke-dashoffset:-13%7d11.25%25%7bstroke-dasharray:8.297 91.703;stroke-dashoffset:-1\
2.438%7d12.5%25%7bstroke-dasharray:9.934 90.066;stroke-dashoffset:-11.875%7d13.75%25%7bstroke-dashar\
ray:11.687 88.313;stroke-dashoffset:-11.313%7d15%25%7bstroke-dasharray:13.54 86.46000000000001;strok\
e-dashoffset:-10.75%7d16.25%25%7bstroke-dasharray:15.421 84.57900000000001;stroke-dashoffset:-10.244\
%7d17.5%25%7bstroke-dasharray:17.237 82.763;stroke-dashoffset:-9.868%7d18.75%25%7bstroke-dasharray:1\
8.971 81.029;stroke-dashoffset:-9.622%7d20%25%7bstroke-dasharray:20.607 79.393;stroke-dashoffset:-9.\
505%7d21.25%25%7bstroke-dasharray:22.129 77.871;stroke-dashoffset:-9.513%7d22.5%25%7bstroke-dasharra\
y:23.522 76.47800000000001;stroke-dashoffset:-9.642%7d23.75%25%7bstroke-dasharray:24.77 75.23;stroke\
-dashoffset:-9.89%7d25%25%7bstroke-dasharray:25.861 74.139;stroke-dashoffset:-10.251%7d26.25%25%7bst\
roke-dasharray:26.782 73.218;stroke-dashoffset:-10.72%7d27.5%25%7bstroke-dasharray:27.521 72.479;str\
oke-dashoffset:-11.29%7d28.75%25%7bstroke-dasharray:28.069 71.931;stroke-dashoffset:-11.955%7d30%25%\
7bstroke-dasharray:28.416 71.584;stroke-dashoffset:-12.707%7d31.25%25%7bstroke-dasharray:28.557 71.4\
43;stroke-dashoffset:-13.539%7d32.5%25%7bstroke-dasharray:28.485 71.515;stroke-dashoffset:-14.443%7d\
33.75%25%7bstroke-dasharray:28.197 71.803;stroke-dashoffset:-15.409%7d35%25%7bstroke-dasharray:27.69\
 72.31;stroke-dashoffset:-16.429%7d36.25%25%7bstroke-dasharray:26.965 73.035;stroke-dashoffset:-17.4\
93%7d37.5%25%7bstroke-dasharray:26.023 73.977;stroke-dashoffset:-18.592%7d38.75%25%7bstroke-dasharra\
y:24.867 75.133;stroke-dashoffset:-19.715%7d40%25%7bstroke-dasharray:23.503 76.497;stroke-dashoffset\
:-20.853%7d41.25%25%7bstroke-dasharray:21.938 78.062;stroke-dashoffset:-21.995%7d42.5%25%7bstroke-da\
sharray:20.243 79.757;stroke-dashoffset:-23.132%7d43.75%25%7bstroke-dasharray:18.559 81.441;stroke-d\
ashoffset:-24.254%7d45%25%7bstroke-dasharray:16.9 83.1;stroke-dashoffset:-25.35%7d46.25%25%7bstroke-\
dasharray:15.278 84.722;stroke-dashoffset:-26.41%7d47.5%25%7bstroke-dasharray:13.7 86.3;stroke-dasho\
ffset:-27.425%7d48.75%25%7bstroke-dasharray:12.177 87.82300000000001;stroke-dashoffset:-28.386%7d50%\
25%7bstroke-dasharray:10.717 89.283;stroke-dashoffset:-29.283%7d51.25%25%7bstroke-dasharray:9.33 90.\
67;stroke-dashoffset:-30.108%7d52.5%25%7bstroke-dasharray:8.023 91.977;stroke-dashoffset:-30.852%7d5\
3.75%25%7bstroke-dasharray:6.804 93.196;stroke-dashoffset:-31.509%7d55%25%7bstroke-dasharray:5.681 9\
4.319;stroke-dashoffset:-32.069%7d56.25%25%7bstroke-dasharray:4.659 95.341;stroke-dashoffset:-32.528\
%7d57.5%25%7bstroke-dasharray:3.746 96.254;stroke-dashoffset:-32.879%7d58.75%25%7bstroke-dasharray:2\
.947 97.053;stroke-dashoffset:-33.115%7d60%25%7bstroke-dasharray:2.266 97.734;stroke-dashoffset:-33.\
234%7d61.25%25%7bstroke-dasharray:1.707 98.293;stroke-dashoffset:-33.23%7d62.5%25%7bstroke-dasharray\
:1.274 98.726;stroke-dashoffset:-33.101%7d63.75%25%7bstroke-dasharray:0.97 99.03;stroke-dashoffset:-\
32.843%7d65%25%7bstroke-dasharray:0.795 99.205;stroke-dashoffset:-32.455%7d66.25%25%7bstroke-dasharr\
ay:0.75 99.25;stroke-dashoffset:-31.937%7d67.5%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-3\
1.375%7d68.75%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-30.812%7d70%25%7bstroke-dasharray:\
0.75 99.25;stroke-dashoffset:-30.25%7d71.25%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-29.6\
87%7d72.5%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-29.125%7d73.75%25%7bstroke-dasharray:0\
.75 99.25;stroke-dashoffset:-28.562%7d75%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-28%7d76\
.25%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-27.437%7d77.5%25%7bstroke-dasharray:0.75 99.\
25;stroke-dashoffset:-26.875%7d78.75%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-26.313%7d80\
%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-25.75%7d81.25%25%7bstroke-dasharray:0.75 99.25;\
stroke-dashoffset:-25.187%7d82.5%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-24.625%7d83.75%\
25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-24.062%7d85%25%7bstroke-dasharray:0.75 99.25;str\
oke-dashoffset:-23.5%7d86.25%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-22.938%7d87.5%25%7b\
stroke-dasharray:0.75 99.25;stroke-dashoffset:-22.375%7d88.75%25%7bstroke-dasharray:0.75 99.25;strok\
e-dashoffset:-21.813%7d90%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-21.25%7d91.25%25%7bstr\
oke-dasharray:0.75 99.25;stroke-dashoffset:-20.687%7d92.5%25%7bstroke-dasharray:0.75 99.25;stroke-da\
shoffset:-20.125%7d93.75%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-19.563%7d95%25%7bstroke\
-dasharray:0.75 99.25;stroke-dashoffset:-19%7d96.25%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffs\
et:-18.437%7d97.5%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset:-17.875%7d98.75%25%7bstroke-das\
harray:0.75 99.25;stroke-dashoffset:-17.313%7d100%25%7bstroke-dasharray:0.75 99.25;stroke-dashoffset\
:-16.75%7d%7d%3c/style%3e%3ccircle cx='8' cy='8' r='7' stroke-opacity='.15'/%3e%3cg%3e%3ccircle clas\
s='a' cx='8' cy='8' r='7' pathLength='100'/%3e%3c/g%3e%3c/svg%3e") center / contain no-repeat;

  & .spinner {
    border: 0;
    background-color: currentColor;
    -webkit-mask: var(--spry-spinner-mask);
    mask: var(--spry-spinner-mask);
    animation: none;
  }

  /* Progress: the trough carries a hairline outline for definition; the
     fill stays the plain accent, and the indeterminate pulse keeps it */
  /* Trough hairline as a REAL border: it participates in layout, so the
     value fill is sized inside it and can never paint taller than the
     track (element-level inset shadows and pseudo rings both leaked) */
  & progress {
    border: 1px solid var(--spry-border);
    border-radius: var(--spry-radius-sm);
  }

  /* Indeterminate: GTK's pulse is a square-ish block, not the rounded
     stadium the core default uses */
  & progress:indeterminate {
    /* GTK pulse: rounded rectangle, softer than the stadium */
    --spry-pulse-cap: 0.25em;
    background:
      radial-gradient(var(--spry-pulse-cap) var(--spry-pulse-cap) at var(--spry-pulse-cap) 50%, var(--spry-accent) 97%, transparent 100%) 0% 50% / 22% 100% no-repeat,
      radial-gradient(var(--spry-pulse-cap) var(--spry-pulse-cap) at calc(100% - var(--spry-pulse-cap)) 50%, var(--spry-accent) 97%, transparent 100%) 0% 50% / 22% 100% no-repeat,
      linear-gradient(90deg, transparent 0 var(--spry-pulse-cap), var(--spry-accent) var(--spry-pulse-cap) calc(100% - var(--spry-pulse-cap)), transparent calc(100% - var(--spry-pulse-cap))) 0% 50% / 22% 100% no-repeat,
      color-mix(in srgb, var(--spry-fg) 15%, transparent);
    animation: spry-pulse 1.4s linear infinite alternate;
  }

  /* Boxed rows: flat headers/footers on the hairline card; expander rows
     hover at 3%, like AdwExpanderRow */
  & .card-header, & .card-footer { background: transparent; }
  & summary:hover { background: color-mix(in srgb, var(--spry-fg) 3%, transparent); }

  /* Alerts are flat tinted boxes: no border, 12px via --spry-radius */
  & :where(.alert-danger, .alert-success, .alert-warning, .alert-info) { border-color: transparent; }
  & .alert-info { color: #155e70; }
  & .alert-success { color: #14683f; }
  & .alert-warning { color: #7d5a06; }
  & .badge { color: #034f9c; }
  & .hero-eyebrow { color: #0461be; }

  /* Invalid entries take the destructive focus edge, not a glow */
  & .is-invalid:focus { box-shadow: inset 0 0 0 2px var(--spry-danger) !important; }

  /* Column headers: dim caption headings, no band; row separators are
     the reference's 15% currentColor borders */
  & :where(th, td) { border-color: color-mix(in srgb, var(--spry-fg) 15%, transparent); }
  & :where(thead th) {
    background: transparent;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--spry-fg-muted);
    border-bottom: 1px solid var(--spry-border);
  }

  /* Tabs: a GTK tab bar — flat sidebar-coloured strip under top-rounded
     labels with neutral hovers; the checked label (core's nth-of-type
     mechanism, re-scoped so it wins the cascade over the core's
     underline) is a view-surface card, bold window-fg text, whose -1px
     margin bridges the strip's hairline so it connects to the panel. */
  & .tab-list { background: var(--spry-bg-alt); }
  & .tab-list label:hover {
    background: color-mix(in srgb, var(--spry-fg) 7%, transparent);
    color: var(--spry-fg);
  }
  & .tabs > input:nth-of-type(1):checked ~ .tab-list label:nth-of-type(1),
  & .tabs > input:nth-of-type(2):checked ~ .tab-list label:nth-of-type(2),
  & .tabs > input:nth-of-type(3):checked ~ .tab-list label:nth-of-type(3),
  & .tabs > input:nth-of-type(4):checked ~ .tab-list label:nth-of-type(4),
  & .tabs > input:nth-of-type(5):checked ~ .tab-list label:nth-of-type(5),
  & .tabs > input:nth-of-type(6):checked ~ .tab-list label:nth-of-type(6) {
    color: var(--spry-fg);
    font-weight: 700;
    background: var(--spry-view-bg);
    box-shadow: none;
    margin-bottom: -1px;
  }

  /* Dialogs as AdwDialogs: dialog-bg surface, soft dialog shadow, flat 47px
     headerbar with a centred bold title, 24px circular flat close button,
     borderless response area whose buttons carry AdwAlertDialog's 12px
     radius and 60px min-width */
  & :where(dialog) {
    background: var(--spry-dialog-bg);
    box-shadow:
      0 0 14px 2px rgb(0 0 6 / 0.03),
      0 0 5px 2px rgb(0 0 6 / 0.1),
      0 0 0 1px rgb(0 0 0 / 0.05);
  }
  & .dialog-titlebar {
    min-height: 2.938rem;
    background: transparent;
    border-bottom-color: transparent;
  }
  & .dialog-title { font-weight: 700; text-align: center; }
  & .dialog-close {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--spry-fg) 10%, transparent);
    color: var(--spry-fg);
  }
  & .dialog-close:hover {
    background: color-mix(in srgb, var(--spry-fg) 15%, transparent);
    color: var(--spry-fg);
  }
  & .dialog-footer {
    gap: 0.75rem;
    padding: 0.75rem;
    background: transparent;
    border-top-color: transparent;
  }
  & .dialog-footer :is(.btn, button) { min-width: 3.75rem; border-radius: var(--spry-radius); }

  /* Drawers are sidebar panes: the sidebar band, not the popover white */
  & :is(.drawer-left, .drawer-right) { background: var(--spry-bg-alt); }

  /* Hero: a flat welcome page — window bg with a soft accent glow */
  & .hero {
    background:
      radial-gradient(60rem 24rem at 50% -8rem, var(--spry-accent-soft), transparent 70%),
      var(--spry-bg);
    border-block-color: transparent;
  }
  & .hero-title { font-weight: 800; }

  /* Avatars: the GNOME user-menu blue gradient with its pale-blue label */
  & .avatar { background: linear-gradient(#83b6ec, #337fdc); color: #cfe1f5; font-weight: 700; }

  /* OTP fields are large entries: the 12px large-entry radius */
  & .otp input { border-radius: var(--spry-radius); }

  /* Pagination: flat page buttons, neutral hovers, the current page a
     10% fill with a bold label (no accent block) */
  & .pagination a:hover {
    background: color-mix(in srgb, var(--spry-fg) 7%, transparent);
    color: var(--spry-fg);
  }
  & .pagination [aria-current="page"] {
    background: color-mix(in srgb, var(--spry-fg) 10%, transparent);
    color: var(--spry-fg);
    font-weight: 700;
  }
}

/* Forced dark (Adwaita dark). --------------------------------------------- */

[data-theme="dwarf"][data-mode="dark"],
html:has(#spry-theme-dwarf:checked):has(#spry-mode-dark:checked),
[data-theme="dwarf"]:has(#spry-mode-dark:checked) {
  color-scheme: dark;

  /* Light-on-dark counterparts of the light scope's text fixes */
  & .badge { color: #81d0ff; }
  & .hero-eyebrow { color: #81d0ff; }
  & .alert-info { color: #8fd8ea; }

  /* Palette — libadwaita named colours (adwaita-dark.scss) */
  --spry-bg: #222226;            /* window_bg_color */
  --spry-bg-alt: #2e2e32;        /* sidebar / headerbar band */
  --spry-bg-inset: #38383c;      /* entry_bg fill */
  --spry-surface: #343437;       /* card (opaque equivalent) */
  --spry-surface-hover: #3a3a3f;
  --spry-headerbar-bg: #2e2e32;
  --spry-view-bg: #1d1d20;       /* view_bg_color */
  --spry-dialog-bg: #36363a;     /* dialog_bg_color */
  --spry-popover-bg: #36363a;    /* popover_bg_color */
  --spry-popover-border: rgb(255 255 255 / 0.07);
  --spry-fg: #ffffff;
  --spry-fg-muted: rgb(255 255 255 / 0.55);  /* dim labels: fg at 55% */
  --spry-border: rgb(0 0 6 / 0.36);
  --spry-headerbar-shade: rgb(0 0 6 / 0.36);
  --spry-switch-knob: #d2d2d3;   /* white 80% over the view bg */
  --spry-accent: #3584e4;
  --spry-accent-fg: #ffffff;
  --spry-danger: #ff938c;        /* destructive_color */
  --spry-danger-bg: #c01c28;     /* destructive_bg_color */
  --spry-danger-fg: #ffffff;
  --spry-success: #78e9ab;       /* success_color */
  --spry-warning: #ffc252;       /* warning_color */
  --spry-info: #2190a4;
  --spry-link: #81d0ff;          /* accent_color */
  --spry-link-hover: color-mix(in srgb, var(--spry-link) 85%, #fff);
  --spry-backdrop: rgb(0 0 6 / 0.5);        /* dimming 50% */

  --spry-shadow-lg: 0 0 0 1px rgb(0 0 0 / 0.4), 0 1px 5px 1px rgb(0 0 0 / 0.35),
    0 2px 14px 3px rgb(0 0 0 / 0.25);

  --spry-control-bg: #38383c;

  --spry-card-bg: var(--spry-surface);
  --spry-card-border: rgb(0 0 6 / 0.36);
}

/* Auto dark (system preference unless overridden). ------------------------ */

@media (prefers-color-scheme: dark) {
  [data-theme="dwarf"]:not([data-mode="light"]):not(:has(#spry-mode-light:checked)),
  html:has(#spry-theme-dwarf:checked):has(#spry-mode-auto:checked) {
    color-scheme: dark;

    & .badge { color: #81d0ff; }
    & .hero-eyebrow { color: #81d0ff; }
    & .alert-info { color: #8fd8ea; }

    /* Palette — libadwaita named colours (adwaita-dark.scss) */
    --spry-bg: #222226;            /* window_bg_color */
    --spry-bg-alt: #2e2e32;        /* sidebar / headerbar band */
    --spry-bg-inset: #38383c;      /* entry_bg fill */
    --spry-surface: #343437;       /* card (opaque equivalent) */
    --spry-surface-hover: #3a3a3f;
    --spry-headerbar-bg: #2e2e32;
    --spry-view-bg: #1d1d20;       /* view_bg_color */
    --spry-dialog-bg: #36363a;     /* dialog_bg_color */
    --spry-popover-bg: #36363a;    /* popover_bg_color */
    --spry-popover-border: rgb(255 255 255 / 0.07);
    --spry-fg: #ffffff;
    --spry-fg-muted: rgb(255 255 255 / 0.55);  /* dim labels: fg at 55% */
    --spry-border: rgb(0 0 6 / 0.36);
    --spry-headerbar-shade: rgb(0 0 6 / 0.36);
    --spry-switch-knob: #d2d2d3;   /* white 80% over the view bg */
    --spry-accent: #3584e4;
    --spry-accent-fg: #ffffff;
    --spry-danger: #ff938c;        /* destructive_color */
    --spry-danger-bg: #c01c28;     /* destructive_bg_color */
    --spry-danger-fg: #ffffff;
    --spry-success: #78e9ab;       /* success_color */
    --spry-warning: #ffc252;       /* warning_color */
    --spry-info: #2190a4;
    --spry-link: #81d0ff;          /* accent_color */
    --spry-link-hover: color-mix(in srgb, var(--spry-link) 85%, #fff);
    --spry-backdrop: rgb(0 0 6 / 0.5);        /* dimming 50% */

    --spry-shadow-lg: 0 0 0 1px rgb(0 0 0 / 0.4), 0 1px 5px 1px rgb(0 0 0 / 0.35),
      0 2px 14px 3px rgb(0 0 0 / 0.25);

    --spry-control-bg: #38383c;

    --spry-card-bg: var(--spry-surface);
    --spry-card-border: rgb(0 0 6 / 0.36);
  }
}