/* ===========================================================================
   Style switcher. Deliberately isolated: nothing here inherits from a look's
   stylesheet, and nothing here leaks into the page. Every tile is drawn in the
   colours, typeface and geometry of the direction it selects.
   =========================================================================== */

#sw, #sw *{ box-sizing:border-box; }

#sw{
  position:fixed; z-index:9999; left:1rem; right:auto; bottom:1rem;
  pointer-events:none;
  font-family:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:13px; line-height:1.2; text-align:left;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------ trigger */
#sw-t{
  display:flex; align-items:center; gap:.5rem;
  margin:0 auto 0 0; padding:.62rem .9rem;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:#14161A; color:#F2F0EA;
  font:inherit; font-weight:500; letter-spacing:.02em;
  cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,.28);
  transition:background .18s ease, transform .18s ease;
}
#sw-t:hover{ background:#1E2228; transform:translateY(-1px); }
#sw-t:focus-visible{ outline:2px solid #5BE3A7; outline-offset:2px; }
#sw-t .sw-dot{
  width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  background:var(--sw-dot,#E23B26); box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
#sw-t .sw-cur{ font-weight:700; letter-spacing:.06em; }
#sw-t .sw-car{ font-size:10px; opacity:.6; }

/* -------------------------------------------------------------------- panel */
#sw-p{
  margin:0 0 .55rem 0; padding:.7rem;
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background:#14161A; box-shadow:0 18px 46px rgba(0,0,0,.34);
  display:none;
}
#sw.is-open #sw-p{ display:block; }
#sw-p, #sw-t{ pointer-events:auto; }

#sw-p .sw-hd{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin:.1rem .25rem .6rem; color:#8E959E;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
#sw-p .sw-hd b{ color:#F2F0EA; font-weight:600; letter-spacing:.02em;
  text-transform:none; font-size:11px; }

#sw-g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }

/* --------------------------------------------------------------------- tile */
.sw-b{
  position:relative; display:block; width:104px; min-height:78px;
  padding:.6rem .6rem .55rem;
  cursor:pointer; overflow:hidden; text-align:left; font:inherit;
  transition:transform .16s ease, box-shadow .16s ease;
}
.sw-b:hover{ transform:translateY(-2px); }
.sw-b:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.sw-b .sw-l{ display:block; font-size:30px; line-height:.92; }
.sw-b .sw-n{ display:block; margin-top:.3rem; font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; opacity:.72; }
.sw-b .sw-bar{ display:block; height:3px; width:26px; margin-top:.42rem; }
.sw-b[aria-pressed="true"]{ box-shadow:0 0 0 2px #F2F0EA, 0 0 0 4px #14161A; }
.sw-b[aria-pressed="true"] .sw-n{ opacity:1; }

/* A - The Ledger: ink ground, gold rule, Fraunces */
.sw-b.sw-a{ background:#100F0D; color:#EFE9DC; border:1px solid rgba(201,162,39,.42);
  border-radius:2px; }
.sw-b.sw-a .sw-l{ font-family:"Fraunces", Georgia, serif; font-weight:500; color:#EFE9DC; }
.sw-b.sw-a .sw-n{ color:#C9A227; }
.sw-b.sw-a .sw-bar{ background:#C9A227; }

/* B - Blueprint: paper, square, Archivo, mono label */
.sw-b.sw-b2{ background:#F6F5F2; color:#15181C; border:1px solid #D6D3CB; border-radius:0; }
.sw-b.sw-b2 .sw-l{ font-family:"Archivo", system-ui, sans-serif; font-weight:700;
  letter-spacing:-.02em; }
.sw-b.sw-b2 .sw-n{ font-family:"JetBrains Mono", ui-monospace, monospace; color:#4A4F57; }
.sw-b.sw-b2 .sw-bar{ background:#C4451C; }

/* C - Field: sand, soft radius, Bricolage */
.sw-b.sw-c{ background:#F1EADD; color:#12211F; border:1px solid #E4D9C6; border-radius:14px; }
.sw-b.sw-c .sw-l{ font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:800; }
.sw-b.sw-c .sw-n{ color:#4C5F5C; }
.sw-b.sw-c .sw-bar{ background:#D2703A; border-radius:3px; }

/* D - Switchboard: terminal black, phosphor green */
.sw-b.sw-d{ background:#07090A; color:#CFE3DC; border:1px solid #2A3A40; border-radius:3px; }
.sw-b.sw-d .sw-l{ font-family:"Space Grotesk", system-ui, sans-serif; font-weight:700;
  color:#5BE3A7; }
.sw-b.sw-d .sw-n{ font-family:"IBM Plex Mono", ui-monospace, monospace; color:#8AA6A0; }
.sw-b.sw-d .sw-bar{ background:#5BE3A7; }

/* E - Broadsheet: newsprint, Playfair, double rule */
.sw-b.sw-e{ background:#F7F4EC; color:#131211; border:1px solid #CFC7B6; border-radius:0;
  border-top:3px double #131211; }
.sw-b.sw-e .sw-l{ font-family:"Playfair Display", Georgia, serif; font-weight:900; }
.sw-b.sw-e .sw-n{ font-family:"Archivo Narrow", system-ui, sans-serif; color:#4A463F; }
.sw-b.sw-e .sw-bar{ background:#A81E12; }

/* F - Assembly: hard black rule, Anton, primary red */
.sw-b.sw-f{ background:#F2EFE6; color:#0E0E0C; border:2px solid #0E0E0C; border-radius:0; }
.sw-b.sw-f .sw-l{ font-family:"Anton", Impact, sans-serif; font-weight:400;
  letter-spacing:.01em; text-transform:uppercase; }
.sw-b.sw-f .sw-n{ color:#3A3A34; }
.sw-b.sw-f .sw-bar{ background:#E23B26; }

/* ------------------------------------------------------------------- mobile */
@media(max-width:640px){
  #sw{ left:.6rem; right:.6rem; bottom:.6rem; }
  #sw-p{ padding:.6rem; }
  #sw-g{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; }
  .sw-b{ width:100%; padding:.5rem .5rem .45rem; }
  .sw-b .sw-l{ font-size:24px; }
  .sw-b .sw-n{ font-size:8.5px; letter-spacing:.06em; }
}
@media(max-width:380px){
  #sw-g{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media print{ #sw{ display:none; } }
@media(prefers-reduced-motion:reduce){
  #sw-t, .sw-b{ transition:none; }
  #sw-t:hover, .sw-b:hover{ transform:none; }
}