/* Appearance is a browser preference. Light preserves the existing portal design. */
:root { color-scheme: light; }
.appearance-select, .appearance-choices { display: none; }
html[data-appearance-ready="true"] .appearance-select { display: flex; }
.appearance-select { align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; flex: none; }
.appearance-select select { min-height: 44px; width: 83px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.appearance-card { margin-top: 20px; padding: 24px; max-width: 900px; }
.appearance-card h2 { margin: 6px 0 8px; }
.appearance-card p { font-size: 12px; line-height: 1.6; color: var(--muted); }
html[data-appearance-ready="true"] .appearance-choices { display: grid; }
.appearance-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 480px; margin: 20px 0 12px; }
.appearance-choice { padding: 12px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.appearance-choice[aria-pressed="true"] { border-color: #b5753e; box-shadow: 0 0 0 3px #b5753e20; }
.appearance-choice strong, .appearance-choice small { display: block; margin: 8px 2px 0; }
.appearance-choice small { margin-top: 4px; font-size: 11px; color: var(--muted); }
.appearance-sample { height: 85px; padding: 12px 12px 12px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-radius: 8px; position: relative; overflow: hidden; }
.appearance-sample::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 22px; background: #131b30; }
.appearance-sample i { grid-column: 1 / -1; border-radius: 4px; background: #293653; }
.appearance-sample b { border-radius: 4px; }
.sample-light { background: #f5f3ef; }
.sample-light b { background: #fff; }
.sample-dark { background: #101827; }
.sample-dark b { background: #1b273b; }
.appearance-status { min-height: 20px; margin-bottom: 0; }
.v3-topbar-left { min-width: 0; }
.v3-topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-topbar-right { flex: none; }
@media (max-width: 1100px) { .v3-time { display: none; } .v3-topbar-left small { display: none; } }
@media (max-width: 690px) {
  .appearance-select > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .v3-topbar { gap: 8px; padding: 0 16px; }
  .v3-topbar-left, .v3-topbar-right { gap: 8px; }
  .v3-topbar-mark { display: none; }
  .v3-mobile-menu summary { width: 44px; height: 44px; }
  .v3-user { min-width: 34px; min-height: 44px; }
  .appearance-card { padding: 19px; }
}
@media (max-width: 480px) {
  .v3-public-header { height: auto; min-height: 96px; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .v3-public-header nav { display: grid; grid-template-columns: auto auto; gap: 7px 9px; }
  .v3-public-header .appearance-select { grid-column: 1 / -1; justify-content: end; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101827; --surface: #1b273b; --ink: #edf1f8; --muted: #b2bed1;
  --line: #344259; --blue: #a9b8ff; --navy: #edf1f8; --forest: #edf1f8;
  color: var(--ink); background: var(--bg);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] :is(.v3-topbar, .v3-mobile-menu nav, .feed-card, .panel, .stat,
  .next-action, .quick-links a, .assignment-card, .workflow-card, .message-card, .create-entry,
  .tracking-card, .v3-next, .v3-quick, .v3-manual, .v3-task-card, .v3-admin-actions a,
  .v3-week-banner, .v3-search-form, .reward-calendar-card, .access-card, .auth-layout,
  .auth-card, .public-features > div, .v3-landing-steps > div, .v3-landing-steps article,
  .landing-steps > div, .landing-steps article, .empty.standalone) {
  background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none;
}
html[data-theme="dark"] :is(h1, h2, h3, .v3-topbar-title, .v3-user, .section-title h2,
  .quick-links strong, .quick-links b, .activity-copy strong, .compact-notice strong,
  .admin-action-grid strong, .assignment-foot strong, .checklist-item strong,
  .workflow-card > div strong, .tracking-slot > strong, .stat strong, .empty h3,
  .v3-quick strong, .v3-task-card strong, .v3-admin-actions strong, .v3-week-banner strong,
  .v3-bottom-note strong, .v3-public-header .v3-brand strong) { color: var(--ink); }
html[data-theme="dark"] :is(.subtle, .description, .dashboard-intro p, .page-heading p,
  .v3-page-head p, .v3-time, .v3-topbar-left small, .v3-next p, .v3-quick small,
  .v3-quick > span:last-of-type, .v3-task-index, .v3-task-card p, .v3-admin-actions small,
  .v3-week-banner p, .v3-manual p, .v3-avatar-section p, .v3-avatar-history > div,
  .v3-avatar-review p, .v3-avatar-mail, .v3-email-state, .v3-bottom-note p,
  .security-card p, .profile-list dt, .quick-links small, .activity-copy small,
  .compact-notice p, .compact-notice small, .assignment-card p, .assignment-foot,
  .checklist-item small, .upload-card > p, .message-head time, .message-card p,
  .workflow-card p, .workflow-card > div, .tracking-heading small, .tracking-count,
  .tracking-slot > small, .slot-closed, .quiet-box p, .proof-item small, .update-row p,
  .notice-row p, .record-row small, .task-main small, .stat-top, .stat strong small,
  .auth-card > p, .access-intro p, .access-card > p, .access-card > small, .access-footer,
  .reward-calendar-labels, .reward-calendar-card > p, .reward-history-row p,
  .v3-landing-steps article p, .v3-footer, .v3-public-footer, .v3-release-stamp,
  .footer, .footer span, th, td small) { color: var(--muted); }
html[data-theme="dark"] :is(.v3-feed .activity-item, .activity-item, .compact-notice,
  .checklist-item, .task-row, .notice-row, .record-row, .update-row, .v3-task-card > div,
  .workflow-card > div, .v3-avatar-history, .v3-avatar-preview, .v3-resend-form,
  .reward-history-row, .access-footer, .create-entry[open] summary, .profile-list > div,
  .link-list a, .v3-footer, th, td) { border-color: var(--line); }
html[data-theme="dark"] :is(.quiet-box, .proof-item, .tracking-slot, .hub-note,
  .v3-bottom-note, .v3-avatar-busy, .claim-state, .v3-final-submit, .update-row.unread,
  .message-card.unread, .access-points span, .v3-art-card) {
  background: #243249; color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :is(.hub-note p, .claim-state strong, .claim-state small,
  .v3-final-submit p, .v3-art-card small, .v3-art-card span) { color: var(--muted); }
html[data-theme="dark"] .v3-note { background: #2d2945; color: #ded7ff; }
html[data-theme="dark"] .v3-note p { color: #c6beda; }
html[data-theme="dark"] .v3-note > span { color: #c6beda; }
html[data-theme="dark"] :is(.eyebrow, .dashboard-intro .eyebrow, .v3-manual span,
  .v3-section-head > a, .section-title a, .feed-card a, .back-link, .text-button,
  .assignment-foot strong, .checklist-item a, .workflow-card > div span, .tracking-slot > a,
  .link-list span, .record-row a, .form-foot a, .access-footer a, .v3-search-form a,
  .create-entry summary, .v3-next > a, .v3-task-card > div span, .v3-note > a) { color: #f0bc89; }
html[data-theme="dark"] :is(.stack-form label, .auth-card label, .access-card .stack-form label,
  .v3-search-form label, .file-label, .file-label input) { color: var(--ink); }
html[data-theme="dark"] :is(.stack-form label small, .auth-card label small) { color: var(--muted); }
html[data-theme="dark"] .form-help { color: var(--muted) !important; }
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
  background: #121e30; color: var(--ink); border-color: #465771;
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #a4b1c5; opacity: 1; }
html[data-theme="dark"] :is(input, select, textarea):disabled { opacity: .7; }
html[data-theme="dark"] input::file-selector-button {
  background: #2b3c56; color: var(--ink); border: 0; border-radius: 6px; padding: 7px;
}
html[data-theme="dark"] :is(.button, a.button) { background: #f0bc89; color: #142039; border-color: #f0bc89; }
html[data-theme="dark"] :is(.button, a.button):hover { background: #ffce9e; color: #142039; }
html[data-theme="dark"] :is(.button-secondary, a.button-secondary) { background: #243249; color: var(--ink); border-color: #465771; }
html[data-theme="dark"] :is(.button-secondary, a.button-secondary):hover { background: #30415b; color: var(--ink); }
/* Action links in cards must retain their button contrast. */
html[data-theme="dark"] .feed-card a.button { color: #142039; }
html[data-theme="dark"] .feed-card a.button-secondary { color: var(--ink); }
html[data-theme="dark"] :is(.v3-record-button, .proof-upload button) { background: #3b5278; color: #fff; }
html[data-theme="dark"] :is(.date-chip, .week-chip, .soft-count, .v3-date-chip,
  .v3-mobile-menu summary, .task-day, .activity-date, .v3-feed .activity-date,
  .assignment-date, .checkmark, .rank-number, .notice-icon, .message-mark,
  .v3-topbar-mark, .v3-orb, .v3-admin-actions a > span) { background: #2a3a53; color: #edc399; border-color: var(--line); }
html[data-theme="dark"] :is(.v3-track, .mini-progress, .assignment-progress, .tracking-progress, .bar) { background: #35455e; }
html[data-theme="dark"] :is(.task-row:hover, .v3-mobile-menu a:hover) { background: #26364e; }
html[data-theme="dark"] :is(.reward-note h2, .reward-note > span) { color: #f0cf89; }
html[data-theme="dark"] :is(.reward-note p, .reward-note small) { color: #c6d1e3; }
html[data-theme="dark"] :is(.initials, .profile-avatar, .v3-user .initials) { background: #35425a; color: #f0bc89; border-color: #465771; }
html[data-theme="dark"] .access-mark { background: #243249; color: #f0bc89; }
html[data-theme="dark"] .preview-banner { background: #443626; color: #f7cf91; }
html[data-theme="dark"] :is(.badge.success, .flash.success, .checkmark.done, .proof-symbol.done,
  .attendance-check) { background: #193f35; color: #9ce2b9; }
html[data-theme="dark"] :is(.badge.warn, .flash.info) { background: #443626; color: #f7cf91; }
html[data-theme="dark"] .badge.neutral { background: #2d3d59; color: #c6d4f2; }
html[data-theme="dark"] .flash.error { background: #492b36; color: #ffc0ca; }
html[data-theme="dark"] :is(.text-button.danger, .v3-avatar-mail.failed) { color: #ffa8ae; }
html[data-theme="dark"] :is(.v3-avatar-mail.sent, .v3-email-state.confirmed) { color: #9ce2b9; }
html[data-theme="dark"] .v3-email-state.pending { color: #f7cf91; }
html[data-theme="dark"] .reward-dashboard-link { background: linear-gradient(110deg, #393329, #1b273b); color: var(--ink); border-color: #8d7544; }
html[data-theme="dark"] .reward-dashboard-link small { color: var(--muted); }
html[data-theme="dark"] .reward-calendar li { background: #243249; border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .reward-calendar li.attended { background: #193f35; border-color: #38725b; color: #9ce2b9; }
html[data-theme="dark"] .reward-calendar li.missed { background: #492f2b; border-color: #775447; color: #ffc4a9; }
html[data-theme="dark"] .reward-calendar li.calendar-blank { background: none; border: none; }
html[data-theme="dark"] .birthday-greeting-dialog { background: #1b273b; color: var(--ink); border-color: #8d7544; }
html[data-theme="dark"] .birthday-greeting-dialog .eyebrow { color: #f0cf89; }
html[data-theme="dark"] .v3-bottom { background: #182438f2; border-color: var(--line); }
html[data-theme="dark"] :is(.v3-bottom a, .v3-bottom small, .v3-public-header nav > a:first-of-type) { color: var(--muted); }
html[data-theme="dark"] .v3-bottom a.active { background: #3b3440; color: #ffcf9e; }
html[data-theme="dark"] .v3-bottom a.active small { color: inherit; }
html[data-theme="dark"] .appearance-choice[aria-pressed="true"] { border-color: #f0bc89; box-shadow: 0 0 0 3px #f0bc8920; }
@media print { .appearance-select, .appearance-card { display: none !important; } }