:root {
    --bg: #f2f2f3;
    --surface: #e9e9ea;
    --text: #1d1f20;
    --divider: color-mix(in srgb, #1d1f20 16%, transparent);

    --accent-100: #ebf3fd;
    --accent-200: #d1e4fb;
    --accent-300: #a8caf6;
    --accent-400: #7cadef;
    --accent-500: #5a97ec;
    --accent-600: #3a86e8;
    --accent-700: #2a6ac0;
    --accent-800: #1f4d8c;
    --accent-900: #14325c;
    --accent: var(--accent-600);

    
    --accent-text: var(--accent-700);
    /* 700, not 600: --on-accent sits on this and needs 4.5:1. */
    --accent-fill: var(--accent-700);
    --accent-soft: var(--accent-100);
    --accent-soft-text: var(--accent-800);
    --accent-line: var(--accent-600);
    --on-accent: var(--bg);

    
    --band: var(--accent-900);
    --band-text: #f2f2f3;
    --band-dim: color-mix(in srgb, #f2f2f3 78%, transparent);
    --band-line: color-mix(in srgb, #f2f2f3 32%, transparent);
    --band-accent: var(--accent-300);

    /* The quiet step for TEXT; clears the 4.5:1 floor. */
    --text-70: color-mix(in srgb, var(--text) 72%, transparent);

    /* NOT FOR TEXT: icons and control affordances only. */
    --text-55: color-mix(in srgb, var(--text) 55%, transparent);

    --danger: #b3261e;
    --danger-soft: #fdeceb;
    --warn: #8a5a00;
    --warn-soft: #fdf3e2;
    --ok: #1c6c3c;
    --ok-soft: #e8f5ec;

    
    --note-soft: #fdf6dd;
    --note-line: #e3d6a3;

    --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --shadow-sm: 0 1px 2px rgb(43 43 45 / 14%);
    --shadow-md: 0 3px 10px rgb(43 43 45 / 16%);
    --shadow-lg: 0 12px 32px rgb(43 43 45 / 22%);

    --gutter: clamp(16px, 3vw, 40px);
    --measure: 1320px;


    color-scheme: light;
}




*, *::before, *::after { box-sizing: border-box; }


[hidden] { display: none !important; }

/* scrollbar-gutter reserves the scrollbar's width whether or not the page is
   long enough to need one. Without it a short view (Assets, three rows) is
   ~15px wider than a long one (All, thirteen), so switching between them
   rewraps every line on the page and the header appears to jump sideways. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
}

h1 { font-size: clamp(34px, 5vw, 52px); }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: 27px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }


h1:focus { outline: none; }

p { margin: 0 0 10px; }

a { color: var(--accent-text); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-800); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

img { display: block; max-width: 100%; }

hr { height: 1px; border: 0; margin: 14px 0; background: var(--divider); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.muted { color: var(--text-70); }
.mono  { font-family: var(--font-mono); }

.eyebrow {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-70);
}





.bp {
    position: relative;
    border: 1px solid var(--divider);
    border-radius: 0;
    background: transparent;
}

/* CORNER MARKS ARE OPT-IN, AND THE HEADER IS WHAT OPTS IN.

   Every .bp used to draw four crosshairs just outside its own box. It is a
   drawing-sheet motif and it reads as one on a page carrying a panel or two --
   but the catalog is a dozen cards, a filter rail and a tab strip, and forty
   crosshairs between them stopped being a motif and became noise the eye has
   to sort past to reach the content.

   So the marks moved to the header panel, where there is exactly one of them
   and it is the thing the page opens with. Everywhere else the box says "this
   is a panel" on its own, and says it once. */
.bp--reversed::before,
.bp--reversed::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    height: 11px;
    pointer-events: none;
    background:
        linear-gradient(var(--bp-mark), var(--bp-mark)) left 5px top 0  / 1px 11px no-repeat,
        linear-gradient(var(--bp-mark), var(--bp-mark)) left 0  top 5px / 11px 1px no-repeat,
        linear-gradient(var(--bp-mark), var(--bp-mark)) right 5px top 0  / 1px 11px no-repeat,
        linear-gradient(var(--bp-mark), var(--bp-mark)) right 0  top 5px / 11px 1px no-repeat;
}

.bp--reversed::before { top: -6px; }
.bp--reversed::after  { bottom: -6px; }

/* Light, because a header panel sits on the accent band rather than on paper. */
.bp--reversed { --bp-mark: color-mix(in srgb, #f2f2f3 55%, transparent); }




.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid var(--divider);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; border-color: var(--divider); }


.btn--primary {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--on-accent);
}

.btn--primary:hover {
    background: var(--accent-800);
    border-color: var(--accent-800);
    color: var(--on-accent);
    transform: translateY(-2px);
}

.btn--ghost { border-color: transparent; color: var(--accent-text); padding-inline: 10px; }
.btn--ghost:hover { background: var(--accent-soft); border-color: transparent; }

.btn--sm { padding: 7px 14px; font-size: 12.5px; }
.btn--block { width: 100%; }


.band .btn { border-color: var(--band-line); color: var(--band-text); }
.band .btn:hover { background: color-mix(in srgb, #f2f2f3 12%, transparent); border-color: var(--band-text); }
/* The band carries --accent-900 text ON the fill, so it needs a LIGHTER fill
   than the light page does, and its own background rather than --accent-fill. */
.band .btn--primary { background: var(--accent-400); border-color: var(--accent-400); color: var(--accent-900); }
.band .btn--primary:hover { background: var(--accent-300); border-color: var(--accent-300); color: var(--accent-900); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.btn-icon:hover { background: var(--accent-soft); border-color: var(--divider); }

.action-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.action-row::after {
    content: "";
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition: width 0.22s ease;
}

a:hover > .action-row::after,
.card:hover .action-row::after { width: 34px; }




.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag--accent  { background: var(--accent-soft); border-color: var(--accent-300); color: var(--accent-soft-text); }
.tag--outline { border-color: var(--divider); color: var(--text-70); }
.tag--chip    { border-color: var(--divider); color: var(--accent-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: none; }
.tag--dashed  { border: 1px dashed var(--divider); color: var(--text-70); }
.tag--ok      { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.tag--warn    { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.tag--danger  { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

.badge-certified {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 2px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-certified svg { stroke-width: 2.2; }




.shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.shell__body { flex: 1 1 auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 58px;
    padding: 8px var(--gutter);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--divider);
}

.site-header__left { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); min-width: 0; }
.site-header__right { display: flex; align-items: center; gap: 16px; font-size: 13px; }

.wordmark {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* 26px fits the 42px the header leaves between its paddings, so the bar keeps
   its height; width follows the artwork's ratio. display:block kills the
   inline baseline gap. */
.wordmark img {
    display: block;
    height: 26px;
    width: auto;
}


.site-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: auto;
    border-top: 1px solid var(--divider);
    padding: 9px var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    font-size: 12.5px;
    line-height: 1.4;
    /* --text-55 here was 3.7:1 on the page background -- under the 4.5:1 needed
       for normal text, and at 12px. --text-70 is 6.3:1. The panel is also more
       opaque than it was, because this bar is sticky and whatever scrolls under
       it was eating the little contrast that remained. */
    color: var(--text-70);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(8px);
}

.site-footer a { color: inherit; }
/* Underlined on hover as well as darkened: colour alone is not an affordance. */
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer svg { width: 14px; height: 14px; }


@media (max-width: 680px) {
    .site-footer { position: static; }
}

.band {
    position: relative;
    overflow: hidden;
    background: var(--band);
    color: var(--band-text);

    /* Same header height on every page (border-box, minimum only), and the
       content TOP-ANCHORED inside it. Centring made the heights match and the
       positions drift: a page carrying a paragraph centred higher than one
       without, so the crumb and the title moved between routes and the header
       appeared to jump while navigating. The slack belongs at the bottom. */
    /* The tallest header the site has -- /store/{id}, which stacks crumbs, a
       title with a pill, a lede and a row of requirement pills. Every other
       page floors to it, so none of them can differ. */
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: clamp(24px, 3vw, 38px) var(--gutter) clamp(26px, 3.2vw, 40px);
}


.band--hero { padding-top: clamp(28px, 3.6vw, 44px); padding-bottom: clamp(30px, 3.8vw, 48px); }


.band::before {
    content: "";
    position: absolute;
    inset: -20px;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--accent-300) 22%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--accent-300) 22%, transparent) 1px, transparent 1px);
    background-size: 60px 60px, 60px 60px;
    animation: omDrift 24s linear infinite;
}


.band::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    pointer-events: none;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent-300) 12%, transparent), transparent);
    animation: omSweep 9s ease-in-out infinite;
}

/* width:100% is required, not tidiness: .band is a column flex container, so
   the `margin: 0 auto` below is a CROSS-axis auto margin and would otherwise
   shrink-fit this box and centre it. */
.band__inner { position: relative; width: 100%; max-width: var(--measure); margin: 0 auto; }
/* No margin of its own: the lead-in above owns the gap. */
.band h1 { margin: 0; color: var(--band-text); }
.band p { color: var(--band-dim); }
.band a { color: var(--band-accent); }
.band a:hover { color: var(--band-text); }
.band .eyebrow { color: var(--band-accent); }
.band .muted { color: var(--band-dim); }

.rule-in {
    display: block;
    width: 46px;
    height: 1px;
    flex: 0 0 auto;
    background: var(--accent-400);
    transform-origin: left;
    animation: omWipe 0.7s ease-out 0.15s both;
}

.eyebrow-row { display: flex; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------------------
   The page header, as one system rather than per page

   Every route was setting this rhythm by hand and none of them agreed: title
   margins of 8, 12, 14 and 16px, ledes capped at 58, 62, 66, 68 and 72ch, tag
   rows at 12 and 18. That is why the header moved while navigating. The four
   rules below own the vertical rhythm; a page supplies content and, at most,
   picks a layout class.

   HEIGHT ONLY on the lead-in, no display change -- .crumbs is inline text
   separated by a literal slash, and making it a flex container eats the spaces
   around it.
   ------------------------------------------------------------------------ */

/* Line one, eyebrow or breadcrumbs. It owns the gap down to the title, so the
   title lands at the same y whichever kind a page uses. */
.band .eyebrow-row,
.band .crumbs { min-height: 20px; margin: 0 0 14px; }

/* Title on the left, actions on the right. */
.band__row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }

/* A header carrying a panel beside its title rather than a row of buttons --
   the register block on /devices. Pair it with data-r="stack" so it collapses
   with the page's other two-column splits at 1080px. */
/* start, not center: centring a title column that is shorter than the panel
   beside it pushes the lead-in down and the header stops lining up with every
   other page. */
.band__split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 44px; align-items: start; }

/* The two things a header may carry under its title. */
.band__lede { max-width: 68ch; margin: 12px 0 0; }
.band .tags { margin-top: 14px; }

/* "Not made by them", at the top of a companion app's content column - not in
   the band (one shared shape, and only some products carry a note) and not
   across the page (that runs it under the price rail, as though it were about
   the purchase). It is the first thing we say in the column where we do the
   talking, and it spans that column.

   Reads like a note pinned to the page - warm paper, one accent edge - because
   it has to be READ, not obeyed. Alarm colouring would suggest something is
   wrong with the product, which is the opposite of what it says. */
.tm-note {
    margin: 0 0 26px;
    padding: 12px 16px;
    background: #fdf7e3;
    border: 1px solid rgba(0, 0, 0, .08);
    border-left: 3px solid #d9a441;
    border-radius: 4px;
    color: #4a4133;
    font-size: .86rem;
    line-height: 1.55;
}


.section { padding: clamp(24px, 2.2vw, 34px) var(--gutter); }
.section__inner { max-width: var(--measure); margin: 0 auto; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--divider);
}

.section-head h2 {
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-70);
}

.section-head__count {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--accent-text);
    white-space: nowrap;
}

.band__count { text-align: right; }
.band__count strong { display: block; font-family: var(--font-heading); font-size: 40px; line-height: 1; font-weight: 600; }
.band__count span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-dim); }

.live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-text);
    white-space: nowrap;
}

.live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: omPulse 1.9s ease-in-out infinite;
}

.band .live { color: var(--band-accent); }

.ticker {
    overflow: hidden;
    border-bottom: 1px solid var(--divider);
    background: var(--bg);
    padding: 12px 0;
}


.ticker__track {
    display: flex;
    width: max-content;
    gap: 40px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 48%, transparent);
    animation: omTick 28s linear infinite;
}

.ticker__run { display: flex; gap: 40px; }
.ticker__run i { color: var(--accent-text); font-style: normal; }




.card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    color: var(--text);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

a.card:hover,
.card--hover:hover {
    transform: translateY(-6px);
    border-color: var(--accent-line);
    box-shadow: var(--shadow-md);
    color: var(--text);
}

.card__kicker {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.card__title { margin: 8px 0 0; font-size: 30px; line-height: 1.1; }
.card__icon { color: var(--accent); }


.card__body { flex: 1 1 auto; margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-70); }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 34px;
}


.plate { padding: 0; }
.plate__rows { display: grid; gap: 1px; background: var(--divider); }
.plate__row { padding: 20px 22px; background: var(--bg); }

.plate__row--num {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
}

.plate__num {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    /* 15px is normal-size text however heavy it is -- WCAG's "large" starts at
       18.66px bold -- so this is held to 4.5:1 and --accent was 3.26:1. */
    color: var(--accent-text);
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; background: var(--divider); }
.stat { padding: 14px 16px; background: var(--bg); }
.stat strong { display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 600; line-height: 1; }
.stat span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-70); }

/* String values, not counts: 30px breaks a version across two lines. */
.stat--text strong { font-size: 17px; line-height: 1.2; white-space: nowrap; text-transform: uppercase; }

.band .stats { background: color-mix(in srgb, #f2f2f3 18%, transparent); }
.band .stat { background: var(--band); }
.band .stat span { color: var(--band-dim); }

/* A .bp on the band frames but does not fill; this gives it a surface. */
/* Sized to its content and pinned right, so the row is not adrift in a wide box. */
.band-panel { background: color-mix(in srgb, #f2f2f3 7%, var(--band)); border-color: var(--band-line); width: fit-content; justify-self: end; }
/* Cells repaint the panel so only the 1px gaps read as hairlines. */
.band-panel .stat { background: color-mix(in srgb, #f2f2f3 7%, var(--band)); }
/* Columns hug their content; the grid too, or its background fills the rest. */
.band-panel .stats { grid-template-columns: repeat(3, auto); justify-content: start; width: fit-content; }
/* One size across all three values. */
.band-panel .stat strong { font-size: 20px; }




.msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--divider);
    border-left-width: 3px;
    font-size: 14px;
}

.msg svg { flex: 0 0 auto; margin-top: 2px; }
.msg--error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.msg--warn  { border-color: color-mix(in srgb, var(--warn) 45%, transparent); border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.msg--ok    { border-color: color-mix(in srgb, var(--ok) 45%, transparent); border-left-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.msg--info  { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); }

.msg--note {
    align-items: center;
    padding: 9px 14px;
    border-color: var(--note-line);
    border-left-color: var(--note-line);
    background: var(--note-soft);
    color: var(--text-70);
    font-size: 13.5px;
}
.msg--note svg { margin-top: 0; color: color-mix(in srgb, var(--warn) 70%, transparent); }
.msg a { color: inherit; text-decoration: underline; }




.field { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 160px; }

.field > span:first-child,
.field-label {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-70);
}

.field small { font-size: 12.5px; color: var(--text-70); max-width: 62ch; }

.field small.is-warn { color: var(--warn); }
.field code { color: var(--accent-text); }

.field-row { display: flex; gap: 18px; flex-wrap: wrap; width: 100%; }
.field-row .field { flex: 1 1 180px; width: auto; }


.form input[type="text"],
.form input[type="number"],
.form input[type="url"],
.form input[type="email"],
.form input[type="search"],

.form input[type="password"],
.form select,
.form textarea,
input.input, select.input, textarea.input {
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    caret-color: var(--accent);
    background: transparent;
    border: 1px solid var(--divider);
    border-radius: 0;
}

.form textarea, textarea.input { min-height: 7em; resize: vertical; }

.form input:hover, .form select:hover, .form textarea:hover,
input.input:hover, select.input:hover, textarea.input:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }

.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible,
input.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.form input.invalid, .form textarea.invalid, .form select.invalid { border-color: var(--danger); }

.validation-message { color: var(--danger); font-size: 12.5px; }
.validation-errors { color: var(--danger); font-size: 13px; margin: 0 0 10px; padding-inline-start: 18px; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; }

.checks { display: flex; gap: 14px; flex-wrap: wrap; }
.checks label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }



.search { position: relative; flex: 0 1 340px; min-width: 220px; }
.search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-55); pointer-events: none; z-index: 1; }
.search input[type="search"],
.search input[type="text"] { padding-left: 36px; }


.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.search--clearable input[type="search"] { padding-right: 36px; }

.search__clear {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-55);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.search__clear:hover { color: var(--text); border-color: var(--divider); }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--divider); }
.seg > * {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-70);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.seg > * + * { border-left: 1px solid var(--divider); }
.seg > *:hover { background: var(--accent-soft); color: var(--accent-soft-text); }
.seg > .is-active { background: var(--accent-fill); color: var(--on-accent); }
.seg > .is-active:hover { background: var(--accent-fill); color: var(--on-accent); }





.table-wrap { overflow-x: auto; width: 100%; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }

.table th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-70);
    white-space: nowrap;
}

.table td { padding: 14px 16px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.table tbody tr { transition: background 0.16s ease; }
.table tbody tr:hover { background: var(--accent-soft); }
.table tbody tr:last-child td { border-bottom: 0; }

.table a { font-family: var(--font-heading); font-size: 19px; font-weight: 600; color: var(--accent-text); }
.table a:hover { color: var(--accent-800); }
.table__sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-70); margin-top: 2px; }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }

.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    border-top: 1px solid var(--divider);
    font-size: 13px;
    color: var(--text-70);
}

.pager { display: flex; align-items: center; gap: 6px; }
.pager > * {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--divider);
    background: transparent;
    color: var(--text-70);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
}

.pager > *:hover { background: var(--accent-soft); color: var(--accent-soft-text); }
.pager > .is-active { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.pager > .is-disabled { opacity: 0.4; pointer-events: none; }

.dtable { display: grid; margin: 0; }
.dtable > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); border-bottom: 1px solid var(--divider); }
.dtable > div:last-child { border-bottom: 0; }
.dtable dt {
    padding: 14px 18px;
    border-right: 1px solid var(--divider);
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-70);
}
.dtable dd { margin: 0; padding: 14px 18px; font-family: var(--font-mono); font-size: 13.5px; }

@media (max-width: 640px) {
    .dtable > div { grid-template-columns: minmax(0, 1fr); }
    .dtable dt { border-right: 0; padding-bottom: 0; }
}




@keyframes omRise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes omFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes omWipe  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes omDrift { from { background-position: 0 0, 0 0; } to { background-position: 60px 60px, 60px 60px; } }
@keyframes omSweep { 0% { transform: translateX(-30%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }
@keyframes omPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes omDash  { to { stroke-dashoffset: -240; } }
@keyframes omBar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes omTick  { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rise { animation: omRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fade { animation: omFade 0.6s ease-out both; }

.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.28s; }
.d4 { animation-delay: 0.38s; }
.d5 { animation-delay: 0.48s; }
.d6 { animation-delay: 0.58s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
}




.blazor-error-boundary {
    padding: 16px;
    border: 1px solid var(--danger);
    border-left-width: 3px;
    background: var(--danger-soft);
    color: var(--danger);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px var(--gutter);
    background: var(--warn-soft);
    color: var(--warn);
    border-top: 1px solid var(--warn);
    font-size: 14px;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }