/* ============================================================
   TENA — Brand & Design System
   Aesthetic: Friendly Practical Marketplace
   Single font: Outfit (geometric sans matching the logo)
   White background, photo-led, trust-signal heavy, mobile-dense
   v1.0 · 2026-05-04
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    /* Brand greens (from logo — locked) */
    --tena-green:        #0F3D2E;
    --tena-green-deep:   #082218;
    --tena-green-soft:   #1B5942;
    --tena-green-tint:   #E8F0EC;   /* very light green wash for highlights */

    /* Brand gold (from logo — locked, used functionally) */
    --tena-gold:         #C9A227;
    --tena-gold-deep:    #8F6F12;
    --tena-gold-tint:    #FBF5DD;

    /* Neutrals (clean, not warm-cream) */
    --tena-white:        #FFFFFF;
    --tena-bg:           #F7F8F6;   /* subtle off-white app background */
    --tena-surface:      #FFFFFF;   /* cards on bg */
    --tena-surface-2:    #F1F3F0;   /* secondary surfaces, hovers */
    --tena-ink:          #1A1F1C;
    --tena-ink-2:        #4D5651;
    --tena-muted:        #7A847F;
    --tena-border:       #E4E7E5;
    --tena-border-strong:#C9CFCB;

    /* Status (functional colors) */
    --tena-success:      #1F7A4D;
    --tena-success-bg:   #E2F2EB;
    --tena-warning:      #B8860B;
    --tena-warning-bg:   #FBF1D6;
    --tena-danger:       #C0413E;
    --tena-danger-bg:    #FBE7E6;
    --tena-info:         #2C5F7A;
    --tena-info-bg:      #E0EBF1;

    /* Type */
    --tena-font:         'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Geometry */
    --r-xs:              4px;
    --r-sm:              8px;
    --r:                 12px;
    --r-lg:              16px;
    --r-pill:            999px;

    /* Shadows — subtle, functional */
    --shadow-xs:         0 1px 2px rgba(15, 22, 18, 0.04);
    --shadow-sm:         0 2px 4px rgba(15, 22, 18, 0.06);
    --shadow:            0 4px 12px rgba(15, 22, 18, 0.08);
    --shadow-lg:         0 12px 28px -8px rgba(15, 22, 18, 0.14);

    /* Motion */
    --ease:              cubic-bezier(0.2, 0, 0, 1);
    --t-fast:            150ms;
    --t:                 220ms;
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
    margin: 0;
    font-family: var(--tena-font);
    font-weight: 400;
    color: var(--tena-ink);
    background: var(--tena-bg);
    line-height: 1.5;
}

h1, h2, h3, h4, h5 {
    font-family: inherit;
    font-weight: 700;
    color: var(--tena-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--tena-green); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--tena-green-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

::selection { background: var(--tena-gold-tint); color: var(--tena-green-deep); }

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

/* ── Container ───────────────────────────────────────────── */
.tena-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2vw, 1.5rem);
}

/* ── Navbar ──────────────────────────────────────────────── */
/* Chrome heights, single-sourced. The bars consume these, and any layout that
   must fit between them (the pinned chat conversation, #258) subtracts them —
   so a bar cannot change height without the layouts that depend on it
   following. --tena-bottom-nav-h is 0 wherever the bottom nav is not shown. */
body {
    --tena-navbar-h: 65px;
    --tena-bottom-nav-h: 0px;
}
.tena-navbar {
    background: var(--tena-white);
    border-bottom: 1px solid var(--tena-border);
    /* Above the bottom nav (50), the listing Buy bar (55) and the support
       launcher (60): the mobile drawer (#265) is a child of this bar, so its
       overlay can only cover those if the bar's stacking context outranks
       them. Confirm modals (1200+) still sit above. */
    position: sticky; top: 0; z-index: 70;
}
.tena-navbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: calc(var(--tena-navbar-h) - 1px); /* bar height minus its border */
    height: 64px;
}

.tena-brand {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--tena-font);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-brand:hover { text-decoration: none; color: var(--tena-green-deep); }
.tena-brand-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tena-gold);
    margin-bottom: 4px;
}

.tena-search {
    flex: 1;
    max-width: 580px;
    position: relative;
}
.tena-search input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border: 1.5px solid var(--tena-border);
    border-radius: var(--r-pill);
    background: var(--tena-bg);
    font: 500 0.95rem var(--tena-font);
    color: var(--tena-ink);
    transition: border-color var(--t), background var(--t);
}
.tena-search input:focus {
    outline: none;
    border-color: var(--tena-green);
    background: var(--tena-white);
}
.tena-search-icon {
    position: absolute;
    left: 0.95rem; top: 50%;
    transform: translateY(-50%);
    color: var(--tena-muted);
    pointer-events: none;
    font-size: 1.05rem;
}

.tena-nav-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--tena-ink);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background var(--t);
}
.tena-nav-icon:hover { background: var(--tena-surface-2); }
.tena-nav-icon-badge {
    position: absolute; top: 6px; right: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tena-danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--tena-white);
}

.tena-locale {
    border: 1.5px solid var(--tena-border);
    background: var(--tena-white);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.7rem;
    font: 600 0.78rem var(--tena-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tena-ink-2);
    cursor: pointer;
}

/* ── Brand logo image (used in nav) ──────────────────────── */
.tena-brand-logo {
    height: 50px;
    width: auto;
    display: block;
}

/* ── Sticky-scroll affordance on the nav ─────────────────── */
.tena-navbar { transition: box-shadow var(--t); }
.tena-navbar.is-scrolled { box-shadow: var(--shadow-sm); }

/* ── Nav layout helpers ──────────────────────────────────── */
.tena-nav-spacer { flex: 1; }
.tena-nav-collapse {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tena-nav-link {
    color: var(--tena-ink-2);
    font: 500 0.95rem var(--tena-font);
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.tena-nav-link:hover {
    color: var(--tena-green-deep);
    background: var(--tena-surface-2);
    text-decoration: none;
}
.tena-nav-link.is-active {
    color: var(--tena-green-deep);
    font-weight: 600;
}

/* ── Hamburger toggle (mobile only) ──────────────────────── */
.tena-nav-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1.5px solid var(--tena-border-strong);
    border-radius: var(--r-sm);
    color: var(--tena-ink);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-nav-toggle:hover { border-color: var(--tena-green); }
.tena-nav-toggle svg { width: 20px; height: 20px; display: block; }
.tena-nav-toggle .tena-icon-close { display: none; }
.tena-nav-toggle[aria-expanded="true"] .tena-icon-burger { display: none; }
.tena-nav-toggle[aria-expanded="true"] .tena-icon-close { display: block; }

/* ── Globe-icon language picker (uses <details>/<summary>) ─ */
.tena-locale-picker { position: relative; }
.tena-locale-picker[open] .tena-locale-trigger {
    background: var(--tena-surface-2);
    border-color: var(--tena-border-strong);
}
.tena-locale-picker[open] .tena-locale-chevron { transform: rotate(180deg); }

.tena-locale-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem 0.45rem 0.65rem;
    border: 1.5px solid var(--tena-border);
    border-radius: var(--r-pill);
    background: var(--tena-white);
    font: 600 0.78rem var(--tena-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tena-ink-2);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.tena-locale-trigger::-webkit-details-marker { display: none; }
.tena-locale-trigger:hover { border-color: var(--tena-green); color: var(--tena-ink); }
.tena-locale-trigger .tena-globe-icon { width: 16px; height: 16px; }
.tena-locale-chevron {
    width: 12px; height: 12px;
    opacity: 0.7;
    transition: transform var(--t-fast);
}

.tena-locale-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    margin: 0;
    padding: 0.35rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}
.tena-locale-menu form { margin: 0; }
.tena-locale-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    font: 500 0.95rem var(--tena-font);
    color: var(--tena-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast);
}
.tena-locale-option:hover,
.tena-locale-option:focus-visible {
    background: var(--tena-surface-2);
    outline: none;
}
.tena-locale-option-code {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tena-muted);
    text-transform: uppercase;
}
.tena-locale-option[aria-current="true"] {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font-weight: 600;
}
.tena-locale-option[aria-current="true"] .tena-locale-option-code {
    color: var(--tena-green-soft);
}

/* ── Mobile collapse behavior ────────────────────────────── */
@media (max-width: 767.98px) {
    .tena-brand-logo { height: 40px; }
    .tena-navbar-inner { gap: 0.5rem; }

    /* Mobile nav redesign: the hamburger and its menu are removed — primary
       navigation is the bottom bar, and account/secondary items live in the
       dashboard hub ("You"). Only the language switcher stays in the top bar,
       using its compact desktop dropdown form. */
    .tena-nav-toggle,
    .tena-nav-collapse { display: none; }
}

/* ── Mobile overlay navigation drawer (#265) ─────────────────
   New component. Uses only existing tokens — no new colours, no new font.
   Built on <details> so it opens, closes and navigates with JS off; the
   backdrop lives inside <summary> so tapping it toggles the panel without
   a script. Phone widths only; the desktop bar is unchanged. */
.tena-drawer { display: none; }
@media (max-width: 767.98px) { .tena-drawer { display: block; } }

.tena-drawer-toggle { list-style: none; cursor: pointer; }
.tena-drawer-toggle::-webkit-details-marker { display: none; }
.tena-drawer-toggle-box {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;              /* 44px touch target (#178) */
    border: 1.5px solid var(--tena-border-strong);
    border-radius: var(--r-sm);
    color: var(--tena-ink);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-drawer-toggle:hover .tena-drawer-toggle-box { border-color: var(--tena-green); }
.tena-drawer-toggle:focus-visible .tena-drawer-toggle-box { outline: 2px solid var(--tena-green); outline-offset: 2px; }
.tena-drawer-toggle-box svg { width: 20px; height: 20px; display: block; }
.tena-drawer-toggle-box .tena-icon-close { display: none; }
.tena-drawer[open] .tena-drawer-toggle-box .tena-icon-burger { display: none; }
.tena-drawer[open] .tena-drawer-toggle-box .tena-icon-close { display: block; }

.tena-drawer-backdrop { display: none; }
.tena-drawer[open] .tena-drawer-backdrop {
    display: block;
    position: fixed;
    top: var(--tena-navbar-h); left: 0; right: 0; bottom: 0;
    background: rgba(15, 61, 46, 0.45);     /* --tena-green-deep at 45% */
    animation: tena-drawer-fade var(--t) ease both;
}

.tena-drawer-panel {
    position: fixed;
    top: var(--tena-navbar-h); left: 0; bottom: 0;
    width: min(86vw, 360px);
    box-sizing: border-box;
    padding: 1rem 0 calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--tena-white);
    border-right: 1px solid var(--tena-border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: tena-drawer-in var(--t) ease both;
}
@keyframes tena-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes tena-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .tena-drawer-panel, .tena-drawer[open] .tena-drawer-backdrop { animation: none; }
}

/* The page behind must not scroll under the open panel. :has() keeps this
   true with JS off, which is the whole point of the <details> mechanism. */
body:has(.tena-drawer[open]) { overflow: hidden; }

.tena-drawer-account {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.65rem 1.1rem 0.9rem;
    color: var(--tena-ink);
    text-decoration: none;
}
.tena-drawer-account:hover { text-decoration: none; color: var(--tena-ink); }
.tena-drawer-account-text { min-width: 0; }
.tena-drawer-account-name {
    display: block;
    font: 700 0.95rem var(--tena-font);
    color: var(--tena-green-deep);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tena-drawer-account-meta {
    display: block;
    font-size: 0.8rem; color: var(--tena-muted);
}
.tena-drawer-auth {
    display: flex; gap: 0.5rem;
    padding: 0.25rem 1.1rem 1rem;
}
.tena-drawer-auth .tena-btn { flex: 1 1 0; justify-content: center; text-align: center; }

.tena-drawer-heading {
    margin: 0.9rem 0 0.15rem;
    padding: 0 1.1rem;
    font: 700 0.7rem var(--tena-font);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tena-muted);
}
.tena-drawer-heading:first-child { margin-top: 0.25rem; }

.tena-drawer-link {
    display: flex; align-items: center; gap: 0.6rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    font: 500 0.95rem var(--tena-font);
    color: var(--tena-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--tena-border);
}
.tena-drawer-link:hover,
.tena-drawer-link:focus-visible {
    background: var(--tena-surface-2);
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-drawer-link-danger { color: var(--tena-danger); }
.tena-drawer-link-danger:hover { color: var(--tena-danger); }

.tena-drawer-group > .tena-drawer-group-summary {
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
}
.tena-drawer-group > .tena-drawer-group-summary::-webkit-details-marker { display: none; }
.tena-drawer-chevron {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--tena-muted);
    transition: transform var(--t-fast);
}
.tena-drawer-group[open] > .tena-drawer-group-summary .tena-drawer-chevron { transform: rotate(180deg); }
.tena-drawer-sublink {
    display: flex; align-items: center;
    min-height: 44px;
    padding: 0.45rem 1.1rem 0.45rem 2rem;
    background: var(--tena-surface-2);
    font: 500 0.9rem var(--tena-font);
    color: var(--tena-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--tena-border);
}
.tena-drawer-sublink:hover,
.tena-drawer-sublink:focus-visible { color: var(--tena-green-deep); text-decoration: none; }

/* ── Profile dropdown (uses <details>/<summary>) ─────────── */
.tena-profile-picker { position: relative; }
.tena-profile-picker[open] .tena-profile-trigger {
    background: var(--tena-surface-2);
    border-color: var(--tena-border-strong);
}
.tena-profile-picker[open] .tena-profile-chevron { transform: rotate(180deg); }

.tena-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    border: 1.5px solid var(--tena-border);
    border-radius: var(--r-pill);
    background: var(--tena-white);
    font: 600 0.88rem var(--tena-font);
    color: var(--tena-ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-profile-trigger::-webkit-details-marker { display: none; }
.tena-profile-trigger:hover { border-color: var(--tena-green); }
.tena-profile-trigger .tena-profile-chevron {
    width: 12px; height: 12px;
    opacity: 0.7;
    transition: transform var(--t-fast);
}
.tena-profile-trigger-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tena-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font: 700 0.78rem var(--tena-font);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.tena-avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

.tena-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    margin: 0;
    padding: 0.35rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}

.tena-profile-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.75rem 0.85rem;
    border-bottom: 1px solid var(--tena-border);
    margin-bottom: 0.35rem;
}
.tena-profile-header-text { min-width: 0; flex: 1; }
.tena-profile-header-name {
    font: 600 0.95rem var(--tena-font);
    color: var(--tena-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-profile-header-meta {
    font-size: 0.78rem;
    color: var(--tena-muted);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-profile-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: var(--tena-success-bg);
    color: var(--tena-success);
    border-radius: var(--r-sm);
    font: 600 0.74rem var(--tena-font);
}
.tena-profile-verified svg { width: 13px; height: 13px; }

.tena-profile-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    font: 500 0.92rem var(--tena-font);
    color: var(--tena-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-profile-option:hover,
.tena-profile-option:focus-visible {
    background: var(--tena-surface-2);
    color: var(--tena-green-deep);
    outline: none;
}
.tena-profile-option svg {
    width: 16px; height: 16px;
    color: var(--tena-ink-2);
    flex-shrink: 0;
}
.tena-profile-option:hover svg { color: var(--tena-green-deep); }

.tena-profile-separator {
    height: 1px;
    background: var(--tena-border);
    margin: 0.35rem 0;
}

.tena-profile-option-danger { color: var(--tena-danger); }
.tena-profile-option-danger svg { color: var(--tena-danger); }
.tena-profile-option-danger:hover,
.tena-profile-option-danger:focus-visible {
    background: var(--tena-danger-bg);
    color: var(--tena-danger);
}
.tena-profile-option-danger:hover svg { color: var(--tena-danger); }

@media (max-width: 767.98px) {
    .tena-profile-picker {
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--tena-border);
    }
    .tena-profile-trigger {
        width: 100%;
        justify-content: flex-start;
        padding: 0.55rem 0.9rem;
    }
    .tena-profile-trigger-name { max-width: none; flex: 1; }
    .tena-profile-menu {
        position: static;
        margin-top: 0.4rem;
        box-shadow: none;
        border-color: var(--tena-border);
        min-width: 0;
    }
}

/* ── Profile page ────────────────────────────────────────── */
.tena-profile-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}
.tena-profile-card {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.tena-profile-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.tena-profile-hero-text { min-width: 0; flex: 1; }
.tena-profile-hero-name {
    font: 700 1.5rem var(--tena-font);
    color: var(--tena-green-deep);
    margin: 0 0 0.25rem;
}
.tena-profile-hero-meta {
    font-size: 0.9rem;
    color: var(--tena-muted);
    margin: 0;
}
.tena-profile-section-title {
    font: 600 0.78rem var(--tena-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tena-muted);
    margin: 0 0 0.75rem;
}
.tena-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}
.tena-profile-field-label {
    font-size: 0.78rem;
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
}
.tena-profile-field-value {
    font: 500 0.98rem var(--tena-font);
    color: var(--tena-ink);
}
.tena-profile-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.tena-profile-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    color: var(--tena-ink);
    text-decoration: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tena-profile-action:hover {
    border-color: var(--tena-green);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-profile-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    flex-shrink: 0;
}
.tena-profile-action-icon svg { width: 20px; height: 20px; }
.tena-profile-action-text { min-width: 0; flex: 1; }
.tena-profile-action-title {
    font: 600 0.98rem var(--tena-font);
    color: inherit;
    margin: 0;
}
.tena-profile-action-sub {
    font-size: 0.82rem;
    color: var(--tena-muted);
    margin: 0.15rem 0 0;
}
.tena-kyc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    font: 700 0.72rem var(--tena-font);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tena-kyc-pill svg { width: 12px; height: 12px; }
.tena-kyc-pill-verified { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-kyc-pill-pending  { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-kyc-pill-none     { background: var(--tena-surface-2); color: var(--tena-ink-2); }
.tena-kyc-pill-rejected { background: var(--tena-danger-bg); color: var(--tena-danger); }

/* ── Buttons ─────────────────────────────────────────────── */
.tena-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--r-pill);
    border: 1.5px solid transparent;
    font: 600 0.95rem var(--tena-font);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
    line-height: 1.2;
}
.tena-btn:hover { text-decoration: none; }
.tena-btn:active { transform: scale(0.98); }
/* Disabled state for every button variant. There was none, so a disabled
   button rendered identically to a live one and simply swallowed the click —
   worse than no guard at all, because the user gets no reason. Follows the
   existing .tena-shutter:disabled / .tena-chat-send:disabled idiom, and uses
   only existing tokens. Needed now that forms.js disables submit while a
   request is in flight or while the form would only repeat a rejected
   value. (#199)

   aria-disabled carries the same look for a control that is blocked but must
   stay reachable: a consent gate has to be able to explain itself, and a
   `disabled` button is removed from the tab order, so a screen-reader user
   can never land on it to hear why. (#206) */
.tena-btn:disabled,
.tena-btn[disabled],
.tena-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.tena-btn:disabled:active,
.tena-btn[disabled]:active,
.tena-btn[aria-disabled="true"]:active { transform: none; }

.tena-btn-primary {
    background: var(--tena-green);
    color: var(--tena-white);
    border-color: var(--tena-green);
}
.tena-btn-primary:hover {
    background: var(--tena-green-deep);
    color: var(--tena-white);
    border-color: var(--tena-green-deep);
}

.tena-btn-gold {
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    border-color: var(--tena-gold);
    font-weight: 700;
}
.tena-btn-gold:hover {
    background: var(--tena-gold-deep);
    color: var(--tena-white);
    border-color: var(--tena-gold-deep);
}

.tena-btn-outline {
    background: var(--tena-white);
    color: var(--tena-ink);
    border-color: var(--tena-border-strong);
}
.tena-btn-outline:hover {
    border-color: var(--tena-green);
    color: var(--tena-green-deep);
}

.tena-btn-ghost {
    background: transparent;
    color: var(--tena-ink-2);
    border-color: transparent;
}
.tena-btn-ghost:hover { background: var(--tena-surface-2); color: var(--tena-ink); }

.tena-btn-danger {
    background: var(--tena-danger);
    color: var(--tena-white);
    border-color: var(--tena-danger);
}
.tena-btn-outline-danger {
    background: transparent;
    color: var(--tena-danger);
    border-color: var(--tena-danger);
}
.tena-btn-outline-danger:hover {
    background: var(--tena-danger-bg);
    color: var(--tena-danger);
    border-color: var(--tena-danger);
}

.tena-btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }
.tena-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.tena-btn-block { width: 100%; }

/* Touch targets: guarantee >=44px tall buttons on phones (#172) — the compact
   .tena-btn-sm row actions (View/Edit/View receipt) were ~31px. Mobile only;
   desktop button geometry is unchanged. */
@media (max-width: 700px) {
    .tena-btn { min-height: 44px; }
}

/* Sell CTA — distinctive accent button used in nav */
.tena-btn-sell {
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    border-color: var(--tena-gold);
    padding: 0.55rem 1.1rem;
    font-weight: 700;
    border-radius: var(--r-pill);
}
.tena-btn-sell:hover {
    background: var(--tena-gold-deep);
    color: var(--tena-white);
    border-color: var(--tena-gold-deep);
}

/* ── Form controls ───────────────────────────────────────── */
.tena-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tena-green-deep);
    margin-bottom: 0.35rem;
}

.tena-input,
.tena-select,
.tena-textarea {
    width: 100%;
    padding: 0.7rem 0.95rem;
    /* .tena-select overrides padding-right below — the native arrow needs room
       that a text input does not. Kept in this rule for everything else. (#220) */
    border: 1.5px solid var(--tena-border-strong);
    border-radius: var(--r-sm);
    /* background-COLOR, not the shorthand: .tena-select carries the arrow as a
       background-image below, and the shorthand would erase it. Same for the
       :focus and .is-invalid rules further down. (#220) */
    background-color: var(--tena-surface-2);
    font: 400 0.95rem var(--tena-font);
    color: var(--tena-ink);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
/* The dropdown arrow. (#220)

   The reported problem is the gap between the arrow and the RIGHT EDGE, not
   between the text and the arrow: the text sat a comfortable 0.95rem from the
   left border while the chevron was jammed against the right one, so the field
   read lopsided.

   padding-right cannot fix that. It moves the option text; the NATIVE arrow is
   drawn by the browser at its own fixed offset from the edge and no padding
   value shifts it. Controlling that distance means drawing the arrow ourselves,
   which is why appearance:none is required here rather than optional.

   Positioned at 1rem from the right edge to mirror the 0.95rem text inset on
   the left. Stroke is --tena-ink-2 (#4D5651) written literally because a data:
   URI cannot read a CSS custom property — it must be kept in step with that
   token by hand. */
.tena-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234D5651' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    /* Clears the arrow: 1rem gap + 12px arrow + breathing room. */
    padding-right: 2.5rem;
}
/* Safari/Chrome draw their own arrow on the picker indicator too. */
.tena-select::-ms-expand { display: none; }

.tena-input::placeholder,
.tena-textarea::placeholder { color: var(--tena-muted); }
.tena-input:hover,
.tena-select:hover,
.tena-textarea:hover { border-color: var(--tena-green); }
.tena-input:focus,
.tena-select:focus,
.tena-textarea:focus {
    outline: none;
    background-color: var(--tena-white);
    border-color: var(--tena-green);
    box-shadow: 0 0 0 2px rgba(15, 61, 46, 0.18);
}
.tena-textarea { min-height: 120px; resize: vertical; }

/* Kill WebKit's default blue autofill wash: paint the field with the brand
   surface (white on focus, matching the states above) via an inset shadow,
   and stall the background transition so the blue never flashes in. (#155) */
.tena-input:-webkit-autofill,
.tena-select:-webkit-autofill,
.tena-textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--tena-surface-2) inset;
    -webkit-text-fill-color: var(--tena-ink);
    caret-color: var(--tena-ink);
    transition: background-color 100000s ease-in-out 0s;
}
.tena-input:-webkit-autofill:focus,
.tena-select:-webkit-autofill:focus,
.tena-textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--tena-white) inset;
}

/* Brand-tinted checkboxes/radios site-wide (no token changes) */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--tena-green); }

/* Group spacing so stacked fields breathe consistently */
.tena-field + .tena-field { margin-top: 1rem; }

.tena-input.is-otp {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.5em;
    font-weight: 600;
}

.tena-help { font-size: 0.85rem; color: var(--tena-muted); margin-top: 0.35rem; }
.tena-help--error { color: var(--tena-danger); font-weight: 500; }
.tena-input.is-error,
.tena-select.is-error { border-color: var(--tena-danger); background-color: var(--tena-danger-bg); }
.tena-input.is-error:focus,
.tena-select.is-error:focus { box-shadow: 0 0 0 3px rgba(192, 65, 62, 0.18); }

/* Error state — invalid input + inline error message under the field */
.tena-input.is-invalid,
.tena-select.is-invalid,
.tena-textarea.is-invalid {
    border-color: var(--tena-danger);
    background-color: var(--tena-danger-bg);
}
.tena-input.is-invalid:focus,
.tena-select.is-invalid:focus,
.tena-textarea.is-invalid:focus {
    border-color: var(--tena-danger);
    box-shadow: 0 0 0 2px rgba(192, 65, 62, 0.22);
}
.tena-help.is-error { color: var(--tena-danger); font-weight: 500; }
/* Counterpart to .is-error for live status lines that also report success
   (e.g. the KYC capture steps), so the two states are told apart by colour
   and weight rather than by reading the sentence. (#185) */
.tena-help.is-success { color: var(--tena-success); font-weight: 500; }
/* Third state for advisory notices that are neither failure nor success —
   "we could not check this, a human will" — so they don't have to borrow the
   alarm of .is-error to be noticed. (#183)
   Uses --tena-gold-deep rather than --tena-warning: same caution family, but
   4.72:1 on white against --tena-warning's 3.25:1, so it clears WCAG AA at
   this text size. No new colour — both are existing tokens (§11). */
.tena-help.is-warning { color: var(--tena-gold-deep); font-weight: 500; }

/* ── Cards ───────────────────────────────────────────────── */
.tena-card {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
}
.tena-card-body { padding: 1.25rem; }

/* Selectable radio card — category pickers on the report / contact forms.
   Hover and checked states give clear feedback (uses existing tokens). */
.tena-radio-card {
    display: flex;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    align-items: flex-start;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tena-radio-card:hover { border-color: var(--tena-green); }
.tena-radio-card:has(input:checked) {
    border-color: var(--tena-green);
    background: var(--tena-green-tint);
    box-shadow: inset 0 0 0 1px var(--tena-green);
}
.tena-radio-card input[type="radio"] { margin-top: 0.2rem; accent-color: var(--tena-green-deep); flex-shrink: 0; }
.tena-radio-card__title { font-weight: 600; color: var(--tena-ink); }
.tena-radio-card__hint { font-size: 0.82rem; color: var(--tena-muted); margin-top: 0.1rem; }

/* Listing card — denser, photo-led, with save heart */
.tena-listing-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--t), box-shadow var(--t);
    position: relative;
}
.tena-listing-card:hover {
    border-color: var(--tena-border-strong);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.tena-listing-img {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--tena-surface-2);
}
.tena-listing-img img {
    width: 100%; height: 100%; object-fit: cover;
}

.tena-save-heart {
    position: absolute;
    top: 0.55rem; right: 0.55rem;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--tena-white);
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--tena-ink-2);
    font-size: 1rem;
    transition: color var(--t-fast), transform var(--t-fast);
    box-shadow: var(--shadow-sm);
}
.tena-save-heart:hover { transform: scale(1.08); color: var(--tena-danger); }
.tena-save-heart.is-saved { color: var(--tena-danger); }

.tena-listing-tag {
    position: absolute;
    bottom: 0.55rem; left: 0.55rem;
    padding: 0.2rem 0.55rem;
    background: rgba(15, 22, 18, 0.78);
    color: var(--tena-white);
    border-radius: var(--r-xs);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tena-listing-tag.is-gold { background: var(--tena-gold); color: var(--tena-green-deep); }

.tena-listing-body { padding: 0.7rem 0.85rem 0.85rem; }

.tena-listing-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tena-ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.tena-listing-price .tena-currency {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--tena-muted);
    margin-left: 0.15rem;
}

.tena-listing-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--tena-ink-2);
    line-height: 1.35;
    margin: 0.25rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.tena-listing-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--tena-muted);
}
.tena-listing-meta-icon { font-size: 0.85rem; }

/* ── Listing card — richer storefront treatment ───────────── */
.tena-listing-card { display: flex; flex-direction: column; }
.tena-listing-card:hover {
    transform: translateY(-3px);
    border-color: var(--tena-border-strong);
    box-shadow: 0 8px 22px -8px rgba(15, 61, 46, 0.22);
}
.tena-listing-card:hover .tena-listing-img img { transform: scale(1.04); }
.tena-listing-price { color: var(--tena-green-deep); }
.tena-listing-img img { transition: transform var(--t); }
.tena-listing-img-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--tena-muted);
    background: var(--tena-surface-2);
}

/* Condition pill — sits on the photo, colour-coded by grade. */
.tena-cond {
    position: absolute;
    top: 0.55rem; left: 0.55rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--r-pill, 999px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(15, 22, 18, 0.18);
    backdrop-filter: saturate(1.2);
}
.tena-cond-new     { background: var(--tena-gold);       color: var(--tena-green-deep); }
.tena-cond-likenew { background: var(--tena-green);      color: var(--tena-white); }
.tena-cond-good    { background: var(--tena-white);      color: var(--tena-ink-2); border: 1px solid var(--tena-border-strong); }
.tena-cond-fair    { background: rgba(26,31,28,0.78);    color: var(--tena-white); }
/* The same pill inline in text (detail spec list, checkout summary) — same
   colour classes, no overlay positioning. (#255) */
.tena-cond--inline { position: static; display: inline-block; box-shadow: none; vertical-align: middle; }

.tena-listing-body { display: flex; flex-direction: column; flex: 1; }
.tena-listing-foot {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.55rem;
    font-size: 0.76rem;
    color: var(--tena-muted);
}
.tena-listing-foot svg { flex-shrink: 0; }
.tena-listing-foot-loc {
    display: inline-flex; align-items: center; gap: 0.22rem;
    max-width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tena-listing-foot-sep { opacity: 0.5; }
.tena-listing-foot-views {
    display: inline-flex; align-items: center; gap: 0.22rem;
    margin-left: auto;
    color: var(--tena-ink-2);
    font-weight: 600;
}

/* ── Browse: full-bleed catalog shell with a flush-left brand rail ── */
.tena-shop-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: calc(100vh - 140px);
    background: var(--tena-bg);
    /* Cancel the global .tena-footer margin-top so the green rail meets
       the footer flush — no off-white band between them. */
    margin-bottom: -4rem;
}
/* Deep-green → gold-accented rail, pinned to the extreme left edge,
   matching the seller/admin workspace sidebars. */
.tena-shop-side {
    background: var(--tena-green-deep);
    color: rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    align-self: stretch;            /* fill the shell down to the footer */
    padding-bottom: 1.5rem;
}
/* Keep the controls in view on long result pages while the green rail
   itself still reaches the footer. */
.tena-shop-side-inner {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}
.tena-shop-main {
    padding: 1.75rem clamp(1.25rem, 2.5vw, 2.5rem) 3rem;
    min-width: 0;
}

.tena-facets-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tena-facets-head h2 {
    font-family: var(--tena-font);
    font-size: 1rem; font-weight: 700;
    color: var(--tena-white); margin: 0;
}
.tena-facets-clear {
    font-size: 0.78rem; font-weight: 700;
    color: var(--tena-gold); text-decoration: none;
}
.tena-facets-clear:hover { text-decoration: underline; }
.tena-facet-grp {
    padding: 1.05rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tena-facet-grp:last-child { border-bottom: 0; }
.tena-facet-title {
    display: block;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--tena-gold);
    margin: 0 0 0.7rem;
}
.tena-facet-input,
.tena-facet-grp select {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-sm);
    font: inherit; font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.97); color: var(--tena-ink);
}
.tena-facet-input::placeholder { color: var(--tena-muted); }
.tena-facet-input:focus,
.tena-facet-grp select:focus {
    outline: none;
    border-color: var(--tena-gold);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55);
}
.tena-facet-price { display: flex; align-items: center; gap: 0.4rem; }
.tena-facet-price span { color: rgba(255, 255, 255, 0.6); }

/* Category list with live counts */
.tena-facet-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tena-facet-cats a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin: 0 -0.6rem;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8); text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-facet-cats a:hover { background: rgba(255, 255, 255, 0.07); color: var(--tena-white); }
.tena-facet-cats a.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--tena-white);
    font-weight: 700;
}
.tena-facet-count {
    font-size: 0.74rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-pill, 999px);
}
.tena-facet-cats a.is-active .tena-facet-count {
    background: var(--tena-gold); color: var(--tena-green-deep);
}

/* Trending chips */
.tena-trend { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tena-trend a {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.34rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-pill, 999px);
    font-size: 0.8rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.85); text-decoration: none;
    transition: all var(--t-fast);
}
.tena-trend a:hover { border-color: var(--tena-gold); color: var(--tena-gold); }
.tena-trend a.is-active {
    background: var(--tena-gold); border-color: var(--tena-gold);
    color: var(--tena-green-deep);
}

/* Condition pill-set (radio styled as pills) */
.tena-pillset { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tena-pillset input { position: absolute; opacity: 0; pointer-events: none; }
.tena-pillset label {
    display: inline-flex; align-items: center;
    padding: 0.36rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-pill, 999px);
    font-size: 0.8rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.85); cursor: pointer;
    transition: all var(--t-fast);
}
.tena-pillset label:hover { border-color: var(--tena-gold); }
.tena-pillset input:checked + label {
    background: var(--tena-gold); border-color: var(--tena-gold);
    color: var(--tena-green-deep);
}
.tena-pillset input:focus-visible + label {
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55);
}

/* Results toolbar above the grid (on the light main area) */
.tena-browse-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.tena-browse-bar-count { color: var(--tena-muted); font-size: 0.92rem; }
.tena-browse-bar-count strong { color: var(--tena-green-deep); font-weight: 700; }
.tena-browse-sort {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.86rem; color: var(--tena-muted);
}
.tena-browse-sort select {
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--tena-border-strong);
    border-radius: var(--r-sm);
    font: inherit; font-size: 0.86rem;
    background: var(--tena-white); color: var(--tena-ink);
}

@media (max-width: 900px) {
    .tena-shop-shell { grid-template-columns: 1fr; }
    .tena-shop-side {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .tena-shop-side-inner {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .tena-shop-main { padding: 1.5rem 1rem 3rem; }
}

/* ── Compact card (homepage discovery) — image + title + price only ── */
.tena-card-mini {
    display: block;
    text-decoration: none;
    color: var(--tena-ink);
    transition: transform var(--t-fast);
}
.tena-card-mini:hover {
    text-decoration: none;
    color: var(--tena-ink);
    transform: translateY(-2px);
}
.tena-card-mini-thumb {
    aspect-ratio: 1;
    background: var(--tena-surface-2);
    overflow: hidden;
    position: relative;
}
.tena-card-mini-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--t);
}
.tena-card-mini:hover .tena-card-mini-thumb img { opacity: 0.92; }
.tena-card-mini-thumb-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--tena-muted);
    font-size: 1.5rem;
}
.tena-card-mini-title {
    margin: 0.5rem 0 0.15rem;
    font: 500 0.85rem var(--tena-font);
    color: var(--tena-ink-2);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-card-mini-price {
    font: 700 0.95rem var(--tena-font);
    color: var(--tena-ink);
    letter-spacing: -0.01em;
}
.tena-card-mini-price .tena-currency {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--tena-muted);
    margin-left: 0.15rem;
}

/* ── Featured-categories row — subhead + horizontal strip of mini cards ── */
.tena-feature-headline {
    font: 700 clamp(1.75rem, 1.8vw + 1rem, 2.25rem) var(--tena-font);
    color: var(--tena-ink);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 1.75rem;
}
.tena-feature-row { margin-bottom: 2rem; }
.tena-feature-row:last-child { margin-bottom: 0; }
.tena-feature-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.tena-feature-row-title {
    font: 600 1.1rem var(--tena-font);
    color: var(--tena-ink);
    margin: 0;
}
.tena-feature-row-link {
    color: var(--tena-green);
    font: 600 0.85rem var(--tena-font);
    text-decoration: none;
    flex-shrink: 0;
}
.tena-feature-row-link:hover { color: var(--tena-green-deep); text-decoration: none; }

.tena-mini-strip-wrap { position: relative; }
.tena-mini-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 170px;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.5rem;
    padding: 0.25rem 0 0.5rem;
    scrollbar-width: none;
}
.tena-mini-strip::-webkit-scrollbar { display: none; }
.tena-mini-strip > * { scroll-snap-align: start; }

/* Hide the carousel arrows when nothing overflows (1-5 cards on desktop) */
.tena-mini-strip-wrap.no-scroll .tena-cat-strip-arrow { display: none; }

@media (max-width: 767.98px) {
    .tena-mini-strip { grid-auto-columns: 145px; gap: 0.85rem; }
    .tena-card-mini-title { font-size: 0.82rem; }
    .tena-card-mini-price { font-size: 0.9rem; }
}
@media (max-width: 480px) {
    .tena-mini-strip { grid-auto-columns: 135px; }
}

/* ── Hero (homepage) — refined: layered gradient, dot grid, trust chips ── */
.tena-hero {
    position: relative;
    overflow: hidden;
    background: var(--tena-green-deep);
    color: var(--tena-white);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.tena-hero > .tena-container { position: relative; z-index: 1; }

.tena-hero h1 {
    color: var(--tena-white);
    font-size: clamp(2rem, 4vw + 0.5rem, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 0.6rem;
}
.tena-hero h1 em {
    font-style: normal;
    color: var(--tena-gold);
    font-weight: 700;
}

.tena-hero-sub {
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 0.5vw + 0.85rem, 1.15rem);
    max-width: 52ch;
    margin: 0 auto 1.75rem;
}

.tena-hero-search {
    max-width: 660px;
    margin: 0 auto;
    background: var(--tena-white);
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    padding: 0.4rem 0.4rem 0.4rem 1.4rem;
    gap: 0.5rem;
    box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}
.tena-hero-search input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    font: 500 1rem var(--tena-font);
    background: transparent;
    color: var(--tena-ink);
    transition: opacity var(--t-fast);
    text-overflow: ellipsis;
}
.tena-hero-search input::placeholder { color: var(--tena-muted); }
.tena-hero-search > .tena-btn { flex: 0 0 auto; }

@media (max-width: 479.98px) {
    .tena-hero-search {
        padding: 0.3rem 0.3rem 0.3rem 1rem;
    }
    .tena-hero-search input { font-size: 0.92rem; }
    .tena-hero-search > .tena-btn {
        padding: 0.55rem 0.95rem;
        font-size: 0.9rem;
    }
}

.tena-hero-trust-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
}
.tena-hero-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--r-pill);
    color: var(--tena-green-deep);
    font: 600 0.82rem var(--tena-font);
}
.tena-hero-trust-chip svg {
    width: 16px; height: 16px;
    color: var(--tena-gold-deep);
    flex-shrink: 0;
}

/* ── Section frame ───────────────────────────────────────── */
.tena-section { padding: clamp(2rem, 4vw, 3rem) 0; }

.tena-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.tena-section-title {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
    font-weight: 700;
    color: var(--tena-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.tena-section-link {
    color: var(--tena-green);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.tena-section-link:hover { color: var(--tena-green-deep); text-decoration: none; }

/* ── Trust handoff — slim white strip between hero and content ── */
.tena-trust-handoff {
    background: var(--tena-white);
    border-top: 1px solid var(--tena-border);
    border-bottom: 1px solid var(--tena-border);
    padding: 0.85rem 0;
    text-align: center;
    font: 500 0.85rem var(--tena-font);
    color: var(--tena-ink-2);
    letter-spacing: 0.01em;
}
.tena-trust-handoff svg {
    width: 16px; height: 16px;
    color: var(--tena-gold-deep);
    vertical-align: -3px;
    margin-right: 0.35rem;
}

/* ── Category bubble — circular photo tile (homepage carousel) ── */
.tena-cat-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 110px;
    margin-inline: auto;
    text-decoration: none;
    color: var(--tena-ink);
    transition: transform var(--t);
}
.tena-cat-bubble:hover {
    text-decoration: none;
    color: var(--tena-green-deep);
    transform: translateY(-3px);
}
.tena-cat-bubble-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--tena-surface-2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--t), background var(--t);
}
.tena-cat-bubble-img img {
    width: 80%; height: 80%;
    object-fit: contain;
    transition: transform var(--t);
}
/* Admin-uploaded photo fills the bubble edge-to-edge (cropped via the round mask) */
.tena-cat-bubble-img.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tena-cat-bubble:hover .tena-cat-bubble-img {
    box-shadow: 0 12px 28px -10px rgba(15, 22, 18, 0.18);
    background: var(--tena-white);
}
.tena-cat-bubble:hover .tena-cat-bubble-img img {
    transform: scale(1.06);
}
.tena-cat-bubble-name {
    font: 600 0.95rem var(--tena-font);
    color: var(--tena-ink);
    margin: 0;
    text-align: center;
}
.tena-cat-bubble-count {
    font: 500 0.78rem var(--tena-font);
    color: var(--tena-muted);
    margin-top: -0.45rem;
    text-align: center;
}

/* ── Horizontal scroll-snap carousel (used by category strip) ── */
.tena-cat-strip-wrap { position: relative; }
.tena-cat-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 120px;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.5rem;
    padding: 0.5rem 0 1rem;
    scrollbar-width: none;
}
.tena-cat-strip::-webkit-scrollbar { display: none; }
.tena-cat-strip > * { scroll-snap-align: start; }

.tena-cat-strip-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: 50%;
    box-shadow: var(--shadow);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tena-ink);
    cursor: pointer;
    z-index: 2;
    transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.tena-cat-strip-arrow:hover {
    background: var(--tena-green);
    color: var(--tena-white);
    border-color: var(--tena-green);
    transform: translateY(-50%) scale(1.05);
}
.tena-cat-strip-arrow svg { width: 18px; height: 18px; }
.tena-cat-strip-arrow.is-prev { left: -0.5rem; }
.tena-cat-strip-arrow.is-next { right: -0.5rem; }
.tena-cat-strip-arrow[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}
.tena-cat-strip-wrap.no-scroll .tena-cat-strip-arrow,
.tena-cat-strip-wrap.no-scroll::before,
.tena-cat-strip-wrap.no-scroll::after {
    display: none;
}
/* When everything fits, distribute bubbles evenly across the row */
.tena-cat-strip-wrap.no-scroll .tena-cat-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.tena-cat-strip-wrap::before,
.tena-cat-strip-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 1;
}
.tena-cat-strip-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--tena-bg), transparent);
}
.tena-cat-strip-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, var(--tena-bg), transparent);
}
@media (max-width: 767.98px) {
    .tena-cat-strip { grid-auto-columns: 90px; gap: 0.75rem; }
    .tena-cat-bubble { max-width: 90px; }
    .tena-cat-bubble-name { font-size: 0.85rem; }
    .tena-cat-bubble-count { font-size: 0.7rem; }

    .tena-cat-strip-arrow {
        width: 36px; height: 36px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(4px);
    }
    .tena-cat-strip-arrow svg { width: 16px; height: 16px; }
    .tena-cat-strip-arrow.is-prev { left: 0; }
    .tena-cat-strip-arrow.is-next { right: 0; }

    .tena-cat-strip-wrap::before,
    .tena-cat-strip-wrap::after { width: 22px; }
}

/* ── Admin: category image thumbnail uploader ─────────────── */
.tena-cat-admin-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--tena-surface-2);
    border: 1.5px dashed var(--tena-border-strong);
    color: var(--tena-muted);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-cat-admin-thumb:hover {
    border-color: var(--tena-green);
    color: var(--tena-green-deep);
    background: var(--tena-green-tint);
}
.tena-cat-admin-thumb svg { width: 18px; height: 18px; }
.tena-cat-admin-thumb.has-image {
    border-style: solid;
    border-color: var(--tena-border);
    background: var(--tena-white);
}
.tena-cat-admin-thumb.has-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.tena-btn-icon-x {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: transparent;
    border: 1px solid var(--tena-border);
    border-radius: 50%;
    color: var(--tena-muted);
    font: 600 0.95rem var(--tena-font);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tena-btn-icon-x:hover {
    color: var(--tena-danger);
    border-color: var(--tena-danger);
}

/* ── Grid ────────────────────────────────────────────────── */
.tena-grid { display: grid; gap: 1rem; }
.tena-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tena-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tena-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tena-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tena-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .tena-grid-cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tena-grid-cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .tena-grid-cols-3, .tena-grid-cols-4, .tena-grid-cols-5, .tena-grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .tena-grid-cols-3, .tena-grid-cols-4, .tena-grid-cols-5, .tena-grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .tena-grid-cols-2 { grid-template-columns: 1fr; }
}

/* ── Listing detail ──────────────────────────────────────── */
.tena-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2.5rem;
}
@media (max-width: 900px) {
    .tena-detail { grid-template-columns: 1fr; gap: 1.5rem; }
}

.tena-gallery-main {
    aspect-ratio: 4/3;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tena-surface-2);
    margin-bottom: 0.6rem;
}
.tena-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

/* Video in the thumbnail strip. The clip is one of the item's media, not a
   separate section below the gallery, so its thumb needs to say what it is
   at a glance. Existing tokens only. (#210 follow-up) */
.tena-gallery-thumb { position: relative; }
.tena-gallery-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    pointer-events: none;
}
.tena-gallery-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.32);
    pointer-events: none;
}
.tena-gallery-thumb.is-video.is-active .tena-gallery-thumb__play { background: rgba(0, 0, 0, 0.18); }

/* Gallery nav arrows, over the photo so the images can be walked without
   scrolling to the thumbnails. Sized to the 44px touch-target minimum
   (#178) and hidden from print. Existing tokens only. (#210 follow-up) */
.tena-gallery-main { position: relative; }
.tena-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 61, 46, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background var(--t-fast);
}
.tena-gallery-nav:hover { background: rgba(15, 61, 46, 0.78); }
.tena-gallery-nav--prev { left: 0.6rem; }
.tena-gallery-nav--next { right: 0.6rem; }

/* Capture date over the photo. The stamp burned into the pixels is the
   tamper-evident record and survives download; this is the readable trust
   signal for the buyer, and it exists because .tena-gallery-main crops 4:3
   with object-fit:cover — which hides ANY corner of a portrait photo, top
   or bottom alike. Existing tokens only. (#207 follow-up) */
.tena-gallery-captured {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.3rem 0.6rem;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.58);
    color: var(--tena-gold);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.tena-gallery-captured svg { flex: none; opacity: 0.8; }

.tena-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.tena-gallery-thumb {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--tena-surface-2);
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
    transition: border-color var(--t-fast);
}
.tena-gallery-thumb.is-active { border-color: var(--tena-green); }
.tena-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tena-gallery-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--tena-muted);
}
/* Phone: thumbnails become a swipeable scroll-snap strip. (#66) */
@media (max-width: 560px) {
    /* Video in the thumbnail strip. The clip is one of the item's media, not a
   separate section below the gallery, so its thumb needs to say what it is
   at a glance. Existing tokens only. (#210 follow-up) */
.tena-gallery-thumb { position: relative; }
.tena-gallery-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    pointer-events: none;
}
.tena-gallery-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.32);
    pointer-events: none;
}
.tena-gallery-thumb.is-video.is-active .tena-gallery-thumb__play { background: rgba(0, 0, 0, 0.18); }

/* Gallery nav arrows, over the photo so the images can be walked without
   scrolling to the thumbnails. Sized to the 44px touch-target minimum
   (#178) and hidden from print. Existing tokens only. (#210 follow-up) */
.tena-gallery-main { position: relative; }
.tena-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 61, 46, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background var(--t-fast);
}
.tena-gallery-nav:hover { background: rgba(15, 61, 46, 0.78); }
.tena-gallery-nav--prev { left: 0.6rem; }
.tena-gallery-nav--next { right: 0.6rem; }

/* Capture date over the photo. The stamp burned into the pixels is the
   tamper-evident record and survives download; this is the readable trust
   signal for the buyer, and it exists because .tena-gallery-main crops 4:3
   with object-fit:cover — which hides ANY corner of a portrait photo, top
   or bottom alike. Existing tokens only. (#207 follow-up) */
.tena-gallery-captured {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.3rem 0.6rem;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.58);
    color: var(--tena-gold);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.tena-gallery-captured svg { flex: none; opacity: 0.8; }

.tena-gallery-thumbs {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .tena-gallery-thumb { flex: 0 0 22%; scroll-snap-align: start; }
}

/* ── Listing image lightbox (#66) ─────────────────────────── */
.tena-lightbox {
    border: none;
    padding: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background: rgba(8, 15, 13, 0.96);
    overflow: hidden;
}
.tena-lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.tena-lightbox__img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    touch-action: pinch-zoom;
}
.tena-lightbox__close,
.tena-lightbox__nav {
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--tena-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tena-lightbox__close:hover,
.tena-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.tena-lightbox__close { top: 0.6rem; right: 0.8rem; width: 44px; height: 44px; font-size: 1.7rem; }
.tena-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; }
.tena-lightbox__nav--prev { left: 0.6rem; }
.tena-lightbox__nav--next { right: 0.6rem; }
.tena-lightbox__counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--tena-white);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
}

.tena-detail-price {
    font-size: clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
    font-weight: 700;
    color: var(--tena-ink);
    letter-spacing: -0.02em;
    margin: 0;
}
.tena-detail-price .tena-currency {
    font-size: 0.55em;
    font-weight: 500;
    color: var(--tena-muted);
    margin-left: 0.4rem;
    letter-spacing: 0;
}

.tena-detail-title {
    font-size: clamp(1.1rem, 0.5vw + 1rem, 1.4rem);
    font-weight: 600;
    color: var(--tena-ink);
    margin: 0.25rem 0 0;
    line-height: 1.3;
}

/* Trust strip below the buy button */
.tena-trust-strip {
    background: var(--tena-green-tint);
    border-radius: var(--r);
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tena-trust-item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--tena-ink);
}
.tena-trust-item-icon {
    color: var(--tena-green);
    font-size: 1rem;
    margin-top: 0.05rem;
}

/* Attribute list */
.tena-attrs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--tena-border);
    border-bottom: 1px solid var(--tena-border);
    margin: 1.25rem 0;
    list-style: none;
}
.tena-attrs li {
    font-size: 0.85rem;
    color: var(--tena-ink-2);
}
.tena-attrs strong {
    display: block;
    color: var(--tena-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

/* Seller card on detail */
.tena-seller {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    background: var(--tena-surface-2);
    border-radius: var(--r);
    margin: 1rem 0;
}
.tena-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tena-green);
    color: var(--tena-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.tena-seller-info { flex: 1; min-width: 0; }
.tena-seller-name {
    font-weight: 600;
    color: var(--tena-ink);
    margin: 0;
    display: flex; align-items: center; gap: 0.4rem;
}
.tena-verified {
    display: inline-flex; align-items: center;
    gap: 0.2rem;
    color: var(--tena-success);
    font-size: 0.75rem;
    font-weight: 600;
}
.tena-seller-meta {
    font-size: 0.82rem;
    color: var(--tena-muted);
}
.tena-seller-meta .tena-stars { color: var(--tena-gold-deep); margin-right: 0.3rem; }

/* ── Filter chips ────────────────────────────────────────── */
.tena-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 1.25rem;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.tena-chip {
    display: inline-flex; align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border: 1.5px solid var(--tena-border-strong);
    border-radius: var(--r-pill);
    background: var(--tena-white);
    font: 500 0.85rem var(--tena-font);
    color: var(--tena-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
}
.tena-chip:hover { border-color: var(--tena-green); }
.tena-chip.is-active {
    background: var(--tena-ink);
    border-color: var(--tena-ink);
    color: var(--tena-white);
}
.tena-chip-divider { width: 1px; height: 24px; background: var(--tena-border-strong); margin: 0 0.25rem; flex-shrink: 0; }

/* ── Tabs ────────────────────────────────────────────────── */
.tena-tabs {
    display: flex;
    border-bottom: 1px solid var(--tena-border);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.tena-tab {
    padding: 0.85rem 1.25rem;
    background: none;
    border: none;
    color: var(--tena-ink-2);
    font: 600 0.92rem var(--tena-font);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--t-fast);
}
.tena-tab::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--tena-green);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t);
}
.tena-tab:hover { color: var(--tena-ink); text-decoration: none; }
.tena-tab.is-active { color: var(--tena-green-deep); font-weight: 700; }
.tena-tab.is-active::after { transform: scaleX(1); height: 3px; background: var(--tena-gold); }
/* A tab whose panel holds unsaved edits (admin settings): easy to forget a
   change made in a section that is no longer on screen. */
.tena-tab.tena-tab-dirty::before {
    content: '';
    position: absolute;
    top: 0.7rem;
    right: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tena-gold);
}

/* ── Status badges ───────────────────────────────────────── */
.tena-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-xs);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--tena-surface-2);
    color: var(--tena-ink);
}
.tena-badge-success { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-badge-warn    { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-badge-danger  { background: var(--tena-danger-bg); color: var(--tena-danger); }
.tena-badge-info    { background: var(--tena-info-bg); color: var(--tena-info); }
.tena-badge-gold    { background: var(--tena-gold-tint); color: var(--tena-gold-deep); }

/* Price drop (#253): the previous price struck through beside the current
   one, plus the size of the cut as a gold badge. Rendered only for a real,
   recent, public drop — Listing::priceDrop() decides, the markup never does. */
.tena-price-was {
    color: var(--tena-muted);
    font-weight: 500;
    font-size: 0.8em;
    text-decoration: line-through;
    margin-right: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.tena-badge-drop { vertical-align: middle; margin-left: 0.4rem; font-size: 0.7rem; }
/* On cards the price row is already full (RWF amounts are long): the "was"
   takes its own line above the price so the price never wraps. */
.tena-listing-card__price .tena-price-was,
.tena-listing-price .tena-price-was { display: block; font-size: 0.78rem; margin: 0 0 0.1rem; }
.tena-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;
}

/* ── Steps ───────────────────────────────────────────────── */
.tena-steps {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.tena-step {
    display: inline-flex; align-items: center;
    gap: 0.5rem;
    flex: none;                 /* don't shrink in the scrolling rail */
    color: var(--tena-muted);
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
a.tena-step:hover .tena-step-label { text-decoration: underline; }
.tena-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--tena-surface-2);
    color: var(--tena-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.tena-step.is-active { color: var(--tena-ink); font-weight: 600; }
.tena-step.is-active .tena-step-num { background: var(--tena-green); color: var(--tena-white); }
.tena-step.is-done { color: var(--tena-green-deep); }
.tena-step.is-done .tena-step-num { background: var(--tena-success); color: var(--tena-white); }
.tena-step-divider {
    flex: 1;
    height: 2px;
    background: var(--tena-border);
    min-width: 16px;
    border-radius: 1px;
}

/* ── Camera frame ────────────────────────────────────────── */
.tena-camera-frame {
    aspect-ratio: 4/3;
    background: #0a0a0a;
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
}
.tena-camera-frame::before,
.tena-camera-frame::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    border: 2px solid var(--tena-gold);
}
.tena-camera-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.tena-camera-frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.tena-camera-frame video,
.tena-camera-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ── Sell wizard ─────────────────────────────────────────── */
/* Paired fields (price/condition, district/sector) sit two-up on desktop
   and stack on phones so neither field is squeezed to ~165px. (#27) */
.tena-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .tena-field-grid { grid-template-columns: 1fr; }
}

/* Captured-photo thumbnails — larger touch targets, used in the capture rail. (#27/#29/#60) */
.tena-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 2px solid var(--tena-border);
}
.tena-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 44×44 delete target (was 26px) — meets the touch-target minimum. (#29) */
.tena-thumb-del {
    position: absolute;
    top: 6px; right: 6px;
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(192, 65, 62, 0.92);
    color: var(--tena-white);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.tena-thumb-del:hover { background: var(--tena-danger); }

/* Inline delete confirmation — replaces an accidental one-tap delete with a
   deliberate confirm step, without a native confirm() dialog. (#29) */
/* Delete confirmation. It used to live INSIDE the thumbnail, but capture-rail
   thumbs are 84px wide and two 44px buttons plus their gap need 96px before
   padding — so on a phone the buttons were squeezed and the label wrapped
   into noise. As a dialog it is sized by the screen instead. Existing tokens
   only. (#210 follow-up) */
.tena-confirm-dialog {
    border: 0;
    border-radius: var(--r-lg);
    padding: 1.25rem;
    width: min(20rem, calc(100vw - 2rem));
    background: var(--tena-white);
    color: var(--tena-ink);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.tena-confirm-dialog::backdrop { background: rgba(8, 34, 24, 0.55); }
.tena-confirm-dialog__preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--r-sm);
    margin: 0 auto 0.75rem;
    display: block;
}
.tena-confirm-dialog__label {
    margin: 0 0 1rem;
    font-weight: 600;
    line-height: 1.35;
}
/* Stacked on narrow screens so each button gets the full width rather than
   half of a cramped row. */
.tena-confirm-dialog__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}
.tena-confirm-dialog__actions .tena-btn { width: 100%; min-height: 44px; }
@media (min-width: 420px) {
    .tena-confirm-dialog__actions { flex-direction: row; justify-content: center; }
    .tena-confirm-dialog__actions .tena-btn { width: auto; min-width: 7rem; }
}

/* Photo-quantity nudge: encourage 3+ photos, turn positive once met. (#28) */
.tena-photo-nudge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    background: var(--tena-gold-tint);
    color: var(--tena-gold-deep);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
}
.tena-photo-nudge.is-met {
    background: var(--tena-success-bg);
    color: var(--tena-success);
}

/* Upload progress bar — replaces the silent text-only "Uploading…". (#30) */
.tena-upload-progress {
    margin-top: 0.75rem;
    height: 6px;
    border-radius: 999px;
    background: var(--tena-surface-2);
    overflow: hidden;
}
.tena-upload-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tena-gold);
    transition: width 0.2s ease;
}
.tena-upload-progress.is-indeterminate > span {
    width: 40%;
    animation: tena-upload-slide 1.1s ease-in-out infinite;
}
@keyframes tena-upload-slide {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ── Photo capture (#60) ─────────────────────────────────────
   Desktop: an embedded camera card (parts stacked vertically).
   Mobile (≤640px): a fixed full-screen camera — top bar, viewfinder fills the
   space, captured rail + centred round shutter pinned at the bottom. */
.tena-capture {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}
.tena-capture__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tena-capture__back {
    flex: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    color: var(--tena-ink);
    text-decoration: none;
    font-size: 1.2rem;
}
.tena-capture__back:hover { background: var(--tena-surface-2); }
.tena-capture__count { font-weight: 700; color: var(--tena-ink); }
.tena-capture__done { margin-left: auto; }
.tena-capture__intro { color: var(--tena-ink-2); font-size: 0.9rem; margin: 0; }
.tena-capture__stage {
    position: relative;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: var(--r-sm);
    overflow: hidden;
}
/* contain, not cover: video recording captures the raw stream and no crop
   maths can change that, so the only way the recorded clip can match the
   viewfinder is to show the whole frame. Stills on this screen then match
   too, since visibleSourceRect() sees there is nothing being cropped. The
   stage is already black, so the letterbox reads as intentional. The KYC
   viewfinders keep `cover` — their framing guides are positioned over the
   element box and would no longer line up with a letterboxed frame; their
   stills are corrected in the capture instead. (#210 follow-up) */
.tena-capture__video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tena-capture__frame {
    position: absolute; inset: 12px;
    pointer-events: none;
    display: flex; align-items: flex-end; justify-content: center;
}
.tena-capture__frame::before,
.tena-capture__frame::after {
    content: '';
    position: absolute;
    width: 26px; height: 26px;
    border: 2px solid var(--tena-gold);
}
.tena-capture__frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tena-capture__frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.tena-capture__hint {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(8, 34, 24, 0.6);
    color: var(--tena-white);
    font-size: 0.78rem;
    font-weight: 600;
}
.tena-capture__status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.tena-capture__rail {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.tena-capture__rail .tena-thumb { flex: 0 0 auto; width: 84px; }
.tena-capture__controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}
/* Photo/video mode switch. One shutter that does what the selected mode
   says, replacing a layout where the dominant round button always took
   stills and video hid in a smaller button beside it. Existing tokens
   only. (#210 follow-up) */
.tena-capture__modes {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.75rem auto 0.5rem;
    padding: 0.2rem;
    background: var(--tena-surface-2);
    border-radius: var(--r-pill);
    width: fit-content;
}
.tena-capture__mode {
    min-height: 36px;
    padding: 0.35rem 1.1rem;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--tena-ink-2);
    font-family: var(--tena-font);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-capture__mode.is-active {
    background: var(--tena-white);
    color: var(--tena-green-deep);
    box-shadow: var(--shadow-sm);
}
.tena-capture__mode:disabled { opacity: 0.45; cursor: not-allowed; }
.tena-capture__modehint {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--tena-muted);
}
/* Video mode: the core turns gold, then a red square while recording, so
   the shutter itself says what pressing it will do. */
.tena-shutter.is-video .tena-shutter__core { background: var(--tena-gold); }
.tena-shutter.is-recording .tena-shutter__core {
    background: var(--tena-danger);
    border-radius: var(--r-xs);
    transform: scale(0.55);
}

.tena-capture__record { justify-self: start; }
.tena-capture__spacer { display: block; }

/* Round shutter button. */
.tena-shutter {
    justify-self: center;
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 4px solid var(--tena-white);
    background: var(--tena-gold);
    box-shadow: 0 0 0 2px var(--tena-border-strong);
    cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast);
}
.tena-shutter:hover:not(:disabled) { transform: scale(1.05); }
.tena-shutter:active:not(:disabled) { transform: scale(0.95); }
.tena-shutter:disabled { opacity: 0.45; cursor: default; }
.tena-shutter__core {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--tena-gold);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.tena-capture__videoprev-label {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--tena-muted); margin: 0 0 0.5rem;
}
.tena-capture__videoprev-el {
    width: 100%; max-width: 420px; aspect-ratio: 4/3;
    background: #000; border-radius: var(--r-sm);
}

@media (max-width: 640px) {
    .tena-capture {
        position: fixed;
        inset: 0;
        z-index: 1200;
        max-width: none;
        gap: 0;
        background: #000;
        /* Safety valve. This is a fixed full-screen column, so anything
           that overflows is unreachable: there is no page behind it to
           scroll. Recording a video used to push 130px past the viewport
           with overflow visible, stranding whatever fell off the bottom. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tena-capture__bar {
        flex: none;
        padding: 0.6rem 0.9rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__back { color: var(--tena-white); }
    .tena-capture__back:hover { background: rgba(255, 255, 255, 0.12); }
    .tena-capture__count { color: var(--tena-white); }
    .tena-capture__intro { display: none; }
    .tena-capture__stage {
        flex: 1 1 auto;
        /* A floor, not 0. The stage was the only flexible child, so once
           the video preview appeared it absorbed the whole squeeze and
           collapsed to 0px — the camera vanished and could not be
           scrolled back to. (#210 follow-up) */
        min-height: 34vh;
        aspect-ratio: auto;
        border-radius: 0;
    }
    .tena-capture__status {
        flex: none;
        align-items: center;
        padding: 0.5rem 0.9rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__status .tena-help { color: rgba(255, 255, 255, 0.85); }
    .tena-capture__rail {
        flex: none;
        padding: 0.5rem 0.9rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__rail .tena-thumb { width: 64px; }
    .tena-capture__controls {
        flex: none;
        padding: 0.75rem 0.9rem 1rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__videoprev {
        flex: none;
        /* Capped so a recorded clip cannot take the screen from the
           camera. It scrolls inside itself if the player is taller. */
        max-height: 34vh;
        overflow-y: auto;
        padding: 0.75rem 0.9rem;
        background: #000;
    }
    .tena-capture__videoprev-label { color: rgba(255, 255, 255, 0.7); }
}

/* ── KYC capture framing guides (#64) ────────────────────────
   A dim mask + a document/face guide overlaid on the live camera so the
   subject lands square and in focus. Shared by the ID step (rounded ID-aspect
   rect) and the selfie step (oval face guide). */
.tena-capture-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: var(--r-sm);
    overflow: hidden;
}
.tena-capture-frame__video,
.tena-capture-frame__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tena-capture-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tena-capture-guide__box {
    width: 82%;
    aspect-ratio: 1.586 / 1;   /* ID-1 card proportions */
    border: 2px solid var(--tena-gold);
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 100vmax rgba(8, 34, 24, 0.45);  /* dim everything outside the box */
}
.tena-capture-guide--face .tena-capture-guide__box {
    width: 64%;
    aspect-ratio: 3 / 4;
    border-radius: 50%;
}
.tena-capture-guide__hint {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    background: rgba(8, 34, 24, 0.65);
    color: var(--tena-white);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Category step: tappable parent cards (reuse the homepage tile visuals) with
   a 2-up mobile grid, then leaf categories as chips. Replaces the native
   <select> + "leaf categories" jargon + native validation bubble. (#59) */
.tena-cat-pick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.25rem;
}
@media (min-width: 560px) { .tena-cat-pick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) { .tena-cat-pick-grid { grid-template-columns: repeat(4, 1fr); } }
.tena-cat-pick {
    appearance: none;
    border: none;
    background: none;
    display: block;
    width: 100%;
    padding: 0.4rem;
    border-radius: var(--r);
    cursor: pointer;
    text-align: center;
    transition: background var(--t-fast), box-shadow var(--t-fast);
}
/* The tile sub-parts are <span>s here (a <div> can't live inside a <button>),
   so force the block layout the homepage tile gets from its <div>s. */
.tena-cat-pick .tena-category-tile__image,
.tena-cat-pick .tena-category-tile__placeholder,
.tena-cat-pick .tena-category-tile__name { display: block; }
.tena-cat-pick:hover { background: var(--tena-surface-2); }
.tena-cat-pick.is-active {
    background: var(--tena-green-tint);
    box-shadow: inset 0 0 0 2px var(--tena-green);
}
.tena-cat-pick.is-active .tena-category-tile__name {
    color: var(--tena-green-deep);
    font-weight: 700;
}

/* Subcategory chips, revealed once a parent card is chosen. (#59) */
.tena-subcats { margin-top: 1.25rem; }
.tena-subcats__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tena-muted);
    margin: 0 0 0.6rem;
}
.tena-subcats__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Inline field error — replaces the browser's native validation bubble. (#59) */
.tena-field-error {
    color: var(--tena-danger);
    background: var(--tena-danger-bg);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 1rem;
}

/* ── Chat ────────────────────────────────────────────────── */
.tena-chat {
    background: var(--tena-bg);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    padding: 1rem;
    height: 460px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tena-chat-msg {
    max-width: 75%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--r-lg);
    font-size: 0.92rem;
    line-height: 1.4;
    align-self: flex-start;
    background: var(--tena-white);
    color: var(--tena-ink);
    border: 1px solid var(--tena-border);
    border-bottom-left-radius: var(--r-xs);
}
.tena-chat-msg.is-mine {
    align-self: flex-end;
    background: var(--tena-green);
    color: var(--tena-white);
    border-color: var(--tena-green);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-xs);
}
.tena-chat-msg.is-system {
    align-self: center;
    background: transparent;
    border: none;
    color: var(--tena-muted);
    font-size: 0.78rem;
}
.tena-chat-time { font-size: 0.7rem; opacity: 0.7; margin-top: 0.2rem; }

.tena-chat-violation {
    background: var(--tena-danger-bg);
    color: var(--tena-danger);
    border: 1px solid rgba(192, 65, 62, 0.3);
    border-radius: var(--r-sm);
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    align-self: stretch;
}

/* ── KYC pair (admin) ────────────────────────────────────── */
.tena-kyc-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 700px) { .tena-kyc-pair { grid-template-columns: 1fr; } }

.tena-kyc-image {
    aspect-ratio: 4/3;
    background: var(--tena-surface-2);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
}
.tena-kyc-image img { width: 100%; height: 100%; object-fit: cover; }
.tena-kyc-image-label {
    position: absolute; top: 0.6rem; left: 0.6rem;
    background: rgba(15, 22, 18, 0.78);
    color: var(--tena-white);
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-xs);
    font-size: 0.75rem;
    font-weight: 600;
}

.tena-score {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    margin: 1.25rem 0;
}
.tena-score-bar {
    flex: 1;
    height: 6px;
    background: var(--tena-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.tena-score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tena-danger) 0%, var(--tena-warning) 50%, var(--tena-success) 100%);
}
.tena-score-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tena-ink);
    min-width: 56px;
    text-align: right;
}

/* ── Footer — clean, functional ──────────────────────────── */
.tena-footer {
    background: var(--tena-white);
    border-top: 1px solid var(--tena-border);
    padding: 2.5rem 0 1.5rem;
    margin-top: 4rem;
}
.tena-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 800px) {
    .tena-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .tena-footer-grid { grid-template-columns: 1fr; }
}
.tena-footer h5 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tena-muted);
    margin: 0 0 0.85rem;
}
.tena-footer ul { list-style: none; padding: 0; margin: 0; }
.tena-footer li { margin-bottom: 0.5rem; }
.tena-footer a {
    color: var(--tena-ink-2);
    font-size: 0.9rem;
    text-decoration: none;
}
.tena-footer a:hover { color: var(--tena-green); text-decoration: underline; }

.tena-footer-tagline {
    color: var(--tena-muted);
    font-size: 0.9rem;
    max-width: 32ch;
    margin: 0.5rem 0 0;
}

.tena-footer-bottom {
    border-top: 1px solid var(--tena-border);
    padding-top: 1.25rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--tena-muted);
    font-size: 0.82rem;
}

/* Footer brand column logo + social row */
.tena-footer-brand-logo {
    height: 40px;
    width: auto;
    display: block;
    margin-bottom: 0.85rem;
}
.tena-footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}
.tena-footer-social a {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tena-border);
    border-radius: 50%;
    color: var(--tena-ink-2);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tena-footer-social a:hover {
    color: var(--tena-green);
    border-color: var(--tena-green);
    text-decoration: none;
}
.tena-footer-social svg { width: 16px; height: 16px; }

/* ── Page title with gold accent rule ──────────────────────
   The rule sits above the title text and matches its width
   because the title is inline-block. */
.tena-page-rule {
    display: inline-block;
}

/* ── Admin shell ─────────────────────────────────────────── */
.tena-admin {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--tena-bg);
}
.tena-admin-side {
    background: var(--tena-white);
    border-right: 1px solid var(--tena-border);
    padding: 1.5rem 0.75rem;
    display: flex;
    flex-direction: column;
}
.tena-admin-side .tena-brand {
    padding-inline: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}
.tena-admin-nav {
    list-style: none; padding: 0; margin: 0; flex: 1;
}
.tena-admin-nav a {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--r-sm);
    color: var(--tena-ink-2);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.1rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-admin-nav a:hover { background: var(--tena-surface-2); color: var(--tena-ink); text-decoration: none; }
.tena-admin-nav a.is-active {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font-weight: 600;
}
.tena-admin-nav-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit;
}
.tena-admin-main { padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem); overflow-x: hidden; }

/* ── Seller shell (sits under the public navbar) ─────────── */
.tena-seller-shell {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: 0;
    min-height: calc(100vh - 200px);
    background: var(--tena-bg);
}
.tena-seller-side {
    background: var(--tena-white);
    border-right: 1px solid var(--tena-border);
    padding: 1.5rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    /* Pinned below the (sticky) top bar, exactly as tall as what is left, so
       the column never moves with the page. It scrolls inside itself only on
       a window too short to show every row; the content pane does the
       scrolling. Pinned at top: 0 it slid under the bar as the page moved. */
    position: sticky;
    top: var(--tena-navbar-h);
    height: calc(100vh - var(--tena-navbar-h));
    overflow-y: auto;
}
.tena-seller-side-header {
    padding: 0 0.85rem 1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--tena-border);
}
.tena-seller-workspace-label {
    font: 700 0.7rem var(--tena-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tena-muted);
    margin-bottom: 0.35rem;
}
.tena-seller-side-name {
    font: 600 1.02rem var(--tena-font);
    color: var(--tena-green-deep);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-seller-side-meta {
    font-size: 0.78rem;
    color: var(--tena-muted);
    margin-top: 0.15rem;
}

.tena-seller-nav-section {
    font: 700 0.68rem var(--tena-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tena-muted);
    padding: 1rem 0.85rem 0.4rem;
}
.tena-seller-nav { list-style: none; padding: 0; margin: 0; }
.tena-seller-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    color: var(--tena-ink-2);
    font: 500 0.92rem var(--tena-font);
    text-decoration: none;
    margin-bottom: 0.1rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-seller-nav a:hover {
    background: var(--tena-surface-2);
    color: var(--tena-ink);
    text-decoration: none;
}
.tena-seller-nav a.is-active {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font-weight: 600;
}
.tena-seller-nav-icon {
    width: 18px; height: 18px;
    color: inherit;
    flex-shrink: 0;
}
.tena-seller-nav a.is-active .tena-seller-nav-icon { color: var(--tena-green); }

.tena-seller-main {
    padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem);
    min-width: 0;
    overflow-x: hidden;
}

/* Workspace nav disclosure. The <details> ships open; a tiny synchronous script
   in the shell removes [open] below 992px so mobile starts collapsed (no flash,
   no force-open hack — the native open state paints reliably on every browser).
   On desktop it stays open and the slim bar is hidden. On mobile it becomes a
   slim collapsible context bar so content starts near the top (#53). */
.tena-ws-bar { display: none; }

@media (max-width: 991.98px) {
    /* Single column; pin the nav row to its content (auto) so a short page's
       leftover min-height inflates the main row, not the slim bar. */
    .tena-seller-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .tena-seller-side {
        position: static;
        height: auto;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--tena-border);
        overflow: visible;
    }
    /* Slim context bar = the <summary>. Tap to reveal the full workspace nav. */
    .tena-ws-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 48px;
        padding: 0.6rem 1rem;
        cursor: pointer;
        list-style: none;
        user-select: none;
        background: var(--tena-white);
        color: var(--tena-green-deep);
        font: 600 0.98rem var(--tena-font);
    }
    .tena-ws-bar::-webkit-details-marker { display: none; }
    .tena-ws-bar-context {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tena-ws-bar-menu {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex-shrink: 0;
        color: var(--tena-muted);
        font: 600 0.82rem var(--tena-font);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .tena-ws-bar-chevron { transition: transform var(--t-fast); }
    .tena-ws-disclosure[open] .tena-ws-bar-chevron { transform: rotate(180deg); }
    .tena-ws-disclosure[open] .tena-ws-bar { border-bottom: 1px solid var(--tena-border); }
    /* Collapsed by default on mobile (native <details>); revealed below the bar. */
    .tena-ws-disclosure > .tena-ws-body { display: none; }
    .tena-ws-disclosure[open] > .tena-ws-body {
        display: block;
        padding: 0.5rem 0.5rem 0.75rem;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tena-seller-side-header { display: none; }
    .tena-seller-main { padding: 1.25rem 1rem 2.5rem; }
}

/* ── Seller dashboard polish ─────────────────────────────── */
.tena-seller-greeting {
    background: var(--tena-green-tint);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.tena-seller-greeting-text { min-width: 0; flex: 1; }
.tena-seller-greeting-hello {
    font: 700 1.65rem var(--tena-font);
    color: var(--tena-green-deep);
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
}
.tena-seller-greeting-sub {
    font-size: 0.95rem;
    color: var(--tena-ink-2);
    margin: 0;
}

.tena-seller-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
/* A stat that is also the way to its list: icon, label over value, chevron.
   Rows on a phone, boxes on a desktop, the same markup for both. */
a.tena-seller-stat { text-decoration: none; }
.tena-seller-stat.tena-seller-stat--card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.9rem;
    padding: 1.1rem 1.25rem;
}
.tena-seller-stat--card .tena-seller-stat-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
}
.tena-seller-stat--card .tena-seller-stat-icon svg { width: 20px; height: 20px; }
.tena-seller-stat--card .tena-seller-stat-value { font-size: 1.55rem; margin-top: 0.15rem; white-space: nowrap; }
.tena-seller-stat--card .tena-seller-stat-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Money cards: two wide ones under the three counts, never five in a row. */
.tena-seller-stats--money { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tena-seller-stat-arrow { color: var(--tena-muted); display: inline-flex; }
a.tena-seller-stat:hover .tena-seller-stat-arrow { color: var(--tena-green-deep); }
@media (max-width: 600px) {
    /* Counts: a compact row of three so the list below stays in reach.
       Icon over label over value, no chevron; the whole card still links. */
    .tena-seller-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .tena-seller-stat.tena-seller-stat--card {
        grid-template-columns: 1fr;
        row-gap: 0.35rem;
        padding: 0.75rem 0.6rem;
        text-align: center;
        justify-items: center;
    }
    .tena-seller-stat--card .tena-seller-stat-icon { width: 34px; height: 34px; }
    .tena-seller-stat--card .tena-seller-stat-icon svg { width: 17px; height: 17px; }
    .tena-seller-stat--card .tena-seller-stat-label { font-size: 0.62rem; letter-spacing: 0.05em; max-width: 100%; }
    .tena-seller-stat--card .tena-seller-stat-value { font-size: 1.2rem; margin-top: 0; }
    .tena-seller-stat--card .tena-seller-stat-arrow { display: none; }
    /* Money: one per row, the amount needs the width. */
    .tena-seller-stats--money { grid-template-columns: 1fr; }
    .tena-seller-stats--money .tena-seller-stat.tena-seller-stat--card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        text-align: left; justify-items: stretch; padding: 0.8rem 1rem;
    }
    .tena-seller-stats--money .tena-seller-stat-arrow { display: inline-flex; }
}
.tena-seller-stat {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.tena-seller-stat:hover {
    border-color: var(--tena-border-strong);
    box-shadow: var(--shadow-sm);
}
.tena-seller-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.tena-seller-stat-label {
    font: 600 0.74rem var(--tena-font);
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.tena-seller-stat-icon {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
}
.tena-seller-stat-icon svg { width: 16px; height: 16px; }
.tena-seller-stat-value {
    font: 700 1.3rem var(--tena-font);
    color: var(--tena-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.tena-seller-stat-value-gold { color: var(--tena-gold-deep); }
.tena-seller-stat-sub {
    font-size: 0.82rem;
    color: var(--tena-muted);
}

.tena-seller-section {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.tena-seller-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.tena-seller-section-title {
    font: 700 1.05rem var(--tena-font);
    color: var(--tena-green-deep);
    margin: 0;
}
.tena-seller-section-link {
    font: 600 0.85rem var(--tena-font);
    color: var(--tena-green);
    text-decoration: none;
}
.tena-seller-section-link:hover { color: var(--tena-green-deep); text-decoration: underline; }

.tena-seller-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--tena-muted);
    font-size: 0.95rem;
}
/* Empty state: icon, one line, one action. Fills the box a list would. */
.tena-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem 2.75rem;
    background: var(--tena-bg);
    border-radius: var(--r);
}
.tena-empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.5rem;
}
.tena-empty-icon svg { width: 30px; height: 30px; }
.tena-empty-title {
    font: 600 1.1rem var(--tena-font);
    color: var(--tena-ink);
    margin: 0;
}
.tena-empty .tena-btn { margin-top: 0.75rem; }
/* The page's one heading: a greeting above the numbers. */
.tena-seller-hello {
    font: 700 clamp(1.5rem, 2.4vw, 1.9rem) var(--tena-font);
    color: var(--tena-green-deep);
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}

.tena-seller-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}
.tena-seller-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    color: var(--tena-ink);
    text-decoration: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tena-seller-action:hover {
    border-color: var(--tena-green);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-seller-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--tena-gold-tint);
    color: var(--tena-gold-deep);
    flex-shrink: 0;
}
.tena-seller-action-icon-green {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
}
.tena-seller-action-icon svg { width: 20px; height: 20px; }
.tena-seller-action-text { min-width: 0; flex: 1; }
.tena-seller-action-title {
    font: 600 0.98rem var(--tena-font);
    margin: 0;
    color: inherit;
}
.tena-seller-action-sub {
    font-size: 0.82rem;
    color: var(--tena-muted);
    margin: 0.15rem 0 0;
}

/* ── Wallet page ─────────────────────────────────────────── */
.tena-wallet-balance-card {
    position: relative;
    background: var(--tena-green-deep);
    color: var(--tena-white);
    border-radius: var(--r-lg);
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.tena-wallet-balance-card { position: relative; }
.tena-wallet-balance-label {
    font: 600 0.78rem var(--tena-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.5rem;
    position: relative;
}
.tena-wallet-balance-amount {
    font: 800 2.5rem var(--tena-font);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    position: relative;
}
.tena-wallet-balance-currency {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tena-gold);
    margin-right: 0.45rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tena-wallet-balance-sub {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.65rem 0 0;
    position: relative;
}
.tena-wallet-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    position: relative;
    flex-wrap: wrap;
}
.tena-wallet-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--tena-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-pill);
    font: 600 0.85rem var(--tena-font);
    text-decoration: none;
    transition: background var(--t-fast);
}
.tena-wallet-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--tena-white);
    text-decoration: none;
}

.tena-tx-table {
    width: 100%;
    border-collapse: collapse;
}
.tena-tx-table thead th {
    text-align: left;
    font: 700 0.72rem var(--tena-font);
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--tena-border);
}
.tena-tx-table tbody td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--tena-border);
    font-size: 0.92rem;
    color: var(--tena-ink);
    vertical-align: middle;
}
.tena-tx-table tbody tr:last-child td { border-bottom: 0; }
.tena-tx-table tbody tr:hover { background: var(--tena-surface-2); }
.tena-tx-amount {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tena-tx-amount-credit { color: var(--tena-success); }
.tena-tx-amount-debit { color: var(--tena-danger); }
.tena-tx-date {
    color: var(--tena-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}
.tena-tx-type-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: var(--r-pill);
    font: 700 0.65rem var(--tena-font);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tena-tx-type-credit { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-tx-type-debit { background: var(--tena-danger-bg); color: var(--tena-danger); }
.tena-tx-type-reserve { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-tx-type-release { background: var(--tena-info-bg); color: var(--tena-info); }
/* Seller earning status pills (escrow feature) — reuse existing semantic tokens */
.tena-tx-type-held { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-tx-type-cleared { background: var(--tena-info-bg); color: var(--tena-info); }
.tena-tx-type-disbursed { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-tx-type-frozen { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-tx-type-refunded { background: var(--tena-danger-bg); color: var(--tena-danger); }

@media (max-width: 575.98px) {
    .tena-wallet-balance-card { padding: 1.5rem 1.25rem; }
    .tena-wallet-balance-amount { font-size: 1.9rem; }
    .tena-tx-table thead { display: none; }
    .tena-tx-table tbody td {
        display: block;
        border-bottom: 0;
        padding: 0.25rem 0;
    }
    .tena-tx-table tbody tr {
        display: block;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--tena-border);
    }
}

.tena-stat {
    padding: 1.25rem;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
}
.tena-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tena-stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--tena-ink);
    margin: 0.25rem 0 0;
    letter-spacing: -0.02em;
}
.tena-stat-trend { font-size: 0.82rem; color: var(--tena-success); margin-top: 0.1rem; }

/* ── Tables ──────────────────────────────────────────────── */
.tena-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
}
.tena-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tena-muted);
    background: var(--tena-bg);
    border-bottom: 1px solid var(--tena-border);
}
.tena-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--tena-border);
    color: var(--tena-ink);
    font-size: 0.92rem;
}
.tena-table tr:last-child td { border-bottom: none; }
.tena-table tr:hover td { background: var(--tena-bg); }

/* A data table that scrolls inside itself, so its column headings stay in
   view whichever row is being read. The page used to do the scrolling and
   the headings left the screen after a dozen rows. The old wrapper was
   overflow-x:auto, which also makes the wrapper the box a sticky heading
   sticks to, so sticky alone could never work there; one box that scrolls
   both ways keeps the headings pinned and the sideways scrollbar on screen
   instead of below the last row. Short tables never reach the cap and look
   as they did. The cap leaves room for the pager and padding under the
   table (~100px): with a taller box, scrolling to the pager pushed the
   headings back off the top of the window. New class, existing tokens. */
.tena-table-scroll {
    overflow: auto;
    max-height: calc(100vh - var(--tena-navbar-h) - 8rem);
    max-height: calc(100dvh - var(--tena-navbar-h) - 8rem);
}
.tena-admin .tena-table-scroll {          /* the admin shell has no top bar */
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
}
.tena-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* A collapsed border stays with the table and scrolls away from a
       sticky cell; the rule under the headings is drawn on the cell. */
    box-shadow: inset 0 -1px 0 var(--tena-border);
}
/* .tena-table's frame moves to the box, so its rounded corners hold still
   while the rows move under them. */
.tena-table-scroll:has(> .tena-table) {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
}
.tena-table-scroll > .tena-table { border: 0; border-radius: 0; overflow: visible; }
.tena-table-scroll > .tena-tx-table thead th { background: var(--tena-surface); }
/* On a phone .tena-tx-table becomes a stack of cards with no headings: a
   box scrolling inside the page would only get in the way there. */
@media (max-width: 575.98px) {
    .tena-table-scroll:has(> .tena-tx-table) { max-height: none; overflow: visible; }
}

/* ── Wallet card ─────────────────────────────────────────── */
.tena-wallet-card {
    background: var(--tena-green-deep);
    color: var(--tena-white);
    padding: 1.5rem;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.tena-wallet-label {
    color: var(--tena-gold);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.tena-wallet-amount {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--tena-white);
    margin: 0.4rem 0 0;
    letter-spacing: -0.02em;
}
.tena-wallet-amount .tena-currency {
    font-size: 0.5em;
    color: var(--tena-gold);
    margin-left: 0.4rem;
    font-weight: 500;
}

/* ── Map placeholder ─────────────────────────────────────── */
.tena-map {
    height: 340px;
    background:
        linear-gradient(135deg, var(--tena-surface-2) 25%, transparent 25%),
        linear-gradient(225deg, var(--tena-surface-2) 25%, transparent 25%),
        linear-gradient(45deg, var(--tena-surface-2) 25%, transparent 25%),
        linear-gradient(315deg, var(--tena-surface-2) 25%, var(--tena-bg) 25%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border-radius: var(--r);
    border: 1px solid var(--tena-border);
    position: relative;
}
.tena-map::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    transform: translate(-50%, -100%) rotate(-45deg);
    background: var(--tena-gold);
    border-radius: 50% 50% 50% 0;
    transform-origin: bottom;
    box-shadow: 0 6px 12px -2px rgba(201, 162, 39, 0.5);
}

/* ── Mobile bottom nav ───────────────────────────────────── */
.tena-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    box-sizing: border-box;
    height: calc(var(--tena-bottom-nav-h) + env(safe-area-inset-bottom)); /* single source, see body vars (#258) */
    background: var(--tena-white);
    border-top: 1px solid var(--tena-border);
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    z-index: 50;
}
.tena-bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.4rem 0.6rem;
    color: var(--tena-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--r-sm);
    /* Equal slots, whatever the label says. min-width:0 is the part that
       matters: without it a flex item refuses to shrink below its own text, so
       "Parcourir" and "Connexion" took more than a fifth each and pushed the
       raised Sell button off the bar's centre in French. (#263) */
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.tena-bottom-nav-item.is-active { color: var(--tena-green-deep); }
/* The Sell control is a labelled item like its neighbours: the anchor is the
   column and the gold circle is the icon slot inside it. It used to BE the
   circle, which is why it could not carry a caption and was the only item in
   the bar with no visible word. (#263) */
.tena-bottom-nav-item.is-sell {
    color: var(--tena-green-deep);
    /* The circle is 26px taller than a plain icon, so without a raise its
       caption would hang well below the other four. Raising the whole column
       lifts the caption back towards their line while keeping the circle
       floating above the bar. */
    transform: translateY(-14px);
    padding-inline: 0.2rem;
    min-height: 44px;
}
.tena-bottom-nav-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    box-shadow: var(--shadow);
}
.tena-bottom-nav-fab svg { width: 24px; height: 24px; }
.tena-bottom-nav-icon { font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.tena-bottom-nav-icon svg { width: 22px; height: 22px; }

@media (max-width: 767.98px) {
    /* 73px held an unlabelled 56px circle. The circle is 48px now and has a
       caption under it, and the bar has to hold both. (#263) */
    body { --tena-bottom-nav-h: 78px; }
    body.tena-page-bare { --tena-bottom-nav-h: 0px; } /* bare chrome has no bottom nav (#112) */
    .tena-bottom-nav { display: flex; }
    /* The bottom nav is fixed, so reserve space at the end of the page for both
       the main content and the footer to clear it (#102c, and the footer no
       longer floats mid-page on scroll). The reserve must clear not just the
       ~73px nav bar but the Sell FAB, which is translated 12px above it — at
       4.5rem the last content row was clipped by the FAB's raised top. 6rem
       clears the FAB and its shadow (audit §6.2c). */
    body { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}

/* Bare-chrome pages (checkout) drop the bottom nav, so the reserved space above
   would leave dead whitespace at the foot of the page — reclaim it (#112). */
body.tena-page-bare { padding-bottom: 0; }

/* Bottom-nav unread badge (notifications / chat) — sits on the icon. */
.tena-bn-badge {
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Something in the account needs doing (#307: the email is unproven). A gold
   dot on the avatar and on the bottom nav's "You", the badge's colour without
   a number — there is one thing, not a count. */
.tena-avatar { position: relative; }
.tena-avatar-dot,
.tena-bn-dot {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--tena-gold);
    box-shadow: 0 0 0 2px var(--tena-white);
}
.tena-avatar-dot { top: -1px; right: -1px; }
.tena-avatar-dot--inline { position: static; margin-left: auto; box-shadow: none; }
.tena-bn-dot { top: -2px; left: 50%; margin-left: 6px; }

/* Mobile sticky Buy bar on listing detail — revealed by JS when the in-page
   Buy button scrolls off, so the CTA is always one tap away (#1.1). */
.tena-listing-ctabar { display: none; }
@media (max-width: 860px) {
    .tena-listing-ctabar.is-visible {
        display: block;
        position: fixed; left: 0; right: 0;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 55;
        padding: 0.6rem 1rem;
        background: var(--tena-white);
        border-top: 1px solid var(--tena-border);
        box-shadow: 0 -6px 18px rgba(15, 61, 46, 0.10);
    }
    /* Lift the support launcher above the Buy bar while it's showing. */
    body.has-listing-ctabar .tena-asst-launcher {
        bottom: calc(144px + env(safe-area-inset-bottom));
    }
}

/* ── Support assistant (chat widget) ─────────────────────── */
.tena-asst-launcher {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--tena-green-deep); color: var(--tena-white);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(15, 61, 46, 0.32);
    transition: transform var(--t-fast), background var(--t-fast);
}
.tena-asst-launcher:hover { transform: translateY(-2px); background: #134434; }
.tena-asst-launcher svg { width: 26px; height: 26px; }
.tena-asst-launcher .tena-asst-dot {
    position: absolute; top: 10px; right: 10px; width: 10px; height: 10px;
    background: var(--tena-gold); border-radius: 50%; border: 2px solid var(--tena-green-deep);
}
@media (max-width: 767.98px) {
    /* Sit above the mobile bottom nav. */
    .tena-asst-launcher { bottom: 5rem; right: 1rem; }
}

.tena-asst-panel {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 61;
    width: 370px; max-width: calc(100vw - 2rem);
    height: 540px; max-height: calc(100vh - 2.5rem);
    background: var(--tena-white); border: 1px solid var(--tena-border);
    border-radius: var(--r-lg); box-shadow: 0 18px 50px rgba(15, 61, 46, 0.28);
    display: none; flex-direction: column; overflow: hidden;
}
.tena-asst-panel.is-open { display: flex; }
@media (max-width: 767.98px) {
    .tena-asst-panel {
        right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
        height: 80vh; border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
}

.tena-asst-head {
    background: var(--tena-green-deep);
    color: var(--tena-white); padding: 1rem 1.1rem;
    display: flex; align-items: center; gap: 0.7rem;
}
.tena-asst-head-title { font-family: var(--tena-font); font-weight: 700; font-size: 1rem; }
.tena-asst-head-sub { font-size: 0.76rem; opacity: 0.8; }
.tena-asst-head-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--tena-gold);
    color: var(--tena-green-deep); display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.tena-asst-close {
    margin-left: auto; background: rgba(255,255,255,0.14); border: none; color: #fff;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
}
.tena-asst-close:hover { background: rgba(255,255,255,0.26); }

.tena-asst-msgs {
    flex: 1; overflow-y: auto; padding: 1rem; display: flex;
    flex-direction: column; gap: 0.6rem; background: var(--tena-bg);
}
.tena-asst-msg {
    max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 14px;
    font-size: 0.9rem; line-height: 1.45; white-space: pre-line; word-wrap: break-word;
}
.tena-asst-msg-bot { align-self: flex-start; background: var(--tena-white); border: 1px solid var(--tena-border); border-bottom-left-radius: 4px; color: var(--tena-ink); }
.tena-asst-msg-user { align-self: flex-end; background: var(--tena-green-deep); color: var(--tena-white); border-bottom-right-radius: 4px; }

.tena-asst-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.4rem; }
.tena-asst-chip {
    background: var(--tena-white); border: 1px solid var(--tena-green); color: var(--tena-green-deep);
    border-radius: var(--r-pill); padding: 0.4rem 0.8rem; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.tena-asst-chip:hover { background: var(--tena-green-deep); color: var(--tena-white); }

.tena-asst-cta { padding: 0 1rem 0.6rem; }
.tena-asst-cta a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--tena-gold); color: var(--tena-green-deep);
    border-radius: var(--r-sm); padding: 0.55rem 0.95rem; font-size: 0.86rem;
    font-weight: 700; text-decoration: none;
}

.tena-asst-foot { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--tena-border); background: var(--tena-white); }
.tena-asst-input {
    flex: 1; border: 1px solid var(--tena-border); border-radius: var(--r-pill);
    padding: 0.6rem 0.95rem; font: inherit; font-size: 0.9rem; outline: none;
}
.tena-asst-input:focus { border-color: var(--tena-green); }
.tena-asst-send {
    border: none; background: var(--tena-green-deep); color: #fff; width: 42px; height: 42px;
    border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tena-asst-send:hover { background: #134434; }
.tena-asst-send svg { width: 18px; height: 18px; }

.tena-asst-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.7rem 0.9rem; background: var(--tena-white); border: 1px solid var(--tena-border); border-radius: 14px; }
.tena-asst-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--tena-muted); animation: tena-asst-bounce 1.2s infinite; }
.tena-asst-typing span:nth-child(2) { animation-delay: 0.15s; }
.tena-asst-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tena-asst-bounce { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* ── Flash messages / toasts ─────────────────────────────── */
.tena-flash-stack {
    /* Toast overlay — floats above content, never reserves layout space
       (so it can't push the seller/admin side panel down). */
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    width: min(420px, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    pointer-events: none;
}
.tena-flash-stack > .tena-flash { pointer-events: auto; }
/* The optional padded wrapper around the stack must not reserve space either. */
.tena-flash-stack-wrap { padding: 0 !important; }
@media (max-width: 640px) {
    .tena-flash-stack { top: 0.6rem; width: calc(100vw - 1rem); }
}

.tena-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-left: 4px solid var(--tena-muted);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    color: var(--tena-ink);
    font-size: 0.93rem;
    line-height: 1.45;
    position: relative;
    animation: tena-flash-in 280ms var(--ease);
}

.tena-flash-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tena-muted);
    background: var(--tena-surface-2);
}

.tena-flash-icon svg {
    width: 16px;
    height: 16px;
}

.tena-flash-body {
    flex: 1;
    min-width: 0;
}

.tena-flash-title {
    font-weight: 600;
    color: var(--tena-ink);
    margin-bottom: 0.1rem;
}

.tena-flash-message {
    color: var(--tena-ink-2);
}

.tena-flash-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--tena-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}

.tena-flash-dismiss:hover {
    background: var(--tena-surface-2);
    color: var(--tena-ink);
}

.tena-flash-dismiss svg { width: 14px; height: 14px; }

/* Variants */
.tena-flash-success { border-left-color: var(--tena-success); }
.tena-flash-success .tena-flash-icon { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-flash-success .tena-flash-title { color: var(--tena-success); }

.tena-flash-error,
.tena-flash-danger { border-left-color: var(--tena-danger); }
.tena-flash-error .tena-flash-icon,
.tena-flash-danger .tena-flash-icon { background: var(--tena-danger-bg); color: var(--tena-danger); }
.tena-flash-error .tena-flash-title,
.tena-flash-danger .tena-flash-title { color: var(--tena-danger); }

.tena-flash-warning { border-left-color: var(--tena-warning); }
.tena-flash-warning .tena-flash-icon { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-flash-warning .tena-flash-title { color: var(--tena-warning); }

.tena-flash-info { border-left-color: var(--tena-info); }
.tena-flash-info .tena-flash-icon { background: var(--tena-info-bg); color: var(--tena-info); }
.tena-flash-info .tena-flash-title { color: var(--tena-info); }

@keyframes tena-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tena-flash-out {
    to { opacity: 0; transform: translateY(-6px); height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; }
}

.tena-flash.is-dismissing {
    animation: tena-flash-out 240ms var(--ease) forwards;
    overflow: hidden;
}

/* ── Order timeline & status hero ─────────────────────────── */
.tena-order-hero {
    background: var(--tena-green-deep);
    color: var(--tena-white);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.tena-order-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    position: relative;
}

.tena-order-hero-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.4rem;
}

.tena-order-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--tena-font);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
}

.tena-order-hero-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}

.tena-order-hero-status.is-success  { color: #84e9af; }
.tena-order-hero-status.is-info     { color: #9bc7e0; }
.tena-order-hero-status.is-warning  { color: var(--tena-gold); }
.tena-order-hero-status.is-danger   { color: #ff9b98; }
.tena-order-hero-status.is-muted    { color: #c9d1cd; }

.tena-order-hero-amount {
    text-align: right;
}

.tena-order-hero-price {
    font-family: var(--tena-font);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--tena-white);
    letter-spacing: -0.02em;
}

.tena-order-hero-meta {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    position: relative;
}

.tena-order-hero-meta strong {
    color: var(--tena-white);
    font-weight: 600;
}

.tena-order-section {
    margin-bottom: 1rem;
}

.tena-order-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tena-muted);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.6rem;
}

.tena-order-section-head svg {
    width: 14px;
    height: 14px;
}

.tena-order-listing-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

a.tena-order-listing-card:hover { border-color: var(--tena-green); box-shadow: var(--shadow-sm); }

.tena-order-listing-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    background: var(--tena-surface-2);
}

.tena-order-listing-title {
    font-weight: 600;
    color: var(--tena-ink);
    text-decoration: none;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.3rem;
}

.tena-order-listing-title:hover { color: var(--tena-green); }

.tena-order-listing-meta {
    font-size: 0.82rem;
    color: var(--tena-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tena-order-address-card {
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    padding: 1.1rem 1.15rem;
}

.tena-order-address-line {
    display: block;
    line-height: 1.55;
}

.tena-order-address-line + .tena-order-address-line { margin-top: 0.05rem; }

.tena-order-address-name {
    font-weight: 600;
    color: var(--tena-ink);
}

.tena-order-address-phone { color: var(--tena-ink-2); }

.tena-order-address-loc {
    color: var(--tena-muted);
    font-size: 0.88rem;
}

/* ── Order page layout (order.php) ───────────────────────────
   Uses the workspace's full width: the order on the left, what to do about
   it in a right column. On a phone, one column in the order the buyer acts:
   next action, then the order, then receipts. */
.tena-order-page { max-width: 1180px; }

.tena-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.tena-order-layout > * { min-width: 0; }
.tena-order-layout .tena-order-section:last-child { margin-bottom: 0; }

.tena-order-next,
.tena-order-more {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.tena-order-next form { margin: 0; }

/* Pickup handover code (#312): buyer shows it, seller types or scans it. */
.tena-pickup-code { padding: 1.1rem 1.15rem; text-align: center; display: grid; gap: 0.6rem; justify-items: center; }
.tena-pickup-code-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tena-muted); }
.tena-pickup-code-digits { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.18em; color: var(--tena-green-deep); }
/* Seller's confirm-collection input: same monospace stack as the digits above; .is-otp already sizes/spaces it. */
.tena-pickup-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tena-pickup-code .tena-help { margin: 0; }
/* The scan landing page (pickup.php): which item is being handed over. */
.tena-pickup-landing-item { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.tena-pickup-landing-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.tena-pickup-code-qr svg { width: 168px; height: 168px; display: block; }
.tena-pickup-code-help { margin: 0; color: var(--tena-ink-2); font-size: 0.92rem; max-width: 30ch; }
.tena-pickup-code-form { width: 100%; display: grid; gap: 0.6rem; text-align: left; }
.tena-pickup-code-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tena-pickup-code-actions .tena-btn { flex: 1 1 10rem; }
.tena-pickup-scan { width: 100%; border-radius: var(--r-sm); background: var(--tena-ink); aspect-ratio: 1; object-fit: cover; }

@media (min-width: 1200px) {
    /* Row by row: each right-hand block lines up with the left-hand card
       beside it — actions with the item, receipt and report with the
       addresses. The left sections carry a heading the right blocks do
       not, so the right blocks start that heading's height lower. */
    .tena-order-layout {
        --tena-order-head: calc(0.78rem * 1.4 + 0.6rem);
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "item next" "track ." "addr more";
        align-items: start;
        column-gap: 1.25rem;
        /* Spacing sits on the blocks, not the grid: an order without
           tracking leaves the "track" row empty, and a grid gap would
           still be drawn around it. */
        row-gap: 0;
    }
    .tena-order-main { display: contents; }
    .tena-order-layout .tena-order-section { margin-bottom: 0; }
    .tena-order-item  { grid-area: item; }
    .tena-order-track { grid-area: track; }
    .tena-order-addr  { grid-area: addr; }
    .tena-order-track,
    .tena-order-addr,
    .tena-order-more { margin-top: 1rem; }
    .tena-order-next,
    .tena-order-more { padding-top: var(--tena-order-head); }
    .tena-order-next { grid-area: next; }
    .tena-order-more { grid-area: more; }
    /* Actions fill the item card's height: two buttons meet its top and
       bottom edges, a single one sits in the middle. */
    .tena-order-next { align-self: stretch; justify-content: space-between; }
    .tena-order-next > :only-child { margin-block: auto; }
    /* …and the item card takes the row's height when the buttons are the
       taller of the two, so both bottoms meet as well. */
    .tena-order-item { align-self: stretch; display: flex; flex-direction: column; }
    .tena-order-item .tena-order-listing-card { flex: 1; }
    .tena-order-layout--tall-next .tena-order-item { align-self: start; }
    .tena-order-layout--no-next { grid-template-areas: "item more" "track more" "addr more"; }
    .tena-order-layout--no-next .tena-order-more { margin-top: 0; }
    .tena-order-layout--no-more { grid-template-areas: "item next" "track ." "addr ."; }
    /* The card spans three rows; its extra height goes to the addresses row
       (1fr), not spread between item and addresses as a widened gap. */
    .tena-order-layout--tall-next { grid-template-areas: "item next" "track next" "addr next" ". more"; grid-template-rows: auto auto 1fr auto; }
    .tena-order-layout--tall-next .tena-order-next { align-self: start; justify-content: flex-start; }
    .tena-order-layout--single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "item" "track" "addr"; }
}

/* Addresses: one card, one row per place, a map beside its own text. */
.tena-order-address-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tena-muted);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.tena-order-address-row { display: grid; gap: 0.75rem; }
.tena-order-address-row + .tena-order-address-row {
    border-top: 1px solid var(--tena-border);
    margin-top: 1rem;
    padding-top: 1rem;
}
.tena-order-address-row .tena-map--static { margin-top: 0 !important; }
@media (min-width: 640px) {
    .tena-order-address-row--map {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }
}

/* A list of tappable rows in one card: receipt, report, payment screenshots. */
.tena-order-links {
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
}
.tena-order-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    min-height: 44px;
    color: var(--tena-ink);
    text-decoration: none;
    transition: background var(--t-fast);
}
.tena-order-link + .tena-order-link { border-top: 1px solid var(--tena-border); }
a.tena-order-link:hover { background: var(--tena-surface-2); }
.tena-order-link > svg:first-child { flex-shrink: 0; color: var(--tena-green); }
.tena-order-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.tena-order-link-title { font-weight: 600; font-size: 0.92rem; }
.tena-order-link-sub { font-size: 0.8rem; color: var(--tena-muted); }
.tena-order-link-end { flex-shrink: 0; color: var(--tena-muted); }
.tena-order-link--danger,
.tena-order-link--danger > svg:first-child { color: var(--tena-danger); }
.tena-order-link--warning { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-order-link--warning > svg:first-child { color: var(--tena-warning); }
.tena-order-proof { padding-block: 0.6rem; }
.tena-order-proof-thumb {
    width: 40px;
    height: 52px;
    object-fit: cover;
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
    background: var(--tena-surface-2);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .tena-order-hero { padding: 1.25rem; }
    .tena-order-hero-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .tena-order-hero-amount { text-align: left; }
}

/* ── Auth pages (login, register, password reset) ─────────── */
.tena-auth-shell {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--tena-bg);
}

.tena-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

.tena-auth-card::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--tena-green-deep);
}

.tena-auth-body {
    padding: 2rem 2rem 1.75rem;
}

.tena-auth-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.tena-auth-icon svg { width: 28px; height: 28px; }

.tena-auth-title {
    font-family: var(--tena-font);
    font-weight: 700;
    color: var(--tena-green-deep);
    font-size: 1.55rem;
    margin: 0 0 0.5rem;
    text-align: center;
    letter-spacing: -0.01em;
}

.tena-auth-subtitle {
    color: var(--tena-ink-2);
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.55;
}

.tena-auth-subtitle strong { color: var(--tena-green-deep); font-weight: 600; }

.tena-auth-footer {
    font-size: 0.9rem;
    color: var(--tena-muted);
    text-align: center;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tena-border);
}

.tena-auth-footer a {
    font-weight: 600;
    color: var(--tena-green-deep);
    text-decoration: none;
}

.tena-auth-footer a:hover { text-decoration: underline; }

.tena-auth-steps {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
    justify-content: center;
    color: var(--tena-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tena-auth-steps-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tena-border-strong);
}

.tena-auth-steps-dot.is-active { background: var(--tena-gold); }
.tena-auth-steps-dot.is-done   { background: var(--tena-green); }

.tena-auth-steps-line {
    width: 24px;
    height: 2px;
    background: var(--tena-border-strong);
}

.tena-auth-steps-line.is-done { background: var(--tena-green); }

/* ── Commission disclosure box (seller listing flow) ─────── */
.tena-commission-box {
    background: var(--tena-surface-2);
    border: 1px solid var(--tena-border);
    border-left: 4px solid var(--tena-gold);
    border-radius: var(--r-sm);
    padding: 1rem 1.15rem;
    font-size: 0.92rem;
    color: var(--tena-ink-2);
    margin-top: 1rem;
}
.tena-commission-box .tena-commission-net,
.tena-commission-net {
    color: var(--tena-green-deep);
    font-weight: 700;
}

/* Commission summary with hierarchy: "you receive" leads (large + bold), the
   sale price and commission are secondary muted lines beneath it. (#63) */
.tena-commission-summary { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.tena-commission-lead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
}
.tena-commission-lead-label {
    font-weight: 700;
    color: var(--tena-green-deep);
    font-size: 0.95rem;
}
.tena-commission-lead-amount {
    font-family: var(--tena-font);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--tena-green-deep);
}
/* "How fees work" under the fee breakdown (#249). Existing tokens only. */
.tena-commission-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tena-green-deep);
  text-decoration: underline;
}

.tena-commission-rows {
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--tena-border);
    display: flex; flex-direction: column; gap: 0.25rem;
}
.tena-commission-row {
    display: flex; justify-content: space-between; gap: 0.75rem;
    font-size: 0.85rem; color: var(--tena-muted);
}
.tena-commission-row dt, .tena-commission-row dd { margin: 0; }

/* Inline note under the order-timeline delivery step: courier ref (links to
   the tracking block) or a pending "dispatching soon" state. (#65) */
.tena-timeline-note {
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
    max-width: 110px;
    margin-top: 0.15rem;
    font-weight: 600;
    color: var(--tena-green);
    text-decoration: none;
}
a.tena-timeline-note:hover { text-decoration: underline; }
.tena-timeline-note--pending { color: var(--tena-gold-deep); }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Skip-to-content link: visually hidden until keyboard-focused, then pinned
   to the top-left so keyboard and screen-reader users jump past the nav. (#153) */
.tena-skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3.5rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: var(--tena-green);
    color: var(--tena-white);
    border-radius: var(--r-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.tena-skip-link:focus {
    top: 0.5rem;
    outline: 2px solid var(--tena-gold);
    outline-offset: 2px;
}

/* Gentle pulse for an in-progress status indicator (e.g. KYC under review).
   The reduced-motion block above neutralises it for users who opt out. (#123) */
@keyframes tena-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.12); opacity: 0.6; }
}
.tena-pulse { animation: tena-pulse 1.6s ease-in-out infinite; }

/* Workspace breadcrumb (seller/buyer shell). Tokens only. (#142) */
.tena-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--tena-muted);
    margin-bottom: 1rem;
}
.tena-breadcrumb a { color: var(--tena-green-deep); text-decoration: none; font-weight: 600; }
.tena-breadcrumb a:hover { text-decoration: underline; }
.tena-breadcrumb [aria-current="page"] { color: var(--tena-ink); font-weight: 600; }

/* Segmented two-option choice (registration role picker). Uses existing tokens only. */
.tena-segment { display:flex; gap:.5rem; margin-top:.4rem; }
.tena-segment-option { flex:1; }
.tena-segment-option input { position:absolute; opacity:0; pointer-events:none; }
.tena-segment-option span {
    display:block; text-align:center; padding:.7rem 1rem; cursor:pointer;
    border:1px solid var(--tena-border); border-radius:var(--r-sm);
    font-family:var(--tena-font); font-weight:600; color:var(--tena-ink-2);
    background:var(--tena-white); transition:all .15s ease;
}
.tena-segment-option input:checked + span {
    border-color:var(--tena-green-deep); background:var(--tena-green-tint);
    color:var(--tena-green-deep);
}
.tena-segment-option input:focus-visible + span { outline:2px solid var(--tena-gold); outline-offset:2px; }

/* ── Chat — clean messaging surface ───────────────────────────
   Tokens only; flat & professional (no gradients/glows). Used by
   /chat (inbox) and /chat/thread (conversation). */
.tena-chat-shell { max-width: 760px; margin: 0 auto; }

.tena-chat-back {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--tena-muted); font-size: 0.85rem; text-decoration: none;
    margin-bottom: 0.75rem;
}
.tena-chat-back:hover { color: var(--tena-green-deep); }
.tena-chat-back svg { width: 14px; height: 14px; }

/* Conversation context header (listing + who) */
.tena-chat-head {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: 0;
}
.tena-chat-head-img {
    width: 48px; height: 48px; border-radius: var(--r-sm);
    object-fit: cover; flex-shrink: 0; background: var(--tena-surface-2);
}
.tena-chat-head-icon {
    width: 48px; height: 48px; border-radius: var(--r-sm); flex-shrink: 0;
    background: var(--tena-green-tint); color: var(--tena-green-deep);
    display: inline-flex; align-items: center; justify-content: center;
}
.tena-chat-head-main { flex: 1; min-width: 0; }
.tena-chat-head-title {
    display: block; color: var(--tena-ink); font-weight: 600;
    font-size: 0.95rem; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tena-chat-head-title:hover { color: var(--tena-green-deep); }
.tena-chat-head-sub {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; color: var(--tena-muted); margin-top: 0.1rem;
}
.tena-chat-head-sub svg { width: 13px; height: 13px; color: var(--tena-green); }

/* Message stream — chat-app feel: subtle branded wallpaper, tails, day pills.
   The dot wallpaper is a deliberate, conventional chat backdrop (not the
   hero "AI" pattern) — kept very faint and in brand ink. */
.tena-chat-stream {
    position: relative;
    background-color: var(--tena-bg);
    background-image:
        radial-gradient(rgba(15, 61, 46, 0.045) 1px, transparent 1.5px),
        radial-gradient(rgba(15, 61, 46, 0.045) 1px, transparent 1.5px);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
    border: 1px solid var(--tena-border);
    height: 56vh; min-height: 380px;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1.1rem 1rem;
    display: flex; flex-direction: column; gap: 0.28rem;
}
.tena-chat-stream::-webkit-scrollbar { width: 7px; }
.tena-chat-stream::-webkit-scrollbar-thumb { background: rgba(15, 61, 46, 0.18); border-radius: 4px; }
.tena-chat-stream::-webkit-scrollbar-track { background: transparent; }
.tena-chat-stream:last-child,
.tena-chat-stream--end { border-radius: 0 0 var(--r) var(--r); }

.tena-chat-empty {
    margin: auto; text-align: center; color: var(--tena-muted);
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.tena-chat-empty svg { width: 40px; height: 40px; color: var(--tena-border-strong); }

/* Centered day separator ("Today" / "Yesterday" / date) */
.tena-chat-day {
    align-self: center;
    margin: 0.6rem 0 0.4rem;
    padding: 0.2rem 0.75rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-pill);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--tena-muted);
    box-shadow: 0 1px 2px rgba(15, 61, 46, 0.06);
}

.tena-chat-msg {
    position: relative;
    max-width: 74%;
    padding: 0.5rem 0.78rem 0.42rem;
    border-radius: 14px;
    font-size: 0.92rem; line-height: 1.42;
    word-wrap: break-word; white-space: pre-wrap;
    box-shadow: 0 1px 1.5px rgba(15, 61, 46, 0.12);
    animation: tena-chat-pop 0.16s ease-out;
}
@keyframes tena-chat-pop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.tena-chat-msg--mine {
    align-self: flex-end;
    background: var(--tena-green-deep); color: var(--tena-white);
    border-bottom-right-radius: 4px;
}
.tena-chat-msg--mine::after {
    content: ''; position: absolute; right: -5px; bottom: 0;
    border: 6px solid transparent;
    border-left-color: var(--tena-green-deep);
    border-bottom: 0; border-right: 0;
}
.tena-chat-msg--theirs {
    align-self: flex-start;
    background: var(--tena-white); color: var(--tena-ink);
    border-bottom-left-radius: 4px;
}
.tena-chat-msg--theirs::after {
    content: ''; position: absolute; left: -5px; bottom: 0;
    border: 6px solid transparent;
    border-right-color: var(--tena-white);
    border-bottom: 0; border-left: 0;
}
.tena-chat-msg--system {
    align-self: center; max-width: 85%; text-align: center;
    background: transparent; color: var(--tena-muted);
    font-size: 0.78rem; padding: 0.2rem 0.5rem;
    box-shadow: none; animation: none;
}
.tena-chat-msg--system::after { display: none; }
.tena-chat-time {
    display: block; font-size: 0.66rem; opacity: 0.62;
    margin-top: 0.18rem; text-align: right;
}
@media (prefers-reduced-motion: reduce) {
    .tena-chat-msg { animation: none; }
}

/* Composer */
.tena-chat-composer {
    display: flex; gap: 0.5rem; align-items: flex-end;
    padding: 0.75rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-top: 0;
    border-radius: 0 0 var(--r) var(--r);
}
.tena-chat-input {
    flex: 1; resize: none;
    border: 1px solid var(--tena-border-strong);
    border-radius: 22px;
    padding: 0.65rem 1rem;
    font: inherit; font-size: 0.92rem; line-height: 1.4;
    color: var(--tena-ink); background: var(--tena-surface-2);
    max-height: 120px;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.tena-chat-input:focus {
    outline: none; border-color: var(--tena-green);
    background: var(--tena-white);
    box-shadow: 0 0 0 2px rgba(15, 61, 46, 0.15);
}
.tena-chat-send {
    flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: var(--tena-green-deep); color: var(--tena-white);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), transform var(--t-fast);
}
.tena-chat-send:hover { background: var(--tena-green); }
.tena-chat-send:active { transform: scale(0.94); }
.tena-chat-send:disabled { opacity: 0.55; cursor: default; }
.tena-chat-send svg { width: 18px; height: 18px; }

.tena-chat-note {
    margin-top: 0.6rem; padding: 0.7rem 0.9rem;
    background: var(--tena-surface-2); color: var(--tena-ink-2);
    border-radius: var(--r-sm);
    font-size: 0.85rem; text-align: center;
}
.tena-chat-hint {
    margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--tena-muted);
    display: flex; align-items: flex-start; gap: 0.35rem;
}
.tena-chat-hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.1rem; color: var(--tena-green); }
.tena-chat-error {
    margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--tena-danger);
}

/* ── Receipt modal (iframe to receipt embed view) ── */
.tena-receipt-modal {
    width: min(780px, 96vw);
    height: 88vh;
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tena-surface-2);
}
.tena-receipt-modal::backdrop { background: rgba(15, 61, 46, 0.45); }
.tena-receipt-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--tena-white);
    color: var(--tena-ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tena-receipt-modal iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Two-pane chat (list left, conversation right) ── */
.tena-chat2 {
    display: grid;
    grid-template-columns: 340px 1fr;
    /* The row is as tall as this box and no taller. Left to `auto`, the row
       grew with the conversation: opening the location picker made the pane
       840px inside a 671px box that hides overflow, so the map's lower half
       and its Send button were cut off with no scrollbar. Phones never hit it
       because the open conversation is position:fixed there. */
    grid-template-rows: minmax(0, 1fr);
    height: calc(100vh - 130px);
    min-height: 480px;
    column-gap: 1rem;
}
/* A guest buyer's pickup chat (spec 2026-09-22) has no inbox beside it:
   the conversation card alone, full width. */
.tena-chat2--solo { grid-template-columns: 1fr; }
/* Two cards side by side, the list and the conversation, like the rest of
   the workspace. Each clips its own scrolling content. */
.tena-chat2__list,
.tena-chat2__conv {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
}
.tena-chat2__list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
/* The threads scroll; the head (title, search, chips) and the foot (pager)
   stay put, so the pager sits in one place whether there are 2 threads or 20. */
.tena-chat2__list-body { flex: 1; min-height: 0; overflow-y: auto; }
.tena-chat2__list-foot {
    flex: none;
    border-top: 1px solid var(--tena-border);
    padding: 0.5rem 0.75rem;
    background: var(--tena-surface);
}
.tena-chat2__list-foot .tena-pagination { margin-top: 0; }
.tena-chat2__list .tena-list-filters { margin: 0 1rem 0.75rem; padding: 0.6rem 0.65rem; flex-wrap: nowrap; }
.tena-chat2__list .tena-list-filters__field--wide { flex: 1 1 0; min-width: 0; }
/* Filter chips under the search: a scrollable row so RW labels never wrap. */
.tena-chip-row {
    display: flex;
    gap: 0.4rem;
    padding: 0 1rem 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.tena-chip-row::-webkit-scrollbar { display: none; }
.tena-chip-row .tena-chip { padding: 0.4rem 0.8rem; text-decoration: none; }
.tena-chip__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    font-size: 0.7rem; font-weight: 700; line-height: 1;
}
.tena-chip.is-active .tena-chip__count { background: var(--tena-gold); }
.tena-chat2__list-head { padding: 1rem 1rem 0.25rem; }
.tena-chat2__title { font-family: var(--tena-font); font-weight: 700; color: var(--tena-green-deep); margin: 0; font-size: 1.2rem; }
.tena-chat2__list .tena-chat-list { padding: 0.5rem; gap: 0.25rem; }
.tena-chat-item--active { background: var(--tena-green-tint); border-color: var(--tena-green); }
.tena-chat2__empty-list { padding: 2.5rem 1.25rem; text-align: center; }
.tena-chat2__conv { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tena-chat2__placeholder {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--tena-muted); padding: 2rem;
}
/* Conversation fills the right pane (override the standalone centered card). */
.tena-chat2__conv .tena-chat--pane {
    max-width: none; margin: 0; border: 0; border-radius: 0;
    height: 100%; width: 100%;
    /* The standalone card's min-height (540px) must not apply inside the
       pane: at 375x667 it pushed the composer 11px under the bottom nav. The
       pane is exactly as tall as its container, whatever that is. (#258) */
    min-height: 0;
}
.tena-chat2__conv .tena-chat--pane .tena-chat__body { max-height: none; min-height: 0; }

/* Chat reliability affordances (#36/#41) */
.tena-chat--pane { position: relative; }
.tena-chat__connlost {
    background: var(--tena-warning-bg); color: var(--tena-warning);
    font-size: 0.8rem; font-weight: 600; text-align: center;
    padding: 0.35rem 0.75rem;
}
.tena-chat__newmsg {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 5.25rem;
    z-index: 4; border: none; cursor: pointer;
    background: var(--tena-green-deep); color: var(--tena-white);
    border-radius: 999px; padding: 0.35rem 0.9rem;
    font: 600 0.82rem var(--tena-font); box-shadow: var(--shadow-sm);
}
.tena-chat__bubble.is-sending { opacity: 0.55; }
.tena-chat__seen { font-size: 0.72rem; color: var(--tena-muted); text-align: right; padding: 0.1rem 0.25rem 0.35rem; }
@media (max-width: 859px) {
    /* The inbox list flows with the page; the body's bottom-nav reserve
       already clears the nav. (Was calc(100vh - 110px): a constant that
       ignored the dashboard title bar, breadcrumb and the 73px bottom nav,
       so the pane ran 60px past the viewport and the composer sat below the
       fold on every phone. #258) */
    .tena-chat2 { grid-template-columns: 1fr; height: auto; min-height: 0; column-gap: 0; }
    .tena-chat2__list, .tena-chat2__conv { border: 0; border-radius: 0; overflow: visible; }
    .tena-chat2__list-body { overflow: visible; }
    /* The shared filters component stacks its button under the field on
       phones; let it, the pane is too narrow for one line. */
    .tena-chat2__list .tena-list-filters { flex-wrap: wrap; }
    /* one pane at a time on phones */
    .tena-chat2:not(.tena-chat2--has-conv) .tena-chat2__conv { display: none; }
    .tena-chat2--has-conv .tena-chat2__list { display: none; }
    /* An open conversation is pinned between the navbar and the bottom nav,
       so its height is whatever is actually left — no viewport maths. The
       stream scrolls inside; the composer is always on screen. z-index sits
       under both bars (50). */
    .tena-chat2--has-conv {
        position: fixed;
        top: var(--tena-navbar-h);
        left: 0; right: 0;
        bottom: calc(var(--tena-bottom-nav-h) + env(safe-area-inset-bottom));
        z-index: 40;
        background: var(--tena-surface);
    }
    .tena-chat2--has-conv .tena-chat2__conv { min-height: 0; height: 100%; }
    /* The support launcher would sit exactly on the Send button. */
    body.tena-chat-open .tena-asst-launcher { display: none; }
}

/* Inbox list */
.tena-chat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tena-chat-item {
    display: flex; gap: 0.75rem; align-items: center;
    padding: 0.7rem 0.9rem; text-decoration: none; color: inherit;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-chat-item:hover { border-color: var(--tena-border-strong); }
.tena-chat-item--unread { background: var(--tena-surface-2); border-color: var(--tena-border-strong); }
.tena-chat-item-img { width: 42px; height: 42px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.tena-chat-item-icon {
    width: 42px; height: 42px; border-radius: var(--r-sm); flex-shrink: 0;
    background: var(--tena-green-tint); color: var(--tena-green-deep);
    display: inline-flex; align-items: center; justify-content: center;
}
.tena-chat-item-body { flex: 1; min-width: 0; }
.tena-chat-item-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.tena-chat-item-name { color: var(--tena-ink); font-size: 0.9rem; font-weight: 600; }
.tena-chat-item-when { font-size: 0.72rem; color: var(--tena-muted); flex-shrink: 0; }
.tena-chat-item-preview {
    font-size: 0.82rem; color: var(--tena-ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem;
}
.tena-chat-item--unread .tena-chat-item-preview { color: var(--tena-ink); font-weight: 600; }
.tena-chat-item-badge {
    flex-shrink: 0;
    background: var(--tena-green-deep); color: var(--tena-white);
    font-size: 0.7rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--r-pill);
}
.tena-chat-item-tag { font-size: 0.68rem; color: var(--tena-muted); font-weight: 500; margin-left: 0.25rem; }

/* ============================================================
   Browse v2 — appended from tena-browse.css (2026-05-20)
   .tena-listing-card root scoped under .tena-listing-grid so the
   four pages still calling render_listing_card() keep the old look.
   ============================================================ */
/* ============================================================
   TENA — Browse page additions (v2)
   Append to /assets/css/tena-brand.css.
   Uses only existing --tena-* tokens.

   Design patterns applied from real marketplace cards:
   - Photo dominates card (no icon placeholders)
   - Condition tag as dark overlay at bottom-left of image (Vinted, Carousell)
   - Title gets 2 lines (eBay, Mercari) — more discoverable
   - Seller row at bottom (Depop, Mercari) — trust footer
   - "Verified" is a tiny check next to seller name, not a labeled pill
   ============================================================ */

/* ---------- Page toolbar (heading + sort) ---------- */
.tena-page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.tena-page-toolbar__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0;
}
.tena-page-toolbar__count {
  color: var(--tena-muted);
  font-weight: 400;
  font-size: 0.875rem;
  margin-left: 0.25rem;
}

.tena-sort {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 0.8125rem;
  color: var(--tena-ink);
  font-family: inherit;
  cursor: pointer;
}
.tena-sort:focus {
  outline: 2px solid var(--tena-green);
  outline-offset: 1px;
}

/* ---------- Filter chips ---------- */
.tena-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.tena-filter-chips a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--tena-ink);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tena-filter-chips a:hover {
  border-color: var(--tena-green);
  color: var(--tena-green);
}
.tena-filter-chips a.is-active {
  background: var(--tena-green);
  color: #fff;
  border-color: var(--tena-green);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--tena-green-tint);
}
.tena-filter-chips .tena-chip-check { flex: none; }

/* Result count + clear-all bar above the grid. (#67) */
.tena-browse-results {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.tena-browse-results__count {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tena-ink);
}
.tena-browse-results__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tena-green);
  text-decoration: none;
}
.tena-browse-results__clear:hover { text-decoration: underline; }

/* ---------- Listing grid ---------- */
.tena-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
@media (min-width: 768px) {
  .tena-listing-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
}

/* ---------- Listing card ----------
   REPLACES any existing .tena-listing-card block.
*/
.tena-listing-card {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tena-listing-card:hover {
  border-color: var(--tena-muted);
  text-decoration: none;
  color: inherit;
}

/* Image area */
.tena-listing-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tena-bg);
}
.tena-listing-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tena-listing-card:hover .tena-listing-card__image img {
  transform: scale(1.03);
}

/* Placeholder when image missing */
.tena-listing-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--tena-muted);
  background: var(--tena-bg);
}

/* Condition tag — bottom-left, dark green, low chrome */
/* Placement only. The grade colour comes from .tena-cond-new/-likenew/-good/
   -fair — the one mapping both card renderers share — so all four grades are
   distinct here too instead of one dark-green tag for everything. (#255) */
.tena-listing-card__condition {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  box-shadow: 0 2px 8px rgba(15, 22, 18, 0.18);
}

/* Photo count indicator — bottom-right of image */
.tena-listing-card__photo-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Save button — small, top-right, subtle */
.tena-listing-card__save {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tena-ink);
  font-size: 14px;
  transition: color 0.15s, transform 0.15s, background 0.15s;
}
.tena-listing-card__save:hover {
  background: #fff;
  color: var(--tena-gold-deep);
  transform: scale(1.06);
}
.tena-listing-card__save.is-saved {
  color: var(--tena-gold);
  background: #fff;
}

/* "New today" gold badge — rare, only on items < 24h old */
.tena-listing-card__fresh {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Body */
.tena-listing-card__body {
  padding: 10px 12px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title — 2 line clamp */
/* Category kicker above the title. (#221)

   Sentence case, muted, no pill. Uppercase with letter-spacing was tried and
   costs enough width that the longest name truncates even at full desktop card
   width; sentence case fits "Ibitabo n'ibikoresho byo kwandika" (33 chars, the
   longest top-level name in any locale) complete at 231px.

   Deliberately quiet: the card already carries NEW, the save heart, the
   condition pill, the photo count and Verified. This is orientation, not a
   selling point, and must not compete with the price. */
.tena-listing-card__cat {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tena-muted);
  line-height: 1.2;
  margin: 0 0 3px;
  /* One line, ellipsis — narrower cards clip rather than reflow the body. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tena-listing-card__title {
  font-size: 0.875rem;
  color: var(--tena-ink);
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.275em;
}

/* Price */
.tena-listing-card__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.tena-listing-card__price-currency {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  font-weight: 500;
  margin-left: 4px;
}

/* Seller footer row — visually separated trust strip */
.tena-listing-card__seller {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--tena-muted);
  border-top: 1px solid var(--tena-border);
  padding: 8px 12px 10px;
  margin: 0 -12px;
}
.tena-listing-card__seller-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tena-green);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.tena-listing-card__seller-name {
  color: var(--tena-ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70px;
}
/* "Verified" trust badge on the seller row — a labelled pill so the
   verified signal registers while browsing (a bare icon did not). */
.tena-listing-card__verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tena-listing-card__verified-badge i {
  font-size: 13px;
}
.tena-listing-card__seller-meta {
  color: var(--tena-muted);
  margin-left: auto;
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

/* Empty state */
.tena-listing-empty {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--tena-muted);
  background: var(--tena-surface);
  border: 1px dashed var(--tena-border);
  border-radius: 12px;
}
/* ============================================================
   Browse v2 — Search bar (2026-05-20)
   ============================================================ */
.tena-browse-search {
  display: flex;
  align-items: center;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 999px;
  padding: 5px 5px 5px 18px;
  margin: 0 0 1rem;
  gap: 8px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.tena-browse-search:focus-within {
  border-color: var(--tena-green);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.10);
}
.tena-browse-search__icon {
  display: inline-flex;
  align-items: center;
  color: var(--tena-muted);
  flex-shrink: 0;
}
.tena-browse-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--tena-ink);
  padding: 12px 4px;
}
.tena-browse-search__input::placeholder { color: var(--tena-muted); }
.tena-browse-search__input::-webkit-search-cancel-button { display: none; }
.tena-browse-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tena-surface-2);
  color: var(--tena-ink-2);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tena-browse-search__clear:hover {
  background: var(--tena-border-strong);
  color: var(--tena-ink);
  text-decoration: none;
}
.tena-browse-search__submit {
  background: var(--tena-green);
  color: var(--tena-white);
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tena-browse-search__submit:hover { background: var(--tena-green-soft); }
@media (max-width: 480px) {
  .tena-browse-search { padding-left: 14px; }
  .tena-browse-search__submit { padding: 9px 14px; font-size: 0.875rem; }
}

/* ============================================================
   Homepage v2 — appended from tena-home.css (2026-05-20)
   ============================================================ */
/* ============================================================
   TENA — Homepage additions
   Append to /assets/css/tena-brand.css.
   Uses only existing --tena-* tokens.

   Sections covered: hero, category grid, listing rails.
   ============================================================ */

/* ---------- Hero ---------- */
.tena-hero {
  background: var(--tena-green);
  padding: 3.5rem 1.5rem 4rem;
  color: #fff;
  text-align: center;
}
.tena-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.tena-hero__title {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
}
@media (min-width: 768px) {
  .tena-hero__title { font-size: 3rem; }
}
.tena-hero__accent {
  color: var(--tena-gold);
}
.tena-hero__subtitle {
  font-size: 1rem;
  margin: 0 0 1.5rem;
  opacity: 0.85;
  color: #fff;
}

/* Search form */
.tena-hero__search {
  display: flex;
  background: #fff;
  border-radius: 999px;
  padding: 4px;
  max-width: 560px;
  margin: 0 auto 1.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.tena-hero__search-input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--tena-ink);
  min-width: 0;
}
.tena-hero__search-input:focus { outline: none; }
.tena-hero__search-input::placeholder { color: var(--tena-muted); }
.tena-hero__search-btn {
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  border: 0;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.tena-hero__search-btn:hover { background: #B89220; }

/* Trust pills — small chips sitting on the hero */
.tena-hero__trust {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.tena-hero__trust-pill {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  white-space: nowrap;
}
.tena-hero__trust-pill svg {
  color: var(--tena-gold);
  flex-shrink: 0;
}

/* ---------- Section header (used for category section + above each rail) ---------- */
.tena-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 1rem;
  gap: 1rem;
}
.tena-section-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0;
}
.tena-section-header__link {
  font-size: 0.8125rem;
  color: var(--tena-green);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tena-section-header__link:hover {
  color: var(--tena-green-soft);
  text-decoration: none;
}

/* ---------- Category grid ---------- */
.tena-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .tena-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
  }
}

.tena-category-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tena-category-tile:hover { text-decoration: none; color: inherit; }
.tena-category-tile__image {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tena-green-tint);
  margin-bottom: 6px;
  border: 1px solid var(--tena-border);
}
.tena-category-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}
.tena-category-tile:hover .tena-category-tile__image img {
  transform: scale(1.05);
}
.tena-category-tile__placeholder {
  width: 100%;
  height: 100%;
  background: var(--tena-green-tint);
}
.tena-category-tile__name {
  font-size: 0.8125rem;
  color: var(--tena-ink);
  font-weight: 500;
  text-align: center;
}

/* ---------- Listing rails (horizontal scroll) ---------- */
.tena-rail {
  margin: 0 0 2.5rem;
  position: relative;
}

.tena-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 200px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar hidden — navigation is via swipe (touch) or arrow buttons (desktop). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media (min-width: 768px) {
  .tena-rail__track {
    grid-auto-columns: minmax(200px, 240px);
    gap: 16px;
  }
}
.tena-rail__track > .tena-listing-card {
  scroll-snap-align: start;
}
.tena-rail__track::-webkit-scrollbar { display: none; }

/* Hover arrow controls — shown only on fine-pointer devices when the rail
   overflows; touch devices keep native swipe. */
.tena-rail__arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tena-white);
  border: 1px solid var(--tena-border);
  box-shadow: 0 2px 10px rgba(15, 61, 46, 0.14);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tena-green-deep);
  z-index: 3;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.tena-rail__arrow:hover { background: var(--tena-surface-2); }
.tena-rail__arrow--prev { left: 2px; }
.tena-rail__arrow--next { right: 2px; }
.tena-rail__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .tena-rail--has-overflow .tena-rail__arrow { display: inline-flex; }
}

/* ---------- Section spacing on homepage ---------- */
.tena-home-section {
  padding-top: 2.5rem;
}
.tena-home-section:first-of-type {
  padding-top: 2rem;
}
/* ============================================================
   Settings page v2 — appended 2026-05-20
   Uses only existing --tena-* tokens.
   ============================================================ */

/* Page heading (used on settings, can be reused on other account pages) */
.tena-page-heading {
  margin: 0 0 1.5rem;
}
.tena-page-heading__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tena-green-deep);
  margin: 0 0 0.25rem;
  letter-spacing: -0.5px;
}
.tena-page-heading__desc {
  color: var(--tena-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* Grouped settings block (white card with header + rows) */
.tena-block {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1.25rem;
}
.tena-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tena-border);
  gap: 1rem;
}
.tena-block__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tena-green-deep);
  letter-spacing: 0.02em;
}
.tena-block__link {
  font-size: 0.85rem;
  color: var(--tena-green);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.tena-block__link:hover { color: var(--tena-green-soft); text-decoration: none; }

/* Setting row inside a block */
.tena-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 18px;
  border-top: 1px solid var(--tena-border);
}
.tena-setting-row:first-child { border-top: 0; }
.tena-block__header + .tena-setting-row { border-top: 0; }
.tena-setting-row__info {
  flex: 1;
  min-width: 0;
}
.tena-setting-row__label {
  margin: 0 0 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tena-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tena-setting-row__desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tena-muted);
  line-height: 1.45;
}
.tena-setting-row__control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Setting rows holding a text field (admin settings). The field keeps to its
   content so the row uses the width instead of a full-width input under a
   label. forms.js inserts a client-side error after the control; it drops to
   its own line under it rather than squeezing in beside the field. */
.tena-setting-row { flex-wrap: wrap; }
.tena-setting-input { width: 9rem; max-width: 100%; }
.tena-setting-input--wide { width: 16rem; }
.tena-setting-row > .tena-help--error { flex-basis: 100%; margin: 0; text-align: right; }

/* iOS-style switch */
.tena-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.tena-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.tena-switch__track {
  position: absolute;
  inset: 0;
  background: var(--tena-border);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.18s;
}
.tena-switch__track::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.tena-switch input:checked + .tena-switch__track {
  background: var(--tena-green-deep);
}
.tena-switch input:checked + .tena-switch__track::before {
  transform: translateX(18px);
}
.tena-switch input:focus-visible + .tena-switch__track {
  outline: 2px solid var(--tena-gold);
  outline-offset: 2px;
}
.tena-switch input:disabled + .tena-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Segmented language radio group */
.tena-lang-group {
  display: inline-flex;
  background: var(--tena-surface-2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.tena-lang-group input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tena-lang-group label {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tena-ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tena-lang-group input[type=radio]:checked + label {
  background: var(--tena-green);
  color: #fff;
}
.tena-lang-group input[type=radio]:focus-visible + label {
  box-shadow: 0 0 0 2px var(--tena-gold);
}

/* BEM modifier aliases for kyc-pill to match the v2 partial */
.tena-kyc-pill--verified { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-kyc-pill--pending  { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-kyc-pill--none     { background: var(--tena-surface-2); color: var(--tena-ink-2); }
.tena-kyc-pill--rejected { background: var(--tena-danger-bg); color: var(--tena-danger); }

@media (max-width: 540px) {
  .tena-setting-row { flex-direction: column; align-items: flex-start; }
  .tena-setting-row__control { align-self: flex-end; }
}

/* ============================================================
   Notifications v2 — appended from tena-notifications.css (2026-05-20)
   ============================================================ */
/* ============================================================
   TENA — Notifications page
   Append to /assets/css/tena-brand.css.
   Uses only existing --tena-* tokens.
   ============================================================ */

/* ---------- Page header (title + unread pill + mark-all link) ---------- */
.tena-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tena-notif-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0 0 4px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tena-notif-header__count-pill {
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.tena-notif-header__desc {
  font-size: 0.875rem;
  color: var(--tena-muted);
  margin: 0;
}
.tena-notif-header__action {
  font-size: 0.8125rem;
  color: var(--tena-green);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.tena-notif-header__action:hover {
  text-decoration: underline;
}

/* ---------- Filter chips with count badges ---------- */
.tena-notif-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.tena-notif-filters a {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.75rem;
  color: var(--tena-ink);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.12s, background 0.12s;
}
.tena-notif-filters a:hover {
  border-color: var(--tena-green);
  text-decoration: none;
}
.tena-notif-filters a.is-active {
  background: var(--tena-green);
  color: #fff;
  border-color: var(--tena-green);
}
.tena-notif-filters__count {
  background: var(--tena-bg);
  color: var(--tena-muted);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.4;
}
.tena-notif-filters a.is-active .tena-notif-filters__count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---------- Section label ---------- */
.tena-notif-section {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 20px 0 8px;
}
.tena-notif-section:first-of-type {
  margin-top: 0;
}

/* ---------- Group container ---------- */
.tena-notif-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- Notification row ---------- */
.tena-notif {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s;
}
.tena-notif:hover {
  border-color: var(--tena-muted);
  text-decoration: none;
  color: inherit;
}
.tena-notif--unread {
  background: var(--tena-green-tint);
  border-color: #CFE0D7;
}

/* Icon containers — four kinds */
.tena-notif__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}
.tena-notif__icon--avatar {
  background: var(--tena-green);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 50%;
  letter-spacing: 0.3px;
}
.tena-notif__icon--gold {
  background: var(--tena-gold-tint);
  color: var(--tena-gold-deep);
}
.tena-notif__icon--green {
  background: var(--tena-surface);
  color: var(--tena-green);
  border: 1px solid #CFE0D7;
}
.tena-notif__icon--info {
  background: var(--tena-bg);
  color: var(--tena-muted);
  border: 1px solid var(--tena-border);
}

/* Body */
.tena-notif__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.tena-notif__title {
  font-size: 0.8125rem;
  color: var(--tena-ink);
  margin: 0 0 2px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tena-notif__title strong {
  font-weight: 500;
}
.tena-notif--unread .tena-notif__title strong {
  font-weight: 700;
}
.tena-notif__priority {
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.tena-notif__preview {
  font-size: 0.75rem;
  color: var(--tena-muted);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Time + dot column */
.tena-notif__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 3px;
}
.tena-notif__time {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  white-space: nowrap;
}
.tena-notif__dot {
  width: 11px;
  height: 11px;
  background: var(--tena-gold);
  border-radius: 50%;
  /* White ring lifts the dot off the green-tinted unread row so it reads at
     a glance instead of blending in. (#146) */
  box-shadow: 0 0 0 2px var(--tena-white);
}
.tena-notif:not(.tena-notif--unread) .tena-notif__dot {
  display: none;
}

/* ---------- Empty state ---------- */
.tena-notif-empty {
  text-align: center;
  padding: 48px 16px;
  background: var(--tena-surface);
  border: 1px dashed var(--tena-border);
  border-radius: 12px;
}
.tena-notif-empty__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--tena-bg);
  color: var(--tena-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
}
.tena-notif-empty__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tena-ink);
  margin: 0 0 4px;
}
.tena-notif-empty__desc {
  font-size: 0.8125rem;
  color: var(--tena-muted);
  margin: 0;
}

/* ============================================================
   Chat thread v2 — appended 2026-05-20
   Uses only existing --tena-* tokens.
   ============================================================ */
.tena-chat {
  max-width: 720px;
  margin: 0 auto;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  box-shadow: var(--shadow-xs);
}
.tena-chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tena-border);
  background: var(--tena-surface);
  flex-wrap: wrap;
}
.tena-chat__back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tena-surface-2);
  color: var(--tena-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tena-chat__back:hover { background: var(--tena-border-strong); color: var(--tena-ink); text-decoration: none; }
.tena-chat__back svg { width: 18px; height: 18px; }
.tena-chat__listing {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.tena-chat__listing-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tena-surface-2);
}
.tena-chat__listing-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tena-chat__listing-info { min-width: 0; }
.tena-chat__listing-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tena-ink);
  margin: 0;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.tena-chat__listing .tena-chat__listing-title:hover { color: var(--tena-green); text-decoration: none; }
.tena-chat__listing-price {
  font-size: 0.78rem;
  color: var(--tena-muted);
  font-weight: 500;
  margin-top: 2px;
}
.tena-chat__seller {
  font-size: 0.78rem;
  color: var(--tena-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tena-chat__seller strong {
  color: var(--tena-ink);
  font-weight: 600;
}
.tena-chat__seller-verified {
  color: var(--tena-success);
}
.tena-chat__warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tena-warning-bg);
  color: var(--tena-warning);
  font-size: 0.75rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--tena-border);
}
.tena-chat__warning svg { flex-shrink: 0; margin-top: 2px; }
/* Blocked-message banner — shown at the top of the chat when MessageFilter
   rejects a send. Error-toned sibling of .tena-chat__warning. */
.tena-chat__blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tena-danger-bg);
  color: var(--tena-danger);
  font-size: 0.75rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--tena-border);
}
.tena-chat__blocked svg { flex-shrink: 0; margin-top: 2px; }
.tena-chat__blocked-text { flex: 1; }
.tena-chat__blocked-text strong { display: block; font-weight: 700; margin-bottom: 1px; }
.tena-chat__blocked-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.65;
}
.tena-chat__blocked-close:hover { opacity: 1; }
.tena-chat__body {
  flex: 1;
  background: var(--tena-bg);
  padding: 14px;
  overflow-y: auto;
  max-height: 60vh;
  min-height: 320px;
}
.tena-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tena-chat__day {
  align-self: center;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  color: var(--tena-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 8px 0 4px;
}
.tena-chat__bubble {
  max-width: 78%;
  padding: 8px 12px 18px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.tena-chat__bubble--them {
  align-self: flex-start;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  color: var(--tena-ink);
  border-bottom-left-radius: 4px;
}
.tena-chat__bubble--me {
  align-self: flex-end;
  background: var(--tena-green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.tena-chat__bubble--system {
  align-self: center;
  background: transparent;
  color: var(--tena-muted);
  font-style: italic;
  font-size: 0.75rem;
  text-align: center;
  padding: 4px 10px;
  max-width: 90%;
}
.tena-chat__bubble-time {
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 0.625rem;
  opacity: 0.7;
  font-weight: 500;
}
.tena-chat__bubble--them .tena-chat__bubble-time { color: var(--tena-muted); }
.tena-chat__bubble--me .tena-chat__bubble-time { color: rgba(255, 255, 255, 0.85); }
.tena-chat__bubble--system .tena-chat__bubble-time { display: none; }
.tena-chat__empty {
  text-align: center;
  color: var(--tena-muted);
  padding: 2.5rem 1rem;
  font-size: 0.9rem;
}
.tena-chat__empty svg {
  width: 36px;
  height: 36px;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.tena-chat__readonly {
  padding: 14px;
  background: var(--tena-surface-2);
  color: var(--tena-muted);
  text-align: center;
  font-size: 0.85rem;
  border-top: 1px solid var(--tena-border);
}
.tena-chat__compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: var(--tena-surface);
  border-top: 1px solid var(--tena-border);
}

/* Sharing a pin in a pickup thread (#273): a round pin button in the
   composer row, beside Send. Its words are the accessible name and tooltip. */
.tena-chat__compose-loc {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--tena-border);
  background: var(--tena-surface);
  color: var(--tena-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.tena-chat__compose-loc:hover,
.tena-chat__compose-loc[aria-expanded="true"] { border-color: var(--tena-green-deep); color: var(--tena-green-deep); }
.tena-chat__loc-panel {
  margin: 0 12px 10px;
  padding: 12px;
  border: 1px solid var(--tena-border);
  border-radius: var(--r);
  background: var(--tena-surface);
}
.tena-chat__bubble--location { display: block; max-width: 260px; }
.tena-chat__loc-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}
/* map_static's link is brand green, which is the same colour as a sent
   bubble — the link was there but invisible against its own background. */
.tena-chat__bubble--location .tena-map-link {
  color: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  margin-top: 8px;
}
/* The static map inside a bubble fills it, rather than keeping the taller
   height it uses on an order page. */
.tena-chat__bubble--location .tena-map--static { height: 150px; margin-top: 0; }
.tena-chat__compose-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--tena-border);
  border-radius: 22px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--tena-ink);
  background: var(--tena-bg);
  max-height: 120px;
  min-height: 40px;
  outline: 0;
  transition: border-color 0.15s, background 0.15s;
}
.tena-chat__compose-input:focus { border-color: var(--tena-green); background: var(--tena-surface); }
.tena-chat__compose-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.tena-chat__compose-send:hover { background: #B89220; transform: translateY(-1px); }
.tena-chat__compose-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* In-flight "sending" state: swap the send icon for a spinner (#92). Overrides the
   dimmed :disabled look so the spinner stays legible while the request is in flight. */
.tena-chat__compose-send.is-sending { opacity: 1; cursor: progress; }
.tena-chat__compose-send.is-sending .tena-chat__compose-icon { display: none; }
.tena-chat__compose-spinner { display: none; }
.tena-chat__compose-send.is-sending .tena-chat__compose-spinner {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: tena-spin 0.6s linear infinite;
}
@keyframes tena-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Keep a visible busy ring without the rotation. */
  .tena-chat__compose-send.is-sending .tena-chat__compose-spinner { animation: none; border-top-color: currentColor; opacity: 0.7; }
}
.tena-chat__error {
  padding: 8px 14px;
  background: var(--tena-danger-bg);
  color: var(--tena-danger);
  font-size: 0.8rem;
  border-top: 1px solid var(--tena-border);
}

/* ============================================================
   Chat — WhatsApp-style refinement (added 2026-05-29)
   Layered on top of the existing .tena-chat__* base so reverting
   is a single block delete.
   ============================================================ */

/* Outer chat container — subtle elevation + rounded corners.
   Explicitly resets the older `.tena-chat` block at line 1930 (which sets
   height:460px + padding:1rem + overflow-y:auto for the legacy chat
   markup). Without these overrides the compose form scrolls out of view
   below the fixed-height container. */
.tena-chat {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(15, 61, 46, 0.08);
  border: 1px solid var(--tena-border);
  background: var(--tena-surface);
  height: auto;
  padding: 0;
  overflow-y: visible;
  gap: 0;
}

/* Paper-grain background for the body — a single dot every 18px gives
   the classic chat surface without an image request. */
.tena-chat__body {
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 61, 46, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #F2F3EF 0%, #F7F8F6 100%);
  background-size: 18px 18px, 100% 100%;
  max-height: 65vh;
  min-height: 360px;
  padding: 16px 14px 10px;
  scroll-behavior: smooth;
}

/* Tighter rhythm between bubbles. */
.tena-chat__messages { gap: 3px; }

/* Bubbles — slightly smaller radius, soft shadow, tighter padding.
   Time floats inside the bubble; we reserve space on the right for it. */
.tena-chat__bubble {
  padding: 6px 10px 4px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.42;
  box-shadow: 0 1px 0.5px rgba(15, 61, 46, 0.12);
  max-width: 75%;
  position: relative;
  animation: tena-chat-pop 0.18s ease-out;
}

/* "Them" — white-ish bubble, tail bottom-left. */
.tena-chat__bubble--them {
  background: #FFFFFF;
  border: 0;
  border-bottom-left-radius: 4px;
  margin-left: 10px;
}
.tena-chat__bubble--them::before {
  content: '';
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent #FFFFFF transparent;
  filter: drop-shadow(-1px 0.5px 0 rgba(15, 61, 46, 0.06));
}

/* "Me" — TENA green, tail bottom-right. */
.tena-chat__bubble--me {
  background: var(--tena-green);
  color: #fff;
  border-bottom-right-radius: 4px;
  margin-right: 10px;
}
.tena-chat__bubble--me::before {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 10px 0;
  border-color: transparent var(--tena-green) transparent transparent;
}

/* Time floats inside the bubble; text wraps around it like WhatsApp. */
.tena-chat__bubble-time {
  position: static;
  float: right;
  margin-left: 8px;
  margin-top: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.7;
  line-height: 1;
}

/* Day separator — floating pill instead of bordered chip. */
.tena-chat__day {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0.5px rgba(15, 61, 46, 0.12);
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--tena-ink-2);
  padding: 4px 12px;
  margin: 12px 0 6px;
  backdrop-filter: blur(2px);
}

/* System messages — centred subtle pill. */
.tena-chat__bubble--system {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0.5px rgba(15, 61, 46, 0.12);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.75rem;
}
.tena-chat__bubble--system::before { display: none; }

/* Compose — white bar with a clearly bordered off-white pill input.
   The input MUST stay visually distinct from the bar around it, otherwise
   the textarea disappears against the bar (see incident: 2026-05-29). */
.tena-chat__compose {
  padding: 10px 12px 14px;
  background: var(--tena-surface);
  gap: 10px;
  border-top: 1px solid var(--tena-border);
}
.tena-chat__compose-input {
  border-radius: 24px;
  padding: 10px 18px;
  background: var(--tena-bg);
  border: 1px solid var(--tena-border);
  color: var(--tena-ink);
  min-height: 44px;
}
.tena-chat__compose-input::placeholder { color: var(--tena-muted); }
.tena-chat__compose-input:focus {
  border-color: var(--tena-green);
  background: var(--tena-surface);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.10);
}
.tena-chat__compose-send {
  width: 44px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.35);
}
.tena-chat__compose-send:hover { box-shadow: 0 4px 12px rgba(201, 162, 39, 0.45); }


/* Pop-in animation for new bubbles. */
@keyframes tena-chat-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Auth sidebar v2 — appended 2026-05-20
   ============================================================ */
.tena-auth-sidebar {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 240px;
  align-self: start;
  position: sticky;
  top: 1rem;
}
.tena-auth-sidebar__user {
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--tena-border);
}
.tena-auth-sidebar__user-label {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}
.tena-auth-sidebar__user-name {
  font-size: 1rem;
  color: var(--tena-ink);
  font-weight: 700;
}
.tena-auth-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tena-auth-sidebar__group-title {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 0 8px 6px;
  margin: 0;
}
.tena-auth-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--tena-ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.tena-auth-sidebar__link i.ti {
  font-size: 16px;
  color: var(--tena-muted);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.tena-auth-sidebar__link:hover {
  background: var(--tena-surface-2);
  color: var(--tena-ink);
  text-decoration: none;
}
.tena-auth-sidebar__link.is-active {
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
}
.tena-auth-sidebar__link.is-active i.ti {
  color: var(--tena-green);
}
.tena-auth-sidebar__footer {
  padding-top: 14px;
  border-top: 1px solid var(--tena-border);
}
.tena-auth-sidebar__footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--tena-muted);
  text-decoration: none;
  padding: 4px 8px;
}
.tena-auth-sidebar__footer a:hover { color: var(--tena-green); }
@media (max-width: 768px) {
  .tena-auth-sidebar { position: static; }
}

/* ============================================================
   Account shell — 2-column grid wrapper (sidebar + main).
   Used by /dashboard.php; can be reused on profile / my-purchases.
   ============================================================ */
.tena-account-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.75rem;
  align-items: start;
}
.tena-account-main {
  min-width: 0;
}
@media (max-width: 768px) {
  .tena-account-shell {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================================
   Checkout layout — appended 2026-05-22
   Two columns on desktop, stacked on phones/tablets.
   ============================================================ */
.tena-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 2rem;
  align-items: start;
}
/* The summary sticks beside the form on desktop. Stylesheet, not an inline
   style, so the static rule below can finally win under 860px. (#279) */
.tena-checkout-aside { position: sticky; top: 1rem; }
.tena-checkout-thumb { aspect-ratio: 1; background: var(--tena-surface-2); }
.tena-checkout-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tena-checkout-info { padding: 1.25rem; min-width: 0; }
.tena-checkout-title {
  font: 600 1rem var(--tena-font);
  color: var(--tena-ink);
  margin: 0 0 0.5rem;
}
.tena-checkout-cond { color: var(--tena-muted); font-size: 0.85rem; margin: 0; }
/* Phone-only pieces: the compact total in the summary row and the breakdown
   repeated above the Pay button. (#279) */
.tena-checkout-total-inline { display: none; }
.tena-checkout-paybreakdown { display: none; }
@media (max-width: 860px) {
  .tena-checkout-grid { grid-template-columns: 1fr; }
  /* Show the order summary (with its breakdown) above the form + Pay button. (#58) */
  .tena-checkout-grid > aside { order: -1; position: static; }
  /* Compact summary row: 96px thumbnail, clamped title, total — the itemised
     breakdown moves next to the Pay button instead of a 569px card that used
     to pin itself over the form. (#279) */
  .tena-checkout-summary { display: flex; align-items: center; }
  .tena-checkout-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    margin-left: 0.75rem;
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .tena-checkout-info { padding: 0.75rem 1rem; }
  .tena-checkout-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.25rem;
  }
  .tena-checkout-breakdown { display: none; }
  .tena-checkout-total-inline {
    display: block;
    margin-top: 0.35rem;
    font: 700 1.05rem var(--tena-font);
    color: var(--tena-green-deep);
  }
  .tena-checkout-total-inline span { color: var(--tena-gold); font-size: 0.75em; margin-left: 0.3rem; }
  .tena-checkout-paybreakdown {
    display: block;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tena-border);
  }
}

/* ============================================================
   Live toast notifications (new chat messages) — appended 2026-05-22
   ============================================================ */
.tena-toast-stack {
  position: fixed;
  top: 72px;
  right: 14px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 340px;
  max-width: calc(100vw - 28px);
  pointer-events: none;
}
.tena-toast {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tena-white);
  border: 1px solid var(--tena-border);
  border-left: 4px solid var(--tena-green);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(15, 61, 46, 0.18);
  padding: 12px 14px;
  text-decoration: none;
  color: var(--tena-ink);
  animation: tena-toast-in 0.25s ease;
}
@keyframes tena-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tena-toast.is-leaving {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tena-toast-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tena-toast-body { flex: 1; min-width: 0; }
.tena-toast-title {
  display: block;
  font: 700 0.88rem var(--tena-font);
  color: var(--tena-green-deep);
}
.tena-toast-text {
  display: block;
  font-size: 0.83rem;
  color: var(--tena-ink-2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tena-toast-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--tena-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}
.tena-toast-close:hover { color: var(--tena-ink); }
@media (max-width: 480px) {
  .tena-toast-stack { top: 64px; right: 8px; left: 8px; width: auto; max-width: none; }
}

/* ============================================================
   Global responsive fallback — appended 2026-06-01
   Many pages set grid-template-columns with INLINE styles for
   two-column layouts (forms, sidebar + main). Several lacked a
   mobile breakpoint and overflowed on phones/tablets. These rules
   collapse those inline grids to a single column on small screens.
   Auto-fill card grids use `repeat(auto-fill, …)` and are NOT
   matched here — they already wrap on their own.
   ============================================================ */
@media (max-width: 768px) {
  /* Sidebar-style layouts: minmax(0, Nfr) minmax(<fixed>px, 1fr) */
  [style*="grid-template-columns: minmax"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px) {
  /* Paired form fields and simple two-column rows */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Finance console (escrow disbursement) ───────────────── */
.tena-amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.tena-bulkbar {
    position: sticky; bottom: 0; z-index: 20;
    display: none; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 1rem; padding: 0.85rem 1.1rem;
    background: var(--tena-white); border: 1px solid var(--tena-border);
    border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.tena-bulkbar.is-visible { display: flex; }
/* ── Save dock ───────────────────────────────────────────────
   Pending edits on a long form (admin settings). Sticky so Save stays within
   reach while scrolling. While nothing has changed it is hidden but keeps its
   space, so the page never shifts when it appears. Replaces the gold-tinted
   .tena-bulkbar--warn strip, which read as a warning banner. */
.tena-savebar {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-top: 1.75rem;
    padding: 0.625rem 0.625rem 0.625rem 1.125rem;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear 0s;
}
.tena-savebar[data-state="idle"] {
    opacity: 0;
    transform: translateY(0.5rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
/* Before the script marks it (JS off), there is no status to show: a plain
   form footer, not an empty floating card around a lone button. */
.tena-savebar:not([data-state]) {
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
/* .tena-btn sets display, which would override the hidden attribute. */
.tena-savebar [hidden] { display: none; }
.tena-savebar-status {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-right: auto;
    font: 600 0.92rem var(--tena-font);
    color: var(--tena-ink);
}
.tena-savebar-status::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tena-gold);
    box-shadow: 0 0 0 4px var(--tena-gold-tint);
}
@media (prefers-reduced-motion: reduce) {
    .tena-savebar,
    .tena-savebar[data-state="idle"] { transition: none; transform: none; }
}
.tena-bulkbar-total { font-family: var(--tena-font); font-weight: 700; color: var(--tena-green-deep); }

.tena-modal-backdrop {
    position: fixed; inset: 0; z-index: 100;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 61, 46, 0.45); padding: 1rem;
}
.tena-modal-backdrop.is-open { display: flex; }
.tena-modal {
    width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
    background: var(--tena-white); border-radius: var(--r); box-shadow: var(--shadow-lg);
    padding: 1.5rem;
}
.tena-modal h3 { font-family: var(--tena-font); color: var(--tena-green-deep); margin: 0 0 1rem; }
.tena-modal-list { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.tena-modal-list td { padding: 0.4rem 0; border-bottom: 1px solid var(--tena-border); font-size: 0.92rem; }
.tena-modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* Shared confirm dialog (#83, #70). Sits above the bottom nav, toasts and the
   assistant launcher; reuses the .tena-modal shell + tokens. */
.tena-confirm-modal { z-index: 1200; }
.tena-modal--confirm { max-width: 420px; }
.tena-modal--confirm p { color: var(--tena-ink-2); margin: 0 0 0.5rem; line-height: 1.5; }

.tena-finance-subrow td { background: var(--tena-bg); font-size: 0.86rem; color: var(--tena-ink-2); }

/* Finance stat cards: clickable lift + overflow-safe tabular amount */
.tena-stat-link { display: block; text-decoration: none; color: inherit; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.tena-stat-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tena-stat-amount {
    font-variant-numeric: tabular-nums;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
    margin-top: 0.3rem; white-space: nowrap; overflow: hidden;
}

/* ── Pagination ──────────────────────────────────────────────
   The shared pager (#216). Replaces nineteen hand-rolled Previous/Next
   blocks, none of which offered a page number. Built only from existing
   :root tokens — no new colours.

   Targets are 44px so this does not join the list in #178: a numbered
   pager is exactly where small tap targets bite on a phone. */
.tena-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.tena-pagination--compact {
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
}
.tena-pagination--compact .tena-pagination__summary { font-size: 0.8rem; }
.tena-pagination--compact .tena-pagination__list { gap: 0.25rem; }
.tena-pagination--compact .tena-pagination__link--step { width: 32px; height: 32px; min-width: 32px; }
.tena-pagination__summary {
    margin: 0;
    color: var(--tena-muted);
    font: 500 0.85rem var(--tena-font);
    font-variant-numeric: tabular-nums;
}
.tena-pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tena-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.6rem;
    border: 1.5px solid var(--tena-border);
    border-radius: var(--r-sm);
    background: var(--tena-white);
    color: var(--tena-ink);
    font: 600 0.9rem var(--tena-font);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.tena-pagination__link:hover {
    border-color: var(--tena-green);
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
}
.tena-pagination__link:focus-visible {
    outline: none;
    border-color: var(--tena-green);
    box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.18);
}
/* The current page is a <span>, not a link — there is nowhere to go. */
.tena-pagination__link.is-current {
    background: var(--tena-green-deep);
    border-color: var(--tena-green-deep);
    color: var(--tena-white);
    cursor: default;
}
/* Step arrows at the ends stay in the layout when unavailable, so the row
   does not shift sideways as the user moves between pages. */
.tena-pagination__link.is-disabled {
    color: var(--tena-border-strong);
    background: var(--tena-surface-2);
    cursor: default;
}
.tena-pagination__link--step {
    font-size: 1.05rem;
    line-height: 1;
}
.tena-pagination__gap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 24px;
    height: 44px;
    color: var(--tena-muted);
    padding-bottom: 0.6rem;
}

@media (min-width: 640px) {
    /* Room for the summary beside the controls once the viewport allows it. */
    .tena-pagination {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ── List filter bar ─────────────────────────────────────────
   Shared filter row for the buyer/seller lists (#228). Wraps to one
   field per line on a phone rather than scrolling sideways, since
   these carry date inputs that are already wide at 375px.
   Tokens only — no new colours. */
.tena-list-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--tena-surface-2);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
}
.tena-list-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 150px;
    min-width: 0;
}
/* The free-text field earns more room than a select or a date. */
.tena-list-filters__field--wide { flex: 2 1 220px; }
.tena-list-filters__field .tena-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tena-muted);
}
.tena-list-filters__field .tena-input,
.tena-list-filters__field .tena-select {
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
}
/* The shorthand above resets padding-right, which would undo the arrow
   clearance on exactly the width:auto selects that need it most. Restated
   here, tightened to suit the smaller control. (#220) */
.tena-list-filters__field .tena-select {
    padding-right: 2.1rem;
    background-position: right 0.7rem center;
}
.tena-list-filters__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 0 0 auto;
}
/* A checkbox filter sits on the control row, not above it. */
.tena-list-filters__check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    font-size: 0.9rem;
    color: var(--tena-ink);
    cursor: pointer;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .tena-list-filters__field { flex: 1 1 100%; }
    .tena-list-filters__actions { flex: 1 1 100%; }
    .tena-list-filters__actions .tena-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Map pins (#276) ─────────────────────────────────────────
   Leaflet container + a CSS pin in brand colours. Sizes are set here so a
   map has height before Leaflet initialises (no JS → an empty box, not a
   collapsed one). */
.tena-map {
    width: 100%;
    height: 240px;
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
    background: var(--tena-surface-2);
    overflow: hidden;
    position: relative;
    z-index: 0;   /* keep Leaflet's panes under sticky bars and dropdowns */
}
.tena-map--static { height: 180px; }
.tena-map .leaflet-control-attribution { font-size: 0.65rem; }
.tena-map-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.tena-map-status { min-height: 1.25rem; }
.tena-map-pin { background: none; border: 0; }
.tena-map-pin span {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 50% 50% 50% 0;
    background: var(--tena-green);
    border: 3px solid var(--tena-gold);
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(15, 61, 46, 0.35);
}
.tena-map-pin span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--tena-white);
}
.tena-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    color: var(--tena-green);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.tena-map-link:hover { text-decoration: underline; }
/* Map search (the place-name box above a picker; tena-map.js). Hidden until
   JS reveals it; the list floats over the map, which sits at z-index 0. */
.tena-map-search { position: relative; margin-bottom: 0.5rem; }
.tena-map-search[hidden] { display: none; }
.tena-map-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    margin: 0;
    padding: 0.25rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
    max-height: 240px;
    overflow-y: auto;
}
.tena-map-results[hidden] { display: none; }
.tena-map-result {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-sm);
    font: inherit;
    line-height: 1.3;
    color: var(--tena-ink);
    cursor: pointer;
}
.tena-map-result:hover,
.tena-map-result.is-active { background: var(--tena-surface-2); }
.tena-map-result:focus-visible { outline: 2px solid var(--tena-gold); outline-offset: -2px; }
.tena-map-result small { display: block; color: var(--tena-muted); font-size: 0.8rem; }
.tena-map-results__empty { padding: 0.5rem 0.6rem; color: var(--tena-muted); font-size: 0.85rem; }
@media (max-width: 575.98px) {
    .tena-map { height: 260px; }
    .tena-map-toolbar .tena-btn { min-height: 44px; }
    .tena-map-result { min-height: 44px; }
}

/* ── Touch targets (#178) ────────────────────────────────────
   On a touch screen every control gets at least a 44×44px hit area; the
   #172 rule above does the same for .tena-btn. Where the drawn size belongs
   to a dense layout (card heart, chips, text links) the hit area grows
   invisibly through a centred ::after and nothing moves. Form controls and
   menu rows, which cannot carry a pseudo-element or have room to spare,
   grow to 44px instead. Touch pointers only: mouse geometry is unchanged.

   New one-off link or button without a component class? Add .tena-hit.
   If it sits directly above a field it must not cover, add .tena-hit--up
   so the area grows upward only. */
@media (pointer: coarse) {
    .tena-hit,
    .tena-brand,
    .tena-locale-trigger,
    .tena-filter-chips a,
    .tena-notif-filters a,
    .tena-notif-header__action,
    .tena-section-header__link,
    .tena-block__link,
    .tena-breadcrumb a,
    .tena-hero__search-btn,
    .tena-browse-search__submit,
    .tena-seller-section-link,
    .tena-lang-group label,
    .tena-footer-social a,
    .tena-tx-table td a { position: relative; }

    .tena-hit::after,
    .tena-brand::after,
    .tena-locale-trigger::after,
    .tena-filter-chips a::after,
    .tena-notif-filters a::after,
    .tena-notif-header__action::after,
    .tena-section-header__link::after,
    .tena-block__link::after,
    .tena-breadcrumb a::after,
    .tena-hero__search-btn::after,
    .tena-browse-search__submit::after,
    .tena-seller-section-link::after,
    .tena-lang-group label::after,
    .tena-footer-social a::after,
    .tena-tx-table td a::after,
    .tena-listing-card__save::after,          /* already absolutely positioned */
    button[data-toggle-password]::after {     /* positioned inline, inside the field */
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }
    .tena-hit--up::after,
    .tena-notif-header__action::after,       /* the filter tabs sit just below */
    .tena-section-header__link::after {      /* as does the chip strip */
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }
    /* The card clips its overflow, so the heart's area grows inward from
       the corner rather than out past the card's edge. */
    .tena-listing-card__save::after {
        top: -6px;
        right: -6px;
        left: auto;
        width: 44px;
        height: 44px;
        transform: none;
    }

    /* A row that is wide but short (a checkbox label): an overlay would
       reach into the field above it, so the row itself grows. */
    .tena-hit-row { min-height: 44px; }

    /* Wrapped rows of chips and tabs: leave room for both rows' hit areas,
       or each row swallows the edge of the next. */
    .tena-filter-chips { row-gap: 12px; }
    .tena-notif-filters { row-gap: 14px; }

    .tena-sort,
    .tena-input,
    .tena-select,
    .tena-locale-option { min-height: 44px; }

    /* Footer links are stacked 27px apart, too tight for an overlay, so
       each one becomes a 44px row. */
    .tena-footer li { margin-bottom: 0; }
    .tena-footer ul a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* Leaflet draws its zoom buttons at 30px, even on touch. */
    .tena-map.leaflet-touch .leaflet-bar a {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }

    /* Left small on purpose: Leaflet's OpenStreetMap credit (a licence
       notice, not a control) and links inside running text such as the
       terms consent sentence, where a larger area would take taps meant
       for the checkbox (WCAG 2.5.8's inline exception). */
}

/* ── Admin: staff and roles (#296) ─────────────────────────────────────────
   New classes, existing tokens only. A list page carries its one creating
   action in the page head, top right; the form lives on its own page. */
.tena-admin-pagehead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    /* The admin shell's notification bell is fixed in the top-right corner. */
    padding-right: 3.75rem;
}
.tena-admin-pagehead .tena-page-heading { margin: 0; }
.tena-admin-backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    color: var(--tena-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.tena-admin-backlink:hover { color: var(--tena-green-deep); }
.tena-admin-form { max-width: 680px; padding: 1.5rem; }
.tena-admin-form--wide { max-width: 980px; }
.tena-admin-form__section {
    margin: 1.75rem 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tena-muted);
}
.tena-admin-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tena-border);
}
.tena-person { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.tena-person__name { font-weight: 600; color: var(--tena-ink); }
.tena-person__meta { color: var(--tena-muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.tena-badge-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tena-row-actions { display: flex; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; }
.tena-row-actions form { display: inline; }

/* A role as a selectable card: the radio-card component, for checkboxes. */
.tena-check-cards { display: grid; gap: 0.6rem; }
.tena-radio-card input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 0.15rem;
    accent-color: var(--tena-green-deep);
    flex-shrink: 0;
}
.tena-radio-card:has(input:disabled) { cursor: not-allowed; background: var(--tena-surface-2); }
.tena-radio-card:has(input:disabled):hover { border-color: var(--tena-border); }
.tena-radio-card:has(input:disabled) .tena-radio-card__title { color: var(--tena-muted); }
.tena-check-cards.is-error .tena-radio-card { border-color: var(--tena-danger); }

/* The permission matrix: one row per area, view / manage / high-risk. */
.tena-perm-matrix { width: 100%; border-collapse: collapse; }
.tena-perm-matrix th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tena-muted);
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--tena-border);
    white-space: nowrap;
}
.tena-perm-matrix td {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--tena-border);
    vertical-align: top;
}
.tena-perm-matrix tr:last-child td { border-bottom: none; }
.tena-perm-matrix__area { font-weight: 600; color: var(--tena-ink); }
.tena-perm-matrix__hint { display: block; font-weight: 400; font-size: 0.8rem; color: var(--tena-muted); margin-top: 0.15rem; }
.tena-perm-matrix__tick { text-align: center; width: 84px; }
.tena-perm-matrix th.tena-perm-matrix__tick { text-align: center; }
.tena-perm-matrix input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15rem; accent-color: var(--tena-green-deep); cursor: pointer; }
.tena-perm-matrix input[type="checkbox"]:disabled { cursor: not-allowed; }
.tena-perm-risk { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.15rem 0; cursor: pointer; font-size: 0.9rem; color: var(--tena-ink); }
.tena-perm-risk + .tena-perm-risk { margin-top: 0.4rem; }
.tena-perm-risk:has(input:disabled) { cursor: not-allowed; color: var(--tena-muted); }
.tena-perm-matrix__none { color: var(--tena-muted); }

/* A control the viewer may read but not change. The default input is already
   grey, so without this a disabled one looked editable. */
.tena-input:disabled,
.tena-select:disabled,
.tena-textarea:disabled {
    color: var(--tena-muted);
    border-style: dashed;
    cursor: not-allowed;
}

/* ── Sell wizard: compact chrome and a pinned action bar (#254) ─────────────
   New classes, existing tokens only. Scoped by body.tena-page-wizard so the
   shared .tena-steps, breadcrumb and workspace bar are untouched elsewhere.
   A seller in the wizard is already selling: the bottom nav (whose job is to
   offer Sell) and the workspace bar are navigation away from a flow they are
   in the middle of. The way out is .tena-wizard-head__exit. */
body.tena-page-wizard { --tena-bottom-nav-h: 0px; padding-bottom: 0; }
body.tena-page-wizard .tena-bottom-nav,
body.tena-page-wizard .tena-breadcrumb { display: none; }
@media (max-width: 1023.98px) {
    body.tena-page-wizard .tena-ws-disclosure { display: none; }
}
/* .tena-seller-main is overflow-x:hidden, which makes it a scroll container
   and stops anything inside it sticking to the viewport. `clip` clips the
   same way without becoming one. A browser without `clip` keeps `hidden`: the
   action bar then sits in the flow as it always did, nothing breaks. */
body.tena-page-wizard .tena-seller-main { overflow-x: clip; }
body.tena-page-wizard .tena-steps { margin-bottom: 1rem; }
.tena-wizard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.75rem;
}
.tena-wizard-head__title {
    margin: 0;
    font: 700 1.15rem var(--tena-font);
    color: var(--tena-green-deep);
}
.tena-wizard-head__exit {
    flex: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tena-muted);
    text-decoration: none;
}
.tena-wizard-head__exit:hover { color: var(--tena-green-deep); }
/* The editor (#303) is the wizard's form without the step rail: a column of
   cards, one per section, same fields (includes/listing-form.php). */
.tena-wizard { max-width: 760px; }
.tena-wizard-card { padding: 1.25rem; margin-bottom: 1rem; overflow: visible; }
.tena-wizard-card__title {
    font: 700 0.78rem var(--tena-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tena-muted);
    margin: 0 0 1rem;
}
.tena-wizard-card > .tena-field:first-of-type { margin-top: 0; }
.tena-wizard-actions__primary { flex: 1; }
.tena-chip--static { cursor: default; margin-bottom: 0.9rem; }
.tena-thumb-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, 88px);
    gap: 0.5rem;
}
.tena-thumb-video {
    display: block;
    width: 100%; max-width: 300px;
    margin-top: 0.9rem;
    background: #000;
    border-radius: var(--r-sm);
}
/* A checkbox with its sentence beside it. */
.tena-check-row {
    display: flex; gap: 0.6rem; align-items: flex-start;
    margin-top: 0.9rem;
    font-size: 0.92rem; color: var(--tena-ink-2);
    cursor: pointer;
}
.tena-check-row input { margin-top: 0.2rem; flex: none; }
/* A reason the seller cannot act, or a fact about orders in flight. */
.tena-notice {
    padding: 0.85rem 1rem;
    border-radius: var(--r-sm);
    margin-bottom: 1rem;
    font-size: 0.92rem;
}
.tena-notice--warning { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-notice--info    { background: var(--tena-info-bg);    color: var(--tena-info); }
/* A notice that ends in the one thing to do about it (#307). */
.tena-notice--action {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.6rem 1rem;
}
.tena-notice--action .tena-btn { flex: none; }
/* The step's primary action stays on screen however tall the step is. */
.tena-wizard-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--tena-bg);
    border-top: 1px solid var(--tena-border);
}
/* Photos on a laptop: one 904px column put the shutter under the fold at
   800px. From 900px wide the viewfinder takes the left column and the
   status, captured shots, mode switch and shutter stack beside it. The phone
   layout (#60, full-screen under 640px) is not touched. */
@media (min-width: 900px) {
    body.tena-page-wizard .tena-capture {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 16rem;
        column-gap: 1.25rem;
        align-items: start;
        max-width: none;
    }
    body.tena-page-wizard .tena-capture > * { grid-column: 2; min-width: 0; }
    body.tena-page-wizard .tena-capture > .tena-capture__bar,
    body.tena-page-wizard .tena-capture > .tena-capture__intro,
    body.tena-page-wizard .tena-capture > .tena-capture__videoprev { grid-column: 1 / -1; }
    body.tena-page-wizard .tena-capture > .tena-capture__stage { grid-column: 1; grid-row: 3 / span 6; }
}

/* The open category's children, under the top-level chips on /browse (#280).
   Same chips, pulled up against the row above and one step quieter, so the
   two rows read as parent and detail. Existing tokens only. */
.tena-filter-chips--sub { margin-top: -0.6rem; padding-left: 0.25rem; border-left: 2px solid var(--tena-green-tint); }
.tena-filter-chips--sub a { background: transparent; font-size: 0.78rem; padding: 5px 10px; }

/* ── Admin: the category tree (#280) ───────────────────────────────────────
   New classes, existing tokens only. Parents are native <details>, so the
   tree opens, closes and reads correctly with no script. */
.tena-cat-tree { display: grid; gap: 0.75rem; }
.tena-cat-node {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
}
.tena-cat-node__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
}
.tena-cat-node__head::-webkit-details-marker { display: none; }
.tena-cat-node__chevron {
    width: 0.55rem; height: 0.55rem; flex: none;
    border-right: 2px solid var(--tena-muted);
    border-bottom: 2px solid var(--tena-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
.tena-cat-node[open] > .tena-cat-node__head .tena-cat-node__chevron { transform: rotate(45deg); }
.tena-cat-node__thumb {
    width: 36px; height: 36px; flex: none;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--tena-surface-2);
}
.tena-cat-node__name { font-weight: 700; color: var(--tena-green-deep); }
.tena-cat-node__meta { margin-left: auto; color: var(--tena-muted); font-size: 0.82rem; white-space: nowrap; }
.tena-cat-children { list-style: none; margin: 0; padding: 0; }
.tena-cat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 1rem 0.65rem 2.3rem;
    border-top: 1px solid var(--tena-border);
}
.tena-cat-row--root { padding-left: 1rem; background: var(--tena-surface-2); }
.tena-cat-row[hidden], .tena-cat-node[hidden] { display: none; } /* the search filter; display:flex above would win otherwise */
.tena-cat-row.is-dragging { opacity: 0.45; }
.tena-cat-row__grip { color: var(--tena-muted); cursor: grab; letter-spacing: -0.2em; user-select: none; margin-left: -1.2rem; }
.tena-cat-row__names { flex: 1 1 16rem; min-width: 0; display: grid; gap: 0.1rem; font-size: 0.82rem; color: var(--tena-muted); }
.tena-cat-row__names strong { font-size: 0.95rem; color: var(--tena-ink); font-weight: 600; }
.tena-cat-row__names code { color: var(--tena-ink-2); font-size: 0.8rem; }
.tena-cat-row__controls { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.tena-cat-row__controls form { display: inline-flex; margin: 0; }
.tena-cat-switch {
    border: 1px solid var(--tena-border);
    background: var(--tena-surface);
    color: var(--tena-muted);
    border-radius: var(--r-pill);
    padding: 0.2rem 0.65rem;
    font: 600 0.78rem var(--tena-font);
    cursor: pointer;
    white-space: nowrap;
}
.tena-cat-switch.is-on { background: var(--tena-success-bg); border-color: var(--tena-success); color: var(--tena-success); }
.tena-cat-arrows { gap: 0.15rem; }
.tena-cat-arrow {
    width: 28px; height: 28px;
    border: 1px solid var(--tena-border);
    background: var(--tena-surface);
    border-radius: var(--r-sm);
    color: var(--tena-ink-2);
    cursor: pointer;
    line-height: 1;
}
.tena-cat-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.tena-cat-add {
    display: block;
    padding: 0.7rem 1rem 0.7rem 2.3rem;
    border-top: 1px solid var(--tena-border);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-cat-add:hover { background: var(--tena-green-tint); }

/* The legal text editor: a long document wants room and an easy line height.
   Same typeface as everything else (§11). */
.tena-legal-editor {
    font-size: 0.92rem;
    line-height: 1.6;
    min-height: 28rem;
    resize: vertical;
}

/* The preview takes the editor's place, at the public page's measure, so what
   is approved is what is published. */
.tena-legal-preview {
    max-width: 780px;
    min-height: 28rem;
    padding: 0.5rem 0.25rem;
}
.tena-legal-preview > :first-child { margin-top: 0; }

/* ── Admin: deciding a review (KYC) ─────────────────────────────────────────
   One bar with the decision, pinned to the bottom of the window so it never
   has to be found. New classes, existing tokens. .tena-admin-main is
   overflow-x:hidden, which would stop the bar sticking; `clip` clips the same
   way without becoming a scroll container (a browser without it keeps
   `hidden` and the bar sits in the flow). */
.tena-admin-main:has(.tena-decision-bar) { overflow-x: clip; }
.tena-decision-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.85rem 0 calc(0.85rem + env(safe-area-inset-bottom));
    background: var(--tena-bg);
    border-top: 1px solid var(--tena-border);
}
.tena-decision-bar form { margin: 0; }
.tena-decision-bar .tena-btn-primary { min-width: 9rem; }
/* A modal that asks for the few things one action needs. */
.tena-dialog {
    border: none;
    border-radius: var(--r);
    padding: 0;
    width: min(480px, calc(100vw - 2rem));
    box-shadow: var(--shadow-lg);
    color: var(--tena-ink);
}
.tena-dialog::backdrop { background: rgba(15, 61, 46, 0.45); }
.tena-dialog:not([open]) { display: none; }
.tena-dialog__body { padding: 1.5rem; }
.tena-dialog__title { margin: 0 0 1rem; font: 700 1.15rem var(--tena-font); color: var(--tena-green-deep); }
.tena-dialog .tena-check-cards { margin-bottom: 1rem; }

/* ── Admin: the KYC assessment ─────────────────────────────────────────────
   The recommendation first, its two scores as equals, then the reasons.
   New classes, existing tokens. Tone comes from one modifier on the section. */
.tena-assess {
    --assess: var(--tena-muted);
    --assess-bg: var(--tena-surface-2);
    margin: 1rem 0 1.25rem;
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    background: var(--tena-surface);
    overflow: hidden;
}
.tena-assess--pass { --assess: var(--tena-success); --assess-bg: var(--tena-success-bg); }
.tena-assess--warn { --assess: var(--tena-warning); --assess-bg: var(--tena-warning-bg); }
.tena-assess--fail { --assess: var(--tena-danger);  --assess-bg: var(--tena-danger-bg); }
/* The verdict is carried by one mark beside the words, not by a coloured
   stripe and a tinted band: the card stays a plain card, and colour is kept
   for the things that are actually good, doubtful or wrong. */
.tena-assess__head { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--tena-border); }
.tena-assess__icon {
    flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--assess-bg); color: var(--assess);
    font: 700 1.25rem var(--tena-font);
}
.tena-assess__text { min-width: 0; }
.tena-assess__eyebrow { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tena-muted); }
.tena-assess__title { margin: 0.1rem 0 0.2rem; font: 700 1.25rem var(--tena-font); color: var(--tena-ink); }
.tena-assess__context { margin: 0; font-size: 0.9rem; color: var(--tena-ink-2); }
.tena-assess__meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; padding: 1.25rem; border-bottom: 1px solid var(--tena-border); }
.tena-assess__checks { list-style: none; margin: 0; padding: 0.5rem 1.25rem 0.9rem; }
.tena-assess__check { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; font-size: 0.92rem; color: var(--tena-ink-2); }
.tena-assess__check strong { color: var(--tena-ink); font-weight: 600; }
.tena-assess__mark {
    flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; color: var(--tena-white);
}
.tena-assess__check--pass .tena-assess__mark { background: var(--tena-success); }
.tena-assess__check--warn .tena-assess__mark { background: var(--tena-warning); }
.tena-assess__check--fail .tena-assess__mark { background: var(--tena-danger); }

.tena-meter { --meter: var(--tena-muted); min-width: 0; }
.tena-meter--pass { --meter: var(--tena-success); }
.tena-meter--warn { --meter: var(--tena-warning); }
.tena-meter--fail { --meter: var(--tena-danger); }
.tena-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.45rem; }
.tena-meter__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tena-muted); }
.tena-meter__value { font: 700 1.35rem var(--tena-font); color: var(--meter); }
.tena-meter__track { position: relative; height: 10px; border-radius: 999px; background: var(--tena-surface-2); }
.tena-meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--meter); }
/* The two lines from the settings, so a score is read against them. */
.tena-meter__line { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tena-ink-2); opacity: 0.55; }
.tena-meter__scale { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.76rem; color: var(--tena-muted); }
.tena-meter__note { margin: 0; font-size: 0.85rem; color: var(--tena-muted); }