/* index-ttdb.css — single-globe ribbon view for index.html
   Loaded after css/index.css; deliberately overrides the multi-globe shell.
   Only index.html loads this file, so nothing here reaches index_OG.html. */

/* html,body{width:100%} in tte-common.css plus the UA's 8px body margin adds
   up to 100%+16px. Drop the margin, and let the grid tracks below shrink
   past min-content so a narrow phone never scrolls sideways. */
body {
  margin: 0;
}

.page {
  grid-template-columns: minmax(0, 1fr);
  /* Small at rest; js/index-ttdb.js scales each card exponentially with its
     depth, so the card facing the panel centre is the only large one. */
  --card-w: clamp(32px, 4.4vw, 58px);
}

/* The header now carries the globe and the record panel side by side on wide
   screens, stacked on narrow ones. */
header.stage-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (min-width: 1000px) {
  header.stage-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 22px;
  }

  header.stage-header > a.tagline {
    grid-column: 1 / -1;
  }
}

header.stage-header > a.tagline {
  margin-bottom: 4px;
}

.header-left,
.header-right {
  min-width: 0;
}

/* ---------------------------------------------------------------- globe */

.globe-stage {
  position: relative;
  /* No cap: the stage fills its grid track, so the globe panel and the record
     panel are the same width. Shorter than square, so the globe can grow to
     nearly that width with only its poles cropped away. */
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 56% 44%, rgba(23, 44, 40, 0.92), rgba(6, 12, 12, 0.97) 74%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
  touch-action: none;
}

#globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#globe.is-dragging {
  cursor: grabbing;
}

.globe-hud {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 6;
  pointer-events: none;
  border-radius: 12px;
  border: 1px solid rgba(160, 220, 185, 0.22);
  background: rgba(6, 14, 13, 0.6);
  padding: 7px 10px;
  color: #dff3e6;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

.globe-hud b {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.globe-hud span {
  color: rgba(223, 243, 230, 0.6);
  text-transform: none;
  letter-spacing: 0.02em;
}

.tour-flag {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
  pointer-events: none;
  border-radius: 999px;
  border: 1px solid rgba(15, 139, 141, 0.55);
  background: rgba(8, 24, 22, 0.72);
  color: #8fe6d2;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tour-flag.is-on {
  opacity: 1;
}

/* ------------------------------------------------------- ribbon cards */

.card-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.ribbon-card {
  --x: 50%;
  --y: 50%;
  --scale: 1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--card-w);
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: 50% 50%;
  border: 0;
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.3s ease;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}

.ribbon-card svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ribbon-card.is-back {
  cursor: default;
}

.ribbon-card.is-active {
  filter: drop-shadow(0 0 14px rgba(143, 230, 210, 0.75)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.ribbon-card:focus-visible {
  outline: 2px solid #8fe6d2;
  outline-offset: 3px;
}

/* ------------------------------------------------------- record panel */

.record-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.record-head-text {
  flex: 1 1 200px;
  min-width: 0;
}

.record-coord {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.record-open {
  display: inline-block;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 139, 141, 0.5);
  background: rgba(15, 139, 141, 0.12);
  padding: 7px 14px;
  font-size: 13px;
}

.record-edges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.record-edges .edge {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.35);
  padding: 4px 11px;
  font-size: 12px;
}

.record-edges .edge em {
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
}

/* --------------------------------------------------------- topic rail */

.header-right {
  display: grid;
  gap: 14px;
  align-content: start;
}

.topic-links {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid var(--line);
}

.topic-links > strong {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  letter-spacing: 0.02em;
}

ul.topic-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.topic-rail li {
  margin: 0;
}

ul.topic-rail a,
ul.topic-rail button {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.4);
  padding: 6px 13px;
  font-size: 13px;
  font-family: inherit;
  color: #0f4f2d;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

ul.topic-rail button:hover,
ul.topic-rail a:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(15, 139, 141, 0.45);
  transform: translateY(-1px);
}

ul.topic-rail button.active {
  background: rgba(15, 139, 141, 0.16);
  border-color: rgba(15, 139, 141, 0.55);
}

ul.topic-rail .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  background: var(--dot, #0f8b8d);
  box-shadow: 0 0 6px var(--dot, #0f8b8d);
}

ul.topic-rail .out {
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}

.rail-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* css/index.css sizes .record as a fixed-height grid for the OG frame
   (--record-panel-height). This view flows instead. The panel is a fixed
   window with record slides behind it; js/index-ttdb.js shifts them in step
   with the globe, so the window clips whatever is sliding in or out. */
.header-right .record {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: block;
  padding: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid var(--line);
}

.record-track {
  position: relative;
}

.record-slide {
  display: grid;
  gap: 12px;
  align-content: start;
  width: 100%;
  padding: 16px;
}

/* Mid-transition every slide leaves the flow and the track carries an
   explicit height, blended from the old record's to the new one's. At rest
   the single slide is back in flow and sizes the panel itself. */
.record-track.is-moving > .record-slide {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.record-slide > p {
  max-width: 62ch;
}

/* ASCII blocks are art, not prose: never reflow them. A narrow panel scrolls
   the block sideways rather than wrapping the columns out of alignment. */
.header-right .record pre.record-ascii {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(9px, 1.05vw, 12.5px);
  line-height: 1.35;
  color: var(--accent);
  background: rgba(11, 17, 18, 0.045);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Monospace chips: the `lat 10` lane tags and the RFC-number links. */
.header-right .record code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(15, 139, 141, 0.1);
  border: 1px solid rgba(15, 139, 141, 0.22);
  white-space: nowrap;
}

.header-right .record a > code {
  color: #0f4f2d;
}

.header-right .record a:hover > code {
  background: rgba(15, 139, 141, 0.22);
  border-color: rgba(15, 139, 141, 0.5);
}

/* The table of contents: one line per RFC, no bullets, coordinate chip first. */
.header-right .record ul {
  padding-left: 0;
  list-style: none;
  gap: 4px;
}

.header-right .record li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

/* The Settings <details> is now the last row on its own, which exposes two
   inherited rules: `margin: 0 auto` + max-width (css/index.css) makes a grid
   item size to fit-content, and `.panel{min-height:150px}` (css/tte-core.css)
   holds the collapsed panel open at 150px. display:block keeps the native
   details open/closed sizing regardless of what .panel sets. */
.page > .info-panel {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 0;
  margin-inline: auto;
}

.page > .info-panel > *:not(summary) {
  margin-top: 12px;
}

.page > .info-panel .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Toot frames. css/index.css sizes .record-html-embed off
   --record-media-max-height, which is derived from the OG reader's fixed
   panel height; this view flows, so give the frame its own size.

   The frame is what sets the record panel's height, so it carries the
   doubling: the panel was frame + ~208px of head and edges, and 2*(f + 208)
   means the frame itself goes to 2f + 208. Measured at 1474x1087 the panel
   runs 708px on the old numbers and 1416px on these. */
.header-right .record iframe.record-html-embed {
  width: 100%;
  max-width: 100%;
  height: clamp(768px, calc(92vh + 208px), 1248px);
  max-height: none;
  margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(11, 17, 18, 0.22);
  background: rgba(255, 255, 255, 0.9);
  display: block;
}

.header-right .record img.record-media {
  width: 100%;
  height: auto;
  border-radius: 14px;
}