/* Account and order pages inside the website's own frame. site.css is the
   website's stylesheet, unchanged; this adds only what these pages need. */
.account-hero {padding:clamp(34px,5vw,56px) 0 clamp(16px,2vw,22px);}
.account-hero .container {max-width:none;gap:14px;}
.account-hero h1 {font-size:clamp(2rem,1.3rem + 2.4vw,3rem);}
/* Air under the title. It used to be 8px here and 20px below, so every page's
   heading and trail sat welded to the top of the first panel. */
.account-section {padding:clamp(26px,3vw,34px) 0 clamp(56px,8vw,96px);}
/* The trail, with a mark for home and a chevron between the steps, so it reads
   as a path rather than as three words and two slashes. */
.crumbs {align-items:center;}
.crumbs svg {flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.crumbs > a,.crumbs > span {display:inline-flex;align-items:center;gap:6px;}
.crumbs a:hover {text-decoration:underline;}
/* Centred, because a max-width with no automatic side margins leaves the
   panel pinned to the left of the container: the sign-in page sat off to one
   side of the window until 2026-09-19. */
.signed-out .panel {max-width:640px;margin-inline:auto;}
.signed-out .order-grid .panel {max-width:none;}
/* The account menu is a column beside the content rather than a row of pill
   buttons above it. Five destinations that each open onto their own sections,
   which a row of pills stops describing as soon as one of them is open. It
   stays inside the website's own frame, header and footer and all, because a
   customer's account is part of the site rather than a second application. */
.account-layout {display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:32px;align-items:start;}
.account-menu {display:flex;flex-direction:column;gap:2px;position:sticky;top:24px;}
.account-menu a,.account-menu button {display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--ink-2);font:inherit;font-size:15px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;}
.account-menu a:hover,.account-menu button:hover {background:var(--tint);color:var(--ink);}
.account-menu a[aria-current] {background:var(--accent-soft);color:var(--accent-text);}
.account-icon {flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.account-menu .sign-out {margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);}
.account-body {min-width:0;}
@media(max-width:860px) {.account-layout {grid-template-columns:1fr;gap:20px;}.account-menu {position:static;flex-direction:row;flex-wrap:wrap;gap:6px;}.account-menu a,.account-menu button {width:auto;}.account-menu .sign-out {margin:0;border-top:0;padding-top:0;}}
.link-button {font:inherit;font-size:15px;background:none;border:0;padding:8px 4px;color:var(--ink-2);text-decoration:underline;cursor:pointer;}
.link-button:hover {color:var(--accent-text);}
.preview-note {font-size:14px;color:var(--warn);background:var(--warn-soft);padding:10px 14px;border-radius:10px;margin-bottom:24px;}
.panel {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-bottom:24px;box-shadow:var(--shadow);min-width:0;}
.panel h2 {font-size:1.35rem;letter-spacing:-.025em;line-height:1.3;margin-bottom:0;}
/* --- the rhythm inside a panel ---------------------------------------------
   A panel used to space itself by a bottom margin on each kind of child, which
   left every pair nobody had thought about touching: a note against the form
   under it, a table against its footnote, a list of rows against the buttons
   after it. Measured in a browser on 2026-09-19, six such pairs had no air at
   all. The distance is stated once, between blocks, and the elements
   themselves carry no bottom margin of their own.

   Rows are deliberately left out. A list of accounts, keys or messages is
   separated by a line, and 16px between each would read as a list of cards
   that had lost their borders. */
.panel > * + * {margin-top:16px;}
.panel > .account-row + .account-row,.panel > .key-row + .key-row,.panel > .message + .message {margin-top:0;}
/* A subheading opens a new part of a panel, so it takes more air than the
   blocks inside that part. */
.panel > h3 {margin-top:26px;}
.panel > .form-foot {margin-top:24px;}
/* A form inside a panel. The class selector for a stack comes earlier and is
   just as specific, so this names both to win: without the element the stack's
   own margin-top:0 stood and a form sat against the sentence above it. */
.panel > form.stack,.panel > form {margin-top:16px;}
/* And inside a disclosure, which holds panels of its own on the mailbox page. */
.staff-action > * + * {margin-top:16px;}
.narrow {max-width:680px;}
.intro {color:var(--ink-2);line-height:1.7;}
.actions {display:flex;flex-wrap:wrap;gap:12px;}
.stack {display:grid;gap:20px;}
.stack label {display:grid;gap:8px;font-size:15px;font-weight:600;}
input,select {font:inherit;font-size:16px;min-height:46px;padding:10px 12px;background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);width:100%;}
.field-help {font-size:14px;color:var(--ink-2);font-weight:400;line-height:1.6;}
.form-foot {display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;font-size:14px;}
.notice {border:1px solid var(--line-strong);padding:16px 20px;border-radius:12px;background:var(--accent-soft);margin:0 0 24px;display:block;}
.panel > .notice {margin:0;}
.notice.error {background:#fff0eb;border-color:#ebc1af;color:#832e1a;}
.badge {display:inline-block;border:1px solid #cbdcc9;border-radius:99px;background:var(--accent-soft);color:var(--accent-text);font-size:14px;padding:4px 10px;white-space:normal;}
/* The tab strip. It lived in admin.css, which only the staff panel loads, so
   on a customer's Support, Guides and Your tickets pages it rendered as three
   bare links run together with no space between them - and those tabs are the
   only way between those three pages. Found in a browser on 2026-09-19. The
   staff panel's own smaller shape still overrides this, because admin.css
   loads after this file. */
.filter-tabs {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.filter-tabs + .part-tabs {margin-top:-4px;}
.filter-tabs a {padding:7px 14px;border:1px solid var(--line-strong);border-radius:99px;background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:600;text-decoration:none;}
.filter-tabs a:hover {color:var(--ink);border-color:var(--ink-3);}
.filter-tabs a[aria-current] {background:var(--accent-soft);border-color:#cbdcc9;color:var(--accent-text);}
/* The strip sits above the panels rather than inside one. */
.panel .filter-tabs {margin-bottom:0;}
.portal-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
/* The plans, and anything else the account body holds directly under a line of
   its own text rather than inside a panel. */
.account-body > * + .plans {margin-top:20px;}
.panel-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.panel-heading h2 {margin:0;}
.account-row {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;overflow-wrap:anywhere;}
.account-row:last-child {border-bottom:0;}
.account-row small,.key-row small {display:block;font-size:14px;color:var(--ink-2);}
.order-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:28px;align-items:start;}
.order-grid .panel {margin:0;}
.order-grid .checks {margin:0;}
.panel > .checks {margin-top:16px;}
.facts {display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:0;}
.panel > .facts {margin-top:16px;}
.facts dt {color:var(--ink-2);}
.facts dd {margin:0;}
.status {display:inline-block;border-radius:99px;padding:3px 10px;font-size:14px;border:1px solid var(--line-strong);}
.key-row {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 16px;padding:14px 0;border-bottom:1px solid var(--line);}
.key-row .secret {margin:0;width:100%;}
.panel .stack {margin-top:0;}
.table-scroll {overflow-x:auto;}
/* The services table. The mark sits on the baseline of the plan name rather
   than in a column of its own: a column would be mostly empty and would read as
   a missing value on every service without a key. A fixed box so the row does
   not reflow while the image loads, and flex:none so a narrow table cannot
   squeeze it. */
.service-name {display:flex;align-items:center;gap:8px;font-weight:650;}
.service-name .mark {flex:none;display:block;width:20px;height:20px;border-radius:6px;}
.service-note {display:block;margin-top:3px;color:var(--ink-2);font-size:13px;font-weight:400;}
.panel table {width:100%;font-size:15px;text-align:left;border-collapse:collapse;}
.panel th,.panel td {padding:14px 12px;border-bottom:1px solid var(--line);}
.panel th {font-size:14px;color:var(--ink-2);font-weight:650;}
/* --- settings ----------------------------------------------------------------
   A settings page is a short form, not a scroll. The tabs choose the page and
   the strip under them chooses the part, and inside a part every row is the
   label on the left and the control on the right, so the eye runs down one
   column of names rather than down a ladder of boxes.

   The two columns come out of the markup as it already is: a label holds its
   own text, its control and its help, so making the label a grid puts the text
   in the first cell, the control in the second, and the help under the text.
   Nothing had to be restructured to align them. */
.part-tabs {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;padding:4px;background:var(--tint);border:1px solid var(--line);border-radius:12px;}
.part-tabs a {display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:600;}
.part-tabs a:hover {color:var(--ink);background:var(--surface);}
.part-tabs a[aria-current] {background:var(--surface);color:var(--accent-text);box-shadow:var(--shadow);}
.part-tabs .icon {width:17px;height:17px;}
.filter-tabs .icon {width:16px;height:16px;}
.settings .stack {gap:16px;}
.settings .stack > label {display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:6px 28px;align-items:start;font-weight:600;font-size:15px;}
.settings .stack > label > input,.settings .stack > label > select,.settings .stack > label > textarea,.settings .stack > label > .code-field {grid-column:2;grid-row:1;}
/* The help sits under its own control rather than under the label: under the
   label it decided the height of the row, so a long sentence left the field
   floating in a column of air. The eye reads the name on the left, the box on
   the right, and the explanation directly beneath the box it explains. */
.settings .stack > label > .field-help {grid-column:2;grid-row:2;font-weight:400;}
/* A tick is a tick: the box beside its words, not pushed to the far column. */
.settings .stack > label.check {display:flex;align-items:center;gap:10px;font-weight:400;}
.settings .stack > label.check > input {grid-column:auto;grid-row:auto;}
.settings .stack > h3 {margin-top:8px;}
/* Under a tablet the two columns are one, which is the form it always had. */
@media(max-width:820px) {.settings .stack > label {grid-template-columns:1fr;gap:8px;}.settings .stack > label > input,.settings .stack > label > select,.settings .stack > label > textarea,.settings .stack > label > .code-field {grid-column:1;grid-row:2;}.settings .stack > label > .field-help {grid-column:1;grid-row:3;}}

/* --- people ------------------------------------------------------------------
   The staff list, and one person's own page. A row is a link: the avatar, who
   they are, what they may do, and what state the account is in, with the whole
   row as the target rather than an Edit link at the end of it. The colour comes
   from the address, so a colleague keeps theirs when a name is corrected.

   Initials rather than a photograph: nothing here uploads one, and an avatar
   served from somewhere else would be the one thing on these pages loaded from
   another company's server. */
.people {list-style:none;margin:0;padding:0;}
.panel > .people {margin-top:10px;}
.person-row {display:flex;align-items:center;gap:16px;padding:14px 12px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid transparent;}
.person-row:hover {background:var(--tint);border-color:var(--line);}
.person-row + .person-row {margin-top:2px;}
.avatar {flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:.02em;color:#fff;}
.avatar.large {width:56px;height:56px;font-size:19px;}
.avatar[data-tone="1"] {background:#277953;}
.avatar[data-tone="2"] {background:#274d79;}
.avatar[data-tone="3"] {background:#452779;}
.avatar[data-tone="4"] {background:#42505e;}
.avatar[data-tone="5"] {background:#795727;}
.avatar[data-tone="6"] {background:#1f6564;}
.person-who {display:grid;min-width:0;flex:1;line-height:1.35;}
.person-who strong {overflow-wrap:anywhere;}
.person-who strong em {font-style:normal;font-weight:400;font-size:13px;color:var(--ink-3);}
.person-who small {color:var(--ink-2);font-size:14px;overflow-wrap:anywhere;}
.person-role {display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:14.5px;}
.person-owner {color:var(--accent-text);font-weight:650;}
.person-open {display:grid;place-items:center;color:var(--ink-3);}
.person-open svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.person-head {display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.person-head .person-who strong {font-size:1.2rem;}
.person-marks {display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}
.button.danger {border-color:#ebc1af;color:#832e1a;}
.button.danger:hover {background:#fff0eb;border-color:#d99a80;color:#832e1a;}
.panel-heading .button .icon {width:17px;height:17px;}
@media(max-width:620px) {.person-row {gap:12px;flex-wrap:wrap;}.person-role,.person-open {display:none;}.person-marks {margin-left:0;}}

/* --- the authenticator code -------------------------------------------------
   Six boxes, painted behind one input. The input is the only field, so it keeps
   one label and one name and a recovery code can still be typed into it; the
   boxes are spans that code.js fills, and they hide themselves the moment the
   value is not six digits or fewer. The caret is hidden and the box being typed
   into is ringed instead, because a caret cannot be lined up with a box across
   browsers and a ring says the same thing.

   Without the script the input is an ordinary field: the class adds the boxes
   only once code.js has put them there. */
.code-field {position:relative;display:block;}
.code-field.painted input {font-family:var(--mono);font-size:22px;letter-spacing:0;color:transparent;caret-color:transparent;text-shadow:none;height:64px;min-height:64px;background:transparent;border-color:transparent;padding:0;position:relative;z-index:2;width:100%;}
.code-field.painted input:focus-visible {outline:0;}
.code-field.painted.plain input {color:var(--ink);caret-color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);padding:10px 12px;font-size:18px;letter-spacing:.12em;}
.code-slots {position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none;}
.code-field.plain .code-slots {display:none;}
.code-slots i {display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-strong);border-radius:12px;font-family:var(--mono);font-size:24px;font-weight:650;font-style:normal;color:var(--ink);}
.code-slots i.at {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.code-field input:focus + .code-slots i {border-color:var(--line-strong);}
@media(max-width:420px) {.code-slots {gap:5px;}.code-slots i {font-size:20px;}}

.secret {display:block;overflow-wrap:anywhere;background:var(--tint);padding:18px;border:1px solid var(--line);border-radius:12px;margin:0;}
.panel > .secret {margin-top:16px;}
.recovery-codes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0;}
.panel > .recovery-codes {margin-top:16px;}
.recovery-codes li {padding:10px;background:var(--tint);border-radius:8px;overflow-wrap:anywhere;}
fieldset {border:1px solid var(--line);border-radius:12px;padding:16px;}
legend {font-size:14px;padding:0 6px;}
.stack .check {display:flex;align-items:center;font-weight:400;}
.check input {width:18px;height:18px;min-height:18px;}
@media(max-width:860px) {.order-grid,.portal-grid {grid-template-columns:1fr;gap:0;}.order-grid .panel {margin-bottom:24px;}.panel {padding:22px;}.recovery-codes {grid-template-columns:1fr;}.sign-out {margin-left:0;}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}* {animation:none!important;transition:none!important;}}
.admin-label {font-size:15px;font-weight:650;color:var(--ink-2);border-left:1px solid var(--line);padding-left:18px;}
.admin-header .header-actions form {margin:0;}
.admin-user {font-size:14px;color:var(--ink-2);}
.admin-footer {padding:24px 0;}
@media(max-width:560px) {.admin-user {display:none;}}
.key-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.provider-buttons {display:grid;gap:10px;}
.provider-buttons .button {width:100%;justify-content:center;}
/* The base .button is already inline-flex with a gap, so the mark needs no
   layout of its own - only a guard against a flex row shrinking it, and a
   fixed box so the row does not reflow while the image loads. Kept here rather
   than in site.css, which is a copy of the website's and is digest-compared
   against it. */
.provider-buttons .button img {flex:none;display:block;width:18px;height:18px;}
.divider {display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:14px;margin:0;}
.panel > .divider {margin-top:16px;}
.divider::before,.divider::after {content:"";flex:1;border-top:1px solid var(--line);}
.sign-in-instead {margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
.sign-in-instead summary {cursor:pointer;font-weight:600;}
.search {display:flex;flex-wrap:wrap;gap:12px;align-items:end;}
.search label {display:grid;gap:8px;flex:1;min-width:220px;font-size:15px;font-weight:600;}
.panel h3 {font-size:1.05rem;margin:0;}
.panel > h3 {margin-top:26px;}
.qr {display:block;width:220px;max-width:100%;height:auto;margin:0;border:1px solid var(--line);border-radius:12px;}
.panel > .qr {margin-top:16px;}
textarea {font:inherit;font-size:16px;min-height:140px;padding:10px 12px;background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);width:100%;resize:vertical;}
.message {background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:18px;}
.message.staff {background:var(--accent-soft);border-color:#cbdcc9;}
.message.internal {background:var(--warn-soft);border-color:#ecdcb3;}
/* --- a reply from Dashmox ------------------------------------------------------
   A post rather than a bubble. The mark, who answered and what they do here,
   the words, and their sign-off underneath; the accent runs down the left edge
   so a customer scanning a long ticket can see at a glance which messages are
   answers. The owner's is the same post with a darker edge, and that is the
   whole of it: it said "Answered by the owner of Dashmox" on a green label until
   the operator had that removed on 2026-09-20, and the header already carries
   the name and the role. */
.post {background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow);}
.post-head {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.post-head .mark {flex:none;width:34px;height:34px;}
.post-who {display:grid;line-height:1.3;}
.post-who strong {font-size:16px;}
.post-who small {color:var(--ink-2);font-size:13.5px;}
.post-head time {margin-left:auto;color:var(--ink-3);font-size:13.5px;}
.post-owner {border-left-color:var(--ink);}
.post-sign {margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14.5px;white-space:pre-wrap;line-height:1.6;}
.message + .post,.post + .message,.post + .panel {margin-top:18px;}
@media(max-width:560px) {.post-head time {margin-left:0;width:100%;}}

/* The reply box after the last message, which sat 14px under it. */
.message + .panel {margin-top:24px;}
.message header {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:14px;color:var(--ink-2);}
.message-body {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;}
.ticket-status {display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.ticket-status small {color:var(--ink-2);}
.ticket-layout {display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;}
.ticket-subject {font-size:1.35rem;margin:0;overflow-wrap:anywhere;}
.panel > .ticket-subject {margin-top:16px;}
.status-ticket-open {background:var(--warn-soft);color:var(--warn);border-color:#ecdcb3;}
.status-ticket-awaiting_customer {background:var(--accent-soft);color:var(--accent-text);border-color:#cbdcc9;}
.status-ticket-closed {background:var(--tint);color:var(--ink-2);}
.check input[type=radio] {margin-right:8px;}
@media(max-width:860px) {.ticket-layout {grid-template-columns:1fr;}}
.upgrade {padding-top:18px;border-top:1px solid var(--line);}
.panel > .upgrade {margin-top:16px;}
/* Inside the offer, which is a block of its own within the panel. */
.upgrade > * + * {margin-top:16px;}
.upgrade h3 {font-size:1.05rem;margin-bottom:6px;}
.upgrade .checks {margin:10px 0 18px;}
.server-row {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;width:100%;padding:8px 0 0 14px;border-left:2px solid var(--line);font-size:15px;}
.server-row small {display:block;color:var(--ink-2);font-size:13px;}

/* --- figures and state ------------------------------------------------------
   Two things that made these pages read as a form rather than as a ledger.

   Money was set in proportional figures, so a column of amounts did not line
   up under itself: the only font-variant-numeric in the whole product was the
   website's countdown. Every currency cell and every headline number is
   tabular now, and numeric columns sit right so the units align.

   And state carried almost no information. The labels distinguish six
   subscription states in words - Waiting for payment, Active, Payment problem,
   Cancelled, Ended, Not completed - plus licences, payments and tickets, while
   the stylesheet had three treatments between them. Everything that was not
   active or pending fell through to a bare outline, so a failed licence looked
   like a queued one, and reports.html borrowed status-suspended to mean
   "Failing" until now. Four families, by what the state means to somebody
   reading it rather than by which table it came from, and each keeps its word:
   colour is never the only signal. */
.num {text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
th.num {text-align:right;}
.stat strong,.facts dd,.plan-row span:last-child {font-variant-numeric:tabular-nums;}

/* Done, and nothing to do. */
.status-active,.status-issued,.status-completed,.status-paid {background:var(--accent-soft);color:var(--accent-text);border-color:#cbdcc9;}
/* Underway, and expected to resolve on its own. */
.status-pending,.status-queued,.status-uncertain,.status-open,.status-awaiting_customer {background:var(--warn-soft);color:var(--warn);border-color:#ecdcb3;}
/* Wrong, and wants a person. Distinct from waiting, which it was not before.
   overdue and disabled are derived in Go rather than stored, so they are not
   in any CHECK constraint and nothing but this line will remind anybody. */
.status-suspended,.status-failed,.status-reversed,.status-overdue,.status-disabled {background:#fff0eb;color:#832e1a;border-color:#ebc1af;}
/* Over. Not a fault, and not to be read as one. */
.status-cancelled,.status-expired,.status-abandoned,.status-refunded,.status-closed {background:var(--tint);color:var(--ink-3);border-color:var(--line-strong);}
/* Money outside a table. Invoices and licence keys are listed as flex rows
   rather than cells, so .num never reaches them, and an invoice list whose
   amounts do not align is the same fault in a different element. */
.account-row span:last-child,.key-row span:last-child {font-variant-numeric:tabular-nums;}

/* The guides page: a search box, and categories drawn by the server.

   [hidden] is load-bearing and needs the !important. The script narrows the
   list by setting el.hidden on a guide, and .account-row above sets
   display:flex - a class selector beats the attribute selector, so without
   this the attribute is set, the element stays visible, and the search appears
   to match everything. That failure is invisible: no error, no empty state,
   just a filter that quietly does nothing. */
[hidden] {display:none !important;}
.guide-search {display:grid;gap:8px;font-size:15px;font-weight:600;}
.guide-search input {font-weight:400;}
.guide-group .badge {font-weight:400;}