/* Driver Portal — Mobile-first light theme
   Sycamore green: #2E7D32, background: #F5F5F5, cards: #FFFFFF */

:root {
    --dp-green: #2E7D32;
    --dp-green-light: #4CAF50;
    --dp-green-bg: rgba(46,125,50,0.08);
    --dp-green-bg-strong: rgba(46,125,50,0.15);
    --dp-bg: #F5F5F5;
    --dp-card: #FFFFFF;
    --dp-text: #1A1A1A;
    --dp-text-secondary: #666666;
    --dp-text-muted: #999999;
    --dp-border: #E0E0E0;
    --dp-danger: #D32F2F;
    --dp-warning: #F57C00;
    --dp-radius: 12px;
    --dp-bottom-nav-height: 64px;
    --dp-topbar-height: 57px;  /* 12px pad + 32px logo + 12px pad + 1px border */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    background: var(--dp-bg);
    color: var(--dp-text);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */

.dp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--dp-card);
    border-bottom: 1px solid var(--dp-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.dp-topbar-logo {
    height: 32px;
    width: auto;
}

.dp-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--dp-text-secondary);
}

.dp-topbar-right a {
    color: var(--dp-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

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

.dp-main {
    padding: 16px;
    padding-bottom: calc(var(--dp-bottom-nav-height) + 24px);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.dp-card {
    background: var(--dp-card);
    border-radius: var(--dp-radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dp-card-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dp-text-muted);
    margin-bottom: 12px;
}

/* ── Days Safe hero card ────────────────────────────────────────────────── */

.dp-days-safe {
    background: linear-gradient(135deg, var(--dp-green) 0%, #1B5E20 100%);
    color: #FFFFFF;
    border-radius: var(--dp-radius);
    padding: 28px 24px;
    margin-bottom: 16px;
    text-align: center;
}

.dp-days-safe-count {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.dp-days-safe-label {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 12px;
}

.dp-days-safe-since {
    font-size: 13px;
    opacity: 0.7;
}

/* Milestone markers */
.dp-milestones {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.dp-milestone {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
}

.dp-milestone.reached {
    background: rgba(255,255,255,0.3);
    color: #FFFFFF;
}

.dp-milestone.next {
    background: rgba(255,255,255,0.2);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.4);
}

/* ── Bottom nav bar ─────────────────────────────────────────────────────── */

.dp-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--dp-bottom-nav-height);
    background: var(--dp-card);
    border-top: 1px solid var(--dp-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.dp-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--dp-text-muted);
    font-size: 10px;
    font-weight: 600;
    padding: 8px 12px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.dp-nav-item.active {
    color: var(--dp-green);
}

.dp-nav-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.dp-nav-icon {
    font-size: 22px;
    line-height: 1;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.dp-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 16px; /* prevents iOS zoom */
    border: 1px solid var(--dp-border);
    border-radius: 8px;
    background: var(--dp-card);
    color: var(--dp-text);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

.dp-input:focus {
    border-color: var(--dp-green);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
}

.dp-input-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-bottom: 6px;
}

.dp-input-group {
    margin-bottom: 16px;
}

.dp-btn {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.dp-btn:active { transform: scale(0.98); }

.dp-btn-primary {
    background: var(--dp-green);
    color: #FFFFFF;
}

.dp-btn-primary:hover { opacity: 0.9; }

.dp-btn-ghost {
    background: transparent;
    color: var(--dp-green);
    border: 1px solid var(--dp-border);
}

/* ── Auth pages (login, setup, forgot/reset) ────────────────────────────── */

.dp-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--dp-bg);
}

.dp-auth-card {
    background: var(--dp-card);
    border-radius: var(--dp-radius);
    padding: 32px 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dp-auth-logo {
    display: block;
    margin: 0 auto 24px;
    height: 64px;
    width: auto;
}

.dp-auth-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    color: var(--dp-text);
}

.dp-auth-subtitle {
    font-size: 14px;
    text-align: center;
    color: var(--dp-text-secondary);
    margin-bottom: 24px;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */

.dp-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.dp-alert-error {
    background: rgba(211,47,47,0.08);
    color: var(--dp-danger);
    border: 1px solid rgba(211,47,47,0.2);
}

.dp-alert-success {
    background: rgba(46,125,50,0.08);
    color: var(--dp-green);
    border: 1px solid rgba(46,125,50,0.2);
}

.dp-alert-info {
    background: rgba(25,118,210,0.08);
    color: #1976D2;
    border: 1px solid rgba(25,118,210,0.2);
}

/* ── Coming soon placeholder ────────────────────────────────────────────── */

.dp-coming-soon {
    text-align: center;
    padding: 32px 20px;
    color: var(--dp-text-secondary);
}

.dp-coming-soon-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.dp-coming-soon h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dp-text);
    margin-bottom: 8px;
}

.dp-coming-soon p {
    font-size: 14px;
    line-height: 1.6;
}

/* ── Link styles ────────────────────────────────────────────────────────── */

.dp-link {
    color: var(--dp-green);
    text-decoration: none;
    font-weight: 600;
}

.dp-link:hover { text-decoration: underline; }

/* ── Utility ────────────────────────────────────────────────────────────── */

.dp-text-center { text-align: center; }
.dp-mt-8 { margin-top: 8px; }
.dp-mt-16 { margin-top: 16px; }
.dp-mt-24 { margin-top: 24px; }
.dp-mb-8 { margin-bottom: 8px; }
.dp-mb-16 { margin-bottom: 16px; }

.dp-password-requirements {
    font-size: 12px;
    color: var(--dp-text-muted);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — Dashboard, Schedule, Metrics, Profile
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tier badge colors ─────────────────────────────────────────────────── */

:root {
    --dp-tier-top:     #D4A017;
    --dp-tier-top-bg:  rgba(212,160,23,0.12);
    --dp-tier-exc:     #2E7D32;
    --dp-tier-exc-bg:  rgba(46,125,50,0.10);
    --dp-tier-sat:     #1976D2;
    --dp-tier-sat-bg:  rgba(25,118,210,0.10);
    --dp-tier-under:   #E65100;
    --dp-tier-under-bg:rgba(230,81,0,0.10);
    --dp-tier-poor:    #C62828;
    --dp-tier-poor-bg: rgba(198,40,40,0.10);
}

/* ── Dashboard hero row: tier + days safe ──────────────────────────────── */

.dp-hero-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.dp-hero-row > * {
    flex: 1;
    min-width: 0;
}

/* ── Tier badge card ───────────────────────────────────────────────────── */

.dp-tier-card {
    border-radius: var(--dp-radius);
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dp-tier-card.top_tier    { background: var(--dp-tier-top-bg); border: 2px solid var(--dp-tier-top); }
.dp-tier-card.excellent   { background: var(--dp-tier-exc-bg); border: 2px solid var(--dp-tier-exc); }
.dp-tier-card.satisfactory{ background: var(--dp-tier-sat-bg); border: 2px solid var(--dp-tier-sat); }
.dp-tier-card.underperforming { background: var(--dp-tier-under-bg); border: 2px solid var(--dp-tier-under); }
.dp-tier-card.poor        { background: var(--dp-tier-poor-bg); border: 2px solid var(--dp-tier-poor); }
.dp-tier-card.none        { background: var(--dp-card); border: 2px solid var(--dp-border); }

.dp-tier-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 8px;
}

.dp-tier-label {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dp-tier-card.top_tier .dp-tier-label    { color: var(--dp-tier-top); }
.dp-tier-card.excellent .dp-tier-label   { color: var(--dp-tier-exc); }
.dp-tier-card.satisfactory .dp-tier-label{ color: var(--dp-tier-sat); }
.dp-tier-card.underperforming .dp-tier-label { color: var(--dp-tier-under); }
.dp-tier-card.poor .dp-tier-label        { color: var(--dp-tier-poor); }
.dp-tier-card.none .dp-tier-label        { color: var(--dp-text-muted); }

.dp-tier-sub {
    font-size: 11px;
    color: var(--dp-text-muted);
    margin-top: 4px;
}

/* ── Days safe compact (for hero row) ──────────────────────────────────── */

.dp-days-safe-compact {
    background: linear-gradient(135deg, var(--dp-green) 0%, #1B5E20 100%);
    color: #FFFFFF;
    border-radius: var(--dp-radius);
    padding: 24px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dp-days-safe-compact .dp-days-safe-count {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2px;
}

.dp-days-safe-compact .dp-days-safe-label {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 0;
}

/* ── Quick glance card ─────────────────────────────────────────────────── */

.dp-quick-glance {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dp-quick-glance-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-green-bg);
    border-radius: 10px;
    flex-shrink: 0;
}

.dp-quick-glance-text {
    flex: 1;
    min-width: 0;
}

.dp-quick-glance-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dp-text);
    margin-bottom: 2px;
}

.dp-quick-glance-detail {
    font-size: 13px;
    color: var(--dp-text-secondary);
}

/* ── Activity / coaching items ─────────────────────────────────────────── */

.dp-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dp-border);
}

.dp-activity-item:last-child { border-bottom: none; }

.dp-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.dp-activity-dot.open     { background: var(--dp-warning); }
.dp-activity-dot.completed{ background: var(--dp-green); }
.dp-activity-dot.dismissed{ background: var(--dp-text-muted); }

.dp-activity-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--dp-text);
}

.dp-activity-meta {
    font-size: 12px;
    color: var(--dp-text-muted);
    margin-top: 2px;
}

/* ── Schedule page ─────────────────────────────────────────────────────── */

.dp-schedule-card {
    background: var(--dp-card);
    border-radius: var(--dp-radius);
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 4px solid var(--dp-border);
    transition: opacity 0.15s;
}

.dp-schedule-card.today {
    border-left-color: var(--dp-green);
    background: var(--dp-green-bg);
}

.dp-schedule-card.past {
    opacity: 0.55;
}

.dp-schedule-card.upcoming {
    border-left-color: var(--dp-green-light);
}

.dp-schedule-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--dp-text);
    margin-bottom: 6px;
}

.dp-schedule-date .day-name {
    color: var(--dp-text-secondary);
    font-weight: 600;
}

.dp-schedule-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 13px;
    color: var(--dp-text-secondary);
}

.dp-schedule-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dp-schedule-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 8px;
}

.dp-schedule-tag.today-tag   { background: var(--dp-green-bg-strong); color: var(--dp-green); }
.dp-schedule-tag.absent      { background: rgba(211,47,47,0.10); color: var(--dp-danger); }
.dp-schedule-tag.vto         { background: rgba(25,118,210,0.10); color: #1976D2; }
.dp-schedule-tag.pto         { background: rgba(156,39,176,0.10); color: #9C27B0; }

.dp-schedule-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--dp-text-muted);
}

.dp-schedule-empty-icon {
    font-size: 48px;
    opacity: 0.4;
    margin-bottom: 12px;
}

/* ── Metrics page ──────────────────────────────────────────────────────── */

/* Large tier badge for metrics */
.dp-tier-hero {
    text-align: center;
    padding: 28px 20px;
}

.dp-tier-hero-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 10px;
}

.dp-tier-hero-label {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dp-tier-hero-sub {
    font-size: 12px;
    color: var(--dp-text-muted);
    margin-top: 6px;
}

/* Dimension indicators */
.dp-dimensions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dp-dim-item {
    background: var(--dp-card);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dp-dim-arrow {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.dp-dim-arrow.improving { background: rgba(46,125,50,0.12); color: var(--dp-green); }
.dp-dim-arrow.stable    { background: rgba(158,158,158,0.15); color: #757575; }
.dp-dim-arrow.declining { background: rgba(245,124,0,0.12); color: var(--dp-warning); }

.dp-dim-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dp-text);
}

.dp-dim-status {
    font-size: 11px;
    color: var(--dp-text-muted);
    margin-top: 1px;
}

/* Progress bar for days safe milestone */
.dp-progress-bar {
    height: 8px;
    background: var(--dp-border);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}

.dp-progress-fill {
    height: 100%;
    background: var(--dp-green);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.dp-milestone-target {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dp-text-muted);
    margin-top: 6px;
}

/* Stat row (alerts, attendance) */
.dp-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--dp-border);
}

.dp-stat-row:last-child { border-bottom: none; }

.dp-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dp-text);
}

.dp-stat-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
}

.dp-direction {
    font-size: 14px;
    font-weight: 700;
}

.dp-direction.improving { color: var(--dp-green); }
.dp-direction.stable    { color: #9E9E9E; }
.dp-direction.declining { color: var(--dp-warning); }

/* ── Profile page ──────────────────────────────────────────────────────── */

.dp-profile-header {
    text-align: center;
    padding: 24px 20px;
}

.dp-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--dp-green-bg-strong);
    color: var(--dp-green);
    font-size: 28px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.dp-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--dp-text);
}

.dp-profile-station {
    font-size: 14px;
    color: var(--dp-text-secondary);
    margin-top: 4px;
}

.dp-info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--dp-border);
    font-size: 14px;
}

.dp-info-row:last-child { border-bottom: none; }

.dp-info-label {
    color: var(--dp-text-secondary);
    font-weight: 500;
}

.dp-info-value {
    color: var(--dp-text);
    font-weight: 600;
    text-align: right;
}

/* ── Section divider ───────────────────────────────────────────────────── */

.dp-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-text-muted);
    margin: 24px 0 12px;
}

.dp-section-title:first-child { margin-top: 0; }

/* ── Empty state ───────────────────────────────────────────────────────── */

.dp-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--dp-text-muted);
    font-size: 14px;
}

.dp-empty-icon {
    font-size: 40px;
    opacity: 0.4;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2B — Coaching Acknowledgments
   ═══════════════════════════════════════════════════════════════════════════ */

.dp-coaching-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.dp-coaching-badge-pending {
    background: rgba(245,124,0,0.12);
    color: var(--dp-warning);
}

.dp-coaching-badge-acked {
    background: rgba(46,125,50,0.10);
    color: var(--dp-green);
}

.dp-coaching-badge-completed {
    background: rgba(25,118,210,0.10);
    color: #1976D2;
}

.dp-coaching-badge-expired {
    background: rgba(158,158,158,0.10);
    color: #9E9E9E;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2B — News Feed
   ═══════════════════════════════════════════════════════════════════════════ */

/* Category filter tabs */
.dp-news-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

.dp-news-tab {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--dp-text-secondary);
    background: var(--dp-card);
    border: 1px solid var(--dp-border);
    transition: all 0.15s;
}

.dp-news-tab.active {
    background: var(--dp-green);
    color: #FFFFFF;
    border-color: var(--dp-green);
}

.dp-news-tab:not(.active):hover {
    border-color: var(--dp-green);
    color: var(--dp-green);
}

/* Post cards */
.dp-news-post {
    cursor: pointer;
    transition: box-shadow 0.15s;
    position: relative;
}

.dp-news-post:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.dp-news-unread {
    border-left: 3px solid var(--dp-green);
}

.dp-news-urgent {
    border-left: 3px solid var(--dp-danger) !important;
    background: rgba(211,47,47,0.03);
}

.dp-news-high {
    border-left: 3px solid var(--dp-warning) !important;
}

.dp-news-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dp-green);
    flex-shrink: 0;
    margin-top: 6px;
    position: relative;
}

.dp-news-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dp-text);
    margin-bottom: 4px;
}

.dp-news-title.unread {
    font-weight: 800;
}

.dp-news-body {
    font-size: 13px;
    color: var(--dp-text-secondary);
    line-height: 1.5;
    margin-bottom: 6px;
}

.dp-news-meta {
    font-size: 12px;
    color: var(--dp-text-muted);
}

/* Category badges */
.dp-news-category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dp-news-cat-weather    { background: rgba(25,118,210,0.10); color: #1976D2; }
.dp-news-cat-safety     { background: rgba(211,47,47,0.10); color: #D32F2F; }
.dp-news-cat-policy     { background: rgba(156,39,176,0.10); color: #9C27B0; }
.dp-news-cat-general    { background: rgba(158,158,158,0.10); color: #757575; }
.dp-news-cat-operations { background: rgba(245,124,0,0.10); color: #F57C00; }

/* Priority badges */
.dp-news-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.dp-news-priority-badge.urgent {
    background: rgba(211,47,47,0.15);
    color: #D32F2F;
}

.dp-news-priority-badge.high {
    background: rgba(245,124,0,0.12);
    color: #F57C00;
}

/* ===== CHAT STYLES (Phase 3B — CC-B) ===== */

/* Room list */
.dp-chat-room-group {
    margin-bottom: 16px;
}
.dp-chat-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dp-text-muted);
    letter-spacing: 0.05em;
    padding: 0 4px 6px;
}
.dp-chat-room-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--dp-card-bg);
    border-radius: 10px;
    margin-bottom: 6px;
    text-decoration: none;
    color: var(--dp-text);
    border: 1px solid var(--dp-border);
    transition: background 0.15s;
}
.dp-chat-room-card:active {
    background: var(--dp-bg-hover);
}
.dp-chat-room-card.announcements {
    border-left: 3px solid var(--dp-primary);
}
.dp-chat-room-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.dp-chat-room-info {
    flex: 1;
    min-width: 0;
}
.dp-chat-room-name {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dp-chat-room-preview {
    font-size: 12px;
    color: var(--dp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.dp-chat-room-time {
    font-size: 11px;
    color: var(--dp-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}
.dp-chat-readonly-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(46,125,50,0.12);
    color: var(--dp-primary);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3A — AI Assistant Chat, Tickets, Policies, FAB
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Floating Action Button ─────────────────────────────────────────────── */
.dp-fab {
    position: fixed;
    bottom: calc(var(--dp-bottom-nav-height) + 16px);
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dp-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 50;
    transition: transform 0.2s, box-shadow 0.2s;
}
.dp-fab:active { transform: scale(0.92); }
.dp-fab.active { background: #1B5E20; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

/* Hide FAB on chat pages — it overlaps the input bar */
.dp-main-chat ~ .dp-fab { display: none; }

/* ── AI Chat container ──────────────────────────────────────────────────── */
/* Full-viewport chat layout — used by assistant + chat room pages.
   position:fixed pins the content area between topbar and bottom nav,
   avoiding 100vh mobile browser-chrome issues entirely. */
.dp-main.dp-main-chat {
    position: fixed;
    top: var(--dp-topbar-height);
    left: 0;
    right: 0;
    bottom: calc(var(--dp-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding: 0;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dp-main.dp-main-chat .dp-chat-container,
.dp-main.dp-main-chat .dp-chatroom-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.dp-chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}
.dp-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--dp-card);
    border-bottom: 1px solid var(--dp-border);
    border-radius: var(--dp-radius) var(--dp-radius) 0 0;
    flex-shrink: 0;
}
.dp-chat-header-icon { font-size: 28px; }
.dp-chat-new-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--dp-border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dp-chat-new-btn:active { background: var(--dp-bg); }

.dp-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
}

/* ── Chat bubbles ───────────────────────────────────────────────────────── */
.dp-chat-bubble { max-width: 85%; }
.dp-chat-bubble.driver { align-self: flex-end; }
.dp-chat-bubble.ai { align-self: flex-start; }

.dp-chat-bubble-content {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.dp-chat-bubble.driver .dp-chat-bubble-content {
    background: var(--dp-green);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.dp-chat-bubble.ai .dp-chat-bubble-content {
    background: var(--dp-card);
    border: 1px solid var(--dp-border);
    border-bottom-left-radius: 4px;
}

/* Typing indicator */
.dp-typing { display: flex; gap: 4px; padding: 10px 18px !important; }
.dp-typing span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dp-text-muted);
    animation: dp-typing-bounce 1.2s infinite;
}
.dp-typing span:nth-child(2) { animation-delay: 0.2s; }
.dp-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dp-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Chat input ─────────────────────────────────────────────────────────── */
.dp-chat-input-area {
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--dp-card);
    border-top: 1px solid var(--dp-border);
    flex-shrink: 0;
}
.dp-chat-input-row { display: flex; gap: 8px; }
/* 16px, not 14 — iOS auto-zooms any focused input under 16px, and the viewport
   no longer suppresses that with user-scalable=no. Same reason .dp-input is 16. */
.dp-chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--dp-border);
    border-radius: 20px;
    font-size: 16px;
    outline: none;
    background: var(--dp-bg);
}
.dp-chat-input:focus { border-color: var(--dp-green); }
.dp-chat-send-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--dp-green);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dp-chat-send-btn:disabled { opacity: 0.5; cursor: default; }
.dp-chat-footer-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}
.dp-chat-footer-links a {
    font-size: 12px;
    color: var(--dp-green);
    text-decoration: none;
}

/* ── Chat ticket banner ─────────────────────────────────────────────────── */
.dp-chat-ticket-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #E8F5E9;
    font-size: 13px;
    color: var(--dp-green);
    flex-shrink: 0;
}
.dp-chat-ticket-banner a { color: #1B5E20; font-weight: 600; }

/* ── Tickets ────────────────────────────────────────────────────────────── */
.dp-filter-row {
    display: flex;
    gap: 6px;
    padding: 0 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dp-filter-chip {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    color: var(--dp-text-secondary);
    background: var(--dp-card);
    border: 1px solid var(--dp-border);
}
.dp-filter-chip.active {
    background: var(--dp-green);
    color: #fff;
    border-color: var(--dp-green);
}

.dp-ticket-card {
    display: block;
    text-decoration: none;
    color: var(--dp-text);
    margin-bottom: 8px;
}
.dp-ticket-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dp-ticket-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dp-ticket-status-dot.open { background: #D32F2F; }
.dp-ticket-status-dot.in_progress { background: #F57C00; }
.dp-ticket-status-dot.waiting_on_driver { background: #1976D2; }
.dp-ticket-status-dot.resolved { background: #2E7D32; }
.dp-ticket-status-dot.closed { background: #999; }

.dp-ticket-info { flex: 1; min-width: 0; }
.dp-ticket-subject {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-ticket-meta {
    font-size: 12px;
    color: var(--dp-text-muted);
    margin-top: 2px;
}

.dp-ticket-status-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.dp-ticket-status-badge.open { background: #FFEBEE; color: #C62828; }
.dp-ticket-status-badge.in_progress { background: #FFF3E0; color: #E65100; }
.dp-ticket-status-badge.waiting_on_driver { background: #E3F2FD; color: #1565C0; }
.dp-ticket-status-badge.resolved { background: #E8F5E9; color: #1B5E20; }
.dp-ticket-status-badge.closed { background: #F5F5F5; color: #666; }

.dp-ticket-category-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--dp-green-bg);
    color: var(--dp-green);
}
.dp-ticket-priority-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
}
.dp-ticket-priority-badge.urgent { background: #FFEBEE; color: #C62828; }
.dp-ticket-priority-badge.high { background: #FFF3E0; color: #E65100; }

/* ── Ticket thread ──────────────────────────────────────────────────────── */
.dp-ticket-thread { display: flex; flex-direction: column; gap: 8px; }
.dp-ticket-msg {
    padding: 12px;
    border-radius: var(--dp-radius);
}
.dp-ticket-msg.driver { background: var(--dp-card); border: 1px solid var(--dp-border); }
.dp-ticket-msg.admin { background: #E8F5E9; }
.dp-ticket-msg.ai { background: #E3F2FD; }
.dp-ticket-msg.system { background: #FFF3E0; font-size: 13px; }

.dp-ticket-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.dp-ticket-msg-sender { font-weight: 600; font-size: 13px; }
.dp-ticket-msg-time { font-size: 11px; color: var(--dp-text-muted); }
.dp-ticket-msg-body { font-size: 14px; white-space: pre-wrap; }

/* ── Textarea ───────────────────────────────────────────────────────────── */
.dp-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}
.dp-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ── Policy cards ───────────────────────────────────────────────────────── */
.dp-policy-card {
    display: block;
    text-decoration: none;
    color: var(--dp-text);
    margin-bottom: 8px;
}
.dp-policy-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.dp-policy-summary { font-size: 13px; color: var(--dp-text-secondary); margin-bottom: 4px; }
.dp-policy-meta { font-size: 11px; color: var(--dp-text-muted); }
.dp-policy-content { font-size: 14px; line-height: 1.6; }
.dp-policy-content h1, .dp-policy-content h2, .dp-policy-content h3 {
    margin-top: 16px; margin-bottom: 8px;
}
.dp-policy-content ul, .dp-policy-content ol { padding-left: 20px; margin-bottom: 12px; }

/* ── Help card ──────────────────────────────────────────────────────────── */
.dp-help-card {
    text-decoration: none;
    color: var(--dp-text);
    display: block;
}
.dp-help-card .dp-quick-glance { align-items: center; }

/* ── Small button ───────────────────────────────────────────────────────── */
.dp-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 8px;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Metrics Accordion Drill-Downs
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override grid layout: stack cards in a single column for accordion wraps */
.dp-dimensions { grid-template-columns: 1fr; }

.dp-dim-wrap { margin-bottom: 0; }

.dp-dim-tappable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.dp-dim-tappable:active { background: rgba(0,0,0,0.03); }

.dp-dim-chevron {
    font-size: 20px;
    font-weight: 700;
    color: var(--dp-text-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.dp-dim-chevron.open { transform: rotate(90deg); }

/* Accordion panel */
.dp-dim-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.dp-dim-panel-inner {
    padding: 0 16px 16px;
}

.dp-dim-loading {
    text-align: center;
    padding: 16px 0;
    font-size: 13px;
    color: var(--dp-text-muted);
}
.dp-dim-empty {
    text-align: center;
    padding: 20px 0;
    font-size: 13px;
    color: var(--dp-text-muted);
}

/* ── Accordion shared sub-components ─────────────────────────────────────── */

.dp-acc-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-text-muted);
    margin: 14px 0 6px;
}
.dp-acc-label:first-child { margin-top: 0; }

/* Stat rows (label + value) */
.dp-acc-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: #1a1a1a;
    border-bottom: 1px solid var(--dp-border);
}
.dp-acc-stat-row:last-child { border-bottom: none; }

.dp-acc-val { font-weight: 700; font-size: 14px; color: #1a1a1a; }
.dp-acc-val.good { color: var(--dp-green); }
.dp-acc-val.warn { color: var(--dp-warning); }
.dp-acc-val.bad { color: var(--dp-danger); }

/* ── Bar chart (safety alerts) ───────────────────────────────────────────── */
.dp-acc-bar-chart { margin-bottom: 4px; }
.dp-acc-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.dp-acc-bar-label {
    font-size: 12px;
    color: var(--dp-text-secondary);
    min-width: 40px;
    text-align: right;
}
.dp-acc-bar-track {
    flex: 1;
    height: 14px;
    background: var(--dp-border);
    border-radius: 7px;
    overflow: hidden;
}
.dp-acc-bar-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.4s ease;
}
.dp-acc-bar-fill.warn { background: var(--dp-warning); }
.dp-acc-bar-fill.good { background: var(--dp-green); }
.dp-acc-bar-val {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    min-width: 24px;
}

/* ── Trend row (quality/performance weekly cells) ────────────────────────── */
.dp-acc-trend-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}
.dp-acc-trend-cell {
    flex: 1;
    text-align: center;
    background: var(--dp-bg);
    border-radius: 8px;
    padding: 8px 4px;
}
.dp-acc-trend-week {
    font-size: 10px;
    font-weight: 600;
    color: var(--dp-text-muted);
    margin-bottom: 2px;
}
.dp-acc-trend-val {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}
.dp-acc-trend-val.good { color: var(--dp-green); }
.dp-acc-trend-val.warn { color: var(--dp-warning); }
.dp-acc-trend-val.bad { color: var(--dp-danger); }
.dp-acc-trend-tier {
    font-size: 10px;
    color: var(--dp-text-secondary);
    margin-top: 1px;
}

/* ── Stats grid (attendance summary) ─────────────────────────────────────── */
.dp-acc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.dp-acc-stat-box {
    text-align: center;
    background: var(--dp-bg);
    border-radius: 8px;
    padding: 10px 4px;
}
.dp-acc-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
}
.dp-acc-stat-num.good { color: var(--dp-green); }
.dp-acc-stat-num.bad { color: var(--dp-danger); }
.dp-acc-stat-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--dp-text-muted);
    margin-top: 2px;
}

/* ── Attendance calendar grid ────────────────────────────────────────────── */
.dp-acc-att-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.dp-acc-att-cell {
    text-align: center;
    padding: 6px 2px;
    border-radius: 6px;
    background: var(--dp-bg);
}
.dp-acc-att-cell.present { background: rgba(46,125,50,0.08); }
.dp-acc-att-cell.absent { background: rgba(211,47,47,0.08); }
.dp-acc-att-cell.off { background: rgba(158,158,158,0.08); }

.dp-acc-att-day {
    font-size: 9px;
    font-weight: 600;
    color: var(--dp-text-muted);
}
.dp-acc-att-date {
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
}
.dp-acc-att-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 3px auto 0;
}
.dp-acc-att-dot.present { background: var(--dp-green); }
.dp-acc-att-dot.absent { background: var(--dp-danger); }
.dp-acc-att-dot.off { background: #9E9E9E; }

.dp-acc-att-lbl {
    font-size: 8px;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-top: 1px;
}

/* ── Score trend (performance composite) ─────────────────────────────────── */
.dp-acc-score-trend {
    display: flex;
    gap: 4px;
}
.dp-acc-score-cell {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    background: var(--dp-bg);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 36px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Operator preview banner
   ═══════════════════════════════════════════════════════════════════════════ */

.dp-preview-banner {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #B35A00;
    color: #FFFFFF;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* One line. Only the NAME truncates: the read-only tag and the Exit link are
   both flex-shrink:0, so no length of driver name can ellipsise the rule away
   or push Exit out of reach. */
.dp-preview-tag {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    padding: 2px 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.dp-preview-who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: auto;
}

.dp-preview-banner > a {
    flex-shrink: 0;
}

.dp-preview-banner a {
    color: #FFFFFF;
    text-decoration: underline;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Desktop — frame the app, don't stretch it
   ═══════════════════════════════════════════════════════════════════════════

   This stylesheet had NO media queries at all: it is mobile-first with nothing
   said about wide viewports. On a phone that is fine, because every constraint
   below is wider than the screen. On a laptop the result is a stretched web
   page — `.dp-bottom-nav` (fixed, left:0 right:0) and `.dp-fab` pin to the
   VIEWPORT rather than to the content column, so the nav spans the whole
   display while the content sits in a narrow strip.

   It shows worst inside operator preview: the Metrics tab is a Next.js page
   which already frames itself to 390px, so navigating flips between a phone
   frame and a full-bleed page on alternate tabs.

   390px matches frontend/src/app/driver/layout.tsx exactly, deliberately —
   two frames that disagree are the same bug in a subtler form.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    :root {
        --dp-frame-width: 390px;
    }

    /* Surround, so the column reads as a device rather than a column. */
    html, body {
        background: #E4E1DA;
    }

    .dp-preview-banner,
    .dp-topbar,
    .dp-main {
        max-width: var(--dp-frame-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* The app column itself keeps the in-app background. */
    .dp-main {
        background: var(--dp-bg);
        min-height: calc(100vh - var(--dp-topbar-height));
        border-left: 1px solid var(--dp-border);
        border-right: 1px solid var(--dp-border);
    }

    .dp-topbar {
        border-left: 1px solid var(--dp-border);
        border-right: 1px solid var(--dp-border);
    }

    /* Fixed elements are positioned against the viewport, so each one has to be
       re-centred on the column by hand — there is no containing block to
       inherit from. */
    .dp-bottom-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: var(--dp-frame-width);
        border-left: 1px solid var(--dp-border);
        border-right: 1px solid var(--dp-border);
    }

    .dp-fab {
        right: calc(50% - (var(--dp-frame-width) / 2) + 16px);
    }

    /* Chat pins itself between topbar and nav with position:fixed and
       max-width:100%; both need overriding or it escapes the frame. */
    .dp-main.dp-main-chat {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: var(--dp-frame-width);
        max-width: var(--dp-frame-width);
        min-height: 0;
    }
}

/* ══ ENGAGEMENT LANDING PAGE ═════════════════════════════════════════════════
   Added 2026-08-11 for the gamification skeleton (stars / streaks / tier /
   leaderboard).

   NO NEW HEX LITERALS. Every colour below resolves to a --dp-* variable already
   defined at the top of this file. Where a fill needs to be lighter than an
   existing variable it uses color-mix() against --dp-card, so it still derives
   from a defined token rather than introducing a value.

   NO RED. Three-colour discipline puts a failing metric in amber and reserves
   red for destructive states, so grade badges run green -> amber and never touch
   --dp-danger. On a page whose job is motivation that is also the right call.

   ⚠ CONTRAST WAS MEASURED BY HAND, because scripts/audit-contrast.py does NOT
   read this file — it covers globals.css, equipment.css and wizard.css only, so
   the entire driver portal is invisible to it. Measuring caught five real
   failures in the first draft of this block:

     grade badge D/F   --dp-warning on its own 14% tint   2.36:1   FAIL
     provisional note  --dp-warning on its own 10% tint   2.45:1   FAIL
     leaderboard rank  --dp-text-muted on white          2.85:1   FAIL
     YOU badge         --dp-green on 15% green tint      4.21:1   FAIL
     grade badge A/B   --dp-green on 15% green tint      4.21:1   FAIL

   All four fixes derive from existing variables rather than introducing values:
   the muted token gave way to --dp-text-secondary (5.74:1), the 15% green tint
   to the 8% one (4.63:1), and amber text to the derived token below.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Amber TEXT, as distinct from amber FILL — the same two-weight split the
       Next token layer already makes between --risk-amber and
       --risk-amber-deep-tx. --dp-warning (#F57C00) is a fill: as text on its own
       tint it reaches only 2.36:1. Mixed 55% into --dp-text it reads 5.44:1 on
       the 14% tint and 5.65:1 on the 10% one, and still reads unmistakably amber.
       Derived from two defined variables, so it is not a new literal. */
    --dp-warning-tx: color-mix(in srgb, var(--dp-warning) 55%, var(--dp-text));
}

/* ── Stars: the lead block ───────────────────────────────────────────────── */

.dp-star-card {
    flex: 1;
    background: var(--dp-green-bg);
    border: 1px solid var(--dp-green);
    border-radius: var(--dp-radius);
    padding: 16px 12px;
    text-align: center;
}

.dp-star-count {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dp-green);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dp-star-icon { font-size: 24px; }

.dp-star-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--dp-green);
    margin-top: 4px;
}

.dp-star-sub {
    font-size: 11px;
    color: var(--dp-text-secondary);
    margin-top: 2px;
}

.dp-star-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dp-border);
}

.dp-star-row:last-child { border-bottom: none; padding-bottom: 0; }

.dp-star-row-icon { font-size: 18px; line-height: 1.3; }

.dp-star-row-text { flex: 1; min-width: 0; }

.dp-star-row-reason {
    font-size: 15px;
    font-weight: 600;
    color: var(--dp-text);
}

.dp-star-row-meta {
    font-size: 12px;
    color: var(--dp-text-secondary);
    margin-top: 1px;
}

/* ── Streaks ─────────────────────────────────────────────────────────────── */

.dp-streak { padding: 12px 0; border-bottom: 1px solid var(--dp-border); }
.dp-streak:last-child { border-bottom: none; padding-bottom: 0; }

.dp-streak-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.dp-streak-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--dp-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grade badge. Colour is never the only signal — the letter carries the meaning
   on its own, so this reads correctly in greyscale and to a colour-blind eye. */
.dp-grade {
    flex-shrink: 0;
    min-width: 30px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    background: var(--dp-border);
    color: var(--dp-text-secondary);
}

.dp-grade-a, .dp-grade-aplus, .dp-grade-aminus,
.dp-grade-b, .dp-grade-bplus, .dp-grade-bminus {
    background: var(--dp-green-bg);     /* not -strong: 15% tint drops green to 4.21:1 */
    color: var(--dp-green);
}

.dp-grade-c, .dp-grade-cplus, .dp-grade-cminus,
.dp-grade-d, .dp-grade-dplus, .dp-grade-dminus,
.dp-grade-f {
    background: color-mix(in srgb, var(--dp-warning) 14%, var(--dp-card));
    color: var(--dp-warning-tx);       /* 5.44:1 — the fill token reads 2.36:1 */
}

.dp-streak-track {
    height: 7px;
    border-radius: 6px;
    background: var(--dp-border);
    overflow: hidden;
}

.dp-streak-fill {
    height: 100%;
    border-radius: 6px;
    background: var(--dp-green-light);
    transition: width 240ms ease-out;
}

.dp-streak-fill.at-cap { background: var(--dp-green); }

.dp-streak-meta {
    font-size: 12px;
    color: var(--dp-text-secondary);
    margin-top: 5px;
}

.dp-provisional-note {
    font-size: 12px;
    color: var(--dp-warning-tx);       /* 5.65:1 — the fill token reads 2.45:1 */
    background: color-mix(in srgb, var(--dp-warning) 10%, var(--dp-card));
    border-radius: 8px;
    padding: 7px 9px;
    margin-bottom: 4px;
}

/* ── Tier progress ───────────────────────────────────────────────────────── */

.dp-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
}

.dp-tier-now-label {
    font-size: 22px;
    font-weight: 800;
    color: var(--dp-green);
    line-height: 1.15;
}

.dp-tier-now-sub, .dp-tier-next-sub {
    font-size: 11px;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

.dp-tier-next { text-align: right; flex-shrink: 0; }

.dp-tier-next-arrow {
    font-size: 15px;
    color: var(--dp-text-muted);
    line-height: 1;
}

.dp-tier-next-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--dp-text-secondary);
    margin-top: 2px;
}

.dp-tier-facts {
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--dp-border);
    padding-top: 12px;
}

.dp-tier-fact {
    flex: 1;
    background: var(--dp-green-bg);
    border-radius: 8px;
    padding: 9px 10px;
}

.dp-tier-fact-n {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--dp-green);
    line-height: 1.15;
}

.dp-tier-fact-l {
    display: block;
    font-size: 11px;
    color: var(--dp-text-secondary);
    margin-top: 1px;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */

.dp-card-header-note {
    float: right;
    font-weight: 600;
    color: var(--dp-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.dp-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    border-bottom: 1px solid var(--dp-border);
}

.dp-lb-row:last-child { border-bottom: none; }

/* The viewer's own row. Tinted AND labelled "you" — the tint alone would be the
   only carrier of the meaning. */
.dp-lb-row.me {
    background: var(--dp-green-bg);
    border-bottom-color: transparent;
}

.dp-lb-rank {
    flex-shrink: 0;
    width: 24px;
    font-size: 14px;
    font-weight: 800;
    color: var(--dp-text-secondary);   /* muted #999 is 2.85:1 at this size */
    text-align: center;
}

.dp-lb-row.me .dp-lb-rank { color: var(--dp-green); }

.dp-lb-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-lb-you {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dp-green);
    background: var(--dp-green-bg);     /* not -strong: 15% tint drops green to 4.21:1 */
    border-radius: 6px;
    padding: 1px 5px;
    margin-left: 4px;
}

.dp-lb-stars {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--dp-green);
}

.dp-lb-star-icon { font-size: 12px; }

.dp-lb-gap {
    text-align: center;
    color: var(--dp-text-muted);
    letter-spacing: 3px;
    padding: 2px 0 6px;
}

/* ── Shared empty state ──────────────────────────────────────────────────── */

.dp-empty-note {
    font-size: 13px;
    color: var(--dp-text-secondary);
    padding: 4px 0;
    line-height: 1.45;
}

/* The single focus card. Set apart with a left rule rather than a different fill
   or a fourth colour — it is the one ASK on a page of wins, so it needs to read
   as distinct without reading as a warning. */
.dp-focus-card {
    border-left: 3px solid var(--dp-green);
}

/* ══ SCHEDULE — WEEK VIEW ═════════════════════════════════════════════════════
   Added 2026-08-11. Ryan: "can we go to a week type format?"

   These rules also RETIRE the <style> block that lived inside
   templates/driver/schedule.html, which carried nine hardcoded hex literals
   (#2E7D32 #F57C00 #D32F2F #9E9E9E #FFF3E0 #E65100 #FFEBEE #C62828 #E8F5E9).
   A style block inside a template is invisible to every audit and cannot be
   themed, which is why they survived there. All nine are now --dp-* variables.

   ONE DELIBERATE COLOUR CHANGE: "understaffed" was red (#D32F2F) and is now
   amber. Three-colour discipline reserves red for destructive states — an
   understaffed day is a call for attention, which is amber. Flagged for Ryan
   rather than done silently.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Week navigator ──────────────────────────────────────────────────────── */

.dp-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--dp-card);
    border-radius: var(--dp-radius);
    padding: 10px 8px;
    margin-bottom: 10px;
}

/* 40px square: comfortably over the 32px touch-target floor, and the arrow is
   the only way to change week on a phone. */
.dp-week-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    color: var(--dp-green);
    border-radius: 8px;
}

.dp-week-arrow:focus-visible {
    outline: 2px solid var(--dp-green);
    outline-offset: 1px;
}

.dp-week-range { text-align: center; min-width: 0; }

.dp-week-dates {
    font-size: 16px;
    font-weight: 700;
    color: var(--dp-text);
}

.dp-week-sub {
    font-size: 11px;
    color: var(--dp-text-secondary);
    margin-top: 1px;
}

.dp-week-today-link {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--dp-green);
    text-decoration: none;
    margin: -4px 0 10px;
}

/* ── Legend ──────────────────────────────────────────────────────────────── */

.dp-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--dp-text-secondary);
    margin-bottom: 10px;
    padding: 0 4px;
}

.dp-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 2px;
}

.dp-legend-dot.working { background: var(--dp-green); }
.dp-legend-dot.off     { background: var(--dp-border); }
.dp-legend-dot.vto     { background: var(--dp-green-light); }
.dp-legend-dot.need    { background: var(--dp-warning); }

/* ── Day rows ────────────────────────────────────────────────────────────── */

.dp-day-row { padding: 12px 14px; margin-bottom: 8px; }

.dp-day-main { display: flex; align-items: flex-start; gap: 12px; }

/* Fixed-width date gutter so all seven rows align down the page — the whole
   point of a week view is scanning the column, which ragged dates defeat. */
.dp-day-when {
    flex-shrink: 0;
    width: 38px;
    text-align: center;
}

.dp-day-dow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dp-text-secondary);
}

.dp-day-num {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dp-text);
}

.dp-day-body { flex: 1; min-width: 0; }

.dp-day-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.dp-day-time {
    font-size: 15px;
    font-weight: 600;
    color: var(--dp-text);
}

.dp-day-time.off {
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.dp-day-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--dp-text-secondary);
    margin-top: 3px;
}

.dp-day-notes {
    font-size: 12px;
    color: var(--dp-text-secondary);
    margin-top: 6px;
}

/* An off day is present but recessive — it still has to be readable, since
   "you're off" is the answer to the question being asked. */
.dp-day-row.is-off {
    background: color-mix(in srgb, var(--dp-card) 88%, var(--dp-bg));
    box-shadow: none;
}

.dp-day-row.today {
    border: 1px solid var(--dp-green);
}

/* A past day recedes through BACKGROUND and border, never `opacity`.
   Opacity on a container fades the text and the surface toward each other and
   cannot be tuned out of a failure: measured across the row, secondary text
   reads 2.53:1 at 0.62, and still only 4.05:1 at 0.85 — every value fails AA
   while the primary text passes, so the fade silently breaks exactly the small
   grey text (times, route, vehicle) that a driver checking last week needs.
   Background + border carry the same "this is behind you" signal for free. */
.dp-day-row.past {
    background: color-mix(in srgb, var(--dp-card) 88%, var(--dp-bg));
    box-shadow: none;
    border-left-color: var(--dp-border);
}

/* Left rule by state. Set on the server for scheduled/off and overridden by the
   badge script for vto / ot / need / absent. */
.dp-day-row:not(.is-off) { border-left: 3px solid var(--dp-green); }
.dp-day-row.is-off       { border-left: 3px solid var(--dp-border); }

.dp-schedule-card[data-color="vto"]    { border-left: 3px solid var(--dp-green-light); }
.dp-schedule-card[data-color="ot"]     { border-left: 3px solid var(--dp-warning); }
.dp-schedule-card[data-color="need"]   { border-left: 3px solid var(--dp-warning); }
.dp-schedule-card[data-color="absent"] {
    /* No opacity here either, for the reason given above. */
    border-left: 3px solid var(--dp-text-muted);
    background: color-mix(in srgb, var(--dp-card) 88%, var(--dp-bg));
}

/* ── Badges (moved out of the template's style block) ────────────────────── */

.dp-sched-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
}

.dp-sched-badge.ot,
.dp-sched-badge.need {
    background: color-mix(in srgb, var(--dp-warning) 14%, var(--dp-card));
    color: var(--dp-warning-tx);
}

.dp-sched-badge.volunteered {
    background: var(--dp-green-bg);
    color: var(--dp-green);
}

/* ── Volunteer control — the door that did not exist ─────────────────────── */

.dp-sched-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--dp-border);
}

.dp-vol-btn {
    font-size: 12px;
    font-weight: 700;
    /* min-height, not padding arithmetic: a 12px font's line box measured 30px
       here, under the 32px touch floor, and padding maths had predicted 33. */
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: var(--dp-green);
    color: var(--dp-card);
    font-family: inherit;
}

.dp-vol-btn.withdraw {
    background: var(--dp-green-bg);
    color: var(--dp-green);
}

.dp-vol-btn:focus-visible {
    outline: 2px solid var(--dp-green);
    outline-offset: 2px;
}

.dp-need-note {
    font-size: 12px;
    color: var(--dp-warning-tx);
}

/* ── Buttons / empty ─────────────────────────────────────────────────────── */

/* Replaces three inline style attributes in the template. --dp-danger is the
   already-defined red, so this introduces no literal. */
.dp-btn-sm {
    width: auto;
    padding: 5px 12px;
    font-size: 12px;
}

.dp-btn-callout {
    color: var(--dp-danger);
    border-color: var(--dp-danger);
}

.dp-week-empty {
    background: var(--dp-card);
    border-radius: var(--dp-radius);
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--dp-text-secondary);
    line-height: 1.5;
}

/* ── THE COACHING GATE (2026-08-21) ─────────────────────────────────────────
   Ryan: a coaching that fell out of the 7-day window "will surface itself on
   the driver app, which requires the driver to acknowledge the coaching".

   A SOFT gate by his ruling — full-screen and unmissable, dismissible once per
   session. So it deliberately does NOT trap focus or block scrolling of the
   page underneath permanently; it is an interstitial, not a lock. Only 25 of
   142 active drivers have an account, and a hard lock would penalise exactly
   the drivers who adopted the app.

   Existing --dp-* tokens only, no new colour values. Amber (--dp-warning), not
   red: this is an overdue conversation, not an accident. */
.dp-gate {
  position: fixed;
  inset: 0;
  z-index: 900;                 /* above the bottom nav, below nothing else */
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  /* Respects the notch on the devices this is actually used on. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.dp-gate-panel {
  width: 100%;
  max-width: var(--dp-frame-width, 520px);
  /* --dp-card, not --dp-card-bg: the latter has ZERO definitions in this
     stylesheet, and an undefined var is invisible to a contrast audit even
     though the fallback makes it render correctly. */
  background: var(--dp-card);
  border: 2px solid var(--dp-warning);
  border-radius: var(--dp-radius, 12px);
  padding: 18px 16px 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.dp-gate-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dp-gate-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid var(--dp-border);
  border-radius: 4px;
  color: var(--dp-text-secondary);
}
.dp-gate-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dp-warning-tx, var(--dp-warning));
}
.dp-gate-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  color: var(--dp-text);
}
.dp-gate-meta {
  font-size: 12.5px;
  color: var(--dp-text-muted);
  margin-bottom: 10px;
}
.dp-gate-reason {
  font-size: 14px;
  font-weight: 700;
  color: var(--dp-text);
  margin-bottom: 8px;
}
.dp-gate-detail {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dp-text);
  margin-bottom: 12px;
}
.dp-gate-events {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dp-gate-events li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--dp-bg);
  border-radius: 8px;
}
.dp-gate-event-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--dp-text-secondary);
}
.dp-gate-event-detail {
  font-size: 13px;
  line-height: 1.45;
  color: var(--dp-text);
}
.dp-gate-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--dp-text);
  margin-bottom: 6px;
}
.dp-gate-optional {
  font-weight: 500;
  color: var(--dp-text-muted);
}
.dp-gate-comment { width: 100%; margin-bottom: 6px; }
.dp-gate-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--dp-text-muted);
  margin-bottom: 14px;
}
.dp-gate-ack { width: 100%; }
.dp-gate-later {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--dp-text-muted);
  text-decoration: underline;
  cursor: pointer;
}