/* =============================================================================
   REJESTR — design system for the phone-number register
   =============================================================================

   Loaded after Bootstrap, so it restyles Bootstrap's own class names rather
   than asking every view to adopt new ones. That is what lets the admin views
   inherit this world without being rewritten one by one.

   Two rules govern everything here:

   1. Hairlines, not shadows. This is a reference work; it is ruled like one.
      Elevation is reserved for things that genuinely float (the sticky search).
   2. Colour never carries meaning alone. One of the three domains ships a red
      brand colour, so a danger verdict that spoke only in red would be
      invisible there. Every verdict states its word, and the meter draws its
      own hatching.

   Per-domain accent tokens are set inline by the layout from config/domains.php.
   The verdict scale below is deliberately NOT derived from them: it must mean
   the same thing on all three sites.
   ========================================================================== */

:root {
    /* Ink ------------------------------------------------------------------ */
    --ink-900: #0b0d10;
    --ink-700: #1b1f26;
    --ink-600: #39404b;
    --ink-500: #5a626e;
    --ink-400: #7b838f;

    /* Ground and rules ----------------------------------------------------- */
    --ground: #ffffff;
    --ground-sunk: #f5f6f8;
    --ground-ink: #0e1116;
    --rule: #dfe3e8;
    --rule-strong: #b9c0c9;

    /* Accent — overridden per domain by the layout. */
    --accent: #2563eb;
    --accent-ink: #1d4ed8;
    --accent-wash: rgba(37, 99, 235, 0.08);

    /* Verdict scale — fixed across all three domains, never themed.
       Danger is a deep oxblood rather than a bright red so it stays distinct
       from czyjnumer.eu's brand red sitting elsewhere on the same page. */
    --v-safe: #12683c;
    --v-safe-wash: #ecf6f0;
    --v-neutral: #565f6b;
    --v-neutral-wash: #f1f3f5;
    --v-caution: #8a5200;
    --v-caution-wash: #fdf4e6;
    --v-danger: #97122f;
    --v-danger-wash: #fbedf0;

    /* Type ----------------------------------------------------------------- */
    --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Rhythm — one scale, used everywhere. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4.5rem;

    --shell: 1180px;
}

/* =============================================================================
   Reset and base
   ========================================================================== */

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

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

body {
    font-family: var(--font-ui);
    background: var(--ground);
    color: var(--ink-700);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-ui);
    color: var(--ink-900);
    font-weight: 700;
    letter-spacing: -0.019em;
    line-height: 1.14;
}

a {
    color: var(--accent-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

a:hover { color: var(--ink-900); }

/* A focus ring that survives on both light and sunk grounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

.container { max-width: var(--shell); }

/* =============================================================================
   The register's voice: mono labels and tabular numerals
   ========================================================================== */

/* Small tracked caps. The single most identifying mark of this world — it sits
   above modules, beside data, and inside the verdict plate. */
.reg-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.reg-label--ink { color: var(--ink-600); }
.reg-label--onDark { color: rgba(255, 255, 255, 0.62); }

/* Any figure the visitor might compare against another figure. */
.reg-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* The phone number itself, wherever it appears. */
.reg-phone {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* =============================================================================
   Module — the ruled block this whole system is built from
   ========================================================================== */

.reg-module {
    border: 1px solid var(--rule);
    background: var(--ground);
    border-radius: 0;
}

/* The tab that names a module, seated on its top rule. */
.reg-module__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--rule);
    background: var(--ground-sunk);
}

.reg-module__title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    margin: 0;
}

.reg-module__body { padding: var(--s4); }
.reg-module__body--flush { padding: 0; }

/* The page's own title block. Kept under its original class name because eight
   views already use it, and a rename would have been churn for nothing. */
.page-header {
    padding-bottom: var(--s4);
    margin-bottom: var(--s5);
    border-bottom: 2px solid var(--ink-900);
}

.page-header h1 {
    font-size: clamp(1.5rem, 3.6vw, 2rem);
    letter-spacing: -0.024em;
    margin-bottom: var(--s2);
}

.page-header p { color: var(--ink-500); margin-bottom: 0; max-width: 68ch; }

/* A heading that rules the full width, used between page sections. */
.reg-rule-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 2px solid var(--ink-900);
    margin-bottom: var(--s4);
}

.reg-rule-head h2,
.reg-rule-head h1 { margin: 0; font-size: 1.125rem; letter-spacing: -0.012em; }

/* =============================================================================
   Verdict — the signature component
   =============================================================================
   Leads the number page. Carries the answer the visitor came for at a scale
   they cannot miss, and states it in a word so the meaning survives without
   colour. */

.reg-verdict {
    border: 1px solid var(--rule);
    border-top: 3px solid var(--v-neutral);
    background: var(--ground);
}

.reg-verdict--safe { border-top-color: var(--v-safe); }
.reg-verdict--caution { border-top-color: var(--v-caution); }
.reg-verdict--danger { border-top-color: var(--v-danger); }

.reg-verdict__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0;
}

.reg-verdict__main { padding: var(--s5); }

.reg-verdict__aside {
    padding: var(--s5);
    border-left: 1px solid var(--rule);
    background: var(--ground-sunk);
}

.reg-verdict__number {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: clamp(1.75rem, 5.2vw, 2.75rem);
    letter-spacing: -0.03em;
    color: var(--ink-900);
    line-height: 1.05;
    margin: var(--s2) 0 0;
    word-break: break-word;
}

/* The word. Never rendered without it. */
.reg-verdict__word {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s4);
    padding: var(--s2) var(--s3);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    color: var(--v-neutral);
    background: var(--v-neutral-wash);
}

.reg-verdict--safe .reg-verdict__word { color: var(--v-safe); background: var(--v-safe-wash); }
.reg-verdict--caution .reg-verdict__word { color: var(--v-caution); background: var(--v-caution-wash); }
.reg-verdict--danger .reg-verdict__word { color: var(--v-danger); background: var(--v-danger-wash); }

.reg-verdict__gloss {
    margin: var(--s3) 0 0;
    color: var(--ink-500);
    font-size: 0.9375rem;
    max-width: 46ch;
}

/* Register facts: operator, type, dialling area. Definition pairs, ruled. */
.reg-facts { display: grid; gap: 0; margin: 0; }

.reg-facts__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule);
}

.reg-facts__row:last-child { border-bottom: 0; }

.reg-facts__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-900);
    text-align: right;
}

/* =============================================================================
   Meter — the vote distribution, drawn as a measured instrument
   =============================================================================
   Ten divisions, because a proportion the visitor can count beats a bar they
   have to estimate. Each segment carries its own hatching so the split is
   readable without colour. */

.reg-meter {
    position: relative;
    display: flex;
    height: 2.25rem;
    border: 1px solid var(--rule-strong);
    background: var(--ground-sunk);
    overflow: hidden;
}

.reg-meter__seg { position: relative; min-width: 0; }

.reg-meter__seg--pos {
    background-color: var(--v-safe-wash);
    background-image: repeating-linear-gradient(
        45deg, transparent 0 5px, rgba(18, 104, 60, 0.34) 5px 7px
    );
}

.reg-meter__seg--neu {
    background-color: var(--v-neutral-wash);
    background-image: repeating-linear-gradient(
        90deg, transparent 0 5px, rgba(86, 95, 107, 0.26) 5px 6px
    );
}

.reg-meter__seg--neg {
    background-color: var(--v-danger-wash);
    background-image: repeating-linear-gradient(
        -45deg, transparent 0 5px, rgba(151, 18, 47, 0.38) 5px 7px
    );
}

/* The graticule: ten divisions ruled over the whole meter. */
.reg-meter__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        90deg, transparent 0 calc(10% - 1px), var(--rule-strong) calc(10% - 1px), var(--rule-strong) 10%
    );
    opacity: 0.55;
}

.reg-meter-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: var(--s3);
}

.reg-meter-key__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.8125rem;
    color: var(--ink-500);
}

.reg-meter-key__swatch {
    width: 0.875rem;
    height: 0.875rem;
    border: 1px solid var(--rule-strong);
    flex: none;
}

.reg-meter-key__swatch--pos {
    background-color: var(--v-safe-wash);
    background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(18, 104, 60, 0.4) 3px 5px);
}

.reg-meter-key__swatch--neu {
    background-color: var(--v-neutral-wash);
    background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(86, 95, 107, 0.3) 3px 4px);
}

.reg-meter-key__swatch--neg {
    background-color: var(--v-danger-wash);
    background-image: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(151, 18, 47, 0.44) 3px 5px);
}

/* =============================================================================
   Verdict chip — the compact form, for tables and lists
   ========================================================================== */

.reg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.4375rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid currentColor;
    color: var(--v-neutral);
    background: var(--v-neutral-wash);
}

.reg-chip--safe { color: var(--v-safe); background: var(--v-safe-wash); }
.reg-chip--caution { color: var(--v-caution); background: var(--v-caution-wash); }
.reg-chip--danger { color: var(--v-danger); background: var(--v-danger-wash); }

/* A dot that repeats the verdict as a shape, for the densest rows. */
.reg-chip__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: none;
    background: currentColor;
}

.reg-chip--safe .reg-chip__dot { border-radius: 50%; }
.reg-chip--caution .reg-chip__dot { transform: rotate(45deg); }
.reg-chip--danger .reg-chip__dot { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* =============================================================================
   Search — the primary action on every surface
   ========================================================================== */

.reg-search { display: flex; width: 100%; border: 2px solid var(--ink-900); background: var(--ground); }

.reg-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: var(--s4);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.125rem;
    letter-spacing: 0.01em;
    color: var(--ink-900);
    background: transparent;
}

.reg-search__input::placeholder { color: var(--ink-400); letter-spacing: 0; }
.reg-search__input:focus { outline: none; }
.reg-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.reg-search__btn {
    flex: none;
    border: 0;
    padding: 0 var(--s5);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--ink-900);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.reg-search__btn:hover { background: var(--accent-ink); }

.reg-search--lg .reg-search__input { padding: var(--s5) var(--s4); font-size: clamp(1.125rem, 3.2vw, 1.5rem); }

/* =============================================================================
   Hero — one headline, one field, no decoration
   ========================================================================== */

.reg-hero { padding: var(--s8) 0 var(--s7); border-bottom: 1px solid var(--rule); }

.reg-hero__title {
    font-size: clamp(2.25rem, 6.4vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.033em;
    line-height: 1.02;
    margin: var(--s4) 0 var(--s4);
    max-width: 16ch;
}

.reg-hero__lead {
    font-size: 1.0625rem;
    color: var(--ink-500);
    max-width: 54ch;
    margin: 0 0 var(--s5);
}

/* The register's own scale, stated as fact rather than as a marketing claim. */
.reg-ledger {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: var(--s5);
    border-top: 1px solid var(--rule);
}

.reg-ledger__item {
    padding: var(--s4) var(--s5) var(--s4) 0;
    margin-right: var(--s5);
    border-right: 1px solid var(--rule);
}

.reg-ledger__item:last-child { border-right: 0; margin-right: 0; }

.reg-ledger__value {
    display: block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    margin-bottom: 0.25rem;
}

/* =============================================================================
   Dense table — the catalogue's working surface
   ========================================================================== */

.reg-table { width: 100%; margin: 0; border-collapse: collapse; }

.reg-table th {
    padding: var(--s3) var(--s4);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-400);
    text-align: left;
    border-bottom: 1px solid var(--rule-strong);
    background: var(--ground-sunk);
    white-space: nowrap;
}

.reg-table td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
    font-size: 0.9375rem;
}

.reg-table tbody tr:last-child td { border-bottom: 0; }
.reg-table tbody tr:hover { background: var(--ground-sunk); }
.reg-table .reg-phone { font-size: 1rem; }
.reg-table__num { text-align: right; }

/* Compact rows used in the homepage modules. */
.reg-list { list-style: none; margin: 0; padding: 0; }

.reg-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--rule);
}

.reg-list__item:last-child { border-bottom: 0; }
.reg-list__item:hover { background: var(--ground-sunk); }

/* =============================================================================
   Header and footer
   ========================================================================== */

.reg-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
}

.reg-header__bar {
    display: flex;
    align-items: center;
    gap: var(--s5);
    min-height: 3.75rem;
}

.reg-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    text-decoration: none;
    white-space: nowrap;
}

.reg-brand:hover { color: var(--ink-900); }

/* The wordmark's only flourish: an accent rule under the mark, which is where
   each domain's brand colour lives on the page. */
.reg-brand__mark {
    display: inline-block;
    width: 0.5rem;
    height: 1.125rem;
    background: var(--accent);
    flex: none;
}

.reg-nav { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }

.reg-nav__link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-600);
    text-decoration: none;
    padding: 0.375rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.reg-nav__link:hover { color: var(--ink-900); border-bottom-color: var(--rule-strong); }
.reg-nav__link.is-active { color: var(--ink-900); border-bottom-color: var(--accent); }

.reg-footer {
    margin-top: var(--s8);
    padding: var(--s7) 0 var(--s5);
    background: var(--ground-ink);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
}

.reg-footer h2 { color: #fff; font-size: 0.6875rem; }
.reg-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.reg-footer a:hover { color: #fff; text-decoration: underline; }

.reg-footer__rule { border-top: 1px solid rgba(255, 255, 255, 0.14); margin: var(--s5) 0; }

/* =============================================================================
   Bootstrap, restyled in place
   =============================================================================
   Everything below exists so views that were never touched — the whole admin
   area among them — arrive in this world anyway. */

.card {
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    background: var(--ground);
}

.card-header {
    background: var(--ground-sunk);
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding: var(--s3) var(--s4);
    font-weight: 700;
    color: var(--ink-900);
}

.card-body { padding: var(--s4); }
.card-footer { background: var(--ground-sunk); border-top: 1px solid var(--rule); border-radius: 0; }

.btn {
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.005em;
    padding: 0.5rem 1rem;
    border-width: 1px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background-color: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn-outline-primary { color: var(--ink-900); border-color: var(--rule-strong); background: transparent; }
.btn-outline-primary:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

.btn-secondary { background-color: var(--ink-600); border-color: var(--ink-600); }
.btn-success { background-color: var(--v-safe); border-color: var(--v-safe); }
.btn-danger { background-color: var(--v-danger); border-color: var(--v-danger); }
.btn-warning { background-color: var(--v-caution); border-color: var(--v-caution); color: #fff; }
.btn-light { background-color: var(--ground-sunk); border-color: var(--rule); color: var(--ink-700); }

.btn-sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; }

.form-control,
.form-select {
    border-radius: 0;
    border: 1px solid var(--rule-strong);
    padding: 0.5625rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--ink-900);
    background-color: var(--ground);
}

.form-control:focus,
.form-select:focus { border-color: var(--accent); box-shadow: none; }
.form-control::placeholder { color: var(--ink-400); }
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--ink-700); margin-bottom: 0.375rem; }

.input-group > .form-control,
.input-group > .btn { border-radius: 0; }

.table { color: var(--ink-700); margin-bottom: 0; }

.table > thead > tr > th {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-400);
    background: var(--ground-sunk);
    border-bottom: 1px solid var(--rule-strong);
    padding: var(--s3) var(--s4);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > td { background: var(--ground-sunk); }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }

.badge {
    border-radius: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25em 0.5em;
}

.bg-primary { background-color: var(--ink-900) !important; }
.bg-success { background-color: var(--v-safe) !important; }
.bg-danger { background-color: var(--v-danger) !important; }
.bg-warning { background-color: var(--v-caution) !important; color: #fff !important; }
.bg-secondary { background-color: var(--v-neutral) !important; }
.bg-light { background-color: var(--ground-sunk) !important; }
.text-primary { color: var(--accent-ink) !important; }
.text-success { color: var(--v-safe) !important; }
.text-danger { color: var(--v-danger) !important; }
.text-warning { color: var(--v-caution) !important; }
.text-muted { color: var(--ink-400) !important; }

/* Ruled on all four sides in its own colour. An accent stripe down one edge is
   the house style of every generated admin theme, and this system already says
   "notice" with a tinted ground and a full-weight rule. */
.alert {
    border-radius: 0;
    border: 1px solid currentColor;
    padding: var(--s3) var(--s4);
    font-size: 0.9375rem;
}

.alert-success { background: var(--v-safe-wash); color: var(--v-safe); }
.alert-danger { background: var(--v-danger-wash); color: var(--v-danger); }
.alert-warning { background: var(--v-caution-wash); color: var(--v-caution); }
.alert-info { background: var(--ground-sunk); color: var(--ink-600); }

.pagination { --bs-pagination-border-radius: 0; gap: 0; }

.page-link {
    border-radius: 0;
    border-color: var(--rule);
    color: var(--ink-700);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    padding: 0.4375rem 0.75rem;
}

.page-link:hover { background: var(--ground-sunk); color: var(--ink-900); }
.page-item.active .page-link { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.page-item.disabled .page-link { color: var(--ink-400); background: var(--ground-sunk); }

.breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--s4);
    --bs-breadcrumb-divider: '/';
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--rule-strong); }
.breadcrumb a { color: var(--ink-400); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink-900); }
.breadcrumb-item.active { color: var(--ink-700); }

.dropdown-menu { border-radius: 0; border-color: var(--rule); box-shadow: 0 8px 24px rgba(11, 13, 16, 0.1); }
.dropdown-item:active { background: var(--ink-900); }

.list-group-item { border-color: var(--rule); border-radius: 0 !important; background: transparent; }
.progress { border-radius: 0; background: var(--ground-sunk); }
.progress-bar { background-color: var(--ink-900); }
.nav-tabs { border-bottom-color: var(--rule); }
.nav-tabs .nav-link { border-radius: 0; color: var(--ink-500); }
.nav-tabs .nav-link.active { color: var(--ink-900); border-color: var(--rule) var(--rule) var(--ground); }

/* Admin section switcher. */
.nav-pills { gap: 0; }

.nav-pills .nav-link {
    border-radius: 0;
    color: var(--ink-600);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.nav-pills .nav-link:hover { background: var(--ground-sunk); color: var(--ink-900); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ink-900);
    color: #fff;
    border-radius: 0;
}

.btn-group > .btn { border-radius: 0; }

/* The dashboard's big counters read as instrument readouts. */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ink-900);
}

.display-6 { font-size: clamp(1.75rem, 4vw, 2.25rem); }

/* Bootstrap's radii, applied by utility classes across the admin views. */
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-lg, .rounded-circle { border-radius: 0 !important; }
.rounded-circle { border-radius: 50% !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

.form-check-input { border-radius: 0; border-color: var(--rule-strong); }
.form-check-input:checked { background-color: var(--ink-900); border-color: var(--ink-900); }

.modal-content { border-radius: 0; border-color: var(--rule); }
.modal-header, .modal-footer { border-color: var(--rule); }

.border-warning { border-color: var(--v-caution) !important; }
.border-danger { border-color: var(--v-danger) !important; }
.border-success { border-color: var(--v-safe) !important; }
.bg-info { background-color: var(--ink-500) !important; }
.bg-dark { background-color: var(--ground-ink) !important; }

/* Phone numbers written inside a comment link to their own page. */
.comment-number-link {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--accent-ink);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* =============================================================================
   Utilities
   ========================================================================== */

.reg-stack > * + * { margin-top: var(--s5); }
.reg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.reg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.reg-prose { max-width: 68ch; }
.reg-prose h2 { margin-top: var(--s6); margin-bottom: var(--s3); font-size: 1.25rem; }
.reg-prose h3 { margin-top: var(--s5); margin-bottom: var(--s2); font-size: 1.0625rem; }
.reg-prose p { margin-bottom: var(--s4); }

/* =============================================================================
   Responsive — this site is read on a phone, from a Google result
   ========================================================================== */

@media (max-width: 991.98px) {
    .reg-verdict__grid { grid-template-columns: minmax(0, 1fr); }
    .reg-verdict__aside { border-left: 0; border-top: 1px solid var(--rule); }
    .reg-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    :root { --s7: 2rem; --s8: 2.75rem; }

    body { font-size: 0.9375rem; }

    .reg-hero { padding: var(--s7) 0 var(--s6); }
    .reg-hero__title { max-width: none; }

    .reg-verdict__main,
    .reg-verdict__aside { padding: var(--s4); }

    .reg-search__btn { padding: 0 var(--s4); font-size: 0.875rem; }
    .reg-search--lg .reg-search__input { padding: var(--s4) var(--s3); }

    .reg-grid-2 { grid-template-columns: minmax(0, 1fr); }

    .reg-ledger__item {
        padding: var(--s3) var(--s4) var(--s3) 0;
        margin-right: var(--s4);
    }

    .reg-table th,
    .reg-table td,
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: var(--s3); }

    /* Tap targets stay finger-sized even in the dense views. */
    .reg-list__item { padding: var(--s3); min-height: 3rem; }
    .reg-nav { gap: var(--s4); }
}

/* The three vote buttons are the page's primary action on a phone. Below this
   width they cannot sit side by side without becoming thumb-hostile, so they
   stack full width rather than wrapping two-and-one. */
@media (max-width: 33.75em) {
    .reg-vote { flex-direction: column; }
    .reg-vote form { width: 100%; flex: 1 1 auto; }
    .reg-vote .btn { padding: 0.6875rem 1rem; }
}

/* Wide tables scroll inside their own module rather than the page. */
.reg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .reg-header, .reg-footer, .reg-search__btn { display: none; }
    .reg-module, .reg-verdict { border-color: #000; }
}