/* The Observatory shell (observatory-shell.js; decision D117). New rules only, every one scoped to html.obs or an .obs-
   class, so the explorer pages keep their own look; the observatory pages get the layout fixes:
   the title and switcher in the header bar, panels that fold, full tab labels, list lines that wrap, inspectors that
   scroll to their last line, the foot strip clear of the map credits, and no control in the bottom start corner on
   desktop (the rail holds navigation). Tokens of v3.css only; one radius, 5 px. */

/* ---- The header: title, what it shows, switcher, domain page */
html.obs .bar.obs-bar.bar--spine { grid-template-columns: minmax(0, 400px) minmax(0, 1fr) auto; }
html.obs .bar.obs-bar:not(.bar--spine) { grid-template-columns: auto minmax(0, 400px) minmax(0, 1fr) auto; }
.obs-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.obs-sw { position: relative; min-width: 0; }
.obs-sw__s { display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; padding-inline: 10px; border-radius: var(--r); cursor: pointer; list-style: none; color: var(--ink); }
.obs-sw__s::-webkit-details-marker { display: none; }
.obs-sw__s:hover, .obs-sw[open] .obs-sw__s { background: var(--bg-2); }
.obs-sw__s:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.obs-sw__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.obs-sw__t b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.obs-sw__t small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-sw__s svg { flex: none; color: var(--ink-3); }
.obs-sw__m { position: absolute; z-index: 40; inset-block-start: calc(100% + 8px); inset-inline-start: 0; width: min(420px, calc(100vw - 24px)); max-block-size: calc(100dvh - 120px); overflow: auto; padding: 6px; display: grid; gap: 2px; }
.obs-sw__m a { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.obs-sw__m a:hover, .obs-sw__m a:focus-visible { background: var(--bg-2); outline: none; }
.obs-sw__m a[aria-current] { background: var(--bg-2); box-shadow: inset 2px 0 0 var(--red); }
.obs-sw__m b { font-size: 13px; font-weight: 600; }
.obs-sw__m small { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.obs-back { flex: none; white-space: nowrap; }

/* ---- Panels that fold to their first row */
.obs-fold { position: absolute; z-index: 3; inset-block-end: 4px; inset-inline-start: 50%; transform: translateX(-50%); width: 32px; height: 16px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass-2); color: var(--ink-3); cursor: pointer; }
[dir="rtl"] .obs-fold { transform: translateX(50%); }
.obs-fold:hover { color: var(--ink); border-color: var(--line-2, var(--line)); }
.obs-fold:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
html.obs .panel.obs-folded { max-block-size: 64px !important; block-size: 64px !important; min-block-size: 0 !important; overflow: hidden; }
html.obs .panel.obs-folded .obs-fold svg { transform: rotate(180deg); }
html.obs .panel { padding-block-end: 0; }
html.obs .panel > .panel__bd:last-of-type { padding-block-end: 24px; }

/* ---- Full tab labels (the atlas consoles: two rows of four, never "Transl...") */
html.obs .lp-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline-end: 40px; }
html.obs .lp-tabs button { flex-direction: row; justify-content: center; gap: 6px; padding: 7px 4px; font-size: 11.5px; }
html.obs .lp-tabs button span { overflow: visible; text-overflow: clip; white-space: nowrap; }

/* ---- List lines and names that wrap instead of being cut */
html.obs .panel :is(small, .row__n, .lp-vrow__n .sc, .lp-scs span, .lp-prow__n, .hg-row__t b, .fd-row__t small, .crow b, .ar__n b, .nd b, .nd span, .ds b, .ds small, .opt span, .ind span, .rep b, .rep small, .ir span, .portal b, .portal small, .oc__m) { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
html.obs .layers { flex-wrap: wrap; row-gap: 2px; }

/* ---- Inspectors scroll to their last line */
html.obs .insp { overflow-y: auto; overscroll-behavior: contain; }

/* ---- The foot strip sits above the map credits line */
@media (min-width: 761px) {
  html.obs .time { inset-block-end: 24px; height: 96px; }
  html.obs .strip { inset-block-end: 24px; height: 164px; }
  html.obs .axis { inset-block-end: 24px; block-size: 380px; }
  html.obs :is(.cf, .cins, .dev-left, .dev-main, .op-fac, .op-c, .op-insp) { inset-block-end: 24px; }
  html.obs .attr { inset-block-end: 128px; inset-inline-end: 76px; }
  /* no control in the bottom start corner: the privacy choices go to the foot of the rail */
  html.obs.has-spine .nxc-pc { inset-block: auto 24px; inset-inline: auto 24px; width: auto; flex-direction: row; }
  html.obs.has-spine .nxc-pc b { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ---- The landing */
.obs-land { inset-block-start: var(--top); max-block-size: calc(100% - var(--top) - 40px); inset-inline-start: 76px; width: min(760px, calc(100% - 76px - 88px)); }
.obs-land .title { margin: 4px 0 6px; }
.obs-land__l, .obs-land__p, .obs-land__f { margin: 0 0 6px; color: var(--ink-2); font-size: 13px; }
.obs-land__p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obs-land__f { margin-block-start: 14px; color: var(--ink-3); font-size: 12px; }
.obs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.obs-card { display: grid; gap: 6px; align-content: start; min-block-size: 116px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1, transparent); color: var(--ink); text-decoration: none; position: relative; }
.obs-card::before { content: ""; position: absolute; inset-inline: 14px; inset-block-start: 0; height: 1px; background: var(--pastel, var(--line)); opacity: .7; }
.obs-card:hover, .obs-card:focus-visible { background: var(--bg-2); outline: none; border-color: var(--ink-3); }
.obs-card b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.obs-card span { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.obs-card small { font-size: 11px; color: var(--ink-3); margin-block-start: auto; }

@media (max-width: 760px) {
  html.obs .bar.obs-bar.bar--spine, html.obs .bar.obs-bar:not(.bar--spine) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  html.obs .bar.obs-bar .cmd { width: 40px; padding-inline: 0; justify-content: center; }
  html.obs .layers { flex-wrap: nowrap; }
  .obs-sw__s { height: 36px; padding-inline: 6px; }
  .obs-sw__t b { overflow: hidden; text-overflow: ellipsis; }
  html.obs .bar.obs-bar .cmd > span:not(.kbd), html.obs .bar.obs-bar .cmd .kbd { display: none; }
  .obs-sw__t small, .obs-back { display: none; }
  .obs-sw__m { position: fixed; inset-inline: 12px; inset-block-start: 72px; width: auto; }
  .obs-land { inset-inline: 8px; inset-block: auto 8px; width: auto; max-block-size: 62vh; }
}