/* Bill Splitter — Retro, the willperlak.com house style: near-black
 * starfield, Comic Sans, ridged purple frames, a cyan double border, a
 * yellow accent, square corners. The house tokens come from
 * css/kit/retro-tokens.css; this file adds the member colours, the font and
 * the starfield, and paints every selector. Every rule is scoped under
 * [data-theme="retro"] because clean.css is linked at the same time.
 * static/home/index.html in willperlak.com is the source of truth. */

/* Comic Relief, served once by the edge at /fonts/; listed after Comic Sans
   MS so a machine with the real one never downloads it. Never the generic script face. */
@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"] {
  --member-1-bg: #66ccff; --member-1-fg: #000010;
  --member-2-bg: #ff9966; --member-2-fg: #000010;
  --member-3-bg: #66ff99; --member-3-fg: #000010;
  --member-4-bg: #ffcc66; --member-4-fg: #000010;
  --member-5-bg: #cc99ff; --member-5-fg: #000010;
  --member-6-bg: #ff66cc; --member-6-fg: #000010;
  --member-7-bg: #66ffe0; --member-7-fg: #000010;
  --member-8-bg: #ffee66; --member-8-fg: #000010;
  --stripe-a: #2a0044;
  --stripe-b: #1a002a;
}

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

/* == shell == */
[data-theme="retro"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1px 1px at 10% 20%, #ffffff, transparent),
    radial-gradient(1px 1px at 30% 70%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 55% 35%, #ffffff, transparent),
    radial-gradient(1px 1px at 75% 85%, #ffffff, transparent),
    radial-gradient(1px 1px at 90% 15%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 20% 90%, #ffffff, transparent),
    radial-gradient(ellipse at 80% 20%, rgba(204, 0, 255, 0.10), transparent 60%);
  background-size: 240px 240px, 300px 300px, 360px 360px, 280px 280px, 320px 320px, 260px 260px, 100% 100%;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
}
[data-theme="retro"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-theme="retro"] #demo-bar { background-color: var(--surface); color: var(--text); border-bottom: 3px ridge var(--border); }
[data-theme="retro"] #demo-bar select { background-color: var(--bg); color: var(--text); border: 2px solid var(--border-alt); }
[data-theme="retro"] #topbar { background-color: var(--bg); border-bottom: 4px double var(--border-alt); }
[data-theme="retro"] #brand { color: var(--focus); text-shadow: 2px 2px 0 var(--border); }
[data-theme="retro"] #topbar-title { color: var(--focus); }
[data-theme="retro"] .back-link { color: var(--link); }
[data-theme="retro"] #tabbar { background-color: var(--bg); border-top: 3px ridge var(--border); }
[data-theme="retro"] .tab { color: var(--text-muted); }
[data-theme="retro"] .tab[aria-current="page"] { color: var(--focus); font-weight: 700; }
[data-theme="retro"] .tab-count { background-color: var(--danger); color: var(--danger-text); border-radius: 0; }
[data-theme="retro"] .fab { background-color: var(--accent); color: var(--accent-text); border: 3px outset var(--accent); border-radius: 0; }
[data-theme="retro"] #app-loading { color: var(--focus); }
[data-theme="retro"] .wp-loading { animation: retro-twinkle 1.2s ease-in-out infinite; }
@media (min-width: 768px) {
  [data-theme="retro"] #tabbar { border-top: 0; background-color: transparent; }
  [data-theme="retro"] #app::before { background-color: var(--bg); border-right: 3px ridge var(--border); }
  [data-theme="retro"] .tab[aria-current="page"] { background-color: var(--surface); border: 2px solid var(--focus); }
}

/* == shared components == */
[data-theme="retro"] .card { background-color: var(--surface); border: 3px ridge var(--border); border-radius: 0; }
[data-theme="retro"] .list-row + .list-row,
[data-theme="retro"] .card-row + .card-row { border-top: 1px dashed var(--border); }
[data-theme="retro"] .row-link, [data-theme="retro"] .row-button { color: var(--text); }
[data-theme="retro"] .row-sub, [data-theme="retro"] .muted { color: var(--text-muted); }
[data-theme="retro"] .section-label { color: var(--focus); }
[data-theme="retro"] .view-title { color: var(--focus); }
[data-theme="retro"] .amount { color: var(--text); }
[data-theme="retro"] .amount-pos { color: var(--success-soft-text); }
[data-theme="retro"] .amount-neg { color: var(--danger-soft-text); }
[data-theme="retro"] .amount-zero { color: var(--text-muted); }
[data-theme="retro"] .hero-amount.amount-zero { color: var(--text); }
[data-theme="retro"] .empty { color: var(--text-muted); }

[data-theme="retro"] button.button, [data-theme="retro"] a.button, [data-theme="retro"] .button {
  background-color: var(--surface); color: var(--text); border: 3px outset var(--border); border-radius: 0;
}
[data-theme="retro"] .button.primary { background-color: var(--accent); color: var(--accent-text); border-color: var(--accent); }
[data-theme="retro"] .button.danger { background-color: var(--danger-soft); color: var(--danger-soft-text); border-color: var(--danger); }
[data-theme="retro"] .button:disabled, [data-theme="retro"] .button.primary:disabled { background-color: var(--surface-alt); color: var(--text-muted); border: 3px solid var(--text-faint); }
[data-theme="retro"] .button:active:not(:disabled) { border-style: inset; }
[data-theme="retro"] .link-btn { color: var(--link); }
[data-theme="retro"] .link-btn:disabled { color: var(--text-muted); }
[data-theme="retro"] .link-btn.danger { color: var(--danger-soft-text); }
[data-theme="retro"] #topbar .link-btn.primary { color: var(--accent); }
[data-theme="retro"] #topbar .link-btn:disabled { color: var(--text-muted); }
[data-theme="retro"] .icon-btn { color: var(--text); }

[data-theme="retro"] .segmented { background-color: var(--bg); border: 4px double var(--border-alt); border-radius: 0; }
[data-theme="retro"] .seg-btn { background-color: transparent; color: var(--text); border: 0; border-radius: 0; }
[data-theme="retro"] .seg-btn[aria-selected="true"], [data-theme="retro"] .seg-btn[aria-checked="true"] { background-color: var(--accent); color: var(--accent-text); }

[data-theme="retro"] .chip { background-color: var(--bg); color: var(--text-muted); border: 2px solid var(--border-alt); border-radius: 0; }
[data-theme="retro"] .chip[aria-pressed="false"] .avatar { background-color: var(--surface-alt); color: var(--text-muted); }
[data-theme="retro"] .chip[aria-pressed="true"] { background-color: var(--accent-soft); color: var(--accent-soft-text); border: 2px solid var(--accent); }
[data-theme="retro"] .chip:disabled { border-style: dashed; }

[data-theme="retro"] .field { background-color: var(--bg); color: var(--text); border: 2px inset var(--border); border-radius: 0; }
[data-theme="retro"] .field::placeholder { color: var(--text-faint); }
[data-theme="retro"] .errors { background-color: var(--danger-soft); color: var(--danger-soft-text); border: 2px solid var(--danger); border-radius: 0; }
[data-theme="retro"] .banner { background-color: var(--warning-soft); color: var(--warning-soft-text); border: 2px dashed var(--warning); border-radius: 0; }
[data-theme="retro"] .banner.is-settled { background-color: var(--success-soft); color: var(--success-soft-text); border-color: var(--success); }
[data-theme="retro"] #unavailable-banner { background-color: var(--danger-soft); color: var(--danger-soft-text); border-color: var(--danger); }
[data-theme="retro"] .badge { background-color: var(--bg); color: var(--text); border: 2px solid var(--border-alt); border-radius: 0; }
[data-theme="retro"] .badge-ok { background-color: var(--success-soft); color: var(--success-soft-text); border-color: var(--success); }
[data-theme="retro"] .badge-warn { background-color: var(--warning-soft); color: var(--warning-soft-text); border-color: var(--warning); }
[data-theme="retro"] .is-flagged { background-color: var(--warning-soft); }
[data-theme="retro"] .is-flagged .row-sub, [data-theme="retro"] .is-flagged .muted { color: var(--warning-soft-text); }
[data-theme="retro"] .is-flagged .amount, [data-theme="retro"] .is-flagged .row-title { color: var(--text); }
[data-theme="retro"] .is-unread { background-color: var(--info-soft); }
[data-theme="retro"] .is-unread .row-sub, [data-theme="retro"] .is-unread .row-title { color: var(--info-soft-text); }
[data-theme="retro"] .is-selected { background-color: var(--accent-soft); }
[data-theme="retro"] .is-selected .row-title, [data-theme="retro"] .is-selected .row-sub, [data-theme="retro"] .is-selected .amount { color: var(--accent-soft-text); }

[data-theme="retro"] .avatar { border-radius: 0; border: 2px outset var(--border); }
[data-theme="retro"] .avatar-more { background-color: var(--surface-alt); color: var(--text-muted); }

[data-theme="retro"] .meter { background-color: var(--bg); border: 2px inset var(--border); border-radius: 0; }
[data-theme="retro"] .meter-fill { background-color: var(--border-alt); }
[data-theme="retro"] .meter.is-selected .meter-fill { background-color: var(--accent); }

[data-theme="retro"] .sheet { background-color: var(--scrim); }
[data-theme="retro"] .sheet-body { background-color: var(--surface); color: var(--text); border: 4px double var(--border-alt); border-radius: 0; }
[data-theme="retro"] .sheet-title { color: var(--focus); }
[data-theme="retro"] .toast { border-radius: 0; border: 3px ridge 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); }

[data-theme="retro"] .photo-thumb, [data-theme="retro"] .receipt-thumb {
  border-radius: 0; border: 2px solid var(--border-alt); background-color: var(--stripe-b);
  background-image: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);
}
[data-theme="retro"] .photo-gone { color: var(--text-muted); }

/* == screen: check == */
[data-theme="retro"] .flag-text { color: var(--warning-soft-text); }
[data-theme="retro"] .total-final { border-top: 3px ridge var(--border); }

/* == screen: assign == */
[data-theme="retro"] .check-mark { border: 2px inset var(--border); border-radius: 0; color: var(--accent-text); }
[data-theme="retro"] .line-toggle[aria-pressed="true"] .check-mark { background-color: var(--accent); }

/* == screen: scan == */
[data-theme="retro"] .progress-track { background-color: var(--bg); border: 2px inset var(--border); border-radius: 0; }
[data-theme="retro"] .progress-bar { background-color: var(--accent); }

/* == screen: settle == */
[data-theme="retro"] .method { background-color: var(--surface); color: var(--text); border: 3px outset var(--border); border-radius: 0; }
[data-theme="retro"] .method.is-selected { border: 3px solid var(--focus); background-color: var(--surface); }
[data-theme="retro"] .method.is-selected .row-title { color: var(--text); }
[data-theme="retro"] .method.is-selected .row-sub { color: var(--text-muted); }
[data-theme="retro"] .method-icon { background-color: var(--bg); color: var(--focus); border: 2px solid var(--border-alt); border-radius: 0; }
[data-theme="retro"] .plan-arrow { color: var(--focus); }

/* == screen: split == */
[data-theme="retro"] .share-bar { background-color: var(--bg); border: 2px solid var(--border-alt); border-radius: 0; }