/*
 * SendGear Product Language v1
 *
 * Four object families:
 * - Command Boards: dashboard, service triage, overview
 * - Mission Tickets: trips and time-bound sends
 * - Asset Dossiers: gear, service, certifications
 * - Procedure Sheets: ready checks, inspections, work orders
 *
 * This layer intentionally follows style.css in the cascade. It consolidates
 * shared hierarchy and geometry without removing the existing ticket,
 * trapezoid, receipt, or highlight-bar motifs.
 */

:root {
    --sg-ink-950: #0b1226;
    --sg-ink-900: #10182e;
    --sg-ink-800: #1a2540;
    --sg-ink-600: #53627a;
    --sg-ink-500: #6f7d94;
    --sg-ink-400: #8d9ab0;
    --sg-ink-300: #b7c1cf;
    --sg-canvas: #f2f5f8;
    --sg-paper: #ffffff;
    --sg-paper-muted: #f7f9fb;
    --sg-line: rgba(11, 18, 38, 0.11);
    --sg-line-strong: rgba(11, 18, 38, 0.2);
    --sg-cyan: #00cfe8;
    --sg-cyan-dark: #009fbd;
    --sg-coral: #ff365d;
    --sg-coral-hot: #ff6a35;
    --sg-amber: #ffc400;
    --sg-green: #00b875;
    --sg-violet: #7457ff;
    --sg-shadow-object: 0 12px 28px rgba(11, 18, 38, 0.075);
    --sg-shadow-raised: 0 18px 42px rgba(11, 18, 38, 0.11);
    --sg-radius-row: 4px;
    --sg-radius-object: 8px;
    --sg-radius-shell: 12px;
    --sg-motion: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
    --sg-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    /* Chip surfaces stay ink-dark in both themes (their text is hardcoded light) */
    --sg-chip: var(--sg-ink-950);
    --sg-chip-soft: var(--sg-ink-900);
    /* Aliases used by the service reference block */
    --sg-ink: var(--sg-ink-950);
    --sg-ink-muted: var(--sg-ink-600);
}

/* Dark theme: the whole product-language layer is variable-driven, so the ink
   scale, surfaces, and hairlines flip here. Accent colours are shared. */
[data-theme="dark"] {
    --sg-ink-950: #f1f5f9;
    --sg-ink-900: #e2e8f0;
    --sg-ink-800: #cbd5e1;
    --sg-ink-600: #9aa8bd;
    --sg-ink-500: #8291a8;
    --sg-ink-400: #64748b;
    --sg-ink-300: #475569;
    --sg-canvas: #0a0e1a;
    --sg-paper: #151d31;
    --sg-paper-muted: #1b2439;
    --sg-line: rgba(226, 232, 240, 0.12);
    --sg-line-strong: rgba(226, 232, 240, 0.24);
    --sg-shadow-object: 0 12px 28px rgba(0, 0, 0, 0.45);
    --sg-shadow-raised: 0 18px 42px rgba(0, 0, 0, 0.55);
    --sg-chip: #0b1226;
    --sg-chip-soft: #10182e;
}

body {
    background: var(--sg-canvas);
    color: var(--sg-ink-950);
}

#app {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
}

#app > .main {
    width: 100%;
    flex: 1 0 auto;
}

#app > .page-footer {
    flex: 0 0 auto;
}

.header {
    border-bottom: 1px solid var(--sg-line);
    box-shadow: 0 8px 24px rgba(11, 18, 38, 0.045);
}

.nav-link,
.page-title,
.equipment-name,
.equipment-detail-name,
.widget-header h3,
.card-title {
    color: var(--sg-ink-950);
}

.nav-link.active::after {
    height: 3px;
    background: linear-gradient(90deg, var(--sg-cyan), var(--sg-coral));
}

.section-label,
.dashboard-kicker,
.trip-object-heading > div > span,
.trip-section-heading > div > span,
.trip-summary-header > span,
.trip-object-card-head {
    color: var(--sg-cyan-dark);
    font-size: 0.67rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 8px;
    padding: 0 10px;
    border-left: 3px solid var(--sg-cyan);
    background: rgba(0, 207, 232, 0.1);
}

/* Keep the signature cut/trapezoid action language. */
.btn {
    border-radius: 2px;
    font-weight: 900;
    letter-spacing: 0.035em;
    transition:
        transform var(--sg-motion),
        box-shadow var(--sg-motion),
        border-color var(--sg-motion),
        background var(--sg-motion);
}

.btn-primary {
    background: linear-gradient(110deg, var(--sg-coral), var(--sg-coral-hot));
}

.btn-secondary {
    border-color: var(--sg-ink-950);
    color: var(--sg-ink-950);
}

.btn:hover:not(:disabled) {
    transform: skewX(-5deg) translateY(-1px);
}

/* Shared compact field header. The content remains calm; identity carries the energy. */
.dashboard-hero-header,
.gear-page-header,
.ready-check-hero,
.service-board-hero,
.main:has(.trip-ticket-stack) > .page-header,
.logbook-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    min-height: 126px;
    margin-bottom: 18px;
    padding: 22px 28px 24px;
    overflow: hidden;
    border: 0;
    border-left: 5px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
    background:
        linear-gradient(120deg, rgba(0, 207, 232, 0.11), transparent 38%),
        linear-gradient(135deg, var(--sg-ink-950), var(--sg-ink-800));
    box-shadow: var(--sg-shadow-raised);
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.dashboard-hero-header::after,
.gear-page-header::after,
.ready-check-hero::after,
.service-board-hero::after,
.main:has(.trip-ticket-stack) > .page-header::after,
.logbook-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.22;
    background:
        repeating-linear-gradient(120deg, transparent 0 52px, rgba(255, 255, 255, 0.055) 52px 53px);
    pointer-events: none;
}

.dashboard-hero-header .page-title,
.gear-page-header .page-title,
.ready-check-hero .page-title,
.service-board-hero h1,
.main:has(.trip-ticket-stack) > .page-header .page-title,
.logbook-hero .page-title {
    color: #ffffff;
}

.main:has(.gear-command-panel) .gear-page-header .page-title {
    color: #ffffff;
}

.dashboard-hero-header p,
.gear-page-header .page-subtitle,
.ready-check-hero p,
.service-board-hero p,
.main:has(.trip-ticket-stack) > .page-header .page-subtitle,
.logbook-hero p {
    color: #aeb9ca;
}

.main:has(.gear-command-panel) .gear-page-header .page-subtitle {
    color: #aeb9ca;
}

.dashboard-hero-header .dashboard-kicker,
.gear-page-header .section-label,
.ready-check-hero .section-label,
.main:has(.trip-ticket-stack) > .page-header .section-label,
.logbook-hero .section-label {
    color: var(--sg-cyan);
}

.dashboard-hero-header .dashboard-icon-btn,
.gear-page-header .btn-secondary,
.ready-check-hero .btn-secondary,
.ready-check-hero .btn-ghost,
.main:has(.trip-ticket-stack) > .page-header .btn:not(.btn-primary),
.service-board-hero .btn-secondary,
.logbook-hero .btn-secondary {
    border-color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.main:has(.gear-command-panel) .gear-page-header .gear-page-actions .btn {
    border-radius: 2px;
}

/* -----------------------------
   Command Boards
   ----------------------------- */

.main:has(.dashboard-hero-header),
.main:has(.service-board-shell) {
    background: var(--sg-canvas);
}

.readiness-strip,
.service-board-metrics {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-left: 4px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.readiness-strip button,
.service-board-metrics > button,
.service-board-metrics > div {
    border: 0;
    border-right: 1px solid var(--sg-line);
    border-radius: 0;
    background: var(--sg-paper);
    box-shadow: none;
}

.readiness-strip button:last-child,
.service-board-metrics > :last-child {
    border-right: 0;
}

.dashboard-timeline-hero {
    min-height: 0;
}

.dashboard-timeline-hero .fishbone-container {
    min-height: 0;
    border: 1px solid var(--sg-line);
    border-top: 3px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
    box-shadow: var(--sg-shadow-object);
}

.dashboard-timeline-hero .fishbone-timeline {
    min-height: 280px;
}

.fishbone-density-summary {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-left: 8px;
    padding: 3px 8px;
    border: 1px solid var(--sg-line);
    border-radius: 999px;
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
}

.fishbone-event.is-cluster .fishbone-node {
    width: 44px;
    height: 32px;
    overflow: visible;
    border: 0;
    border-radius: 2px;
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
    animation: none;
    box-shadow: 0 5px 14px color-mix(in srgb, currentColor 28%, transparent);
}

.fishbone-container.has-overdue-cluster .fishbone-now-pulse {
    opacity: 0;
    animation: none;
}

.fishbone-event.is-cluster.top {
    bottom: calc(50% - 16px);
}

.fishbone-event.is-cluster.bottom {
    top: calc(50% - 16px);
}

.fishbone-cluster-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.fishbone-event.is-cluster .fishbone-label {
    max-width: 120px;
}

.fishbone-event.is-cluster .fishbone-label-title,
.fishbone-event.is-cluster .fishbone-label-subtitle {
    max-width: 120px;
}

.fishbone-popup-action {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--sg-line);
    color: var(--sg-cyan-dark);
    font-size: 0.7rem;
    font-weight: 800;
}

/* Keep boundary events anchored to their real date while moving only their
   labels and popovers back inside the timeline canvas. */
.fishbone-event.is-start .fishbone-label {
    transform: translateX(50%);
    text-align: left;
}

.fishbone-event.is-end .fishbone-label {
    transform: translateX(-50%);
    text-align: right;
}

.fishbone-event.is-start .fishbone-popup {
    left: 50%;
    transform: translateY(10px) translateX(0);
}

.fishbone-event.is-end .fishbone-popup {
    left: 50%;
    transform: translateY(10px) translateX(-100%);
}

.fishbone-event.is-start:hover .fishbone-popup {
    transform: translateY(0) translateX(0);
}

.fishbone-event.is-end:hover .fishbone-popup {
    transform: translateY(0) translateX(-100%);
}

.timeline-cluster-modal {
    overflow: hidden;
    border-top: 4px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
}

.timeline-cluster-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.timeline-cluster-modal-title i {
    color: var(--sg-coral);
}

.timeline-cluster-modal-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.timeline-cluster-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    border-left: 3px solid var(--sg-coral);
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    font-size: 0.78rem;
}

.timeline-cluster-summary strong {
    color: var(--sg-ink-950);
    text-align: right;
}

.timeline-cluster-list {
    display: grid;
    max-height: min(56vh, 520px);
    overflow-y: auto;
    border: 1px solid var(--sg-line);
}

.timeline-cluster-row {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) auto 14px;
    gap: 12px;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px 8px 0;
    border: 0;
    border-bottom: 1px solid var(--sg-line);
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    text-align: left;
    cursor: pointer;
}

.timeline-cluster-row:last-child {
    border-bottom: 0;
}

.timeline-cluster-row:hover,
.timeline-cluster-row:focus-visible {
    background: color-mix(in srgb, var(--sg-cyan) 6%, var(--sg-paper));
}

.timeline-cluster-row-accent {
    align-self: stretch;
    background: var(--cluster-row-color);
}

.timeline-cluster-row-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.timeline-cluster-row-copy strong,
.timeline-cluster-row-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-cluster-row-copy strong {
    font-size: 0.8rem;
}

.timeline-cluster-row-copy small,
.timeline-cluster-row time {
    color: var(--sg-ink-600);
    font-size: 0.7rem;
}

.timeline-cluster-row i {
    color: var(--sg-cyan-dark);
    font-size: 0.68rem;
}

.widget-header,
.fix-panel-header,
.gear-motion-header {
    min-height: 42px;
    margin-bottom: 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--sg-line);
}

.widget-header::before,
.fix-panel-header::before,
.gear-motion-header::before {
    content: "";
    align-self: stretch;
    width: 3px;
    margin-right: 8px;
    background: var(--sg-cyan);
}

.fix-before-panel,
.dashboard-widget .card,
.quick-action-card,
.gear-motion-chip,
.next-send-card {
    border-radius: var(--sg-radius-object);
}

.service-board-library,
.service-board-toolbar {
    border-color: var(--sg-line);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: none;
}

.service-board-cluster {
    border-radius: var(--sg-radius-row);
}

.service-board-tabs button,
.service-board-context span,
.service-status-chip {
    border-radius: 999px;
}

.service-table-group,
.service-table-sheet {
    overflow: hidden;
    border-color: var(--sg-line);
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: none;
}

.service-table-group > header {
    border-left: 4px solid var(--sg-cyan);
    background: #eef3f7;
}

.service-board-table th {
    background: var(--sg-chip);
    color: #c7d2e3;
}

.service-table-divider th {
    padding: 11px 14px;
    border-block: 1px solid var(--sg-line);
    border-left: 4px solid var(--sg-cyan);
    background: #eef3f7;
    color: var(--sg-ink-950);
    text-align: left;
}

.service-table-divider:first-child th {
    border-top: 0;
}

.service-table-divider th span {
    font-size: 0.84rem;
    font-weight: 900;
}

.service-table-divider th small {
    float: right;
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding-inline: 6px;
    border-radius: 999px;
    background: #dfe7f0;
    color: var(--sg-ink-600);
    font-size: 0.7rem;
    font-weight: 900;
}

.service-task-card {
    border-radius: var(--sg-radius-object);
    box-shadow: none;
}

/* -----------------------------
   Asset Dossiers
   ----------------------------- */

.main:has(.gear-page-header),
.main:has(.equipment-detail) {
    background: var(--sg-canvas);
}

.gear-command-panel {
    border: 1px solid var(--sg-line);
    border-left: 4px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.alerts-section {
    gap: 6px;
}

.alerts-section .alert {
    min-height: 46px;
    border-radius: var(--sg-radius-row);
    box-shadow: none;
}

.equipment-grid {
    gap: 14px;
}

.equipment-card,
.gear-gallery-card {
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-top: 3px solid var(--gear-accent, var(--sg-cyan));
    border-radius: var(--sg-radius-object);
    box-shadow: var(--sg-shadow-object);
}

.equipment-card::before {
    width: 3px;
    background: var(--gear-accent, var(--sg-cyan));
    opacity: 1;
}

.equipment-card:hover,
.gear-gallery-card:hover {
    border-color: var(--sg-line-strong);
    box-shadow: var(--sg-shadow-raised);
    transform: translateY(-2px);
}

.equipment-card-header,
.equipment-card-footer {
    border-color: var(--sg-line);
}

.equipment-meta-item,
.equipment-card-type-pill {
    border-radius: var(--sg-radius-row);
}

.equipment-detail {
    border: 1px solid var(--sg-line);
    border-top: 4px solid var(--gear-accent, var(--sg-cyan));
    border-radius: var(--sg-radius-shell);
    box-shadow: var(--sg-shadow-raised);
}

.gear-dossier-panel,
.locker-status-card,
.locker-detail-stat {
    border-radius: var(--sg-radius-object);
}

.equipment-detail-meta,
.service-mono,
.detail-value[style*="monospace"] {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------
   Procedure Sheets
   ----------------------------- */

.main:has(.ready-check-hero),
.main:has(.checklist-sheet),
.main:has(.procedure-sheet) {
    background: var(--sg-canvas);
}

.ready-check-board {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-left: 4px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.ready-check-stat,
.ready-check-latest {
    border-right: 1px solid var(--sg-line);
    background: var(--sg-paper);
}

.ready-check-template-rail {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.ready-check-template-chip {
    flex: 1 0 220px;
    min-height: 104px;
    border: 0;
    border-right: 1px solid var(--sg-line);
    border-radius: 0;
    box-shadow: none;
}

.ready-check-template-chip:last-child {
    border-right: 0;
}

.ready-check-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.ready-check-row,
.checklist-history-item {
    min-height: 82px;
    border: 0;
    border-bottom: 1px solid var(--sg-line);
    border-radius: 0;
    box-shadow: none;
}

.ready-check-row:last-child,
.checklist-history-item:last-child {
    border-bottom: 0;
}

.ready-check-row::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
    background: var(--sg-cyan);
}

.ready-check-row.is-running::before {
    background: var(--sg-amber);
}

.ready-check-row.is-complete::before {
    background: var(--sg-green);
}

.ready-check-row.is-archived::before {
    background: var(--sg-ink-400);
}

.ready-check-row-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--sg-radius-row);
}

.main:has(.checklist-sheet) .checklist-sheet,
.main:has(.procedure-sheet) .procedure-sheet {
    position: relative;
    width: min(100%, 920px);
    margin-inline: auto;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--sg-line) !important;
    border-top: 4px solid var(--sg-cyan) !important;
    border-radius: var(--sg-radius-object);
    background:
        linear-gradient(to bottom, transparent 31px, rgba(11, 18, 38, 0.035) 32px),
        var(--sg-paper) !important;
    background-size: 100% 32px;
    box-shadow: var(--sg-shadow-raised) !important;
}

.checklist-sheet-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--sg-ink-950);
}

.procedure-sheet-body {
    display: grid;
    gap: 18px;
}

.checklist-sheet-table th {
    background: var(--sg-chip);
    color: #ffffff;
}

.checklist-sheet-table td {
    background: rgba(255, 255, 255, 0.92);
}

/* -----------------------------
   Mission Tickets and trip modules
   ----------------------------- */

.main:has(.trip-ticket-stack),
.main:has(.trip-sheet) {
    background: var(--sg-canvas);
}

/* The ticket silhouette is already a signature element. Keep it. */
.sg-trip-ticket {
    box-shadow: var(--sg-shadow-object);
    transition: transform var(--sg-motion), box-shadow var(--sg-motion);
}

.sg-trip-ticket:not(.is-detail):hover {
    box-shadow: var(--sg-shadow-raised);
    transform: translateY(-2px);
}

.trip-detail-ticket-wrap .sg-trip-ticket.is-detail {
    --ticket-notch-x: 96px;
    grid-template-columns: 96px minmax(0, 1fr) 280px;
}

.trip-detail-ticket-wrap .sg-trip-ticket.is-detail::before,
.trip-detail-ticket-wrap .sg-trip-ticket.is-detail::after {
    left: 96px;
}

.trip-detail-ticket-wrap .sg-trip-ticket.is-detail .trip-ticket-main {
    grid-template-columns: minmax(210px, 250px) minmax(280px, 1fr);
}

.trip-sheet-nav {
    max-width: 100%;
    padding: 5px;
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-object);
    background: rgba(11, 18, 38, 0.94);
    box-shadow: var(--sg-shadow-object);
}

.trip-sheet-nav a {
    border-radius: var(--sg-radius-row);
    color: #b9c4d5;
}

.trip-sheet-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.trip-sheet-nav strong {
    border-radius: var(--sg-radius-row);
    background: rgba(0, 207, 232, 0.16);
    color: var(--sg-cyan);
}

.trip-sheet-section > .card,
.trip-sheet-section > div > .card,
.trip-agenda-board,
.trip-summary-card,
.location-map-card,
.trip-notes-surface,
.trip-object-card:not(.trip-receipt-card) {
    border: 1px solid var(--sg-line) !important;
    border-top: 3px solid var(--sg-cyan) !important;
    border-radius: var(--sg-radius-object) !important;
    background: var(--sg-paper) !important;
    box-shadow: var(--sg-shadow-object) !important;
}

.trip-section-heading,
.trip-object-heading,
.trip-object-card-head,
.trip-summary-header {
    min-height: 42px;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--sg-line) !important;
}

.trip-object-empty,
.trip-agenda-empty,
.trip-link-group-card,
.trip-quick-add-card {
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper-muted) !important;
    box-shadow: none !important;
}

.friend-card-compact,
.crew-card-compact,
.route-marker-card,
.trip-resource-row,
.trip-gear-row,
.trip-link-row,
.trip-discussion-card,
.trip-photo-card {
    border-radius: var(--sg-radius-object);
}

/* Keep the two useful physical metaphors inside trips. */
.trip-receipt-card,
.trip-prep-sheet,
.trip-planning-sheet {
    border-top-color: var(--sg-coral) !important;
}

/* -----------------------------
   Responsive density
   ----------------------------- */

@media (max-width: 1100px) {
    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail {
        --ticket-notch-x: 88px;
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail::before,
    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail::after {
        left: 88px;
    }

    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail .trip-ticket-main {
        grid-template-columns: minmax(190px, 240px) minmax(260px, 1fr);
    }

    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail .trip-ticket-side {
        grid-column: 2;
    }
}

@media (max-width: 860px) {
    .dashboard-hero-header,
    .gear-page-header,
    .ready-check-hero,
    .service-board-hero,
    .main:has(.trip-ticket-stack) > .page-header,
    .logbook-hero {
        min-height: 0;
        padding: 18px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    }

    .readiness-strip,
    .service-board-metrics,
    .ready-check-board {
        border-left-width: 3px;
    }

    .dashboard-timeline-hero {
        min-height: 360px;
    }

    .fishbone-density-summary {
        display: none;
    }

    .timeline-cluster-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .timeline-cluster-summary strong {
        text-align: left;
    }

    .timeline-cluster-row {
        grid-template-columns: 3px minmax(0, 1fr) 14px;
    }

    .timeline-cluster-row time {
        display: none;
    }

    .trip-sheet {
        gap: 16px;
    }

    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail {
        grid-template-columns: 1fr;
    }

    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail .trip-ticket-main {
        grid-template-columns: 1fr;
    }

    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail::before,
    .trip-detail-ticket-wrap .sg-trip-ticket.is-detail::after {
        display: none;
    }

    .service-board-table .service-table-divider {
        display: block;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .service-board-table .service-table-divider th {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
    }
}

@media (max-width: 640px) {
    .dashboard-hero-header,
    .gear-page-header,
    .ready-check-hero,
    .service-board-hero,
    .main:has(.trip-ticket-stack) > .page-header,
    .logbook-hero {
        border-radius: var(--sg-radius-object);
    }

    .page-title {
        line-height: 1.02;
    }

    .readiness-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .readiness-strip button {
        min-height: 64px;
        border-bottom: 1px solid var(--sg-line);
    }

    .readiness-primary,
    .readiness-next {
        grid-column: 1 / -1;
    }

    .ready-check-template-rail {
        scroll-snap-type: x proximity;
    }

    .ready-check-template-chip {
        flex-basis: min(82vw, 300px);
        scroll-snap-align: start;
    }

    .ready-check-row {
        min-height: 74px;
        padding: 12px;
    }

    .checklist-sheet {
        padding: 22px 16px;
    }

    .trip-sheet-nav {
        top: 58px;
        border-radius: var(--sg-radius-object);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .equipment-card,
    .gear-gallery-card,
    .sg-trip-ticket {
        transition: none;
    }
}

/* ============================================================
   GEAR LOCKER — EXPANDING LOCKER TUNNEL
   The sport imagery is the navigation; the selected door opens
   a sport-scoped mission, readiness and bench deck underneath.
   ============================================================ */

.main:has(.locker-tunnel-hub) {
    padding-top: 20px;
}

.locker-tunnel-hub {
    width: 100%;
}

.locker-tunnel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 18px;
    padding: 4px 4px 0;
}

.locker-tunnel-heading {
    max-width: 740px;
}

.locker-tunnel-heading h1 {
    margin: 3px 0 7px;
    color: var(--sg-ink-950);
    font-size: clamp(2.15rem, 4.2vw, 3.8rem);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.92;
}

.locker-tunnel-heading p {
    max-width: 650px;
    margin: 0;
    color: var(--sg-ink-600);
    font-size: 0.94rem;
    line-height: 1.5;
}

.locker-tunnel-actions,
.locker-tunnel-detail-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.locker-tunnel-stage {
    position: relative;
    margin-bottom: 28px;
}

.locker-tunnel-track {
    display: flex;
    min-height: 418px;
    gap: 5px;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--sg-chip);
    box-shadow: 0 22px 48px rgba(11, 18, 38, 0.2);
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.locker-tunnel-door {
    --locker-color: var(--sg-cyan);
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 136px;
    min-height: 408px;
    flex: 0.72 1 0;
    align-items: flex-end;
    padding: 24px 21px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #18223a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    scroll-snap-align: center;
    transition:
        flex 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter var(--sg-motion),
        opacity var(--sg-motion);
}

.locker-tunnel-door.is-selected {
    min-width: min(48vw, 560px);
    flex: 2.15 1 0;
    box-shadow:
        inset 0 0 0 2px var(--locker-color),
        0 0 28px color-mix(in srgb, var(--locker-color) 25%, transparent);
}

.locker-tunnel-door:not(.is-selected) {
    filter: saturate(0.7);
}

.locker-tunnel-door:hover:not(.is-selected) {
    filter: saturate(1);
}

.locker-tunnel-door:focus-visible {
    box-shadow:
        inset 0 0 0 3px #ffffff,
        inset 0 0 0 6px var(--locker-color);
}

.locker-tunnel-image,
.locker-tunnel-scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    pointer-events: none;
}

.locker-tunnel-image {
    background-image: var(--tunnel-backdrop);
    background-position: center;
    background-size: cover;
    transform: scale(1.035);
    transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.locker-tunnel-door.is-selected .locker-tunnel-image,
.locker-tunnel-door:hover .locker-tunnel-image {
    transform: scale(1.09);
}

.locker-tunnel-scrim {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(5, 10, 24, 0.12) 0%, rgba(5, 10, 24, 0.2) 34%, rgba(5, 10, 24, 0.94) 100%),
        linear-gradient(100deg, color-mix(in srgb, var(--locker-color) 18%, transparent), transparent 56%);
}

.locker-tunnel-door::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--locker-color);
    transform: scaleX(0.18);
    transform-origin: left;
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.locker-tunnel-door.is-selected::after {
    transform: scaleX(1);
}

.locker-tunnel-grip {
    position: absolute;
    top: 19px;
    left: 20px;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(5, 10, 24, 0.45);
    color: rgba(255, 255, 255, 0.72);
    opacity: 0;
    backdrop-filter: blur(8px);
    transition: opacity var(--sg-motion);
}

.locker-tunnel-door:hover .locker-tunnel-grip,
.locker-tunnel-door.dragging .locker-tunnel-grip {
    opacity: 1;
}

.locker-tunnel-status {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(5, 10, 24, 0.55);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.locker-tunnel-status.ready i {
    color: #2df3a2;
}

.locker-tunnel-status.attention i {
    color: #ff5b6c;
}

.locker-tunnel-door-copy {
    display: block;
    width: 100%;
    min-width: 0;
}

.locker-tunnel-sport,
.locker-tunnel-door-copy strong,
.locker-tunnel-door-meta {
    display: block;
}

.locker-tunnel-sport {
    margin-bottom: 7px;
    color: var(--locker-color);
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    line-height: 1.25;
    text-transform: uppercase;
}

.locker-tunnel-door-copy strong {
    max-width: 14ch;
    overflow: hidden;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 950;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-overflow: ellipsis;
}

.locker-tunnel-door.is-selected .locker-tunnel-door-copy strong {
    max-width: 18ch;
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    white-space: normal;
}

.locker-tunnel-door-meta {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 240ms ease,
        margin var(--sg-motion),
        opacity var(--sg-motion);
}

.locker-tunnel-door-meta span {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.74rem;
    font-weight: 800;
}

.locker-tunnel-door-meta span + span::before {
    content: "";
    width: 4px;
    height: 4px;
    margin: 0 8px;
    background: var(--locker-color);
    transform: rotate(45deg);
}

.locker-tunnel-door.is-selected .locker-tunnel-door-meta {
    max-height: 40px;
    margin-top: 10px;
    opacity: 1;
}

.locker-tunnel-open {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    opacity: 0;
    text-transform: uppercase;
    transform: translateX(-10px);
    transition:
        opacity var(--sg-motion),
        transform var(--sg-motion);
}

.locker-tunnel-door.is-selected .locker-tunnel-open {
    opacity: 1;
    transform: translateX(0);
}

.locker-tunnel-door.dragging {
    opacity: 0.55;
}

.locker-tunnel-door.drag-over {
    box-shadow: inset 0 0 0 3px var(--sg-amber);
}

.locker-tunnel-add-door {
    position: relative;
    display: flex;
    min-width: 112px;
    min-height: 408px;
    flex: 0 0 clamp(112px, 9vw, 138px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;
    padding: 18px 12px;
    color: var(--sg-ink-600);
    text-align: center;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sg-cyan) 7%, transparent), transparent 48%),
        var(--sg-canvas);
    border: 2px dashed color-mix(in srgb, var(--sg-ink-600) 34%, transparent);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    cursor: pointer;
    font: inherit;
    scroll-snap-align: end;
    transition:
        color var(--sg-motion),
        background var(--sg-motion),
        border-color var(--sg-motion),
        transform var(--sg-motion);
}

.locker-tunnel-add-door:hover {
    color: var(--sg-ink-950);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sg-cyan) 16%, transparent), transparent 58%),
        var(--sg-paper);
    border-color: var(--sg-cyan);
    transform: translateY(-2px);
}

.locker-tunnel-add-door:focus-visible {
    outline: 3px solid var(--sg-cyan);
    outline-offset: -5px;
}

.locker-tunnel-add-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--sg-ink-950);
    background: var(--sg-cyan);
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--sg-violet) 30%, transparent);
    transform: skew(-5deg);
}

.locker-tunnel-add-copy {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.locker-tunnel-add-copy strong {
    color: inherit;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.locker-tunnel-add-copy small {
    color: var(--sg-ink-500);
    font-size: 0.65rem;
    font-weight: 750;
}

.locker-tunnel-details {
    position: relative;
}

.locker-tunnel-detail[hidden] {
    display: none;
}

.locker-tunnel-detail {
    position: relative;
    margin-top: 10px;
    padding: 22px;
    border: 1px solid var(--sg-line);
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--locker-color) 7%, transparent), transparent 34%),
        var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
}

.locker-tunnel-detail::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--locker-color), var(--sg-violet), var(--sg-coral));
}

.locker-tunnel-detail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 17px;
}

.locker-tunnel-detail-head h2 {
    margin: 3px 0 0;
    color: var(--sg-ink-950);
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    font-weight: 950;
    letter-spacing: -0.045em;
    line-height: 1;
}

.locker-tunnel-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.9fr) minmax(270px, 1fr);
    gap: 12px;
}

.locker-tunnel-mission,
.locker-tunnel-readiness,
.locker-tunnel-bench {
    position: relative;
    min-width: 0;
    min-height: 270px;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    background: var(--sg-paper-muted);
}

.locker-tunnel-mission {
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    color: #ffffff;
}

.locker-tunnel-mission-bg,
.locker-tunnel-mission-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.locker-tunnel-mission-bg {
    background-image: var(--mission-backdrop);
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
}

.locker-tunnel-mission-shade {
    z-index: -1;
    background:
        linear-gradient(180deg, transparent 8%, rgba(7, 12, 27, 0.22) 35%, rgba(7, 12, 27, 0.96) 100%),
        linear-gradient(100deg, color-mix(in srgb, var(--locker-color) 24%, transparent), transparent 64%);
}

.locker-tunnel-outing-stamp {
    position: absolute;
    top: 19px;
    right: 22px;
    z-index: 3;
    display: grid;
    min-width: 108px;
    padding: 7px 14px 8px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--sg-mono);
    line-height: 0.88;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-5deg);
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.34));
    opacity: 0.9;
}

.locker-tunnel-outing-stamp::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid currentColor;
    pointer-events: none;
}

.locker-tunnel-outing-stamp::after {
    content: "";
    position: absolute;
    inset: -2px;
    opacity: 0.2;
    background:
        repeating-linear-gradient(173deg, transparent 0 5px, #081020 5px 6px),
        repeating-linear-gradient(11deg, transparent 0 13px, #081020 13px 14px);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.locker-tunnel-outing-stamp small,
.locker-tunnel-outing-stamp strong {
    position: relative;
    z-index: 1;
}

.locker-tunnel-outing-stamp small {
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.3em;
}

.locker-tunnel-outing-stamp strong {
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.locker-tunnel-outing-stamp.is-next {
    border-color: #ff6a7f;
    color: #ff6a7f;
}

.locker-tunnel-outing-stamp.is-last {
    border-color: rgba(255, 255, 255, 0.62);
    color: rgba(255, 255, 255, 0.72);
    transform: rotate(4deg);
}

.locker-tunnel-mission-copy > span,
.locker-tunnel-card-label {
    color: var(--locker-color);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.locker-tunnel-mission-copy h3 {
    max-width: 19ch;
    margin: 7px 0 5px;
    color: #ffffff;
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    font-weight: 950;
    letter-spacing: -0.045em;
    line-height: 1;
}

.locker-tunnel-mission-copy p {
    max-width: 48ch;
    margin: 0 0 15px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    line-height: 1.45;
}

.locker-tunnel-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 2px solid var(--locker-color);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.locker-tunnel-readiness,
.locker-tunnel-bench {
    padding: 19px;
}

.locker-tunnel-readiness-main {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.locker-tunnel-gauge {
    position: relative;
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--readiness-color, #94a3b8) var(--locker-ready), #dfe5ec 0);
}

/* Readiness is a safety/status signal, independent from the sport theme. */
.locker-tunnel-detail[data-readiness-state="ready"] {
    --readiness-color: var(--success);
}

.locker-tunnel-detail[data-readiness-state="attention"] {
    --readiness-color: var(--danger);
}

.locker-tunnel-detail[data-readiness-state="empty"] {
    --readiness-color: #94a3b8;
}

.locker-tunnel-detail .locker-tunnel-readiness > .locker-tunnel-card-label {
    color: var(--readiness-color, #94a3b8);
}

.space-card[data-locker-state="ready"] .locker-readiness-bar span {
    background: var(--success);
}

.space-card[data-locker-state="attention"] .locker-readiness-bar span {
    background: var(--danger);
}

.locker-tunnel-gauge::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--sg-paper-muted);
}

.locker-tunnel-gauge > span {
    position: relative;
    z-index: 1;
    color: var(--sg-ink-950);
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.locker-tunnel-gauge small {
    font-size: 0.62rem;
}

.locker-tunnel-readiness-main strong {
    display: block;
    color: var(--sg-ink-950);
    font-size: 1rem;
    font-weight: 950;
}

.locker-tunnel-readiness-main p {
    margin: 4px 0 0;
    color: var(--sg-ink-600);
    font-size: 0.73rem;
    line-height: 1.45;
}

.locker-tunnel-gear-strip {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 25px;
    padding-top: 14px;
    border-top: 1px solid var(--sg-line);
}

.locker-tunnel-gear-strip button {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    background: var(--sg-paper);
    color: var(--sg-ink-800);
    cursor: pointer;
}

.locker-tunnel-gear-strip button:hover {
    border-color: var(--locker-color);
}

.locker-tunnel-gear-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.locker-tunnel-gear-strip .locker-tunnel-gear-more {
    background: var(--sg-chip);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 950;
}

.locker-tunnel-gear-empty {
    color: var(--sg-ink-400);
    font-size: 0.74rem;
    font-weight: 800;
}

.locker-tunnel-card-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.locker-tunnel-card-label strong {
    display: grid;
    min-width: 25px;
    height: 25px;
    place-items: center;
    background: var(--sg-chip);
    color: #ffffff;
    font-size: 0.68rem;
}

.locker-tunnel-bench-list {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.locker-tunnel-bench-list button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 58px;
    padding: 8px 9px;
    border: 1px solid var(--sg-line);
    border-left: 3px solid var(--sg-violet);
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.locker-tunnel-bench-list button.hot {
    border-left-color: var(--sg-coral);
}

.locker-tunnel-bench-list button.warm {
    border-left-color: var(--sg-amber);
}

.locker-tunnel-bench-list button > span:first-child {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    background: rgba(116, 87, 255, 0.1);
    color: var(--sg-violet);
}

.locker-tunnel-bench-list button.hot > span:first-child {
    background: rgba(255, 54, 93, 0.1);
    color: var(--sg-coral);
}

.locker-tunnel-bench-list button.warm > span:first-child {
    background: rgba(255, 196, 0, 0.14);
    color: #b78600;
}

.locker-tunnel-bench-list button strong,
.locker-tunnel-bench-list button small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locker-tunnel-bench-list button strong {
    font-size: 0.73rem;
    font-weight: 900;
}

.locker-tunnel-bench-list button small {
    margin-top: 2px;
    color: var(--sg-ink-600);
    font-size: 0.65rem;
}

.locker-tunnel-bench-list button > i {
    color: var(--sg-ink-400);
    font-size: 0.62rem;
}

.locker-tunnel-bench-clear {
    display: flex;
    min-height: 205px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sg-ink-600);
    text-align: center;
}

.locker-tunnel-bench-clear i {
    margin-bottom: 9px;
    color: var(--sg-green);
    font-size: 2rem;
}

.locker-tunnel-bench-clear strong {
    color: var(--sg-ink-950);
    font-size: 1rem;
    font-weight: 950;
}

.locker-tunnel-bench-clear span {
    max-width: 22ch;
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1.4;
}

@media (max-width: 1120px) {
    .locker-tunnel-detail-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
    }

    .locker-tunnel-bench {
        grid-column: 1 / -1;
        min-height: auto;
    }

    .locker-tunnel-bench-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .locker-tunnel-bench-clear {
        min-height: 110px;
    }
}

@media (max-width: 820px) {
    .locker-tunnel-header,
    .locker-tunnel-detail-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .locker-tunnel-track {
        display: grid;
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }

    .locker-tunnel-door,
    .locker-tunnel-door.is-selected {
        min-width: 0;
        min-height: 180px;
        padding: 18px;
        clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    }

    .locker-tunnel-door.is-selected {
        min-height: 320px;
        grid-column: 1 / -1;
    }

    .locker-tunnel-add-door {
        min-width: 0;
        min-height: 180px;
        padding: 16px;
        clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    }

    .locker-tunnel-track.is-single-locker .locker-tunnel-add-door {
        min-height: 78px;
        grid-column: 1 / -1;
        justify-content: center;
        flex-direction: row;
    }

    .locker-tunnel-track.is-single-locker .locker-tunnel-add-icon {
        width: 36px;
        height: 36px;
        box-shadow: 4px 4px 0 color-mix(in srgb, var(--sg-violet) 30%, transparent);
    }

    .locker-tunnel-track.is-single-locker .locker-tunnel-add-copy {
        align-items: flex-start;
        text-align: left;
    }

    .locker-tunnel-status {
        top: 13px;
        right: 13px;
    }

    .locker-tunnel-grip {
        top: 13px;
        left: 14px;
    }

    .locker-tunnel-door.is-selected .locker-tunnel-door-copy strong {
        font-size: clamp(1.8rem, 8vw, 2.8rem);
    }

    .locker-tunnel-detail-grid {
        grid-template-columns: 1fr;
    }

    .locker-tunnel-bench {
        grid-column: auto;
    }

    .locker-tunnel-bench-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .main:has(.locker-tunnel-hub) {
        padding-top: 12px;
    }

    .locker-tunnel-heading h1 {
        font-size: 2.65rem;
    }

    .locker-tunnel-actions,
    .locker-tunnel-detail-actions {
        width: 100%;
    }

    .locker-tunnel-actions .btn,
    .locker-tunnel-detail-actions .btn {
        min-width: 0;
        flex: 1 1 0;
        padding-inline: 12px;
    }

    .locker-tunnel-track {
        gap: 4px;
        padding: 4px;
    }

    .locker-tunnel-door:not(.is-selected) .locker-tunnel-status {
        width: 26px;
        padding-inline: 0;
        justify-content: center;
        overflow: hidden;
        color: transparent;
    }

    .locker-tunnel-door:not(.is-selected) .locker-tunnel-status i {
        color: #ffffff;
    }

    .locker-tunnel-detail {
        padding: 17px;
    }

    .locker-tunnel-mission {
        min-height: 300px;
        padding: 20px;
    }

    .locker-tunnel-outing-stamp {
        top: 14px;
        right: 15px;
        min-width: 92px;
        padding: 6px 10px 7px;
    }

    .locker-tunnel-outing-stamp small {
        font-size: 0.5rem;
    }

    .locker-tunnel-outing-stamp strong {
        font-size: 0.84rem;
    }

    .locker-tunnel-readiness,
    .locker-tunnel-bench {
        min-height: auto;
    }

    .locker-tunnel-open {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .locker-tunnel-door,
    .locker-tunnel-image,
    .locker-tunnel-door::after,
    .locker-tunnel-door-meta,
    .locker-tunnel-open,
    .locker-tunnel-add-door {
        transition: none;
    }
}

/* =========================================================
   Product language v2 — mission dashboard + sport-aware gear
   ========================================================= */

.main:has(.dashboard-mission-hero),
.main:has(.gear-field-header) {
    background: var(--sg-canvas);
}

/* Dashboard: the next real experience is the visual anchor. */
.dashboard-mission-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 430px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto auto;
    gap: 0 30px;
    margin-bottom: 12px;
    padding: 22px 26px 0;
    overflow: hidden;
    border-left: 5px solid var(--sg-cyan);
    background:
        radial-gradient(circle at 75% 28%, rgba(0, 207, 232, 0.18), transparent 32%),
        linear-gradient(135deg, var(--sg-ink-950), #17213a);
    box-shadow: var(--sg-shadow-raised);
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.dashboard-mission-hero::before,
.dashboard-mission-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.dashboard-mission-hero::before {
    background-image: var(--dashboard-mission-image);
    background-position: center 48%;
    background-size: cover;
    filter: saturate(1.08) contrast(1.04);
    opacity: 0;
    transform: scale(1.01);
}

.dashboard-mission-hero.has-image::before {
    opacity: 1;
}

.dashboard-mission-hero::after {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 13, 29, 0.96) 0%, rgba(7, 13, 29, 0.78) 42%, rgba(7, 13, 29, 0.16) 78%, rgba(7, 13, 29, 0.34) 100%),
        linear-gradient(0deg, rgba(7, 13, 29, 0.88) 0%, transparent 45%);
}

.dashboard-mission-hero.needs-work {
    border-left-color: var(--sg-coral);
}

.dashboard-mission-hero.watch {
    border-left-color: var(--sg-amber);
}

.dashboard-mission-hero.ready {
    border-left-color: var(--sg-green);
}

.dashboard-mission-topbar {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-mission-kicker,
.dashboard-mission-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.dashboard-mission-kicker {
    color: #d7e3ef;
}

.dashboard-mission-kicker i {
    color: var(--sg-cyan);
}

.dashboard-mission-topbar .dashboard-actions {
    display: flex;
    gap: 6px;
}

.dashboard-mission-topbar .dashboard-icon-btn {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(6, 12, 27, 0.52);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.dashboard-mission-copy {
    align-self: center;
    max-width: 650px;
    padding: 32px 0 30px;
}

.dashboard-mission-status {
    min-height: 27px;
    padding: 0 10px;
    border-left: 3px solid currentColor;
    background: rgba(255, 255, 255, 0.1);
    color: var(--sg-coral);
    backdrop-filter: blur(8px);
}

.dashboard-mission-hero.watch .dashboard-mission-status {
    color: var(--sg-amber);
}

.dashboard-mission-hero.ready .dashboard-mission-status {
    color: #5af0af;
}

.dashboard-mission-copy h1 {
    max-width: 13ch;
    margin: 13px 0 7px;
    color: #ffffff;
    font-size: clamp(2.35rem, 5vw, 4.5rem);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.92;
    text-wrap: balance;
}

.dashboard-mission-copy p {
    max-width: 56ch;
    color: #d4deea;
    font-size: 0.9rem;
    font-weight: 650;
}

.dashboard-mission-actions {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.dashboard-mission-secondary {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(8, 15, 32, 0.46);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.dashboard-mission-context {
    align-self: end;
    display: grid;
    min-width: 170px;
    gap: 1px;
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(10px);
}

.dashboard-mission-context span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 11px;
    background: rgba(8, 15, 32, 0.68);
    color: #c5d0df;
    font-size: 0.65rem;
    font-weight: 750;
    text-transform: uppercase;
}

.dashboard-mission-context strong {
    color: #ffffff;
    font-family: var(--sg-mono);
    font-size: 0.9rem;
}

.dashboard-mission-metrics {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: -26px;
    background: rgba(5, 10, 23, 0.82);
    backdrop-filter: blur(12px);
}

.dashboard-mission-metrics button {
    display: flex;
    min-height: 69px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.dashboard-mission-metrics button:last-child {
    border-right: 0;
}

.dashboard-mission-metrics button:hover,
.dashboard-mission-metrics button:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

.dashboard-mission-metrics span {
    color: #b3c0d1;
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.dashboard-mission-metrics strong {
    font-family: var(--sg-mono);
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-mission-metrics .is-hot strong {
    color: #ff6a7f;
}

.dashboard-mission-metrics .is-warm strong {
    color: var(--sg-amber);
}

.demo-conversion-ribbon {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 8px 10px 8px 14px;
    border: 1px solid var(--sg-line);
    border-left: 4px solid var(--sg-violet);
    background: var(--sg-paper);
    box-shadow: 0 7px 18px rgba(11, 18, 38, 0.055);
}

.demo-conversion-ribbon > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.demo-conversion-ribbon strong {
    flex: 0 0 auto;
    color: var(--sg-violet);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-conversion-ribbon span {
    overflow: hidden;
    color: var(--sg-ink-600);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-conversion-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.demo-showcase-modal {
    max-height: min(860px, calc(100dvh - 40px));
}

.demo-showcase-body {
    display: grid;
    min-height: 0;
    gap: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.demo-showcase-intro {
    display: grid;
    gap: 5px;
    padding: 15px 17px;
    border-left: 4px solid var(--sg-cyan);
    background: var(--sg-mist);
}

.demo-showcase-intro strong {
    color: var(--sg-ink-950);
    font-size: 0.95rem;
}

.demo-showcase-intro p {
    margin: 0;
    color: var(--sg-ink-600);
    font-size: 0.82rem;
    line-height: 1.55;
}

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

.demo-showcase-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    grid-template-rows: auto auto;
    gap: 3px 10px;
    min-height: 92px;
    padding: 13px;
    border: 1px solid var(--sg-line);
    border-radius: 12px;
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.demo-showcase-card:hover,
.demo-showcase-card:focus-visible {
    border-color: var(--sg-cyan);
    box-shadow: 0 10px 24px rgba(0, 145, 190, 0.12);
    transform: translateY(-1px);
}

.demo-showcase-card > span {
    display: grid;
    grid-row: 1 / 3;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 194, 230, 0.11);
    color: var(--sg-cyan-dark);
}

.demo-showcase-card > strong {
    align-self: end;
    font-size: 0.82rem;
    line-height: 1.25;
}

.demo-showcase-card > small {
    align-self: start;
    color: var(--sg-ink-600);
    font-size: 0.69rem;
    line-height: 1.38;
}

.demo-showcase-card > .fa-arrow-right {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--sg-ink-400);
    font-size: 0.72rem;
}

.demo-showcase-footer {
    align-items: center;
    justify-content: space-between;
}

.demo-showcase-footnote {
    color: var(--sg-ink-600);
    font-size: 0.75rem;
}

.dashboard-desktop-schedule {
    margin-top: 0;
}

/* Gear Room: a lighter field index, with sport imagery as navigation. */
.gear-field-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px;
    padding: 8px 3px 20px;
    border-bottom: 1px solid var(--sg-line);
}

.gear-field-heading h1 {
    margin: 0;
    color: var(--sg-ink-950);
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    font-weight: 950;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.gear-field-heading p {
    max-width: 62ch;
    margin-top: 10px;
    color: var(--sg-ink-600);
    font-size: 0.88rem;
}

.gear-field-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 15px;
    color: var(--sg-ink-600);
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
}

.gear-field-summary span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.gear-field-summary strong {
    color: var(--sg-ink-950);
    font-family: var(--sg-mono);
    font-size: 0.88rem;
}

.gear-field-summary .is-hot strong {
    color: var(--sg-coral);
}

.gear-field-header .gear-page-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.gear-utility-rail {
    display: flex;
    min-height: 42px;
    align-items: stretch;
    margin-bottom: 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--sg-line);
    background: transparent;
}

.gear-utility-rail > span,
.gear-utility-rail button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--sg-line);
    background: transparent;
    color: var(--sg-ink-600);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gear-utility-rail > span {
    padding-left: 3px;
    color: var(--sg-ink-950);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

.gear-utility-rail button {
    cursor: pointer;
}

.gear-utility-rail button:hover,
.gear-utility-rail button:focus-visible {
    background: var(--sg-paper);
    color: var(--sg-cyan-dark);
}

.gear-attention-rail {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.gear-attention-heading {
    display: flex;
    min-height: 76px;
    flex-direction: column;
    justify-content: center;
    padding: 11px 13px;
    border-left: 4px solid var(--sg-coral);
    background: var(--sg-chip);
    color: #ffffff;
}

.gear-attention-heading span {
    color: #ff748c;
    font-size: 0.61rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gear-attention-heading strong {
    margin-top: 5px;
    font-size: 0.9rem;
    font-weight: 900;
}

.gear-attention-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.gear-attention-card {
    display: grid;
    flex: 1 0 230px;
    min-width: min(290px, 78vw);
    max-width: 380px;
    min-height: 76px;
    grid-template-columns: 28px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--sg-line);
    border-left: 3px solid var(--sg-amber);
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    cursor: pointer;
    font: inherit;
    text-align: left;
    scroll-snap-align: start;
}

.gear-attention-card.is-danger {
    border-left-color: var(--sg-coral);
}

.gear-attention-card .alert-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    background: rgba(255, 196, 0, 0.14);
    color: #ac7b00;
}

.gear-attention-card.is-danger .alert-icon {
    background: rgba(255, 54, 93, 0.1);
    color: var(--sg-coral);
}

.gear-attention-card .alert-text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gear-attention-card > i {
    color: var(--sg-ink-400);
    font-size: 0.62rem;
}

.gear-sport-switcher {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--sg-line);
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.gear-sport-switcher-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}

.gear-sport-switcher-head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.gear-sport-switcher-head span {
    color: var(--sg-cyan-dark);
    font-size: 0.61rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gear-sport-switcher-head strong {
    color: var(--sg-ink-950);
    font-size: 0.82rem;
}

.gear-sport-all {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--sg-line);
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    cursor: pointer;
    font: inherit;
    font-size: 0.67rem;
    font-weight: 850;
}

.gear-sport-all strong {
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    background: var(--sg-chip);
    color: #ffffff;
    font-family: var(--sg-mono);
    font-size: 0.6rem;
}

.gear-sport-all.is-active {
    border-color: var(--sg-cyan);
    background: rgba(0, 207, 232, 0.08);
    color: var(--sg-cyan-dark);
}

.gear-sport-rail {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.gear-sport-chip {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 0 158px;
    min-width: 158px;
    min-height: 104px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    padding: 13px 15px;
    border: 0;
    background: var(--sg-chip-soft);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    scroll-snap-align: start;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    transition: flex-basis var(--sg-motion), filter var(--sg-motion);
}

.gear-sport-chip::before,
.gear-sport-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
}

.gear-sport-chip::before {
    background-image: var(--gear-sport-image);
    background-position: center;
    background-size: cover;
    filter: saturate(1.08);
    transition: transform var(--sg-motion);
}

.gear-sport-chip::after {
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(5, 10, 24, 0.94), rgba(5, 10, 24, 0.08) 80%),
        linear-gradient(90deg, color-mix(in srgb, var(--gear-sport-color) 25%, transparent), transparent 60%);
}

.gear-sport-chip:hover::before,
.gear-sport-chip:focus-visible::before,
.gear-sport-chip.is-active::before {
    transform: scale(1.055);
}

.gear-sport-chip.is-active {
    flex-basis: 225px;
    box-shadow: inset 0 -4px 0 var(--gear-sport-color);
}

.gear-sport-chip > span {
    max-width: 15ch;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1;
}

.gear-sport-chip > small {
    max-width: 20ch;
    margin-top: 4px;
    overflow: hidden;
    color: #bfcbda;
    font-size: 0.59rem;
    font-weight: 750;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gear-sport-chip > strong {
    position: absolute;
    top: 10px;
    right: 13px;
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding-inline: 5px;
    background: rgba(5, 10, 24, 0.78);
    color: #ffffff;
    font-family: var(--sg-mono);
    font-size: 0.65rem;
    backdrop-filter: blur(7px);
}

.gear-sport-chip.is-unassigned {
    --gear-sport-color: var(--sg-ink-400);
    background:
        repeating-linear-gradient(125deg, #dfe5ec 0 14px, #edf1f5 14px 28px);
    color: var(--sg-ink-950);
}

.gear-sport-chip.is-unassigned::before {
    display: none;
}

.gear-sport-chip.is-unassigned::after {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.92), transparent);
}

.gear-sport-chip.is-unassigned > small {
    color: var(--sg-ink-600);
}

.main:has(.gear-field-header) .gear-command-panel {
    margin-bottom: 14px;
    border-left-width: 1px;
    box-shadow: none;
}

.borrowed-gear-shelf {
    display: grid;
    grid-template-columns: 175px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px;
    border: 1px solid var(--sg-line);
    border-left: 4px solid var(--sg-violet);
    background: var(--sg-paper);
}

.borrowed-gear-heading {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 9px 11px;
    background: rgba(116, 87, 255, 0.07);
}

.borrowed-gear-heading span {
    color: var(--sg-violet);
    font-size: 0.6rem;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.borrowed-gear-heading strong {
    margin-top: 6px;
    color: var(--sg-ink-950);
    font-size: 0.86rem;
}

.borrowed-gear-heading small {
    margin-top: 3px;
    color: var(--sg-ink-600);
    font-size: 0.65rem;
}

.borrowed-gear-rail {
    display: grid;
    grid-auto-columns: minmax(330px, 410px);
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
}

.borrowed-gear-card {
    display: grid;
    min-height: 104px;
    grid-template-columns: 112px minmax(0, 1fr) 38px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-left: 3px solid var(--sg-violet);
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    cursor: pointer;
}

.borrowed-gear-card-media {
    display: grid;
    min-width: 0;
    place-items: center;
    overflow: hidden;
    background: rgba(116, 87, 255, 0.08);
    color: var(--sg-violet);
    font-size: 1.5rem;
}

.borrowed-gear-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.borrowed-gear-card-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
}

.borrowed-gear-card-state {
    width: fit-content;
    margin-bottom: 5px;
    padding: 2px 5px;
    background: var(--sg-violet);
    color: #ffffff;
    font-size: 0.52rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.borrowed-gear-card-copy strong,
.borrowed-gear-card-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.borrowed-gear-card-copy strong {
    font-size: 0.77rem;
    font-weight: 900;
}

.borrowed-gear-card-copy small,
.borrowed-gear-card-copy time {
    margin-top: 3px;
    color: var(--sg-ink-600);
    font-size: 0.62rem;
}

.borrowed-gear-card-copy time.is-overdue {
    color: var(--sg-coral);
}

.borrowed-gear-card-actions {
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--sg-line);
}

.borrowed-gear-card-actions button {
    width: 100%;
    border: 0;
    background: var(--sg-paper-muted);
    color: var(--sg-violet);
    cursor: pointer;
}

.borrowed-gear-card-actions button:hover,
.borrowed-gear-card-actions button:focus-visible {
    background: rgba(116, 87, 255, 0.1);
}

.gear-filter-empty {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 24px;
    border: 1px dashed var(--sg-line-strong);
    background: var(--sg-paper);
    color: var(--sg-ink-600);
    text-align: center;
}

.gear-filter-empty > i {
    margin-bottom: 10px;
    color: var(--sg-cyan-dark);
    font-size: 1.7rem;
}

.gear-filter-empty > strong {
    color: var(--sg-ink-950);
}

.gear-filter-empty p {
    margin: 4px 0 13px;
    font-size: 0.78rem;
}

@media (max-width: 820px) {
    .dashboard-mission-hero {
        min-height: 460px;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .dashboard-mission-copy {
        padding-bottom: 24px;
    }

    .dashboard-mission-context {
        display: none;
    }

    .dashboard-mission-metrics {
        grid-column: 1;
    }

    .dashboard-mission-metrics button {
        min-height: 62px;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        padding: 9px 11px;
    }

    .dashboard-mission-metrics strong {
        font-size: 1.18rem;
    }

    .gear-field-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .gear-field-header .gear-page-actions {
        width: 100%;
    }

    .gear-field-header .gear-page-actions .btn {
        flex: 1 1 0;
    }

    .borrowed-gear-shelf {
        grid-template-columns: 1fr;
    }

    .borrowed-gear-heading {
        min-height: 74px;
    }
}

@media (max-width: 760px) {
    .dashboard-desktop-schedule {
        display: none;
    }
}

/* =============================================
   Pre-launch coherence pass
   Shared hierarchy, dialogs, menus, and sparse collections
   ============================================= */

/* Dialogs share one predictable frame. Legacy inline widths are converted to
   these size classes by Modal.normalizeLegacyPanel(). */
.modal-overlay {
    padding: clamp(10px, 2vw, 24px);
}

.modal {
    display: flex;
    max-height: min(92dvh, 920px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    background: var(--sg-paper, #ffffff);
}

.modal.modal-sm { max-width: 440px; }
.modal.modal-md { max-width: 620px; }
.modal.modal-lg { max-width: 840px; }
.modal.modal-xl { max-width: 1080px; }

.modal > form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    flex: 0 0 auto;
    min-height: 68px;
    padding: 16px clamp(18px, 2.6vw, 28px);
}

.modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-transform: none;
}

.modal-body,
.modal > form > .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(18px, 2.5vw, 28px);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.modal-footer,
.modal > form > .modal-footer {
    flex: 0 0 auto;
    min-height: 70px;
    gap: 10px;
    padding: 12px clamp(18px, 2.6vw, 28px);
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--sg-line, #dde5ee);
}

.modal-footer-generated {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.modal:not(:has(> .modal-body)):not(:has(> form > .modal-body)) {
    overflow-y: auto;
}

.trip-edit-dialog,
.trip-create-dialog,
.equipment-edit-modal {
    width: min(100%, 880px) !important;
    max-width: 880px !important;
}

.trip-edit-grid,
.trip-create-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
}

.trip-edit-column,
.trip-create-column {
    gap: 14px !important;
}

.trip-edit-section,
.trip-create-section,
.equipment-edit-section,
.gear-form-section,
.modal .form-card {
    width: 100%;
    min-width: 0;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045) !important;
}

/* This design-system sheet loads last, so keep the card image geometry
   explicit here as well as in the component stylesheet. */
.equipment-card-media > .equipment-card-image {
    position: absolute;
    inset: 0;
}

/* Gear keeps the primary task visible and tucks occasional tools away. */
.gear-field-header .gear-page-actions {
    position: relative;
    align-items: center;
}

.gear-page-more-actions {
    position: relative;
}

.gear-page-more-actions > summary {
    list-style: none;
    cursor: pointer;
}

.gear-page-more-actions > summary::-webkit-details-marker {
    display: none;
}

.gear-page-more-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: min(300px, calc(100vw - 28px));
    padding: 7px;
    border: 1px solid var(--sg-line);
    border-radius: 14px;
    background: var(--sg-paper);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18);
}

.gear-page-more-menu button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 54px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--sg-ink-950);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gear-page-more-menu button:hover,
.gear-page-more-menu button:focus-visible {
    background: var(--sg-chip);
}

.gear-page-more-menu button > i {
    color: var(--sg-cyan-dark);
    text-align: center;
}

.gear-page-more-menu button > span {
    display: grid;
    gap: 1px;
}

.gear-page-more-menu strong {
    font-size: 0.78rem;
}

.gear-page-more-menu small {
    color: var(--sg-ink-600);
    font-size: 0.66rem;
}

/* Secondary page navigation reads as navigation, not as another hero bar. */
.trip-sheet-nav {
    top: 76px;
    width: fit-content;
    max-width: 100%;
    padding: 5px;
    border: 1px solid var(--sg-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

.trip-sheet-nav a {
    color: var(--sg-ink-600);
}

.trip-sheet-nav a:hover {
    background: var(--sg-chip);
    color: var(--sg-ink-950);
}

.trip-sheet-nav a.is-active,
.trip-sheet-nav a[aria-current="page"] {
    background: var(--sg-ink-950);
    color: #ffffff;
}

.trip-detail-ticket-wrap {
    align-items: start;
}

.trip-detail-ticket-wrap .location-map-card {
    height: auto;
    max-height: 390px;
    align-self: start;
}

.trip-detail-ticket-wrap .trip-location-map-surface {
    height: 172px;
    min-height: 172px;
}

.trip-detail-ticket-wrap .trip-location-pin-list {
    max-height: 128px;
    overflow-y: auto;
}

/* Service opens on the selected dashboard. Switching dashboards is a compact
   control in the hero instead of a second full page above it. */
.service-board-hero-actions {
    display: grid;
    min-width: min(100%, 360px);
    gap: 9px;
    justify-items: end;
}

.service-board-picker-row,
.service-board-output-actions {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.service-board-picker {
    display: grid;
    min-width: min(270px, 60vw);
    gap: 4px;
}

.service-board-picker > span {
    color: var(--sg-cyan);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-board-picker select {
    width: 100%;
    min-height: 42px;
    padding: 0 36px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9px;
    background: rgba(5, 10, 24, 0.72);
    color: #ffffff;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
}

.service-board-picker select option,
.service-board-picker select optgroup {
    background: #ffffff;
    color: #0f172a;
}

.service-board-icon-action {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9px;
    background: rgba(5, 10, 24, 0.62);
    color: #ffffff;
    cursor: pointer;
}

.service-board-icon-action:hover,
.service-board-icon-action:focus-visible {
    border-color: var(--sg-cyan);
    background: rgba(0, 207, 232, 0.18);
}

/* Sparse collections use the page width without manufacturing empty tracks. */
.templates-page,
.service-calendar-page {
    display: grid;
    gap: clamp(18px, 2.2vw, 28px);
}

.templates-page-header,
.service-calendar-page-header {
    display: block;
    margin: 0;
}

.templates-page-header .page-title,
.service-calendar-page-header .page-title {
    margin: 4px 0 5px;
}

.templates-page-header .page-subtitle,
.service-calendar-page-header .page-subtitle {
    max-width: 66ch;
    margin: 0;
}

.templates-sections,
.cert-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(18px, 2vw, 26px);
}

.templates-section,
.cert-group {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--sg-line);
    border-radius: 16px;
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.templates-grid,
.cert-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.service-calendar-upcoming {
    display: grid;
    gap: 14px;
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid var(--sg-line);
    border-radius: 16px;
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.service-calendar-upcoming h2 {
    margin: 4px 0 0;
    font-size: 1.15rem;
}

@media (max-width: 900px) {
    .templates-sections,
    .cert-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-board-hero-actions {
        width: 100%;
        min-width: 0;
        justify-items: stretch;
    }

    .service-board-picker-row {
        align-items: stretch;
    }

    .service-board-picker {
        min-width: 0;
        flex: 1 1 auto;
    }
}

@media (max-width: 620px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 8px;
    }

    .modal,
    .modal.modal-sm,
    .modal.modal-md,
    .modal.modal-lg,
    .modal.modal-xl {
        width: 100%;
        max-width: none !important;
        max-height: calc(100dvh - 16px);
        border-radius: 18px 18px 12px 12px;
    }

    .modal-footer,
    .modal > form > .modal-footer {
        display: flex;
        flex-wrap: wrap;
    }

    .modal-footer .btn,
    .modal > form > .modal-footer .btn {
        width: auto;
        min-width: 0;
        flex: 1 1 132px;
        justify-content: center;
    }

    .trip-edit-delete span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .trip-edit-footer-actions {
        min-width: min(100%, 220px);
        flex: 1 1 220px;
    }

    .trip-edit-footer-actions .btn {
        flex: 1 1 0;
    }

    .gear-field-header .gear-page-actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr auto;
    }

    .gear-field-header .gear-page-actions > .btn {
        justify-content: center;
    }

    .gear-page-more-actions > summary {
        width: 44px;
        min-width: 44px;
        padding-inline: 0;
        justify-content: center;
        font-size: 0;
    }

    .gear-page-more-actions > summary i {
        font-size: 0.9rem;
    }

    .service-board-picker-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px 42px;
    }

    .service-board-output-actions {
        justify-content: flex-end;
    }

    .templates-section,
    .cert-group {
        padding: 14px;
    }

    .trip-detail-ticket-wrap .location-map-card {
        max-height: none;
    }
}

/* Dashboard timeline sport tracks: an optional editing-style lane view. */
.timeline-toggle--label {
    width: auto;
    min-width: 112px;
    gap: 7px;
    padding: 0 10px;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fishbone-container.sport-tracks-mode > .fishbone-timeline,
.fishbone-container.sport-tracks-mode > .fishbone-empty {
    display: none;
}

.timeline-sport-tracks-shell {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.timeline-sport-tracks-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 10px;
    border-left: 3px solid var(--sg-cyan);
    background: color-mix(in srgb, var(--sg-cyan) 5%, var(--sg-paper));
    color: var(--sg-ink-600);
}

.timeline-sport-tracks-help > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sg-ink-950);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.1em;
}

.timeline-sport-tracks-help > span i {
    color: var(--sg-cyan-deep);
}

.timeline-sport-tracks-help small {
    font-size: 0.68rem;
}

.timeline-sport-tracks-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--sg-line);
    background: var(--sg-paper-muted);
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

.timeline-sport-tracks-scroll:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sg-cyan) 34%, transparent);
    outline-offset: 2px;
}

.timeline-sport-tracks {
    width: calc(160px + var(--timeline-track-canvas-width));
    min-width: calc(160px + var(--timeline-track-canvas-width));
}

.timeline-track-ruler,
.timeline-sport-track {
    display: grid;
    grid-template-columns: 160px var(--timeline-track-canvas-width);
}

.timeline-track-ruler {
    position: sticky;
    top: 0;
    z-index: 6;
    min-height: 36px;
    border-bottom: 1px solid var(--sg-line-strong);
    background: var(--sg-paper);
}

.timeline-track-ruler-label {
    position: sticky;
    left: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-right: 1px solid var(--sg-line-strong);
    background: var(--sg-paper);
    color: var(--sg-ink-600);
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.timeline-track-ruler-months,
.timeline-sport-track-lane,
.timeline-track-grid {
    position: relative;
}

.timeline-track-ruler-months {
    min-width: var(--timeline-track-canvas-width);
}

.timeline-track-month {
    position: absolute;
    inset-block: 0;
    width: 1px;
    background: var(--sg-line);
}

.timeline-track-ruler-months .timeline-track-month > span {
    position: absolute;
    top: 10px;
    left: 6px;
    color: var(--sg-ink-600);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.timeline-sport-track {
    min-height: var(--sport-track-height);
    border-bottom: 1px solid var(--sg-line);
    background: var(--sg-paper);
}

.timeline-sport-track:last-child {
    border-bottom: 0;
}

.timeline-sport-track-header {
    position: sticky;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 30px 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: var(--sport-track-height);
    min-height: 54px;
    padding: 8px 10px;
    border-right: 3px solid var(--sport-track-color);
    background: var(--sg-paper);
    box-shadow: 7px 0 14px rgba(15, 23, 42, 0.05);
}

.timeline-track-visibility {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--sg-line);
    border-radius: 5px;
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    cursor: pointer;
}

.timeline-track-visibility:hover,
.timeline-track-visibility:focus-visible {
    border-color: var(--sport-track-color);
    color: var(--sg-ink-950);
}

.timeline-track-sport-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 4px;
    background: color-mix(in srgb, var(--sport-track-color) 14%, var(--sg-paper));
    color: var(--sport-track-color);
}

.timeline-track-sport-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.timeline-track-sport-copy strong {
    overflow: hidden;
    color: var(--sg-ink-950);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-track-sport-copy small {
    color: var(--sg-ink-600);
    font-size: 0.6rem;
}

.timeline-sport-track-lane {
    min-width: var(--timeline-track-canvas-width);
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sport-track-color) 3%, var(--sg-paper)), var(--sg-paper));
}

.timeline-sport-track-lane::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 9px;
    left: 0;
    height: 2px;
    background: color-mix(in srgb, var(--sport-track-color) 40%, var(--sg-line));
}

.timeline-track-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.timeline-track-grid .timeline-track-month > span {
    display: none;
}

.timeline-track-now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--sg-cyan);
}

.timeline-track-now span {
    position: absolute;
    bottom: 12px;
    left: 5px;
    color: var(--sg-cyan-deep);
    font-size: 0.52rem;
    font-weight: 950;
}

.timeline-track-event {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    width: 166px;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--timeline-event-color) 48%, var(--sg-line));
    border-left: 3px solid var(--timeline-event-color);
    border-radius: 5px;
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    box-shadow: 0 5px 13px rgba(15, 23, 42, 0.09);
    text-align: left;
    cursor: pointer;
}

.timeline-track-event.is-start {
    transform: none;
}

.timeline-track-event.is-end {
    transform: translateX(-100%);
}

.timeline-track-event:hover,
.timeline-track-event:focus-visible {
    z-index: 4;
    border-color: var(--timeline-event-color);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--timeline-event-color) 20%, transparent);
}

.timeline-track-event::after {
    content: '';
    position: absolute;
    bottom: -19px;
    left: 50%;
    width: 2px;
    height: 18px;
    background: var(--timeline-event-color);
}

.timeline-track-event.is-start::after {
    left: 8px;
}

.timeline-track-event.is-end::after {
    right: 8px;
    left: auto;
}

.timeline-track-event.is-cluster {
    width: 190px;
    background: color-mix(in srgb, var(--timeline-event-color) 7%, var(--sg-paper));
}

.timeline-track-event.is-overdue {
    --timeline-event-color: var(--sg-coral) !important;
}

.fishbone-container.filter-trip .timeline-track-event:not([data-event-type="trip"]),
.fishbone-container.filter-service .timeline-track-event:not([data-event-type="service"]),
.fishbone-container.filter-overdue .timeline-track-event:not([data-is-overdue="true"]) {
    opacity: 0.15;
    filter: grayscale(1);
    pointer-events: none;
}

.timeline-track-event-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    overflow: hidden;
    border-radius: 4px;
    background: color-mix(in srgb, var(--timeline-event-color) 14%, var(--sg-paper));
    color: var(--timeline-event-color);
}

.timeline-track-event-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-track-event-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.timeline-track-event-copy strong,
.timeline-track-event-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-track-event-copy strong {
    font-size: 0.66rem;
}

.timeline-track-event-copy small,
.timeline-track-event time {
    color: var(--sg-ink-600);
    font-size: 0.54rem;
}

.timeline-track-event time {
    white-space: nowrap;
}

.timeline-sport-track.is-hidden .timeline-sport-track-header,
.timeline-sport-track.is-hidden .timeline-sport-track-lane {
    opacity: 0.58;
}

.timeline-track-muted-copy {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--sg-ink-600);
    font-size: 0.65rem;
    font-weight: 750;
}

[data-theme="dark"] .timeline-sport-tracks-scroll,
[data-theme="dark"] .timeline-track-ruler,
[data-theme="dark"] .timeline-track-ruler-label,
[data-theme="dark"] .timeline-sport-track,
[data-theme="dark"] .timeline-sport-track-header,
[data-theme="dark"] .timeline-track-event {
    background-color: var(--sg-paper);
}

@media (max-width: 760px) {
    .timeline-toggle--label {
        min-width: 104px;
    }

    .timeline-sport-tracks-help {
        display: grid;
        align-items: start;
    }

    .timeline-sport-tracks-scroll {
        scroll-snap-type: x proximity;
    }

    .timeline-sport-tracks {
        --timeline-track-canvas-width: 820px !important;
    }

    .timeline-track-ruler,
    .timeline-sport-track {
        grid-template-columns: 136px var(--timeline-track-canvas-width);
    }

    .timeline-sport-tracks {
        width: calc(136px + var(--timeline-track-canvas-width));
        min-width: calc(136px + var(--timeline-track-canvas-width));
    }

    .timeline-sport-track-header {
        grid-template-columns: 28px 30px minmax(0, 1fr);
        padding-inline: 7px;
    }
}

@media (max-width: 560px) {
    .main:has(.dashboard-mission-hero),
    .main:has(.gear-field-header) {
        padding-top: 12px;
    }

    .dashboard-mission-hero {
        min-height: 490px;
        padding: 16px 16px 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    }

    .dashboard-mission-hero::after {
        background:
            linear-gradient(90deg, rgba(7, 13, 29, 0.88), rgba(7, 13, 29, 0.28)),
            linear-gradient(0deg, rgba(7, 13, 29, 0.96), transparent 70%);
    }

    .dashboard-mission-copy h1 {
        max-width: 11ch;
        font-size: clamp(2.35rem, 13vw, 3.35rem);
    }

    .dashboard-mission-copy p {
        font-size: 0.78rem;
    }

    .dashboard-mission-actions {
        width: 100%;
    }

    .dashboard-mission-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 10px;
        font-size: 0.7rem;
    }

    .dashboard-mission-metrics {
        margin-inline: -16px;
    }

    .dashboard-mission-metrics button {
        padding-inline: 7px;
    }

    .dashboard-mission-metrics span {
        font-size: 0.51rem;
        letter-spacing: 0.03em;
    }

    .demo-conversion-ribbon {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .demo-conversion-ribbon > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .demo-conversion-ribbon span {
        overflow: visible;
        white-space: normal;
    }

    .demo-conversion-ribbon .btn {
        width: 100%;
    }

    .demo-conversion-actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .demo-showcase-modal {
        max-height: calc(100dvh - 16px);
    }

    .demo-showcase-grid {
        grid-template-columns: 1fr;
    }

    .demo-showcase-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .demo-showcase-footer .btn {
        width: 100%;
    }

    .gear-field-heading h1 {
        font-size: 3rem;
    }

    .gear-field-header {
        padding-top: 0;
    }

    .gear-utility-rail {
        margin-inline: -16px;
        padding-inline: 16px;
    }

    .gear-attention-rail {
        grid-template-columns: 1fr;
    }

    .gear-attention-heading {
        min-height: 62px;
    }

    .gear-sport-switcher {
        margin-inline: -4px;
        padding: 9px;
    }

    .gear-sport-switcher-head > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .gear-sport-chip,
    .gear-sport-chip.is-active {
        flex-basis: 72vw;
        min-width: 72vw;
        min-height: 118px;
    }

    .borrowed-gear-shelf {
        margin-inline: -4px;
        padding: 8px;
    }

    .borrowed-gear-rail {
        grid-auto-columns: 86vw;
    }

    .borrowed-gear-card {
        grid-template-columns: 92px minmax(0, 1fr) 36px;
    }
}

/* Service board library: clusters are an index, not six stacked sections. */
.main:has(.service-board-shell) .service-board-library {
    gap: 10px;
}

.main:has(.service-board-shell) .service-board-clusters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.main:has(.service-board-shell) .service-board-cluster {
    flex: 1 0 170px;
    min-width: 170px;
    min-height: 92px;
    justify-content: space-between;
    padding: 9px 10px 7px;
    border: 1px solid var(--sg-line);
    border-left: 3px solid var(--sg-ink-400);
    border-radius: 2px;
    background: var(--sg-paper);
    scroll-snap-align: start;
}

.main:has(.service-board-shell) .service-board-cluster.is-active {
    border-color: var(--sg-cyan);
    border-left-color: var(--sg-cyan);
    background: rgba(0, 207, 232, 0.055);
}

.main:has(.service-board-shell) .service-board-cluster > header {
    align-items: flex-start;
    padding-inline: 1px;
}

.main:has(.service-board-shell) .service-board-cluster > header span {
    align-items: flex-start;
    font-size: 0.62rem;
    line-height: 1.3;
}

.main:has(.service-board-shell) .service-board-tabs {
    padding: 3px 0 0;
}

.main:has(.service-board-shell) .service-board-tabs button {
    max-width: 100%;
    min-height: 29px;
    padding: 5px 9px;
    overflow: hidden;
    font-size: 0.65rem;
}

.main:has(.service-board-shell) .service-board-tabs button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logbook: a visual story trail, distinct from asset and command screens. */
.main:has(.logbook-story-hero) {
    background: var(--sg-canvas);
}

.logbook-story-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 270px;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 290px) auto;
    align-items: end;
    gap: 22px;
    margin-bottom: 14px;
    padding: 28px 30px;
    overflow: hidden;
    border-left: 5px solid var(--sg-cyan);
    background:
        radial-gradient(circle at 75% 25%, rgba(0, 207, 232, 0.18), transparent 34%),
        linear-gradient(135deg, var(--sg-ink-950), var(--sg-ink-800));
    box-shadow: var(--sg-shadow-raised);
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.logbook-story-hero::before,
.logbook-story-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.logbook-story-hero::before {
    background-image: var(--logbook-story-image);
    background-position: center 44%;
    background-size: cover;
    opacity: 0;
    filter: saturate(1.05) contrast(1.04);
}

.logbook-story-hero.has-image::before {
    opacity: 1;
}

.logbook-story-hero::after {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 13, 29, 0.96) 0%, rgba(7, 13, 29, 0.78) 46%, rgba(7, 13, 29, 0.26) 78%, rgba(7, 13, 29, 0.54) 100%),
        linear-gradient(0deg, rgba(7, 13, 29, 0.76), transparent 60%);
}

.logbook-story-copy {
    align-self: center;
    max-width: 690px;
}

.logbook-story-copy h1 {
    max-width: 12ch;
    margin: 9px 0 8px;
    color: #ffffff;
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    font-weight: 950;
    letter-spacing: -0.06em;
    line-height: 0.92;
}

.logbook-story-copy p {
    max-width: 62ch;
    color: #d2ddeb;
    font-size: 0.84rem;
    line-height: 1.55;
}

.logbook-story-hero .logbook-hero-latest {
    align-self: end;
    min-height: 105px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--sg-radius-object);
    background: rgba(6, 12, 27, 0.7);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(10px);
}

.logbook-story-hero .logbook-hero-latest span {
    color: var(--sg-cyan);
}

.logbook-story-hero .logbook-hero-latest strong {
    color: #ffffff;
}

.logbook-story-hero .logbook-hero-latest small {
    color: #b8c5d6;
}

.logbook-story-hero > .btn {
    align-self: end;
    white-space: nowrap;
}

.main:has(.logbook-story-hero) .logbook-signal-strip {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-left: 4px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
    box-shadow: var(--sg-shadow-object);
}

.main:has(.logbook-story-hero) .logbook-console {
    margin-bottom: 14px;
    padding: 9px;
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: none;
}

.main:has(.logbook-story-hero) .logbook-console-controls {
    gap: 7px;
}

.main:has(.logbook-story-hero) .logbook-console .form-select {
    min-height: 36px;
    border: 1px solid var(--sg-line);
    border-radius: 2px;
    background-color: var(--sg-paper-muted);
    color: var(--sg-ink-950);
    font-size: 0.71rem;
    font-weight: 760;
}

.main:has(.logbook-story-hero) .logbook-events {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.main:has(.logbook-story-hero) .logbook-event {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 142px;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--sg-line);
    border-top: 3px solid var(--logbook-event-color);
    border-radius: var(--sg-radius-object);
    background: var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.main:has(.logbook-story-hero) .logbook-event:hover {
    border-color: var(--sg-line-strong);
    box-shadow: var(--sg-shadow-raised);
    transform: translateY(-2px);
}

.main:has(.logbook-story-hero) .logbook-event::before {
    display: none;
}

.main:has(.logbook-story-hero) .logbook-event-media {
    position: relative;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    background: var(--sg-chip-soft);
}

.main:has(.logbook-story-hero) .logbook-event-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5, 10, 24, 0.7), transparent 58%);
}

.main:has(.logbook-story-hero) .logbook-event-media img {
    width: 100%;
    height: 100%;
    min-height: 142px;
    object-fit: cover;
    transition: transform var(--sg-motion);
}

.main:has(.logbook-story-hero) .logbook-event:hover .logbook-event-media img {
    transform: scale(1.045);
}

.main:has(.logbook-story-hero) .logbook-event-media span {
    position: absolute;
    right: 7px;
    bottom: 7px;
    left: 7px;
    z-index: 1;
    color: #ffffff;
    font-size: 0.53rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.main:has(.logbook-story-hero) .logbook-event-icon {
    align-self: center;
    display: grid;
    width: 50px;
    height: 50px;
    margin-inline: auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--logbook-event-color) 42%, transparent);
    background: color-mix(in srgb, var(--logbook-event-color) 10%, white);
    color: var(--logbook-event-color);
    font-size: 1rem;
}

.main:has(.logbook-story-hero) .logbook-event-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 14px 15px;
}

.main:has(.logbook-story-hero) .logbook-event-topline {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.main:has(.logbook-story-hero) .logbook-event-topline time {
    color: var(--sg-ink-600);
    font-size: 0.61rem;
    font-weight: 850;
}

.logbook-event-kind {
    padding-left: 7px;
    border-left: 1px solid var(--sg-line);
    color: var(--logbook-event-color);
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.main:has(.logbook-story-hero) .logbook-event-title {
    color: var(--sg-ink-950);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.25;
}

.main:has(.logbook-story-hero) .logbook-event-subtitle {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: var(--sg-ink-600);
    font-size: 0.68rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 980px) {
    .logbook-story-hero {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
    }

    .logbook-story-hero > .btn {
        grid-column: 2;
    }

    .main:has(.logbook-story-hero) .logbook-events {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .main:has(.service-board-shell) .service-board-library > header {
        align-items: center;
        flex-direction: row;
    }

    .main:has(.service-board-shell) .service-board-cluster-control {
        align-items: flex-end;
        flex-direction: column;
        gap: 3px;
    }

    .main:has(.service-board-shell) .service-board-cluster-control span {
        font-size: 0.6rem;
    }

    .main:has(.service-board-shell) .service-board-cluster-control select {
        width: auto;
        min-width: 132px;
    }

    .main:has(.service-board-shell) .service-board-cluster {
        flex-basis: 68vw;
        min-width: 68vw;
    }

    .logbook-story-hero {
        min-height: 430px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto auto;
        align-items: end;
        gap: 10px;
        padding: 22px;
    }

    .logbook-story-hero::after {
        background:
            linear-gradient(90deg, rgba(7, 13, 29, 0.76), rgba(7, 13, 29, 0.24)),
            linear-gradient(0deg, rgba(7, 13, 29, 0.96), transparent 78%);
    }

    .logbook-story-copy {
        align-self: start;
    }

    .logbook-story-copy h1 {
        font-size: 2.8rem;
    }

    .logbook-story-copy p {
        max-width: 38ch;
        font-size: 0.75rem;
    }

    .logbook-story-hero .logbook-hero-latest {
        min-height: 86px;
    }

    .logbook-story-hero > .btn {
        grid-column: 1;
        width: 100%;
    }

    .main:has(.logbook-story-hero) .logbook-events {
        grid-template-columns: 1fr;
    }

    .main:has(.logbook-story-hero) .logbook-event {
        min-height: 122px;
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .main:has(.logbook-story-hero) .logbook-event-media img {
        min-height: 122px;
    }
}

@media (max-width: 560px) {
    .main:has(.logbook-story-hero) {
        padding-top: 12px;
    }

    .main:has(.logbook-story-hero) .logbook-signal-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .main:has(.logbook-story-hero) .logbook-console-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main:has(.logbook-story-hero) .logbook-console .form-select {
        width: 100%;
        min-width: 0;
    }

    .main:has(.logbook-story-hero) .logbook-console-count {
        grid-column: 1 / -1;
    }
}

/* Dashboard v2: keep every working surface on one balanced canvas. */
.main:has(.dashboard-mission-hero) > .dashboard-mission-hero,
.main:has(.dashboard-mission-hero) > .demo-conversion-ribbon,
.main:has(.dashboard-mission-hero) > .dashboard-timeline-hero,
.main:has(.dashboard-mission-hero) > .dashboard-command-layout {
    width: min(100%, 1920px);
    max-width: none;
    margin-inline: auto;
}

.main:has(.dashboard-mission-hero) > .dashboard-timeline-hero,
.main:has(.dashboard-mission-hero) > .dashboard-timeline-hero.is-medium,
.main:has(.dashboard-mission-hero) > .dashboard-timeline-hero.is-dense {
    width: min(100%, 1920px);
    max-width: none;
}

.main:has(.dashboard-mission-hero) .dashboard-timeline-hero .fishbone-container {
    width: 100%;
    max-width: none;
}

.main:has(.dashboard-mission-hero) > .dashboard-command-layout,
.main:has(.dashboard-mission-hero) > .dashboard-command-layout.is-calm,
.main:has(.dashboard-mission-hero) > .dashboard-command-layout.is-busy {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 22vw, 420px);
    grid-template-areas: "main urgent";
    justify-content: stretch;
}

.main:has(.dashboard-mission-hero) .dashboard-below-main,
.main:has(.dashboard-mission-hero) .dashboard-side-rail {
    width: 100%;
    max-width: none;
}

.main:has(.dashboard-mission-hero) .dashboard-widgets > .dashboard-widget {
    width: 100%;
    max-width: none;
}

.main:has(.dashboard-mission-hero) .dashboard-side-rail-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

@media (min-width: 1121px) {
    .main:has(.dashboard-mission-hero) .dashboard-side-rail {
        position: sticky;
        top: calc(72px + var(--space-lg));
        display: flex;
        max-height: calc(100vh - 112px);
        max-height: calc(100dvh - 112px);
        flex-direction: column;
        gap: 18px;
        overflow: hidden;
    }

    .main:has(.dashboard-mission-hero) .dashboard-side-rail > .fix-before-panel {
        position: static;
        flex: 0 0 auto;
    }

    .main:has(.dashboard-mission-hero) .dashboard-side-rail-scroll {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 2px 5px 4px 0;
        scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
    }
}

@media (max-width: 1120px) {
    .main:has(.dashboard-mission-hero) > .dashboard-command-layout,
    .main:has(.dashboard-mission-hero) > .dashboard-command-layout.is-calm,
    .main:has(.dashboard-mission-hero) > .dashboard-command-layout.is-busy {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "urgent"
            "main";
    }
}

/* =========================================================
   Product language v3: the page frame follows the object.
   Trips are immersive tickets, checks are a workbench,
   and Crew is an action-led people surface.
   ========================================================= */

/* Trips — put the next experience first, then the ticket ledger. */
.main:has(.trips-field-hero) {
    padding-top: clamp(14px, 2vw, 28px);
}

.main:has(.trips-field-hero) > .trips-field-hero,
.main:has(.trips-field-hero) > .trips-sport-filter,
.main:has(.trips-field-hero) > .trip-ticket-section,
.main:has(.trips-field-hero) > .trip-ticket-stack {
    width: min(100%, 1600px);
    max-width: none;
    margin-inline: auto;
}

.main:has(.trips-field-hero) > .trips-field-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
    min-height: clamp(280px, 29vw, 390px);
    align-items: end;
    gap: clamp(24px, 4vw, 70px);
    margin-bottom: 14px;
    padding: clamp(28px, 4vw, 58px);
    overflow: hidden;
    border: 0;
    border-left: 5px solid var(--trips-hero-accent, var(--sg-cyan));
    border-radius: var(--sg-radius-object);
    background:
        linear-gradient(90deg, rgba(5, 11, 26, 0.97) 0%, rgba(5, 11, 26, 0.74) 42%, rgba(5, 11, 26, 0.3) 75%, rgba(5, 11, 26, 0.2)),
        linear-gradient(0deg, rgba(5, 11, 26, 0.9), transparent 72%),
        var(--trips-hero-image) center 45% / cover no-repeat;
    box-shadow: var(--sg-shadow-raised);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.main:has(.trips-field-hero) > .trips-field-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.4;
    background:
        linear-gradient(90deg, var(--trips-hero-accent, var(--sg-cyan)) 0 4px, transparent 4px),
        repeating-linear-gradient(90deg, transparent 0 108px, rgba(255, 255, 255, 0.055) 108px 109px);
    pointer-events: none;
}

.trips-field-copy {
    align-self: end;
    max-width: 720px;
}

.main:has(.trips-field-hero) .trips-field-copy .section-label {
    color: #ffffff;
    background: color-mix(in srgb, var(--trips-hero-accent, var(--sg-cyan)) 78%, transparent);
}

.main:has(.trips-field-hero) .trips-field-copy .page-title {
    max-width: 680px;
    margin: 6px 0 10px;
    color: #ffffff;
    font-size: clamp(3rem, 6vw, 6.3rem);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.82;
    text-transform: uppercase;
    text-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.main:has(.trips-field-hero) .trips-field-copy .page-subtitle {
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(0.82rem, 1.2vw, 1rem);
    line-height: 1.55;
}

.trips-field-side {
    display: grid;
    align-content: end;
    gap: 12px;
}

.trips-next-brief {
    position: relative;
    display: grid;
    gap: 7px;
    width: 100%;
    padding: 19px 20px 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(7, 13, 29, 0.78);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(12px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    transition: transform var(--sg-motion), border-color var(--sg-motion);
}

.trips-next-brief:hover {
    border-color: var(--trips-hero-accent, var(--sg-cyan));
    transform: translateY(-2px);
}

.trips-next-brief-kicker {
    color: var(--trips-hero-accent, var(--sg-cyan));
    font-size: 0.6rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.trips-next-brief > strong {
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 950;
    line-height: 1.02;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.trips-next-brief > small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trips-next-brief-stats {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
}

.trips-next-brief-stats b {
    padding: 5px 7px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trips-next-brief-stats i {
    margin-left: auto;
    color: var(--trips-hero-accent, var(--sg-cyan));
}

.trips-field-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.trips-view-switcher {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(7, 13, 29, 0.72);
    backdrop-filter: blur(10px);
}

.main:has(.trips-field-hero) .trips-view-switcher .btn {
    min-width: 34px;
    padding: 7px 9px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
}

.main:has(.trips-field-hero) .trips-view-switcher .btn.is-active {
    background: var(--sg-paper);
    color: var(--sg-ink-950);
}

.trips-sport-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px;
    padding: 0 2px;
}

.trip-ticket-section {
    margin-bottom: clamp(28px, 4vw, 52px);
}

.trip-ticket-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    margin-bottom: 10px;
    padding: 0 3px 8px;
    border-bottom: 1px solid var(--sg-line);
}

.trip-ticket-section-head span {
    color: var(--sg-cyan-dark);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.trip-ticket-section.is-past .trip-ticket-section-head span {
    color: var(--sg-ink-600);
}

.trip-ticket-section-head b {
    display: grid;
    min-width: 27px;
    height: 27px;
    place-items: center;
    background: var(--sg-chip);
    color: #ffffff;
    font-size: 0.68rem;
}

.main:has(.trips-field-hero) .trip-ticket-stack {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
}

.main:has(.trips-field-hero) .sg-trip-ticket {
    width: 100%;
    max-width: none;
    border-radius: var(--sg-radius-object);
}

.main:has(.trips-field-hero) .trip-ticket-main {
    grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
}

.trip-avatar-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.trip-avatar-fallback[hidden] {
    display: none;
}

/* Ready Checks — a light procedure bench, not another campaign hero. */
.main:has(.ready-check-active-run) {
    gap: 16px;
    padding-top: clamp(14px, 2vw, 28px);
}

.main:has(.ready-check-active-run) > .ready-check-hero,
.main:has(.ready-check-active-run) > .ready-check-board,
.main:has(.ready-check-active-run) > .ready-check-template-rail,
.main:has(.ready-check-active-run) > .ready-check-list,
.main:has(.ready-check-active-run) > .empty-state {
    width: min(100%, 1500px);
    max-width: none;
    margin-inline: auto;
}

.main:has(.ready-check-active-run) > .ready-check-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-areas:
        "copy active"
        "actions active";
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    align-items: end;
    gap: 18px clamp(24px, 4vw, 70px);
    min-height: 244px;
    margin-bottom: 0;
    padding: clamp(24px, 3.2vw, 44px);
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-left: 5px solid var(--sg-cyan);
    border-radius: var(--sg-radius-object);
    background:
        linear-gradient(120deg, rgba(0, 207, 232, 0.1), transparent 38%),
        linear-gradient(#ffffff, #f7f9fb);
    box-shadow: var(--sg-shadow-object);
    color: var(--sg-ink-950);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.main:has(.ready-check-active-run) > .ready-check-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 1;
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(11, 18, 38, 0.035) 31px 32px),
        repeating-linear-gradient(90deg, transparent 0 95px, rgba(11, 18, 38, 0.025) 95px 96px);
    pointer-events: none;
}

.ready-check-hero-copy {
    grid-area: copy;
    align-self: end;
}

.main:has(.ready-check-active-run) .ready-check-hero .page-title {
    margin: 4px 0 8px;
    color: var(--sg-ink-950);
    font-size: clamp(2.25rem, 5vw, 4.8rem);
    font-weight: 950;
    letter-spacing: -0.05em;
    line-height: 0.88;
    text-transform: uppercase;
}

.main:has(.ready-check-active-run) .ready-check-hero p {
    max-width: 58ch;
    color: var(--sg-ink-600);
    font-size: 0.86rem;
    line-height: 1.55;
}

.main:has(.ready-check-active-run) .ready-check-hero .section-label {
    color: var(--sg-cyan-dark);
}

.ready-check-active-run {
    grid-area: active;
    position: relative;
    display: grid;
    align-self: stretch;
    align-content: center;
    gap: 8px;
    min-height: 170px;
    padding: 22px 24px;
    overflow: hidden;
    border: 0;
    border-left: 4px solid var(--sg-amber);
    background:
        linear-gradient(135deg, rgba(0, 207, 232, 0.12), transparent 42%),
        var(--sg-ink-950);
    box-shadow: 0 16px 36px rgba(11, 18, 38, 0.18);
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    transition: transform var(--sg-motion), box-shadow var(--sg-motion);
}

.ready-check-active-run:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(11, 18, 38, 0.24);
}

.ready-check-active-run.is-empty {
    border-left-color: var(--sg-green);
}

.ready-check-active-kicker {
    color: var(--sg-amber);
    font-size: 0.6rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ready-check-active-run.is-empty .ready-check-active-kicker {
    color: #4ade80;
}

.ready-check-active-run > strong {
    color: #ffffff;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.ready-check-active-run > small {
    color: rgba(255, 255, 255, 0.63);
    font-size: 0.7rem;
    line-height: 1.45;
}

.ready-check-active-progress {
    height: 5px;
    margin-top: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.13);
}

.ready-check-active-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sg-amber), var(--sg-coral-hot));
}

.ready-check-active-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.main:has(.ready-check-active-run) .ready-check-actions {
    grid-area: actions;
    justify-content: flex-start;
}

.main:has(.ready-check-active-run) .ready-check-actions .btn-secondary,
.main:has(.ready-check-active-run) .ready-check-actions .btn-ghost {
    border-color: var(--sg-ink-950);
    background: var(--sg-paper);
    color: var(--sg-ink-950);
}

.main:has(.ready-check-active-run) > .ready-check-board {
    grid-template-columns: repeat(4, minmax(104px, 132px)) minmax(260px, 1fr);
    width: min(100%, 1500px);
    max-width: none;
    margin: 0 auto 6px;
}

.main:has(.ready-check-active-run) > .ready-check-template-rail,
.main:has(.ready-check-active-run) > .ready-check-list,
.main:has(.ready-check-active-run) > .empty-state {
    margin-left: auto;
    margin-right: auto;
}

/* Crew — action media carries atmosphere; cards carry the relationships. */
.main:has(.friends-container) .friends-container {
    width: min(100%, 1500px);
    max-width: none;
    padding: clamp(10px, 1.8vw, 26px);
}

.main:has(.friends-container) .friends-hero {
    min-height: clamp(360px, 38vw, 520px);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
    align-items: end;
    gap: clamp(22px, 4vw, 64px);
    padding: clamp(28px, 4vw, 60px);
    border-left: 5px solid var(--friends-hero-color, var(--sg-cyan));
    border-radius: var(--sg-radius-object);
    background: var(--friends-hero-image) center 42% / cover no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.main:has(.friends-container) .friends-hero::before {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(5, 11, 26, 0.96) 0%, rgba(5, 11, 26, 0.77) 42%, rgba(5, 11, 26, 0.24) 78%),
        linear-gradient(0deg, rgba(5, 11, 26, 0.92), transparent 72%),
        linear-gradient(90deg, color-mix(in srgb, var(--friends-hero-color, var(--sg-cyan)) 34%, transparent), transparent 30%),
        repeating-linear-gradient(90deg, transparent 0 110px, rgba(255, 255, 255, 0.055) 110px 111px);
}

.main:has(.friends-container) .friends-hero > * {
    z-index: 1;
}

.main:has(.friends-container) .friends-hero-copy {
    align-self: end;
}

.main:has(.friends-container) .friends-hero h1 {
    font-size: clamp(3.4rem, 8vw, 7.2rem);
    letter-spacing: -0.055em;
}

.main:has(.friends-container) .friends-hero p {
    max-width: 54ch;
    font-size: 0.88rem;
}

.main:has(.friends-container) .friends-hero-actions .btn-secondary {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(7, 13, 29, 0.38);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.main:has(.friends-container) .friends-crew-panel {
    align-self: end;
    min-height: 220px;
    border-top: 4px solid var(--friends-hero-color, var(--sg-cyan));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.main:has(.friends-container) .friends-hero-stats {
    align-self: end;
    margin-top: 0;
}

.friends-avatar-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: linear-gradient(135deg, var(--friends-hero-color, var(--sg-cyan)), var(--sg-violet));
    color: #ffffff;
    font-weight: 950;
}

.friends-avatar-fallback[hidden] {
    display: none;
}

.main:has(.friends-container) .friend-card-cover {
    height: 188px;
}

@media (max-width: 980px) {
    .main:has(.trips-field-hero) > .trips-field-hero,
    .main:has(.ready-check-active-run) > .ready-check-hero,
    .main:has(.friends-container) .friends-hero {
        grid-template-columns: 1fr;
    }

    .trips-field-side {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .main:has(.trips-field-hero) .trip-ticket-main {
        grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    }

    .main:has(.ready-check-active-run) > .ready-check-hero {
        grid-template-areas:
            "copy"
            "active"
            "actions";
        grid-template-columns: 1fr;
    }

    .ready-check-active-run {
        min-height: 150px;
    }

    .main:has(.friends-container) .friends-hero {
        align-items: end;
    }
}

@media (max-width: 720px) {
    .main:has(.trips-field-hero) > .trips-field-hero {
        min-height: 510px;
        align-content: end;
        padding: 22px;
        background:
            linear-gradient(0deg, rgba(5, 11, 26, 0.98) 0%, rgba(5, 11, 26, 0.48) 72%, rgba(5, 11, 26, 0.18)),
            var(--trips-hero-image) center / cover no-repeat;
    }

    .main:has(.trips-field-hero) .trips-field-copy .page-title {
        font-size: clamp(3rem, 17vw, 5.2rem);
    }

    .trips-field-side {
        grid-template-columns: 1fr;
    }

    .trips-field-actions {
        justify-content: stretch;
    }

    .trips-field-actions > .btn-primary {
        flex: 1;
    }

    .main:has(.trips-field-hero) .sg-trip-ticket {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .main:has(.trips-field-hero) .trip-ticket-main {
        grid-template-columns: 1fr;
    }

    .main:has(.trips-field-hero) .trip-ticket-media {
        min-height: 168px;
    }

    .main:has(.trips-field-hero) .trip-ticket-side {
        grid-column: 2;
    }

    .main:has(.trips-field-hero) .sg-trip-ticket::before,
    .main:has(.trips-field-hero) .sg-trip-ticket::after {
        left: 72px;
    }

    .main:has(.ready-check-active-run) > .ready-check-hero {
        padding: 20px;
    }

    .main:has(.ready-check-active-run) > .ready-check-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main:has(.ready-check-active-run) > .ready-check-board .ready-check-latest {
        grid-column: 1 / -1;
    }

    .main:has(.friends-container) .friends-hero {
        min-height: 640px;
        padding: 24px;
        background-position: 62% center;
    }

    .main:has(.friends-container) .friends-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .trips-field-actions {
        flex-wrap: wrap;
    }

    .trips-view-switcher,
    .trips-field-actions > .btn-primary {
        width: 100%;
    }

    .trips-view-switcher .btn {
        flex: 1;
    }

    .main:has(.trips-field-hero) .sg-trip-ticket {
        grid-template-columns: 1fr;
    }

    .main:has(.trips-field-hero) .trip-ticket-date {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: start;
        gap: 6px;
        padding: 11px 14px;
        border-right: 0;
        border-bottom: 1px dashed var(--sg-line-strong);
    }

    .main:has(.trips-field-hero) .trip-ticket-date strong {
        font-size: 1rem;
    }

    .main:has(.trips-field-hero) .trip-ticket-side {
        grid-column: 1;
    }

    .main:has(.trips-field-hero) .sg-trip-ticket::before,
    .main:has(.trips-field-hero) .sg-trip-ticket::after {
        display: none;
    }

    .ready-check-active-run {
        padding: 20px;
    }

    .main:has(.ready-check-active-run) .ready-check-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.gear-service-check-reference {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #b8c7da;
    border-top: 3px solid var(--sg-cyan);
    background:
        linear-gradient(135deg, rgba(0, 207, 232, 0.08), transparent 46%),
        #f7fafc;
}

.gear-service-check-reference.is-dialog-reference {
    margin: 0;
}

.gear-service-check-reference-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.gear-service-check-reference-header > div {
    display: grid;
    gap: 2px;
}

.gear-service-check-reference-header span {
    color: #0284c7;
    font-size: 0.6rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gear-service-check-reference-header strong {
    color: var(--sg-ink);
    font-family: var(--sg-font-display);
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.gear-service-check-reference-header small {
    max-width: 360px;
    color: var(--sg-ink-muted);
    font-size: 0.68rem;
    line-height: 1.35;
    text-align: right;
}

.gear-service-check-reference-list {
    display: grid;
    gap: 6px;
}

.gear-service-check-reference-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #ced7e4;
    background: #fff;
    color: var(--sg-ink);
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.gear-service-check-reference-row:hover {
    border-color: var(--sg-cyan);
    box-shadow: 4px 4px 0 rgba(0, 207, 232, 0.16);
    transform: translate(-1px, -1px);
}

.gear-service-check-reference-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    background: var(--sg-chip);
    color: var(--sg-cyan);
}

.gear-service-check-reference-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.gear-service-check-reference-copy strong,
.gear-service-check-reference-copy small,
.gear-service-check-reference-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gear-service-check-reference-copy strong {
    color: var(--sg-ink);
    font-size: 0.78rem;
}

.gear-service-check-reference-copy small {
    color: var(--sg-ink-muted);
    font-size: 0.62rem;
}

.gear-service-check-reference-copy em {
    color: #0369a1;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
}

.gear-service-check-reference-row > .fa-arrow-up-right-from-square {
    color: #64748b;
    font-size: 0.7rem;
}

[data-theme="dark"] .gear-service-check-reference {
    border-color: #344258;
    background:
        linear-gradient(135deg, rgba(0, 207, 232, 0.1), transparent 46%),
        #111b2c;
}

[data-theme="dark"] .gear-service-check-reference-row {
    border-color: #344258;
    background: #0c1524;
}

@media (max-width: 640px) {
    .gear-service-check-reference-header {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }

    .gear-service-check-reference-header small {
        text-align: left;
    }

    .gear-service-check-reference-copy em {
        white-space: normal;
    }
}

/* Service Boards v2: a working board library and live builder workbench. */
.main:has(.service-board-shell) .service-board-cluster {
    min-height: 108px;
}

.main:has(.service-board-shell) .service-board-tabs button {
    display: grid;
    min-width: 0;
    max-width: none;
    min-height: 50px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 2px;
    text-align: left;
}

.main:has(.service-board-shell) .service-board-tab-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.main:has(.service-board-shell) .service-board-tab-copy strong,
.main:has(.service-board-shell) .service-board-tab-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main:has(.service-board-shell) .service-board-tab-copy strong {
    font-size: 0.68rem;
    font-weight: 900;
}

.main:has(.service-board-shell) .service-board-tab-copy small {
    color: var(--sg-ink-500);
    font-size: 0.56rem;
    font-weight: 720;
}

.main:has(.service-board-shell) .service-board-tabs button.is-active .service-board-tab-copy small {
    color: rgba(255, 255, 255, 0.7);
}

.main:has(.service-board-shell) .service-board-tabs button em {
    display: grid;
    min-width: 19px;
    height: 19px;
    padding-inline: 4px;
    place-items: center;
    border-radius: 999px;
    background: #ff335f;
    color: #ffffff;
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 950;
}

.service-board-dialog {
    width: min(1180px, calc(100vw - 32px));
    max-width: min(1180px, calc(100vw - 32px));
}

.service-board-dialog .gear-dialog-body {
    gap: 14px;
    padding: 16px;
}

.service-builder-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.68fr);
    align-items: start;
    gap: 14px;
}

.service-builder-controls {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.service-builder-controls .gear-dialog-section {
    box-shadow: none;
}

.service-template-grid button.is-selected {
    border-color: var(--sg-cyan);
    background:
        linear-gradient(135deg, rgba(0, 207, 232, 0.12), rgba(109, 93, 252, 0.04)),
        #ffffff;
    box-shadow: inset 3px 0 0 var(--sg-cyan);
}

.service-builder-subhead,
.service-builder-heading-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.service-builder-subhead button,
.service-builder-heading-action button {
    min-height: 26px;
    padding: 3px 7px;
    border: 1px solid var(--sg-line);
    border-radius: 2px;
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    cursor: pointer;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.service-builder-subhead button:hover,
.service-builder-heading-action button:hover {
    border-color: var(--sg-cyan);
    color: var(--sg-ink-950);
}

.service-builder-subhead button[disabled],
.service-builder-heading-action button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.service-builder-preview {
    position: sticky;
    top: 0;
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--sg-line);
    border-top: 4px solid var(--sg-cyan);
    border-radius: 3px;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 207, 232, 0.12), transparent 32%),
        var(--sg-paper);
    box-shadow: var(--sg-shadow-object);
}

.service-builder-preview > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.service-builder-preview > header > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.service-builder-preview > header span {
    color: var(--sg-cyan-deep);
    font-size: 0.59rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-builder-preview > header strong {
    min-width: 0;
    overflow: hidden;
    color: var(--sg-ink-950);
    font-size: 1rem;
    font-weight: 930;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-builder-preview > header em {
    display: grid;
    min-width: 42px;
    height: 42px;
    padding: 4px;
    place-items: center;
    background: var(--sg-chip);
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
    font-size: 1.05rem;
    font-style: normal;
    font-weight: 950;
}

.service-builder-preview-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--sg-line);
}

.service-builder-preview-metrics span {
    padding: 9px 10px;
    border-right: 1px solid var(--sg-line);
    border-bottom: 1px solid var(--sg-line);
    color: var(--sg-ink-600);
    font-size: 0.62rem;
}

.service-builder-preview-metrics span:nth-child(even) {
    border-right: 0;
}

.service-builder-preview-metrics span:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.service-builder-preview-metrics strong {
    color: var(--sg-ink-950);
    font-size: 0.86rem;
}

.service-builder-preview-metrics .is-hot strong {
    color: #e11d48;
}

.service-builder-preview-metrics .is-warm strong {
    color: #d97706;
}

.service-builder-preview-scope,
.service-builder-preview > footer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.service-builder-preview-scope span,
.service-builder-preview > footer span {
    padding: 5px 7px;
    border: 1px solid var(--sg-line);
    border-radius: 999px;
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    font-size: 0.58rem;
    font-weight: 800;
}

.service-builder-preview-list {
    display: grid;
    gap: 6px;
}

.service-builder-preview-list article {
    display: grid;
    min-width: 0;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 8px 9px 8px 0;
    border: 1px solid var(--sg-line);
    background: var(--sg-paper);
}

.service-builder-preview-list article > i {
    align-self: stretch;
    background: #94a3b8;
}

.service-builder-preview-list article.is-overdue > i {
    background: #ff335f;
}

.service-builder-preview-list article.is-due_soon > i {
    background: #f59e0b;
}

.service-builder-preview-list article.is-scheduled > i {
    background: #10b981;
}

.service-builder-preview-list article > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.service-builder-preview-list article strong,
.service-builder-preview-list article small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-builder-preview-list article strong {
    color: var(--sg-ink-950);
    font-size: 0.7rem;
}

.service-builder-preview-list article small,
.service-builder-preview-list article > span {
    color: var(--sg-ink-500);
    font-size: 0.58rem;
}

.service-builder-preview-list article > span {
    font-weight: 850;
    text-align: right;
}

.service-builder-preview-empty,
.service-builder-preview-loading {
    display: grid;
    min-height: 150px;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 20px;
    border: 1px dashed var(--sg-line-strong);
    color: var(--sg-ink-500);
    text-align: center;
}

.service-builder-preview-empty i,
.service-builder-preview-loading i {
    color: var(--sg-cyan-deep);
}

.service-builder-preview-empty strong {
    color: var(--sg-ink-900);
    font-size: 0.8rem;
}

.service-builder-preview-empty span,
.service-builder-preview-loading span {
    max-width: 30ch;
    font-size: 0.66rem;
    line-height: 1.4;
}

.service-builder-preview-empty.is-warning i {
    color: #f59e0b;
}

.service-builder-preview > footer {
    padding-top: 10px;
    border-top: 1px solid var(--sg-line);
}

@media (max-width: 900px) {
    .service-board-dialog {
        width: min(760px, calc(100vw - 24px));
        max-width: min(760px, calc(100vw - 24px));
    }

    .service-builder-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-builder-preview {
        position: static;
        grid-row: 1;
    }
}

@media (max-width: 640px) {
    .service-board-dialog .gear-dialog-body {
        padding: 10px;
    }

    .service-builder-preview {
        padding: 12px;
    }

    .main:has(.service-board-shell) .service-board-cluster {
        min-height: 112px;
    }
}

/* Dashboard Studio: configurable operational cockpits built from service-board data. */
.dashboard-studio-shell {
    --studio-overdue: #ff335f;
    --studio-warning: #f59e0b;
    --studio-clear: #00a878;
    gap: 14px;
}

.dashboard-studio-shell .service-board-hero {
    min-height: 160px;
    align-items: center;
    scroll-margin-top: 96px;
    border-left: 5px solid var(--sg-cyan);
    background:
        linear-gradient(92deg, rgba(5, 10, 24, 0.98), rgba(12, 27, 48, 0.9) 60%, rgba(5, 10, 24, 0.78)),
        radial-gradient(circle at 80% 20%, rgba(0, 207, 232, 0.26), transparent 34%);
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
}

.dashboard-studio-shell .service-board-hero h1 {
    max-width: 16ch;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.55rem);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.94;
}

.dashboard-studio-shell .service-board-hero p {
    max-width: 64ch;
    color: #c6d2e1;
}

.dashboard-studio-shell .service-board-hero .dashboard-kicker {
    color: var(--sg-cyan);
}

.dashboard-studio-shell .service-board-hero .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(5, 10, 24, 0.5);
    color: #ffffff;
}

.dashboard-studio-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

.dashboard-studio-hero-meta span {
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #d8e3ef;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dashboard-studio-hero-meta i {
    margin-right: 4px;
    color: var(--sg-cyan);
}

.main:has(.dashboard-studio-shell) .service-board-library {
    padding: 12px;
    border-radius: 3px;
    background: #eef3f8;
}

.main:has(.dashboard-studio-shell) .service-board-clusters {
    gap: 8px;
}

.main:has(.dashboard-studio-shell) .service-board-cluster {
    flex-basis: 230px;
    min-width: 230px;
    min-height: 126px;
    padding: 10px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 246, 250, 0.9));
}

.main:has(.dashboard-studio-shell) .service-board-tabs {
    display: flex;
    align-items: stretch;
    gap: 7px;
    overflow: visible;
}

.main:has(.dashboard-studio-shell) .service-board-cluster:has(.service-board-card:nth-child(2)) {
    flex-basis: 440px;
    min-width: 440px;
}

.main:has(.dashboard-studio-shell) .service-board-cluster:has(.service-board-card:nth-child(3)) {
    flex-basis: 645px;
    min-width: 645px;
}

.service-board-card {
    display: grid;
    flex: 0 0 195px;
    min-width: 195px;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-left: 3px solid var(--sg-ink-300);
    background: var(--sg-paper);
}

.service-board-card.is-active {
    border-color: var(--sg-cyan);
    border-left-color: var(--sg-cyan);
    box-shadow: 0 8px 20px rgba(8, 20, 38, 0.09);
}

.main:has(.dashboard-studio-shell) .service-board-tabs .service-board-card > button {
    width: 100%;
    min-height: 60px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.main:has(.dashboard-studio-shell) .service-board-tabs .service-board-card > button.is-active {
    background: var(--sg-chip);
}

.service-board-card-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    background: rgba(0, 207, 232, 0.1);
    color: var(--sg-cyan-deep);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.service-board-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
    padding: 4px 7px;
    border-top: 1px solid var(--sg-line);
    color: var(--sg-ink-500);
    font-size: 0.54rem;
    font-weight: 800;
    text-transform: uppercase;
}

.service-board-card > footer button {
    min-height: 23px;
    padding: 3px 6px;
    border: 0;
    background: transparent;
    color: var(--sg-cyan-deep);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-studio-canvas {
    display: grid;
    gap: 12px;
}

.dashboard-studio-widget {
    margin: 0;
    border-radius: 3px;
}

.dashboard-studio-widget > header h2 i {
    width: 20px;
    color: var(--sg-cyan-deep);
    text-align: center;
}

.dashboard-studio-kpis {
    border-radius: 3px;
    box-shadow: var(--sg-shadow-object);
}

.dashboard-studio-kpis .is-hot strong {
    color: var(--studio-overdue);
}

.dashboard-studio-kpis .is-warm strong {
    color: var(--studio-warning);
}

.dashboard-studio-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-studio-status-card {
    position: relative;
    display: grid;
    min-height: 132px;
    gap: 3px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-left: 4px solid var(--signal-colour, var(--sg-ink-300));
    border-radius: 2px;
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    cursor: pointer;
    text-align: left;
    transition: transform var(--sg-motion), box-shadow var(--sg-motion);
}

.dashboard-studio-status-card::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -50px;
    width: 120px;
    height: 120px;
    border: 22px solid color-mix(in srgb, var(--signal-colour) 9%, transparent);
    border-radius: 50%;
}

.dashboard-studio-status-card:hover {
    box-shadow: var(--sg-shadow-raised);
    transform: translateY(-2px);
}

.dashboard-studio-status-card.is-hot {
    --signal-colour: var(--studio-overdue);
}

.dashboard-studio-status-card.is-warm {
    --signal-colour: var(--studio-warning);
}

.dashboard-studio-status-card.is-clear {
    --signal-colour: var(--studio-clear);
}

.dashboard-studio-status-card.is-work {
    --signal-colour: var(--sg-violet);
}

.dashboard-studio-status-card > span {
    color: var(--signal-colour);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-studio-status-card > strong {
    z-index: 1;
    font-size: 2.7rem;
    font-weight: 950;
    letter-spacing: -0.06em;
    line-height: 1;
}

.dashboard-studio-status-card > small {
    z-index: 1;
    color: var(--sg-ink-500);
    font-size: 0.64rem;
}

.dashboard-studio-timeline {
    display: flex;
    min-height: 145px;
    align-items: end;
    gap: 7px;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--sg-line);
    background:
        linear-gradient(180deg, transparent 78%, rgba(0, 207, 232, 0.08) 78%),
        var(--sg-paper);
}

.dashboard-studio-timeline button {
    display: grid;
    min-width: 70px;
    min-height: 112px;
    grid-template-rows: auto 1fr auto auto;
    align-items: end;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sg-ink-950);
    cursor: pointer;
    text-align: center;
}

.dashboard-studio-timeline button.is-overdue {
    color: var(--studio-overdue);
}

.dashboard-studio-timeline button.is-active {
    outline: 2px solid var(--sg-cyan);
    outline-offset: 2px;
    border-radius: 4px;
}

.dashboard-studio-timeline button > span,
.dashboard-studio-timeline button > small {
    color: var(--sg-ink-500);
    font-size: 0.54rem;
    font-weight: 850;
    text-transform: uppercase;
}

.dashboard-studio-timeline button > i {
    width: 100%;
    height: var(--bucket-fill);
    min-height: 12px;
    max-height: 72px;
    align-self: end;
    background: linear-gradient(180deg, var(--sg-cyan), var(--sg-violet));
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

.dashboard-studio-timeline button.is-overdue > i {
    background: var(--studio-overdue);
}

.dashboard-studio-timeline button > strong {
    font-size: 1rem;
    font-weight: 950;
}

.dashboard-studio-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-studio-shortcuts > button {
    display: grid;
    min-height: 82px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--sg-line);
    border-left: 3px solid var(--sg-cyan);
    border-radius: 2px;
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    cursor: pointer;
    text-align: left;
}

.dashboard-studio-shortcuts > button > i {
    color: var(--sg-cyan-deep);
    font-size: 1rem;
}

.dashboard-studio-shortcuts span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dashboard-studio-shortcuts strong {
    font-size: 0.72rem;
    font-weight: 930;
}

.dashboard-studio-shortcuts small {
    color: var(--sg-ink-500);
    font-size: 0.58rem;
}

.service-bulk-bar {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--sg-line);
    border-bottom: 0;
    background: var(--sg-paper-muted);
}

.service-bulk-bar.is-active {
    border-left: 4px solid var(--sg-violet);
    background: color-mix(in srgb, var(--sg-violet) 7%, white);
}

.service-bulk-bar > div:first-child {
    display: grid;
    gap: 2px;
}

.service-bulk-bar strong {
    color: var(--sg-ink-950);
    font-size: 0.7rem;
}

.service-bulk-bar span {
    color: var(--sg-ink-500);
    font-size: 0.58rem;
}

.service-bulk-bar > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.service-column-select {
    text-align: center;
}

.service-column-select input {
    width: 16px;
    height: 16px;
    accent-color: var(--sg-violet);
}

@media (max-width: 760px) {
    .service-board-table td.service-column-select input {
        justify-self: start;
    }
}

.service-row-actions {
    gap: 4px;
}

.service-builder-order-list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.service-builder-order-item {
    display: grid;
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid var(--sg-line);
    border-left: 3px solid var(--sg-ink-300);
    background: var(--sg-paper);
}

.service-builder-order-item:has(input:checked) {
    border-left-color: var(--sg-cyan);
    background: rgba(0, 207, 232, 0.045);
}

.service-builder-order-item > label {
    display: grid;
    min-width: 0;
    grid-template-columns: 18px 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.service-builder-order-item > label > i {
    color: var(--sg-cyan-deep);
    text-align: center;
}

.service-builder-order-item > label > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.service-builder-order-item strong {
    color: var(--sg-ink-950);
    font-size: 0.69rem;
}

.service-builder-order-item small {
    color: var(--sg-ink-500);
    font-size: 0.58rem;
    line-height: 1.3;
}

.service-builder-order-item > div {
    display: flex;
    gap: 3px;
}

.service-builder-order-item > div button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--sg-line);
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    cursor: pointer;
}

.service-builder-order-list.is-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-builder-order-list.is-columns .service-builder-order-item {
    min-height: 44px;
}

.service-builder-order-list.is-columns .service-builder-order-item > label {
    grid-template-columns: 18px 18px minmax(0, 1fr);
}

.service-builder-colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.service-builder-colors label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--sg-line);
    color: var(--sg-ink-700);
    font-size: 0.65rem;
    font-weight: 850;
}

.service-builder-colors input {
    width: 38px;
    height: 28px;
    padding: 2px;
    border: 0;
    background: transparent;
}

.service-bulk-dialog-summary > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.service-bulk-dialog-summary > div span {
    padding: 5px 7px;
    background: var(--sg-paper-muted);
    color: var(--sg-ink-700);
    font-size: 0.6rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .dashboard-studio-status-grid,
    .dashboard-studio-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-studio-shell .service-board-hero {
        min-height: 0;
        align-items: stretch;
        padding: 16px;
    }

    .dashboard-studio-shell .service-board-hero h1 {
        font-size: 2rem;
        line-height: 0.98;
    }

    .dashboard-studio-shell .service-board-hero-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-studio-shell .service-board-hero-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 8px 5px;
        font-size: 0.67rem;
    }

    .main:has(.dashboard-studio-shell) .service-board-cluster {
        flex-basis: 82vw;
        min-width: 82vw;
    }

    .main:has(.dashboard-studio-shell) .service-board-cluster:has(.service-board-card:nth-child(2)),
    .main:has(.dashboard-studio-shell) .service-board-cluster:has(.service-board-card:nth-child(3)) {
        flex-basis: 82vw;
        min-width: 82vw;
    }

    .main:has(.dashboard-studio-shell) .service-board-tabs {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .service-board-card {
        min-width: 70vw;
    }

    .dashboard-studio-status-grid,
    .dashboard-studio-shortcuts {
        grid-template-columns: 1fr;
    }

    .dashboard-studio-status-card {
        min-height: 104px;
    }

    .service-bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .service-builder-order-list.is-columns,
    .service-builder-colors {
        grid-template-columns: 1fr;
    }
}

/*
 * Ultrawide framing
 *
 * Normal desktop layouts can use the full viewport through 2048px. Beyond
 * that, app screens become a centered working canvas instead of stretching
 * cards and rails across a 4K/5K display. The public landing page intentionally
 * remains full-bleed.
 */
@media (min-width: 2049px) {
    .main:not(:has(> .landing)) {
        width: 100%;
        max-width: 2048px;
        margin-inline: auto;
    }
}

@media print {
    .main:has(.dashboard-studio-shell) {
        padding: 0;
        background: #ffffff;
    }

    .dashboard-studio-shell .service-board-library,
    .dashboard-studio-shell .service-board-toolbar,
    .dashboard-studio-shell .service-board-hero-actions,
    .dashboard-studio-shell .service-bulk-bar,
    .dashboard-studio-shell .service-board-footer,
    .dashboard-studio-shell .widget-shortcuts,
    .dashboard-studio-shell .service-row-actions,
    .dashboard-studio-shell .service-column-select {
        display: none !important;
    }

    .dashboard-studio-shell .service-board-hero {
        min-height: 0;
        padding: 14mm 10mm 8mm;
        clip-path: none;
        print-color-adjust: exact;
    }

    .dashboard-studio-shell .service-table-scroll {
        overflow: visible;
    }
}

/* Dark theme: surfaces in this layer that hardcode light colours */
[data-theme="dark"] .main:has(.dashboard-studio-shell) .service-board-library {
    background: #10182e;
}

[data-theme="dark"] .main:has(.dashboard-studio-shell) .service-board-cluster {
    background: linear-gradient(145deg, rgba(27, 36, 57, 0.96), rgba(16, 24, 46, 0.9));
}

[data-theme="dark"] .service-table-group > header {
    background: #1b2439;
}

[data-theme="dark"] .service-board-metrics > button,
[data-theme="dark"] .service-board-metrics > div {
    color: var(--sg-ink-950);
}

[data-theme="dark"] .service-board-metrics span {
    color: var(--sg-ink-600);
}

[data-theme="dark"] .service-remaining strong {
    color: var(--sg-ink-950);
}

[data-theme="dark"] .service-remaining > span {
    background: var(--sg-line-strong);
}

/* Calendar export and private subscription controls */
.calendar-menu-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.calendar-menu-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.calendar-provider-btn {
    justify-content: flex-start;
    gap: var(--space-md);
    min-height: 48px;
    background: var(--surface);
}

.calendar-provider-btn i {
    width: 1.25rem;
    font-size: 1.2rem;
    text-align: center;
}

.calendar-provider-google {
    border: 2px solid #4285f4;
    color: #2467c9;
}

.calendar-provider-download {
    border: 2px solid #0078d4;
    color: #0069ba;
}

.calendar-subscribe-panel {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.calendar-subscribe-help,
.calendar-subscribe-instructions {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.calendar-subscribe-help {
    margin: var(--space-sm) 0 var(--space-md);
}

.calendar-subscribe-field {
    display: flex;
    gap: var(--space-sm);
}

.calendar-subscribe-field .form-input {
    min-width: 0;
    flex: 1;
    font-size: 0.8rem;
}

.calendar-subscribe-field .btn {
    min-width: 44px;
}

.calendar-subscribe-instructions {
    margin: var(--space-sm) 0 0;
    font-size: 0.75rem;
}

.calendar-feed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.calendar-subscribe-error {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-md);
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
    color: var(--text);
    font-size: 0.85rem;
}

[data-theme="dark"] .calendar-provider-google,
[data-theme="dark"] .calendar-provider-download {
    background: var(--surface-elevated);
}

[data-theme="dark"] .calendar-provider-google {
    color: #8bb7ff;
}

[data-theme="dark"] .calendar-provider-download {
    color: #78c6ff;
}

@media (max-width: 480px) {
    .calendar-feed-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-feed-actions .btn {
        justify-content: flex-start;
        min-height: 44px;
    }
}

/* Final dark-theme guardrails for command-board surfaces. Several legacy
   declarations use literal white backgrounds later in style.css. */
[data-theme="dark"] .dashboard-hero-header,
[data-theme="dark"] .gear-page-header,
[data-theme="dark"] .service-board-hero,
[data-theme="dark"] .logbook-hero {
    background:
        linear-gradient(120deg, rgba(0, 207, 232, 0.11), transparent 38%),
        linear-gradient(135deg, #10182e, #1a2540);
}

[data-theme="dark"] .dashboard-widget,
[data-theme="dark"] .gear-motion-shelf,
[data-theme="dark"] .fix-before-panel {
    background: var(--sg-paper) !important;
    border-color: var(--sg-line) !important;
    box-shadow: var(--sg-shadow-object) !important;
    color: var(--sg-ink-950);
}

[data-theme="dark"] .dashboard-widget .card,
[data-theme="dark"] .dashboard-widget .widget-list-item,
[data-theme="dark"] .quick-action-card,
[data-theme="dark"] .fix-row,
[data-theme="dark"] .compact-gear-card,
[data-theme="dark"] .gear-motion-chip,
[data-theme="dark"] .next-send-card,
[data-theme="dark"] .next-send-person,
[data-theme="dark"] .next-send-gear-chip,
[data-theme="dark"] .dashboard-map-pin {
    background: var(--sg-paper-muted) !important;
    border-color: var(--sg-line) !important;
    color: var(--sg-ink-950) !important;
}

[data-theme="dark"] .dashboard-widget h2,
[data-theme="dark"] .dashboard-widget h3,
[data-theme="dark"] .dashboard-widget strong,
[data-theme="dark"] .gear-motion-header h2,
[data-theme="dark"] .fix-panel-header h2,
[data-theme="dark"] .fix-row-copy strong,
[data-theme="dark"] .quick-action-card span,
[data-theme="dark"] .dashboard-map-pin strong {
    color: var(--sg-ink-950) !important;
}

[data-theme="dark"] .dashboard-widget p,
[data-theme="dark"] .dashboard-widget small,
[data-theme="dark"] .fix-row-copy small,
[data-theme="dark"] .compact-gear-copy small,
[data-theme="dark"] .gear-motion-chip small,
[data-theme="dark"] .dashboard-map-pin small {
    color: var(--sg-ink-600) !important;
}

/* Theme changes must not tween foreground and surface colors on different
   timelines; that creates a brief low-contrast state in WebKit. Keep only
   interaction-oriented motion on dashboard cards. */
.dashboard-widget {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header and touch ergonomics */
.logo-wordmark {
    text-decoration: none;
}

.landing-runtime-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 18px;
    background: #fff7d6;
    border-bottom: 1px solid #f4c84c;
    color: #654b00;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

[data-theme="dark"] .landing-runtime-notice {
    background: #3b310f;
    border-color: #7d6518;
    color: #ffe691;
}

.calendar-nav-btn {
    width: 44px;
    height: 44px;
}

.service-board-tabs {
    scrollbar-color: var(--sg-ink-400) transparent;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.service-board-tabs > * {
    scroll-snap-align: start;
}

@media (max-width: 640px) {
    .header-icon-btn,
    .notification-btn,
    .header-search,
    .header-search-toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    #auth-btn:has(.user-info) {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .btn,
    .service-board-tabs button,
    .ready-check-template-chip,
    .ready-check-row {
        min-height: 44px;
    }
}

@media (max-width: 390px) {
    .header-content {
        padding-inline: 8px;
    }

    .logo-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Board library first: choose or edit a dashboard before reading its contents. */
.main:has(.dashboard-studio-shell) .service-view-library {
    display: grid;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--sg-line);
    border-radius: 10px;
    background: var(--sg-paper);
}

.main:has(.dashboard-studio-shell) .service-view-library-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.service-view-library-heading > div {
    display: grid;
    max-width: 760px;
    gap: 4px;
}

.service-view-library-heading .section-label {
    color: var(--sg-cyan-deep);
    justify-self: start;
}

.service-view-library-heading strong {
    color: var(--sg-ink-950);
    font-size: 1.15rem;
}

.service-view-library-heading p,
.service-view-empty p,
.service-view-library-note p {
    margin: 0;
    color: var(--sg-ink-600);
    font-size: 0.78rem;
    line-height: 1.5;
}

.service-view-library-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.service-view-groups {
    display: grid;
    gap: 12px;
}

.service-dashboard-panel {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.service-view-group {
    display: grid;
    min-width: 0;
    gap: 8px;
    padding-top: 2px;
}

.service-view-group + .service-view-group {
    padding-top: 12px;
    border-top: 1px solid var(--sg-line);
}

.service-view-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.service-view-group > header > div {
    display: grid;
    gap: 3px;
}

.service-view-group > header strong {
    color: var(--sg-ink-950);
    font-size: 0.82rem;
}

.service-view-group > header strong i {
    width: 18px;
    margin-right: 3px;
    color: var(--sg-cyan-deep);
    text-align: center;
}

.service-view-group > header small {
    color: var(--sg-ink-600);
    font-size: 0.68rem;
    line-height: 1.4;
}

.service-dashboard-tablist {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 7px;
}

.service-dashboard-tab {
    position: relative;
    display: grid;
    width: min(220px, 100%);
    min-height: 58px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--sg-line);
    border-bottom: 3px solid var(--sg-line-strong);
    border-radius: 7px 7px 3px 3px;
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    font: inherit;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.service-dashboard-tab:hover {
    border-color: var(--sg-cyan);
    background: rgba(0, 207, 232, 0.055);
}

.service-dashboard-tab.is-active {
    border-color: var(--sg-cyan);
    border-bottom-color: var(--sg-cyan-deep);
    background: rgba(0, 207, 232, 0.09);
    box-shadow: 0 6px 16px rgba(8, 20, 38, 0.08);
}

.service-dashboard-tab:focus-visible {
    outline: 3px solid rgba(0, 207, 232, 0.3);
    outline-offset: 2px;
}

.service-dashboard-tab-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 5px;
    background: rgba(0, 207, 232, 0.1);
    color: var(--sg-cyan-deep);
    font-size: 0.7rem;
}

.service-dashboard-tab-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.service-dashboard-tab-copy strong,
.service-dashboard-tab-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-dashboard-tab-copy strong {
    color: inherit;
    font-size: 0.72rem;
    line-height: 1.25;
}

.service-dashboard-tab-copy small {
    color: var(--sg-ink-600);
    font-size: 0.59rem;
    line-height: 1.25;
}

.service-dashboard-tab-signals {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--sg-ink-500);
    font-size: 0.58rem;
}

.service-dashboard-tab-signals em {
    display: grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sg-coral);
    color: #ffffff;
    font-style: normal;
    font-weight: 900;
    place-items: center;
}

.service-dashboard-tab-selected {
    color: var(--sg-cyan-deep);
}

.service-dashboard-tabs-empty {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px dashed var(--sg-line-strong);
    border-radius: 6px;
    background: var(--sg-paper-muted);
    color: var(--sg-ink-600);
    font-size: 0.68rem;
}

.service-dashboard-tabs-empty > i {
    color: var(--sg-cyan-deep);
}

.service-stage-filter {
    display: grid;
    gap: 4px;
    min-width: 150px;
}

.service-stage-filter > span {
    color: var(--sg-ink-600);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-stage-filter select {
    min-height: 42px;
    padding: 8px 34px 8px 11px;
    border: 1px solid var(--sg-line);
    border-radius: 9px;
    background: var(--sg-paper);
    color: var(--sg-ink-950);
    font: inherit;
}

.service-column-stage {
    white-space: nowrap;
}

.service-view-empty {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px dashed var(--sg-line-strong);
    border-radius: 7px;
    background: var(--sg-paper);
}

.service-view-empty > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    background: rgba(0, 207, 232, 0.1);
    color: var(--sg-cyan-deep);
}

.service-view-empty > div {
    display: grid;
    gap: 2px;
}

.service-view-empty strong,
.service-view-library-note strong {
    color: var(--sg-ink-950);
}

.service-view-library-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-left: 3px solid var(--sg-cyan);
    background: rgba(0, 207, 232, 0.055);
}

.service-view-library-note > i {
    margin-top: 3px;
    color: var(--sg-cyan-deep);
}

[data-theme="dark"] .main:has(.dashboard-studio-shell) .service-view-library,
[data-theme="dark"] .service-dashboard-tab,
[data-theme="dark"] .service-view-empty {
    border-color: var(--sg-line);
    background: var(--sg-paper);
}

[data-theme="dark"] .service-dashboard-tabs-empty {
    background: var(--sg-paper-muted);
}

[data-theme="dark"] .service-dashboard-tab.is-active {
    border-color: var(--sg-cyan);
    background: rgba(0, 207, 232, 0.14);
}

[data-theme="dark"] .service-stage-filter select {
    border-color: var(--sg-line);
    background: var(--sg-paper);
    color: var(--sg-ink-950);
}

@media (max-width: 760px) {
    .main:has(.dashboard-studio-shell) .service-view-library {
        gap: 14px;
        padding: 12px;
    }

    .main:has(.dashboard-studio-shell) .service-view-library-heading {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .service-view-library-heading > .btn {
        width: 100%;
        justify-content: center;
    }

    .service-view-library-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-view-library-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .service-dashboard-tablist {
        display: flex;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 9px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 5px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .service-dashboard-tab {
        width: auto;
        flex: 0 0 min(76vw, calc(100% - 24px), 270px);
        min-width: min(76vw, calc(100% - 24px), 270px);
        scroll-snap-align: start;
    }

    .service-stage-filter {
        width: 100%;
    }

    .service-view-empty {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .service-view-empty > .btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}

/* Keep the compact dashboard picker intact after the legacy Service responsive
   rules above. This is the current Service header contract. */
.dashboard-studio-shell .service-board-hero-actions {
    display: grid;
    min-width: min(100%, 360px);
    gap: 9px;
    justify-items: end;
}

.dashboard-studio-shell .service-board-picker-row {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(220px, 1fr) 42px 42px;
    align-items: end;
    gap: 7px;
}

.dashboard-studio-shell .service-board-picker {
    width: 100%;
    min-width: 0;
}

.dashboard-studio-shell .service-board-output-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 760px) {
    .dashboard-studio-shell .service-board-hero-actions {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    .dashboard-studio-shell .service-board-picker-row {
        grid-template-columns: minmax(0, 1fr) 42px 42px;
    }

    .dashboard-studio-shell .service-board-picker select {
        width: 100%;
        min-width: 0;
    }

    .equipment-edit-dialog .equipment-edit-dialog-body {
        padding: 8px !important;
        scrollbar-gutter: auto;
    }

    .equipment-edit-dialog .equipment-edit-dialog-body::-webkit-scrollbar {
        width: 6px;
    }
}