/* Xerex stylesheet.
   Loaded AFTER MudBlazor's CSS (see App.razor) so these rules win ties. */

/* Instrument Sans, self-hosted (SIL OFL, see fonts/OFL-InstrumentSans.txt). Hotlinking Google Fonts
   would send every visitor's IP address to Google. */
/* The wordmark's face: Archivo (SIL OFL) pinned to ExtraBold at 118% width and cut down to letters and
   digits, so it costs a few kilobytes. Used only by .xerex-wordmark. */
@font-face {
    font-family: "Archivo Wordmark";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/archivo-extrabold-wide.woff2") format("woff2");
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --xerex-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Xerex brand palette (designer-approved): Deep Blue #0F3B5C, Teal #14B8A6, Slate #9FB1C1,
       Mist #F3F6F8. Deep Blue carries the top bar, side nav, buttons and links (white text on it reads
       at 11.7:1). Teal is the highlight on dark surfaces and in progress bars only: white text on teal,
       or teal text on a light page, is too faint to read (about 2.4:1). */
    --xerex-brand-deep-blue: #0F3B5C;
    --xerex-brand-teal: #14B8A6;
    --xerex-brand-slate: #9FB1C1;
    --xerex-brand-mist: #F3F6F8;
    --xerex-bg: var(--xerex-brand-mist);  /* the page, a hint darker than the white cards */
    --xerex-surface: #ffffff;           /* cards and panels */
    --xerex-border: #dce3ea;
    --xerex-border-strong: #c3cfda;
    --xerex-text: #0b1f33;
    --xerex-text-muted: #4a5d70;
    --xerex-accent: var(--xerex-brand-deep-blue);  /* buttons and links */
    --xerex-accent-hover: #0a2c46;
    --xerex-accent-pale: #e1ecf4;
    --xerex-accent-soft: rgba(20, 184, 166, 0.2);  /* progress tracks */
    --xerex-on-dark-accent: var(--xerex-brand-teal);  /* highlights on Deep Blue */
    --xerex-hover: #eef2f6;             /* hover on buttons and menus */
    --xerex-active: #e1e8ef;
    --xerex-border-hover: var(--xerex-brand-slate);
    --xerex-subtle: #f7f9fb;            /* table headers, row hover */
    /* Top bar, side nav and brand panels */
    --xerex-chrome-bg: var(--xerex-brand-deep-blue);
    --xerex-chrome-border: #1a4a6e;
    --xerex-chrome-text: #e6eef5;
    --xerex-chrome-text-muted: var(--xerex-brand-slate);
    --xerex-chrome-hover: rgba(255, 255, 255, 0.08);
    --xerex-chrome-active-bg: rgba(20, 184, 166, 0.22);
    --xerex-chrome-active-text: #ffffff;
    --xerex-surface-hover: var(--xerex-hover);  /* the name master uses for the same hover fill */
    --xerex-danger: #b91c1c;
    --xerex-danger-pale: #fee2e2;
    --xerex-warning: #b45309;
    --xerex-warning-pale: #fef3c7;
    --xerex-info: #0369a1;              /* sky, kept apart from the blue accent */
    --xerex-info-pale: #e0f2fe;
    /* Page titles (h1): the same look as the dashboard greeting (MudBlazor h4). */
    --xerex-title-size: 2.125rem;
    --xerex-title-size-phone: 1.75rem;
    --xerex-title-weight: 400;
    --xerex-title-line-height: 1.235;
    --xerex-title-letter-spacing: 0.00735em;
    --xerex-radius: 8px;
    --xerex-radius-lg: 12px;
    --xerex-shadow: 0 1px 2px rgba(11, 31, 51, 0.05), 0 2px 8px rgba(11, 31, 51, 0.05);
    --xerex-shadow-pop: 0 4px 6px rgba(11, 31, 51, 0.06), 0 12px 28px rgba(11, 31, 51, 0.12);

    /* MudBlazor components (Home page) pick up the same face. */
    --mud-typography-default-family: var(--xerex-font);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    font-family: var(--xerex-font);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    color: var(--xerex-text);
    background: var(--xerex-bg);
}

h1, h2, h3, h4 { font-family: var(--xerex-font); font-weight: 600; margin: 0 0 0.5em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--xerex-title-size); font-weight: var(--xerex-title-weight); line-height: var(--xerex-title-line-height); letter-spacing: var(--xerex-title-letter-spacing); }
h2 { font-size: 1.2rem; letter-spacing: -0.01em; margin-top: 2.25rem; }
h3 { font-size: 1.05rem; }
h1:focus { outline: none; }

p { margin: 0 0 0.75rem; }

a { color: var(--xerex-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* Browser surfaces — the parts we didn't draw still carry the palette. */
::selection {
    background: var(--xerex-accent-pale);
    color: var(--xerex-accent-hover);
}
:focus-visible {
    outline: 2px solid var(--xerex-accent);
    outline-offset: 2px;
    border-radius: 3px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline-offset: 1px;
}
html {
    scrollbar-color: var(--xerex-border-strong) transparent;
    accent-color: var(--xerex-accent);
    caret-color: var(--xerex-accent);
}
/* WebKit scrollbars — unobtrusive, palette-aware. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--xerex-border-strong);
    border: 2px solid var(--xerex-bg);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--xerex-text-muted); }

/* Tabular numerals in data tables keep columns aligned without a per-td class. */
table.xerex-table td { font-variant-numeric: tabular-nums; }

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--xerex-hover);
    padding: 0.08em 0.35em;
    border-radius: 3px;
}

/* Nav */
nav.xerex-nav {
    background: var(--xerex-chrome-bg);
    color-scheme: dark;  /* the language picker follows the dark bar */
    border-bottom: 1px solid var(--xerex-chrome-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    align-items: center;
    /* Line the bar up with the page content, also when the page is centred on a very wide screen. */
    padding: 0.75rem max(var(--xerex-gutter), calc((100% - var(--xerex-page-max)) / 2 + var(--xerex-gutter)));
}
nav.xerex-nav a { color: var(--xerex-chrome-text); font-weight: 500; }
nav.xerex-nav .xerex-link-btn { color: var(--xerex-chrome-text); }
nav.xerex-nav .xerex-link-btn:hover { color: #fff; }
nav.xerex-nav .xerex-nav-brand { margin-right: 0.75rem; text-decoration: none; line-height: 1; }
nav.xerex-nav .xerex-spacer { flex: 1; }
nav.xerex-nav .xerex-user { color: var(--xerex-chrome-text-muted); font-size: 0.92rem; }

/* Page width: fluid up to a cap that still reads well on a 27"+ monitor. The gutter grows with the
   screen. Prose pages (help, privacy) opt back into a narrow column with .xerex-prose-page. */
:root {
    --xerex-page-max: 1760px;
    --xerex-gutter: clamp(1rem, 3vw, 3rem);
}
main.xerex-main {
    max-width: var(--xerex-page-max);
    margin: 0 auto;
    padding: 1.5rem var(--xerex-gutter);
}
/* Long running text keeps a comfortable line length however wide the page is. */
.xerex-measure { max-width: 75ch; }

/* Non-production copies (Xerex:EnvironmentLabel, set for staging) wear caution tape above the top bar:
   yellow and black stripes with the environment name on a plain black plate in the middle. */
.xerex-env-banner {
    display: flex;
    justify-content: center;
    height: 1.75rem;
    background: repeating-linear-gradient(-45deg, #facc15 0 14px, #111 14px 28px);
}
.xerex-env-banner-label {
    display: flex;
    align-items: center;
    padding-inline: 1.5rem;
    background: #111;
    color: #facc15;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* Side nav (Dashboard / Eiendom / Prosjekt) — signed-in pages only. Signed-in pages use the full
   screen width, and the side nav is a filled column from the top bar down to the bottom. The page
   itself never scrolls: the top bar and side nav stay put and only the main area scrolls. */
body:has(.xerex-shell) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}
body:has(.xerex-shell) nav.xerex-nav { flex: 0 0 auto; padding-inline: var(--xerex-gutter); }
.xerex-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
}
nav.xerex-sidenav {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--xerex-chrome-bg, var(--xerex-surface));
    border-right: 1px solid var(--xerex-chrome-border, var(--xerex-border));
}
.xerex-sidenav-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.5rem 0.75rem;
}
.xerex-sidenav-bottom { margin-top: auto; padding-top: 0.75rem; }
.xerex-sidenav-version { padding: 0.5rem 0.75rem 0; font-size: 0.75rem; color: var(--xerex-chrome-text-muted, var(--xerex-text-muted)); }
/* Phone menu button and backdrop (shown only on small screens, see the 640px block). The checkbox
   is visually hidden but keeps keyboard focus; its focus ring shows on the button. */
.xerex-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.xerex-menu-button {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: -0.4rem;
    border-radius: var(--xerex-radius);
    color: var(--xerex-chrome-text, var(--xerex-text));
    cursor: pointer;
}
.xerex-menu-button:hover { background: var(--xerex-chrome-hover, var(--xerex-hover, #f1efe8)); }
.xerex-menu-toggle:focus-visible + .xerex-menu-button { outline: 2px solid var(--xerex-on-dark-accent); outline-offset: 2px; }
.xerex-sidenav-backdrop { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(11, 31, 51, 0.45); }
/* "main." is needed to beat main.xerex-main above, which would centre the content with a max width. */
main.xerex-main-with-sidenav {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem;  /* tight: the side nav already frames the content */
}

/* Dashboard: invitations and tasks lists */
.xerex-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.xerex-dash-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--xerex-border); }
.xerex-dash-head + .xerex-dash-row { border-top: 0; }
.xerex-dash-row-main { flex: 1; min-width: 0; }
.xerex-dash-row-title { display: block; font-weight: 600; color: var(--xerex-text); }
.xerex-dash-row-meta { font-size: 0.875rem; }
.xerex-dash-row-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: flex-end; }
.xerex-dash-row-actions .xerex-pill { margin-top: 0; }

/* Dashboard (Home.razor): row 1 two stat tiles, row 2 invitations and requests, row 3 one small
   task tile per property or project. Rows stack on narrow screens. */
.xerex-dash-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.xerex-dash-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.xerex-dash-stat {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--xerex-surface); border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius-lg);
    box-shadow: var(--xerex-shadow); color: var(--xerex-text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.xerex-dash-stat:hover { text-decoration: none; border-color: var(--xerex-border-hover); box-shadow: var(--xerex-shadow-pop); }
.xerex-dash-stat-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 3.25rem; height: 3.25rem; border-radius: 0.9rem;
    background: var(--xerex-chrome-bg, var(--xerex-accent)); color: var(--xerex-on-dark-accent, #fff);
}
.xerex-dash-stat-icon .mud-icon-root { font-size: 1.75rem; }
.xerex-dash-stat-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.xerex-dash-stat-number { font-size: 2rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.xerex-dash-stat-label { color: var(--xerex-text-muted); }
.xerex-dash-stat-go { color: var(--xerex-text-muted); font-size: 1.25rem; }
.xerex-dash-card { margin: 0; }
.xerex-dash-title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1.1rem; font-weight: 600; }
.xerex-dash-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem;
    border-radius: 999px; background: var(--xerex-accent-pale); color: var(--xerex-accent); font-size: 0.8rem; font-weight: 700;
}
.xerex-dash-intro { margin: 0 0 0.25rem; font-size: 0.875rem; }
.xerex-dash-org { font-weight: 400; }
.xerex-dash-kind {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; background: var(--xerex-accent-pale); color: var(--xerex-accent);
}
.xerex-dash-section-head { margin: 0.5rem 0 0.75rem; }
.xerex-dash-tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.xerex-dash-tile {
    background: var(--xerex-surface); border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius);
    padding: 0.75rem 0.85rem; box-shadow: var(--xerex-shadow);
}
.xerex-dash-tile-head { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; }
.xerex-dash-tile-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.xerex-dash-tile-kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--xerex-text-muted); }
.xerex-dash-tile-title { font-weight: 600; color: var(--xerex-text); overflow-wrap: anywhere; }
.xerex-dash-tile-detail { font-size: 0.8rem; color: var(--xerex-text-muted); overflow-wrap: anywhere; }
.xerex-dash-tile-tasks { list-style: none; margin: 0; padding: 0.5rem 0 0; border-top: 1px solid var(--xerex-border); display: flex; flex-direction: column; gap: 0.35rem; }
.xerex-dash-tile-tasks li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.875rem; }
.xerex-dash-tile-tasks .mud-icon-root { color: var(--xerex-text-muted); flex: 0 0 auto; margin-top: 0.1rem; }

/* Properties: search and "add" on one row, filters below, then the table. */
.xerex-property-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0.75rem; }
.xerex-property-toolbar .xerex-filter-search { flex: 1 1 22rem; margin: 0; }
.xerex-property-count { margin: 0 0 0.5rem; font-size: 0.875rem; }
.xerex-property-note { margin-top: 0.75rem; font-size: 0.875rem; }
.xerex-property-link { font-weight: 600; font-variant-numeric: tabular-nums; }
.xerex-table-scroll { overflow-x: auto; }
.xerex-property-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.xerex-property-facts dt { color: var(--xerex-text-muted); }
.xerex-property-facts dd { margin: 0; }

/* Property overview (PropertyDetail.razor): facts on the left over the full height, picture above map
   on the right. One column on narrow screens. */
.xerex-prop-overview {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);  /* picture and map get a quarter of the width */
    grid-template-areas: "facts photo" "facts map";
    gap: 1rem;
    align-items: start;
}
.xerex-prop-overview > .xerex-card { margin: 0; }
.xerex-prop-facts { grid-area: facts; align-self: stretch; }
.xerex-prop-overview > .xerex-prop-tile:nth-of-type(2) { grid-area: photo; }
.xerex-prop-overview > .xerex-prop-tile:nth-of-type(3) { grid-area: map; }
@media (max-width: 900px) {
    .xerex-prop-overview { grid-template-columns: minmax(0, 1fr); grid-template-areas: "facts" "photo" "map"; }
}
.xerex-prop-tile-title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 600; }
.xerex-prop-note { margin: 0.5rem 0 0; font-size: 0.8rem; }
.xerex-prop-photo {
    aspect-ratio: 16 / 9; max-width: 100%; margin-bottom: 0.6rem; overflow: hidden;
    border-radius: var(--xerex-radius); background: var(--xerex-subtle); border: 1px dashed var(--xerex-border-strong);
}
.xerex-prop-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xerex-prop-photo-empty {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
    color: var(--xerex-text-muted); font-size: 0.875rem;
}
.xerex-prop-photo-empty .mud-icon-root { font-size: 2.25rem; }
.xerex-prop-photo-pick { cursor: pointer; }
.xerex-prop-photo-pick:focus-within { outline: 2px solid var(--xerex-accent); outline-offset: 2px; }
.xerex-map { aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--xerex-radius); border: 1px solid var(--xerex-border); }
.xerex-map svg { display: block; width: 100%; height: 100%; }
.xerex-map-land { fill: #eef2ec; }
.xerex-map-water { fill: #cfe3f2; }
.xerex-map-park { fill: #d6ead3; }
.xerex-map-road { fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; }
.xerex-map-road-main { stroke-width: 10; stroke: #fdfdfd; }
.xerex-map-pin { fill: var(--xerex-brand-deep-blue, var(--xerex-accent)); }
.xerex-map-pin-dot { fill: var(--xerex-brand-teal, #fff); }
.xerex-map-pin-shadow { fill: rgba(11, 31, 51, 0.25); }
.xerex-prop-map-address { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; margin: 0.6rem 0; font-size: 0.9rem; }

/* Work area (Workspace.razor): a light second menu beside the dark main side nav. The main area
   stops scrolling; the menu stays put and only the content beside it scrolls. */
main.xerex-main-with-sidenav:has(> .xerex-workspace) { display: flex; padding: 0; overflow: hidden; }
.xerex-workspace { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.xerex-worknav {
    flex: 0 0 230px;
    overflow-y: auto;
    padding: 1rem 0.75rem;
    background: var(--xerex-surface);
    border-right: 1px solid var(--xerex-border);
}
.xerex-worknav-head { padding: 0 0.5rem 0.9rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--xerex-border); }
.xerex-worknav-back { display: inline-block; margin-bottom: 0.6rem; font-size: 0.85rem; }
.xerex-worknav-kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--xerex-text-muted); }
.xerex-worknav-title { font-weight: 650; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.xerex-worknav-sub { font-size: 0.85rem; color: var(--xerex-text-muted); overflow-wrap: anywhere; }
.xerex-worknav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.xerex-worknav-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--xerex-radius);
    color: var(--xerex-text);
    font-weight: 500;
}
.xerex-worknav-link:hover { background: var(--xerex-hover); text-decoration: none; }
.xerex-worknav-link.active { background: var(--xerex-accent-pale); color: var(--xerex-accent); box-shadow: inset 3px 0 0 var(--xerex-brand-teal, var(--xerex-accent)); }
.xerex-workspace-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 1rem 1.25rem; }

/* PIN lock (PinGate.razor, layout example): a dialog over a dimmed page; the content is not rendered. */
.xerex-lock { display: inline-flex; vertical-align: middle; margin-left: 0.3rem; color: var(--xerex-text-muted); }
.xerex-pin-backdrop {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(11, 31, 51, 0.55);
}
.xerex-pin-dialog {
    width: min(24rem, 100%);
    padding: 1.75rem 1.5rem 1.25rem;
    background: var(--xerex-surface); border-radius: var(--xerex-radius-lg); box-shadow: var(--xerex-shadow-pop);
    text-align: center;
}
.xerex-pin-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem; margin-bottom: 0.75rem; border-radius: 50%;
    background: var(--xerex-chrome-bg, var(--xerex-accent)); color: var(--xerex-on-dark-accent, #fff);
}
.xerex-pin-title { margin: 0 0 0.35rem; font-size: 1.2rem; font-weight: 600; overflow-wrap: anywhere; }
.xerex-pin-form { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: 1rem; }
.xerex-pin-input { width: 100%; text-align: center; font-size: 1.5rem; letter-spacing: 0.5em; padding: 0.5rem; }
.xerex-pin-form .validation-message { margin: 0; }
.xerex-pin-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.25rem; }
.xerex-pin-note { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--xerex-border); font-size: 0.8rem; color: var(--xerex-text-muted); }

/* FDV pages (Fdv.razor, FdvWorkspace.razor, FdvView.razor) */
.xerex-btn.xerex-btn-small { padding: 0.3rem 0.6rem; font-size: 0.85rem; gap: 0.3rem; }
.xerex-fdv-actions { display: flex; gap: 0.4rem; justify-content: flex-end; flex-wrap: nowrap; }
.xerex-fdv-sub { display: block; font-size: 0.8rem; }
.xerex-fdv-standalone { margin-left: 0.4rem; }
.xerex-fdv-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.xerex-fdv-stat {
    display: flex; flex-direction: column; min-width: 9rem; padding: 0.75rem 1rem;
    background: var(--xerex-surface); border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius);
    color: var(--xerex-text-muted); font-size: 0.875rem;
}
.xerex-fdv-stat strong { color: var(--xerex-text); font-size: 1.6rem; font-weight: 650; line-height: 1.1; }
a.xerex-fdv-stat:hover { text-decoration: none; border-color: var(--xerex-border-hover); }
.xerex-fdv-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.xerex-fdv-add select { flex: 0 1 24rem; min-width: 0; }
.xerex-fdv-group + .xerex-fdv-group { margin-top: 1rem; }
.xerex-fdv-group-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 1rem; }
.xerex-fdv-code {
    display: inline-flex; justify-content: center; min-width: 2.1rem; padding: 0.05rem 0.35rem;
    border-radius: 0.35rem; background: var(--xerex-accent-pale); color: var(--xerex-accent);
    font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.xerex-fdv-parts { list-style: none; margin: 0; padding: 0; }
.xerex-fdv-parts li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-top: 1px solid var(--xerex-border); }
.xerex-fdv-parts li:first-child { border-top: 0; }
.xerex-fdv-part-name { flex: 1; min-width: 0; }
.xerex-fdv-docs { font-size: 0.85rem; white-space: nowrap; }
.xerex-fdv-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.xerex-fdv-viewbar > span { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Compact filter row: even, tight padding all round (".xerex-filters" twice so it beats the general
   .xerex-filters rule further down), and the search box and lists share one height so they line up. */
.xerex-filters.xerex-property-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; padding: 0.375rem; margin-bottom: 0.75rem; }
.xerex-property-filters select,
.xerex-property-filters .xerex-live-search { box-sizing: border-box; height: 2.25rem; margin: 0; padding: 0 0.6rem; line-height: 1.25; }
.xerex-property-filters select { min-width: 0; flex: 0 1 13rem; }
/* The search box takes whatever room the lists leave. */
.xerex-property-filters .xerex-live-search { flex: 1 1 14rem; min-width: 0; }
.xerex-property-filters .xerex-filter-clear { margin-left: 0.25rem; font-size: 0.9rem; }
.xerex-tabular { font-variant-numeric: tabular-nums; }
.xerex-person { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.xerex-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--xerex-accent-pale); color: var(--xerex-accent-hover);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.xerex-pill.xerex-pill-inline { margin-top: 0; white-space: nowrap; }
.xerex-none { color: var(--xerex-text-muted); font-style: italic; }
/* Owners (PropertyOwners.razor): company owners get a building badge instead of initials. */
.xerex-avatar.xerex-avatar-company { background: var(--xerex-active); color: var(--xerex-text-muted); }
.xerex-owner-name { display: flex; flex-direction: column; line-height: 1.3; }
.xerex-owner-org { font-size: 0.8rem; }
.xerex-owner-type { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.xerex-owner-type legend { font-weight: 500; margin-bottom: 0.3rem; padding: 0; }
/* A private person has no company form or organisation number. */
.xerex-owner-form:has(input[type=radio][value="Person"]:checked) .xerex-owner-company-only { display: none; }
.xerex-property-form { max-width: 40rem; }
.xerex-property-form p { display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 1rem; }
.xerex-property-form p.xerex-actions { flex-direction: row; gap: 1rem; margin: 0.5rem 0 0; }
.xerex-property-form label { margin: 0; }
.xerex-property-form input { width: 100%; }
.xerex-property-form small { font-size: 0.85rem; }
.xerex-property-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.xerex-sidenav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--xerex-radius);
    color: var(--xerex-chrome-text, var(--xerex-text));
    font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
}
.xerex-sidenav-link:hover { background: var(--xerex-chrome-hover, var(--xerex-surface-hover)); text-decoration: none; }
/* The global focus ring squares corners to 3px; keep the link's own shape so the ring does not jump. */
.xerex-sidenav-link:focus-visible { border-radius: var(--xerex-radius); }
/* --xerex-chrome-* let the palette give the top bar and side nav their own (darker) colours. */
.xerex-sidenav-link.active { background: var(--xerex-chrome-active-bg, var(--xerex-accent-pale)); color: var(--xerex-chrome-active-text, var(--xerex-accent-hover)); }
/* Sub-page link (Eiendom → Arkiv): indented and a little smaller. */
.xerex-sidenav-link.xerex-sidenav-sublink { margin-left: 1.6rem; padding-block: 0.4rem; font-size: 0.92rem; }
/* The sub-link's icon is a small dot, centred where the parent's icon sits. */
/* Task count on the side nav's Oppgaver link, and the task list (Tasks.razor). */
.xerex-sidenav-badge {
    margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--xerex-brand-teal, var(--xerex-accent)); color: var(--xerex-chrome-bg, #fff);
    font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.xerex-task-cell { display: inline-flex; align-items: center; gap: 0.6rem; }
.xerex-task-kind { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.xerex-dash-more { margin: 0.75rem 0 0; font-weight: 500; }
.xerex-sidenav-dot { width: 6px; height: 6px; margin: 0 0.35rem 0 0.2rem; border-radius: 50%; background: currentColor; opacity: 0.7; flex: 0 0 auto; }
.xerex-sidenav-link.active .xerex-sidenav-dot { opacity: 1; }

/* Cards */
.xerex-card {
    background: var(--xerex-surface);
    border: 1px solid var(--xerex-border);
    border-radius: var(--xerex-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--xerex-shadow);
}

/* Prose inside a card (help page and similar): readable measure, even rhythm,
   indented lists, and no doubled-up space at the card's bottom edge. */
.xerex-card { padding: 1.5rem 1.75rem; }
.xerex-card > :first-child { margin-top: 0; }
.xerex-card > :last-child { margin-bottom: 0; }
.xerex-card h2 { margin: 0 0 0.6rem; }
.xerex-card p { max-width: 70ch; margin: 0 0 0.9rem; line-height: 1.55; }
.xerex-card ol, .xerex-card ul { max-width: 70ch; margin: 0 0 0.9rem; padding-left: 1.4rem; }
.xerex-card li { margin: 0 0 0.35rem; line-height: 1.55; }
.xerex-card li:last-child { margin-bottom: 0; }

.xerex-prose-page { max-width: 46rem; }

/* Buttons.
   Plain buttons and .xerex-btn are the quiet default. A form's own submit button is the
   primary action (filled). `:where()` keeps that default beatable by any class, and
   `button:where(...)` keeps specificity equal to MudBlazor's `button` reset so source order wins. */
button, .xerex-btn {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 550;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--xerex-radius);
    border: 1px solid var(--xerex-border-strong);
    background: var(--xerex-surface);
    color: var(--xerex-text);
    line-height: 1.25;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
button:hover, .xerex-btn:hover { background: var(--xerex-hover); text-decoration: none; border-color: var(--xerex-border-hover); }
button:active, .xerex-btn:active { background: var(--xerex-active); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

button:where([type=submit]), .xerex-btn-primary {
    background: var(--xerex-accent);
    border-color: var(--xerex-accent);
    color: #fff;
}
button:where([type=submit]):hover, .xerex-btn-primary:hover {
    background: var(--xerex-accent-hover);
    border-color: var(--xerex-accent-hover);
}
/* Secondary action inside a form that would otherwise default to a filled submit
   (row actions in admin tables, and similar). */
button.xerex-btn-secondary {
    background: var(--xerex-surface);
    color: var(--xerex-text);
    border-color: var(--xerex-border-strong);
    padding: 0.35rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 500;
}
button.xerex-btn-secondary:hover { background: var(--xerex-hover); border-color: var(--xerex-border-hover); }

/* Destructive button: the one place a red control is right. */
.xerex-btn-danger,
button.xerex-btn-danger {
    background: var(--xerex-surface);
    color: var(--xerex-danger);
    border-color: var(--xerex-danger-pale);
}
.xerex-btn-danger:hover,
button.xerex-btn-danger:hover {
    background: var(--xerex-danger-pale);
    border-color: var(--xerex-danger);
    color: var(--xerex-danger);
}

.xerex-link-btn,
button.xerex-link-btn {
    background: none;
    border: none;
    color: var(--xerex-accent);
    cursor: pointer;
    padding: 0;
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.xerex-link-btn:hover,
button.xerex-link-btn:hover {
    background: none;
    color: var(--xerex-accent-hover);
}

/* Forms.
   Blazor's <InputText> renders a bare <input> with no type= attribute, so an
   `input[type=text]` selector never matches it — inputs render as invisible
   browser-default boxes. Match :not([type]) explicitly so every text-shaped
   input picks up the design-system chrome. */
input:where(
    :not([type]),
    [type=text],
    [type=email],
    [type=password],
    [type=search],
    [type=url],
    [type=tel],
    [type=number],
    [type=date],
    [type=datetime-local]
),
select, textarea {
    font: inherit;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--xerex-border-strong);
    border-radius: var(--xerex-radius);
    background: var(--xerex-surface);
    color: var(--xerex-text);
    min-width: min(18rem, 100%);
}
textarea { min-height: 7rem; }
label {
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0.3rem;
}

.validation-message { color: var(--xerex-danger); font-size: 0.9rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--xerex-accent); }
.invalid { outline: 1px solid var(--xerex-danger); }

/* Tables */
table.xerex-table {
    border-collapse: collapse;
    width: 100%;
    background: var(--xerex-surface);
    border: 1px solid var(--xerex-border);
    border-radius: var(--xerex-radius);
    overflow: hidden;
    box-shadow: var(--xerex-shadow);
}
table.xerex-table th, table.xerex-table td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--xerex-border);
    vertical-align: top;
}
table.xerex-table th {
    background: var(--xerex-subtle);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--xerex-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
table.xerex-table tr:last-child td { border-bottom: none; }
table.xerex-table tr:hover td { background: var(--xerex-subtle); }
table.xerex-table .xerex-num,
.xerex-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Notices */
.xerex-notice {
    padding: 0.65rem 0.9rem;
    border-radius: var(--xerex-radius);
    border: 1px solid;
    margin-bottom: 1rem;
}
.xerex-notice-info { background: var(--xerex-info-pale); border-color: var(--xerex-info); color: var(--xerex-info); }
.xerex-notice-ok { background: var(--xerex-accent-pale); border-color: var(--xerex-accent); color: var(--xerex-accent-hover); }
.xerex-notice-warn { background: var(--xerex-warning-pale); border-color: var(--xerex-warning); color: var(--xerex-warning); }
.xerex-notice-error { background: var(--xerex-danger-pale); border-color: var(--xerex-danger); color: var(--xerex-danger); }

/* Status pills */
.xerex-status { padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }
.xerex-status-draft { background: #e1e8ef; color: #33475b; }
.xerex-status-active { background: var(--xerex-info-pale); color: var(--xerex-info); }
.xerex-status-handedover { background: var(--xerex-accent-pale); color: var(--xerex-accent-hover); }

/* Visually-hidden — a11y label for inputs whose placeholder carries the role. */
.xerex-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Library hero — the search IS the page, so compose around it. */
.xerex-library-hero {
    max-width: 52rem;
    margin-bottom: 1.25rem;
}
.xerex-library-hero h1 { margin-bottom: 0.35rem; }
.xerex-library-lede {
    color: var(--xerex-text-muted);
    margin-bottom: 1.1rem;
    max-width: 42rem;
}
.xerex-library-meta {
    color: var(--xerex-text-muted);
    font-size: 0.9rem;
    margin: 0.85rem 0 0;
}
.xerex-library-empty {
    color: var(--xerex-text-muted);
    padding: 1.5rem;
    background: var(--xerex-surface);
    border: 1px dashed var(--xerex-border-strong);
    border-radius: var(--xerex-radius);
    text-align: center;
}

/* Unified search pill — input and submit share one chrome instead of standing
   awkwardly beside each other. Focus-within tints the whole pill with the
   accent, so the UI reacts to focus as a single component. */
.xerex-search-row {
    display: flex;
    gap: 0.35rem;
    align-items: stretch;
    background: var(--xerex-surface);
    border: 1px solid var(--xerex-border-strong);
    border-radius: 999px;
    padding: 0.3rem 0.3rem 0.3rem 1rem;
    box-shadow: var(--xerex-shadow);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.xerex-search-row:focus-within {
    border-color: var(--xerex-accent);
    box-shadow: 0 0 0 3px var(--xerex-accent-pale);
}
.xerex-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.55rem 0.5rem;
    font-size: 1.05rem;
    color: var(--xerex-text);
    outline: none;
}
.xerex-search-input:focus,
.xerex-search-input:focus-visible {
    outline: none;
    box-shadow: none;
}
.xerex-search-input::placeholder {
    color: var(--xerex-text-muted);
}
.xerex-search-row button[type=submit] {
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    flex: 0 0 auto;
}

/* Traffic-light retrieval status.
   A horizontal gradient bar fades from the status colour on the left into
   the surrounding background near the text, so the text stays on a neutral
   contrast ground while the colour is still immediately legible on the left
   edge. A solid 4px stripe on the far left guarantees the signal survives
   even for colour-blind viewers who rely on position + the text label. */
.xerex-traffic {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 1.1rem;
    min-width: 11rem;
    border-radius: 3px;
    position: relative;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--xerex-text);
    background:
        linear-gradient(to right, var(--traffic-fill, transparent) 0%, transparent 65%);
}
.xerex-traffic::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--traffic-stripe, transparent);
}
.xerex-traffic-ok {
    --traffic-fill: rgba(22, 163, 74, 0.35);     /* green */
    --traffic-stripe: #16a34a;
}
.xerex-traffic-needs-review {
    --traffic-fill: rgba(234, 179, 8, 0.4);      /* amber */
    --traffic-stripe: #ca8a04;
}
.xerex-traffic-missing {
    --traffic-fill: rgba(220, 38, 38, 0.3);      /* red */
    --traffic-stripe: #dc2626;
}
.xerex-traffic-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    background: var(--traffic-stripe);
}

/* Blazor error */
.blazor-error-boundary {
    background: var(--xerex-danger);
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    background: var(--xerex-warning);
    color: white;
    padding: 0.5rem 1rem;
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
#blazor-error-ui.open { display: block; }
#blazor-error-ui .reload { color: white; text-decoration: underline; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }


/* ---- Page structure --------------------------------------------------------------------- */
.xerex-muted { color: var(--xerex-text-muted); }
.xerex-nowrap { white-space: nowrap; }
.xerex-row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem 0.75rem; white-space: nowrap; }
.xerex-row-actions form { margin: 0; }
.xerex-stack { display: grid; gap: 0.5rem; }
.xerex-inline-form { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin: 0; }
.xerex-inline-form input, .xerex-inline-form select { min-width: 0; width: 9.5rem; padding: 0.35rem 0.55rem; font-size: 0.9rem; }
button.xerex-btn-danger { padding: 0.35rem 0.7rem; font-size: 0.9rem; font-weight: 500; }
.xerex-block { display: block; }
.xerex-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
.xerex-wide { width: 100%; max-width: 48rem; }
.xerex-check { display: inline-flex; gap: 0.5rem; align-items: center; font-weight: 450; }
.xerex-back { margin: 0 0 0.75rem; font-size: 0.92rem; }

.xerex-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.5rem;
}
.xerex-page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; min-width: 0; }
.xerex-page-title h1 { margin: 0; overflow-wrap: anywhere; }
.xerex-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Facts about the project: quiet, scannable, no bold-colon paragraphs. */
.xerex-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem 2rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
}
.xerex-facts div { min-width: 0; }
.xerex-facts dt { font-size: 0.85rem; color: var(--xerex-text-muted); }
.xerex-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* One clear next step per project state. */
.xerex-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--xerex-surface);
    border: 1px solid var(--xerex-border);
    border-radius: var(--xerex-radius-lg);
    box-shadow: var(--xerex-shadow);
}
.xerex-next > div { display: grid; gap: 0.2rem; min-width: 0; flex: 1 1 18rem; }
.xerex-next form { margin: 0; }
.xerex-next-busy { background: var(--xerex-accent-pale); border-color: #b9cfe0; }
.xerex-next-done { background: transparent; box-shadow: none; }
.xerex-next small { color: var(--xerex-text-muted); }

progress {
    appearance: none;
    width: 100%;
    height: 0.5rem;
    margin: 0.35rem 0 0.15rem;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    background: var(--xerex-accent-soft);
    accent-color: var(--xerex-accent);
}
progress::-webkit-progress-bar { background: var(--xerex-accent-soft); }
progress::-webkit-progress-value { background: var(--xerex-brand-teal); border-radius: 999px; transition: width 400ms ease; }
progress::-moz-progress-bar { background: var(--xerex-brand-teal); border-radius: 999px; }

/* Overflow menu: <details>, so it works without JavaScript. */
.xerex-menu { position: relative; }
.xerex-menu > summary { list-style: none; user-select: none; }
.xerex-menu > summary::-webkit-details-marker { display: none; }
.xerex-menu > summary::after {
    content: "";
    width: 0.45rem; height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
}
.xerex-menu[open] > summary { background: var(--xerex-hover); border-color: var(--xerex-border-hover); }
.xerex-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
    min-width: 15rem;
    padding: 0.35rem;
    background: var(--xerex-surface);
    border: 1px solid var(--xerex-border);
    border-radius: var(--xerex-radius-lg);
    box-shadow: var(--xerex-shadow-pop);
}
.xerex-menu-panel form { margin: 0; }
button.xerex-menu-item {
    width: 100%;
    justify-content: flex-start;
    border: none;
    background: transparent;
    color: var(--xerex-text);
    padding: 0.55rem 0.7rem;
    font-weight: 500;
    border-radius: 6px;
}
button.xerex-menu-item:hover { background: var(--xerex-hover); }
button.xerex-menu-item-danger { color: var(--xerex-danger); }
button.xerex-menu-item-danger:hover { background: var(--xerex-danger-pale); }

/* Collapsible forms. */
.xerex-section { margin-top: 1.25rem; border-top: 1px solid var(--xerex-border); padding-top: 0.25rem; }
.xerex-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
}
.xerex-section > summary::-webkit-details-marker { display: none; }
.xerex-section > summary h2 { margin: 1rem 0 0.75rem; }
.xerex-section > summary::after {
    content: "";
    width: 0.5rem; height: 0.5rem;
    border-right: 2px solid var(--xerex-text-muted);
    border-bottom: 2px solid var(--xerex-text-muted);
    transform: rotate(45deg);
    transition: transform 150ms ease;
}
.xerex-section[open] > summary::after { transform: rotate(-135deg); }

/* Traffic-light legend. */
.xerex-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--xerex-text-muted);
}
.xerex-legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.xerex-dot-ok { background: #16a34a; }
.xerex-dot-review { background: #ca8a04; }
.xerex-dot-missing { background: #dc2626; }

/* Notices sit closer to their content than a paragraph would. */
.xerex-notice ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

@media (max-width: 640px) {
    nav.xerex-nav { padding: 0.6rem 1rem; gap: 0.35rem 1rem; }
    nav.xerex-nav .xerex-spacer { flex-basis: 100%; height: 0; }
    nav.xerex-nav .xerex-user { display: none; }
    main.xerex-main { padding: 1rem; }  /* small screens: fixed gutter */
    /* Signed in: one-row top bar (menu button, logo, language, sign out); the side nav slides in
       from the left over a dimmed page when the menu button is ticked. */
    body:has(.xerex-shell) nav.xerex-nav { flex-wrap: nowrap; }
    body:has(.xerex-shell) nav.xerex-nav .xerex-spacer { flex-basis: auto; }
    .xerex-menu-button { display: inline-flex; }
    .xerex-topbar-logo { height: 1.75rem; }
    nav.xerex-sidenav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        width: min(80vw, 280px);
        transform: translateX(-100%);
        visibility: hidden;  /* closed menu: links are not reachable with Tab */
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
        box-shadow: var(--xerex-shadow-pop);
    }
    body:has(.xerex-menu-toggle:checked) nav.xerex-sidenav { transform: none; visibility: visible; transition: transform 0.2s ease; }
    body:has(.xerex-menu-toggle:checked) .xerex-sidenav-backdrop { display: block; }
    main.xerex-main-with-sidenav { padding: 1rem; }
    /* Work area menu: a row of tabs above the content. */
    .xerex-workspace { flex-direction: column; }
    .xerex-worknav { flex: 0 0 auto; padding: 0.5rem 0.75rem; border-right: 0; border-bottom: 1px solid var(--xerex-border); overflow-x: auto; overflow-y: hidden; }
    .xerex-worknav-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; padding: 0 0.25rem 0.4rem; margin-bottom: 0.4rem; }
    .xerex-worknav-back, .xerex-worknav-sub { display: none; }
    .xerex-worknav-links { flex-direction: row; }
    .xerex-worknav-link { white-space: nowrap; padding: 0.4rem 0.6rem; }
    .xerex-worknav-link.active { box-shadow: inset 0 -3px 0 var(--xerex-brand-teal, var(--xerex-accent)); }
    .xerex-workspace-main { padding: 1rem; }
    h1, h1.mud-typography-h4 { font-size: var(--xerex-title-size-phone); }
    .xerex-actions { width: 100%; }
    .xerex-menu-panel { right: auto; left: 0; }
    table.xerex-table { display: block; overflow-x: auto; }
}

/* Phones: the three side nav links share the row equally with the icon above the label, so every link is visible
   without scrolling (the Norwegian labels are longer than the English ones). */
@media (max-width: 480px) {
    .xerex-sidenav-links { gap: 0.25rem; padding: 0.4rem 0.5rem; }
    .xerex-sidenav-link { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.4rem 0.25rem; font-size: 0.8125rem; text-align: center; }
}

/* ---- Admin: AI provider settings ---------------------------------------------------- */
.xerex-text-muted { color: var(--xerex-text-muted); }

.xerex-ai-switch { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.xerex-ai-switch > div { flex: 1 1 24rem; }

.xerex-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.xerex-provider {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
    padding: 1rem; background: var(--xerex-surface);
    border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius-lg);
    color: inherit; text-decoration: none; box-shadow: var(--xerex-shadow);
}
a.xerex-provider:hover { border-color: var(--xerex-border-strong); }
.xerex-provider.is-selected { border-color: var(--xerex-accent); box-shadow: 0 0 0 2px var(--xerex-accent-pale), var(--xerex-shadow); }
.xerex-provider.is-soon { opacity: 0.6; box-shadow: none; }
.xerex-provider-logo { width: 32px; height: 32px; margin-bottom: 0.25rem; }
.xerex-provider-initial {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--xerex-border); color: var(--xerex-text-muted);
    font-weight: 700; font-size: 1.1rem;
}
.xerex-provider-name { font-weight: 600; }
.xerex-provider-tag { font-size: 0.85rem; color: var(--xerex-text-muted); }

.xerex-pill { display: inline-block; margin-top: 0.35rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.xerex-pill-ok { background: var(--xerex-accent-pale); color: var(--xerex-accent-hover); }
.xerex-pill-info { background: var(--xerex-info-pale); color: var(--xerex-info); }
.xerex-pill-warn { background: var(--xerex-warning-pale); color: var(--xerex-warning); }
.xerex-pill-muted { background: var(--xerex-border); color: var(--xerex-text-muted); }

.xerex-fieldset { border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius); padding: 0.75rem 1rem 0.25rem; margin: 0 0 1rem; max-width: 36rem; }
.xerex-fieldset legend { padding: 0 0.4rem; font-weight: 600; }

.xerex-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0 1rem; }
.xerex-ai-actions form { margin: 0; }

/* ---- Project page: click an article to see its FDV documents ------------------------- */
.xerex-article-docs { display: none; }
.xerex-article:has(details[open]) .xerex-article-docs { display: table-row; }
.xerex-article-row { position: relative; cursor: pointer; }
.xerex-article-row:hover { background: color-mix(in srgb, var(--xerex-accent-pale) 35%, transparent); }
.xerex-row-toggle summary {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
}
.xerex-row-toggle summary::-webkit-details-marker { display: none; }
.xerex-row-toggle summary::before {
    content: ""; width: 0.45rem; height: 0.45rem; flex: none;
    border-right: 2px solid var(--xerex-text-muted); border-bottom: 2px solid var(--xerex-text-muted);
    transform: rotate(-45deg);
}
.xerex-row-toggle[open] summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
    .xerex-row-toggle summary::before { transition: transform 0.15s ease; }
}
/* The whole row is the click target. */
.xerex-row-toggle summary::after { content: ""; position: absolute; inset: 0; }
.xerex-row-toggle summary:focus-visible { outline: none; }
.xerex-article-row:has(summary:focus-visible) { outline: 2px solid var(--xerex-accent); outline-offset: -2px; }
.xerex-article-docs td { background: var(--xerex-bg); padding: 0.6rem 1rem 0.9rem 2.4rem; }
.xerex-article-doclist { margin: 0; padding-left: 1.1rem; }
.xerex-article-doclist li { margin: 0.2rem 0; }

/* ---- Article pictures ---------------------------------------------------------------- */
.xerex-thumb-col { width: 3.25rem; padding-right: 0; }
.xerex-thumb { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--xerex-border); background: var(--xerex-surface); }
.xerex-article-detail { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.xerex-article-picture { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; flex: 0 0 auto; max-width: 11rem; }
.xerex-article-picture img { width: 160px; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--xerex-border); background: var(--xerex-surface); }
.xerex-article-picture form { margin: 0; }
.xerex-article-docs-list { flex: 1 1 18rem; min-width: 0; }
.xerex-article-docs td { padding-left: 1rem; }

/* ---- Removing and undoing ------------------------------------------------------------ */
.xerex-undo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.xerex-undo form { margin: 0; }
.xerex-danger-link { color: var(--xerex-danger); }

/* ---- Dropping PDFs and small inline actions ------------------------------------------ */
.xerex-dropzone {
    display: block; width: 100%; max-width: 40rem; box-sizing: border-box; cursor: pointer;
    padding: 2rem 1rem; border: 2px dashed var(--xerex-border-strong); border-radius: var(--xerex-radius-lg);
    background: var(--xerex-surface); color: var(--xerex-text-muted); font: inherit;
}
.xerex-dropzone:hover, .xerex-dropzone:focus-visible { border-color: var(--xerex-accent); background: var(--xerex-accent-pale); outline: none; }
.xerex-dropzone::file-selector-button {
    margin-right: 1rem; padding: 0.45rem 0.9rem; border: 1px solid var(--xerex-border-strong);
    border-radius: var(--xerex-radius); background: var(--xerex-surface); color: var(--xerex-text); font: inherit; font-weight: 550; cursor: pointer;
}
.xerex-inline-form { display: inline; margin: 0 0 0 0.6rem; }
.xerex-row-actions { display: flex; gap: 1.25rem; margin-top: 0.6rem; }
.xerex-row-actions .xerex-inline-form { margin: 0; }

/* ---- Brand ---------------------------------------------------------------------------- */
.xerex-wordmark {
    font-family: "Archivo Wordmark", "Instrument Sans", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--xerex-text);
    white-space: nowrap;
}
/* "REX": capitals scaled to the x-height (527 / 687 cap height in Archivo) so "xe" and "REX" share one top edge. */
.xerex-wordmark .o { color: var(--xerex-accent); font-size: 0.767em; letter-spacing: 0; }
.xerex-wordmark-nav { font-size: 1.65rem; }
.xerex-wordmark-lg { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.xerex-wordmark-xl { font-size: clamp(3.5rem, calc(15vw - 1.5rem), 12rem); letter-spacing: -0.04em; }
.xerex-wordmark.on-dark { color: #fff; }
.xerex-wordmark.on-dark .o { color: var(--xerex-on-dark-accent); }
/* Top bar logo: 606×181 artwork shown 34px tall (about 114px wide). */
.xerex-topbar-logo { display: block; height: 2.125rem; width: auto; }
a.xerex-nav-brand:hover .xerex-wordmark .o, a.xerex-auth-logo:hover .xerex-wordmark .o { filter: brightness(1.12); }

.xerex-home-brand { margin: 0 0 0.5rem; font-weight: inherit; }

/* Sign-in, register and password pages: brand on the left, the form on the right. */
.xerex-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); min-height: 100vh; background: var(--xerex-bg); }
.xerex-auth-brand {
    background: var(--xerex-chrome-bg); color: #fff;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}
.xerex-auth-logo { display: inline-block; text-decoration: none; margin-top: auto; }
.xerex-auth-brand .xerex-auth-logo { order: 2; }
.xerex-auth-tagline { order: 1; margin: 0; max-width: 20ch; font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.xerex-auth-main { display: flex; flex-direction: column; padding: 1.25rem clamp(1.25rem, 4vw, 3.5rem); }
.xerex-auth-lang { align-self: flex-end; }
.xerex-auth-card { width: 100%; max-width: 26rem; margin: auto; padding: 2rem 0; }
.xerex-auth-foot { font-size: 0.875rem; }
.xerex-auth-foot a { color: var(--xerex-text-muted); }

@media (max-width: 860px) {
    .xerex-auth { grid-template-columns: 1fr; min-height: 0; }
    .xerex-auth-brand { justify-content: flex-start; align-items: flex-start; gap: 0.75rem; padding: 1.25rem 1.25rem 1.5rem; }
    .xerex-auth-brand .xerex-auth-logo { order: 1; margin-top: 0; }
    .xerex-auth-tagline { order: 2; font-size: 1.05rem; max-width: none; font-weight: 500; }
    .xerex-wordmark-xl { font-size: clamp(3rem, 18vw, 5rem); }
    .xerex-auth-card { margin: 0 auto; padding: 1.25rem 0 0.5rem; }
}

/* Signed-out home: the brand as a bold dark opening, like the sign-in page. */
.xerex-hero {
    background: var(--xerex-chrome-bg); color: #fff; border-radius: var(--xerex-radius-lg);
    padding: clamp(1.5rem, 4vw, 3.5rem); margin-bottom: 1.5rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
}
.xerex-hero .xerex-home-brand { margin: 0; }
.xerex-hero-tagline { margin: 0; max-width: 28ch; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.xerex-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; }
.xerex-hero-cta {
    display: inline-block; padding: 0.7rem 1.4rem; border-radius: var(--xerex-radius);
    background: #fff; color: var(--xerex-accent-hover); font-weight: 650; text-decoration: none;
}
.xerex-hero-cta:hover { background: var(--xerex-accent-pale); text-decoration: none; }
.xerex-hero-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.xerex-hero-link:hover { color: var(--xerex-accent-pale); }
.xerex-hero-cta:focus-visible, .xerex-hero-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- Admin: searching and filtering lists ---------------------------------------------- */
.xerex-filters { background: var(--xerex-surface); border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius-lg); padding: 1rem 1.25rem 0.25rem; margin-bottom: 1rem; }
.xerex-filter-search { display: flex; gap: 0.5rem; margin: 0 0 0.9rem; }
.xerex-filter-search input[type=search] { flex: 1 1 auto; min-width: 0; }
.xerex-filter-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; margin-bottom: 0.75rem; }
.xerex-filter-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; color: var(--xerex-text-muted); }
.xerex-filter-row label.xerex-check { flex-direction: row; align-items: center; gap: 0.4rem; padding-bottom: 0.45rem; }
.xerex-filter-clear { margin-left: 0.75rem; }
.xerex-pager { display: flex; align-items: center; gap: 1.25rem; margin: 1rem 0; }

.xerex-model-custom { margin: 0 0 1rem; max-width: 36rem; }
.xerex-model-custom summary { cursor: pointer; color: var(--xerex-accent); font-size: 0.9rem; }

/* ---- Passkeys on the sign-in page ------------------------------------------------------ */
.xerex-or { display: flex; align-items: center; gap: 0.75rem; color: var(--xerex-text-muted); font-size: 0.875rem; margin: 0.5rem 0; }
.xerex-or::before, .xerex-or::after { content: ""; flex: 1; height: 1px; background: var(--xerex-border); }


/* ---- Trend chart (admin AI usage) ---- */
.vz-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
.vz-seg { display: inline-flex; border: 1px solid var(--xerex-border-strong); border-radius: var(--xerex-radius); overflow: hidden; background: var(--xerex-surface); }
.vz-seg a { padding: 0.4rem 0.9rem; color: var(--xerex-text); font-weight: 500; border-right: 1px solid var(--xerex-border); }
.vz-seg a:last-child { border-right: 0; }
.vz-seg a:hover { background: var(--xerex-bg); }
.vz-seg a[aria-current="true"] { background: var(--xerex-accent); color: #fff; }
.vz-seg a:focus-visible { outline: 2px solid var(--xerex-accent); outline-offset: -2px; }

.vz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.vz-tile { background: var(--xerex-surface); border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius-lg); padding: 1rem 1.25rem; }
.vz-tile-label { color: var(--xerex-text-muted); font-size: 0.9rem; }
.vz-tile-value { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0.15rem 0; }
.vz-tile-delta { font-size: 0.9rem; color: var(--xerex-text-muted); }

.vz { margin: 0; }
.vz-title { font-weight: 600; margin-bottom: 0.4rem; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; font-size: 0.88rem; color: var(--xerex-text-muted); margin-bottom: 0.5rem; }
.vz-note { margin-left: auto; }
.vz-key { display: inline-block; vertical-align: middle; margin-right: 0.35rem; }
.vz-key-col { width: 10px; height: 10px; border-radius: 2px 2px 0 0; background: var(--xerex-accent); }
.vz-key-line { width: 18px; height: 2px; background: var(--xerex-text); }
.vz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.vz-grid { stroke: var(--xerex-border); stroke-width: 1; }
.vz-base { stroke: var(--xerex-border-strong); stroke-width: 1; }
.vz-axis { fill: var(--xerex-text-muted); font-size: 11px; font-family: var(--xerex-font); }
.vz-value { fill: var(--xerex-text); font-size: 11px; font-weight: 600; font-family: var(--xerex-font); }
.vz-bar { fill: var(--xerex-accent); transition: fill 0.12s; }
.vz-partial .vz-bar { fill-opacity: 0.45; }
.vz-col:hover .vz-bar, .vz-col:focus .vz-bar { fill: var(--xerex-accent-hover); }
.vz-hit { fill: transparent; }
.vz-col { outline: none; }
.vz-line { fill: none; stroke: var(--xerex-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.vz-dot { fill: var(--xerex-text); stroke: var(--xerex-surface); stroke-width: 2; pointer-events: none; }
.vz-tip { display: none; pointer-events: none; }
.vz-tip rect { fill: var(--xerex-text); }
.vz-tip-value { fill: #fff; font-size: 13px; font-weight: 600; font-family: var(--xerex-font); }
.vz-tip-label { fill: #c3cfda; font-size: 11px; font-family: var(--xerex-font); }
.vz-table { margin-top: 0.75rem; }
.vz-table summary { cursor: pointer; color: var(--xerex-text-muted); }


/* ---- File drop (script upgrades a plain file input; without script the input is shown as is) ---- */
file-drop { display: block; max-width: 40rem; }
file-drop[ready] .xerex-drop-zone {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
    min-height: 7.5rem; padding: 1.5rem 1rem; text-align: center; box-sizing: border-box;
    border: 2px dashed var(--xerex-border-strong); border-radius: var(--xerex-radius-lg);
    background: var(--xerex-surface); color: var(--xerex-text-muted); transition: border-color 0.12s, background 0.12s;
}
file-drop[ready] .xerex-drop-zone:hover, file-drop[ready] .xerex-drop-zone:focus-within, file-drop[ready] .xerex-drop-zone.is-over {
    border-color: var(--xerex-accent); background: var(--xerex-accent-pale);
}
file-drop[ready] .xerex-drop-zone:focus-within { outline: 2px solid var(--xerex-accent); outline-offset: 2px; }
file-drop[ready] .xerex-drop-prompt { color: var(--xerex-text); font-weight: 550; }
file-drop[ready] .xerex-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
file-drop[ready] .xerex-drop-input::file-selector-button { cursor: pointer; }
.xerex-drop-message { min-height: 1.2em; margin: 0.4rem 0 0; color: var(--xerex-danger); font-size: 0.9rem; }
.xerex-drop-list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.xerex-drop-list li {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.4rem 0.4rem 0.9rem;
    border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius); background: var(--xerex-surface);
}
.xerex-drop-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.xerex-drop-remove {
    flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: var(--xerex-text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.xerex-drop-remove:hover { background: var(--xerex-danger-pale); color: var(--xerex-danger); }
.xerex-drop-remove:focus-visible { outline: 2px solid var(--xerex-accent); }

/* ---- Maintenance ---- */
.xerex-maint-link { margin: 0.5rem 0 1rem; }
.xerex-task { border-top: 1px solid var(--xerex-border); padding: 0.6rem 0; }
.xerex-task:first-of-type { border-top: 0; }
.xerex-task > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }
.xerex-task-form { max-width: 48rem; }
.xerex-task-grid { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 0.5rem 0; }
.xerex-inline-fields { display: inline-flex; gap: 0.5rem; }

/* ---- Run controls (pause, resume, stop) ---- */
.xerex-run-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex: none; }
.xerex-run-controls form { margin: 0; }
.xerex-next-paused progress { opacity: 0.55; }

/* ---- Coverage bar on the project overview ---- */
.xerex-coverage { white-space: nowrap; }
.xerex-coverage progress {
    appearance: none; -webkit-appearance: none; display: block; width: 8rem; height: 6px; border: 0; border-radius: 3px;
    background: var(--xerex-border); overflow: hidden; margin-bottom: 0.2rem;
}
.xerex-coverage progress::-webkit-progress-bar { background: var(--xerex-border); border-radius: 3px; }
.xerex-coverage progress::-webkit-progress-value { background: var(--xerex-brand-teal); border-radius: 3px; }
.xerex-coverage progress::-moz-progress-bar { background: var(--xerex-brand-teal); border-radius: 3px; }
.xerex-coverage progress.is-paused::-webkit-progress-value { background: var(--xerex-border-strong); }
.xerex-coverage progress.is-paused::-moz-progress-bar { background: var(--xerex-border-strong); }
.xerex-coverage progress.is-searching { background-image: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.35), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: xerex-sweep 1.4s linear infinite; }
@keyframes xerex-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .xerex-coverage progress.is-searching { animation: none; } nav.xerex-sidenav { transition: none !important; } }
.xerex-coverage small { color: var(--xerex-text-muted); font-size: 0.82rem; }

/* ---- Reporting content ---- */
.xerex-report { display: inline-block; margin-left: 0.6rem; vertical-align: baseline; }
.xerex-report > summary { list-style: none; cursor: pointer; display: inline; }
.xerex-report > summary::-webkit-details-marker { display: none; }
.xerex-report[open] { display: block; margin: 0.5rem 0 0; }
.xerex-report-form { max-width: 28rem; padding: 0.75rem 1rem; border: 1px solid var(--xerex-border); border-radius: var(--xerex-radius); background: var(--xerex-surface); }
.xerex-quote { margin: 0.5rem 0; padding: 0.4rem 0.9rem; border-left: 3px solid var(--xerex-border-strong); color: var(--xerex-text-muted); }
.xerex-report-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 0.5rem; }
.xerex-report-actions form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }