/* ============================================================================
   AI EXIT MAP — mobile layer
   The board is a spatial, hover-driven canvas: it cannot survive a 390px
   viewport intact. On phones the same records are served as a grouped list
   (default), with the pan-able board kept one tap away for people who want it.
   Loaded last, so !important is only used to beat the !important-heavy
   inline overrides already in index.html.
   ========================================================================== */

/* Author display rules outrank the UA's [hidden] rule, so restate it. */
[hidden] { display: none !important; }

/* Mobile-only chrome stays out of the way on desktop. */
.mobile-mode,
.mobile-list,
.count-filter { display: none; }

/* Filter sheet is shared by every viewport (the masthead hamburger opens it). */
.filter-sheet {
  position: fixed;
  z-index: 12;
  right: 0;
  top: 0;
  width: min(380px, 100vw);
  height: 100dvh;
  padding: 26px 26px calc(30px + env(safe-area-inset-bottom));
  overflow: auto;
  background: #eeece4;
  box-shadow: -15px 0 60px rgba(0, 0, 0, .24);
  transform: translateX(102%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.filter-sheet.open { transform: translateX(0); }
.filter-sheet h2 {
  margin: 0 0 22px;
  font: 500 32px/.96 var(--serif);
  letter-spacing: -.05em;
}
.sheet-label {
  display: block;
  margin: 26px 0 11px;
  color: #9d3936;
  font: 500 9px/1 var(--mono);
  letter-spacing: .11em;
}
.sheet-options { display: grid; gap: 7px; }
.sheet-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(16, 19, 26, .35);
  background: transparent;
  text-align: left;
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sheet-option .dot { margin: 0; flex: 0 0 auto; width: 9px; height: 9px; }
.sheet-option b {
  margin-left: auto;
  color: #6d6c68;
  font: 400 10px var(--mono);
}
.sheet-option.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.sheet-option.active b { color: var(--acid); }
.menu-button.has-filter { background: var(--ink); color: var(--paper); }
.menu-button.has-filter i { border-color: var(--acid); }

@media (max-width: 720px) {
  /* --- masthead ------------------------------------------------------- */
  .app-shell { overflow: visible; }
  .masthead {
    height: 60px !important;
    padding: 0 14px !important;
    gap: 12px !important;
  }
  .brand { gap: 8px; font-size: 10px; }
  .brand-mark { width: 31px; height: 31px; font-size: 14px; }
  .header-actions { gap: 10px; }
  .header-actions .text-button { font-size: 8px; }
  .menu-button { width: 38px; height: 38px; }

  /* --- editorial intro ------------------------------------------------ */
  .board-intro {
    padding: 22px 16px 20px !important;
    gap: 0 !important;
  }
  .board-intro h1 { font-size: clamp(40px, 13vw, 54px) !important; line-height: .86 !important; }
  .board-intro .eyebrow { margin-bottom: 10px; font-size: 8px; }

  /* --- control bar: two compact sticky rows ---------------------------- */
  .control-bar {
    position: sticky !important;
    top: 0;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    gap: 8px 10px !important;
    min-height: 0 !important;
    padding: 8px 14px calc(8px + env(safe-area-inset-left)) !important;
    background: rgba(233, 230, 220, .96) !important;
    backdrop-filter: blur(12px);
  }
  .count {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    overflow: hidden;
    font-size: 8px !important;
    line-height: 1.3;
    text-overflow: ellipsis;
  }
  .count-filter {
    display: inline;
    margin-left: 4px;
    color: var(--acid);
    font-weight: 700;
  }
  .mobile-mode {
    grid-column: 2;
    grid-row: 1;
    display: grid !important;
    grid-auto-flow: column;
    border: 1px solid rgba(16, 19, 26, .4);
  }
  .mm-btn {
    min-width: 52px;
    height: 34px;
    border: 0;
    background: transparent;
    font: 700 9px/1 var(--mono);
    letter-spacing: .06em;
  }
  .mm-btn.active { background: var(--ink); color: var(--paper); }
  .search-toggle {
    grid-column: 3;
    grid-row: 1;
    height: 34px;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
  .view-switcher {
    grid-column: 1 / 4;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: auto !important;
    overflow: visible;
  }
  .view-button { width: 100% !important; padding: 11px !important; }
  /* Signal filters live in the sheet on mobile — no room for them inline. */
  .legend { display: none !important; }

  /* --- mobile list ------------------------------------------------------ */
  body.m-list .board-viewport { display: none; }
  body.m-list .mobile-list { display: block; }
  body.m-board .mobile-list { display: none; }

  .mobile-list {
    padding: 0 0 calc(30px + env(safe-area-inset-bottom));
    background: var(--paper);
  }
  .ml-note {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(16, 19, 26, .18);
    color: #65615a;
    font: 9px/1.5 var(--mono);
    letter-spacing: .05em;
  }
  .ml-note b {
    display: block;
    margin-bottom: 6px;
    color: #a83836;
    font-weight: 500;
    letter-spacing: .11em;
  }
  .ml-group {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }
  .ml-head {
    position: sticky;
    top: var(--bar-h, 92px);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-top: 1px solid rgba(16, 19, 26, .5);
    border-bottom: 1px solid rgba(16, 19, 26, .18);
    background: var(--paper-2);
  }
  .ml-logo { width: 17px; height: 17px; object-fit: contain; mix-blend-mode: multiply; }
  .ml-bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acid);
  }
  .ml-name {
    font: 700 11px/1.1 var(--sans);
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .ml-count {
    margin-left: auto;
    color: #7c7972;
    font: 9px var(--mono);
    letter-spacing: .08em;
  }
  .ml-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid rgba(16, 19, 26, .12);
    background: transparent;
    text-align: left;
  }
  .ml-row:active { background: #ded9cd; }
  .ml-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: cover;
    background: #cbc7bc;
    filter: grayscale(1) contrast(1.12);
    clip-path: polygon(9% 0, 92% 6%, 100% 91%, 5% 100%);
    box-shadow: 2px 3px 0 rgba(16, 19, 26, .35);
  }
  .ml-body { min-width: 0; flex: 1; }
  .ml-body strong {
    display: block;
    font: 600 14px/1.2 var(--sans);
    letter-spacing: -.01em;
  }
  .ml-role {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #5a5751;
    font: 400 11px/1.3 var(--sans);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ml-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #7b7871;
    font: 8px/1.2 var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .ml-meta .dot { margin: 0; }
  .ml-go { flex: 0 0 auto; color: #a83836; font: 13px var(--mono); }
  .ml-empty {
    padding: 40px 16px;
    color: #7b7871;
    font: 10px/1.6 var(--mono);
    letter-spacing: .06em;
    text-align: center;
  }

  /* --- board mode: pan canvas ------------------------------------------ */
  .board-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #a83836 transparent;
  }
  .caseboard {
    width: 1100px !important;
    min-width: 1100px !important;
    height: 1280px !important;
    min-height: 1280px !important;
  }
  .mobile-pan-hint {
    display: block;
    position: sticky;
    left: 14px;
    top: 12px;
    z-index: 7;
    width: max-content;
    margin: 10px 0 -34px 14px;
    padding: 7px 9px;
    background: var(--ink);
    color: var(--paper);
    font: 8px/1 var(--mono);
    letter-spacing: .08em;
    pointer-events: none;
  }
  /* Touch has no hover, so a face can never reveal its label: keep the portraits
     big enough to hit and let the dossier carry the detail. */
  .caseboard.map .person,
  .caseboard.reasons .person { width: 44px !important; }
  .caseboard.map .person-photo,
  .caseboard.reasons .person-photo { width: 40px !important; height: 40px !important; }
  .caseboard.map .signal-pin,
  .caseboard.reasons .signal-pin { width: 8px !important; height: 8px !important; right: 2px !important; }
  .cursor-aura { display: none; }
  .field-note { max-width: 160px !important; }
  .board-instruction { position: sticky !important; left: 50vw !important; width: max-content !important; }

  /* --- dossier drawer --------------------------------------------------- */
  .detail-drawer { width: 100vw !important; height: 100dvh !important; }
  .detail-portrait { height: 190px !important; }
  .detail-body { padding: 25px 20px calc(42px + env(safe-area-inset-bottom)) !important; }
  .detail-body h2 { font-size: 36px !important; }
  .detail-body blockquote { font-size: 17px !important; }
  .close { width: 42px; height: 42px; right: 14px; top: 14px; }
  .detail-facts { grid-template-columns: 1fr 1fr; }
  .detail-fact { min-height: 66px; padding: 10px; }
  .source-actions { display: grid; grid-template-columns: 1fr; }
  .source-actions .source-link { padding: 13px 10px; text-align: center; }
  .dlogos-cta { align-items: flex-start !important; padding: 16px 14px !important; }
  .dlogos-orbit { width: 36px !important; height: 36px !important; }
  .dlogos-cta small { font-size: 13px !important; }
  .dlogos-cta .cta-action { padding: 10px 12px !important; font-size: 8px !important; }

  /* --- search / about / filters as sheets -------------------------------- */
  .search-panel {
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-height: 82dvh !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translateY(100%) !important;
    opacity: 1 !important;
  }
  .search-panel.open { transform: translateY(0) !important; }
  .search-panel input { font-size: 20px !important; }
  .search-result { padding: 13px 0; }
  .search-avatar { width: 42px; height: 42px; }
  .about-panel { width: 100vw !important; padding: 54px 22px calc(35px + env(safe-area-inset-bottom)) !important; }
  .about-panel h2 { font-size: 34px !important; }
  .filter-sheet {
    right: 0;
    top: auto;
    bottom: 0;
    width: 100vw;
    height: auto;
    max-height: 86dvh;
    transform: translateY(100%);
  }
  .filter-sheet.open { transform: translateY(0); }

  /* The control bar is sticky at z-index 20, so full-screen panels have to clear
     it or the bar paints over the dossier. */
  .overlay { z-index: 24; }
  .detail-drawer,
  .search-panel,
  .about-panel,
  .filter-sheet { z-index: 26; }

  /* Panels are full-screen here; the page must not scroll behind them. */
  body.panel-open { overflow: hidden; }
}

/* ============================================================================
   Post-masthead layout. The top strip is gone: the strapline now sits opposite
   the headline, and the filter button lives in the control bar.
   ========================================================================== */
.intro-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 6px;
  text-align: right;
}
.intro-side .strapline {
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(16, 19, 26, .3);
  font: 11px/1.5 var(--mono);
  letter-spacing: .03em;
  text-align: left;
}
.intro-side .text-button { padding: 0; color: #6d6c68; }
.intro-side .text-button:hover { color: var(--acid); }
.control-bar .menu-button { flex: 0 0 auto; margin-left: auto; }
.control-bar .search-toggle { margin-left: 12px; }

/* The board portraits are only ~23px, so hovering has to do the work of showing
   who this is: the label card leads with a large version of the same photo. */
.person-zoom {
  display: block;
  width: calc(100% + 22px);
  height: 152px;
  margin: -10px -11px 10px;
  background: #2a2f37 center/cover no-repeat;
  filter: grayscale(1) contrast(1.12);
}
.caseboard.map .person:hover .person-label,
.caseboard.map .person:focus-visible .person-label,
.caseboard.reasons .person:hover .person-label,
.caseboard.reasons .person:focus-visible .person-label { z-index: 9; }
/* Cards near an edge would be clipped by the board's overflow, so they flip. */
.person.flip-y .person-label { top: auto !important; bottom: 29px !important; }
.person.flip-x .person-label { left: auto !important; right: -10px !important; }

@media (max-width: 720px) {
  /* The strapline was hidden with the old masthead; it belongs on the page now. */
  .strapline { display: block !important; }
  .board-intro { padding-bottom: 18px !important; }
  .intro-side {
    align-items: flex-start;
    margin-top: 15px;
    text-align: left;
  }
  .intro-side .strapline {
    padding-left: 12px;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }
  .control-bar .menu-button {
    grid-column: 2;
    grid-row: 1;
    width: 34px;
    height: 34px;
    margin-left: 0;
  }
  .control-bar .mobile-mode { grid-column: 3; }
  .control-bar .search-toggle { grid-column: 4; margin-left: 0; }
  .control-bar { grid-template-columns: 1fr auto auto auto; }
  /* Touch has no hover; the dossier already carries the photo. */
  .person-zoom { display: none; }
}

/* ============================================================================
   Face-safe cropping. Every portrait surface uses background/object `cover`,
   which crops from the centre — on a square avatar dropped into a wide box that
   slices the top of the head off. Faces sit in the upper third of a portrait,
   so bias the crop upward everywhere a person is shown.
   ========================================================================== */
/* The dossier shows the whole photo over a blurred fill of itself, so no head is
   ever cropped regardless of how the source was framed. */
.detail-portrait { overflow: hidden; }
.portrait-blur {
  position: absolute;
  inset: -8%;
  background: center / cover no-repeat;
  filter: blur(20px) brightness(.72);
}
.portrait-sharp {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Same reasoning for the hover card's photo, on the card's own dark ground. */
.person-zoom {
  background-color: #1b2029;
  background-size: contain;
  background-position: center;
}
.person-photo { background-position: center 25% !important; }
.ml-avatar { object-position: center 25%; }
.search-avatar { background-position: center 25% !important; }

/* The hover label is only taken out of flow in the map view. In the reasons view
   it stayed in normal flow, so every .person box grew to the label's full height
   (~245px); centred with translate(-50%,-50%) that shoved the portrait about
   100px above its ring, straight onto the reason circle and over its name. */
.caseboard.reasons .person-label { position: absolute !important; }