/* Easter egg: the "cs16" theme, in the colours of the Counter-Strike 1.6 interface, after cs16.css by
   Samuel (https://cs16.samke.me, MIT license). Turned on and off with the Konami code (theme
   controller), on screen only. Olive panels, raised and sunken bevels, square corners, Tahoma, a yellow accent. */

@media screen {
  :root[data-theme="cs16"] {
    --cs-bg: #4a5942;
    --cs-bg-dark: #3e4637;
    --cs-light: #8c9284;
    --cs-dark: #292c21;
    --cs-accent: #c4b550;
    --cs-black: #000000;
    --raised: var(--cs-light) var(--cs-dark) var(--cs-dark) var(--cs-light);
    --sunken: var(--cs-dark) var(--cs-light) var(--cs-light) var(--cs-dark);

    --color-brand: var(--cs-accent);
    --color-brand-strong: #958831;
    --color-brand-text: var(--cs-accent);
    --color-brand-soft: #55654b;
    --color-brand-ring: rgba(0, 0, 0, .8);
    --color-on-brand: var(--cs-dark);

    --color-canvas: var(--cs-bg-dark);
    --color-surface: var(--cs-bg);
    --color-surface-soft: #445240;
    --color-ink: #ffffff;
    --color-text: #dedfd6;
    --color-muted: #a0aa95;
    --color-border: var(--cs-dark);
    --color-border-strong: var(--cs-light);
    --color-input: var(--cs-bg-dark);
    --color-hover: #52624a;

    --color-info: #8fb0c4;     --color-info-soft: #3f4d4a;     --color-info-text: #b9d2e0;
    --color-success: #9cc06a;  --color-success-soft: #46573a;  --color-success-text: #c4e09a;
    --color-warning: var(--cs-accent); --color-warning-soft: #545236; --color-warning-text: #e6d77a;
    --color-danger: #c8584d;   --color-danger-soft: #5a4136;   --color-danger-text: #f0a493;
    --color-tooltip: var(--cs-dark);

    --font: Tahoma, Verdana, "Segoe UI", sans-serif;
    --font-display: var(--font);
    --radius-sm: 0; --radius: 0; --radius-lg: 0;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 0 0 1px var(--cs-black);
    color-scheme: dark;
    scrollbar-color: var(--cs-light) #5a6a50;
  }

  [data-theme="cs16"] body { font-size: 0.95rem; }
  [data-theme="cs16"] ::selection { background: var(--cs-accent); color: var(--cs-dark); }
  [data-theme="cs16"] :focus-visible { outline: 1px dotted var(--cs-accent); outline-offset: -4px; }
  [data-theme="cs16"] :is(h1, h2, h3, .page-title, .dash-title, .reader-title, .hero-title) { letter-spacing: 0; }
  [data-theme="cs16"] :is(.page-title, .dash-title, .reader-title) { color: var(--cs-accent); }

  /* Raised panels and buttons, sunken fields: every corner square. */
  [data-theme="cs16"] :is(.app-panel, .plan-step, .track-dashboard, .panel-card, .module-hero, .quiz-start, .question, .stat,
    .ctx-link, .choice, .answer-list li, .hero, .next-step, .icon-button, .recap-col .callout, .reader-prose .callout,
    .result-banner, .feedback, .template, .empty-state, .card, .flash, .dialog, .theme-switch-options button[aria-pressed="true"]) {
    border: 1px solid; border-color: var(--raised); border-radius: 0; box-shadow: none;
  }
  [data-theme="cs16"] :is(.button, .button-secondary, .button-danger) {
    background: var(--cs-bg); color: var(--color-ink); border: 1px solid; border-color: var(--raised); border-radius: 0; box-shadow: none; filter: none;
  }
  [data-theme="cs16"] :is(.button, .button-secondary):hover:not([disabled]) { color: var(--cs-accent); filter: none; border-color: var(--raised); }
  [data-theme="cs16"] :is(.button, .button-secondary, .button-danger, .icon-button):active { border-color: var(--sunken); }
  [data-theme="cs16"] .button:not(.button-secondary):not(.button-danger) { color: var(--cs-accent); }
  [data-theme="cs16"] .hero .button { background: var(--cs-bg); color: var(--cs-accent); }
  [data-theme="cs16"] :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea),
  [data-theme="cs16"] .nav-search input[type="search"] {
    background: var(--cs-bg-dark); border: 1px solid; border-color: var(--sunken); border-radius: 0; color: var(--color-ink);
  }
  [data-theme="cs16"] :is(input, select, textarea):focus { box-shadow: none; border-color: var(--sunken); outline: 1px solid var(--cs-black); }

  /* The frame: the menu and the bars in the panel colour, separated by a dark line. */
  [data-theme="cs16"] :is(.app-sidebar, .app-topbar, .module-bar, .focus-top, .actionbar, .ctx) { background: var(--cs-bg); border-color: var(--cs-dark); }
  [data-theme="cs16"] .reader-page { background: var(--cs-bg-dark); }
  [data-theme="cs16"] .logo::before { background: var(--cs-bg); color: var(--cs-accent); border: 1px solid; border-color: var(--raised); border-radius: 0; }
  [data-theme="cs16"] .side-nav a { border-radius: 0; }
  [data-theme="cs16"] .side-nav a.is-active, [data-theme="cs16"] .side-nav .rail-module.is-active { background: var(--cs-bg-dark); color: var(--cs-accent); }
  [data-theme="cs16"] .side-nav a:hover { background: var(--cs-bg-dark); color: var(--cs-accent); }

  /* The resume block: a panel, not a yellow slab. */
  [data-theme="cs16"] .hero { background: var(--cs-bg); color: var(--color-text); }
  [data-theme="cs16"] .hero::after { display: none; }
  [data-theme="cs16"] .hero .eyebrow { color: var(--color-muted); }
  [data-theme="cs16"] .hero-title { color: var(--cs-accent); }

  /* Progress: sunken troughs filled with blocks, like the loading bar of the game. */
  [data-theme="cs16"] :is(.bar, .progress-bar) { height: 14px; padding: 2px; background: var(--cs-bg-dark); border: 1px solid; border-color: var(--sunken); border-radius: 0; }
  [data-theme="cs16"] :is(.bar, .progress-bar) span {
    border-radius: 0; background: repeating-linear-gradient(90deg, var(--cs-accent) 0 7px, transparent 7px 9px);
  }
  [data-theme="cs16"] .dots i { border-radius: 0; height: 8px; }
  [data-theme="cs16"] :is(.plan-num, .choice-letter, .pill, .chip, .badge-icon, .app-avatar, .side-nav .rail-module b, .side-nav .rail-lesson i, .result-medal) { border-radius: 0; }
  [data-theme="cs16"] .plan-step.is-now { border-color: var(--cs-accent); }
  [data-theme="cs16"] .badge.is-earned .badge-icon, [data-theme="cs16"] .badge-exam.is-earned .badge-icon { background: var(--cs-accent); box-shadow: none; }
  [data-theme="cs16"] .choice:has(.choice-input:checked) { background: var(--cs-bg-dark); border-color: var(--sunken); }
  [data-theme="cs16"] .choice:hover { border-color: var(--raised); color: var(--cs-accent); }
}