/* ===============================================================
   HUVIENA TOOLS — main.css
   Design tokens, layout, header, footer, cards, content blocks.
   No frameworks. Mobile first.
   ============================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------
   LIGHT IS THE DEFAULT THEME: white surfaces, subtle grey borders,
   dark text and a professional blue accent for interactive states.
   Green, amber and red remain reserved for status (success, warning,
   error) and are never used for decoration.

   The dark palette lives below under html[data-theme="dark"], so
   switching theme never touches a component — only the tokens.
   -------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Neutrals ------------------------------------------------- */
    --ink:           #111827;
    --ink-2:         #374151;
    --ink-3:         #6b7280;
    --ink-4:         #9ca3af;

    --bg:            #ffffff;
    --bg-soft:       #f8fafc;
    --bg-muted:      #f1f5f9;
    --surface:       #ffffff;
    --border:        #e5e7eb;
    --border-strong: #d1d5db;

    /* Accent --------------------------------------------------- */
    --brand:         #1d4ed8;
    --brand-strong:  #1e40af;
    --brand-soft:    #eff6ff;
    --brand-border:  #bfdbfe;
    --on-brand:      #ffffff;

    /* Semantic accent aliases, used by newer components so the
       palette can be retuned in one place. */
    --background:        var(--bg);
    --surface-secondary: var(--bg-soft);
    --text:              var(--ink);
    --text-secondary:    var(--ink-3);
    --accent:            var(--brand);
    --accent-hover:      var(--brand-strong);
    --accent-soft:       var(--brand-soft);
    --focus-ring:        0 0 0 3px rgba(37, 99, 235, .35);

    /* Status --------------------------------------------------- */
    --ok:     #047857;
    --ok-bg:  #ecfdf5;
    --warn:   #92400e;
    --warn-bg:#fffbeb;
    --err:    #b91c1c;
    --err-bg: #fef2f2;

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 6px 18px -6px rgba(16, 24, 40, .12);
    --shadow-lg: 0 18px 40px -18px rgba(16, 24, 40, .22);

    --container: 1200px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --header-h: 68px;
}

/* Optional dark theme — identical component behaviour, inverted
   neutrals. Set with the header toggle, which stores the choice in
   localStorage; see the bootstrap script in includes/header.php. */
html[data-theme="dark"] {
    color-scheme: dark;

    --ink:           #f4f4f5;
    --ink-2:         #d4d4d8;
    --ink-3:         #a1a1aa;
    --ink-4:         #71717a;

    --bg:            #0a0a0a;
    --bg-soft:       #111111;
    --bg-muted:      #1c1c1c;
    --surface:       #131313;
    --border:        #262626;
    --border-strong: #3f3f46;

    --brand:         #93c5fd;
    --brand-strong:  #bfdbfe;
    --brand-soft:    #14263f;
    --brand-border:  #1e3a8a;
    --on-brand:      #0a0a0a;

    --focus-ring:    0 0 0 3px rgba(147, 197, 253, .4);

    --ok:     #4ade80;
    --ok-bg:  #0b2c1c;
    --warn:   #fbbf24;
    --warn-bg:#332506;
    --err:    #f87171;
    --err-bg: #3b1414;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55);
    --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, .7);
    --shadow-lg: 0 18px 44px -18px rgba(0, 0, 0, .85);
}

/* ---------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* The `hidden` attribute must always win over layout rules such as
   `display: flex`, otherwise tool panels stay visible when hidden. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.22;
    letter-spacing: -.015em;
    color: var(--ink);
    font-weight: 700;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem); margin-top: 1.6em; }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1rem; }

a { color: var(--brand-strong); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* ---------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
@media (max-width: 480px) { .container { padding-inline: 16px; } }

.section { padding-block: 8px 56px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mb-0 { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack--sm { gap: .5rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: -60px;
    z-index: 200;
    background: var(--brand-strong); color: var(--on-brand);
    padding: 10px 16px; border-radius: var(--radius-sm);
    text-decoration: none; font-weight: 600;
    transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .74rem;
    font-weight: 700;
    color: var(--brand-strong);
    margin: 0 0 .5rem;
}

.lede { font-size: 1.075rem; color: var(--ink-2); max-width: 68ch; }

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 17px; height: 17px; }
.icon--xs { width: 15px; height: 15px; }
.icon--chevron { transition: transform .2s ease; }

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase;
    padding: .24rem .5rem;
    border-radius: 999px;
    background: var(--bg-muted); color: var(--ink-2);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.badge--live { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge--soft { background: transparent; color: var(--ink-3); }

.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.pill {
    display: inline-flex; align-items: center; gap: .38rem;
    background: var(--bg-soft); border: 1px solid var(--border);
    color: var(--ink-2); border-radius: 999px;
    padding: .34rem .75rem; font-size: .85rem; font-weight: 500;
}

/* ---------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: inherit; font-weight: 600; line-height: 1.2;
    padding: .68rem 1.15rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
    min-height: 44px;
}
.btn:hover { background: var(--bg-soft); border-color: var(--ink-4); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; transform: none;
}

.btn--primary { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--brand-strong); }
.btn--ghost:hover { background: var(--brand-soft); border-color: transparent; }

.btn--sm { padding: .42rem .8rem; font-size: .87rem; min-height: 38px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------------------------------------------------------------
   5. Header
   -------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.header__inner {
    display: flex; align-items: center; gap: 1rem;
    min-height: var(--header-h);
    flex-wrap: wrap;
}

.brand {
    display: inline-flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--ink);
    flex: none;
}
.brand__mark { color: var(--brand); display: flex; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.brand__tag { font-size: .72rem; color: var(--ink-3); font-weight: 500; }
.brand--footer { margin-bottom: .5rem; }

/* Theme toggle. Sits with the navigation so it is reachable on every
   page and on every viewport. */
.theme-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Only one glyph is shown at a time: the sun in dark mode (offering
   light) and the moon in light mode. */
.theme-toggle__icon { display: inline-flex; }
.theme-toggle__icon[data-theme-icon-dark] { display: none; }
html[data-theme="dark"] .theme-toggle__icon[data-theme-icon-dark] { display: inline-flex; }
html[data-theme="dark"] .theme-toggle__icon[data-theme-icon-light] { display: none; }

.nav-toggle {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--ink);
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }

.site-nav { margin-left: auto; }
.site-nav__list {
    display: flex; align-items: center; gap: .15rem;
    list-style: none; margin: 0; padding: 0;
}
.site-nav a {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    font-size: .93rem; font-weight: 550;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.site-nav a:hover { background: var(--bg-soft); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--brand-strong); background: var(--brand-soft); }
.nav-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-4); opacity: .8;
}

/* Search ------------------------------------------------------- */
.tool-search {
    position: relative;
    flex: 1 1 190px;
    max-width: 300px;
    margin-left: auto;
}
.tool-search__icon {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); pointer-events: none;
}
.tool-search__input {
    width: 100%;
    font: inherit; font-size: .92rem;
    padding: .55rem .85rem .55rem 2.3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--ink);
    min-height: 42px;
}
.tool-search__input::placeholder { color: var(--ink-4); }
.tool-search__input:focus { background: var(--bg-soft); border-color: var(--ink-4); }

.tool-search__results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 340px; overflow-y: auto;
    padding: .35rem;
    z-index: 60;
}
.tool-search__results a {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .55rem .6rem;
    border-radius: var(--radius-sm);
    text-decoration: none; color: var(--ink);
}
.tool-search__results a:hover,
.tool-search__results a.is-active { background: var(--brand-soft); color: var(--ink); }
.tool-search__results .sr-title { font-weight: 600; font-size: .92rem; display: block; }
.tool-search__results .sr-meta { font-size: .78rem; color: var(--ink-3); }
.tool-search__empty { padding: .8rem .6rem; font-size: .9rem; color: var(--ink-3); margin: 0; }

/* ---------------------------------------------------------------
   6. Hero (home)
   -------------------------------------------------------------- */
.hero {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.25rem) 0 2rem;
    text-align: center;
}
.hero__title { margin-bottom: .6rem; }
.hero__sub { font-size: clamp(1rem, .95rem + .35vw, 1.15rem); color: var(--ink-2); max-width: 62ch; margin-inline: auto; }
.hero__search { max-width: 560px; margin: 1.75rem auto .75rem; position: relative; }
.hero__search .tool-search { max-width: none; flex: none; }
.hero__search .tool-search__input { padding-block: .85rem; font-size: 1rem; min-height: 52px; }
.hero__hint { font-size: .85rem; color: var(--ink-3); margin: 0; }
.hero__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

.trust-row {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
    justify-content: center;
    list-style: none; padding: 0;
    margin: 2rem 0 0;
    font-size: .88rem; color: var(--ink-3);
}
.trust-row li { display: inline-flex; align-items: center; gap: .42rem; }
.trust-row .icon { color: var(--ink-3); }

/* ---------------------------------------------------------------
   7. Cards & grids
   -------------------------------------------------------------- */
.cards-grid, .grid { display: grid; gap: 1rem; }
.grid--tools { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.grid--categories { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.card {
    display: flex;
    gap: .95rem;
    padding: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    box-shadow: var(--shadow-xs);
}
.card:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   7a. Icon tiles — the visual anchor of every card
   -------------------------------------------------------------- */
.icon-tile {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--brand-strong);
    /* The glyph colour: the accent pulled towards the text colour, so it
       reads against the tile rather than blending into it. Mixing towards
       --ink makes it darker on the light theme and lighter on the dark
       one, which is why there are no per-theme rules here. */
    --tile-glyph: color-mix(in srgb, var(--tile-accent, #a1a1aa) 50%, var(--ink));
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--tile-accent, #a1a1aa) 34%, var(--border));
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--tile-accent, #a1a1aa) 30%, transparent),
            color-mix(in srgb, var(--tile-accent, #a1a1aa) 8%, transparent));
    transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
/* Presentation attributes lose to CSS, so this thickens the primary
   layer while the inner detail group keeps its own 1.5 weight. */
.icon-tile .icon { stroke-width: 2; }
.icon-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.icon-tile--md { width: 52px; height: 52px; }
.icon-tile--lg { width: 70px; height: 70px; border-radius: 20px; }
.icon-tile--sm .icon { width: 22px; height: 22px; }
.icon-tile--md .icon { width: 32px; height: 32px; }
.icon-tile--lg .icon { width: 40px; height: 40px; }

/* Corner badge (PNG / JPG / WEBP) so format tools are tellable apart */
.icon-tile__badge {
    position: absolute;
    right: -8px;
    bottom: -8px;
    padding: .08rem .3rem;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.5;
    border-radius: 6px;
    background: var(--tile-accent, #a1a1aa);
    color: #0a0a0a;
    border: 2px solid var(--surface);
}

.tool-card:hover .icon-tile,
.category-card:hover .icon-tile {
    border-color: color-mix(in srgb, var(--tile-accent, #a1a1aa) 50%, transparent);
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--tile-accent, #a1a1aa) 32%, transparent),
            color-mix(in srgb, var(--tile-accent, #a1a1aa) 10%, transparent));
    box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--tile-accent, #a1a1aa) 85%, transparent);
}

/* ---------------------------------------------------------------
   7b. Tool cards
   -------------------------------------------------------------- */
.tool-card {
    flex-direction: column;
    gap: .95rem;
    padding: 1.2rem;
    position: relative;
}
.tool-card__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
.tool-card__title { margin: 0; font-size: 1.04rem; }
.tool-card__meta { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; }
.tool-card__desc { color: var(--ink-2); font-size: .89rem; line-height: 1.55; }
.tool-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}
.tool-card__cta {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-left: auto;
    font-size: .86rem; font-weight: 650;
    color: var(--brand-strong);
    white-space: nowrap;
    transition: gap .15s ease;
}
.tool-card:hover .tool-card__cta { gap: .5rem; }
/* External tools keep the same neutral treatment — only the status
   badge carries colour, so the palette stays black and grey. */
.tool-card--external .tool-card__cta { color: var(--ink-2); }
.tool-card .badge { align-self: center; }

/* ---------------------------------------------------------------
   7c. Category cards
   -------------------------------------------------------------- */
.category-card {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.category-card__art {
    display: block;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(120% 140% at 50% 0%,
            color-mix(in srgb, var(--tile-accent, #a1a1aa) 16%, transparent),
            transparent 70%),
        var(--bg-soft);
}
.category-card__art img { display: block; width: 100%; height: auto; }
.category-card__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: flex-start;
    flex: 1;
    padding: 0 1.2rem;
}
.category-card__title { margin: .35rem 0 0; font-size: 1.14rem; }
.category-card__count {
    font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-4);
}
/* Counts stay neutral; only genuine status uses colour. */
.category-card--active .category-card__count { color: var(--brand-strong); }
.category-card__desc { color: var(--ink-2); font-size: .89rem; }
.category-card__cta {
    display: flex; align-items: center; gap: .35rem;
    width: 100%;
    margin-top: .2rem;
    padding: .85rem 1.2rem 1.05rem;
    border-top: 1px solid var(--border);
    font-size: .88rem; font-weight: 650; color: var(--brand-strong);
    transition: gap .15s ease;
}
.category-card:hover .category-card__cta { gap: .55rem; }
.category-card--soon { background: var(--bg-soft); box-shadow: none; }
.category-card--soon .category-card__cta { color: var(--ink-3); }
.category-card--soon .icon-tile { opacity: .75; }
.category-card--soon:hover { transform: none; border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.category-card--highlight { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }

/* Section headers ---------------------------------------------- */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin: 2.75rem 0 1.1rem;
}
.section-head h2 { margin: 0; }
.section-head p { margin: .2rem 0 0; color: var(--ink-3); font-size: .92rem; }
.section-head .link-more {
    font-size: .9rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .3rem;
    text-decoration: none;
}
.section-head .link-more:hover { gap: .5rem; }
.section-head .link-more { transition: gap .15s ease; }

/* ---------------------------------------------------------------
   8. Page head, breadcrumbs
   -------------------------------------------------------------- */
.page-head { padding: 1.75rem 0 .5rem; }
.page-head h1 { margin-bottom: .5rem; }

/* Category hero — illustration beside the title */
.category-hero {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 1.75rem 0 .75rem;
}
.category-hero__text { flex: 1 1 400px; min-width: 0; }
.category-hero__text h1 { margin-bottom: .5rem; }
.category-hero__meta {
    margin: .85rem 0 0;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-strong);
}
.category-hero__art { flex: 0 1 320px; max-width: 320px; }
.category-hero__art img { width: 100%; height: auto; display: block; }
.category-hero__art .icon-tile { margin-left: auto; }

@media (max-width: 860px) {
    .category-hero { flex-direction: column; align-items: stretch; gap: 1.25rem; }
    .category-hero__art { flex: none; max-width: 320px; align-self: center; }
    .category-hero__art .icon-tile { margin-inline: auto; }
}

/* ---------------------------------------------------------------
   Category spotlight — the one tool a category exists for
   ---------------------------------------------------------------
   Lifted out of the grid and given the weight of a call to action.
   The accent comes from --tile-accent, set from the category, so the
   block belongs to its page rather than looking like a generic panel.
   -------------------------------------------------------------- */
.category-spotlight {
    margin: 1.75rem 0 2.5rem;
    padding: 2rem 2.25rem;

    border: 1px solid var(--brand-border);
    border-radius: var(--radius-xl, var(--radius-lg));
    background:
        linear-gradient(135deg, var(--brand-soft) 0%, transparent 62%),
        var(--surface);
    box-shadow: var(--shadow-sm, none);
}

/* Heading and lede sit above the drop zone, which needs the full width —
   they were flex siblings of it once, and the zone was squeezed to 187px. */
.category-spotlight__title {
    margin: 0 0 .6rem;
    max-width: 45ch;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.category-spotlight__lede {
    margin: 0;
    max-width: 62ch;
    color: var(--ink-2);
    line-height: 1.6;
}

.category-spotlight .resume-drop { margin-top: 1.5rem; }

@media (max-width: 620px) {
    .category-spotlight { padding: 1.5rem 1.35rem; }
}

/* ---------------------------------------------------------------
   Resume drop zone
   ---------------------------------------------------------------
   Used on pages that advertise the builder without being the builder.
   It is a large target on purpose: a visitor arriving with a resume in
   hand should be able to hand it over without hunting for a button.

   No click() call is wired to the input — the <label> opens the picker
   itself, and adding one made the dialog open repeatedly in Safari.
   -------------------------------------------------------------- */
.resume-drop {
    margin-top: 1.35rem;
}

.resume-drop__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;

    padding: 2.35rem 1.5rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, transform .15s;
}

.resume-drop__zone:hover,
.resume-drop.is-dragover .resume-drop__zone {
    border-color: var(--brand-strong);
    background: var(--brand-soft);
}

.resume-drop.is-dragover .resume-drop__zone { transform: scale(1.01); }
.resume-drop:focus-within .resume-drop__zone {
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.resume-drop__icon { color: var(--brand-strong); }
.resume-drop__icon .icon { width: 34px; height: 34px; }

.resume-drop__title {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 700;
}

.resume-drop__formats {
    color: var(--ink-4);
    font-size: .78rem;
    letter-spacing: .02em;
}

.resume-drop__cta {
    margin-top: .6rem;
    padding: .7rem 1.5rem;
    font-size: .95rem;
    pointer-events: none;   /* the whole zone is the target */
}

.resume-drop__status {
    margin: .85rem 0 0;
    color: var(--brand-strong);
    font-size: .84rem;
    text-align: center;
}

.resume-drop__note {
    margin: .85rem 0 0;
    color: var(--ink-4);
    font-size: .78rem;
    text-align: center;
}

.resume-drop.is-sending { pointer-events: none; opacity: .75; }

/* ---------------------------------------------------------------
   Tool rows — the alternatives, kept visibly secondary
   -------------------------------------------------------------- */
.tool-rows {
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.tool-row__link {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: .85rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}

.tool-row__link:hover {
    border-color: var(--brand-border);
    background: var(--bg-soft);
    transform: translateX(2px);
}

.tool-row__body { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; }

.tool-row__title { color: var(--text); font-weight: 650; font-size: .95rem; }
.tool-row__desc { color: var(--ink-3); font-size: .82rem; line-height: 1.45; }

.tool-row__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--brand-strong);
    font-size: .82rem;
    font-weight: 650;
}

@media (max-width: 620px) {
    .tool-row__cta { display: none; }
}

/* A file input inside its own <label>: visually hidden rather than marked
   `hidden`, because a display:none control cannot be focused from the
   keyboard and older engines will not activate one from its label. */
.rsm-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.breadcrumbs { padding-top: 1.1rem; }
.breadcrumbs ol {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem; margin: 0; padding: 0;
    font-size: .84rem; color: var(--ink-3);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-strong); text-decoration: underline; }
.breadcrumbs .sep { color: var(--ink-4); }

/* ---------------------------------------------------------------
   9. Content blocks (intro, steps, FAQ)
   -------------------------------------------------------------- */
.content-block { margin: 2.25rem 0; }
.content-block > h2 { margin-top: 0; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }

/* Deliberately NOT centred. On a tool page the prose sits under a
   left-aligned content heading, so it has to line up with it. The
   homepage, where the heading lives inside this block, centres its own
   copy in home.css. */
.prose {
    max-width: 74ch;
    color: var(--ink-2);
}

.prose--intro p:first-child { font-size: 1.03rem; color: var(--ink); }

.prose h2 {
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
    letter-spacing: -.015em;
    margin: 0 0 .8rem;
}

.prose h3 {
    font-size: 1.06rem;
    margin: 1.8rem 0 .5rem;
}

.prose p {
    margin: 0 0 1rem;
    color: var(--ink-2);
    line-height: 1.72;
}

.prose ul {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    color: var(--ink-2);
    line-height: 1.72;
}

.prose li { margin-bottom: .35rem; }

.prose a { color: var(--brand-strong); }

.prose strong { color: var(--ink); }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: .8rem 0;
    border-bottom: 1px dashed var(--border);
}
.steps li:last-child { border-bottom: 0; }
.steps__num {
    flex: none;
    display: grid; place-items: center;
    width: 26px; height: 26px; margin-top: .1rem;
    border-radius: 50%;
    background: var(--brand-soft); color: var(--brand-strong);
    font-size: .82rem; font-weight: 700;
}
.steps__text { color: var(--ink-2); }

.faq { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    font-weight: 600; font-size: .99rem;
    color: var(--ink);
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--bg-soft); }
.faq__item[open] .faq__q { background: var(--bg-soft); }
.faq__item[open] .icon--chevron { transform: rotate(90deg); }
.faq__a { padding: 0 1.15rem 1.15rem; color: var(--ink-2); }
.faq__a p { margin: 0; }

/* ---------------------------------------------------------------
   10. Coming soon
   -------------------------------------------------------------- */
.coming-soon {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--bg-soft);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-xl);
    margin: 1.5rem 0;
}
.coming-soon__art {
    max-width: 320px;
    margin: 0 auto 1.5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        radial-gradient(120% 140% at 50% 0%,
            color-mix(in srgb, var(--tile-accent, #a1a1aa) 16%, transparent),
            transparent 70%),
        var(--surface);
}
.coming-soon__art img { display: block; width: 100%; height: auto; }
.coming-soon__icon {
    display: grid; place-items: center;
    width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-muted); color: var(--ink-3);
}
.coming-soon__icon .icon { width: 26px; height: 26px; }
.coming-soon h2 { margin-bottom: .5rem; }
.coming-soon > p { max-width: 62ch; margin-inline: auto; color: var(--ink-2); }
.coming-soon .pill-list { justify-content: center; }
.coming-soon__cta { margin-top: 1.5rem; }

/* ---------------------------------------------------------------
   11. Ads
   -------------------------------------------------------------- */
.ad-slot {
    margin: 1.75rem auto;
    min-height: 0;
    text-align: center;
    max-width: var(--container);
}
.ad-slot__label {
    display: block;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: .35rem;
}
.ad-slot--placeholder {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    min-height: 96px;
    display: grid; place-items: center;
    background: var(--bg-soft);
    padding: 1rem;
}
.ad-slot--placeholder .ad-slot__label { margin: 0; }
.ad-slot--sidebar { max-width: none; }

/* ---------------------------------------------------------------
   12. Not found
   -------------------------------------------------------------- */
.not-found { text-align: center; padding: 3rem 1rem 1rem; }
.not-found__code { font-size: 3.5rem; font-weight: 800; color: var(--ink-4); margin: 0; line-height: 1; }
.not-found h1 { margin-top: .5rem; }

/* ---------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------- */
.site-footer {
    margin-top: 3.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    padding-top: 2.75rem;
}
.footer__inner {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
}
.footer__brand p { color: var(--ink-2); font-size: .89rem; max-width: 40ch; }
.footer__col h2 {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-3); margin: 0 0 .75rem; font-weight: 700;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.footer__col a { color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.footer__col a:hover { color: var(--brand-strong); text-decoration: underline; }

.footer__bottom {
    border-top: 1px solid var(--border);
    padding-block: 1.1rem;
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    justify-content: space-between; align-items: center;
    font-size: .83rem; color: var(--ink-3);
}
.footer__bottom p { margin: 0; }
.footer__note { display: inline-flex; align-items: center; gap: .4rem; }

/* Build stamp. Tabular figures so the number does not jiggle between
   deploys, and muted so it reads as metadata rather than content. */
.footer__build {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink-4);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.footer__build-stamp { color: var(--ink-3); font-weight: 650; letter-spacing: .01em; }
.footer__build-sep { opacity: .55; }

/* ---------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------- */

/* The nav collapses into the menu well before the phone breakpoint.
   Six destinations plus the 300px search and the account controls need
   roughly 1180px to sit on one row. Below that the nav used to wrap onto
   a second row, and between 900px and 780px onto a third — a sticky
   header 189px tall, which is 21% of a 900px viewport and never scrolls
   away. Collapsing it keeps the header exactly one row high from 800px
   up. Measured: 69px at every width from 800 to 1440. */
@media (max-width: 1150px) {
    .nav-toggle { display: inline-flex; }
    .site-nav {
        order: 5;
        flex-basis: 100%;
        display: none;
        margin-left: 0;
        padding-bottom: .75rem;
    }
    .site-nav.is-open { display: block; }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
    .site-nav a { padding: .75rem .7rem; font-size: 1rem; }
}

/* Padding only, so it is safe to apply this far up. Kept separate from
   the block above because it is about breathing room, not the menu. */
@media (max-width: 900px) {
    .header__inner { padding-block: .6rem; }
}

/* Only below the phone breakpoint does the search claim a row of its
   own. Between 781px and 900px it stays inline on the same row as the
   brand, which is what keeps the header one row high up there. */
@media (max-width: 780px) {
    .tool-search { order: 4; flex-basis: 100%; max-width: none; margin: 0 0 .75rem; }

    .grid--tools, .grid--categories { grid-template-columns: 1fr; }
    .footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
    .hero { padding-top: 2rem; }
    .section-head { margin-top: 2rem; }
}

@media (max-width: 480px) {
    .card { padding: 1rem; }
    .trust-row { gap: .75rem 1.25rem; font-size: .82rem; }
}

/* ---------------------------------------------------------------
   15. Ambient layer (every page)
   ---------------------------------------------------------------
   The site's visual identity, in three parts: a soft light field
   behind the page, full-width bands for rhythm, and a gentle reveal
   as blocks scroll into view.

   This began as homepage-only CSS. It lives here now because every
   page uses it, and a page that had to opt in would be the odd one
   out. Nothing in this section carries information — with the light
   field removed, the bands flattened and the reveal disabled, every
   page reads exactly the same.
   -------------------------------------------------------------- */

/* --- 15a. Light field ------------------------------------------
   Large, soft colour fields behind the page. Built from
   radial-gradient() rather than a blurred element: a gradient with a
   transparent falloff looks identical to filter: blur() and costs a
   fraction of it, because the browser paints it once instead of
   filtering a large layer on every frame.

   Only `transform` and `opacity` animate, so the whole thing stays on
   the compositor and never causes a repaint or a layout shift.

   `z-index: 0` and a fixed position put it above the page background
   but below anything explicitly positioned. The header is already
   `z-index: 100`, so it floats over the field for free.

   It is decorative, so it is `aria-hidden` in the markup and never
   interactive.
   ----------------------------------------------------------------- */
.glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.glow__blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: .85;
    will-change: transform;
}

/* Light theme: pale blue, violet and cyan on white. Deliberately low
   contrast — text sits on top of this. */
.glow__blob--a {
    top: -18vmax; left: -12vmax;
    width: 62vmax; height: 62vmax;
    background: radial-gradient(circle at center,
        rgba(59, 130, 246, .22) 0%,
        rgba(59, 130, 246, .12) 38%,
        rgba(59, 130, 246, 0) 70%);
    animation: glowDrift 34s ease-in-out infinite alternate;
}

.glow__blob--b {
    top: -22vmax; right: -16vmax;
    width: 58vmax; height: 58vmax;
    background: radial-gradient(circle at center,
        rgba(139, 92, 246, .20) 0%,
        rgba(139, 92, 246, .10) 40%,
        rgba(139, 92, 246, 0) 72%);
    animation: glowDrift 44s ease-in-out infinite alternate-reverse;
}

.glow__blob--c {
    top: 26vmax; left: 24vmax;
    width: 52vmax; height: 52vmax;
    background: radial-gradient(circle at center,
        rgba(34, 211, 238, .16) 0%,
        rgba(34, 211, 238, .07) 42%,
        rgba(34, 211, 238, 0) 74%);
    animation: glowDrift 52s ease-in-out infinite alternate;
}

/* Dark theme: the same three hues, a little stronger, over near-black.
   Violet leads so the page reads as navy rather than grey. */
html[data-theme="dark"] .glow__blob { opacity: .75; }

html[data-theme="dark"] .glow__blob--a {
    background: radial-gradient(circle at center,
        rgba(37, 99, 235, .30) 0%,
        rgba(37, 99, 235, .12) 40%,
        rgba(37, 99, 235, 0) 72%);
}

html[data-theme="dark"] .glow__blob--b {
    background: radial-gradient(circle at center,
        rgba(124, 58, 237, .30) 0%,
        rgba(124, 58, 237, .12) 42%,
        rgba(124, 58, 237, 0) 74%);
}

html[data-theme="dark"] .glow__blob--c {
    background: radial-gradient(circle at center,
        rgba(14, 116, 144, .26) 0%,
        rgba(14, 116, 144, .10) 42%,
        rgba(14, 116, 144, 0) 74%);
}

@keyframes glowDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(3vw, 4vh, 0) scale(1.12); }
}

/* Keep page content above the field. Without this the blobs paint over
   the text, because a positioned element with z-index 0 sits above
   ordinary in-flow content. */
.site-main,
.site-footer {
    position: relative;
    z-index: 1;
}

/* The footer sits on its own surface so the light field does not wash
   out the small print. */
.site-footer {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- 15b. Reading measure ---------------------------------------
   Long-form blocks — numbered steps, FAQ answers, intro prose — are
   unreadable at the full container width: a single step runs the whole
   1200px and the eye loses its place on the way back. The homepage
   already reads as a narrow column; this gives the rest of the site
   the same discipline.

   Must not be combined with `.tool-page__main`, which sets its own
   max-width from tool.css and is loaded later.
   ----------------------------------------------------------------- */
.container--reading { max-width: 860px; }

/* --- 15c. Bands ------------------------------------------------
   Full-width blocks so a page has a pulse instead of one long column
   of identical cards. A band is the sibling of a container, and the
   container inside it keeps the width consistent.
   ----------------------------------------------------------------- */
.band {
    position: relative;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.band--soft {
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--bg-soft) 80%, transparent) 18%,
        color-mix(in srgb, var(--bg-soft) 80%, transparent) 82%,
        transparent 100%);
}

.band--surface {
    border-block: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.band--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* A band that opens a page sits directly under the header, so it must
   not push itself down with the usual top margin. */
.band--first { margin-top: 0; padding-top: clamp(1.25rem, 2.5vw, 2rem); }

.band--last { margin-bottom: 0; }

/* --- 15d. Page furniture -----------------------------------------
   The small pill above a page title. It started on the homepage and
   is used by tool and category headers too, so it belongs here: in
   home.css it rendered unstyled on every page except the first.
   ----------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .8rem;
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-strong);
    margin-bottom: 1.1rem;
}

/* --- 15e. Section headers -------------------------------------- */
.section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
}

.section-head--center p {
    max-width: 58ch;
    font-size: .95rem;
}

.section-head h2 {
    font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
    letter-spacing: -.015em;
}

/* --- 15f. Reveal on scroll --------------------------------------
   Progressive enhancement: `.js-reveal` is added by JS, and the CSS
   only applies once it is present. With JS off, or if the observer
   cannot be built, everything is simply visible — no content is ever
   hidden behind a script.
   ----------------------------------------------------------------- */
.js-reveal .reveal {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .5s ease, transform .5s ease;
}

.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* --- 15g. Reduced motion ----------------------------------------
   The field stops moving and the reveal becomes instant. Nothing
   disappears: the layout and the information are identical, only the
   movement is gone.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .glow__blob { animation: none; }

    .js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------
   16. Print
   -------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .ad-slot, .tool-search, .breadcrumbs, .btn { display: none !important; }
    .glow { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------
   Header account menu
   --------------------------------------------------------------- */
.site-signin {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .87rem;
    font-weight: 600;
    color: var(--brand-strong);
    text-decoration: none;
    white-space: nowrap;
}

.site-signin:hover { background: var(--brand-soft); border-color: var(--brand-border); }

.account-menu { position: relative; }

.account-menu > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem .35rem .35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    font-size: .87rem;
    color: var(--ink-2);
    max-width: 12rem;
}

.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover { border-color: var(--border-strong); }

.account-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    font-size: .8rem;
    font-weight: 700;
    flex: none;
}

.account-menu__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 50;
    min-width: 14rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
}

.account-menu__email {
    margin: 0 0 .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.account-menu__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .15rem;
}

.account-menu__panel a {
    display: block;
    padding: .4rem .5rem;
    border-radius: 6px;
    font-size: .88rem;
    color: var(--ink);
    text-decoration: none;
}

.account-menu__panel a:hover { background: var(--bg-muted); }

.account-menu__logout {
    display: block;
    width: 100%;
    margin-top: .5rem;
    padding: .45rem .5rem;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: .88rem;
    color: var(--err);
    cursor: pointer;
}

.account-menu__logout:hover { background: var(--err-bg); }

@media (max-width: 560px) {
    .account-menu__name { display: none; }
    .auth-facts > div { flex-direction: column; gap: .15rem; }
    .auth-facts dd { text-align: left; }
}