/* ==========================================================================
   CHORHAUS v2 MASTER STYLESHEET
   No Tailwind. No Bootstrap. Semantic Flex, Grid, & Variable-Driven.
   ========================================================================== */

/* Design tokens live in tokens.css -- the single source of truth. It is linked
   before this file in templates/base.html. Do not redeclare tokens here. */

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

body {
    background-color: var(--color-bg-deep);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Accessibility utility to keep screen readers happy */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hidden { display: none !important; }

/* --- Global Toast Notifications --- */
.toast-notification {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    z-index: 1000;
    animation: slide-in 200ms var(--transition-bounce);
    max-width: 350px;
}

@keyframes slide-in {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   DOORWAY GATEWAY (templates/doorway/login.html)
   ========================================================================== */
.doorway-container {
    max-width: 420px;
    margin: 10vh auto;
    padding: 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.doorway-header {
    text-align: center;
}

.doorway-logo {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    animation: logo-sway 4s ease-in-out infinite alternate;
}

@keyframes logo-sway {
    from { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
}

.doorway-header h1 {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.tagline {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.doorway-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-soft);
}

.doorway-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.form-group input {
    min-height: var(--touch-target-min);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-text-disabled);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    padding: 0 var(--space-md);
    font-size: 1rem;
    outline: none;
    transition: border-color var(--transition-fast);
}

.form-group input:focus {
    border-color: var(--color-primary);
}

.field-helper {
    font-size: 0.75rem;
    color: var(--color-text-disabled);
    line-height: 1.4;
}

.btn-primary-doorway {
    min-height: var(--touch-target-min);
    background-color: var(--color-primary);
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 800;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-primary-doorway:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

.doorway-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
}

.footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.footer-link:hover {
    color: var(--color-primary);
}

.separator {
    color: var(--color-text-disabled);
}

/* ==========================================================================
   THE MAIN DASHBOARD (templates/app/dashboard.html)
   ========================================================================== */
.dashboard-viewport {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dashboard-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-bg-elevated);
    padding-bottom: var(--space-md);
}

.badge-house {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}

.dashboard-top-bar h1 {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.btn-signout {
    min-height: 38px;
    padding: 0 var(--space-md);
    background-color: transparent;
    border: 1px solid var(--color-text-disabled);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.btn-signout:hover {
    color: var(--color-danger-crimson);
    border-color: var(--color-danger-crimson);
}

/* --- The 3-Column Responsive Grid System --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;
}

@media (min-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1.1fr 1fr 1.1fr; /* Symmetrical desktop grid */
        gap: var(--space-lg);
    }
}

.grid-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ==========================================================================
   INTEGRATED COMPONENT STYLES
   ========================================================================== */

/* --- CAMERA / IMAGES --- */
.camera-capture {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background-color: var(--color-bg-surface);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-bg-elevated);
    box-shadow: var(--shadow-soft);
}

.capture-zone { position: relative; width: 100%; }
.capture-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--touch-target-min);
    width: 100%;
    padding: var(--space-md);
    background-color: var(--color-bg-elevated);
    border: 2px dashed var(--color-text-secondary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.capture-button:hover {
    border-color: var(--color-primary);
    background-color: rgba(59, 130, 246, 0.05);
}
.capture-zone.disabled { opacity: 0.3; pointer-events: none; }
.thumbnail-preview {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--color-success-mint);
    margin-top: var(--space-xs);
}
.analysis-status-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background-color: var(--color-bg-elevated);
    border-radius: var(--radius-md);
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: var(--space-sm);
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.status-msg {
    color: var(--color-accent-gold);
    font-weight: 700;
    font-size: 0.85rem;
    animation: pulsing 1.5s ease-in-out infinite;
}
@keyframes pulsing { 50% { opacity: 0.6; } }

/* --- SCORE ARENA --- */
.score-arena-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.score-arena-header { display: flex; justify-content: space-between; align-items: center; }
.arena-week { font-size: 0.75rem; font-weight: 800; color: var(--color-text-secondary); letter-spacing: 1.5px; }
.house-ranking {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background-color: rgba(245, 158, 11, 0.08);
    padding: 3px 10px;
    border-radius: var(--radius-round);
}
.rank-text { font-size: 0.75rem; font-weight: 700; color: var(--color-accent-gold); }
.score-display { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--color-bg-elevated); padding-bottom: var(--space-md); }
.points-group { display: flex; flex-direction: column; }
.points-val { font-size: 3.2rem; font-weight: 900; color: var(--color-text-primary); line-height: 1; }
.points-label { font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; font-weight: 700; }
.text-glow { text-shadow: 0 0 12px rgba(248, 250, 252, 0.25); }
.sparks-badge {
    background-color: var(--color-success-mint);
    color: var(--color-bg-deep);
    font-weight: 900;
    font-size: 0.8rem;
    padding: 4px var(--space-sm);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-glow-success);
}
.cap-tracker-container { display: flex; flex-direction: column; gap: var(--space-xs); }
.cap-labels { position: relative; display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 700; color: var(--color-text-secondary); }
.progress-track { position: relative; width: 100%; height: 10px; background-color: var(--color-bg-elevated); border-radius: var(--radius-round); }
.progress-fill { height: 100%; border-radius: var(--radius-round); transition: width var(--transition-bounce); }
.standard-fill { background: linear-gradient(90deg, var(--color-primary), var(--color-success-mint)); }
.target-notch { position: absolute; top: -2px; width: 3px; height: 14px; background-color: var(--color-text-primary); border-radius: var(--radius-round); box-shadow: 0 0 6px #fff; }
.cap-helper-text { font-size: 0.75rem; color: var(--color-text-secondary); line-height: 1.4; }
.btn-ledger-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--touch-target-min);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-text-disabled);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    padding: 0 var(--space-md);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-ledger-trigger .arrow { color: var(--color-primary); }

/* --- SYMMATE LIVE CHAT --- */
.symmate-chat-wrapper {
    display: flex;
    flex-direction: column;
    height: 380px;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.symmate-header {
    background-color: rgba(10, 14, 23, 0.4);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--color-bg-elevated);
}
.mascot-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    background-color: var(--color-bg-elevated);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 2px solid var(--color-accent-gold);
}
.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: var(--color-success-mint);
    border: 1px solid var(--color-bg-surface);
    border-radius: 50%;
}
.mascot-meta h2 { font-size: 0.85rem; font-weight: 800; }
.mood-status { color: var(--color-accent-gold); font-size: 0.75rem; font-weight: 700; }
.chat-message-pane {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.chat-divider { text-align: center; font-size: 0.65rem; font-weight: 800; color: var(--color-text-secondary); }
.message-row { display: flex; width: 100%; }
.coach-row { justify-content: flex-start; }
.user-row { justify-content: flex-end; }
.speech-bubble { max-width: 80%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.4; }
.coach-bubble { background-color: var(--color-bg-elevated); color: var(--color-text-primary); border-bottom-left-radius: 2px; }
.user-bubble { background-color: var(--color-primary); color: var(--color-text-primary); border-bottom-right-radius: 2px; }
.message-time { display: block; font-size: 0.6rem; color: var(--color-text-secondary); text-align: right; margin-top: 4px; }
.token-cursor { display: inline-block; color: var(--color-accent-gold); animation: blinking 1s steps(2, start) infinite; }
@keyframes blinking { to { visibility: hidden; } }
.chat-input-bar { background-color: rgba(10, 14, 23, 0.4); padding: var(--space-sm); border-top: 1px solid var(--color-bg-elevated); }
.chat-input-form { display: flex; gap: var(--space-xs); }
.chat-input-form input {
    flex-grow: 1;
    min-height: 40px;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-text-disabled);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    padding: 0 var(--space-md);
    font-size: 0.85rem;
    outline: none;
}
.btn-send-message {
    min-height: 40px;
    min-width: 40px;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.send-icon { font-size: 0.85rem; transform: rotate(90deg); }

/* --- SOCIAL & LEADERBOARDS --- */
.arena-social-container { display: flex; flex-direction: column; gap: var(--space-sm); }
.rivalry-code-box {
    background-color: var(--color-bg-surface);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-bg-elevated);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.my-code-group { display: flex; justify-content: space-between; align-items: center; background-color: var(--color-bg-elevated); padding: 4px var(--space-md); border-radius: var(--radius-md); }
.code-label { font-size: 0.7rem; font-weight: 800; color: var(--color-text-secondary); }
.code-copier { display: flex; align-items: center; gap: var(--space-sm); }
.code-copier code { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent-gold); }
.btn-copy-code { min-height: 32px; padding: 0 var(--space-sm); border: none; background-color: var(--color-primary); color: var(--color-text-primary); font-weight: 700; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.7rem; }
.btn-copy-code.copied { background-color: var(--color-success-mint); }
.rival-challenge-form { display: flex; gap: var(--space-xs); }
.rival-challenge-form input { flex-grow: 1; min-height: 40px; background-color: var(--color-bg-elevated); border: 1px solid var(--color-text-disabled); border-radius: var(--radius-md); color: var(--color-text-primary); padding: 0 var(--space-sm); outline: none; font-size: 0.85rem; }
.btn-challenge { min-height: 40px; padding: 0 var(--space-md); background-color: var(--color-accent-gold); color: var(--color-bg-deep); border: none; border-radius: var(--radius-md); font-weight: 800; cursor: pointer; font-size: 0.85rem; }
.leaderboard-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: var(--color-bg-surface); border-radius: var(--radius-md); padding: 3px; }
.tab-btn { min-height: var(--touch-target-min); border: none; background-color: transparent; color: var(--color-text-secondary); font-weight: 700; font-size: 0.8rem; border-radius: var(--radius-sm); cursor: pointer; }
.tab-btn.active { background-color: var(--color-bg-elevated); color: var(--color-text-primary); }
.board-list { display: flex; flex-direction: column; gap: 4px; list-style: none; }
.board-list.hidden { display: none; }
.board-row { display: flex; align-items: center; gap: var(--space-md); min-height: 48px; padding: var(--space-xs) var(--space-md); background-color: var(--color-bg-surface); border-radius: var(--radius-md); }
.row-rank { width: 18px; font-weight: 800; text-align: center; color: var(--color-text-secondary); font-size: 0.85rem; }
.row-avatar { width: 30px; height: 30px; border-radius: 50%; background-color: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; }
.row-meta { flex-grow: 1; display: flex; flex-direction: column; }
.row-name { font-size: 0.85rem; font-weight: 700; }
.row-chores { font-size: 0.7rem; color: var(--color-text-secondary); }
.row-points { font-family: var(--font-mono); font-weight: 800; font-size: 0.85rem; }
.rank-1 { background-color: rgba(245, 158, 11, 0.03); border: 1px solid rgba(245, 158, 11, 0.1); }
.rank-1 .row-points { color: var(--color-accent-gold); }
.rank-slacker { background-color: rgba(239, 68, 68, 0.02); }
.rank-slacker .warning-text { color: var(--color-danger-crimson); }
.user-row { border-left: 3px solid var(--color-primary); }

/* --- THE LEDGER --- */
.ledger-container { display: flex; flex-direction: column; gap: var(--space-md); }
.ledger-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.balance-card { background-color: var(--color-bg-surface); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--color-bg-elevated); display: flex; flex-direction: column; }
.card-title { font-size: 0.7rem; font-weight: 800; color: var(--color-text-secondary); }
.card-amount { font-size: 1.4rem; font-weight: 900; }
.owed-to-me .card-amount { color: var(--color-success-mint); }
.i-owe .card-amount { color: var(--color-danger-crimson); }
.ledger-list-section h3 { font-size: 0.8rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: var(--space-xs); text-transform: uppercase; }

/* ---------- Adding a shared cost ---------- */
.expense-form h3 { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; margin-bottom: var(--space-xs); }
.expense-fields { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.expense-fields input {
    flex: 1 1 8rem;
    min-width: 0;                       /* lets the pair actually shrink on a phone */
    min-height: var(--touch-target-min);
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-bg-elevated);
    background-color: var(--color-bg-deep);
    color: var(--color-text-primary);
    font: inherit;
}
.expense-fields input#expense-amount { flex: 0 1 6rem; }
.expense-fields input:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 1px; }
.btn-add-expense {
    flex: 0 0 auto;
    min-height: var(--touch-target-min);
    padding: 0 var(--space-md);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    cursor: pointer;
}
.btn-add-expense:disabled { opacity: 0.55; cursor: progress; }
.expense-note { font-size: 0.68rem; color: var(--color-text-secondary); margin-top: var(--space-xs); }
.expense-error { font-size: 0.75rem; color: var(--color-danger-crimson); margin-top: var(--space-xs); }

/* ---------- Honest empty states ---------- */
.ledger-empty,
.board-empty {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    padding: var(--space-sm) 0;
}
.ledger-list { display: flex; flex-direction: column; gap: 4px; list-style: none; }
.ledger-row { display: flex; justify-content: space-between; align-items: center; background-color: var(--color-bg-surface); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); min-height: 48px; }
.debtor-name { font-size: 0.85rem; font-weight: 700; }
.expense-desc { font-size: 0.7rem; color: var(--color-text-secondary); }
.row-right { display: flex; align-items: center; gap: var(--space-md); }
.debt-amount { font-family: var(--font-mono); font-weight: 800; font-size: 0.85rem; }
.btn-settle { min-height: 36px; padding: 0 var(--space-md); background-color: var(--color-success-mint); color: var(--color-bg-deep); border: none; border-radius: var(--radius-sm); font-weight: 800; font-size: 0.75rem; cursor: pointer; }
.settled-row { background-color: #0b1019; filter: grayscale(100%); opacity: 0.5; border: 1px dashed var(--color-text-disabled); }
.settled-row .debtor-name, .settled-row .expense-desc, .settled-row .debt-amount { color: var(--color-text-disabled) !important; text-decoration: line-through; }
.settled-stamp { font-size: 0.7rem; font-weight: 800; color: var(--color-text-disabled); }

/* --- CYNICAL CHRONICLE TABLOID --- */
.chronicle-alert-banner {
    background: linear-gradient(135deg, #1b152d, #2d102a); 
    border: 1px solid var(--color-accent-gold);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    cursor: pointer;
    box-shadow: var(--shadow-glow-gold);
}
.banner-badge { background-color: var(--color-accent-gold); color: var(--color-bg-deep); font-size: 0.65rem; font-weight: 900; padding: 2px 6px; border-radius: var(--radius-sm); }
.banner-headline { font-size: 0.8rem; font-weight: 700; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-action-indicator { font-size: 0.75rem; font-weight: 800; color: var(--color-accent-gold); }
.chronicle-dialog { border: none; background-color: transparent; max-width: 500px; width: calc(100% - var(--space-xl)); border-radius: var(--radius-sm); outline: none; }
.chronicle-dialog::backdrop { background-color: rgba(10, 14, 23, 0.85); backdrop-filter: blur(5px); }
.tabloid-sheet { background-color: #f6f1e5; color: #1a1816; padding: var(--space-lg); border-radius: var(--radius-sm); font-family: Georgia, serif; }
.tabloid-header { text-align: center; margin-bottom: var(--space-sm); }
.tabloid-meta-row { display: flex; justify-content: space-between; font-size: 0.6rem; font-weight: 800; font-family: var(--font-mono); border-bottom: 1px solid #1c1917; padding-bottom: 2px; }
.masthead { font-size: 1.8rem; font-weight: 900; letter-spacing: -0.5px; font-family: 'Times New Roman', serif; margin: var(--space-xs) 0; }
.tabloid-border-double { border-bottom: 3px double #1a1816; height: 3px; }
.tabloid-headline { font-size: 1.3rem; font-weight: 900; text-align: center; margin-bottom: var(--space-sm); font-family: Impact, sans-serif; }
.tabloid-body { font-size: 0.85rem; line-height: 1.5; text-align: justify; display: flex; flex-direction: column; gap: var(--space-sm); }
.editorial-lead::first-letter { font-size: 2.8rem; font-weight: 900; float: left; line-height: 0.8; margin-right: 4px; }
.tabloid-roast { border-top: 1px solid #1c1917; border-bottom: 1px solid #1c1917; padding: var(--space-sm); font-style: italic; font-weight: 700; text-align: center; color: #b91c1c; }
.tabloid-footer { display: flex; justify-content: center; margin-top: var(--space-md); }
.btn-close-tabloid { min-height: 40px; width: 100%; border: 1px solid #1c1917; background: transparent; font-family: var(--font-mono); font-weight: 800; cursor: pointer; }

/* --- DATASET BOUNTY --- */
.bounty-widget-card { background-color: var(--color-bg-surface); border: 1px solid var(--color-bg-elevated); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.bounty-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-bg-elevated); padding-bottom: var(--space-sm); }
.bounty-meta { display: flex; align-items: center; gap: var(--space-xs); }
.vault-icon { font-size: 1.5rem; filter: drop-shadow(0 0 4px var(--color-accent-gold)); }
.bounty-meta h3 { font-size: 0.8rem; font-weight: 800; }
.bounty-accrual-msg { font-size: 0.7rem; color: var(--color-text-secondary); }
.bounty-counter { display: flex; flex-direction: column; align-items: flex-end; }
.bounty-number { font-size: 1.5rem; font-weight: 900; color: var(--color-accent-gold); line-height: 1; }
.bounty-unit { font-size: 0.6rem; color: var(--color-text-secondary); }
.bounty-toggle-row { display: flex; justify-content: space-between; align-items: center; min-height: var(--touch-target-min); }
.toggle-info { display: flex; flex-direction: column; flex-grow: 1; }
.toggle-main-label { font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.toggle-sub-label { font-size: 0.7rem; color: var(--color-text-secondary); }
.toggle-sub-label strong { color: var(--color-success-mint); }
.switch-container { position: relative; width: 50px; height: 30px; display: flex; align-items: center; }
.switch-checkbox { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; }
.switch-track { width: 50px; height: 26px; background-color: var(--color-bg-elevated); border-radius: var(--radius-round); position: relative; border: 1px solid var(--color-text-disabled); }
.switch-track::after { content: ''; position: absolute; top: 2px; left: 3px; width: 20px; height: 20px; background-color: var(--color-text-secondary); border-radius: 50%; transition: transform var(--transition-bounce); }
.switch-checkbox:checked + .switch-track { background-color: rgba(16, 185, 129, 0.08); border-color: var(--color-success-mint); }
.switch-checkbox:checked + .switch-track::after { transform: translateX(22px); background-color: var(--color-success-mint); }
.bounty-privacy-footer { background-color: var(--color-bg-elevated); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border-left: 3px solid var(--color-primary); }
.shield-badge { font-size: 0.7rem; font-weight: 800; color: var(--color-primary); }
.bounty-privacy-footer p { font-size: 0.7rem; color: var(--color-text-secondary); line-height: 1.4; }

/* --- ANTI-CHEAT DIALOG --- */
.cheat-dialog { border: none; background-color: transparent; max-width: 440px; width: calc(100% - var(--space-xl)); outline: none; }
.cheat-dialog::backdrop { background-color: rgba(10, 14, 23, 0.85); backdrop-filter: blur(5px); }
.cheat-container { background-color: var(--color-bg-surface); border: 2px solid var(--color-danger-crimson); border-radius: var(--radius-lg); padding: var(--space-lg); }
.cheat-header { text-align: center; margin-bottom: var(--space-md); }
.cheat-icon { display: block; font-size: 2.5rem; animation: alarm 0.8s ease-in-out infinite alternate; }
@keyframes alarm { from { transform: scale(0.9); } to { transform: scale(1.1); } }
.cheat-header h2 { color: var(--color-danger-crimson); font-size: 1.5rem; font-weight: 900; margin-top: var(--space-xs); }
.cheat-tagline { color: var(--color-text-secondary); font-size: 0.85rem; }
.cheat-proof-view { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm); background-color: var(--color-bg-elevated); padding: var(--space-sm); border-radius: var(--radius-md); margin-bottom: var(--space-md); }
.proof-card { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.proof-card h3 { font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; }
.proof-img-frame { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); background-size: cover; background-position: center; border: 1.5px solid var(--color-danger-crimson); }
.time-stamp { font-size: 0.7rem; color: var(--color-text-disabled); }
.match-percentage { background-color: var(--color-danger-crimson); color: var(--color-text-primary); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 0.65rem; font-weight: 800; }
.btn-danger { min-height: var(--touch-target-min); width: 100%; border: none; background-color: var(--color-danger-crimson); color: var(--color-text-primary); font-weight: 800; cursor: pointer; border-radius: var(--radius-md); }

/* --- HOUSE SETTINGS --- */
.settings-panel {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}
.settings-header h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.settings-week { font-size: 0.8rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.settings-meta { font-size: 0.85rem; color: var(--color-text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.settings-meta code { color: var(--color-accent-gold); font-weight: 700; }
.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.settings-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-weight: 700;
}
.settings-form input[type="text"],
.settings-form input[type="number"],
.settings-form select {
    min-height: var(--touch-target-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-bg-elevated);
    background-color: var(--color-bg-deep);
    color: var(--color-text-primary);
    font: inherit;
    text-transform: none;
    font-weight: 600;
}
.settings-shape-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.settings-check {
    flex-direction: row !important;
    align-items: center;
    gap: var(--space-sm) !important;
    text-transform: none !important;
    font-size: 0.9rem !important;
    color: var(--color-text-primary) !important;
    min-height: var(--touch-target-min);
}
.settings-check input { width: 1.25rem; height: 1.25rem; }
.settings-form .btn-primary {
    min-height: var(--touch-target-min);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--color-accent-gold);
    color: var(--color-bg-deep);
    font-weight: 800;
    cursor: pointer;
}
.settings-members-block h4 {
    margin: 0 0 var(--space-xs);
    font-size: 0.85rem;
    text-transform: uppercase;
}
.settings-bench-note { font-size: 0.8rem; color: var(--color-text-secondary); margin: 0 0 var(--space-sm); }
.settings-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-member {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-sm);
    align-items: center;
    min-height: var(--touch-target-min);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
}
.settings-member[data-benched="1"] { opacity: 0.75; border-left: 3px solid var(--color-warning-amber, #f59e0b); }
.settings-member-name { font-weight: 700; font-size: 0.9rem; }
.settings-member-status { font-size: 0.75rem; color: var(--color-text-secondary); }
.btn-bench, .btn-unbench {
    min-height: 40px;
    padding: 0 var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 800;
    cursor: pointer;
    font-size: 0.8rem;
}
.btn-bench { background: var(--color-bg-deep); color: var(--color-text-primary); border: 1px solid var(--color-text-disabled); }
.btn-unbench { background: rgba(16, 185, 129, 0.15); color: var(--color-success-mint); }
.settings-error { color: var(--color-danger-crimson); font-size: 0.9rem; margin: 0; }
.settings-error.hidden { display: none; }
.settings-panel > .btn-danger { margin-top: var(--space-xs); }
.settings-body.hidden { display: none; }
.settings-collapsed-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.settings-collapsed-meta code { color: var(--color-accent-gold); font-weight: 700; }
.btn-settings-cog {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border: 1px solid var(--color-bg-elevated);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

/* --- Full-colour card skins (level palettes) --- */
.skin-green {
    --skin: #4ade80;
    --skin-deep: #166534;
    --skin-soft: rgba(74, 222, 128, 0.14);
}
.skin-blue {
    --skin: #3b82f6;
    --skin-deep: #1e3a8a;
    --skin-soft: rgba(59, 130, 246, 0.16);
}
.skin-purple {
    --skin: #a855f7;
    --skin-deep: #581c87;
    --skin-soft: rgba(168, 85, 247, 0.16);
}
.skin-gold {
    --skin: #fbbf24;
    --skin-deep: #a86a09;
    --skin-soft: rgba(251, 191, 36, 0.18);
}

.score-arena-card.skin-green,
.score-arena-card.skin-blue,
.score-arena-card.skin-purple,
.score-arena-card.skin-gold {
    border: 1px solid color-mix(in srgb, var(--skin) 45%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--skin) 22%, transparent);
    background:
        linear-gradient(145deg, var(--skin-soft), transparent 55%),
        var(--color-bg-surface);
}
.score-arena-card.skin-green .points-val,
.score-arena-card.skin-blue .points-val,
.score-arena-card.skin-purple .points-val,
.score-arena-card.skin-gold .points-val {
    color: var(--skin);
    text-shadow: 0 0 18px color-mix(in srgb, var(--skin) 45%, transparent);
}
.score-arena-card.skin-green .progress-fill,
.score-arena-card.skin-blue .progress-fill,
.score-arena-card.skin-purple .progress-fill,
.score-arena-card.skin-gold .progress-fill {
    background: linear-gradient(90deg, var(--skin-deep), var(--skin));
}

.house-skin-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-sm);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-round);
    font-weight: 800;
    font-size: 0.8rem;
    background: var(--skin-soft, var(--color-bg-elevated));
    color: var(--skin, var(--color-accent-gold));
    border: 1px solid color-mix(in srgb, var(--skin, var(--color-accent-gold)) 40%, transparent);
}
.house-skin-chip.hidden { display: none; }

/* EPL-style league table */
.league-table-card .boards-viewport {
    max-height: 22rem;
    overflow-y: auto;
    scroll-behavior: smooth;
    border-radius: var(--radius-md);
    background: var(--color-bg-deep);
    padding: 4px;
}
.league-table .board-row {
    border-left: 3px solid transparent;
}
.league-table .board-row.skin-green,
.league-table .board-row.skin-blue,
.league-table .board-row.skin-purple,
.league-table .board-row.skin-gold {
    background:
        linear-gradient(90deg, var(--skin-soft), transparent 70%),
        var(--color-bg-surface);
    border-left-color: var(--skin);
}
.league-table .board-row.you-row {
    outline: 2px solid var(--skin, var(--color-accent-gold));
    outline-offset: -2px;
    transform: scale(1.01);
    z-index: 1;
    box-shadow: 0 0 20px color-mix(in srgb, var(--skin, var(--color-accent-gold)) 30%, transparent);
}
.league-table .board-row.you-row .row-name {
    color: var(--skin, var(--color-accent-gold));
}
.league-table .row-rank {
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    width: 1.75rem;
}
.league-table .table-gap {
    justify-content: center;
    color: var(--color-text-disabled);
    font-size: 0.75rem;
    min-height: 2rem;
    background: transparent;
    border: none;
}
.board-row.dimmed-row { opacity: 0.65; }

/* Trash talk */
.trash-talk-panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.trash-talk-lede {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.trash-add-form, .trash-send-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.trash-add-form input,
.trash-send-form input,
.trash-send-form select {
    flex: 1 1 8rem;
    min-height: var(--touch-target-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-bg-elevated);
    background: var(--color-bg-deep);
    color: var(--color-text-primary);
    font: inherit;
}
.trash-rivals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.trash-rival {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--skin-soft, var(--color-bg-elevated));
    border-left: 3px solid var(--skin, var(--color-primary));
}
.trash-rival-name { font-weight: 700; }
.trash-rival-meta { font-size: 0.75rem; color: var(--color-text-secondary); }
.trash-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 14rem;
    overflow-y: auto;
}
.trash-msg {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}
.trash-msg.mine { border-left: 3px solid var(--color-accent-gold); }
.trash-msg.theirs { border-left: 3px solid var(--color-primary); }
.trash-msg-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-weight: 800;
    margin-bottom: 4px;
}
.trash-msg-body { margin: 0; font-size: 0.9rem; }

/* Welcome */
.welcome-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 0 var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--color-accent-gold) 18%, transparent), transparent 60%),
        var(--color-bg-surface);
    border: 1px solid color-mix(in srgb, var(--color-accent-gold) 35%, transparent);
}
.welcome-banner.hidden { display: none; }
.welcome-title {
    margin: 0 0 0.35rem;
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--color-accent-gold);
}
.welcome-body {
    margin: 0;
    max-width: 48rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}
.btn-welcome-dismiss {
    min-height: var(--touch-target-min);
    padding: 0 var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-accent-gold);
    color: var(--color-bg-deep);
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.btn-invite {
    min-height: var(--touch-target-min);
    padding: 0 var(--space-md);
    border: 1px solid var(--color-accent-gold);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-accent-gold);
    font-weight: 800;
    cursor: pointer;
}
.add-chore-form {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-bg-elevated);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.add-chore-form h4 { margin: 0; font-size: 0.85rem; text-transform: uppercase; }
.add-chore-note { margin: 0; font-size: 0.8rem; color: var(--color-text-secondary); }
.add-chore-form input {
    min-height: var(--touch-target-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-bg-elevated);
    background: var(--color-bg-deep);
    color: var(--color-text-primary);
    font: inherit;
}

.btn-changelog {
    min-height: var(--touch-target-min);
    padding: 0 var(--space-md);
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-bg-elevated);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
}
.btn-changelog:hover { color: var(--color-accent-gold); border-color: var(--color-accent-gold); }
.welcome-body p { margin: 0 0 0.65rem; }
.welcome-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Touch targets.
   Measured on a 390px viewport: 6 of 39 controls sat under the 44px iOS /
   48px Android minimum, two of them at 19px -- effectively un-tappable with a
   thumb. Sized here rather than per-component so a new control inherits a sane
   floor instead of repeating the mistake.
   -------------------------------------------------------------------------- */
.btn-add-expense,
.btn-copy-code,
.btn-copy-join-code,
.btn-signout,
#add-chore-submit,
#trash-add-rival,
#trash-send,
#btn-send-message,
#chat-message-input,
.settings-panel button,
.trash-talk-panel button {
    min-height: 44px;
}

/* Inputs paired with those buttons, so a row does not end up ragged. */
.expense-fields input,
.add-chore-form input,
.trash-talk-panel input,
.trash-talk-panel select {
    min-height: 44px;
}

/* Geofence status line in the house settings panel. */
.settings-geofence {
    margin: var(--space-sm) 0 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.settings-geofence.settings-warn {
    color: var(--color-accent-gold, #f59e0b);
}

/* ==========================================================================
   TAB SHELL
   Sections declare data-tab; only the active set is shown. The dashboard was a
   three-column grid that became ~4 screens of vertical scroll on a phone, with
   House settings marooned at the bottom of the last column.
   ========================================================================== */
.dashboard-grid[data-active-tab] > .grid-column > [data-tab] { display: none; }
.dashboard-grid[data-active-tab="home"]   > .grid-column > [data-tab~="home"],
.dashboard-grid[data-active-tab="chores"] > .grid-column > [data-tab~="chores"],
.dashboard-grid[data-active-tab="money"]  > .grid-column > [data-tab~="money"],
.dashboard-grid[data-active-tab="coach"]  > .grid-column > [data-tab~="coach"],
.dashboard-grid[data-active-tab="house"]  > .grid-column > [data-tab~="house"] {
    display: block;
}

/* One readable column per tab, at a comfortable measure. The three-column
   grid existed to fit everything at once; tabs make that unnecessary. */
.dashboard-grid[data-active-tab] {
    grid-template-columns: 1fr;
    max-width: 46rem;
    margin-inline: auto;
    width: 100%;
}
.dashboard-grid[data-active-tab] > .grid-column:empty { display: none; }

/* Clear the fixed bar so the last card is never trapped under it. */
.dashboard-viewport { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

.app-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--color-bg-deep) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-line);
}

.app-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    cursor: pointer;
    transition: color var(--transition-fast, 150ms) ease;
}
.app-tab-icon { font-size: 1.15rem; line-height: 1; }
.app-tab-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; }

.app-tab.is-active { color: var(--color-primary); }
/* A dot rather than a filled pill: the active colour already carries the
   state, and a second heavy indicator competes with the scoreboard. */
.app-tab.is-active .app-tab-icon { transform: translateY(-1px); }
.app-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
@media (hover: hover) {
    .app-tab:hover { color: var(--color-text-primary); }
}

/* Desktop: a rail on the left, content beside it. */
@media (min-width: 900px) {
    .app-tabs {
        top: 0;
        right: auto;
        width: 92px;
        grid-template-columns: 1fr;
        grid-auto-rows: max-content;
        align-content: start;
        gap: 4px;
        padding: var(--space-lg) var(--space-xs);
        border-top: 0;
        border-right: 1px solid var(--color-line);
    }
    .app-tab { min-height: 64px; }
    .app-tab-label { font-size: 0.7rem; }
    .dashboard-viewport { padding-left: 116px; padding-bottom: var(--space-lg); }
}

/* ---------- About / legal ---------- */
.app-legal {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background: var(--color-bg-surface);
}
.app-legal h3 { margin: 0 0 var(--space-sm); font-size: 0.95rem; }
.app-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
}
.app-legal-links a,
.app-legal-links .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.app-legal-links a:hover,
.app-legal-links .link-button:hover { color: var(--color-primary); }
.app-legal-meta {
    margin: var(--space-sm) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-disabled);
}

/* ==========================================================================
   SIGNATURE: the scoreboard
   The one place spending boldness. Everything else stays quiet.
   ========================================================================== */
.score-arena-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-line);
}
/* Faint scanlines: a stadium board, not a dashboard widget. Sub-pixel and
   nearly invisible up close, which is the point. */
.score-arena-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.022) 0 1px,
        transparent 1px 3px
    );
}
.points-val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.03em;
}
/* Scores are digits on a board. Tabular figures stop the number jittering as
   it counts up. */
.card-amount,
.rank-text,
.cap-min,
.cap-max,
.points-val { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   PASS 2 — app bar, and gold spent only on winning
   ========================================================================== */

/* The app bar wrapped "The Chore Arena" onto three lines at 390px and stacked
   its four buttons into a staircase. Two rows, each with one job. */
.dashboard-top-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
}
.dashboard-meta-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}
.dashboard-top-bar h1 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.badge-house { flex: 0 0 auto; }
.dashboard-actions-right {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
@media (min-width: 640px) {
    .dashboard-top-bar h1 { font-size: 1.4rem; }
}

/* The welcome banner wore the first-place gold, which is why gold stopped
   meaning first place. It is an informational notice; it gets the neutral
   surface and a chlorine rule. */
.welcome-banner {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-primary);
}
.welcome-title { color: var(--color-text-primary); }
.btn-welcome-dismiss {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-line);
}
@media (hover: hover) {
    .btn-welcome-dismiss:hover { border-color: var(--color-primary); }
}

/* Crown row in the league table: this one IS a win, so it keeps the gold. */
.rank-row[data-rank="1"] .rank-text,
.crown-icon { color: var(--color-accent-gold); }

/* ==========================================================================
   PASS 3 — identity in the app bar, and gold that means something
   ========================================================================== */

/* On a phone the useful identity is WHICH HOUSE you are in, not the product
   name, which is identical on every screen for every user. The house pill was
   also squeezing the title down to "T..". Below 640px the pill is the header;
   the product name returns when there is room for it. */
.dashboard-meta-left .badge-house {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 639px) {
    .dashboard-top-bar h1 { display: none; }
}

/* The rank line is gold only when the house is actually top of the table.
   "Solo in Mountain View, CA -- for now" is not a victory, and gold that shows
   up for a house of one is gold that means nothing. */
.rank-text { color: var(--color-text-secondary); }
.house-ranking[data-rank="1"] .rank-text,
.rank-row[data-rank="1"] .rank-text { color: var(--color-accent-gold); }

/* Columns with nothing visible in this tab still occupied a grid cell and its
   gap, leaving a dead band mid-screen. :has() collapses them properly --
   :empty could not, because the children exist, they are just hidden. */
.dashboard-grid[data-active-tab="home"]   > .grid-column:not(:has([data-tab~="home"])),
.dashboard-grid[data-active-tab="chores"] > .grid-column:not(:has([data-tab~="chores"])),
.dashboard-grid[data-active-tab="money"]  > .grid-column:not(:has([data-tab~="money"])),
.dashboard-grid[data-active-tab="coach"]  > .grid-column:not(:has([data-tab~="coach"])),
.dashboard-grid[data-active-tab="house"]  > .grid-column:not(:has([data-tab~="house"])) {
    display: none;
}

/* A join code is an identifier, not a trophy. */
#settings-join-code,
#settings-join-code-peek,
.join-code-value { color: var(--color-primary); }

/* One measure for the whole app screen. The header and banners ran full width
   while the tab content was capped at 46rem, so no two edges lined up on
   desktop. Tabs mean a single readable column is the right shape; everything
   now shares it. */
.dashboard-viewport > .dashboard-top-bar,
.dashboard-viewport > .welcome-banner,
.dashboard-viewport > .chronicle-alert-banner {
    max-width: 46rem;
    margin-inline: auto;
    width: 100%;
}

/* Invite is an ordinary action, not a trophy. */
.btn-invite {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
@media (hover: hover) {
    .btn-invite:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
}

/* Last of the brand-gold: the join code on the league card. An identifier, not
   a trophy. With this, --color-accent-gold appears only on crowns, rank-1 rows
   and a banked final score. */
#my-house-code { color: var(--color-primary); }

/* ==========================================================================
   ACCESSIBILITY FIXES (audited 2026-08-12)
   ========================================================================== */

/* Text on a filled action must use the theme's on-primary, and children must
   inherit it. The label inside .btn-copy-code is a <span>, which kept the page
   text colour and rendered near-white on chlorine at 1.57:1. */
.btn-copy-code,
.btn-copy-join-code,
.btn-add-expense,
.btn-capture,
.btn-primary {
    color: var(--color-on-primary);
}
.btn-copy-code *,
.btn-copy-join-code *,
.btn-add-expense *,
.btn-capture *,
.btn-primary * { color: inherit; }

/* A join code is an identifier, not a trophy. (#my-house-code was corrected
   earlier; this is the settings-side copy of the same element.) */
.code-copier code { color: var(--color-primary); }

/* --color-text-disabled is deliberately low-contrast because disabled controls
   are exempt from WCAG contrast rules. This is live content, not a disabled
   state, so it must not borrow that token. */
.app-legal-meta { color: var(--color-text-secondary); }

/* Join codes are small, and the theme's base accent is tuned for fills rather
   than 12px monospace on a card. The -hot variant carries the same hue with
   the luminance small text needs. */
#my-house-code,
#settings-join-code,
#settings-join-code-peek,
.code-copier code { color: var(--color-primary-hot); }

/* Eyebrow labels sat just under 4.5 in several themes. */
.code-label { color: var(--color-text-primary); opacity: 0.72; }

/* The send glyph is a text character, not an emoji, so it takes the button's
   colour -- and inherited the page text colour over the filled button. */
.btn-send-message { color: var(--color-on-primary); }
.btn-send-message .send-icon { color: inherit; }

/* Join codes are data. White always passes; the accent lives on the Copy
   button beside them, which is the thing you act on. */
#my-house-code,
#settings-join-code,
#settings-join-code-peek,
.code-copier code { color: var(--color-text-primary); }

/* Motion. capture.css and marketing.css honoured this; global.css -- which
   holds the dashboard's transitions, the spinner and the score glow -- did
   not, so the busiest screen ignored the preference entirely. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Bypass block (WCAG 2.4.1).
   Off-screen until focused, then anchored top-left over everything. Using
   `left: -9999px` rather than display:none is deliberate -- a display:none
   link is not focusable and would never appear.
   ========================================================================== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    border-radius: 0 0 var(--radius-md) 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}
/* The target is programmatically focusable, so it must not paint a ring when
   focus lands there from the skip link. */
#main-content:focus { outline: none; }

/* A consistent, visible focus indicator everywhere. Relying on the UA default
   is fragile once backgrounds vary by theme -- a black outline vanishes on the
   Cyber theme's pure-black field. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Form errors must be announced and visibly tied to the field, not just
   coloured red -- colour alone is not an indicator (WCAG 1.4.1). */
[aria-invalid="true"] {
    border-color: var(--color-danger-crimson) !important;
    outline-color: var(--color-danger-crimson);
}