/* ==========================================================================
   muddermis — the design switcher chip
   css/design-chip.css

   The one piece of UI that appears on every page of the site, in all four
   designs: a small chip in the bottom-right corner that switches between the
   poster, the departures board, Orbital and Frontline. js/design.js builds
   it.

   Self-contained, and prefixed .dsw- so it can sit inside any of the four
   stylesheets' worlds without colliding. It takes its look from
   html[data-design], which js/design.js keeps in step with whatever the page
   is currently wearing — so the chip always belongs to the design around it.
   ========================================================================== */

.dsw {
  --dsw-bg: #fff;
  --dsw-fg: #1a1a1a;
  --dsw-line: rgba(26, 26, 26, .25);
  --dsw-dot: #2356c7;
  --dsw-radius: 10px;
  --dsw-border: 1px;

  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- The button ---------- */
.dsw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  background: var(--dsw-bg);
  color: var(--dsw-fg);
  border: var(--dsw-border) solid var(--dsw-line);
  border-radius: var(--dsw-radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.dsw-toggle:hover { transform: translateY(-1px); }
.dsw-toggle:focus-visible { outline: 2px solid var(--dsw-dot); outline-offset: 2px; }

.dsw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dsw-dot);
  flex: 0 0 auto;
}
.dsw-caret { opacity: .55; font-size: 9px; }

/* ---------- The list ---------- */
.dsw-list {
  display: none;
  flex-direction: column;
  min-width: 168px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--dsw-bg);
  border: var(--dsw-border) solid var(--dsw-line);
  border-radius: var(--dsw-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.dsw.is-open .dsw-list { display: flex; }
.dsw.is-open .dsw-toggle { border-color: var(--dsw-dot); }

.dsw-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  color: var(--dsw-fg);
  text-decoration: none;
  border-radius: calc(var(--dsw-radius) - 4px);
  transition: background .15s ease;
}
.dsw-list a:hover { background: rgba(128, 128, 128, .16); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .dsw-list a:hover { background: color-mix(in srgb, var(--dsw-dot) 14%, transparent); }
}
.dsw-list a:focus-visible { outline: 2px solid var(--dsw-dot); outline-offset: -2px; }

/* The swatch is each design's own colour, so the list reads as four designs
   rather than four words. */
.dsw-sw {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 1px solid var(--dsw-line);
}
.dsw-sw--poster     { background: #f3efe6; box-shadow: inset 0 0 0 3px #d83a2e; border-radius: 50%; }
.dsw-sw--departures { background: #efebe2; box-shadow: inset 0 0 0 3px #14110f; }
.dsw-sw--orbital    { background: #04060c; box-shadow: inset 0 0 0 3px #4d8cff; border-radius: 3px; }
.dsw-sw--frontline  { background: #0b0d08; box-shadow: inset 0 0 0 3px #f0c020; }

.dsw-name { flex: 1; }
.dsw-live { opacity: .5; font-size: 9px; }
.dsw-list a[aria-current="true"] .dsw-name { font-weight: 700; }

/* ---------- Per-design dress ---------- */
html[data-design="poster"] .dsw {
  --dsw-bg: #f3efe6;
  --dsw-fg: #1a1a1a;
  --dsw-line: #1a1a1a;
  --dsw-dot: #d83a2e;
  --dsw-radius: 0;
  --dsw-border: 3px;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
}

html[data-design="departures"] .dsw {
  --dsw-bg: #14110f;
  --dsw-fg: #efebe2;
  --dsw-line: #14110f;
  --dsw-dot: #7de08a;
  --dsw-radius: 0;
  --dsw-border: 2px;
}
html[data-design="departures"] .dsw-list { --dsw-line: rgba(239, 235, 226, .24); }

html[data-design="orbital"] .dsw {
  --dsw-bg: rgba(8, 12, 21, .92);
  --dsw-fg: #e6edf8;
  --dsw-line: rgba(120, 170, 235, .28);
  --dsw-dot: #4d8cff;
  --dsw-radius: 12px;
  --dsw-border: 1px;
}
html[data-design="orbital"] .dsw-toggle,
html[data-design="orbital"] .dsw-list {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-design="orbital"] .dsw-dot { box-shadow: 0 0 10px var(--dsw-dot); }

html[data-design="frontline"] .dsw {
  --dsw-bg: rgba(11, 13, 8, .94);
  --dsw-fg: #ece6d3;
  --dsw-line: rgba(236, 230, 211, .22);
  --dsw-dot: #f0c020;
  --dsw-radius: 0;
  --dsw-border: 1px;
  letter-spacing: .2em;
}
html[data-design="frontline"] .dsw-toggle,
html[data-design="frontline"] .dsw-list {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Square, like every chip on the war table. */
html[data-design="frontline"] .dsw-dot { border-radius: 0; }
html[data-design="frontline"] .dsw-list a:hover { color: #0b0d08; background: var(--dsw-dot); }

/* ---------- Small screens ----------
   Drop the word, keep the dot: the chip has to share the bottom edge with
   whatever the page itself puts there. */
@media (max-width: 560px) {
  .dsw-label { display: none; }
  .dsw-toggle { padding: 9px 10px; }
}

@media print { .dsw { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dsw-toggle, .dsw-list a { transition: none; }
  .dsw-toggle:hover { transform: none; }
}