/* ============================================================
   Mothyfamily Network — parts.css
   The page-specific pieces: the map, the timeline, the glossary,
   the chips, the tooltip, the footer, printing.
   ============================================================ */

/* ---------- the network map ---------- */
.map-shell { display: grid; grid-template-columns: 1.32fr .95fr; gap: 20px; align-items: start }
/* minmax(0,1fr), NOT bare 1fr: `1fr` means minmax(auto,1fr), and the auto minimum lets the
   720px min-width on svg.map inflate the track to 742px inside a 343px box — the page then
   scrolls sideways (measured 368px on a 390px phone) and the map's own scroller never engages. */
@media (max-width: 940px) { .map-shell { grid-template-columns: minmax(0, 1fr) } }
.map-frame {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px;
  background: radial-gradient(600px 300px at 50% 0%, rgba(240,163,68,.10), transparent 62%), var(--panel);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
svg.map { width: 100%; height: auto; display: block; font-family: var(--font-body); min-width: 720px }
svg.map .zone { fill: var(--panel-2); stroke: var(--line); stroke-width: 1.5 }
svg.map .zone-label { fill: var(--text-mute); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700 }
svg.map .wire { stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 7 7; fill: none; opacity: .8 }
svg.map .wire-lbl { fill: var(--teal); font-size: 12px; font-weight: 700 }
svg.map .frontier { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 3 6; fill: none; opacity: .7 }
svg.map .spot { cursor: pointer }
svg.map .spot rect { fill: var(--ink-3); stroke: var(--line); stroke-width: 1.5 }
svg.map .spot .nm { fill: var(--text); font-size: 15px; font-weight: 700 }
svg.map .spot .rl { fill: var(--text-mute); font-size: 11.5px }
svg.map .spot:hover rect, svg.map .spot.on rect { stroke: var(--amber); fill: color-mix(in srgb, var(--amber) 17%, var(--ink-3)) }
svg.map .spot.on rect { stroke-width: 2.5 }
svg.map .spot:hover .nm, svg.map .spot.on .nm { fill: var(--lamp) }
[data-mode="light"] svg.map .spot:hover .nm, [data-mode="light"] svg.map .spot.on .nm { fill: var(--amber-deep) }
.map-detail {
  border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: var(--radius); background: var(--panel); padding: 20px; box-shadow: var(--shadow);
}
.map-detail h3 { margin: 0 0 4px; font-size: 24px }
.map-detail .meaning { color: var(--text-mute); font-style: italic; font-size: 14px; margin: 0 0 12px }
.map-detail .for-you { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 12px; font-size: 16px }
.map-detail .for-you b { color: var(--amber); display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px }
.map-hint { font-size: 14px; color: var(--text-mute); margin: 10px 0 0 }

/* ---------- timeline ---------- */
.timeline { position: relative; margin: 24px 0; padding-left: 36px }
.timeline::before {
  content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--amber), var(--line) 78%);
}
.ph { position: relative; margin: 0 0 24px }
.ph::before {
  content: ""; position: absolute; left: -30px; top: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ink); border: 2.5px solid var(--line);
}
.ph.done::before { background: var(--green); border-color: var(--green) }
.ph.now::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent) }
.ph h3 { margin: 0 0 4px; font-size: 20px }
.ph .when { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute) }
.ph p { margin: 8px 0 0; font-size: 16.5px; color: var(--text-dim) }
.bar { height: 7px; border-radius: 999px; background: var(--ink-3); overflow: hidden; margin: 12px 0 4px; border: 1px solid var(--line-soft) }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber-deep), var(--amber)); border-radius: 999px }
.bar-lbl { font-size: 12.5px; color: var(--text-mute) }

/* ---------- glossary ---------- */
.gsearch {
  width: 100%; padding: 13px 16px; font-size: 17px; font-family: inherit;
  border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
}
.gsearch::placeholder { color: var(--text-mute) }
dl.gloss { margin: 20px 0 }
dl.gloss > div {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px; margin: 10px 0; background: var(--panel);
}
dl.gloss dt { font-weight: 700; font-size: 17.5px; color: var(--lamp); margin-bottom: 4px }
[data-mode="light"] dl.gloss dt { color: var(--amber-deep) }
dl.gloss dt .say { font-weight: 400; font-style: italic; color: var(--text-mute); font-size: 14px; margin-left: 8px }
dl.gloss dd { margin: 0; font-size: 16.5px; color: var(--text-dim) }
dl.gloss dd .eg { display: block; margin-top: 6px; font-size: 15px; color: var(--text-mute) }
dl.gloss > div.hide { display: none }
.count { font-size: 14px; color: var(--text-mute); margin: 6px 2px 0 }

/* ---------- chips (filters) ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 }
.chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--text-dim);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 14.5px; font-family: inherit;
  transition: .16s;
}
.chip:hover { color: var(--text); border-color: var(--amber) }
.chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 700 }
.card.dim { opacity: .28; filter: saturate(.4) }

/* ---------- in-page term tooltips ---------- */
button.term {
  all: unset; cursor: help; color: inherit;
  border-bottom: 1px dotted color-mix(in srgb, var(--amber) 70%, transparent);
}
button.term:hover { color: var(--amber) }
#tip {
  position: fixed; z-index: 90; max-width: 340px; display: none;
  background: var(--panel); border: 1px solid var(--amber); border-radius: 11px;
  padding: 12px 15px; font-size: 15.5px; line-height: 1.5; color: var(--text);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.8); pointer-events: none;
}
#tip b { display: block; color: var(--amber); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 26px 0 }
.stat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--panel) }
.stat b { display: block; font-family: var(--font-display); font-size: 30px; color: var(--amber); line-height: 1.1 }
.stat span { font-size: 13px; color: var(--text-mute); letter-spacing: .06em }

/* ---------- vote / interactive list ---------- */
.vote { display: grid; gap: 10px; margin: 18px 0 }
.vote-row {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 16px; background: var(--panel);
}
.vote-row .nm { font-family: var(--font-display); font-size: 20px; min-width: 116px }
.vote-row .mn { flex: 1; font-size: 15px; color: var(--text-mute) }
.vote-row .ct { font-family: var(--font-mono); font-size: 14px; color: var(--amber); min-width: 34px; text-align: right }
.vote-row button {
  border: 1px solid var(--amber); background: transparent; color: var(--amber);
  border-radius: 8px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 14px;
}
.vote-row button:hover { background: var(--amber); color: var(--on-amber) }

/* ---------- copy box ---------- */
.copybox { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px 0; background: var(--panel-2) }
.copybox p { margin: 0 0 10px; font-size: 16px }
.copybox button {
  border: 1px solid var(--line); background: var(--panel); color: var(--text-dim);
  border-radius: 8px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 13.5px;
}
.copybox button:hover { color: var(--text); border-color: var(--amber) }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line-soft); margin-top: 46px; padding: 26px 0 46px }
.pager { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px }
.pager a {
  flex: 1 1 240px; text-decoration: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 16px; background: var(--panel); color: var(--text);
  transition: .18s border-color, .18s transform;
}
.pager a:hover { border-color: var(--amber); transform: translateY(-2px) }
.pager a .dir { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute) }
.pager a .ttl { display: block; font-family: var(--font-display); font-size: 18px; color: var(--lamp) }
[data-mode="light"] .pager a .ttl { color: var(--amber-deep) }
.pager a.next { text-align: right }
.foot-note { font-size: 14.5px; color: var(--text-mute); max-width: 74ch }
.foot-note b { color: var(--text-dim) }

/* ---------- misc ---------- */
.center { text-align: center }
.tiny { font-size: 14px }
.dim { color: var(--text-mute) }
.big-em { font-size: 40px; line-height: 1 }
.stack > * + * { margin-top: 14px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.jump { font-size: 14px; color: var(--text-mute); margin: 0 0 4px }
.jump a { color: var(--text-dim) }

@media (max-width: 620px) {
  body { font-size: 17px }
  .hero { padding: 34px 0 16px }
  .kv { grid-template-columns: 1fr; gap: 0 }
  .kv .k { padding-top: 10px; border-bottom: 0 }
  .wrap { padding: 0 16px }
}

@media print {
  header.site, nav.site, .pager, .chips, .gsearch, .vote, .map-hint, #tip { display: none !important }
  body { background: #fff; color: #1b1b1b; font-size: 12pt }
  .card, .plain, .map-detail, .map-frame, dl.gloss > div, .note, .warn, .good, .ask {
    box-shadow: none; border-color: #c9c9c9; background: #fff
  }
  a { color: #1b1b1b; text-decoration: underline }
  section { page-break-inside: avoid }
}

/* ============================================================
   PHONE LAYOUT — appended last so these win the cascade.
   Every rule answers a number measured in a real 390x844 viewport by
   tools/mobile-probe.js; the number is quoted with the rule so a later edit
   can check whether it is still true.
   ============================================================ */

/* Nothing may make the document wider than the screen. overflow-x:clip, not hidden:
   clip does not create a scroll container, so the sticky header keeps working. */
body { overflow-x: clip }
.map-shell > *, .grid > *, .row > * { min-width: 0 }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)) }

/* A strip that scrolls must say it scrolls: the fade at each edge is the affordance. */
@media (max-width: 940px) {
  nav.site {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
  }
  nav.site a { scroll-snap-align: center }
}

/* Phone width, or any touch device. */
@media (max-width: 720px), (pointer: coarse) {
  /* Tap targets measured 29px tall; the comfortable guideline is 44px. */
  nav.site a { min-height: 44px; display: inline-flex; align-items: center; padding: 11px 14px; font-size: 15px }
  .icon-btn { min-height: 44px; padding: 11px 14px }
  .chip { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px }
  .brand { min-height: 44px }
  .pager a { min-height: 44px }
  /* Measured 31px (the name votes) and 30px (the "Copy this" buttons) — small buttons that
     sit at the end of a row a thumb has to land on precisely. */
  .vote-row button, .copybox button { min-height: 44px }
  /* The name-vote rows are a flex row carrying a 116px name, a flexible meaning, a 34px count
     and a button: min-content 352px, which overflowed a 288px screen by 48px. Let the row
     wrap — name, count and vote on the first line, the meaning full width underneath. */
  .vote-row { flex-wrap: wrap; gap: 10px; padding: 12px }
  .vote-row .nm { min-width: 0; font-size: 18px }
  .vote-row .mn { flex: 1 1 100%; order: 3 }
  .tbl th, .tbl td { padding: 9px 9px }
  /* Glossary terms sit inside sentences: 44px of padding would tear the text apart, so the
     hit area grows up into the leading and the negative margin cancels the space out. */
  button.term { padding: 12px 3px; margin: -12px -3px }

  /* The sticky header measured 109px = 13% of the screen, permanently in the way. */
  .brand .who span { display: none }
  .brand .mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px }
  .brand .who b { font-size: 17px }
  .brand-row { padding: 6px 0 2px; gap: 10px }
  nav.site { padding: 0 0 8px; gap: 6px }

  /* The hero measured 936px tall on index — taller than the screen, so the first screen
     showed a headline and nothing else. */
  .hero { padding: 16px 0 10px }
  .hero h1 { font-size: clamp(27px, 7.5vw, 38px) }
  .lede { font-size: 17.5px }
  section { margin: 26px 0 }

  /* Notches, rounded corners, and the browser's own bar. */
  html { -webkit-text-size-adjust: 100% }
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)) }
  header.site { padding-top: env(safe-area-inset-top) }
}

/* A text link inside a paragraph measured 22px tall at 320px: a thumb lands on 22px and
   hits the words, not the target. Every text link in a prose block gets its own band —
   inline-block plus 12px above and below makes the target 46px tall, and the sentence
   keeps flowing. Measured with tools/mobile-probe.js: the family page went from
   1 target under 44px (of 23) to 0 of 23, at 320px and 390px. Ungated on purpose: a
   22px target is too small for a thumb at any width. */
.ask a, .good a, .note a, .warn a, .plain a, .ph p a, .body-sm a {
  display: inline-block; min-height: 22px; padding: 12px 2px; line-height: 1.35
}

/* Hover effects must not stick on touch: a card that lifts on :hover stays lifted after a
   tap, because on a phone there is no mouse-out. Gated on the capability, not the width. */
@media (hover: none) {
  .card:hover, .plain:hover, .pager a:hover { transform: none }
  .tbl tr:hover { background: transparent }
  nav.site a:hover { background: transparent }
  button.term:hover { color: inherit }
}

/* Touch scrolling: momentum on the strips, no rubber-band into the page behind, and no
   300ms double-tap-zoom delay on controls. */
a, button, input { touch-action: manipulation }
nav.site, .map-frame, .tbl-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain }