/* has.pet admin — compact scaffold for the pico page bodies. The chrome
   around them (top bar, navigation rail) is console-tokens.css. */

/* Pico variable overrides scale fonts and spacing down across the app. */
:root {
    --pico-font-size: 87.5%;            /* 14px base instead of 16px */
    --pico-line-height: 1.4;
    --pico-spacing: 0.75rem;
    --pico-typography-spacing-vertical: 0.6rem;
    --pico-form-element-spacing-vertical: 0.4rem;
    --pico-form-element-spacing-horizontal: 0.6rem;
    --pico-border-radius: 0.2rem;
    --pico-block-spacing-vertical: 1rem;
    --pico-block-spacing-horizontal: 1rem;
}

body {
    display: flex;
    min-height: 100vh;
    margin: 0;
}

/* Every signed-in page renders the fixed 58px top bar; the login and error
   pages do not. One offset for both columns below it. */
body.has-topbar {
    padding-top: var(--hp-header-h);
}

/* ─── Navigation rail ─────────────────────────────────────────────── */

/* A sticky column that holds the shared rail (templates/_console_nav.html,
   styled in console-tokens.css). It carries position and width only: the
   surface, the border and every rule inside it come from the same file the
   console shells read, so the two cannot drift. PET-1079 emptied it of its
   own brand block and "Signed in as" footer — the top bar carries both now,
   once, for every page of the admin.

   Sticky rather than the console's fixed-height grid: these pages scroll the
   window, and a tuning table must stay able to run past the fold. */
.sidebar {
    width: 214px;
    flex: 0 0 214px;
    position: sticky;
    top: var(--hp-header-h);
    align-self: flex-start;
    height: calc(100vh - var(--hp-header-h));
    display: flex;
    flex-direction: column;
}

/* The rail fills the column. console_admin/base.html gets this from its
   .shell grid, which stretches a cell by default; a flex column does not,
   so without this the rail's surface and its right-hand border stop at the
   last nav entry and the page shows bare canvas below it. */
.sidebar > .nav {
    flex: 1;
    min-height: 0;
}

/* Hamburger toggle: checkbox is hidden everywhere; the label becomes a
   visible button only on small screens (see media query below).

   Both selectors are scoped to .sidebar to outrank pico's own

       [type=checkbox] ~ label { display: inline-block }

   which is (0,1,1) and so beat a bare .nav-toggle-btn at (0,1,0). The
   hamburger has therefore been painting on desktop ever since the drawer
   was added; the brand block above it is what made that easy to miss. */
.sidebar .nav-toggle {
    display: none;
}

.sidebar .nav-toggle-btn {
    display: none;
}

/* The console-only topbar's own rules live in console-tokens.css — it is
   shared with the console shell (console_base.html), which does not load
   pico or this file. One bar, one set of numbers. */

/* Visually hidden but still announced by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Main content ────────────────────────────────────────────────── */

.content {
    flex: 1;
    padding: 1rem 1.25rem;
    max-width: 100%;
    overflow-x: auto;
}

.content h1 {
    font-size: 1.4rem;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.content h2 {
    font-size: 1.1rem;
    margin: 0.8rem 0 0.4rem;
}

.content p {
    margin: 0 0 0.6rem;
}

.muted {
    color: var(--pico-muted-color);
}

.page-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}

/* ─── Dashboard ───────────────────────────────────────────────────── */

.dashboard-section {
    margin-top: 1rem;
}

.dashboard-section h2 {
    margin-bottom: 0.45rem;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.admin-dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--pico-muted-border-color);
    border-left: 0.25rem solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    color: var(--pico-color);
    text-decoration: none;
    margin: 0;
}

.admin-dashboard-card:hover {
    text-decoration: none;
    border-color: var(--pico-primary-border);
}

.admin-dashboard-card.danger {
    border-left-color: #dc3545;
}

.admin-dashboard-card.warning {
    border-left-color: #f0ad4e;
}

.admin-dashboard-card.success {
    border-left-color: #198754;
}

.metric-label {
    color: var(--pico-muted-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.metric-value {
    font-size: 1.7rem;
    line-height: 1.05;
}

.metric-hint {
    color: var(--pico-muted-color);
    font-size: 0.78rem;
}

.dashboard-notes {
    max-width: 48rem;
}

/* ─── Translations ────────────────────────────────────────────────── */

.translation-workflow {
    max-width: 56rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
}

.translation-workflow ol {
    margin-bottom: 0;
}

.translation-resource-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.translation-filter-bar {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0.9rem 0;
}

.translation-filter-bar label {
    min-width: 9rem;
    margin: 0;
}

.translation-filter-bar button,
.translation-filter-bar a[role="button"] {
    margin: 0;
}

.translation-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem;
}

.translation-edit-card {
    padding: 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
}

.translation-edit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.translations-table td {
    vertical-align: top;
}

.inline-check {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.6rem;
}

.inline-check input {
    margin: 0;
    width: auto;
}

.translation-preview {
    max-width: 20rem;
    color: var(--pico-muted-color);
    font-size: 0.78rem;
}

.translation-card-subtitle {
    font-size: 0.8rem;
    margin: 0.7rem 0 0.25rem;
}

.translation-locale-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.78rem;
}

.translation-locale-list li {
    margin-bottom: 0.45rem;
}

.translation-locale-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.translation-locale-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    white-space: nowrap;
}

.status-pill--ready {
    background: #d1e7dd;
    color: #0f5132;
}

.translation-version-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.translation-version-card {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
}

.translation-version-card pre {
    max-height: 24rem;
    overflow: auto;
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
}

.status-pill {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: var(--pico-muted-border-color);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-pill--pending {
    background: #fff3cd;
    color: #664d03;
}

.status-pill--failed,
.status-pill--missing {
    background: #f8d7da;
    color: #842029;
}

.status-pill--stale {
    background: #e2e3e5;
    color: #41464b;
}

.status-pill--translated {
    background: #d1e7dd;
    color: #0f5132;
}

.status-pill--same {
    background: #cff4fc;
    color: #055160;
}

.translation-compare-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.translation-compare-head input {
    max-width: 18rem;
}

.translation-compare-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.translation-compare-summary button {
    padding: 0.18rem 0.5rem;
    font-size: 0.72rem;
    margin: 0;
}

.translation-compare-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.6rem 0;
}

.translation-compare-controls button {
    padding: 0.22rem 0.55rem;
    font-size: 0.75rem;
    margin: 0;
}

.translation-diff-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.translation-diff-card {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
}

.translation-diff-card summary {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;
}

.translation-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.55rem;
}

.translation-diff-grid h4 {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    color: var(--pico-muted-color);
    text-transform: uppercase;
}

.translation-diff-grid pre {
    min-height: 3rem;
    max-height: 18rem;
    overflow: auto;
    padding: 0.5rem;
    background: var(--pico-code-background-color, #f6f8fa);
    border-radius: var(--pico-border-radius);
    font-size: 0.76rem;
    white-space: pre-wrap;
}

#translation-key-search {
    max-width: 24rem;
    margin: 0.6rem 0;
}

/* ─── Banners ─────────────────────────────────────────────────────── */

.no-auth-banner {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    padding: 0.35rem 0.6rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 0.8rem;
    font-size: 0.78rem;
}

.error-banner {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    padding: 0.4rem 0.6rem;
    border-radius: var(--pico-border-radius);
    margin: 0.4rem 0 0.8rem;
    font-size: 0.82rem;
}

/* ─── Login card ──────────────────────────────────────────────────── */

.login-card {
    max-width: 22rem;
    margin: 4rem auto 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
}

/* ─── Users table ─────────────────────────────────────────────────── */

.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.users-table th,
.users-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    text-align: left;
}

.users-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--pico-muted-color);
}

.users-table td.muted {
    color: var(--pico-muted-color);
    font-size: 0.75rem;
}

.users-table .email-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.you-marker {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--pico-muted-color);
    border: 1px solid var(--pico-muted-border-color);
    padding: 0.02rem 0.3rem;
    border-radius: 0.5rem;
}

.role-form {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin: 0;
}

.role-form select {
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
    margin: 0;
    width: auto;
}

.role-form button {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    margin: 0;
}

.flash-banner {
    padding: 0.4rem 0.6rem;
    border-radius: var(--pico-border-radius);
    margin: 0.4rem 0 0.8rem;
    font-size: 0.82rem;
    border: 1px solid transparent;
}

.flash-ok {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

.flash-error {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

.login-card h2 {
    font-size: 1.1rem;
    margin: 0 0 0.8rem;
}

.login-card label {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
    display: block;
}

.login-card input {
    margin-bottom: 0.5rem;
}

.login-card button {
    margin-top: 0.4rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
}

/* ─── Page header row ─────────────────────────────────────────────── */

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.page-header h1 {
    margin: 0;
}

.btn-link {
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--pico-primary);
    border-radius: var(--pico-border-radius);
    color: var(--pico-primary);
    text-decoration: none;
    white-space: nowrap;
}

.btn-link:hover {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}

.btn-link-muted {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    text-decoration: none;
}

.btn-link-muted:hover {
    color: var(--pico-color);
}

/* ─── Filter bar ──────────────────────────────────────────────────── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}

.filter-chips {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--pico-muted-color);
    border: 1px solid var(--pico-muted-border-color);
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

.chip-active {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary-background);
}

.chip-active:hover {
    color: var(--pico-primary-inverse);
}

.search-form {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin: 0;
}

.search-input {
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
    margin: 0;
    width: 14rem;
}

.btn-search {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    margin: 0;
}

/* ─── Status badges ───────────────────────────────────────────────── */

.status-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-ok {
    background: #d1e7dd;
    color: #0f5132;
}

.status-pending {
    background: #fff3cd;
    color: #664d03;
}

.status-banned {
    background: #f8d7da;
    color: #842029;
}

/* ─── View link in table ──────────────────────────────────────────── */

.view-link {
    font-size: 0.72rem;
    color: var(--pico-primary);
    text-decoration: none;
    white-space: nowrap;
}

/* ─── Pagination ──────────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
    font-size: 0.78rem;
}

.page-btn {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    text-decoration: none;
    color: var(--pico-primary);
    font-size: 0.75rem;
}

.page-btn:hover {
    background: var(--pico-muted-background-color);
}

.page-btn-disabled {
    color: var(--pico-muted-color);
    cursor: default;
}

.page-info {
    color: var(--pico-muted-color);
    font-size: 0.75rem;
}

/* ─── Detail / edit form ──────────────────────────────────────────── */

.detail-section {
    margin-bottom: 1.5rem;
}

.detail-section h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
    margin: 0 0 0.5rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-bottom: 0.25rem;
}

.meta-list {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.2rem 0.8rem;
    font-size: 0.82rem;
    margin: 0 0 0.8rem;
}

.meta-list dt {
    color: var(--pico-muted-color);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    align-self: center;
}

.meta-list dd {
    margin: 0;
    align-self: center;
}

.mono {
    font-family: monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

.detail-form {
    max-width: 28rem;
}

.form-row {
    margin-bottom: 0.5rem;
}

.form-row label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
    color: var(--pico-color);
}

.form-row input,
.form-row select {
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    margin: 0;
    width: 100%;
}

.field-hint {
    display: block;
    font-size: 0.68rem;
    color: var(--pico-muted-color);
    margin-top: 0.15rem;
}

.required {
    color: #c00;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.form-actions button {
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    margin: 0;
}

.cancel-link {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    text-decoration: none;
}

/* ─── Danger zone ─────────────────────────────────────────────────── */

.danger-zone .detail-section {
    border: 1px solid #f5c2c7;
    border-radius: var(--pico-border-radius);
    padding: 0.6rem 0.8rem;
    background: #fff8f8;
}

.danger-zone h2 {
    color: #842029;
    border-color: #f5c2c7;
}

.danger-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.danger-actions form {
    margin: 0;
}

.btn-ban,
.btn-unban,
.btn-delete {
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    border-radius: var(--pico-border-radius);
    border: 1px solid;
    cursor: pointer;
    font-weight: 500;
}

.btn-ban {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
}

.btn-ban:hover {
    background: #ffecb5;
}

.btn-unban {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

.btn-unban:hover {
    background: #badbcc;
}

.btn-delete {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

.btn-delete:hover {
    background: #f5c2c7;
}

/* ─── Responsive: tablet + phone ──────────────────────────────────── */

/* On narrow viewports the side-by-side body becomes a vertical stack and
   the sidebar morphs into a compact top bar. No HTML changes needed —
   flex direction + a few overrides do the work. */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    /* The rail stops being a column and becomes a strip under the top bar:
       a hamburger, and the nav itself as a drawer below it. Height and
       stickiness are dropped so it takes only the room it needs. */
    .sidebar {
        width: 100%;
        flex: 0 0 auto;
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.6rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--hp-line);
    }

    /* Hamburger button — left side of the strip. Scoped like its desktop
       counterpart above, and for the same pico rule. */
    .sidebar .nav-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0.25rem 0.55rem;
        font-size: 1.05rem;
        line-height: 1;
        border: 1px solid var(--pico-muted-border-color);
        border-radius: var(--pico-border-radius);
        color: var(--pico-color);
        background: transparent;
        user-select: none;
    }

    .sidebar .nav-toggle-btn:hover {
        background: var(--pico-muted-background-color, rgba(0, 0, 0, 0.04));
    }

    /* Drawer: hidden by default, drops below the top row as a full-width
       column when the checkbox is checked.

       Scoped to .sidebar for the same reason as the hamburger above, but
       against our own file rather than pico's: console-tokens.css defines
       .nav { display: flex } and is loaded after this one, so a bare .nav
       here ties on specificity and loses on order — leaving the drawer
       permanently open on a phone. */
    .sidebar .nav {
        display: none;
        order: 100;
        flex-basis: 100%;
        margin-top: 0.4rem;
        border-right: 0;
        border-top: 1px solid var(--hp-line);
    }

    .sidebar .nav-toggle:checked ~ .nav {
        display: flex;
    }

    /* Indicate open state on the hamburger via a different background. */
    .sidebar .nav-toggle:checked ~ .nav-toggle-btn {
        background: var(--pico-primary-background);
        color: var(--pico-primary-inverse);
        border-color: var(--pico-primary-background);
    }

    .content {
        padding: 0.75rem 0.9rem;
    }

    .content h1 {
        font-size: 1.25rem;
    }

    /* Page header lays vertically so the New-user button doesn't shrink. */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    /* Filter chips + search stack with comfortable spacing. */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .search-form input[type="search"] {
        width: 100%;
    }

    /* Tables stay table-shaped but get a horizontal scroll wrapper if any
       column overflows. Pico's default `overflow-auto` on .content already
       gives us this; the smaller font helps too. */
    .users-table {
        font-size: 0.78rem;
        min-width: 30rem;
    }

    /* Detail page form: stack the two-column layout if the template uses one. */
    .detail-form .form-row,
    .detail-section .form-row {
        flex-direction: column;
        gap: 0.4rem;
    }

    .danger-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .danger-actions form,
    .danger-actions button {
        width: 100%;
    }
}

/* Very narrow viewports — drop low-priority columns to keep the table
   inside the screen without a scrollbar. */
@media (max-width: 480px) {
    .users-table th:nth-child(3),
    .users-table td:nth-child(3),
    .users-table th:nth-child(4),
    .users-table td:nth-child(4) {
        display: none;
    }
}

/* ─── Urgency badges + expert urgency edit form ─────────────────────── */

/* Base shape — matches .status-badge proportions (same font-size, padding,
   radius) so the badge sits comfortably inside a table cell or dl grid.
   Text always shows the letter (A / B / —) for colour-blind accessibility. */
.consult-urgency-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* A — Emergency: red fill, same palette as .status-banned / .btn-delete.
   High contrast; the filled background + bold border make it pop in a list. */
.consult-urgency-badge--A {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

/* B — See a vet ASAP: amber fill, same palette as .status-pending / .no-auth-banner. */
.consult-urgency-badge--B {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
}

/* none — Routine / not flagged: muted neutral, no fill, does not draw the eye. */
.consult-urgency-badge--none {
    background: transparent;
    color: var(--pico-muted-color);
    border-color: var(--pico-muted-border-color);
}

/* Expert urgency edit form in the detail header grid.
   Sits below the current badge in the same <dd> cell — kept compact so
   it doesn't overpower the read-only meta around it. */
.consult-urgency-form {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    flex-wrap: nowrap;
}

.consult-urgency-form select {
    height: 1.75rem;
    margin: 0;
    padding: 0 0.45rem;
    font-size: 0.75rem;
    line-height: 1;
    box-sizing: border-box;
    width: auto;
}

.consult-urgency-form .consult-btn {
    height: 1.75rem;
    padding: 0 0.65rem;
    font-size: 0.72rem;
}

/* ─── Dossier urgency banner (chat_detail — first-message block) ─────── */

/* Full-width banner shown at the top of the dossier section.
   Uses the same colour palette as .consult-urgency-badge--A / --B so the
   urgency signal is visually consistent with the queue list. */
.chat-dossier__urgency {
    display: block;
    padding: 0.55rem 0.85rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* A — Emergency: red fill, same hex as .consult-urgency-badge--A. */
.chat-dossier__urgency--A {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

/* A level letter rendered bold so it catches the eye immediately. */
.chat-dossier__urgency--A strong {
    font-weight: 700;
}

/* B — See a vet ASAP: amber fill, same hex as .consult-urgency-badge--B. */
.chat-dossier__urgency--B {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
}

/* B level letter rendered bold for visual hierarchy. */
.chat-dossier__urgency--B strong {
    font-weight: 700;
}

/* Source label ("ai" / "expert") shown in a slightly lighter shade. */
.chat-dossier__urgency-source {
    opacity: 0.75;
    font-size: 0.8em;
}

/* ─── Consultations table (/chats) ───────────────────────────────────── */

.consult-section-title {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text, #111827);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.consult-section-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    background: var(--bg-elev, #f3f4f6);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    text-align: center;
}
.consult-empty { color: var(--muted, #6b7280); margin: 0.25rem 0 0.5rem; }
.consult-help {
    color: var(--muted, #6b7280);
    font-size: 0.8125rem;
    margin: 0.25rem 0 0.75rem;
    max-width: 44rem;
    line-height: 1.45;
}
.consult-claim select {
    min-width: 4.5rem;
}

/* ─── Consultation detail page (/chats/{id}) ───────────────────────── */

.chat-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: calc(100vh - 2.5rem);
    height: calc(100dvh - 2.5rem);
    min-height: 0;
}

.chat-back {
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    text-decoration: none;
}
.chat-back:hover { color: var(--pico-primary); }

.chat-header {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    flex: 0 0 auto;
}

.chat-header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.chat-header__pet {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 auto;
    min-width: 0;
}

.chat-avatar {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--pico-primary-background, #dbeafe);
    color: var(--pico-primary, #2563eb);
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
}

.chat-header__pet-text { min-width: 0; }

.chat-header__pet-name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.chat-header__pet-meta {
    color: var(--muted, #6b7280);
    font-size: 0.8125rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.chat-header__chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border, #e5e7eb);
    font-size: 0.6875rem;
    color: var(--muted, #6b7280);
    background: var(--bg-elev, #f3f4f6);
}
.chat-header__chip--ok {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.chat-header__muted {
    color: var(--muted, #6b7280);
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

.chat-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chat-header__complete { margin: 0; }
.chat-header__complete button {
    margin: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background: transparent;
    color: var(--pico-primary);
    border: 1px solid var(--pico-primary);
    border-radius: var(--pico-border-radius);
}
.chat-header__complete button:hover {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}

.chat-header__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--border, #e5e7eb);
    font-size: 0.8125rem;
}

.chat-header__grid dt {
    color: var(--muted, #6b7280);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.chat-header__grid dd { margin: 0; }

.chat-header__concern {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border, #e5e7eb);
    font-size: 0.8125rem;
}
.chat-header__concern-label {
    color: var(--muted, #6b7280);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    display: block;
    margin-bottom: 0.2rem;
}
.chat-header__concern p { margin: 0; line-height: 1.45; }

/* ── Thread ─────────────────────────────────────────────────────── */

.chat-thread {
    flex: 1 1 auto;
    min-height: 12rem;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
    background: var(--bg-elev, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    scroll-behavior: smooth;
}

.chat-empty {
    color: var(--muted, #6b7280);
    text-align: center;
    font-size: 0.8125rem;
    padding: 2rem 1rem;
}

.chat-load-older {
    align-self: center;
    margin: 0.25rem 0 0.5rem;
    padding: 0.25rem 0.85rem;
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: 999px;
    background: transparent;
    color: var(--muted, #6b7280);
    font-size: 0.75rem;
    cursor: pointer;
}
.chat-load-older:hover {
    border-color: var(--accent, #4f46e5);
    color: var(--accent, #4f46e5);
}
.chat-load-older[disabled] {
    opacity: 0.6;
    cursor: default;
}

.chat-msg {
    display: flex;
    max-width: 100%;
}
.chat-msg--left  { justify-content: flex-start; }
.chat-msg--right { justify-content: flex-end; }

/* Consecutive messages from the same sender hug each other tightly. */
.chat-thread .chat-msg--cont { margin-top: -0.25rem; }

.chat-bubble {
    max-width: min(36rem, 78%);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.chat-msg--user .chat-bubble {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-bottom-left-radius: 0.2rem;
}

.chat-msg--assistant .chat-bubble {
    background: #fff;
    border: 1px dashed #c7d2fe;
    border-bottom-left-radius: 0.2rem;
    color: var(--pico-color);
}

.chat-msg--vet .chat-bubble {
    background: var(--pico-primary, #2563eb);
    color: #fff;
    border-bottom-right-radius: 0.2rem;
}

.chat-bubble__role {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.15rem;
}
.chat-msg--assistant .chat-bubble__role { color: #4f46e5; }

.chat-bubble__text { white-space: pre-wrap; }

.chat-header__scans-link {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    background: #eef2ff;
    color: #3730a3;
    text-decoration: none;
    border: 1px solid #c7d2fe;
}
.chat-header__scans-link:hover { background: #e0e7ff; }

.scans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}
.scan-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.scan-card--failed { border-color: #fecaca; }
.scan-card__photo {
    display: block;
    line-height: 0;
}
.scan-card__photo img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: zoom-in;
}
.scan-card__photo--missing {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 0.875rem;
}
.scan-card__body {
    padding: 0.7rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.scan-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}
.scan-card__type {
    font-weight: 600;
    text-transform: capitalize;
    color: #1f2937;
}
.scan-card__status {
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
}
.scan-card__status--done { background: #ecfdf5; color: #047857; }
.scan-card__status--pending,
.scan-card__status--running { background: #fef3c7; color: #b45309; }
.scan-card__status--failed { background: #fef2f2; color: #b91c1c; }
.scan-card__metric-label {
    color: #6b7280;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.scan-card__metric-value { font-weight: 500; }
.scan-card__observations { font-size: 0.8125rem; color: #374151; }
.scan-card__observations ul { margin: 0.2rem 0 0; padding-left: 1rem; }
.scan-card__failure { color: #991b1b; font-size: 0.8125rem; }
.scan-card__time {
    margin-top: auto;
    font-size: 0.75rem;
    color: #6b7280;
}
.scan-card__translate-btn {
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4f46e5;
    font-size: 0.75rem;
    text-decoration: underline dotted;
    cursor: pointer;
}
.scan-card__translate-btn:hover { text-decoration: underline solid; }
.scan-card__translate-btn[disabled] { opacity: 0.6; cursor: default; }
.scan-card__translate-btn--done { color: #047857; text-decoration: none; }

.chat-bubble__photo {
    display: block;
    margin: 0 0 0.4rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    line-height: 0;
}
.chat-bubble__photo img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: cover;
    cursor: zoom-in;
}

.chat-bubble__blocked {
    background: #fef2f2;
    color: #991b1b;
    border-radius: 0.25rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.6875rem;
    margin-bottom: 0.3rem;
}
.chat-msg--vet .chat-bubble__blocked {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Collapsed "Original / Client sees" alt-text. Closed by default —
   vet sees only the primary text and opens the alt on demand. */
.chat-bubble__alt {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    line-height: 1.4;
}
.chat-bubble__alt > summary {
    cursor: pointer;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    opacity: 0.8;
    list-style: none;
    user-select: none;
}
.chat-bubble__alt > summary::-webkit-details-marker { display: none; }
.chat-bubble__alt > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.25rem;
    transition: transform 120ms;
}
.chat-bubble__alt[open] > summary::before { transform: rotate(90deg); }
.chat-bubble__alt-text { margin-top: 0.25rem; }

/* On-demand translate: small link under each bubble + inline result. */
.chat-bubble__translate-btn {
    margin-top: 0.35rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent, #4f46e5);
    font-size: 0.6875rem;
    cursor: pointer;
    align-self: flex-start;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.chat-bubble__translate-btn:hover    { text-decoration: underline solid; }
.chat-bubble__translate-btn[disabled] { opacity: 0.6; cursor: default; }
.chat-msg--vet .chat-bubble__translate-btn { color: rgba(255,255,255,0.85); }

.chat-bubble__translation {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--border, #e5e7eb);
    font-size: 0.8125rem;
    color: var(--text, #111827);
    white-space: pre-wrap;
}
.chat-bubble__translation-meta {
    display: block;
    font-size: 0.6875rem;
    color: var(--muted, #6b7280);
    margin-bottom: 0.15rem;
}
.chat-bubble__translation-error {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--error, #ef4444);
    font-size: 0.75rem;
    color: var(--error, #ef4444);
}
.chat-msg--vet .chat-bubble__translation {
    border-top-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.92);
}
.chat-msg--vet .chat-bubble__translation-meta { color: rgba(255,255,255,0.7); }

.chat-msg--vet .chat-bubble__alt {
    border-top-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.chat-bubble__time {
    margin-top: 0.25rem;
    font-size: 0.625rem;
    color: var(--muted, #6b7280);
    text-align: right;
}
.chat-msg--vet .chat-bubble__time { color: rgba(255, 255, 255, 0.75); }

/* ── Composer ───────────────────────────────────────────────────── */

.chat-composer-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    flex: 0 0 auto;
}

.chat-composer {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin: 0;
}
.chat-composer textarea {
    flex: 1 1 0;             /* base 0; grow to fill the row */
    min-width: 0;            /* flex items default min-width: auto; force shrinkable */
    width: auto;
    margin: 0;
    resize: none;            /* JS autogrows it */
    overflow-y: auto;
    min-height: 2.4rem;
    max-height: 12rem;
    font-size: 0.8125rem;
    padding: 0.45rem 0.65rem;
    line-height: 1.4;
}
.chat-composer button {
    flex: 0 0 auto;
    width: auto;             /* override Pico's default button width: 100% */
    margin: 0;
    padding: 0.5rem 1.1rem;
    font-size: 0.8125rem;
    min-width: 4.5rem;
}
.chat-composer button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-composer-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.6875rem;
    color: var(--muted, #6b7280);
    line-height: 1;
    min-height: 0.85rem;
}
.chat-composer-hint { opacity: 0.7; }
.chat-composer-counter {
    font-variant-numeric: tabular-nums;
    margin-left: auto;  /* push counter to the far right */
}
.chat-composer-counter.near-limit { color: #b45309; font-weight: 600; }

.chat-suggest-btn {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
    padding: 0.2rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 0.35rem;
    border: 1px solid var(--pico-primary, #2563eb);
    background: transparent;
    color: var(--pico-primary, #2563eb);
    cursor: pointer;
    white-space: nowrap;
}
.chat-suggest-btn:hover:not(:disabled) {
    background: var(--pico-primary-background, #dbeafe);
}
.chat-suggest-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.chat-suggest-flag {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.chat-composer-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
}

.chat-composer-banner {
    background: var(--bg-elev, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.8125rem;
    color: var(--pico-color);
    flex: 0 0 auto;
}
.chat-composer-banner a {
    color: var(--pico-primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.25rem;
}
.chat-composer-banner--muted { color: var(--muted, #6b7280); }

/* Pending banner that carries the inline Claim form — text left, form right. */
.chat-claim-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.chat-claim-banner__text { flex: 1 1 auto; }
.chat-claim-banner .consult-claim { flex: 0 0 auto; }

/* Tablet / phone: header grid collapses, composer takes full width. */
@media (max-width: 768px) {
    .chat-page { height: calc(100vh - 4.5rem); }
    .chat-header { padding: 0.65rem 0.75rem; }
    .chat-header__pet-name { font-size: 0.95rem; }
    .chat-header__grid {
        grid-template-columns: 1fr 1fr;
        font-size: 0.75rem;
    }
    .chat-bubble { max-width: 88%; font-size: 0.8125rem; }
}
@media (max-width: 480px) {
    .chat-header__grid { grid-template-columns: 1fr; }
    .chat-bubble { max-width: 92%; }
}

/* ── Two-column chat+patient-card layout ──────────────────────────── */

/* The outer wrapper turns the single-column .chat-page into a side-by-side
   layout: left column (chat flow) grows to fill available width; right column
   (patient card panel) is a fixed-width sidebar. */
.chat-layout {
    display: flex;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Left column: the existing chat column flow (header + thread + composer).
   flex: 1 so it takes all remaining width after the panel. */
.chat-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}

/* Right column: fixed-width patient card panel.
   max-height anchors the panel to the viewport so the internal flex chain
   always has a concrete height to work against. Without it the panel can
   grow taller than the screen (no overflow trigger) or get clipped by the
   parent without producing a scroll bar. 2.5rem matches the .chat-page
   offset (padding-top of .content). */
.patient-card-panel {
    flex: 0 0 22rem;
    width: 22rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.5rem;
    background: var(--card, #fff);
    overflow: hidden;
    min-height: 0;
    max-height: calc(100vh - 2.5rem);
    max-height: calc(100dvh - 2.5rem); /* prefer dynamic viewport on mobile */
}

.patient-card-panel__header {
    padding: 0.6rem 0.85rem 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    flex: 0 0 auto;
}

.patient-card-panel__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted, #6b7280);
    margin: 0 0 0.5rem;
}

/* Tab strip — wraps to a second row when 7 tabs don't fit in one line */
.pc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    /* No overflow-x scroll: all tabs must be reachable without scrolling */
}

.pc-tab {
    flex: 0 0 auto;
    padding: 0.35rem 0.65rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted, #6b7280);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    line-height: 1.3;
    transition: color 100ms, border-color 100ms;
}

.pc-tab:hover { color: var(--pico-primary, #2563eb); }

.pc-tab--active {
    color: var(--pico-primary, #2563eb);
    border-bottom-color: var(--pico-primary, #2563eb);
    font-weight: 600;
}

/* Scrollable body that holds the tab panels.
   Using flex-column so the active panel can stretch to fill available height
   and own its own overflow-y scroll, which avoids the competing-overflow
   problem where neither the body nor a max-height list would actually scroll. */
.patient-card-panel__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* clip only; scrolling is delegated to .pc-panel--active */
    padding: 0.75rem 0.85rem;
    min-height: 0;
}

/* Individual tab panels — hidden unless active */
.pc-panel { display: none; }

/* Active panel fills the body height and is the single scroll container
   for all tab content. flex: 1 1 auto + min-height: 0 let it shrink to
   the constrained height of .patient-card-panel (now capped by max-height),
   and overflow-y: auto turns on a scrollbar whenever content overflows. */
.pc-panel--active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Unavailable state */
.pc-unavailable {
    color: var(--muted, #6b7280);
    font-size: 0.8125rem;
    text-align: center;
    padding: 2rem 1rem;
}

/* Vitals tab: photo + key-value rows */
.pc-photo {
    width: 100%;
    max-height: 10rem;
    object-fit: cover;
    border-radius: 0.375rem;
    margin-bottom: 0.65rem;
    display: block;
}

.pc-photo-placeholder {
    width: 100%;
    height: 6rem;
    background: var(--bg-elev, #f3f4f6);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #9ca3af);
    font-size: 0.75rem;
    margin-bottom: 0.65rem;
}

.pc-kv {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.2rem 0.5rem;
    font-size: 0.8125rem;
    margin-bottom: 0.35rem;
}

.pc-kv dt {
    color: var(--muted, #6b7280);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    align-self: start;
    padding-top: 0.1rem;
}

.pc-kv dd { margin: 0; word-break: break-word; }

/* Chip-style values (neutered, vaccinated) */
.pc-chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border, #e5e7eb);
    font-size: 0.6875rem;
    color: var(--muted, #6b7280);
    background: var(--bg-elev, #f3f4f6);
}
.pc-chip--ok {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

/* List tabs: vaccines, allergies, conditions, medications, vet_visits */
.pc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pc-list-item {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.35rem;
    font-size: 0.8125rem;
    background: var(--bg-elev, #f9fafb);
}

.pc-list-item__name {
    font-weight: 600;
    color: var(--text, #111827);
    margin-bottom: 0.1rem;
}

.pc-list-item__meta {
    color: var(--muted, #6b7280);
    font-size: 0.75rem;
    line-height: 1.4;
}

.pc-list-item__note {
    color: var(--text, #374151);
    font-size: 0.75rem;
    margin-top: 0.15rem;
    font-style: italic;
}

/* Status chips on allergy/condition items */
.pc-status-chip {
    display: inline-block;
    padding: 0.04rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.3rem;
}
.pc-status-chip--active {
    background: #fef3c7;
    color: #92400e;
}
.pc-status-chip--resolved,
.pc-status-chip--inactive {
    background: #f3f4f6;
    color: #6b7280;
}

.pc-empty {
    color: var(--muted, #6b7280);
    font-size: 0.8125rem;
    text-align: center;
    padding: 1.5rem 0.5rem;
}

/* Narrow viewports: panel moves below the chat column */
@media (max-width: 900px) {
    .chat-layout {
        flex-direction: column;
        overflow: visible;
    }
    .chat-col {
        /* On narrow screens, allow the chat column to be its natural height */
        flex: none;
    }
    .patient-card-panel {
        flex: none;
        width: 100%;
        max-height: 24rem;
    }
}

.consult-status {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-elev, #f3f4f6);
    color: var(--muted, #6b7280);
}
.consult-status--assigned, .consult-status--in_progress {
    background: #fef3c7; color: #92400e;
}
.consult-status--completed { background: #d1fae5; color: #065f46; }
.consult-status--cancelled { background: #fee2e2; color: #991b1b; }

.consult-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.consult-table th,
.consult-table td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    vertical-align: top;
    text-align: left;
}

.consult-table th {
    color: var(--muted, #6b7280);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.consult-table .col-when    { width: 8rem; color: var(--muted, #6b7280); white-space: nowrap; }
.consult-table .col-pet     { width: 10rem; }
.consult-table .col-owner   { width: 12rem; }
.consult-table .col-lang    { width: 4rem; text-align: center; }
.consult-table .col-urgency { width: 5.5rem; white-space: nowrap; }
.consult-table .col-desc    { white-space: normal; }
.consult-table .col-actions { width: 14.5rem; white-space: nowrap; }

.consult-pet-line  { font-weight: 600; }
.consult-pet-meta  { color: var(--muted, #6b7280); font-size: 0.6875rem; }
.consult-owner-id  { color: var(--muted, #6b7280); font-size: 0.6875rem;
                     font-family: ui-monospace, SFMono-Regular, monospace; }

.consult-lang-pill {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    font-size: 0.6875rem;
    color: var(--muted, #6b7280);
}

.consult-claim {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    flex-wrap: nowrap;
}

/* Claim-form inputs share the action-button height so the Take row lines
   up cleanly (select/input + Take button all 1.875rem tall). */
.consult-claim input[name='vet_language'],
.consult-claim select {
    height: 1.875rem;
    margin: 0;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    line-height: 1;
    box-sizing: border-box;
}

.consult-claim input[name='vet_language'] {
    width: 3.5rem;
}

.consult-open {
    display: inline-block;
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    color: var(--muted, #6b7280);
}

/* Whole-row click affordance.  JS handles navigation; CSS just signals
   that the row is interactive and gives a hover highlight.  Inputs and
   buttons inside the row keep their own cursors via more specific
   rules in Pico / browser defaults. */
.consult-row { cursor: pointer; transition: background 80ms ease; }
.consult-row:hover { background: var(--bg-elev, #f3f4f6); }
.consult-row:focus-visible {
    outline: 2px solid var(--pico-primary, #2563eb);
    outline-offset: -2px;
}
/* Interactive elements inside the row reset cursor and stop signalling
   "row click" — they get their own focus rings. */
.consult-row :is(button, input, select, a, textarea) {
    cursor: auto;
}
.consult-row button { cursor: pointer; }

/* Actions cell layout — all actions sit on ONE row (no wrap), vertically
   centred, so e.g. [lang] [Take] [Cancel] stay inline.  The column is
   sized (see .col-actions) to fit the widest action set. */
.consult-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
}
.consult-quick { margin: 0; }

/* Unified action button — Take / Complete / Cancel share one shape, size,
   radius and font; only the colour varies by semantics.  This is the
   single source of truth for consultation action buttons. */
.consult-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.875rem;
    padding: 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    white-space: nowrap;
    width: auto;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}

/* Take — primary filled (the main action on a pending row). */
.consult-btn--take {
    background: var(--pico-primary, #2563eb);
    color: var(--pico-primary-inverse, #fff);
    border-color: var(--pico-primary, #2563eb);
}
.consult-btn--take:hover:not(:disabled) { filter: brightness(0.94); }

/* Complete — green outline, fills on hover. */
.consult-btn--complete {
    background: transparent;
    color: #047857;
    border-color: #047857;
}
.consult-btn--complete:hover:not(:disabled) { background: #047857; color: #fff; }

/* Cancel — red outline, fills on hover. */
.consult-btn--cancel {
    background: transparent;
    color: #b91c1c;
    border-color: #b91c1c;
}
.consult-btn--cancel:hover:not(:disabled) { background: #b91c1c; color: #fff; }

/* Disabled (non-superadmin) — muted, not clickable. */
.consult-btn:disabled {
    color: var(--muted, #9ca3af);
    border-color: var(--border, #d1d5db);
    background: transparent;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Tablet: tighten typography; column widths stay fluid so nothing forces
   a horizontal scrollbar at this breakpoint. */
@media (max-width: 768px) {
    .consult-table { font-size: 0.75rem; }
    .consult-table .col-when    { width: 6.5rem; }
    .consult-table .col-pet     { width: 8rem; }
    .consult-table .col-owner   { width: 10rem; }
    .consult-table .col-urgency { width: 4.5rem; }
    .consult-table .col-actions { width: 13rem; }
}

/* Mobile (≤560px): table → vertical card list.  ``thead`` disappears;
   each ``<td>`` becomes a label/value row whose label is pulled from
   ``data-label`` on the cell.  No horizontal scroll under any
   viewport — the row content reflows in column. */
@media (max-width: 560px) {
    .consult-table,
    .consult-table thead,
    .consult-table tbody,
    .consult-table tr,
    .consult-table th,
    .consult-table td {
        display: block;
        width: auto;
    }

    .consult-table thead { display: none; }

    .consult-table tr {
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        background: var(--card, transparent);
    }

    .consult-table td {
        border-bottom: none;
        padding: 0.2rem 0;
        display: grid;
        grid-template-columns: 5rem 1fr;
        gap: 0.6rem;
        align-items: baseline;
        font-size: 0.8125rem;
    }

    .consult-table td::before {
        content: attr(data-label);
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted, #6b7280);
        font-weight: 600;
    }

    /* Concern can be long — let it span the full width below the label. */
    .consult-table td.col-desc {
        grid-template-columns: 1fr;
        padding-top: 0.35rem;
    }
    .consult-table td.col-desc::before { margin-bottom: 0.15rem; }

    /* No fixed column width inside cards — let actions wrap if the card
       is too narrow for [lang] [Take] [Cancel] on one line. */
    .consult-table .col-actions { width: auto; white-space: normal; }
    .consult-actions { flex-wrap: wrap; }

    /* The "view →" link sits next to the description; keep it visible
       on mobile (the desktop-only `display:none` rule from before is
       gone — view is the primary action for in_progress/recent rows). */
    .consult-open { font-size: 0.75rem; }

    .consult-owner-id { font-size: 0.6875rem; }

    /* Claim form: stack input+button so neither shrinks. */
    .consult-claim {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .consult-claim input[name='vet_language'] { width: 4rem; }
}

/* ─── Patient card: Consultations tab ────────────────────────────── */

/* Scrollable list variant used in the Consultations tab.
   Scroll is handled by the parent .pc-panel--active (overflow-y: auto).
   flex: 1 1 auto + min-height: 0 let the list fill the panel body and
   shrink below its intrinsic height so the parent can clip it. */
.pc-list--scroll {
    overflow-y: visible;
    min-height: 0;
    flex: 1 1 auto;
}

/* Each past consultation is a full-width anchor so the whole row is
   clickable, matching the style of other list items in the patient card. */
.pc-consultation-link {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
    color: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.35rem;
    font-size: 0.8125rem;
    background: var(--bg-elev, #f9fafb);
    transition: background 80ms;
}
.pc-consultation-link:hover {
    background: var(--pico-primary-background, #dbeafe);
    border-color: var(--pico-primary, #2563eb);
    color: var(--pico-primary, #2563eb);
}

/* Date in muted small text — acts as a label above topic. */
.pc-consultation__date {
    font-size: 0.6875rem;
    color: var(--muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Topic — the primary text of the past consultation row. */
.pc-consultation__topic {
    font-weight: 600;
    color: var(--text, #111827);
    word-break: break-word;
}

/* Outcome — secondary muted text below the topic. */
.pc-consultation__outcome {
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    word-break: break-word;
}

/* Overflow hint — shown when there are more consultations than the page.
   flex-shrink: 0 ensures this line is not compressed by the scrollable list above it. */
.pc-consultations-overflow {
    flex-shrink: 0;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    text-align: center;
}

/* ─── Images page ─────────────────────────────────────────────────── */

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.image-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.image-card__photo {
    display: block;
    line-height: 0;
}

.image-card__photo img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    cursor: zoom-in;
}

.image-card__photo--missing {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 0.875rem;
}

.image-card__body {
    padding: 0.6rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.image-card__badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background: #eef2ff;
    color: #3730a3;
}

.image-card__badge--chat { background: #ecfdf5; color: #047857; }
.image-card__badge--pets { background: #fef3c7; color: #b45309; }

.image-card__meta {
    font-size: 0.8125rem;
    color: #374151;
}

.image-card__time {
    margin-top: auto;
    font-size: 0.75rem;
    color: #6b7280;
}

/* The /images filter form fights Pico's block-level form controls: inside
   this bar every control must stay inline and compact. */
.image-filter-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.image-filter-form label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
    font-size: 0.78rem;
    color: #6b7280;
    white-space: nowrap;
}

.image-filter-form select,
.image-filter-form input[type="date"] {
    width: auto;
    height: auto;
    margin-bottom: 0;
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-position: right 0.4rem center;
}

.image-filter-form select {
    max-width: 16rem;
    padding-right: 1.6rem;
}

.image-filter-form button {
    width: auto;
    margin-bottom: 0;
    padding: 0.2rem 0.8rem;
    font-size: 0.78rem;
    border-radius: 1rem;
    line-height: 1.2;
}

.image-group {
    margin-bottom: 1.5rem;
}

.image-group__header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e5e7eb;
}

.image-group__header a {
    text-decoration: none;
}

.image-group__count {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9ca3af;
}

.image-group .image-grid {
    margin: 0.5rem 0 0;
}

/* ─── AI output review (/ai-review/scans) ─────────────────────────── */

/* Same .scan-card body as the vet-side scan history, laid out as a row:
   this screen is read one scan per line (photo, then the verdict that
   photo produced) rather than browsed as a grid of thumbnails. */

.scan-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

/* `align-items: flex-start` and not `stretch`: the row must be as tall as
   whatever it actually holds. A rejected scan carries two lines and no
   photo, and stretching it to the thumbnail's height turned two thirds of
   the first screen into whitespace — on a list whose whole job is letting
   someone skim many verdicts at once. */
.scan-card--row {
    flex-direction: row;
    align-items: flex-start;
}

.scan-card--row .scan-card__photo {
    flex: 0 0 160px;
    width: 160px;
}

.scan-card--row .scan-card__photo img,
.scan-card--row .scan-card__photo--missing {
    height: 120px;
}

.scan-card--row .scan-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* `.scan-card__row` spreads its children with `space-between`, which is
   right for the header line and wrong for a label/value pair: on a row
   this wide it throws "Score" and "5 bcs" to opposite edges, a thousand
   pixels apart, and the pair stops reading as a pair. */
.scan-card__row--metric {
    justify-content: flex-start;
    gap: 0.5rem;
}

/* Pinned to the foot of the vet-side grid card by `margin-top: auto`;
   here it sits in the header line, so that pin has to come off. */
.scan-card--row .scan-card__time {
    margin-top: 0;
    margin-left: auto;
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* Scoped to the row layout on purpose: `scans_history.html` emits the same
   `scan-card--{{ job_status }}` class, so an unscoped rule would also recolour
   the vet-side scan-history cards, which this ticket does not touch. */
.scan-card--row.scan-card--rejected {
    border-color: #fed7aa;
}

.scan-card__owner {
    font-size: 0.8125rem;
    color: #6b7280;
}

.scan-card__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.72rem;
    color: #6b7280;
}

.scan-card__note {
    padding: 0.35rem 0.5rem;
    border-radius: 0.3rem;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8125rem;
}

/* ─── AI output review: conversations (/ai-review/chats) ──────────── */

/* One row is one reply, and the two turns sit side by side: the question
   on the left, the answer on the right. `align-items: flex-start` for the
   same reason the scan row needs it — the row must take its height from
   whatever it holds. A photo-only question and a six-line answer are the
   normal case, and stretching either to the other's height turns a list
   meant for skimming into one row per screen. */
.chat-review-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.5rem;
    background: #fff;
}

.chat-review-card--blocked {
    border-color: #fecaca;
}

.chat-review__turns {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chat-review__turn {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
}

.chat-review__turn--ask {
    background: #f9fafb;
}

.chat-review__turn--reply {
    background: #f0f9ff;
}

.chat-review__who {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7280;
}

.chat-review__text {
    margin: 0;
    font-size: 0.8125rem;
    color: #374151;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-review__text--missing {
    color: #9ca3af;
    font-style: italic;
}

.chat-review__photo img {
    max-width: 160px;
    max-height: 120px;
    border-radius: 0.3rem;
    object-fit: cover;
}

.chat-review__translation {
    font-size: 0.78rem;
    color: #4b5563;
}

.chat-review__attached {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.chat-review__chip {
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    border: 1px solid var(--pico-muted-border-color);
    font-size: 0.7rem;
    color: #4b5563;
}

/* Pico makes every form control block-level and full-width; the date and
   select cases are already handled on .image-filter-form, and a checkbox
   needs the same treatment or it claims its own line and pushes the Apply
   button off the bar. */
.image-filter-form input[type="checkbox"] {
    width: auto;
    margin: 0 0.15rem 0 0;
}

/* The transcript: a plain chronological list, one block per message, with
   the writer's role carried in the border rather than in a bubble — a
   reviewer is reading for content, and three visually distinct speakers
   (owner, AI, vet) is the whole requirement. */
.chat-thread__header {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.5rem;
    background: #fff;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.chat-thread__msg {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    border-left: 3px solid var(--pico-muted-border-color);
    background: #f9fafb;
}

.chat-thread__msg--user {
    border-left-color: #9ca3af;
}

.chat-thread__msg--assistant {
    border-left-color: #0284c7;
    background: #f0f9ff;
}

/* The vet writes into the same chat_messages table as the owner and the AI
   (migration 0082). A vet turn inside an AI thread is a finding, not a
   footnote, so it is the one that looks different at a glance. */
.chat-thread__msg--vet {
    border-left-color: #047857;
    background: #ecfdf5;
}

/* `.scan-card__row` spreads with space-between, which is right for a header
   line and wrong for a label/value pair on a row this wide — the same
   correction the scan metric rows needed. */
.chat-thread__meta {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

/* ─── Pet art page ────────────────────────────────────────────────── */

.pet-art-legend {
    font-size: 0.8rem;
    color: var(--muted, #6b7280);
}

.pet-art-job__links {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    margin: -0.5rem 0 0.5rem;
    font-size: 0.85rem;
}

.pet-art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 0.5rem 0 2rem;
}

.pet-art-cell {
    margin: 0;
    /* The app's mint backdrop: cut-outs are transparent, and a see-through
       coat only shows against a colour, not against white. */
    background: #e9f4ee;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
}

.pet-art-cell img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: contain;
    cursor: zoom-in;
}

.pet-art-cell--source {
    background: #fff;
    border-color: #e5e7eb;
}

.pet-art-cell--source img {
    object-fit: cover;
}

.pet-art-cell--redone {
    border-color: #f59e0b;
}

.pet-art-cell--failing {
    border-color: #dc2626;
}

.pet-art-cell figcaption {
    padding: 0.35rem 0.5rem 0.5rem;
    font-size: 0.75rem;
    background: #fff;
}

.pet-art-cell__tag {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
}

.pet-art-cell__tag--redone {
    background: #fef3c7;
    color: #92400e;
}

.pet-art-cell__tag--failing {
    background: #fee2e2;
    color: #991b1b;
}

.pet-art-cell__problem {
    color: #6b7280;
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    word-break: break-all;
}