/* ==========================================================================
   CaptivEYE V2 Template — Global design tokens and layout system
   Applies to: dashboard, camera show (livestream/timelapse/guardian),
               and all non-admin-form pages.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700&family=Encode+Sans+Condensed:wght@500;600;700&display=swap");
@import url("/css/v2-forms.css");
@import url("/css/v2-modals.css");
@import url("/css/admin-toast.css");

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    --font-condensed: "Encode Sans Condensed", "Avenir Next Condensed", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Encode Sans", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    /* For fixed-width readouts (frame timestamps, counters) — anything whose
       characters must not shift as the value changes.
     *
     * Named fonts before the generic `monospace` keyword, deliberately. Bare
     * `monospace` resolves to a different face on every platform (Menlo, DejaVu
     * Sans Mono, Consolas, Courier New), and browsers additionally apply a
     * separate default size to it — the long-standing quirk where an element
     * set to `monospace` renders ~13px where everything else gets 16px. Naming
     * real faces means the generic is only ever reached as a last resort, and
     * callers should pair this with an absolute (px) font-size so the size
     * quirk cannot apply. This is the same stack Tailwind ships, so it matches
     * what the rest of the estate already resolves to. */
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --accent: #ef7015;
    --nav-height: 74px;
    --page-max: 1420px;
    --ease: 220ms ease;
}

/* --------------------------------------------------------------------------
   Theme: Light
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
    --page-bg: #ffffff;
    --text-main: #161616;
    --text-soft: #5d5d5d;
    --logo-glass: transparent;
    --logo-border: transparent;
    --frame-bg: rgba(245, 245, 245, 0.78);
    --frame-border: rgba(0, 0, 0, 0.08);
    --line-soft: rgba(0, 0, 0, 0.09);
    --page-grad-top: #eee;
    --page-grad-bottom: #ccc;
    --modal-bg: #f7f7f7;
    --modal-overlay: rgba(0, 0, 0, 0.52);
}

/* --------------------------------------------------------------------------
   Theme: Dark
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    --page-bg: #070707;
    --text-main: #fafafa;
    --text-soft: #c8c8c8;
    --logo-glass: transparent;
    --logo-border: transparent;
    --frame-bg: rgba(255, 255, 255, 0.035);
    --frame-border: rgba(255, 255, 255, 0.14);
    --line-soft: rgba(255, 255, 255, 0.14);
    --page-grad-top: #050505;
    --page-grad-bottom: #222;
    --modal-bg: #171717;
    --modal-overlay: rgba(0, 0, 0, 0.68);
}

/* --------------------------------------------------------------------------
   Base reset
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--page-bg);
    background-image: linear-gradient(to bottom, var(--page-grad-top) 0%, var(--page-grad-bottom) 100%);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: var(--font-body);
    transition: background var(--ease), color var(--ease);
}

/* --------------------------------------------------------------------------
   Dropdown chevron
   Chrome draws its native select arrow hard against the right edge and
   ignores padding-right, so every single-line select draws its own chevron
   instead, inset 10px. (0,2,1) so it outlasts the per-page class rules that
   set background/padding; components with their own chevron (.select-wrap,
   the Users modal) are (0,2,1) too and load later, so theirs still win.
   -------------------------------------------------------------------------- */
html { --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme="dark"] { --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b0b0b0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.v2-shell {
    min-height: 100vh;
    padding: 0 20px 36px;
}

/* --------------------------------------------------------------------------
   Navigation — fixed geometry: 16px + 42px logo + 16px = 74px total.
   Logo anchored 20px from viewport left, nav 20px from right (via .v2-shell).
   -------------------------------------------------------------------------- */
.floating-nav {
    max-width: none;
    margin: 0;
    padding: 16px 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.logo-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 170px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--logo-glass);
    border: 0;
    backdrop-filter: none;
}

.logo-glass img {
    max-height: 42px;
    width: auto;
    display: block;
}

/* Per-theme logo visibility — matches camera page pattern */
.logo-glass .logo-light,
.logo-glass .logo-dark  { display: block; }

html[data-theme="light"] .logo-glass .logo-light { display: block; }
html[data-theme="light"] .logo-glass .logo-dark  { display: none;  }
html[data-theme="dark"]  .logo-glass .logo-dark  { display: block; }
html[data-theme="dark"]  .logo-glass .logo-light { display: none;  }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-shell {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-link {
    color: var(--text-main);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-condensed);
    font-weight: 600;
    letter-spacing: 0.06em;
    font-size: 1rem;
    opacity: 0.82;
    transition: color var(--ease), opacity var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
    opacity: 1;
    color: var(--accent);
    outline: none;
}

.nav-link.active {
    opacity: 1;
    color: var(--accent);
}

.nav-logout-form {
    margin: 0;
}

.nav-link-button {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.nav-burger {
    display: none; /* hidden above mobile breakpoint; revealed by media query */
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0 9px;
    border: 1px solid var(--frame-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--frame-bg) 74%, transparent);
    color: var(--text-main);
    cursor: pointer;
}

.nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform var(--ease), opacity var(--ease);
}

.nav-shell.is-open .nav-burger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-shell.is-open .nav-burger span:nth-child(2) {
    opacity: 0;
}

.nav-shell.is-open .nav-burger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease);
    z-index: 110;
}

.nav-drawer {
    position: fixed;
    top: 20px;
    right: 20px;
    width: min(320px, calc(100vw - 28px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 14px;
    border: 1px solid var(--frame-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--frame-bg) 90%, transparent);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    transform: translateX(calc(100% + 28px));
    transition: transform var(--ease);
    z-index: 111;
    backdrop-filter: blur(12px);
}

.nav-shell.is-open .nav-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.nav-shell.is-open .nav-drawer {
    transform: translateX(0);
}

.nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.nav-drawer-title {
    color: var(--text-main);
    font-family: var(--font-condensed);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nav-drawer-close {
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.nav-drawer-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.nav-drawer-link {
    display: block;
    padding: 4px 0;
}

.nav-drawer-logout-form {
    width: 100%;
}

.nav-drawer-logout-form .nav-link-button {
    width: 100%;
    text-align: left;
}

.theme-toggle {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 1.08rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Tab strip  (centered, Avenir Next Condensed, all-caps)
   -------------------------------------------------------------------------- */
.tab-strip {
    max-width: var(--page-max);
    margin: 14px auto 18px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 10px 0;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tab-item {
    border: 0;
    background: transparent;
    color: var(--text-main);
    text-transform: uppercase;
    font-family: var(--font-condensed);
    font-weight: 600;
    letter-spacing: 0.06em;
    font-size: 1rem;
    opacity: 0.82;
    cursor: pointer;
    padding: 4px 8px;
    transition: color var(--ease), opacity var(--ease);
}

.tab-item.active {
    color: var(--accent);
    opacity: 1;
}

.tab-item:hover,
.tab-item:focus-visible {
    opacity: 1;
    color: var(--accent);
    outline: none;
}

/* --------------------------------------------------------------------------
   Content grid + frames  (dashboard, camera show pages)
   -------------------------------------------------------------------------- */
.content-grid {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.content-frame {
    grid-column: span 12;
    background: var(--frame-bg);
    border: 1px solid var(--frame-border);
    border-radius: 16px;
    padding: 16px 18px;
    min-height: 140px;
}

.content-frame h2 {
    margin: 0 0 8px;
    font-family: var(--font-condensed);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.5rem;
}

.content-frame p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
    font-size: 0.95rem;
}

.content-frame.preview-hero {
    min-height: 190px;
    background-image: linear-gradient(120deg, rgba(243, 139, 31, 0.13), transparent 44%);
}

/* Column span helpers */
.span-1  { grid-column: span 1; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

/* --------------------------------------------------------------------------
   Admin preserved section  (in ui-template preview only)
   -------------------------------------------------------------------------- */
.admin-preserve {
    max-width: var(--page-max);
    margin: 18px auto 0;
    border-top: 1px dashed var(--line-soft);
    padding-top: 14px;
}

.admin-preserve-title {
    margin: 0 0 8px;
    color: var(--text-soft);
    font-family: var(--font-condensed);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

.admin-card-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-card {
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--frame-border);
    background: var(--frame-bg);
    color: var(--text-soft);
    font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Footer  (mirrors tab-strip double-line)
   -------------------------------------------------------------------------- */
.v2-footer {
    max-width: var(--page-max);
    margin: 32px auto 0;
    padding: 10px 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #888;
    letter-spacing: 0.04em;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   Buttons — Global reusable classes
   -------------------------------------------------------------------------- */
.btn {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: #ef7015;
    border-color: #ef7015;
    outline: none;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border-color: var(--frame-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.btn-danger {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background: #b70000;
    border-color: #b70000;
    outline: none;
}

html[data-theme="dark"] .btn-danger {
    background: #e05757;
    border-color: #e05757;
}

html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus-visible {
    background: #d84747;
    border-color: #d84747;
}

.btn-success {
    background: #20a05b;
    color: #fff;
    border-color: #20a05b;
}

.btn-success:hover,
.btn-success:focus-visible {
    background: #1a8049;
    border-color: #1a8049;
    outline: none;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 0.86rem;
    border-radius: 8px;
}

/* Icon-only buttons — typically modal actions */
.btn-icon-only,
.btn.icon-only {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1;
}

/* Modal action buttons — specific color classes for modal footer */
.btn-icon-danger {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
}

.btn-icon-danger:hover,
.btn-icon-danger:focus-visible {
    background: #b70000;
    border-color: #b70000;
    outline: none;
}

html[data-theme="dark"] .btn-icon-danger {
    background: #b70000;
    border-color: #b70000;
}

html[data-theme="dark"] .btn-icon-danger:hover,
html[data-theme="dark"] .btn-icon-danger:focus-visible {
    background: #b70000;
    border-color: #b70000;
}

/* ── Neutral Back / Close buttons ──────────────────────────────────────
   Site-wide style for "Back" and modal "Close/Cancel/Done" buttons: grey
   border, near-black fill, white text, dark-grey hover — matching the
   hi-res viewer Prev/Next look. Theme-tuned borders so it reads correctly
   on light pages. Selectors are qualified with .btn (e.g. .btn.btn-close)
   to out-specify the per-page inline `.btn-secondary` rules that some pages
   load after this stylesheet, since these buttons carry both classes. */
.btn.btn-back,
.btn.btn-close,
.btn.btn-modal-close {
    background: #1c1f26;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn.btn-back:hover,
.btn.btn-back:focus-visible,
.btn.btn-close:hover,
.btn.btn-close:focus-visible,
.btn.btn-modal-close:hover,
.btn.btn-modal-close:focus-visible {
    background: #2c313c;
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
    outline: none;
}

html[data-theme="light"] .btn.btn-back,
html[data-theme="light"] .btn.btn-close,
html[data-theme="light"] .btn.btn-modal-close {
    background: #1f1f1f;
    border-color: #8a8a8a;
}

html[data-theme="light"] .btn.btn-back:hover,
html[data-theme="light"] .btn.btn-back:focus-visible,
html[data-theme="light"] .btn.btn-close:hover,
html[data-theme="light"] .btn.btn-close:focus-visible,
html[data-theme="light"] .btn.btn-modal-close:hover,
html[data-theme="light"] .btn.btn-modal-close:focus-visible {
    background: #3a3a3a;
    border-color: #a8a8a8;
}

.btn-modal-save,
.btn-icon-success {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.btn-modal-save:hover,
.btn-icon-success:hover,
.btn-modal-save:focus-visible,
.btn-icon-success:focus-visible {
    background: #1d4ed8;
    border-color: #1d4ed8;
    outline: none;
}
/* Table action buttons — icon-only */
.btn-edit {
    background: #1f9d55;
    color: #fff;
    border-color: #1f9d55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-edit:hover,
.btn-edit:focus-visible {
    background: #178847;
    border-color: #178847;
    outline: none;
}

.btn-delete {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-delete:hover,
.btn-delete:focus-visible {
    background: #b70000;
    border-color: #b70000 ;
    outline: none;
}

html[data-theme="dark"] .btn-delete {
    background: #b70000;
    border-color: #b70000;
}

html[data-theme="dark"] .btn-delete:hover,
html[data-theme="dark"] .btn-delete:focus-visible {
    background: #b70000;
    border-color: #b70000;
}

.btn-assign {
    background: #ef7015;
    color: #fff;
    border-color: #ef7015;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-assign:hover,
.btn-assign:focus-visible {
    background: #ef7015;
    border-color: #ef7015;
    outline: none;
}

/* Action buttons — icon + text */
.btn-save {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-save:hover,
.btn-save:focus-visible {
    background: #1d4ed8;
    border-color: #1d4ed8;
    outline: none;
}

.btn-recycle {
    background: #1f9d55;
    color: #fff;
    border-color: #1f9d55;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-recycle:hover,
.btn-recycle:focus-visible {
    background: #178847;
    border-color: #178847;
    outline: none;
}


.btn-cleanup {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-cleanup:hover,
.btn-cleanup:focus-visible {
    background: #b70000;
    border-color: #b70000;
    outline: none;
}

html[data-theme="dark"] .btn-cleanup {
    background: #b70000;
    border-color: #b70000;
}

html[data-theme="dark"] .btn-cleanup:hover,
html[data-theme="dark"] .btn-cleanup:focus-visible {
    background: #b70000;
    border-color: #b70000;
}

/* SVG icon inside buttons */
.btn .btn-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.btn .btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   Modal — shared across all admin pages
   -------------------------------------------------------------------------- */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--modal-overlay);
    backdrop-filter: blur(1px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-backdrop.open {
    display: flex;
}

.modal {
    width: min(920px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--frame-border);
    background: var(--modal-bg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    padding: 16px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-main);
}

/* The × is DRAWN, not typed. The markup still says ×, but a glyph's ink
 * sits wherever its font puts it, and this button sets no font, so each OS
 * substitutes its own: measured in Chrome, the × sat 1.5px low in the Mac
 * system font and dead centre in Arial, so no single nudge fixes both. Two
 * bars centred on the box are exact everywhere — the same construction as
 * .nav-burger's open state. font-size: 0 hides the typed glyph; every one of
 * these buttons carries an aria-label, so a screen reader loses nothing. */
.modal-close {
    position: relative;
    border: 1px solid var(--frame-border);
    border-radius: 8px;
    background: var(--frame-bg);
    color: var(--text-main);
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
}

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* 11 × 1.5 matches the typed glyph's size and weight side by side, so the
       only visible change is that it now sits in the middle. */
    width: 11px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close:hover {
    background: var(--frame-border);
}

/* --------------------------------------------------------------------------
   Frame timestamp — Timelapse / Guardian tabs
   -------------------------------------------------------------------------- */
/* Lives here rather than in each camera view because it was previously copied
 * into cameras/show.blade.php alone, and cameras/show-ptz.blade.php — which has
 * the same #tl-meta and #gr-meta elements — silently never got it. PTZ cameras
 * rendered the timestamp as a small muted label with proportional figures while
 * fixed cameras got this. One definition, all views.
 *
 * Targeted by id, not by class, on purpose. Both views also put .tl-meta-text
 * on these spans, and that class is defined in each page's inline <style>,
 * which the browser reads AFTER this file. A class here would lose the cascade
 * to it on equal specificity and the 12px would win; an id outranks it
 * regardless of order.
 *
 * Encode Sans Condensed, NOT a monospace face — the value has to hold still as
 * the scrubber moves, but it does not need to look like code.
 * font-variant-numeric buys the first without paying the second. Condensed
 * because the string is long (DAY DD MON YYYY HH:MM) in a fixed-width strip,
 * and it matches the surrounding tab chrome.
 *
 * tabular-nums is load-bearing rather than decorative. Encode Sans's default
 * figures are emphatically proportional — measured from the shipped TTF at
 * 2000 upm:
 *
 *     0 1249   1  731   2  986   3 1012   4 1181
 *     5 1023   6 1151   7  940   8 1249   9 1151
 *
 * A "1" is 41% narrower than a "0", so 11:11 and 08:08 occupy visibly different
 * widths and the label twitches on every frame. Encode Sans Condensed ships the
 * `tnum` feature (a uniform 1141 units for all ten digits), so this genuinely
 * resolves rather than silently doing nothing as it would in a face without it.
 *
 * font-feature-settings is the fallback spelling for engines predating
 * font-variant-numeric; harmless where the modern property applies.
 *
 * The text arrives already uppercased and comma-free from
 * fmtFrameDateTimeFromKey(); text-transform only guarantees the casing of
 * anything else that lands here (e.g. the "No images loaded" placeholder).
 *
 * Deliberately NOT applied to #gr-cloud-time or to #pg-meta on the parallel
 * grid: those are small secondary labels, and 18px uppercase would break the
 * tile layout. */
#tl-meta,
#gr-meta {
    font-family: var(--font-condensed);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Responsive breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .main-nav .nav-link-admin {
        display: none;
    }

    .main-nav {
        display: none;
    }

    .nav-burger {
        display: inline-flex;
    }

    .span-6,
    .span-4 { grid-column: span 12; }

    .nav-actions,
    .main-nav { justify-content: flex-end; }

    .nav-drawer {
        top: 12px;
        right: 12px;
        width: min(300px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
    }

    .nav-drawer .nav-link-admin {
        display: none;
    }

    .admin-card-row { grid-template-columns: 1fr; }
}