/* Color tokens for the planner and for About, Privacy, and Contact.
   Light --muted is #475569 on the page background (6.92:1). Button labels share one size and weight.
   The light hour labels below stay at the contrast they were measured at. */

:root {
    --bg: #060913;
    --card: #0d1424;
    --line: rgba(255, 255, 255, 0.08);
    --text: #f8fafc;
    --muted: #94a3b8;
    --link: #67e8f9;
    --btn-size: 1rem;
    --btn-weight: 600;
    --cyan: #00f0ff;
    --work: #047857;
    --shoulder: #b45309;
    --night: #991b1b;
    --work-ink: #fff;
    --shoulder-ink: #fff;
    --night-ink: #fff;
    --night-stripe: rgba(0,0,0,0.16);
    --hour-edge: rgba(0,0,0,0.18);
    --track: #04060b;
    --weekend-wash: rgba(255, 255, 255, 0.06);
    --weekend-dot: rgba(255, 255, 255, 0.95);
    --weekend-mark: 3px;
    color-scheme: dark;
}
html.light {
    --bg: #f1f5f9;
    --card: #ffffff;
    --line: rgba(15, 23, 42, 0.1);
    --text: #0f172a;
    --muted: #475569;
    --link: #0369a1;
    --cyan: #0284c7;
    --track: #e2e8f0;
    /* Light-mode hour palette: lighter fills, dark labels (AA: 6.4 / 5.6 / 6.7:1, 5.4:1 on night stripes). */
    --work: #6ee7b7;
    --shoulder: #fdba74;
    --night: #fca5a5;
    --work-ink: #064e3b;
    --shoulder-ink: #7c2d12;
    --night-ink: #651313;
    --night-stripe: rgba(127,29,29,0.14);
    --hour-edge: rgba(15,23,42,0.12);
    --shoulder-text: #9a3412;
    --night-text: #b91c1c;
    /* The 5px near-black dots stay. The wash is only a tenth of slate. */
    --weekend-wash: rgba(15, 23, 42, 0.10);
    --weekend-dot: #020617;
    --weekend-mark: 5px;
    color-scheme: light;
}

/* The timeline hand is inherited. On the planner page, links, buttons, and
   menus set their own arrow so they do not show that hand. Every other page
   uses the pointing hand. Selectable text is left to the browser. */
body.planner :is(a, button, summary, [role="button"], [role="menuitem"], [role="menuitemradio"]) { cursor: default; }
body:not(.planner) :is(a[href], button:not(:disabled), summary, [role="button"], [role="menuitem"], [role="menuitemradio"]) { cursor: pointer; }

/* One FAQ disclosure. Native <details> keeps the answer searchable. The chevron
   is the click cue; the pointer wins on the planner page too (same specificity
   as the arrow rule above, and this rule comes later). */
.faq { display: grid; gap: 10px; }
.faq > details {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
}
.faq > details > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    min-block-size: 44px;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    border-radius: 11px;
}
/* The planner arrow rule's :is() list includes attribute selectors, so it
   outranks a plain .faq summary. This puts the pointing hand back on questions. */
body.planner .faq > details > summary { cursor: pointer; }
.faq > details[open] > summary {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::marker { content: ""; }
.faq > details > summary > span { flex: 1 1 auto; min-inline-size: 0; }
.faq-chevron {
    width: 20px;
    height: 20px;
    flex: none;
    margin-inline-start: auto;
    transition: transform 0.2s ease;
}
.faq > details[open] > summary .faq-chevron { transform: rotate(180deg); }
.faq > details > summary:hover,
.faq > details > summary:focus-visible {
    background: color-mix(in srgb, var(--text) 12%, var(--card));
}
.faq > details > summary:focus-visible {
    outline: 3px solid var(--text);
    outline-offset: 2px;
}
.faq > details > p { color: var(--muted); margin: 0; padding: 0 16px 14px; }
html.light .faq > details > p { color: #334155; }
@media (prefers-reduced-motion: reduce) {
    .faq-chevron { transition: none; }
}
@media (forced-colors: active) {
    .faq > details > summary:focus-visible { outline: 3px solid Highlight; }
}

/* The light wordmark stays hidden until html.light. These selectors beat
   `.logo img { display: block }`, so the swap does not use !important. */
.logo img.logo-light { display: none; }
html.light .logo img.logo-light { display: block; }
html.light .logo img.logo-dark { display: none; }

/* Theme switcher (System / Light / Dark): icon button and a small radio menu. */
.theme-switch { position: relative; display: flex; }
/* Beats the later `.btn svg { 16px }` in planner.css and site.css. */
.theme-switch__btn.btn svg { width: 18px; height: 18px; }
.theme-switch__icon--dark { display: none; }
html.dark .theme-switch__icon--light { display: none; }
html.dark .theme-switch__icon--dark { display: block; }
.theme-switch__menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px;
    display: grid; gap: 2px; padding: 6px;
    background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.theme-switch__menu[hidden] { display: none; }
.theme-switch__option {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center;
    width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px;
    background: transparent; color: inherit; font: inherit; text-align: left;
}
.theme-switch__option:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.theme-switch__option:focus-visible { outline: 3px solid var(--text); outline-offset: 1px; }
.theme-switch__option[aria-checked="true"] { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.theme-switch__check { width: 16px; height: 16px; visibility: hidden; color: var(--cyan); }
.theme-switch__option[aria-checked="true"] .theme-switch__check { visibility: visible; }
.theme-switch__name { display: block; font-size: var(--btn-size); font-weight: var(--btn-weight); line-height: 1.2; }
.theme-switch__hint { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.3; }