/* The admin panel's only stylesheet, after docs/product/admin-theme.md: the product's template (an icon rail, a grouped
   sub-menu, a slim top bar, a title strip, white cards on a pale blue page, fields with the label inside them) on the
   shared tokens of tokens.css beside this file. Served as build output by
   MapStaticAssets under the policy's style-src 'self'; no page carries an inline style. Logical properties only. */

@import url("tokens.css");

/* Fonts, self-hosted (font-src 'self') from the Mini App's packages; licence in fonts/. */
@font-face {
    font-family: "Vazirmatn Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Vazirmatn Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
    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;
}

/* The card border: none in light, where the hover shadow does the lifting; a line in dark, where a shadow is invisible. */
:root {
    --card-line: transparent;
}

@media (prefers-color-scheme: dark) {
    :root {
        --card-line: var(--line);
    }
}

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

/* The root scales with the window on a desktop (10–20px) and is fixed on a phone ("Type"). */
html {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 2;
    color: var(--ink);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 992px) {
    html {
        font-size: clamp(10px, 0.34em + 0.5vw, 20px);
    }
}

body {
    margin: 0;
    min-block-size: 100vh;
    font-size: 0.85rem;
    font-weight: var(--weight-body);
    background: var(--bg);
}

/* An icon from the sprite (icons.svg): sized by the font, drawn in the text colour. */
.icon {
    flex: none;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Frame: top bar, rail, sub-menu, content ("Frame") ---------- */

.desk {
    display: grid;
    grid-template-columns: var(--rail-width) auto minmax(0, 1fr);
    grid-template-rows: var(--topbar-height) 1fr;
    min-block-size: 100vh;
}

.topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    block-size: var(--topbar-height);
    padding-inline: 0.75rem;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
}

.topbar .brand {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-inline-end: auto;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    color: var(--ink-strong);
    text-decoration: none;
}

.topbar .brand small {
    font-size: 0.74375rem;
    font-weight: var(--weight-body);
    color: var(--ink-muted);
}

/* The alert bell: a round icon button whose count sits on its corner, in pomegranate because it asks for attention. */
.topbar .bell {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    color: var(--ink-secondary);
    font-size: 1.3rem;
    text-decoration: none;
}

.topbar .bell:hover {
    background: var(--surface-sunken);
}

.topbar .bell .count {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    min-inline-size: 1.2rem;
    block-size: 1.2rem;
    padding-inline: 0.3rem;
    border-radius: var(--radius-pill);
    background: var(--pomegranate);
    color: var(--on-accent);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2rem;
    text-align: center;
}

.topbar .who {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.6rem 0.2rem 0.3rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    color: var(--ink);
}

.topbar .who:hover {
    background: var(--surface-sunken);
}

.avatar {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--lapis-tint);
    color: var(--ink-strong);
    font-size: 0.8rem;
    font-weight: var(--weight-medium);
}

.topbar form {
    margin: 0;
}

/* The rail: one tile per section, the active one tinted. A tile is a link to the section's first page; the
   section's sub-menu is the column beside the rail, which slides open when the section changes ("Motion"). */
.rail {
    position: sticky;
    inset-block-start: var(--topbar-height);
    grid-column: 1;
    block-size: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 0.5rem;
    background: var(--surface);
    border-inline-end: 1px solid var(--line);
}

.rail:has(+ .menu) {
    border-inline-end: 0;
}

.rail-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    block-size: 3.5rem;
    margin-block: 0.25rem;
    color: var(--ink-secondary);
    font-size: 0.74375rem;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
}

.rail-link .tile {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: var(--radius);
    font-size: 1.5rem;
    transition: transform 0.05s ease-in-out 0.01s, background-color 0.05s ease-in-out 0.01s;
}

.rail-link:active .tile,
button:active:not(:disabled),
.tiles > *:active {
    scale: 0.95;
}

.rail-link:hover .tile {
    transform: scale(1.1);
    background: color-mix(in srgb, var(--lapis) 10%, transparent);
    color: var(--lapis);
}

.rail-link.active {
    color: var(--lapis);
    font-weight: var(--weight-medium);
}

.rail-link.active .tile {
    background: color-mix(in srgb, var(--lapis) 10%, transparent);
}

@media (prefers-color-scheme: dark) {
    .rail-link.active .tile,
    .rail-link:hover .tile {
        background: var(--lapis-soft);
    }
}

/* The waiting count on the queues tile: the sum of the queues, the three heat colours of the pills below. */
.rail-link .tile .count {
    position: absolute;
    inset-block-start: -0.3rem;
    inset-inline-end: -0.3rem;
}

/* The sub-menu column: the active section's groups, a heading with a short dash before it and its entries under it. */
.menu {
    position: sticky;
    inset-block-start: var(--topbar-height);
    grid-column: 2;
    inline-size: var(--menu-width);
    block-size: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--surface);
    border-inline-end: 1px solid var(--line);
}

.menu .grp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    font-weight: var(--weight-medium);
    color: var(--ink);
}

.menu .grp::before {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1px;
    background: var(--ink-faint);
}

.menu .grp + .grp,
.menu a + .grp {
    margin-block-start: 0.5rem;
}

.menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.2rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: var(--radius);
    color: var(--ink-muted);
    text-decoration: none;
}

.menu a:hover {
    background: var(--surface-sunken);
}

.menu a.active {
    color: var(--lapis);
}

.menu a.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(50% - 0.5rem);
    inline-size: 2px;
    block-size: 1rem;
    border-radius: 1px;
    background: var(--lapis);
}

.menu a .sub-prefix {
    display: none;
}

.main {
    grid-column: 3;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
}

.desk.no-menu .main {
    grid-column: 2 / -1;
}

.content {
    flex: 1;
    padding: 1.5rem 0.75rem 3rem;
    min-inline-size: 0;
}

.content > * {
    max-inline-size: var(--content-max);
    margin-inline: auto;
}

/* The dashboard's mesh: three soft blobs over the page colour, nothing else. */
.content.dashboard {
    background-image:
        radial-gradient(44rem 26rem at 86% 0%, color-mix(in srgb, var(--surface) 90%, transparent) 0%, transparent 70%),
        radial-gradient(36rem 24rem at 8% 18%, color-mix(in srgb, var(--lapis) 4%, transparent) 0%, transparent 70%),
        radial-gradient(48rem 30rem at 56% 50%, color-mix(in srgb, var(--surface) 60%, transparent) 0%, transparent 70%);
}

/* The title strip: the page's h1, sticky under the top bar, full width, the text aligned with the container. A page
   with actions or a way back renders a .titlebar instead (TitleStrip.razor): a back link, the h1, and a .toolbar of
   pill buttons. */
.content > h1,
.content > .titlebar {
    position: sticky;
    inset-block-start: var(--topbar-height);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-inline-size: none;
    min-block-size: var(--titlebar-height);
    margin: -1.5rem -0.75rem 1.5rem;
    padding-block: 0.25rem;
    padding-inline: calc(max(0.75rem, (100% - var(--content-max)) / 2) + 0.75rem);
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    font-size: 1.105rem;
    font-weight: var(--weight-bold);
    line-height: 1.5;
    color: var(--ink-strong);
}

.titlebar > h1 {
    flex: 1;
    min-inline-size: 0;
    margin: 0;
    font: inherit;
}

.titlebar > .back {
    flex: none;
    font-size: 0.74375rem;
    font-weight: var(--weight-body);
    text-decoration: none;
}

.titlebar > .toolbar {
    display: flex;
    flex: none;
    gap: 0.5rem;
}

/* ---------- Phone and narrow windows: the rail is a bottom bar, the sub-menu a strip under the top bar ---------- */
@media (max-width: 991px) {
    .desk.menu-entering .menu {
        animation-name: appear;
    }

    .desk {
        display: block;
        padding-block-end: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
    }

    .rail {
        position: fixed;
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 30;
        flex-direction: row;
        justify-content: space-around;
        block-size: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
        padding-block: 0.2rem env(safe-area-inset-bottom, 0px);
        border-inline-end: 0;
        border-block-start: 1px solid var(--line);
    }

    .rail-link {
        block-size: auto;
        margin: 0;
        gap: 0;
        font-size: 0.68rem;
    }

    .rail-link .tile {
        inline-size: 2.1rem;
        block-size: 2.1rem;
        font-size: 1.3rem;
    }

    .menu {
        position: sticky;
        inset-block-start: var(--topbar-height);
        z-index: 20;
        display: flex;
        gap: 0.3rem;
        inline-size: auto;
        block-size: auto;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.5rem 0.75rem;
        border-inline-end: 0;
        border-block-end: 1px solid var(--line);
    }

    .menu .grp {
        display: none;
    }

    .menu a {
        flex: none;
        min-block-size: 2rem;
        padding: 0.1rem 0.75rem;
        border-radius: var(--radius-pill);
        background: var(--surface-sunken);
        font-size: 0.74375rem;
    }

    .menu a.active {
        background: var(--lapis-soft);
    }

    .menu a.active::before {
        display: none;
    }

    .menu a .sub-prefix {
        display: inline;
    }

    .topbar .who span:not(.avatar) {
        display: none;
    }

    .content {
        padding: 1rem 0.75rem 2rem;
    }

    .content > h1,
    .content > .titlebar {
        position: static;
        margin: -1rem -0.75rem 1rem;
        padding-inline: 0.75rem;
    }
}

/* ---------- Motion ("Motion") ----------
   The page's content rises in when a page loads or enhanced navigation swaps it (admin-motion.js sets .entering
   each time), and the sub-menu column slides open when it appears (.menu-entering). Everything else is a
   hover or focus response. Reduced motion turns all of it off. */

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.desk.entering .content > :not(h1):not(.titlebar) {
    animation: rise 0.6s ease-out both;
}

/* The sub-menu column slides open from the rail, then its entries fade in — only when the column appears, coming
   from a page without one (admin-motion.js sets .menu-entering then); while it is open, another section just swaps
   its entries. */
@keyframes expand {
    from {
        inline-size: 0;
        padding-inline: 0;
        opacity: 0;
    }

    to {
        inline-size: var(--menu-width);
        padding-inline: 0.5rem;
        opacity: 1;
    }
}

.desk.menu-entering .menu {
    overflow: hidden;
    animation: expand 0.2s ease-in-out both;
}

.desk.menu-entering .menu > * {
    animation: appear 0.5s ease-out 0.15s both;
}

.desk.entering .content > :nth-child(2),
.desk.entering .menu > :nth-child(2) {
    animation-delay: 0.03s;
}

.desk.entering .content > :nth-child(3),
.desk.entering .menu > :nth-child(3) {
    animation-delay: 0.06s;
}

.desk.entering .content > :nth-child(4),
.desk.entering .menu > :nth-child(4) {
    animation-delay: 0.09s;
}

.desk.entering .content > :nth-child(n + 5),
.desk.entering .menu > :nth-child(n + 5) {
    animation-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Text ---------- */

h2 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.105rem;
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    color: var(--ink-strong);
}

p {
    margin: 0 0 0.75rem;
}

.content > p {
    max-inline-size: min(80ch, var(--content-max));
}

.content > p:first-of-type {
    color: var(--ink-muted);
}

a {
    color: var(--lapis);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--lapis-hover);
}

@media (prefers-color-scheme: dark) {
    a {
        color: var(--lapis-hover);
    }
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    overflow-wrap: anywhere;
}

ul {
    margin: 0 0 0.75rem;
    padding-inline-start: 1.25rem;
}

small {
    font-size: 0.74375rem;
}

details summary {
    cursor: pointer;
    color: var(--lapis);
}

/* ---------- Cards: tables, definition lists, forms, panels ("Cards") ---------- */

table,
dl,
.content > form,
p.empty,
ul[role="status"],
.drawer,
.tiles > *,
.bar {
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    transition: box-shadow 0.2s;
}

table:hover,
dl:hover,
.content > form:hover,
.drawer:hover,
.tiles > *:hover {
    box-shadow: var(--shadow-card);
}

/* ---------- Tables ("Tables") ---------- */

table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-block-end: 1rem;
    padding: 0.75rem;
    border-color: var(--line);
    border-radius: var(--radius-lg);
    font-variant-numeric: tabular-nums;
}

th,
td {
    padding: 0.75rem 1rem;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--line);
}

th {
    font-weight: var(--weight-medium);
    white-space: nowrap;
    color: var(--ink-strong);
    background: var(--surface);
}

tbody tr:last-child td {
    border-block-end: 0;
}

tbody tr:hover td {
    background: var(--surface-sunken);
}

tbody tr td:first-child {
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
}

tbody tr td:last-child {
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
}

td small {
    color: var(--ink-muted);
}

table table {
    margin: 0.5rem 0 0;
    padding: 0.25rem;
}

table caption {
    padding-block-end: 0.25rem;
    text-align: start;
    font-size: 0.74375rem;
    color: var(--ink-muted);
}

/* A wide queue scrolls inside its card instead of pushing the page sideways. */
table {
    display: block;
    overflow-x: auto;
}

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    margin: 0 0 1rem;
    padding: 1rem;
    max-inline-size: 36rem;
}

dt {
    color: var(--ink-muted);
}

dd {
    margin: 0;
}

/* The dashboard tiles: a label over a figure, the icon tile at the end ("Dashboard tiles"). */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--gutter);
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.tiles > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.tiles .label {
    display: block;
    font-size: 0.74375rem;
}

/* The queue's age keeps its heat colour (.age-warm, .age-late); every other label is muted. */
.tiles .label:not(.age-warm):not(.age-late) {
    color: var(--ink-muted);
}

.tiles .figure {
    display: block;
    font-size: 1.2325rem;
    font-weight: var(--weight-bold);
    line-height: 1.5;
    color: var(--ink-strong);
}

.tiles .label a {
    text-decoration: none;
}

.tiles .tile-icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    background: var(--lapis-soft);
    color: var(--lapis);
    font-size: 1.2rem;
}

/* ---------- Charts ("Charts") ----------
   Server-rendered SVG from Components/Charts: no script, no chart library, no style attribute (style-src 'self'
   would drop it). The SVG carries classes only, coloured here with the tokens, so the dark scheme follows. */

/* A tile's sparkline, at the end of the tile where the icon tile would be. */
.sparkline {
    flex: none;
    inline-size: 5.5rem;
    block-size: 1.9rem;
    overflow: visible;
}

.spark-line {
    fill: none;
    stroke: var(--lapis);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.spark-area {
    fill: var(--lapis-soft);
}

/* The ring gauges: one card per ring, the ring at the start and its label and detail beside it. */
.rings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--gutter);
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.ring-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    block-size: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    transition: box-shadow 0.2s;
}

.ring-card:hover {
    box-shadow: var(--shadow-card);
}

.ring-card .label {
    display: block;
    font-size: 0.74375rem;
    color: var(--ink-muted);
}

.ring-card .label a {
    text-decoration: none;
}

.ring-card .detail {
    display: block;
    font-size: 0.74375rem;
    font-weight: var(--weight-medium);
    color: var(--ink-strong);
}

.ring {
    flex: none;
    inline-size: 4.25rem;
    block-size: 4.25rem;
}

.ring-track {
    fill: none;
    stroke: var(--surface-sunken);
    stroke-width: 3.5;
}

.ring-fill {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s;
}

.ring-text {
    font-size: 7.5px;
    font-weight: var(--weight-bold);
    fill: var(--ink-strong);
}

/* The three heat colours of the queue pills, and turquoise for a share that is good when high. */
.ring-calm .ring-fill {
    stroke: var(--lapis);
}

.ring-warm .ring-fill {
    stroke: var(--saffron);
}

.ring-late .ring-fill {
    stroke: var(--pomegranate);
}

.ring-good .ring-fill {
    stroke: var(--turquoise);
}

/* The range switch above the charts: the two ranges as chips, the current one filled. */
.chart-range {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.chart-range a {
    text-decoration: none;
    border-radius: var(--radius-pill);
}

.chart-range a.active {
    color: var(--on-accent);
    background: var(--lapis);
}

/* The chart cards, two to a row on a desktop. */
.charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--gutter);
    margin: 0 0 1rem;
}

.chart {
    margin: 0;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    transition: box-shadow 0.2s;
}

.chart:hover {
    box-shadow: var(--shadow-card);
}

.chart figcaption {
    margin: 0 0 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--ink-strong);
}

.chart svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
}

.chart-grid line {
    stroke: var(--line);
    stroke-width: 1;
}

/* The labels are Persian, so their direction is set here rather than left to inheritance: under RTL a label's
   start is its right edge, which is where the gridline labels sit (text-anchor="start" at the plot's start edge). */
.chart-axis {
    direction: rtl;
    font-size: 11px;
    fill: var(--ink-muted);
}

.chart-area {
    fill: var(--lapis-soft);
}

.chart-stroke {
    fill: none;
    stroke: var(--lapis);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart-dot {
    fill: var(--surface);
    stroke: var(--lapis);
    stroke-width: 2;
}

.chart-dot:hover {
    fill: var(--lapis);
}

/* Completed is money in; cancelled or refunded is money out. */
.bar-done,
.swatch-done {
    fill: var(--turquoise);
    background: var(--turquoise);
}

.bar-lost,
.swatch-lost {
    fill: var(--pomegranate);
    background: var(--pomegranate);
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.74375rem;
    color: var(--ink-secondary);
}

.swatch {
    display: inline-block;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    margin-inline-end: 0.25rem;
    border-radius: 0.2rem;
    vertical-align: -0.05em;
}

/* The figures as text, so nothing is colour-only: one small entry per day, flowing. */
.chart-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.68rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.chart-values li > span + span {
    margin-inline-start: 0.3rem;
    color: var(--ink-secondary);
}

/* Today's orders by status, under the tiles. */
.today-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.25rem 0 1rem;
}

/* ---------- Forms ("Fields") ---------- */

/* A form that is a page section: a card with its fields three to a row. A field is `.field` (label, control, hint);
   anything else in the form — a sentence, a fieldset, a checkbox label, a legacy label–input pair — takes the row. */
.content > form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--gutter);
    align-items: start;
    margin-block-end: 1rem;
    padding: 1rem;
}

.content > form > :not(.field) {
    grid-column: 1 / -1;
}

.content > form > label:not(:first-of-type) {
    margin-block-start: 0;
}

.content > form > button,
.content > form > .form-actions {
    justify-self: start;
    margin-block-start: 0.25rem;
}

.content > form > p {
    margin: 0;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.field {
    position: relative;
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
}

.field.wide,
.field:has(> textarea) {
    grid-column: 1 / -1;
}

.field > label {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline: 1rem;
    z-index: 1;
    overflow: hidden;
    font-size: 0.74375rem;
    font-weight: var(--weight-body);
    line-height: 1.5;
    color: var(--ink-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: inset-block-start 0.1s, font-size 0.1s;
}

.field > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field > select,
.field > textarea {
    inline-size: 100%;
    min-block-size: calc(3.5rem + 2px);
    padding: 2rem 1rem 0.625rem;
    line-height: 1.25;
}

.field > textarea {
    min-block-size: 6rem;
}

/* The floating behaviour, for a control with placeholder=" ": the label drops into the empty box and rises on focus. */
.field > label:has(+ input:placeholder-shown),
.field > label:has(+ textarea:placeholder-shown) {
    inset-block-start: 1.1rem;
    font-size: 0.85rem;
}

.field > label:has(+ input:placeholder-shown:focus),
.field > label:has(+ textarea:placeholder-shown:focus) {
    inset-block-start: 0.55rem;
    font-size: 0.74375rem;
}

.field > .hint,
.field > .number-words {
    padding-inline: 1rem;
    font-size: 0.74375rem;
    color: var(--ink-muted);
}

/* A record's own page, to edit or add it: the form is no card itself but holds the cards, the fields three to a row
   and the save card with «ذخیره» and «انصراف» under them. */
.content > form.record {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    padding: 0;
    background: none;
    border: 0;
}

.content > form.record:hover {
    box-shadow: none;
}

.record > .card {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    transition: box-shadow 0.2s;
}

.record > .card:hover {
    box-shadow: var(--shadow-card);
}

.record > .fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--gutter);
    align-items: start;
}

.record > .fields > :not(.field) {
    grid-column: 1 / -1;
}

.record > .fields > h2,
.record > .fields > p {
    margin: 0;
}

.record > .save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A set of checkboxes inside a form, such as the permissions of a staff group. */
fieldset {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

fieldset.checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.25rem 0.75rem;
}

fieldset legend {
    padding-inline: 0.25rem;
    font-weight: var(--weight-medium);
}

/* A wide form: the filters above a list, or a form holding a fieldset of checkboxes. */
.content > form.wide {
    max-inline-size: var(--content-max);
}

.content > form.filters {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    align-items: end;
}

.content > form.filters > button {
    margin-block-start: 0;
}

/* Decisions inside a row: each form one compact line, several forms stacked in the cell. */
td form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem;
    min-inline-size: 16rem;
}

td form + form {
    margin-block-start: 0.5rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px dashed var(--line);
}

/* A compact field: the label as a caption above a 2.75rem control (table cells and the filter bar). */
td label,
.bar label {
    display: grid;
    gap: 0.1rem;
    flex: 1 1 9rem;
    font-size: 0.74375rem;
    font-weight: var(--weight-body);
    color: var(--ink-muted);
}

td input:not([type="checkbox"]):not([type="hidden"]),
td select,
.bar input:not([type="checkbox"]):not([type="hidden"]),
.bar select {
    min-block-size: 2.75rem;
    inline-size: 100%;
}

label {
    font-weight: var(--weight-medium);
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--weight-body);
}

input,
select,
textarea,
button {
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    min-block-size: 2.75rem;
    padding: 0.375rem 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
input:disabled,
select:disabled,
textarea:disabled {
    background: var(--field);
    color: var(--ink-muted);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--pomegranate);
}

select {
    appearance: none;
    padding-inline-end: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A8F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4 -4l4 4'/><path d='M16 15l-4 4l-4 -4'/></svg>");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 1rem;
}

select:dir(ltr) {
    background-position: right 0.75rem center;
}

textarea {
    min-block-size: 5rem;
    resize: vertical;
}

/* A typed amount in words under its field, written by number-fields.js: ۱۰٬۰۰۰ → «ده هزار ریال». */
.number-words,
.hint {
    font-size: 0.74375rem;
    font-weight: var(--weight-body);
    color: var(--ink-muted);
}

.number-words:empty {
    display: none;
}

input[type="checkbox"],
input[type="radio"] {
    flex: none;
    appearance: none;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: background-color 0.15s, border-color 0.15s;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--lapis);
    border-color: var(--lapis);
}

input[type="checkbox"]:checked:not(.switch) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8rem;
}

input[type="radio"]:checked {
    box-shadow: inset 0 0 0 3px var(--surface);
}

/* The switch: an active flag as a pill track, green when on ("Switch and checkbox"). */
input[type="checkbox"].switch {
    position: relative;
    inline-size: 2.4rem;
    block-size: 1.3rem;
    border-radius: var(--radius-pill);
    background: var(--ink-faint);
    border-color: transparent;
}

input[type="checkbox"].switch::before {
    content: "";
    position: absolute;
    inset-block-start: 0.15rem;
    inset-inline-start: 0.15rem;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform 0.15s;
}

input[type="checkbox"].switch:checked {
    background: var(--turquoise);
    border-color: var(--turquoise);
}

input[type="checkbox"].switch:checked::before {
    transform: translateX(-1.1rem);
}

input[type="checkbox"].switch:checked:dir(ltr)::before {
    transform: translateX(1.1rem);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
    border-color: var(--focus-line);
    box-shadow: 0 0 0 0.32rem var(--ring);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.32rem var(--ring);
}

/* ---------- Buttons ("Buttons") ---------- */

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-block-size: 2.53rem;
    padding: 0.375rem 1rem;
    font-weight: var(--weight-semibold);
    line-height: 2;
    white-space: nowrap;
    color: var(--on-accent);
    background: var(--lapis);
    border: 1px solid var(--lapis);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

button:hover:not(:disabled),
.btn:hover {
    background: var(--lapis-hover);
    border-color: var(--lapis-hover);
}

button.secondary,
.btn.secondary {
    color: var(--ink-strong);
    background: var(--surface-sunken);
    border-color: var(--surface-sunken);
}

button.secondary:hover:not(:disabled),
.btn.secondary:hover {
    background: color-mix(in srgb, var(--surface-sunken) 92%, var(--ink-strong));
    border-color: color-mix(in srgb, var(--surface-sunken) 92%, var(--ink-strong));
}

button.danger {
    color: var(--on-accent);
    background: var(--pomegranate);
    border-color: var(--pomegranate);
}

button.danger:hover:not(:disabled) {
    background: var(--pomegranate-ink);
    border-color: var(--pomegranate-ink);
}

button.text {
    color: var(--ink-muted);
    background: transparent;
    border-color: transparent;
}

button.text:hover:not(:disabled) {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink-muted) 10%, transparent);
    border-color: transparent;
}

button.small {
    min-block-size: 2.1rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.74375rem;
    border-radius: var(--radius-sm);
}

button.pill,
.btn.pill {
    border-radius: var(--radius-pill);
}

button.wide,
.btn.wide {
    padding-inline: 3rem;
}

td button {
    min-block-size: 2.25rem;
    padding-inline: 0.75rem;
}

button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ---------- Banners, badges, chips, amounts ("Banners", "Chips, pills, badges") ---------- */

.error {
    color: var(--pomegranate-ink);
}

.success {
    color: var(--turquoise-ink);
}

p.error,
p.success,
.notice,
ul[role="status"] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-inline-size: var(--content-max);
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

p.error {
    background: var(--pomegranate-soft);
    border-color: color-mix(in srgb, var(--pomegranate) 25%, transparent);
}

p.success {
    background: var(--turquoise-soft);
    border-color: color-mix(in srgb, var(--turquoise) 25%, transparent);
}

.notice {
    color: var(--lapis);
    background: var(--lapis-soft);
    border-color: var(--lapis-tint);
}

ul[role="status"] {
    display: block;
    padding-inline-start: 2rem;
    border-color: var(--line);
}

p.error::before,
p.success::before,
.notice::before {
    content: "";
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.35rem;
    background: currentColor;
    mask: center / contain no-repeat;
}

p.error::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/><path d='M12 16h.01'/></svg>");
}

p.success::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/><path d='M9 12l2 2l4 -4'/></svg>");
}

.notice::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/><path d='M12 9h.01'/><path d='M11 12h1v4h1'/></svg>");
}

/* A status: soft fill and ink text of its tone. */
.badge {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius);
    font-size: 0.74375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--ink-strong);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
}

.badge.lapis {
    color: var(--lapis);
    background: var(--lapis-soft);
    border-color: transparent;
}

.badge.turquoise {
    color: var(--turquoise-ink);
    background: var(--turquoise-soft);
    border-color: transparent;
}

.badge.saffron {
    color: var(--saffron-ink);
    background: var(--saffron-soft);
    border-color: transparent;
}

.badge.pomegranate {
    color: var(--pomegranate-ink);
    background: var(--pomegranate-soft);
    border-color: transparent;
}

/* Risk flags (03 "Admin panel": flags use --pomegranate-soft). */
.chip {
    display: inline-block;
    margin: 0 0 2px;
    margin-inline-end: 4px;
    padding: 0 0.7rem;
    font-size: 0.74375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.5rem;
    white-space: nowrap;
    color: var(--pomegranate-ink);
    background: var(--pomegranate-soft);
    border-radius: var(--radius-pill);
}

.money-in {
    color: var(--turquoise-ink);
}

.money-out {
    color: var(--pomegranate-ink);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    list-style: none;
}

.tags li {
    padding: 0 0.7rem;
    font-size: 0.74375rem;
    line-height: 1.6rem;
    color: var(--ink-secondary);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

/* The totals line above a ledger list. */
.totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Sign-in, enrolment, code, refusal: one card mid-screen on the dotted page ("Auth card") ---------- */

.bare {
    display: grid;
    place-items: start center;
    min-block-size: 100vh;
    padding: 12vh 1rem 2rem;
    background-color: var(--bg);
    background-image:
        linear-gradient(90deg, var(--bg) calc(0.9375rem - 1px), transparent 1%),
        linear-gradient(var(--bg) calc(0.9375rem - 1px), transparent 1%),
        linear-gradient(color-mix(in srgb, var(--ink-muted) 65%, transparent), color-mix(in srgb, var(--ink-muted) 65%, transparent));
    background-size: 0.9375rem 0.9375rem, 0.9375rem 0.9375rem, auto;
    background-attachment: fixed;
}

@media (max-width: 640px) {
    .bare {
        padding-block-start: 1rem;
    }
}

.auth {
    inline-size: 100%;
    max-inline-size: 31rem;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 2rem;
}

.auth .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 1rem;
    font-size: 0.74375rem;
    color: var(--ink-muted);
}

.auth .brand strong {
    display: inline-block;
    padding: 0.2rem 0.9rem;
    border-radius: var(--radius);
    background: var(--lapis-soft);
    color: var(--lapis);
    font-size: 1rem;
    font-weight: var(--weight-bold);
}

.auth h1 {
    margin: 0 0 0.25rem;
    font-size: 1.2325rem;
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    color: var(--ink-strong);
}

.auth p {
    max-inline-size: none;
    color: var(--ink-muted);
}

.auth p.error {
    text-align: start;
}

.auth form {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 1rem;
}

.auth form input:not([type="checkbox"]):not([type="hidden"]) {
    min-block-size: 3.65rem;
    border-radius: var(--radius-lg);
}

.auth form button,
.auth a.signin-telegram {
    inline-size: 100%;
    min-block-size: 3.5rem;
    margin-block-start: 0.25rem;
    border-radius: var(--radius-lg);
}

.auth form button {
    color: var(--surface);
    background: var(--ink-strong);
    border-color: var(--ink-strong);
}

.auth form button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ink-strong) 85%, var(--surface));
    border-color: color-mix(in srgb, var(--ink-strong) 85%, var(--surface));
}

/* The six digits: large, centred, spaced (Latin digits in an LTR field, so the spacing breaks no joining). */
.auth input[autocomplete="one-time-code"] {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    letter-spacing: 0.4em;
    text-align: center;
}

/* «ورود با تلگرام»: a plain link to /signin/telegram/start, drawn as the primary button (Telegram's own page does the rest). */
.auth a.signin-telegram {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 1rem 0.25rem;
    font-weight: var(--weight-semibold);
    color: var(--on-accent);
    text-decoration: none;
    background: var(--lapis);
    border: 1px solid var(--lapis);
}

.auth a.signin-telegram:hover {
    background: var(--lapis-hover);
    border-color: var(--lapis-hover);
}

/* The QR stays dark on white in both schemes so every authenticator app reads it. */
.qr {
    inline-size: 11rem;
    margin: 0.75rem auto;
    padding: 0.4rem;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.qr svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.secret code {
    display: block;
    margin-block-start: 0.25rem;
    padding: 0.4rem;
    font-size: 0.74375rem;
    letter-spacing: 0.06em;
    user-select: all;
}

/* The alert list (01 Admin panel "Alerts"): newest first under its Jalali day, unread rows marked with a lapis edge. */
.alerts {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.alerts li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
}

.alerts li.unread {
    border-inline-start: 3px solid var(--lapis);
    background: var(--lapis-soft);
}

.alerts .kind {
    min-inline-size: 9rem;
    color: var(--ink-muted);
    font-size: 0.74375rem;
}

.alerts .text {
    flex: 1;
    min-inline-size: 0;
}

.alerts .when {
    color: var(--ink-muted);
    font-size: 0.74375rem;
}

.alerts form {
    margin: 0;
}

/* ---------- Filter bar (01 "Navigation and page furniture", "Filter bar") ----------
   A card under the title strip, sticky: one row of compact controls that wraps on a narrow window, then the match
   count and the active filters as removable chips. */

.bar {
    position: sticky;
    inset-block-start: calc(var(--topbar-height) + var(--titlebar-height) + 0.5rem);
    z-index: 10;
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border-color: var(--line);
}

.bar > form.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    margin: 0;
}

.bar > form.filters > button {
    border-radius: var(--radius-pill);
    min-block-size: 2.75rem;
}

.bar .bar-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    max-inline-size: none;
    font-size: 0.74375rem;
}

.bar .matches {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* A set filter, with its ✕: lapis, because it is structure and not a risk flag. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.7rem;
    font-size: 0.74375rem;
    line-height: 1.5rem;
    color: var(--lapis);
    background: var(--lapis-soft);
    border-radius: var(--radius-pill);
    text-decoration: none;
}

.filter-chip:hover {
    text-decoration: underline;
}

.bar .clear,
.bar .export,
p.empty .clear {
    font-size: 0.74375rem;
}

.bar .export {
    padding: 0 0.7rem;
    line-height: 1.5rem;
    color: var(--ink-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    text-decoration: none;
}

/* The empty result keeps the bar above it and a way back (03). */
p.empty {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ink-muted);
}

p.empty::before {
    content: "";
    inline-size: 2rem;
    block-size: 2rem;
    background: var(--ink-faint);
    mask: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12'/><path d='M4 13h3l3 3h4l3 -3h3'/></svg>");
}

p.empty .clear {
    margin-inline-start: 0.5rem;
}

p.pager {
    display: flex;
    gap: 1rem;
    font-size: 0.74375rem;
}

/* A label read by a screen reader only: what a chip's ✕ does. */
.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Waiting counts (01 "Navigation and page furniture", 03 "Admin panel") ----------
   A pill at the entry's end with Persian digits, hidden at zero; lapis under the queue's target time, saffron past
   three quarters of it, pomegranate past it — the same three colours as the queue age. Never an amount of money. */

.count {
    display: inline-block;
    min-inline-size: 1.25rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    line-height: 1.25rem;
    text-align: center;
    color: var(--on-accent);
    background: var(--lapis);
}

.menu a .count {
    margin-inline-start: auto;
}

.count.warm {
    color: var(--saffron-ink);
    background: var(--saffron-soft);
}

.count.late {
    color: var(--on-accent);
    background: var(--pomegranate);
}

/* A decided row: what was decided, by whom, and when, in place of the action (01 "Filters on a queue page"). */
.decided {
    display: inline-block;
    font-size: 0.74375rem;
    color: var(--ink-muted);
}

/* The dashboard's queue age, the three colours of 03 "Queue age". */
.age-warm {
    color: var(--saffron-ink);
}

.age-late {
    color: var(--pomegranate-ink);
    font-weight: var(--weight-semibold);
}

/* ---------- Detail drawer ("Drawer") ----------
   The record opens beside the table so the list stays on screen; on a narrow window it falls under it, on a phone
   it rises as a sheet. The drawer is part of the page's address (?open=…), so it is a link and Back closes it. */

.drawer {
    position: sticky;
    inset-block-start: calc(var(--topbar-height) + var(--titlebar-height) + 1rem);
    float: inline-end;
    inline-size: 22rem;
    margin-inline-start: 1rem;
    margin-block-end: 1rem;
    padding: 1rem;
    border-color: var(--line);
    border-radius: var(--radius-xl);
}

.drawer dl {
    max-inline-size: none;
    padding: 0;
    background: none;
    border: 0;
}

.drawer .drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
    font-weight: var(--weight-semibold);
}

/* On a wide window the page becomes two columns while the drawer is open: the list in the first, the drawer in the
   second, sticky, beside whatever the list scrolls to. */
@media (min-width: 1201px) {
    .content:has(> .drawer) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 22rem;
        column-gap: 1rem;
        align-content: start;
    }

    .content:has(> .drawer) > * {
        grid-column: 1;
        inline-size: 100%;
    }

    .content:has(> .drawer) > h1 {
        grid-column: 1 / -1;
    }

    .content:has(> .drawer) > .drawer {
        grid-column: 2;
        grid-row: 2 / span 100;
        float: none;
        align-self: start;
        margin: 0;
    }
}

@media (max-width: 1200px) {
    .drawer {
        float: none;
        position: static;
        inline-size: auto;
        margin-inline-start: 0;
    }
}

@media (max-width: 991px) {
    .drawer {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 40;
        max-block-size: 85vh;
        margin: 0;
        overflow-y: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -0.5rem 1rem rgba(2, 6, 23, 0.15), 0 0 0 100vmax var(--scrim);
    }
}

/* A reported listing in the queue (01 S2 "Report"): saffron is "waiting for staff"; the reporters are named so staff can reach them. */
.reported {
    display: inline-block;
    font-size: 0.74375rem;
    font-weight: var(--weight-semibold);
    color: var(--saffron-ink);
}

.reporters {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.74375rem;
    color: var(--ink-muted);
}

.support-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}