/* The willperlak.com theme.
 *
 * Borrows the landing page's vocabulary on purpose: near-black starfield,
 * Comic Sans, ridged purple frames, the cyan double border, the yellow
 * accent. Every rule here is scoped under [data-theme="retro"] because
 * clean.css is linked at the same time — an unscoped rule would leak onto
 * the other theme the moment someone switches back. base.css owns layout;
 * this file only ever sets what base.css deferred: colour, border texture,
 * font, and the one restrained animation.
 */

/* Comic Sans MS ships with Windows and macOS but not with iOS, Android or most
   Linux boxes. --font-body used to end in the generic `cursive`, which is what
   those platforms actually got — and on iOS Safari `cursive` resolves to Snell
   Roundhand, a formal copperplate script, which is the wrong joke entirely.
   Comic Relief is a metrically equivalent libre clone of Comic Sans MS (SIL
   OFL), so it stands in without reflowing a thing.

   The edge serves the font at /fonts/ on this origin (willperlak.com's Caddy),
   so the app no longer carries its own copy; a bare local `npm start` has no
   /fonts/ and falls back down the stack. Never a CDN: the CSP is
   `default-src 'none'` with `font-src 'self'`. @font-face cannot be scoped to
   a theme, but only retro's --font-body (Kit's retro-tokens.css) names the
   family, so a visitor on Clean never downloads the file. */
@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-700-normal.woff2") format("woff2");
}

/* The house tokens (--bg, --surface, --text, --text-muted, --link, the
   borders, accent, focus, the toast colours, radii, the Comic stack) are
   Kit's, in css/kit/retro-tokens.css. Only Scheduler's own tokens stay here:
   the calendar's bucket fills, saturated and legible — this theme is a
   period pastiche, not an excuse for the low-contrast grey-on-black that
   period actually shipped. */
:root[data-theme="retro"] {
  --bucket-green-bg: #33ff33;
  --bucket-green-fg: #003300;
  --bucket-yellow-bg: #ffee00;
  --bucket-yellow-fg: #3d3300;
  --bucket-orange-bg: #ff9900;
  --bucket-orange-fg: #331400;
  --bucket-red-bg: #b30000;
  --bucket-red-fg: #ffeeee;
  --bucket-none-bg: #2a0033;
  --bucket-none-fg: #e6ccff;
}

@keyframes retro-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

/* The starfield lives on a fixed pseudo-element behind #app rather than on
 * body directly, so it can twinkle without ever touching anything readable —
 * "restrained" here means the animation is confined to a background layer,
 * not that there isn't one.
 */
[data-theme="retro"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 25% 65%, #fff, transparent),
    radial-gradient(2px 2px at 35% 15%, #fff, transparent),
    radial-gradient(1px 1px at 45% 80%, #fff, transparent),
    radial-gradient(1px 1px at 55% 35%, #fff, transparent),
    radial-gradient(2px 2px at 65% 55%, #fff, transparent),
    radial-gradient(1px 1px at 75% 10%, #fff, transparent),
    radial-gradient(1px 1px at 85% 75%, #fff, transparent),
    radial-gradient(2px 2px at 95% 40%, #fff, transparent),
    radial-gradient(1px 1px at 5% 90%, #fff, transparent),
    radial-gradient(120px 120px at 80% 25%, rgba(200,120,255,0.25), transparent 70%),
    radial-gradient(160px 160px at 15% 70%, rgba(80,160,255,0.22), transparent 70%);
  background-repeat: repeat;
  background-attachment: fixed;
  animation: retro-twinkle 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="retro"] body { animation: none; }
}

[data-theme="retro"] #topbar {
  background: var(--surface-alt);
  border-bottom: 4px double var(--border-alt);
}

[data-theme="retro"] #brand {
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border), -1px -1px 0 var(--border-alt);
}

[data-theme="retro"] #sidebar {
  background: var(--surface-alt);
  border-right: 3px ridge var(--border);
}

[data-theme="retro"] .nav-item {
  background: #1a002a;
  color: var(--accent);
  border: 2px outset var(--border);
  font-family: inherit;
}

/* The appearance menu on a phone: the summary is a button like the nav
   items, and its panel floats below the topbar in a dropdown's frame. */
[data-theme="retro"] #appearance-toggle {
  background: #1a002a;
  color: var(--accent);
  border: 2px outset var(--border);
}

[data-theme="retro"] #appearance-menu[open] #appearance-toggle { border-style: inset; }

@media (max-width: 700px) {
  [data-theme="retro"] #appearance {
    background: var(--surface);
    border: 3px outset var(--border);
    outline: 4px double var(--border-alt);
    box-shadow: 4px 4px 0 #000;
  }
  [data-theme="retro"] #appearance .wp-appearance-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

[data-theme="retro"] .nav-item:hover {
  background: #2a0044;
}

[data-theme="retro"] .nav-item[aria-current="page"] {
  background: var(--border);
  color: #000010;
  border-style: inset;
}

[data-theme="retro"] .sidebar-note { color: var(--text-muted); }

[data-theme="retro"] .view-head h2 {
  color: var(--focus);
}

[data-theme="retro"] .empty-note,
[data-theme="retro"] .hint {
  color: var(--text-muted);
}

/* ================================ Cards ================================= */

[data-theme="retro"] .person-card,
[data-theme="retro"] .saved-calendar,
[data-theme="retro"] .day-detail-row,
[data-theme="retro"] .commitment-row {
  background: var(--surface);
  border: 2px solid var(--border-alt);
  color: var(--text);
}

[data-theme="retro"] .check-list li {
  background: var(--surface);
  border: 1px solid var(--border-alt);
}

/* ================================ Panels ================================= */

[data-theme="retro"] .panel,
[data-theme="retro"] #scheduler-controls,
[data-theme="retro"] #calendar-pane,
[data-theme="retro"] #day-detail,
[data-theme="retro"] #additional-commitments {
  background: rgba(0, 0, 20, 0.75);
  border: 4px double var(--border-alt);
}

[data-theme="retro"] .field-row input,
[data-theme="retro"] .field-row select,
[data-theme="retro"] .field-row textarea,
[data-theme="retro"] #commitment-person,
[data-theme="retro"] #export-output,
[data-theme="retro"] #import-input {
  background: #0d0018;
  color: var(--text);
  border: 2px inset var(--border);
}

[data-theme="retro"] .field-row label { color: #ffee00; }

[data-theme="retro"] .checklist-search {
  background: #0d0018;
  color: var(--text);
  border: 2px inset var(--border);
}

[data-theme="retro"] button.group-chip[aria-pressed="true"]:not(.primary):not(.danger):not(.nav-item):not(.wp-segment):not(.cal-day):not(.person-card-open) {
  background: #1a002a;
  color: var(--accent);
  border-style: inset;
  font-weight: 700;
}

[data-theme="retro"] .sched-day select.sched-copy {
  background: #0d0018;
  color: var(--text);
  border: 2px inset var(--border);
}

[data-theme="retro"] button.primary,
[data-theme="retro"] .primary {
  background: var(--accent);
  color: var(--accent-text);
  border: 3px outset #66ff66;
}

[data-theme="retro"] button.danger,
[data-theme="retro"] .danger {
  background: var(--danger);
  color: var(--danger-text);
  border: 3px outset #ff8888;
}

/* Every button that is not a primary or a danger, not just the ones inside
   .form-actions. The month arrows, Today, New and Load Saved Calendar all sit
   outside that container, and without this they fell through to the browser's
   default button chrome: #eaeaea body text on the UA's #efefef buttonface,
   which measures 1.04:1 and is simply invisible. Excluding the buttons that
   carry their own look is deliberate — this selector out-specifies .nav-item
   and .cal-day, so source order would not have saved them. */
[data-theme="retro"] button:not(.primary):not(.danger):not(.nav-item):not(.wp-segment):not(.cal-day):not(.person-card-open) {
  background: #1a002a;
  color: var(--accent);
  border: 2px outset var(--border);
  padding: 7px 12px;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}

[data-theme="retro"] button:not(.primary):not(.danger):not(.nav-item):not(.wp-segment):not(.cal-day):not(.person-card-open):hover {
  background: #2a0044;
  color: #66ff66;
}

[data-theme="retro"] a.button {
  background: #1a002a;
  color: var(--accent);
  border: 2px outset var(--border);
  border-radius: 0;
}

[data-theme="retro"] a.button:hover {
  background: #2a0044;
  color: #66ff66;
}

/* The roster entry is a person's name, not a control. It is a <button> only
   so it is reachable from the keyboard. */
[data-theme="retro"] .person-card-open {
  background: none;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

[data-theme="retro"] .person-card-open:hover { text-decoration: underline; }

[data-theme="retro"] .errors {
  background: #330000;
  color: #ffcccc;
  border: 2px solid var(--danger);
}

/* ====================== Availability / schedule grid ===================== */

[data-theme="retro"] .sched-day {
  background: var(--surface);
  border: 1px solid var(--border-alt);
}

[data-theme="retro"] .sched-interval {
  background: #001a00;
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* ================================ Calendar ================================ */

[data-theme="retro"] .cal-weekday { color: #00ccff; }

[data-theme="retro"] .cal-day {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
}

[data-theme="retro"] .cal-day[data-bucket="green"] {
  background: var(--bucket-green-bg);
  color: var(--bucket-green-fg);
}
[data-theme="retro"] .cal-day[data-bucket="yellow"] {
  background: var(--bucket-yellow-bg);
  color: var(--bucket-yellow-fg);
}
[data-theme="retro"] .cal-day[data-bucket="orange"] {
  background: var(--bucket-orange-bg);
  color: var(--bucket-orange-fg);
}
[data-theme="retro"] .cal-day[data-bucket="red"] {
  background: var(--bucket-red-bg);
  color: var(--bucket-red-fg);
}
[data-theme="retro"] .cal-day[data-bucket="none"] {
  background: var(--bucket-none-bg);
  color: var(--bucket-none-fg);
}

[data-theme="retro"] .cal-outside { opacity: 0.4; }

[data-theme="retro"] .cal-today {
  border: 2px solid var(--focus);
  font-weight: bold;
}

[data-theme="retro"] .cal-selected {
  outline: 3px solid #00ffff;
  outline-offset: -3px;
}

[data-theme="retro"] .legend-item { color: var(--text); }
[data-theme="retro"] .legend-item[data-bucket="green"] { --swatch: var(--bucket-green-bg); }
[data-theme="retro"] .legend-item[data-bucket="yellow"] { --swatch: var(--bucket-yellow-bg); }
[data-theme="retro"] .legend-item[data-bucket="orange"] { --swatch: var(--bucket-orange-bg); }
[data-theme="retro"] .legend-item[data-bucket="red"] { --swatch: var(--bucket-red-bg); }
[data-theme="retro"] .legend-item[data-bucket="none"] { --swatch: var(--bucket-none-bg); }

/* The day timeline: each person's colour by index (FEAT-scheduler-7). */
[data-theme="retro"] .timeline-cell[data-color="0"] { --swatch: #ff3b30; }
[data-theme="retro"] .timeline-cell[data-color="1"] { --swatch: #ff9500; }
[data-theme="retro"] .timeline-cell[data-color="2"] { --swatch: #ffcc00; }
[data-theme="retro"] .timeline-cell[data-color="3"] { --swatch: #34c759; }
[data-theme="retro"] .timeline-cell[data-color="4"] { --swatch: #00c7be; }
[data-theme="retro"] .timeline-cell[data-color="5"] { --swatch: #30b0c7; }
[data-theme="retro"] .timeline-cell[data-color="6"] { --swatch: #007aff; }
[data-theme="retro"] .timeline-cell[data-color="7"] { --swatch: #5856d6; }
[data-theme="retro"] .timeline-cell[data-color="8"] { --swatch: #af52de; }
[data-theme="retro"] .timeline-cell[data-color="9"] { --swatch: #ff2d55; }
[data-theme="retro"] .timeline-cell[data-color="all"] { --swatch: var(--bucket-green-bg); }

/* ================================= Toast ================================= */

[data-theme="retro"] #toast {
  border: 3px outset var(--border);
  font-weight: bold;
}

[data-theme="retro"] #toast.toast-info { background: var(--toast-info-bg); color: var(--toast-info-fg); }
[data-theme="retro"] #toast.toast-success { background: var(--toast-success-bg); color: var(--toast-success-fg); }
[data-theme="retro"] #toast.toast-error { background: var(--toast-error-bg); color: var(--toast-error-fg); }

/* ============================== Data view ================================ */

[data-theme="retro"] #export-output,
[data-theme="retro"] #import-input {
  font-family: "Courier New", monospace;
}