/* shared.css — mobile improvements — linked after inline <style> so it wins */

/* ── CASE GLOSSARY UPDATE NOTIFICATION ── */
.glossary-update-note {
  display: block;
  margin-top: 1.2rem;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: #3a3450;
  text-transform: uppercase;
}
.glossary-update-note a {
  color: #8a6f2e;
  text-decoration: none;
  transition: color 0.2s;
}
.glossary-update-note a:hover { color: #c9a84c; }

@media (max-width: 600px) {

  /* ── MUGSHOT: stack vertically, icon centred at ~80% width, no boxes ── */
  .mugshot-block {
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0.6rem 0 0.8rem;
  }

  .mugshot-img {
    width: 80%;
    max-width: 220px;
    border: none;
    margin-bottom: 0.8rem;
  }

  .mugshot-img-inner {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .mugshot-img-inner svg {
    width: 58%;
    height: auto;
  }

  /* Caption adds nothing without the frame box — hide it */
  .mugshot-caption { display: none; }

  .mugshot-profile {
    width: 100%;
    font-size: 0.72rem;
    line-height: 1.85;
  }

  /* ── LETTER-SPACING: biggest readability fix on small screens ── */
  /* Heavy tracking looks good on desktop but kills legibility at mobile sizes */
  .banner,
  .case-title,
  .case-meta,
  .status-note,
  .mugshot-profile,
  .mugshot-profile-label,
  .mugshot-caption,
  .exchange-q-label,
  .proceed-btn,
  .pre-note-label,
  .office-note,
  .office-note-inline,
  .investigator-note,
  .investigator-note-label,
  .thinking,
  .found-doc-header,
  .closing-header,
  .doc-ref,
  .doc-subtitle,
  .interpreter-notice,
  .chamber-footer,
  #audio-bar {
    letter-spacing: 0.04em;
  }

  /* ── CASE HEADER: tighten ── */
  .case-header { padding: 1.2rem 1rem; }
  .case-name { font-size: 1.15rem; margin-bottom: 1rem; }

  /* ── BANNER: smaller, allow wrapping ── */
  .banner { font-size: 0.6rem; padding: 0.5rem 1rem; }

  /* ── BOXED SECTIONS: reduce padding so text has more room ── */
  .exchange-q       { padding: 0.7rem 0.9rem; }
  .response blockquote { padding: 0.8rem 1rem; }
  .office-note      { padding: 0.5rem 0.75rem; }
  .office-note-inline { padding: 0.4rem 0.7rem; }
  .investigator-note { padding: 0.6rem 0.75rem; }
  .pre-note         { padding: 0.8rem 0.9rem; }
  .found-doc-body   { padding: 1.2rem 1rem; }
  .closing-body     { padding: 1.2rem 1rem; }
  .container        { padding: 2rem 1rem 4rem; }

  /* ── BORDER-LEFT ELEMENTS: reduce the indent ── */
  .room-desc  { padding: 0.7rem 0.8rem 0.7rem 0.85rem; }
  .pre-note   { padding-left: 0.85rem; }

  /* ── GRID/FLEX STACKING ── */
  .case-meta          { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .found-doc-header,
  .closing-header     { flex-direction: column; gap: 0.2rem; }

  /* ── AUDIO BAR: compact ── */
  #audio-bar          { padding: 0.4rem 0.6rem; gap: 0.3rem; font-size: 0.55rem; }
  #audio-bar button   { padding: 0.2rem 0.4rem; font-size: 0.6rem; }

  /* ── CHAMBER FOOTER: smaller ── */
  .chamber-footer { font-size: 0.55rem; margin-top: 2.5rem; }
}