/* ==========================================================================
   Skins — the ALXEVT corporate looks, ported from qobeat/sndcld.alxevt.com

   Three looks, named there and kept named here:
     dawn   The app's own look: artwork, colour drawn from the cover.
     day    Paper and ink. The elapsed time is the interface.
     night  Split-flap departure board. The clock reads as flaps.

   Every rule below is a design-token override on [data-skin]. There is no
   layout, spacing or component rule in this file by design: selecting a skin
   repaints the site rather than rebuilding it. It cannot move anything on its
   own — though Day swaps --font-chrome for a monospace face, and text set in a
   wider face reflows, so its genre chips wrap a line earlier than Classic's.
   With no skin selected nothing here applies and the default renders untouched.

   Night carries the brand's rationed signal colour, amber, in place of the
   default orange — in sndcld the mark is the only amber on the board, and the
   accent is what has to stay readable against a dark ground.
   ========================================================================== */

/* ---------- dawn: warm paper, artwork-led ----------------------------------

   Sunrise: a warm cream ground and a rose accent. The first cut of this skin
   used #f7f3ee against the default #f2f2f2 — ΔE 3.0, barely past the just-
   noticeable difference — and left --orange alone, which is the single most
   used token in the stylesheet. It was a skin you could not see. The ground and
   the accent both carry the look now, and test/reflect.mjs measures the
   distance rather than trusting the values to differ.
   -------------------------------------------------------------------------- */

[data-skin="dawn"] {
  --orange: #e0466f;
  --orange-hover: #ec6187;
  --page-bg: #f7ead9;
  --surface: #fffaf2;
  --highlight: #f2e2cd;
  --border: #e8d6bd;
  --border-strong: #cdb393;
  --text: #4a3d2f;
  --text-strong: #241a10;
  --text-dim: #6f5f4c;
  --text-muted: #a08d74;
  --link: #4a3d2f;
  --black: #2a1d10;
  --btn-bg: linear-gradient(#fffaf2, #f2e2cd);
  --input-bg: #fffaf2;
  --shadow-float: 0 1px 6px rgba(92, 62, 20, 0.20);
}

/* ---------- day: paper and ink ----------------------------------------------

   A sheet of white paper on a cool desk, read in ink rather than orange. The
   ground has to be the desk and not the paper: the first cut set --page-bg to
   #f4f5f2 and --surface to #ffffff, which is the default's #fff exactly, so the
   whole skin came to ΔE 1.8 from Classic. Now the ground carries the tint and
   the cards stay pure white against it.
   -------------------------------------------------------------------------- */

[data-skin="day"] {
  --orange: #2563cf;
  --orange-hover: #3d7ce8;
  --page-bg: #d7dee7;
  --surface: #ffffff;
  --highlight: #e7ecf2;
  --border: #c3ccd8;
  --border-strong: #9aa6b5;
  --text: #22262b;
  --text-strong: #0b0d0f;
  --text-dim: #4d545c;
  --text-muted: #7c8794;
  --link: #22262b;
  --black: #14171a;
  --btn-bg: linear-gradient(#ffffff, #e7ecf2);
  --input-bg: #ffffff;
  --font-chrome: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow-float: 0 1px 6px rgba(20, 30, 45, 0.22);
}

/* ---------- night: split-flap departure board ------------------------------ */

[data-skin="night"] {
  --orange: #ffb531;
  --orange-hover: #ffc65a;
  --page-bg: #0d0e10;
  --surface: #17191d;
  --highlight: #1e2024;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f1eee4;
  --text-strong: #ffffff;
  --text-dim: #b9bcc2;
  --text-muted: #8d9096;
  --link: #f1eee4;
  --black: #08090b;
  --btn-bg: linear-gradient(#20232a, #16181c);
  --input-bg: #1e2024;
  --font-chrome: ui-monospace, Menlo, Consolas, monospace;
  /* A black shadow is invisible on a black ground, so this one leans on spread
     and depth instead of opacity. Note the name: the token was `--shadow-card`
     and nothing in styles.css ever consumed it, so this override did nothing at
     all until the seam was wired up. */
  --shadow-float: 0 10px 26px rgba(0, 0, 0, 0.7);
}

/* The search field sits on the dark header, so on a dark skin its own border
   has to lift off that ground rather than sink into it. */
[data-skin="night"] .sc-search input { border-color: rgba(255, 255, 255, 0.18); }

/* ==========================================================================
   The look switcher

   One button, cycling through the looks — the shape the reference uses. It sits
   in a row with the preference toggles and shares their shape, so that shape is
   defined once in styles.css; what stays here is the part a skin actually
   changes.
   ========================================================================== */

.skin-switch { flex-shrink: 0; }

/* The button's shape lives with the other header controls in styles.css, under
   `.hdr-toggle, .skin-switch__button` — it is header chrome, not a skin. Only
   the mark's accent belongs here, because the accent is what a skin changes. */
.skin-switch__button svg { color: var(--orange); }

/* ---------- sign-in control ------------------------------------------------ */

.auth-control { flex-shrink: 0; }

.auth-control__in,
.auth-control__user {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #ccc;
  font-family: var(--font-chrome);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 160px;
}
.auth-control__in:hover,
.auth-control__user:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.auth-control__user img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.auth-control__user span { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 700px) {
  .auth-control__user span { display: none; }
}