/* Shared compact surfaces. Loaded after page styles in every layout. */
:root {
    --panel-padding: .8rem;
    --success-text: #166534;
    --info-text: #0369a1;
    --panel-gap: .85rem;
    --tech-accent: #087e8b;
    --tech-line: rgba(8, 126, 139, .19);
    --tech-glow: rgba(8, 126, 139, .055);
    --bg-main: #f2f5f8;
    --bg-surface-secondary: #f0f5f7;
    --bg-surface-tertiary: #e6eef2;
    --border: #dbe4eb;
    --border-color: var(--border);
    --bg-muted: var(--bg-surface-secondary);
    --radius-lg: 12px;
    --radius-xl: 14px;
    --text-muted: #657080;
    --bottom-nav-height: 56px;
}
[data-theme="dark"] {
    --success-text: #86efac;
    --info-text: #7dd3fc;
    --bg-main: #111111;
    --bg-surface: #191919;
    --bg-surface-secondary: #222222;
    --bg-surface-tertiary: #2d2d2d;
    --border: #303030;
    --border-hover: #484848;
    --text-primary: #f5f5f5;
    --text-secondary: #b8b8b8;
    --text-muted: #a0a0a0;
    /* Logo red is the sole brand accent in dark mode. */
    --primary: #c62836;
    --primary-hover: #e04450;
    --primary-light: rgba(198, 40, 54, .14);
    --border-focus: var(--primary);
    --tech-accent: #58dccf;
    --tech-line: rgba(88, 220, 207, .23);
    --tech-glow: rgba(88, 220, 207, .055);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .12);
}
body {
    background-image: none;
}
.card, .follower-stat-card, .admin-stat-box, .book-catalog-card,
.book-accordion-card, .dashboard-task-card, .dashboard-ranking-card,
.dashboard-hero-section, .dashboard-card-widget, .discover-panel {
    min-width: 0;
    border-radius: var(--radius-lg);
    border-color: var(--border);
    background-image: none;
    box-shadow: var(--shadow-sm);
}
.card-header { padding: .65rem .8rem; font-size: .9rem; gap: .5rem; flex-wrap: wrap; }
.card-body { padding: var(--panel-padding); }
.card-footer { padding: .6rem .8rem; }
.card-header, .book-accordion-header { background-image: none; }
.content-container { padding-top: .8rem; }
.page-header { margin-bottom: var(--panel-gap); gap: .65rem; }
.page-title { font-size: clamp(1.2rem, 2.4vw, 1.55rem); letter-spacing: -.025em; }
.app-header, .bottom-nav { border-color: var(--tech-line); }
.sidebar-link.active, .bottom-nav-item.active { box-shadow: inset 0 0 0 1px var(--tech-line); }
.btn { padding: .55rem .85rem; font-size: .875rem; }
.btn-primary { background-image: linear-gradient(120deg, rgba(255,255,255,.1), transparent); }
[data-theme="dark"] .btn-primary { background-color: var(--primary); border-color: var(--primary-hover); color: #fff; }
[data-theme="dark"] .btn-primary:hover { background-color: var(--primary-hover); }
.metrics-grid, .follower-stats-grid, .admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: .6rem !important;
    margin-bottom: var(--panel-gap) !important;
}
.metrics-grid > *, .follower-stat-card, .admin-stat-box {
    min-width: 0;
    padding: .7rem .8rem !important;
    gap: .2rem;
    overflow-wrap: anywhere;
}
/* These grids contain summary values only; full content keeps its typography. */
.metrics-grid > div > div:first-child, .follower-stat-label {
    font-size: .72rem !important;
    letter-spacing: .035em !important;
    line-height: 1.35;
    margin-bottom: .2rem !important;
    color: var(--text-secondary);
}
.metrics-grid > div > div:nth-child(2), .follower-stat-value, .admin-stat-num {
    font-size: 1.25rem !important;
    line-height: 1.3;
    margin-top: 0 !important;
    font-variant-numeric: tabular-nums;
}
.metrics-grid > div > div:nth-child(3), .follower-stat-sub {
    font-size: .76rem !important;
    line-height: 1.4;
    margin-top: .15rem !important;
}
.profile-container { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--panel-gap); }
.profile-contact { overflow-wrap: anywhere; }
.profile-container .metrics-grid > .card:nth-child(2) > div:nth-child(2) {
    white-space: normal !important;
    overflow: visible !important;
    font-size: 1rem !important;
}
.dashboard-hero-section, .dashboard-task-card {
    padding: 1rem;
    gap: .85rem;
    margin-bottom: var(--panel-gap);
}
.dashboard-hero-left { gap: .35rem; }
.dashboard-welcome-title { font-size: 1.4rem; }
.dashboard-task-title { font-size: 1.2rem; }
.dashboard-task-content { min-width: 0; flex-basis: 220px; }
.dashboard-hero-actions { gap: .5rem; }
.hero-stat-pill { padding: .35rem .65rem; }
[data-theme="dark"] .dashboard-hero-section {
    background: var(--bg-surface) !important;
    box-shadow: inset 0 1px 0 var(--tech-line), var(--shadow-sm) !important;
}
.books-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .75rem; }
.book-catalog-cover-wrap { height: 150px; }
.book-catalog-body { padding: .75rem; gap: .5rem; }
.book-catalog-title { font-size: .95rem; }
.mobile-reader-card, .mobile-item-card { padding: .7rem; margin-bottom: .5rem; }
.book-accordion-header { padding: .75rem; gap: .6rem; }
.ranking-person-row { padding-top: .55rem; padding-bottom: .55rem; }
.admin-layout .content-container, .admin-content-container { padding: 1rem; }
.empty-state { padding: 1.5rem 1rem; }
@media (max-width: 600px) {
    :root { --panel-padding: .7rem; --panel-gap: .7rem; }
    .content-container { width: calc(100% - 24px); }
    .metrics-grid, .follower-stats-grid, .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dashboard-hero-section, .dashboard-task-card { padding: .8rem; }
    .dashboard-welcome-title { font-size: 1.2rem; }
    .books-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .book-catalog-cover-wrap { height: 125px; }
    .book-catalog-body { padding: .6rem; }
    .profile-cover { height: 88px !important; }
    .profile-container h1 { font-size: 1.25rem !important; }
    .profile-contact { font-size: .78rem !important; }
    /* Keep mobile controls comfortably tappable while shrinking static content. */
    .btn, .form-input, .form-select { min-height: 44px; }
    .bottom-nav-item { min-height: 48px; }
}

/* Content widgets share the same rhythm as the summary cards. */
.dashboard-grid-cards { gap: var(--panel-gap); margin-bottom: var(--panel-gap); }
.dashboard-card-header { padding: .7rem .85rem; }
.dashboard-card-body { padding: .85rem; }
.dashboard-card-title { font-size: .95rem; }
.discover-page .discover-panel { padding: .8rem; }
.discover-page .discover-heading { margin-bottom: var(--panel-gap); }
.discover-page .discover-heading h1 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.discover-page .discover-panel-title { margin-bottom: .6rem; }
.discover-page .announcement-item, .discover-page .discover-quote { padding: .7rem; }
@supports (backdrop-filter: blur(12px)) {
    .app-header, .bottom-nav {
        background-color: color-mix(in srgb, var(--bg-surface) 94%, transparent);
        backdrop-filter: blur(12px);
    }
}
@media (max-width: 359px) {
    .metrics-grid, .follower-stats-grid, .admin-stats-grid { gap: .4rem !important; }
    .metrics-grid > *, .follower-stat-card, .admin-stat-box { padding: .6rem !important; }
}

.task-book-summary { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .main-program-task-card .task-book-summary h2 { font-size: 1.05rem !important; }
    .main-program-task-card .task-complete-form .btn { padding: .65rem .75rem !important; font-size: .9rem !important; }
}

@media (max-width: 600px) {
    .main-program-task-card .task-book-layout { display: grid !important; grid-template-columns: 60px minmax(0, 1fr); gap: .6rem !important; }
    .main-program-task-card .task-book-cover { width: 60px !important; height: 88px !important; }
    .main-program-task-card .task-book-summary { display: contents; }
    .task-book-summary > div { grid-column: 1 / -1; margin-bottom: .35rem !important; }
    .task-book-summary > div:first-child { grid-column: 2; }
}

/* Neutral surfaces; color belongs to icons, actions, and status indicators. */
[data-theme="dark"] .app-header,
[data-theme="dark"] .bottom-nav { background: var(--bg-surface); border-color: var(--border); }
.reader-dashboard-grid { display: grid; gap: var(--panel-gap); }
.reader-dashboard-grid > * { min-width: 0; margin: 0 !important; }
.reader-dashboard-grid .dashboard-hero-section { background: var(--bg-surface) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-sm) !important; }
.reader-dashboard-grid .dashboard-welcome-title { color: var(--text-primary) !important; }
.reader-dashboard-grid .dashboard-hero-section > div { width: 100%; }
.reader-dashboard-grid .dashboard-tasks-banner > div > div { min-width: 0 !important; }
.reader-dashboard-grid .dashboard-social-section { padding: .75rem 0; gap: .5rem; }
.dashboard-social-links { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(2px, 1vw, 8px); width: 100%; }
.dashboard-social-links .social-circle-btn { width: 32px; height: 36px; flex: 0 1 32px; min-width: 24px; border-radius: 9px; box-shadow: none; }
.dashboard-social-links .social-circle-btn svg { width: 16px; height: 16px; }
@media (min-width: 992px) {
    .reader-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .reader-dashboard-grid > .dashboard-hero-section,
    .reader-dashboard-grid > .dashboard-social-section { grid-column: 1 / -1; }
    .content-container .tasks-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .content-container .tasks-page-grid > .streak-card-container { grid-column: 1 / -1; }
    .content-container .dashboard-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-theme="dark"] .content-container .main-program-task-card { background: var(--bg-surface); }
/* Annual streak: aligned quarter rows with explicit, readable state markers. */
.streak-card-container { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; min-width: 0; }
.streak-header-row, .streak-title-group, .streak-badges-group { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.streak-header-row { justify-content: space-between; margin-bottom: 1rem; }
.streak-title-group { flex: 1; }
.streak-title-text { font-size: 1rem; font-weight: 750; }
.streak-flame-badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--warning-bg); }
.streak-year-nav { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; margin-left: auto; }
.streak-nav-btn { display: grid; place-items: center; width: 32px; height: 36px; color: var(--text-secondary); }
.streak-nav-btn.is-disabled { pointer-events: none; opacity: .35; }
.streak-year-text { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.streak-pill { display: flex; gap: .4rem; align-items: center; font-size: .8rem; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 8px; }
.streak-pill .pill-title { color: var(--text-secondary); }
.streak-pill-current .pill-num { color: var(--primary); }
.streak-year-track-container { display: grid; gap: .55rem; }
.streak-quarter-label { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: .72rem; font-weight: 650; margin-top: .3rem; }
.streak-quarter-label span { color: var(--text-muted); font-weight: 400; }
.streak-quarter-row { display: grid; gap: 5px; }
.streak-week-item { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 4px; }
.streak-capsule-slot { width: 100%; }
.streak-capsule-node { display: grid; place-items: center; width: 100%; height: 25px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-surface-secondary); color: var(--text-muted); }
.streak-week-item.completed .streak-capsule-node { background: #15803d; border-color: #22a65b; color: #fff; }
.streak-week-item.missed .streak-capsule-node { background: var(--bg-surface-tertiary); }
.streak-week-item.future .streak-capsule-node { border-style: dashed; background: transparent; }
.streak-week-item.is-current-week .streak-capsule-node { outline: 2px solid #e5a63c; outline-offset: 1px; color: #b9770e; }
.streak-week-num { font-size: .65rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.streak-week-item.is-current-week .streak-week-num { color: var(--text-primary); font-weight: 800; }
.streak-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.streak-legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--text-secondary); }
.streak-legend i { width: 10px; height: 10px; border: 1px solid var(--border); border-radius: 3px; }
.streak-legend .completed { background: #15803d; border-color: #22a65b; }
.streak-legend .current { border: 2px solid #e5a63c; }
.streak-legend .missed { background: var(--bg-surface-tertiary); }
.streak-legend .future { border-style: dashed; }
@media (max-width: 600px) {
    .streak-card-container { padding: .75rem; }
    .streak-header-row { gap: .7rem; }
    .streak-title-group, .streak-badges-group { width: 100%; }
    .streak-pill { flex: 1; justify-content: center; }
    .streak-quarter-row { gap: 4px; }
    .streak-capsule-node { height: 22px; }
}

[data-theme="dark"] .reader-dashboard-grid .dashboard-hero-section .hero-metric-value { color: #f4c77b !important; }