/* ─────────────────────────────────────────────────────────────────────────
   shared/chrome.css — the three controls that are on every page

   Sixteen atlases were built at different times by different hands, so each
   arrived with its own idea of a header: some had a language switch, two had a
   light/dark toggle, none had a way back to the collection. A reader crossing
   from one to the next had to relearn the furniture every time, and worse, the
   furniture disagreed — choosing 中文 in one atlas and following a link landed
   you in English, and half the collection was dark while half was light.

   So the header is not sixteen headers any more. Every page carries the same
   three controls in the same two places:

       ┌─────────────────────────────────────────────────────────────┐
       │ ◖ Collection                                  ☀  中文       │
       └─────────────────────────────────────────────────────────────┘
         the way back                        the two things a reader
                                             changes and expects to
                                             stay changed everywhere

   The mark goes top-left, the switches top-right, because that is where the
   collection's own front page has always put them and because an atlas's title
   lives in the middle. Neither cluster is allowed to cover the page underneath:
   chrome.js measures each page's own bar and indents it from the left and the
   right by exactly what these need.

   Both clusters ship in two skins — the collection is mostly dark, but a reader
   in light mode is reading light pages — and chrome.js picks by measuring the
   luminance of whatever is actually behind them, which is more reliable than
   trusting sixteen stylesheets to agree.

   At rest the mark is an icon; on hover or keyboard focus it grows a label, so
   it stays quiet beside an atlas's own wordmark but still says where it goes.
   ───────────────────────────────────────────────────────────────────────── */

/* ── one pill, worn by all three ───────────────────────────────────────── */
.mac-home,
.mac-tools {
  position: fixed;
  top: 10px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(239, 233, 221, .16);
  background: rgba(12, 12, 11, .58);
  -webkit-backdrop-filter: blur(11px) saturate(1.3);
  backdrop-filter: blur(11px) saturate(1.3);
  color: #d9d2c4;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .22s ease, background .22s ease, border-color .22s ease,
              opacity .2s ease, gap .26s cubic-bezier(.2, .7, .3, 1);
}

.mac-home { left: 12px; gap: 0; padding: 0 10px; }
.mac-tools { right: 12px; gap: 2px; padding: 0 4px; }

/* Held back for the first moment of the page's life. Several atlases draw their
   own header from script, so the controls exist before the wordmark they have
   to make room for: reveal them immediately and they sit on top of that
   wordmark until the indent lands — a flash of looking broken, longest on the
   slow connection where it is least forgivable. chrome.js adds .is-ready once a
   pass finds the corner genuinely clear, and unconditionally after a short
   deadline, so a page that never settles still has its way back. */
.mac-home:not(.is-ready),
.mac-tools:not(.is-ready) { opacity: 0; pointer-events: none; }

/* ── the way back ──────────────────────────────────────────────────────── */
.mac-home svg { flex: 0 0 auto; width: 17px; height: 17px; display: block; }
.mac-home svg * { transition: stroke .22s ease, fill .22s ease; }

/* the label is folded away until wanted, so it never competes with the atlas's
   own wordmark sitting immediately to its right */
.mac-home b {
  display: block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  font-weight: 400;
  transition: max-width .26s cubic-bezier(.2, .7, .3, 1), opacity .18s ease;
}

.mac-home:hover,
.mac-home:focus-visible { gap: 9px; }
.mac-home:hover b,
.mac-home:focus-visible b { max-width: 148px; opacity: 1; }

/* ── the two switches ──────────────────────────────────────────────────── */
.mac-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 26px;
  min-width: 30px;
  padding: 0 8px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.mac-btn svg { width: 15px; height: 15px; display: block; }
.mac-btn:hover { background: rgba(239, 233, 221, .12); }

/* the language switch names the language it goes to, so one press is one
   unambiguous outcome rather than a pair of buttons to read first */
.mac-btn.mac-lang { font-size: 10.5px; letter-spacing: .1em; text-transform: none; }
.mac-tools[data-lang="en"] .mac-btn.mac-lang { font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif; font-size: 12px; }

/* hairline between the two, so the cluster reads as two controls not one */
.mac-tools .mac-btn + .mac-btn { box-shadow: -1px 0 0 rgba(239, 233, 221, .14); }

/* ── shared states ─────────────────────────────────────────────────────── */
.mac-home:hover,
.mac-home:focus-visible,
.mac-tools:hover {
  color: #f4efe4;
  background: rgba(12, 12, 11, .82);
  border-color: rgba(193, 160, 92, .55);
}
.mac-home:focus-visible,
.mac-btn:focus-visible { outline: 1px solid #c1a05c; outline-offset: 3px; }
.mac-home:active { transform: translateY(1px); }
.mac-btn:active { transform: translateY(1px); }

/* ── the light skin, for a page that is actually light ─────────────────── */
.mac-home.is-onlight,
.mac-tools.is-onlight {
  border-color: rgba(20, 19, 15, .16);
  background: rgba(255, 253, 248, .74);
  color: #4a453b;
}
.mac-home.is-onlight:hover,
.mac-home.is-onlight:focus-visible,
.mac-tools.is-onlight:hover {
  color: #14130f;
  background: rgba(255, 253, 248, .95);
  border-color: rgba(117, 92, 44, .5);
}
.mac-home.is-onlight:focus-visible,
.is-onlight .mac-btn:focus-visible { outline-color: #755c2c; }
.is-onlight .mac-btn:hover { background: rgba(20, 19, 15, .08); }
.is-onlight .mac-tools .mac-btn + .mac-btn,
.mac-tools.is-onlight .mac-btn + .mac-btn { box-shadow: -1px 0 0 rgba(20, 19, 15, .12); }

/* ── a page with no bar of its own (a full-viewport canvas) gets a little
      more separation from the artwork underneath ───────────────────────── */
.mac-home.is-floating,
.mac-tools.is-floating { box-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.mac-home.is-onlight.is-floating,
.mac-tools.is-onlight.is-floating { box-shadow: 0 2px 18px rgba(20, 19, 15, .14); }

/* ── the smaller offer ─────────────────────────────────────────────────────
   Some pages have no room to give: a masthead that already scrolls sideways
   cannot be indented, and pushing it anyway is how a phone ends up scrolling
   horizontally. When chrome.js meets one it asks for less instead, and this is
   less — the marks without their padding, and the language switch as one
   character rather than two. Small, but never smaller than a thumb. */
.mac-home.is-compact { padding: 0 6px; height: 28px; }
.mac-home.is-compact b { max-width: 0 !important; opacity: 0 !important; }
.mac-home.is-compact:hover, .mac-home.is-compact:focus-visible { gap: 0; }
.mac-tools.is-compact { height: 28px; padding: 0 2px; }
.mac-tools.is-compact .mac-btn { min-width: 24px; padding: 0 5px; height: 24px; }
.mac-tools.is-compact .mac-btn svg { width: 14px; height: 14px; }

/* ── narrow screens: the label would cover the title, so keep it folded ── */
@media (max-width: 640px) {
  .mac-home { top: 8px; left: 8px; height: 34px; padding: 0 9px; }
  .mac-tools { top: 8px; right: 8px; height: 34px; }
  .mac-home svg { width: 16px; height: 16px; }
  .mac-home:hover b, .mac-home:focus-visible b { max-width: 0; opacity: 0; }
  .mac-home:hover, .mac-home:focus-visible { gap: 0; }
  /* 28 x 32, not 25 x 27. The cluster is the one piece of furniture on every
     page in the collection, so it is the one a reader is most likely to reach
     for on a phone and the least excusable to miss. The pill grows with it —
     a button taller than the pill it sits in is a button poking out. */
  .mac-btn { height: 28px; min-width: 32px; padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .mac-home, .mac-tools, .mac-home b, .mac-home svg *, .mac-btn { transition: none; }
  .mac-home:active, .mac-btn:active { transform: none; }
}

@media print { .mac-home, .mac-tools { display: none; } }

/* Player failures stay readable without covering the player or its controls. */
.mac-video-status { position: relative; margin: 12px 0; padding: 12px; font: 14px/1.5 system-ui, sans-serif; color: var(--mac-ink, inherit); background: var(--mac-bg, transparent); overflow-wrap: anywhere; }
.mac-video-status a { color: inherit; text-decoration: underline; }