/* Lumynq product theme: the marketing site's ink, paper and lime palette.
   Bootstrap remains responsible for layout, responsive utilities and semantics. */
:root {
    --bs-body-color: #202c24;
    --bs-body-bg: #f3f5f1;
    --bs-border-color: #dce2d8;
    --bs-link-color: #375a2a;
    --bs-link-hover-color: #21391a;
    --bs-primary-rgb: 55, 90, 42;
    --bs-secondary-color: #606e60;
    --lq-sidebar-width: 220px;
}
body { color: var(--bs-body-color); line-height: 1.55; }
::selection { background: #c8ff72; color: #121916; }
h1, h2, h3, h4, h5 { letter-spacing: -.035em; font-weight: 600; }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, summary:focus-visible, .chip:focus-visible {
    outline: 3px solid #537c35;
    outline-offset: 3px;
}
.sidebar a:focus-visible, .sidebar button:focus-visible, .sidebar summary:focus-visible {
    outline-color: #c8ff72;
}
.sidebar-brand { padding: 0 1.25rem; flex-shrink: 0; }
.sidebar-nav { padding: 1rem .75rem 1.25rem; gap: .15rem; }
.nav-kicker {
    margin: 1rem .65rem .3rem; font-size: .68rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #8d9a8e;
}
.sidebar-nav .nav-kicker:first-child { margin-top: .25rem; }
.sidebar-nav .nav-link { padding: .55rem .75rem; border-radius: .55rem; font-size: .92rem; font-weight: 600; }
.sidebar-nav .nav-link.active, .sidebar-nav .nav-link-platform.active {
    background: #c8ff72; color: #121916; font-weight: 700;
}
.sidebar-nav .nav-link:not(.active):hover { background: #253028; color: #f3f5f1; }
.sidebar-nav .nav-icon, .user-menu .nav-icon {
    width: 1.85rem; height: 1.85rem; padding: .32rem; border-radius: .5rem;
    background: rgba(243, 245, 241, .1); color: #c8ff72;
}
.sidebar-nav .nav-link.active .nav-icon, .sidebar-nav .nav-link-platform.active .nav-icon {
    background: #c8ff72; color: #121916;
}
.nav-icon { width: 1.15rem; height: 1.15rem; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; opacity: 1; }
.nav-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon .nav-icon-fill { fill: currentColor; stroke: none; }
.section-nav .nav-icon { width: 1rem; height: 1rem; background: transparent; color: inherit; padding: 0; }
.section-nav a { display: inline-flex; align-items: center; gap: .4rem; }
.user-menu .nav-link, .user-menu .btn-link { display: flex; align-items: center; gap: .5rem; }
.user-menu { padding: 1.25rem 1.5rem; }
/* overflow-x: clip (not hidden): nothing inside the main column can widen the
   page, and unlike hidden it creates no scroll container, so the sticky
   publish banner and the fixed screen menus are unaffected. */
.content { min-width: 0; overflow-x: clip; }
.page-body { margin-inline: auto; }
.section-nav {
    display: flex; flex-wrap: wrap; gap: .25rem; width: fit-content; max-width: 100%;
    margin: 0 0 1.25rem; padding: .3rem; background: #fff;
    border: 1px solid #e4e8df; border-radius: .8rem;
}
.section-nav a {
    padding: .4rem .9rem; border-radius: .55rem; text-decoration: none;
    color: #3c4c3c; font-weight: 600; font-size: .9rem;
}
.section-nav a.active { background: #121916; color: #c8ff72; }
.section-nav a:hover:not(.active) { background: #f3f5f1; color: #121916; }
.nav-pills .nav-link { border-radius: .55rem; color: #34482c; font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: #121916; color: #c8ff72; }
.page-header { gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e4e8df; }
.page-header h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 600; letter-spacing: -.045em; }
.card, .stat-card, .device-card, .media-card, .table-card, .auth-card {
    border-color: #dce2d8; border-radius: .75rem;
    box-shadow: 0 2px 5px #12191604;
}
.card-header, .card-footer { background: #f9faf7; border-color: #e4e8df; }
.card-body { padding: 1.5rem; }
.stat-card { padding: 1.5rem; }
.stat-card .stat-label { color: #5d6b59; font-size: .72rem; letter-spacing: .1em; font-weight: 700; }
.stat-card .stat-value { font-size: 2.5rem; font-weight: 500; letter-spacing: -.06em; margin: .35rem 0; }
.stat-card .stat-sub { color: #606e60; }
a.stat-card:hover { border-color: #8ba379; background: #fcfef8; }
.btn { border-radius: .4rem; font-weight: 600; padding: .6rem 1rem; font-size: .9rem; white-space: nowrap; }
.btn-sm { padding: .38rem .7rem; font-size: .8rem; }
.btn-primary {
    --bs-btn-color: #121916; --bs-btn-bg: #c8ff72; --bs-btn-border-color: #b2e75c;
    --bs-btn-hover-color: #121916; --bs-btn-hover-bg: #b7ed60; --bs-btn-hover-border-color: #99ca4b;
    --bs-btn-active-color: #121916; --bs-btn-active-bg: #ace252; --bs-btn-active-border-color: #89b43e;
    --bs-btn-disabled-color: #33452a; --bs-btn-disabled-bg: #dfeacb; --bs-btn-disabled-border-color: #cfdcbb;
    --bs-btn-focus-shadow-rgb: 83, 124, 53;
}
.btn-outline-primary, .btn-outline-secondary {
    --bs-btn-color: #34482c; --bs-btn-border-color: #a4b09c;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #34482c; --bs-btn-hover-border-color: #34482c;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #34482c; --bs-btn-active-border-color: #34482c;
    --bs-btn-disabled-color: #6d7867; --bs-btn-disabled-border-color: #c6cebf;
    --bs-btn-focus-shadow-rgb: 83, 124, 53;
}
.btn-link { --bs-btn-color: #375a2a; --bs-btn-hover-color: #21391a; }
/* Bootstrap 5.1 uses literal button colours; retain explicit states until the
   bundled Bootstrap version supports component custom properties. */
.btn-primary { color: #121916; background: #c8ff72; border-color: #b2e75c; }
.btn-primary:hover, .btn-primary:focus { color: #121916; background: #b7ed60; border-color: #99ca4b; }
.btn-primary:active, .btn-primary.active { color: #121916; background: #ace252; border-color: #89b43e; }
.btn-primary:disabled, .btn-primary.disabled { color: #33452a; background: #dfeacb; border-color: #cfdcbb; }
.btn-primary:focus, .btn-primary:active:focus { box-shadow: 0 0 0 .2rem #537c3526; }
.btn-outline-primary, .btn-outline-secondary { color: #34482c; border-color: #a4b09c; }
.btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-primary:active, .btn-outline-secondary:active { color: #fff; background: #34482c; border-color: #34482c; }
.btn-outline-primary:focus, .btn-outline-secondary:focus { box-shadow: 0 0 0 .2rem #537c3526; }
.btn-outline-primary:disabled, .btn-outline-secondary:disabled { color: #6d7867; background: transparent; border-color: #c6cebf; }
a, .btn-link { color: #375a2a; }
a:hover, .btn-link:hover { color: #21391a; }
.form-label, .col-form-label { font-size: .88rem; font-weight: 600; color: #3c4936; }
.form-control, .form-select { border-color: #cdd6c6; border-radius: .4rem; padding: .65rem .8rem; color: #202c24; }
.form-control:focus, .form-select:focus { border-color: #6e934f; box-shadow: 0 0 0 .2rem #537c3526; }
.form-check-input:checked { background-color: #375a2a; border-color: #375a2a; }
.form-check-input:focus { border-color: #6e934f; box-shadow: 0 0 0 .2rem #537c3526; }
.nav-pills { gap: .35rem; }
.nav-pills .nav-link { color: #4c5d42; font-size: .9rem; border-radius: .4rem; }
.nav-pills .nav-link.active { background: #243720; color: #fff; }
.nav-pills .nav-link:not(.active):hover { background: #e5ebdf; }
.table { --bs-table-color: #263221; --bs-table-border-color: #e6ebe1; --bs-table-hover-bg: #f3f7ed; }
.table > thead > tr > th { background: #f6f8f2; color: #5b6a52; font-size: .73rem; text-transform: uppercase; letter-spacing: .065em; padding: .95rem 1rem; font-weight: 700; }
.table > tbody > tr > td { padding: 1rem; vertical-align: middle; }
.table > tbody > tr.platform-own-account > td { background: #e7f6c8; }
.platform-role-sign { background: #163528; color: #f5f7fa; }
.platform-own-sign { background: #c8ff72; color: #163528; }
.table > :not(:first-child) { border-top-color: #dce2d8; }
.table-responsive { scrollbar-width: thin; }
/* A table wider than its card scrolls inside .table-responsive, never the
   page. col-prose gives a text column a readable block instead of one word a
   line, col-name keeps a name column from being squeezed, and actions-group
   lets a row's buttons wrap as whole buttons (never mid-caption: .btn is
   nowrap): stacked while the table is squeezed to its minimum, one line from
   xl up where the pinned cell can afford it. From the md breakpoint up, where
   the card has room for both, the row's key column (col-pin-start) and its
   actions (col-pin-end) are pinned in view while the middle scrolls; pinned
   cells are opaque so scrolled content does not show through, and their
   divider is a pseudo-element because collapsed table borders do not travel
   with a sticky cell. */
.table .col-prose { min-width: 18rem; max-width: 30rem; white-space: normal; overflow-wrap: anywhere; }
.table .col-name { min-width: 12rem; }
.table .actions-group { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; vertical-align: middle; }
@media (min-width: 768px) {
    .table .col-pin-start, .table .col-pin-end { position: sticky; z-index: 1; background-color: #fff; }
    .table .col-pin-start { left: 0; }
    .table .col-pin-end { right: 0; }
    .table > thead > tr > .col-pin-start, .table > thead > tr > .col-pin-end { background-color: #f6f8f2; z-index: 2; }
    .table .col-pin-start::after, .table .col-pin-end::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #e6ebe1; }
    .table .col-pin-start::after { right: 0; }
    .table .col-pin-end::after { left: 0; }
    .table-hover > tbody > tr:hover > .col-pin-start, .table-hover > tbody > tr:hover > .col-pin-end { background-color: #f3f7ed; }
}
@media (min-width: 1200px) { .table .actions-group { flex-wrap: nowrap; } }
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .65em; }
.alert { border-radius: .5rem; }
.alert-info { color: #34513c; background: #eaf2e4; border-color: #cfddc3; }
.alert-info .alert-link { color: #294420; }
.publish-banner { border-left: 4px solid #7ea341; box-shadow: 0 3px 12px #12191609; }
.dropzone { padding: 2.75rem 1.5rem; border-color: #a9bc98; border-radius: .75rem; background: #fcfef8; color: #617354; }
.dropzone.dragover { border-color: #537c35; background: #effadd; }
.device-body { padding: 1rem 1.1rem 1.1rem; }
.device-more { width: 100%; }
.device-play {
    display: flex; flex-direction: column; gap: .15rem;
    margin: 0 0 .85rem; padding: .7rem .8rem; border-radius: .7rem;
    background: #121916; color: #f3f5f1;
}
.device-play span {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c8ff72;
}
.device-play strong {
    font-size: .95rem; font-weight: 600; overflow-wrap: anywhere;
}
.device-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .75rem; }
.device-stats > div {
    min-width: 0; padding: .55rem .65rem; border-radius: .6rem; background: #f3f5f1;
}
.device-stats span {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #617354;
    white-space: normal; line-height: 1.25;
}
.device-stats strong, .device-stats em {
    display: block; margin-top: .12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.device-stats strong { font-size: .92rem; font-weight: 600; color: #121916; font-style: normal; }
.device-stats em { margin-top: 0; font-size: .75rem; font-style: normal; color: #617354; }
/* The connection line (Wi-Fi name, signal, band) is the longest: a full row. */
.device-stats > .stat-wide { grid-column: 1 / -1; }
/* Weak Wi-Fi and power/throttling flags: Bootstrap's alert-warning colours. */
.device-stats > div.is-warning { background: #fff3cd; box-shadow: inset 0 0 0 1px #ffecb5; }
.device-stats > div.is-warning span, .device-stats > div.is-warning strong { color: #664d03; }
.device-meta { row-gap: .45rem; }
.device-meta dt { color: #617354; font-weight: 600; }
.device-meta dd { color: #121916; }
.device-footer, .media-footer { background: #f9fbf5; padding: .75rem; border-color: #e4e8df; }
.device-footer { border-radius: 0 0 .75rem .75rem; }
.device-shot { border-radius: .7rem .7rem 0 0; aspect-ratio: 16 / 6; max-height: 6.5rem; }
.media-body { padding: .85rem 1rem; }
.media-grid { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.media-footer { display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem; }
.media-footer > .btn { flex: 1 1 auto; white-space: nowrap; text-align: center; }
.media-card.is-selected { border-color: #121916; box-shadow: 0 0 0 3px #c8ff72; }
.media-card .media-select {
    position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0;
    border: 0; background: transparent; cursor: pointer;
}
.media-card .media-select-box {
    position: absolute; top: .45rem; right: .45rem;
    width: 1.65rem; height: 1.65rem; border-radius: .35rem;
    border: 2px solid #fff; background: rgba(18, 25, 22, .55);
    box-shadow: 0 1px 4px rgba(18, 25, 22, .45);
    display: flex; align-items: center; justify-content: center;
}
.media-card.is-selected .media-select-box { background: #c8ff72; border-color: #121916; }
.media-card.is-selected .media-select-box::after {
    content: ""; width: .42rem; height: .75rem;
    border: solid #121916; border-width: 0 3px 3px 0;
    transform: rotate(45deg) translate(-1px, -2px);
}
.media-card .media-select:focus-visible { outline: 3px solid #c8ff72; outline-offset: -6px; }
.media-preview-stage {
    background: #121916; border-radius: .65rem; min-height: 12rem;
    display: flex; align-items: center; justify-content: center; padding: .5rem;
}
.media-preview-stage img, .media-preview-stage video { max-width: 100%; max-height: 70vh; object-fit: contain; }
.playlist-row { padding: 1rem; border-color: #dce2d8; }
.chip-on { background: #243720; border-color: #243720; }
.modal-content { border: 1px solid #dce2d8; border-radius: .85rem; box-shadow: 0 24px 80px #12191633; }
.modal-header, .modal-body, .modal-footer { padding: 1.25rem 1.5rem; }
.modal-header, .modal-footer { border-color: #e4e8df; }
.modal-footer { background: #f7f9f3; border-radius: 0 0 .85rem .85rem; }
.dropdown-menu { border-color: #dce2d8; border-radius: .5rem; box-shadow: 0 8px 28px #1219161a; }
.dropdown-item:active { background: #243720; }
.dropdown-item:focus, .dropdown-item:hover { background: #edf3e6; color: #263221; }
.auth-shell { background: #121916; padding-block: clamp(2rem, 8vh, 6rem); }
.auth-brand { background: transparent; margin-bottom: 1.75rem; }
.auth-card { padding: 2rem; border: none; box-shadow: 0 20px 70px #0003; }
.auth-card h1 { font-size: 1.8rem; }
@media (min-width: 768px) {
    .content { padding: 2.5rem 2.75rem; }
}
@media (max-width: 767.98px) {
    .content { padding: 1.25rem 1rem; }
    .page-header { margin-bottom: 1.25rem; }
    .stat-card, .card-body { padding: 1rem; }
    .stat-card .stat-value { font-size: 2rem; }
    .auth-card { padding: 1.5rem; }
    .modal-header, .modal-body, .modal-footer { padding: 1rem; }
    .publish-banner { top: 5.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* Inputs reserve the native select indicator gutter at every size. */
.form-select, .form-select.form-select-sm, .form-select.form-select-lg {
    padding-right: 2.75rem;
    background-position: right .9rem center;
    text-overflow: ellipsis;
}
.form-select:disabled { background-color: #f0f3ec; }
.form-control-sm, .form-select-sm { min-height: 2.25rem; font-size: .85rem; }
.form-control:disabled, .form-control[readonly] { background-color: #f4f6f1; }
.form-text { font-size: .79rem; color: #677461; line-height: 1.5; }
.form-section { padding: 1.25rem; border: 1px solid #dce2d8; border-radius: .65rem; background: #fff; }
.form-section + .form-section { margin-top: 1rem; }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2 { margin-bottom: .3rem; }
.section-heading p { margin: 0; font-size: .83rem; color: #677461; }
.section-kicker { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #63745a; margin-bottom: .5rem; }
.form-intro { border-left: 3px solid #8db758; padding: .25rem 0 .25rem 1rem; margin-bottom: 1.5rem; color: #65715e; font-size: .87rem; }
.modal-header { background: #f8faf5; border-radius: .85rem .85rem 0 0; align-items: center; }
.modal-title { font-size: 1.25rem; }
.modal-body { background: #fafbf8; }
.modal-body .form-label { display: block; margin-bottom: .45rem; }
.modal-body .form-control, .modal-body .form-select { background-color: #fff; }
.modal-dialog { margin-block: 2rem; }
.modal-footer { gap: .35rem; box-shadow: 0 -3px 12px #12191604; }
.modal-body .btn-group .btn-check:checked + .btn { background: #243720; border-color: #243720; color: #fff; }
.page-header form { flex-wrap: wrap; }
.page-header form input { flex: 1 1 12rem; width: auto; min-width: 0; }
.playlist-row { grid-template-columns: auto 96px minmax(0,1fr); padding: 1.25rem; margin-bottom: 1rem; }
.playlist-row .row-thumb { width: 96px; height: 72px; }
.playlist-row .row-fields { gap: .8rem 1.25rem; }
.playlist-row .row-name { font-size: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #e6ebe0; }
.playlist-row .row-controls { padding-top: .35rem; }
.assignment-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .25rem; }
.text-bg-light { background: #eaf0e2; color: #34482c; }
/* The text-bg-* colour helpers arrived in Bootstrap 5.2; the bundled stylesheet is
   5.1, whose .badge is white text on no background, so every badge that names one of
   these (status, trigger, level, severity) was invisible. Same colours and text
   contrast as 5.2, read from 5.1's own --bs-*-rgb (primary is the theme's green). */
.text-bg-primary { background-color: rgb(var(--bs-primary-rgb)); color: #fff; }
.text-bg-secondary { background-color: rgb(var(--bs-secondary-rgb)); color: #fff; }
.text-bg-success { background-color: rgb(var(--bs-success-rgb)); color: #fff; }
.text-bg-danger { background-color: rgb(var(--bs-danger-rgb)); color: #fff; }
.text-bg-warning { background-color: rgb(var(--bs-warning-rgb)); color: #000; }
.text-bg-info { background-color: rgb(var(--bs-info-rgb)); color: #000; }
.text-bg-dark { background-color: rgb(var(--bs-dark-rgb)); color: #fff; }
.screen-column { display: flex; flex-direction: column; }
.screen-column .device-card { height: auto; flex: 1; border-radius: .75rem .75rem 0 0; }
.screen-assignments { border: 1px solid #dce2d8; border-top: 0; padding: 1rem 1.25rem; background: #fafcf6; border-radius: 0 0 .75rem .75rem; }
.assignment-row { padding: .85rem 0; border-top: 1px solid #e4e8df; overflow-wrap: anywhere; }
.preview-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.playlist-preview { padding: 1rem; background: #121916; border-radius: .65rem; color: #edf3e6; }
.preview-stage { aspect-ratio: 16/9; width: 100%; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preview-stage img, .preview-stage video { width: 100%; height: 100%; object-fit: contain; }
.portrait .preview-stage { aspect-ratio: 9/16; width: min(100%, 270px); margin-inline: auto; }
.preview-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.preview-controls .btn-outline-secondary { color: #e5eddc; border-color: #73826a; }
.preview-caption { margin: .85rem 0 0; text-align: center; overflow-wrap: anywhere; color: #c9d4c1; }
.playlist-preview:fullscreen { display: flex; flex-direction: column; justify-content: center; }
.playlist-preview:fullscreen .preview-stage { max-height: calc(100vh - 120px); width: 100%; flex: 1; aspect-ratio: auto; }
.playlist-preview:fullscreen.portrait .preview-stage { max-width: calc((100vh - 120px)*9/16); }
@media (min-width: 992px) { .modal-lg { max-width: 1040px; } }
@media (max-width: 575.98px) {
    .preview-toolbar { grid-template-columns: 1fr; gap: .5rem; }
    .form-section { padding: 1rem; }
    .playlist-row { grid-template-columns: auto 72px minmax(0,1fr); padding: 1rem; }
    .playlist-row .row-thumb { width: 72px; height: 54px; }
    .playlist-row .row-fields > label { flex-wrap: wrap; }
    .section-heading { flex-wrap: wrap; }
    .modal-dialog { margin: .5rem; }
}

/* Schedule timeline (Components/Shared/ScheduleTimeline.razor): one bar per HDMI output, positioned by inline style. */
.timeline-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.timeline-output { margin-top: 1.5rem; }
.timeline-output h2 { margin-bottom: .6rem; }
.tl-track { position: relative; }
.tl-bar { position: relative; height: 2.25rem; background: #f7f9f3; border: 1px solid #dce2d8; border-radius: .5rem; overflow: hidden; }
.tl-seg { position: absolute; top: 0; bottom: 0; border: 0; border-left: 1px solid #ffffffaa; padding: 0 .35rem; font-size: .75rem; color: #121916; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.tl-seg.tl-join { border-left: 0; }
.tl-seg.tl-selected { outline: 2px solid #121916; outline-offset: -2px; }
button.tl-seg:focus-visible { outline: 2px solid #375a2a; outline-offset: -2px; }
.tl-c0 { background: #c8ff72; }
.tl-c1 { background: #8fd3f4; }
.tl-c2 { background: #f7c59f; }
.tl-c3 { background: #d9a5f2; }
.tl-c4 { background: #9be7c4; }
.tl-c5 { background: #f4a6a6; }
.tl-c6 { background: #ffe08a; }
.tl-c7 { background: #b8c4ff; }
.tl-gap { background: repeating-linear-gradient(45deg, #e9ede4 0 6px, #f7f9f3 6px 12px); }
.tl-ticks { position: relative; height: 1.1rem; font-size: .65rem; color: #5d6b59; margin-top: .2rem; }
.tl-tick { position: absolute; transform: translateX(-50%); }
.tl-now { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; background: #d33; z-index: 2; }
.tl-rows { margin-top: .5rem; }
.tl-row { display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: .75rem; align-items: center; padding: .4rem 0; border-top: 1px solid #e4e8df; }
.tl-row-bar { position: relative; height: 1rem; background: #fafbf8; border-radius: .25rem; }
.tl-row-bar .tl-seg { padding: 0; }
.tl-state-overridden { opacity: .35; background-image: repeating-linear-gradient(45deg, transparent 0 4px, #12191633 4px 8px); }
.tl-state-noitems { background: transparent !important; border: 1px dashed #9aa79a; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }
.tl-legend span::before { content: ""; display: inline-block; width: .85rem; height: .85rem; margin-right: .35rem; vertical-align: -.1rem; border-radius: .2rem; border: 1px solid #dce2d8; }
.tl-legend-plays::before { background: #c8ff72; }
.tl-legend-overridden::before { background: #c8ff72; opacity: .35; background-image: repeating-linear-gradient(45deg, transparent 0 4px, #12191633 4px 8px); }
.tl-legend-noitems::before { background: transparent; border: 1px dashed #9aa79a !important; }
.tl-legend-gap::before { background: repeating-linear-gradient(45deg, #e9ede4 0 3px, #f7f9f3 3px 6px); }
.tl-findings { padding-left: 0; list-style: none; margin: .75rem 0 0; }
.tl-findings li { padding: .35rem 0; border-top: 1px solid #e4e8df; }
@media (max-width: 575.98px) {
    .timeline-toolbar { grid-template-columns: 1fr; gap: .5rem; }
    .tl-row { grid-template-columns: 1fr; gap: .25rem; }
}

/* Screenshot gallery (Screens > Health & events > Screenshots, /screenshots): the media
   grid with a wide tile, the capture time on its own line and the output/trigger badges. */
.screenshot-card .media-thumb { aspect-ratio: 16 / 9; background: #121916; }
.screenshot-card .screenshot-open {
    position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0;
    border: 0; background: transparent; cursor: pointer;
}
.screenshot-card .media-thumb img { object-fit: contain; }
.screenshot-card .media-body { font-size: .8rem; line-height: 1.35; }
.screenshot-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin: .2rem 0; }