/* Shared edition controls are deliberately independent of either page's styles. */
html { scroll-padding-bottom: 110px; }
body { padding-bottom: 104px; }
.design-switcher, .design-switcher * { box-sizing: border-box; }
.design-switcher {
  position: fixed; z-index: 80; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 7px 8px 7px 18px; width: max-content; max-width: calc(100% - 24px);
  border: 1px solid #b9bcb5; border-radius: 8px; background: #fff;
  box-shadow: 0 5px 30px #17191618; color: #171916;
  font: 500 12px/1.2 'Space Grotesk', Arial, sans-serif;
}
.design-switcher .design-caption { flex: none; font-size: 9px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
/* One column per view, however many views there are, always on one row. A column is 100px when the window allows
   (so the bar is the same size on every page, whatever font the page loaded) and an equal share when it does not.
   The highlight is laid out in the first column's grid cell, so it is exactly one column wide, and slides --i
   columns along to the current view. */
.design-options {
  --gap: 3px; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 100px);
  gap: var(--gap); min-width: 0;
}
.design-options::before {
  content: ''; position: absolute; grid-area: 1 / 1 / 2 / 2; inset: 0;   /* end lines too: for a positioned item, auto means the far edge */ border-radius: 4px; background: var(--view);
  transform: translateX(calc(var(--i) * (100% + var(--gap))));
  transition: transform 300ms cubic-bezier(.22,1,.36,1), background 300ms;
}
/* Each view's place in the row (the order edition_views._VIEWS gives the links) and its colour. */
.design-switcher { --i: 0; --view: #171916; }
.design-switcher[data-selected="fable"] { --i: 1; --view: #274e50; }
.design-switcher[data-selected="opus"] { --i: 2; --view: #9c3824; }
.design-switcher[data-selected="composer"] { --i: 3; --view: #0d3b2e; }
.design-switcher[data-selected="grok"] { --i: 4; --view: #241c3d; }
.design-switcher .design-choice {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 46px;
  margin: 0; padding: 6px; border: 0; border-radius: 4px; background: transparent; color: #454a42;
  font: inherit; text-align: center; text-decoration: none; letter-spacing: 0; cursor: pointer;
  transition: color 200ms, background 200ms;
}
.design-switcher .design-choice:hover { background: #1719160a; }
.design-switcher [aria-current] { color: #fff; }
.design-switcher .design-choice:focus-visible { outline: 3px solid #254dff; outline-offset: 3px; }
.design-curtain {
  position: fixed; z-index: 9999; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 20px; background: #254dff; color: #fff; transform: translateY(101%); visibility: hidden; pointer-events: none;
  font-family: 'Space Grotesk', Arial, sans-serif;
}
.design-curtain strong { font: 700 clamp(48px, 12vw, 160px)/1 Arial, sans-serif; letter-spacing: -.065em; }
.design-curtain span { font-size: 11px; letter-spacing: .22em; }
.design-curtain[data-destination="fable"] { background: #e9e3d4; color: #274e50; }
.design-curtain[data-destination="opus"] { background: #14120f; color: #e9e2d2; }
.design-curtain[data-destination="opus"] strong { font: italic 400 clamp(52px, 12vw, 160px)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; } /* a face every page has, so the leaving and arriving curtains match */
.design-curtain[data-destination="opus"] span { color: #e8664c; }
.design-curtain[data-destination="composer"] { background: #0a1210; color: #d4f5e8; }
.design-curtain[data-destination="composer"] strong { font: 600 clamp(40px, 10vw, 140px)/1 'IBM Plex Mono', 'Courier New', monospace; letter-spacing: -.04em; }
.design-curtain[data-destination="composer"] span { color: #3dd9c4; letter-spacing: .28em; }
.design-curtain[data-destination="grok"] { background: #0b0a12; color: #f4efe6; }
.design-curtain[data-destination="grok"] strong { font: 500 clamp(42px, 11vw, 148px)/.9 system-ui, sans-serif; letter-spacing: .16em; }
.design-curtain[data-destination="grok"] span { color: #e2a15c; letter-spacing: .28em; }
[data-design-phase="leave"] .design-curtain { visibility: visible; pointer-events: auto; animation: design-cover 340ms cubic-bezier(.65,0,.35,1) both; }
[data-design-phase="arrive"] .design-curtain { visibility: visible; transform: translateY(0); pointer-events: auto; }
/* Arriving: the page paints before the curtain element is parsed (it closes the body), so hide the page and fill
   the window with the curtain colour from the first paint; the curtain itself stays visible inside the hidden body. */
[data-design-phase="arrive"] body { visibility: hidden; }
html[data-design="astra"][data-design-phase="arrive"] { background: #254dff; }
html[data-design="fable"][data-design-phase="arrive"] { background: #e9e3d4; }
html[data-design="opus"][data-design-phase="arrive"] { background: #14120f; }
html[data-design="composer"][data-design-phase="arrive"] { background: #0a1210; }
html[data-design="grok"][data-design-phase="arrive"] { background: #0b0a12; }
[data-design-phase="reveal"] .design-curtain { visibility: visible; animation: design-reveal 500ms cubic-bezier(.65,0,.35,1) both; }
@keyframes design-cover { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes design-reveal { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@media (max-width: 540px) {
  .design-switcher { padding: 6px; gap: 0; bottom: max(12px, env(safe-area-inset-bottom)); }
  .design-switcher .design-caption { display: none; }
}
/* The narrowest phones: five columns leave "Composer" (about 58px at 12px) a 54px column, so the bar takes more of
   the width, the columns sit closer and the labels set a size down. */
@media (max-width: 380px) {
  .design-switcher { max-width: calc(100% - 12px); }
  .design-options { --gap: 2px; }
  .design-switcher .design-choice { padding: 6px 2px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .design-switcher *, .design-options::before { transition: none !important; }
  .design-curtain { display: none !important; animation: none !important; }
}
@media print { .design-switcher, .design-curtain { display: none !important; } body { padding-bottom: 0; } }