/* chikutik themes. Light: light (default), paper, frost, violet (Gaya B). Dark: dark, midnight, forest,
   neon (Gaya A). Accessibility: contrast. Or follow the device, with a light and a dark theme of your choice.
   People see Indonesian or English names (theme.js); the internal names never show.
   Loaded after the page's own CSS by the app (/app/) and the account pages (ck.css), so the same choice
   applies everywhere. public/theme.js sets <html data-theme="..."> from localStorage "ck.theme";
   no attribute means "follow the device" (light, or dark when the device is dark).

   Why these colours (sources in BACKLOG.md, "Themes"):
   - Dark follows Material's dark theme guidance: a dark grey surface (#121212) instead of pure black,
     text at about 87% white instead of pure white (pure white "vibrates" on black), lighter and less
     saturated accents, and raised surfaces a little lighter than the page.
   - Neon keeps reading text plain and near-white; the neon colours are for marks, bars and the "now"
     line, and every colour passes contrast on its own. Glow is decoration only, never on body text,
     and nothing pulses.
   - Style B (violet) uses the suffragette colours of the WSPU (1908), which International Women's Day still
     uses: purple for dignity and justice, green for hope, white. Deep purple is the ink, WSPU purple
     marks the bars, green is "now".
   - Paper: warm off-white and brown-black ink for long reading sessions; the accent stays in the gold family.
   - Frost: cool blue-grey surfaces with a blue accent, for people who find pure black on white harsh.
   - Midnight: navy instead of grey for the dark surfaces, periwinkle accent; calmer than pure grey at night.
   - Forest: deep green surfaces, sage bars, amber for "now" (warm on cool reads as the one thing to look at).
   - High contrast: black on white, a strong blue accent, heavier lines and a thicker focus ring (WCAG AAA text).
   Contrast (WCAG 2.2): body text 7:1 or more, muted text 4.5:1 or more on page and raised surfaces,
   accents used as words 4.5:1, bars and rings 3:1. Checked with the script in the commit notes. */

/* ---------- light, stated in full so a preview can show it inside a dark page ---------- */
:root[data-theme="light"], .ck-thp[data-theme="light"] {
  color-scheme: light;
  --paper: #FFFFFF; --wash: #F5F5F5; --line: #E7E7E7; --faint: #C9C9C9; --mute: #6B6B6B;
  --ink-2: #2B2B2B; --ink: #000000; --on-ink: #FFFFFF; --ink-hover: #3A3A3A;
  --gold: #A8843A; --gold-text: #7F6128; --on-gold: #000000; --red: #B2301F; --on-red: #FFFFFF; --bar: #000000;
  --dim: #B5B5B5; --wkend: #FAFAFA; --done: #8C8C8C; --blocked-bg: #F2D6D1; --shared-bar: #DCCBA6; --shared-bar-hi: #9C7E3F;
  --ft-green: #1E7F45; --ft-blue: #2458C6; --ft-amber: #A35F00; --ft-red: #B42318; --ft-violet: #7A3DB8;
  --note-yellow: #FFF1A8; --note-green: #CDEFC9; --note-blue: #CFE3FF; --note-pink: #FFD3DC; --note-violet: #E4D5FF; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #15131B; --on-stage: #F3F1F7; --stage-accent: #A8843A; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- dark ---------- */
:root[data-theme="dark"], .ck-thp[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121212; --wash: #1E1E1E; --line: #2E2E2E; --faint: #4A4A4A; --mute: #A0A0A0;
  --ink-2: #CFCFCF; --ink: #E6E6E6; --on-ink: #121212; --ink-hover: #BDBDBD;
  --gold: #D2AE62; --gold-text: #D8B874; --on-gold: #121212; --red: #F08070; --on-red: #121212; --bar: #E6E6E6;
  --dim: #5C5C5C; --wkend: #171717; --done: #6F6F6F; --blocked-bg: #3D211C; --shared-bar: #6B5730; --shared-bar-hi: #8C7240;
  --ft-green: #5CC98A; --ft-blue: #7AA7FF; --ft-amber: #F0B350; --ft-red: #FF8A7A; --ft-violet: #C29BFF;
  --note-yellow: #4A3F12; --note-green: #1F3D2A; --note-blue: #1D2F4F; --note-pink: #4A2330; --note-violet: #35254F; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #050506; --on-stage: #ECECEC; --stage-accent: #D2AE62; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #121212; --wash: #1E1E1E; --line: #2E2E2E; --faint: #4A4A4A; --mute: #A0A0A0;
    --ink-2: #CFCFCF; --ink: #E6E6E6; --on-ink: #121212; --ink-hover: #BDBDBD;
    --gold: #D2AE62; --gold-text: #D8B874; --on-gold: #121212; --red: #F08070; --on-red: #121212; --bar: #E6E6E6;
    --dim: #5C5C5C; --wkend: #171717; --done: #6F6F6F; --blocked-bg: #3D211C; --shared-bar: #6B5730; --shared-bar-hi: #8C7240;
    --ft-green: #5CC98A; --ft-blue: #7AA7FF; --ft-amber: #F0B350; --ft-red: #FF8A7A; --ft-violet: #C29BFF;
  --note-yellow: #4A3F12; --note-green: #1F3D2A; --note-blue: #1D2F4F; --note-pink: #4A2330; --note-violet: #35254F; /* sticky notes (whiteboard): --ink on them 7:1 */
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* ---------- style A (neon): deep blue-black, cyan for now, magenta for bars ---------- */
:root[data-theme="neon"], .ck-thp[data-theme="neon"] {
  color-scheme: dark;
  --paper: #0B0B1A; --wash: #15152B; --line: #28284A; --faint: #45457A; --mute: #A7A7D0;
  --ink-2: #D9D6F5; --ink: #F1EFFF; --on-ink: #0B0B1A; --ink-hover: #FF3EC8;
  --gold: #2DF5FF; --gold-text: #5CF7FF; --on-gold: #0B0B1A; --red: #FF5C8A; --on-red: #0B0B1A; --bar: #FF3EC8;
  --dim: #4A4A7A; --wkend: #101024; --done: #6A6A9A; --blocked-bg: #3A1030; --shared-bar: #1F6F80; --shared-bar-hi: #2DF5FF;
  --glow-a: rgba(255, 62, 200, .55); --glow-b: rgba(45, 245, 255, .55);
  --ft-green: #3DFFA0; --ft-blue: #6EA8FF; --ft-amber: #FFC34D; --ft-red: #FF5C8A; --ft-violet: #C58BFF;
  --note-yellow: #4A3F12; --note-green: #1F3D2A; --note-blue: #1D2F4F; --note-pink: #4A2330; --note-violet: #35254F; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #05030A; --on-stage: #F1ECFF; --stage-accent: #2DF5FF; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7A7D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- style B (violet): WSPU purple, green and white ---------- */
:root[data-theme="violet"], .ck-thp[data-theme="violet"] {
  color-scheme: light;
  --paper: #FFFFFF; --wash: #F6F1FA; --line: #E7DDF0; --faint: #CBB8DC; --mute: #6C5A7C;
  --ink-2: #472A5E; --ink: #2E1142; --on-ink: #FFFFFF; --ink-hover: #6B2C91;
  --gold: #17804C; --gold-text: #146B40; --on-gold: #FFFFFF; --red: #B3263F; --on-red: #FFFFFF; --bar: #6B2C91;
  --dim: #B9A6CA; --wkend: #FBF8FD; --done: #9C8AAD; --blocked-bg: #F6D9DF; --shared-bar: #B7DCC6; --shared-bar-hi: #17804C;
  --ft-green: #17804C; --ft-blue: #2A5BC4; --ft-amber: #9A5A00; --ft-red: #B3263F; --ft-violet: #6B2C91;
  --note-yellow: #FFF1A8; --note-green: #CDEFC9; --note-blue: #CFE3FF; --note-pink: #FFD3DC; --note-violet: #E4D5FF; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #171223; --on-stage: #F3EEFF; --stage-accent: #17804C; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C5A7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- paper (Kertas): warm off-white, brown-black ink ---------- */
:root[data-theme="paper"], .ck-thp[data-theme="paper"] {
  color-scheme: light;
  --paper: #F8F4EC; --wash: #EFE8DA; --line: #E2D8C4; --faint: #C9BCA3; --mute: #6B5E4B;
  --ink-2: #3A3024; --ink: #221A10; --on-ink: #F8F4EC; --ink-hover: #4A3D2C;
  --gold: #8F631C; --gold-text: #7A5418; --on-gold: #FFFFFF; --red: #A3321F; --on-red: #FFFFFF; --bar: #221A10;
  --dim: #C4B79C; --wkend: #F3EEE3; --done: #8C7F69; --blocked-bg: #F0D5CC; --shared-bar: #E3CFA5; --shared-bar-hi: #9A7434;
  --ft-green: #2E7040; --ft-blue: #2F5AA8; --ft-amber: #95570D; --ft-red: #A3321F; --ft-violet: #74408F;
  --note-yellow: #FFF1A8; --note-green: #CDEFC9; --note-blue: #CFE3FF; --note-pink: #FFD3DC; --note-violet: #E4D5FF; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #1A1712; --on-stage: #F5F0E6; --stage-accent: #8F631C; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5E4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- frost (Salju): cool blue-grey, blue accent ---------- */
:root[data-theme="frost"], .ck-thp[data-theme="frost"] {
  color-scheme: light;
  --paper: #F8FAFC; --wash: #EDF1F6; --line: #DCE3EB; --faint: #BFC9D5; --mute: #56657A;
  --ink-2: #1F2C3D; --ink: #0F1B2A; --on-ink: #FFFFFF; --ink-hover: #26384F;
  --gold: #2F62D9; --gold-text: #1D4FC4; --on-gold: #FFFFFF; --red: #B42318; --on-red: #FFFFFF; --bar: #0F1B2A;
  --dim: #B4BFCC; --wkend: #F2F5F9; --done: #7E8C9D; --blocked-bg: #F9D9D5; --shared-bar: #C9D8F6; --shared-bar-hi: #5B83E0;
  --ft-green: #1E7A48; --ft-blue: #2F62D9; --ft-amber: #9A5B00; --ft-red: #B42318; --ft-violet: #6D3FC0;
  --note-yellow: #FFF1A8; --note-green: #CDEFC9; --note-blue: #CFE3FF; --note-pink: #FFD3DC; --note-violet: #E4D5FF; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #10161E; --on-stage: #EEF3F8; --stage-accent: #2F62D9; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356657A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- midnight (Malam): navy surfaces, periwinkle accent ---------- */
:root[data-theme="midnight"], .ck-thp[data-theme="midnight"] {
  color-scheme: dark;
  --paper: #0E1525; --wash: #172036; --line: #26314A; --faint: #3D4A66; --mute: #9CA8C0;
  --ink-2: #D3DAE8; --ink: #E8ECF4; --on-ink: #0E1525; --ink-hover: #C0C9DA;
  --gold: #8AB0FF; --gold-text: #A3C0FF; --on-gold: #0E1525; --red: #FF8F85; --on-red: #0E1525; --bar: #E8ECF4;
  --dim: #4A5672; --wkend: #121A2C; --done: #7A87A1; --blocked-bg: #3A2230; --shared-bar: #2E4470; --shared-bar-hi: #6F93DA;
  --ft-green: #6BD69A; --ft-blue: #8AB0FF; --ft-amber: #F2B85C; --ft-red: #FF8F85; --ft-violet: #C4A3FF;
  --note-yellow: #4A3F12; --note-green: #1F3D2A; --note-blue: #1D2F4F; --note-pink: #4A2330; --note-violet: #35254F; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #03050B; --on-stage: #E9EDF7; --stage-accent: #8AB0FF; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA8C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- forest (Hutan): deep green, sage bars, amber for now ---------- */
:root[data-theme="forest"], .ck-thp[data-theme="forest"] {
  color-scheme: dark;
  --paper: #0F1712; --wash: #17231B; --line: #25362A; --faint: #3C5244; --mute: #9DB3A4;
  --ink-2: #D2E0D6; --ink: #E6EFE8; --on-ink: #0F1712; --ink-hover: #BCD0C2;
  --gold: #E3B55B; --gold-text: #EAC477; --on-gold: #0F1712; --red: #F2907F; --on-red: #0F1712; --bar: #9AD4AE;
  --dim: #3F5446; --wkend: #131D16; --done: #72897A; --blocked-bg: #3B2420; --shared-bar: #2F5A40; --shared-bar-hi: #6DB388;
  --ft-green: #9AD4AE; --ft-blue: #8CB8FF; --ft-amber: #E3B55B; --ft-red: #F2907F; --ft-violet: #C9A6F5;
  --note-yellow: #4A3F12; --note-green: #1F3D2A; --note-blue: #1D2F4F; --note-pink: #4A2330; --note-violet: #35254F; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #040806; --on-stage: #E8F0EA; --stage-accent: #E3B55B; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB3A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- high contrast (Kontras tinggi): black on white, strong blue, heavier lines ---------- */
:root[data-theme="contrast"], .ck-thp[data-theme="contrast"] {
  color-scheme: light;
  --paper: #FFFFFF; --wash: #F2F2F2; --line: #8A8A8A; --faint: #6E6E6E; --mute: #3B3B3B;
  --ink-2: #000000; --ink: #000000; --on-ink: #FFFFFF; --ink-hover: #1F1F1F;
  --gold: #0040C1; --gold-text: #0037A6; --on-gold: #FFFFFF; --red: #A10E0E; --on-red: #FFFFFF; --bar: #000000;
  --dim: #6E6E6E; --wkend: #F7F7F7; --done: #595959; --blocked-bg: #FFD9D9; --shared-bar: #7F9BDD; --shared-bar-hi: #0040C1;
  --ft-green: #0B6B2F; --ft-blue: #0040C1; --ft-amber: #8A4B00; --ft-red: #A10E0E; --ft-violet: #5B21B6;
  --note-yellow: #FFF1A8; --note-green: #CDEFC9; --note-blue: #CFE3FF; --note-pink: #FFD3DC; --note-violet: #E4D5FF; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #000000; --on-stage: #FFFFFF; --stage-accent: #FFD23F; /* presenting a whiteboard: the stage around the scene card, and text on it (7:1) */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B3B3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="contrast"] :focus-visible { outline-width: 3px; outline-offset: 3px; }
:root[data-theme="contrast"] a, :root[data-theme="contrast"] .link { text-decoration-thickness: 2px; }
:root[data-theme="contrast"] input, :root[data-theme="contrast"] select, :root[data-theme="contrast"] textarea { border-color: var(--ink) !important; }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="contrast"] * { scroll-behavior: auto; } }

/* ---------- neon glow: decoration on marks only (never on reading text), no animation ---------- */
[data-theme="neon"] .brand .bm-now,
[data-theme="neon"] .g-nowline { filter: drop-shadow(0 0 6px var(--glow-b)); }
[data-theme="neon"] .g-dayn.today::before { box-shadow: 0 0 12px var(--glow-b); }
[data-theme="neon"] .g-bar .fill,
[data-theme="neon"] .br-bar,
[data-theme="neon"] .nav-ind,
[data-theme="neon"] .pt-track i,
[data-theme="neon"] .pjd-meter i { box-shadow: 0 0 10px var(--glow-a); }
[data-theme="neon"] .btn.primary { box-shadow: 0 0 16px -2px var(--glow-a); }
[data-theme="neon"] h1 { text-shadow: 0 0 22px var(--glow-a); }
[data-theme="neon"] .views button[aria-current="page"] { text-shadow: 0 0 12px var(--glow-a); }
[data-theme="neon"] :focus-visible { outline-color: var(--gold); }
@media (prefers-contrast: more) { [data-theme="neon"] * { text-shadow: none !important; box-shadow: none !important; filter: none !important; } }