/* Account — the willperlak.com theme.
 *
 * The house style from WORKSPACE.md, spoken in this app's markup: near-black
 * starfield, Comic Sans, ridged purple frames, a cyan double border, a yellow
 * accent, square corners. There is no shared stylesheet across the apps and
 * there is not meant to be one — what they share is a vocabulary, and
 * static/home/index.html in willperlak.com is its source of truth.
 *
 * Every rule 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 somebody switched back. base.css owns layout; this file only sets
 * what base.css deferred — colour, border texture, the font, one animation.
 *
 * The house tokens themselves (--bg, --surface, --text, --accent, --focus,
 * --radius, --font-body, and the --toast-* aliases) come from
 * css/kit/retro-tokens.css, linked before this file (clean-theme plan,
 * section 4); this file only restates the avatar hue tints, which are
 * app-local and stay outside the kit's contract.
 */

/* Comic Sans MS ships with Windows and macOS but not with iOS, Android or
   most Linux boxes. The stack must not end in the generic script face: on iOS
   Safari that resolves to Snell Roundhand, a formal copperplate, which is the
   wrong joke entirely. Comic Relief is a metrically equivalent libre clone
   (SIL OFL, ../fonts/OFL.txt), so it stands in without reflowing a line.

   Self-hosted, never a CDN: the CSP is `default-src 'none'` with `font-src
   'self'`, and a CDN would mean punching a hole in it for every app in the
   workspace. @font-face cannot be scoped to a theme, but only --font-body
   names the family and clean.css never does, so a visitor on Clean never
   downloads the file — and neither does a machine that has the real thing,
   because Comic Relief is listed second. */
@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");
}

:root[data-theme="retro"] {
  /* Avatar colours, picked by id modulo ten. Bright fills with near-black
     initials: ten hues that stay apart from each other on a dark page. */
  --hue-0-bg: #ff66cc; --hue-0-fg: #2b0018;
  --hue-1-bg: #66ccff; --hue-1-fg: #001a2b;
  --hue-2-bg: #66ff99; --hue-2-fg: #00291a;
  --hue-3-bg: #ffcc66; --hue-3-fg: #2b1a00;
  --hue-4-bg: #cc99ff; --hue-4-fg: #1a0033;
  --hue-5-bg: #ff9966; --hue-5-fg: #2b0d00;
  --hue-6-bg: #66ffe0; --hue-6-fg: #002b26;
  --hue-7-bg: #ffee66; --hue-7-fg: #2b2600;
  --hue-8-bg: #99ff66; --hue-8-fg: #1a2b00;
  --hue-9-bg: #ff8888; --hue-9-fg: #2b0000;
}

/* The starfield, drawn entirely in CSS so the page never fetches an image —
   the two woff2 files are the only thing this theme ever requests. Copied in
   spirit from static/home/index.html, which is the canonical version. */
@keyframes account-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

[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(1px 1px at 15% 45%, #fff, transparent),
    radial-gradient(1px 1px at 30% 95%, #fff, transparent),
    radial-gradient(2px 2px at 50% 5%, #fff, transparent),
    radial-gradient(1px 1px at 70% 85%, #fff, transparent),
    radial-gradient(120px 120px at 80% 25%, rgba(200, 120, 255, 0.28), transparent 70%),
    radial-gradient(160px 160px at 15% 70%, rgba(80, 160, 255, 0.24), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
}

/* The twinkle is confined to a decorative layer that sits behind everything
   readable — "restrained" means the animation never touches type. It hangs
   off body rather than off #app, and at z-index -1 rather than 0, because
   raising #app's own children above it means setting `position` on them,
   which would fight the `position: fixed` the bottom tab bar depends on. */
[data-theme="retro"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 12%, #fff, transparent),
    radial-gradient(1px 1px at 88% 62%, #fff, transparent),
    radial-gradient(1px 1px at 42% 88%, #fff, transparent);
  animation: account-twinkle 6s ease-in-out infinite;
}

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

/* ============================== Controls =================================
 * This comes first on purpose: it is the fallback every <button> in the app
 * lands on, and everything below that carries its own look out-specifies it.
 * Without it any bare button falls through to the browser's own chrome —
 * #eaeaea body text on the UA's #efefef buttonface, which measures 1.04:1
 * and is simply invisible.
 */
/* :not(.wp-segment) so this doesn't reach into Kit's appearance control:
   its segments (css/kit/appearance.css) keep their own look — Kit's retro
   block resets colour and background but relies on nothing else styling
   the border or hover state (review F3). */
[data-theme="retro"] button:not(.wp-segment),
[data-theme="retro"] .button {
  background-color: var(--surface);
  color: var(--accent);
  border: 2px outset var(--border);
  font-family: inherit;
  font-weight: bold;
}

[data-theme="retro"] button:not(.wp-segment):where(:not(:disabled)):hover,
[data-theme="retro"] .button:hover {
  background-color: #2a0044;
  color: #66ff66;
}

[data-theme="retro"] button:not(.wp-segment):where(:not(:disabled)):active,
[data-theme="retro"] .button:active {
  border-style: inset;
}

[data-theme="retro"] input,
[data-theme="retro"] select,
[data-theme="retro"] textarea {
  background-color: var(--surface-alt);
  color: var(--text);
  padding: 0.25rem 0.6rem;
  border: 2px inset var(--border);
}

[data-theme="retro"] ::placeholder { color: var(--text-muted); opacity: 1; }

[data-theme="retro"] .field-row > label,
[data-theme="retro"] .field-label {
  color: var(--focus);
}

/* .primary and .danger take :not(.wp-segment), mirroring the plain button
   rule above (0,2,1), which lifts them to (0,3,0) so they win: without it
   every primary and danger button rendered as a plain one (review RB-1). */
[data-theme="retro"] .primary:not(.wp-segment) {
  background-color: var(--accent);
  color: var(--accent-text);
  border: 3px outset #66ff66;
}

[data-theme="retro"] .primary:not(.wp-segment):where(:not(:disabled)):hover {
  background-color: #66ff66;
  color: var(--accent-text);
}

[data-theme="retro"] .danger:not(.wp-segment) {
  background-color: var(--danger);
  color: var(--danger-text);
  border: 3px outset #ff99aa;
}

[data-theme="retro"] .danger:not(.wp-segment):where(:not(:disabled)):hover {
  background-color: #ff6677;
  color: var(--danger-text);
}

/* Link / text button: no box, no fill. button.link-btn:not(.wp-segment),
   (0,3,1), out-specifies the plain button rule above, (0,2,1), and its
   hover: at (0,2,0) the link button wore an outset box (RA8-2). */
[data-theme="retro"] button.link-btn:not(.wp-segment) {
  color: var(--link);
  font-weight: normal;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  box-shadow: none;
}

[data-theme="retro"] button.link-btn:not(.wp-segment):where(:not(:disabled)):hover {
  background: none;
  color: var(--focus);
}

/* The password Show toggle (RAU1b-1): room for a box at rest, and when
   pressed (the password is shown) a sunken accent-soft box with no
   underline, so the state is not colour alone. The rest padding carries
   the border's width, so pressing moves nothing. (0,5,1) out-specifies
   the link button and its hover (0,4,1). */
[data-theme="retro"] button.link-btn.pw-toggle:not(.wp-segment) {
  padding: calc(0.25rem + 2px) calc(0.6rem + 2px);
}

[data-theme="retro"] button.link-btn.pw-toggle[aria-pressed="true"]:not(.wp-segment) {
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  padding: 0.25rem 0.6rem;
  border: 2px inset var(--border);
  text-decoration: none;
}

/* A disabled button looks it: faded, a not-allowed cursor, and no hover or
   press change (the :hover and :active rules above skip it). Without this a
   disabled Allow looked ready to press (RA8-1). */
[data-theme="retro"] button:disabled:where(:not(.wp-segment)),
[data-theme="retro"] .button:disabled:where(:not(.wp-segment)) {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

[data-theme="retro"] .errors {
  background-color: var(--toast-error-bg);
  color: var(--toast-error-fg);
  border: 2px solid var(--danger);
}

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

/* ============================== The chrome =============================== */

/* Ridged purple above, the cyan double rule below: the marquee frame off the
   landing page, standing in for a <marquee> nobody has to endure. */
[data-theme="retro"] #topbar {
  background-color: var(--surface-alt);
  border-top: 3px ridge var(--border);
  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"] #brand:hover { color: var(--focus); }

/* ================================= Nav =================================== */

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

[data-theme="retro"] .nav-link {
  color: var(--accent);
  border: 2px outset var(--border);
  background-color: var(--surface);
  font-weight: bold;
}

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

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

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

/* 3px ridge outside, 4px double cyan inside: the landing page's two frames,
   one drawn as a border and one as an overlay so the padding stays base's. */
[data-theme="retro"] .panel {
  position: relative;
  background-color: rgba(0, 0, 20, 0.82);
  border: 3px ridge var(--border);
  padding: 1.15rem 1.25rem;
}

[data-theme="retro"] .panel::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 4px double var(--border-alt);
  pointer-events: none;
}

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

[data-theme="retro"] .panel h2,
[data-theme="retro"] .panel h3 { color: var(--border-alt); }

/* ============================ Cards and rows ============================= */

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

[data-theme="retro"] .sess-current {
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="retro"] .app-link {
  background-color: var(--surface);
  border: 2px outset var(--border);
  color: var(--accent);
  font-weight: bold;
}

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

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

/* ================================ Badges ================================= */

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

/* ================================ Avatars ================================ */

/* Square, not round: there is no border radius anywhere in this theme. */
[data-theme="retro"] .avatar {
  border-radius: 0;
  border: 2px outset var(--border);
}

[data-theme="retro"] .avatar[data-hue="0"] { background-color: var(--hue-0-bg); color: var(--hue-0-fg); }
[data-theme="retro"] .avatar[data-hue="1"] { background-color: var(--hue-1-bg); color: var(--hue-1-fg); }
[data-theme="retro"] .avatar[data-hue="2"] { background-color: var(--hue-2-bg); color: var(--hue-2-fg); }
[data-theme="retro"] .avatar[data-hue="3"] { background-color: var(--hue-3-bg); color: var(--hue-3-fg); }
[data-theme="retro"] .avatar[data-hue="4"] { background-color: var(--hue-4-bg); color: var(--hue-4-fg); }
[data-theme="retro"] .avatar[data-hue="5"] { background-color: var(--hue-5-bg); color: var(--hue-5-fg); }
[data-theme="retro"] .avatar[data-hue="6"] { background-color: var(--hue-6-bg); color: var(--hue-6-fg); }
[data-theme="retro"] .avatar[data-hue="7"] { background-color: var(--hue-7-bg); color: var(--hue-7-fg); }
[data-theme="retro"] .avatar[data-hue="8"] { background-color: var(--hue-8-bg); color: var(--hue-8-fg); }
[data-theme="retro"] .avatar[data-hue="9"] { background-color: var(--hue-9-bg); color: var(--hue-9-fg); }

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

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

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

/* ============================ Compact widths ============================= */

@media (max-width: 700px) {
  [data-theme="retro"] #nav {
    border-bottom: 0;
    border-top: 4px double var(--border-alt);
    background-color: var(--surface-alt);
  }
  [data-theme="retro"] .nav-link {
    border: 0;
    background: none;
  }
  [data-theme="retro"] .nav-link[aria-current="page"] {
    background-color: var(--border);
    color: var(--bg);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  [data-theme="retro"] #nav {
    border-bottom: 0;
    border-right: 3px ridge var(--border);
  }
}

[data-theme="retro"] .badge-quiet {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
}
[data-theme="retro"] .invite-url {
  color: var(--link);
}

/* =========================== Agents (agent access) ======================== */

[data-theme="retro"] .scope-group-name { color: var(--border-alt); }
[data-theme="retro"] .scope-row { color: var(--text); }
[data-theme="retro"] .key-value {
  background-color: var(--bg);
  padding: 0.25rem 0.6rem;
  border: 2px inset var(--border);
  color: var(--focus);
}

/* ===================== Friend link QR, new sign-in notice ================= */

/* Black on white in both schemes, not the tokens (RAF2-3): a light-on-dark
   QR is reversed and many scanners do not read it. */
[data-theme="retro"] .qr rect { fill: #fff; }
[data-theme="retro"] .qr path { fill: #000; }
[data-theme="retro"] .notice { border-color: var(--warning); }

/* ===================== Schedule editor (FEAT-account-8) ==================== */

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

[data-theme="retro"] .sched-day-label { color: var(--text); }

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

[data-theme="retro"] .sched-time-label { color: var(--text-muted); }

/* The sticky Save/Clear band (RAX1-7): opaque, as the top bar is. */
[data-theme="retro"] #availability-panel > .form-actions {
  background-color: var(--surface-alt);
  border-top: 3px ridge var(--border);
}