/* Hallmark · macrostructure: Workbench · tone: technical · anchor hue: phosphor-teal
 * theme: custom (vibe: "signal desk, ink, terminal restraint")
 * paper: dark slate · display: IBM Plex Sans · mono: IBM Plex Mono
 * redesign: researcher path + evidence readability · MkDocs Material shell preserved
 * pre-emit critique: P4 H4 E4 S4 R4 V3
 */

:root {
  --hlx-paper: #12151a;
  --hlx-paper-2: #1a1f27;
  --hlx-paper-3: #242b36;
  --hlx-ink: #e8edf4;
  --hlx-ink-muted: #9aa7b8;
  --hlx-rule: #2e3746;
  --hlx-accent: #2dd4bf;
  --hlx-accent-dim: #14b8a6;
  --hlx-accent-soft: color-mix(in srgb, var(--hlx-accent) 15%, transparent);
  --hlx-accent-faint: color-mix(in srgb, var(--hlx-accent) 8%, transparent);
  --hlx-warn: #f0b429;
  --hlx-warn-soft: color-mix(in srgb, var(--hlx-warn) 10%, transparent);
  --hlx-good: #4ade80;
  --hlx-good-soft: color-mix(in srgb, var(--hlx-good) 10%, transparent);
  --hlx-bad: #f87171;
  --hlx-bad-soft: color-mix(in srgb, var(--hlx-bad) 10%, transparent);
  --hlx-shadow: color-mix(in srgb, #000 40%, transparent);
  --hlx-font-display: "IBM Plex Sans", system-ui, sans-serif;
  --hlx-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --hlx-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --hlx-space-xs: 0.25rem;
  --hlx-space-sm: 0.5rem;
  --hlx-space-md: 1rem;
  --hlx-space-lg: 1.5rem;
  --hlx-space-xl: 2.5rem;
  --hlx-radius: 2px;

  /* Override Material primaries (kill deep-purple / pink demo) */
  --md-primary-fg-color: #0f766e;
  --md-primary-fg-color--light: #14b8a6;
  --md-primary-fg-color--dark: #115e59;
  --md-primary-bg-color: var(--hlx-ink);
  --md-primary-bg-color--light: color-mix(in srgb, var(--hlx-ink) 70%, transparent);
  --md-accent-fg-color: var(--hlx-accent);
  --md-accent-fg-color--transparent: var(--hlx-accent-soft);
  --md-accent-bg-color: #0b1220;
  --md-typeset-a-color: var(--hlx-accent);
  --md-text-font-family: var(--hlx-font-body);
  --md-code-font-family: var(--hlx-font-mono);
}

/* Stronger page titles — Material default is weight 300 + muted */
.md-typeset h1 {
  font-family: var(--hlx-font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.02em;
  color: var(--hlx-ink) !important;
  margin-bottom: 0.6em;
}

.md-typeset h2 {
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.015em;
  color: var(--hlx-ink);
}

.md-typeset h3 {
  font-weight: 600;
  font-style: normal;
}

.md-typeset {
  font-family: var(--hlx-font-body);
  color: var(--hlx-ink);
}

.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--hlx-font-mono);
}

/* Header bar: ink desk, not purple demo */
.md-header {
  background-color: var(--hlx-paper-2);
  border-bottom: 1px solid var(--hlx-rule);
  box-shadow: none;
}

.md-header__topic,
.md-header__button,
.md-header__source {
  color: var(--hlx-ink);
}

.md-tabs {
  background-color: var(--hlx-paper-2);
  border-bottom: 1px solid var(--hlx-rule);
}

/* Footer: one-line posture voice */
.md-footer {
  background-color: var(--hlx-paper);
  border-top: 1px solid var(--hlx-rule);
}

.md-footer-meta {
  background-color: var(--hlx-paper);
}

/* Workbench: status strip (hairline all around — no thick side-stripe) */
.hlx-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--hlx-rule);
  background: var(--hlx-paper-2);
  border-radius: var(--hlx-radius);
  font-size: 0.85rem;
}

.hlx-status strong {
  color: var(--hlx-accent);
  font-weight: 600;
  font-family: var(--hlx-font-mono);
  font-size: 0.8rem;
}

.hlx-status span {
  color: var(--hlx-ink-muted);
}

.hlx-status .hlx-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--hlx-accent);
  display: inline-block;
  margin-right: 0.35rem;
  box-shadow: 0 0 0 3px var(--hlx-accent-soft);
}

/* Dual path: researcher vs operator */
.hlx-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--hlx-space-md);
  margin: 0 0 var(--hlx-space-xl);
  max-width: 40rem;
}

.hlx-path-card {
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  background: var(--hlx-paper-2);
  padding: var(--hlx-space-md) var(--hlx-space-lg);
  min-width: 0;
}

.hlx-path-card--primary {
  border-color: var(--hlx-accent-dim);
  background: color-mix(in srgb, var(--hlx-paper-2) 88%, var(--hlx-accent) 12%);
}

.hlx-path-card > p:first-child,
.hlx-path-card > p > strong:only-child,
.hlx-path-card p strong {
  display: block;
  font-family: var(--hlx-font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 0.95rem;
  color: var(--hlx-ink);
  margin: 0 0 0.35rem;
}

.hlx-path-card p {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--hlx-ink-muted);
  line-height: 1.45;
}

.hlx-path-card .md-button {
  margin: 0.25rem 0.35rem 0 0;
}

/* Sticky key rules for long research pages */
.hlx-keyrules {
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  background: var(--hlx-paper-2);
  padding: var(--hlx-space-md) var(--hlx-space-lg);
  margin: 0 0 var(--hlx-space-lg);
}

.hlx-keyrules > p:first-child,
.hlx-keyrules > p > strong {
  font-family: var(--hlx-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hlx-accent);
}

.hlx-keyrules ol {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.hlx-keyrules li {
  margin: 0.35rem 0;
  color: var(--hlx-ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

@media screen and (min-width: 60em) {
  .hlx-keyrules {
    position: sticky;
    top: 3.5rem;
    z-index: 2;
  }
}

/* Claims: good vs bad language */
.hlx-claim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--hlx-space-md);
  margin: var(--hlx-space-md) 0 var(--hlx-space-lg);
}

.hlx-claim {
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  padding: var(--hlx-space-md);
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hlx-claim--good {
  border-color: color-mix(in srgb, var(--hlx-good) 45%, var(--hlx-rule));
  background: var(--hlx-good-soft);
}

.hlx-claim--bad {
  border-color: color-mix(in srgb, var(--hlx-bad) 45%, var(--hlx-rule));
  background: var(--hlx-bad-soft);
}

.hlx-claim p:first-child strong {
  font-family: var(--hlx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Material cards: sharper edges, accent hover */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card {
  border: 1px solid var(--hlx-rule);
  border-radius: 2px;
  background: var(--hlx-paper-2);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--hlx-accent-dim);
  box-shadow: 0 0 0 1px var(--hlx-accent-soft);
}

/* First desk card (reading evidence) slightly elevated */
.md-typeset .grid.cards > ul > li:first-child {
  border-color: var(--hlx-accent-dim);
}

.md-typeset .grid.cards > ul > li > hr,
.md-typeset .grid.cards > ol > li > hr {
  border-bottom-color: var(--hlx-rule);
}

/* Single strong callout style */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--hlx-warn);
}

.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
  background-color: var(--hlx-warn-soft);
}

/* Tables: readable for research (was 0.72rem — too dense) */
.md-typeset table:not([class]) {
  font-size: 0.82rem;
  border-color: var(--hlx-rule);
  font-variant-numeric: tabular-nums;
}

.md-typeset table:not([class]) th {
  background: var(--hlx-paper-3);
  color: var(--hlx-ink);
}

/* Code blocks sit on paper-2 */
.md-typeset pre > code {
  background-color: var(--hlx-paper-2);
}

/* Permalink less noisy on body */
.md-typeset .headerlink {
  opacity: 0.25;
}

.md-typeset .headerlink:hover {
  opacity: 1;
  color: var(--hlx-accent);
}

/* Nav active accent */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--hlx-accent) !important;
}

/* Soft rule under lead on home */
.hlx-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--hlx-ink-muted);
  max-width: 40rem;
  margin-bottom: 1.25rem;
}

/* Grok Imagine hero (telemetry / smaller embeds) */
.hlx-hero {
  margin: 0 0 1.5rem;
  max-width: 22rem;
}

.hlx-hero img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  box-shadow: 0 0.5rem 1.5rem var(--hlx-shadow);
}

.hlx-hero figcaption {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-family: var(--hlx-font-mono);
  color: var(--hlx-ink-muted);
  font-style: normal;
  text-align: left;
  max-width: none;
}

.hlx-hero figcaption a {
  color: var(--hlx-accent);
}

/* ── Splash home ───────────────────────────────────────── */
.md-content:has(.hlx-splash) .md-content__inner > h1:first-child {
  display: none;
}

.hlx-splash {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem 3rem;
  /* content-height hero — not full-viewport centered AI landing */
  min-height: 0;
  padding: 1.5rem 0 2.5rem;
  box-sizing: border-box;
}

.hlx-splash .hlx-path-grid {
  max-width: none;
  margin-bottom: 1.25rem;
}

.hlx-splash-hero {
  margin: 0;
  flex: 0 1 18rem;
  max-width: min(20rem, 88vw);
}

.hlx-splash-hero img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  box-shadow:
    0 0 0 1px var(--hlx-accent-faint),
    0 1rem 2.5rem var(--hlx-shadow);
}

.hlx-splash-cta {
  /* legacy class kept for any remaining pages */
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.hlx-splash-copy {
  flex: 1 1 16rem;
  max-width: 28rem;
  text-align: left;
}

.hlx-splash-brand {
  margin: 0 0 0.35rem;
  font-family: var(--hlx-font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--hlx-ink);
}

.hlx-splash-tag {
  margin: 0 0 1rem;
  font-family: var(--hlx-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hlx-accent);
}

.hlx-splash-sub {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--hlx-ink-muted);
}

.hlx-splash-line {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--hlx-ink-muted);
  font-family: var(--hlx-font-mono);
  line-height: 1.5;
}

.hlx-splash-cta .md-button {
  margin: 0;
}

.hlx-splash-credit {
  margin: 0;
  font-size: 0.7rem;
  font-family: var(--hlx-font-mono);
  color: var(--hlx-ink-muted);
}

.hlx-splash-credit a {
  color: var(--hlx-accent);
}

@media screen and (max-width: 44.984375em) {
  .hlx-splash {
    flex-direction: column;
    min-height: auto;
    padding-top: 0.5rem;
    text-align: center;
  }

  .hlx-splash-copy {
    text-align: center;
  }

  .hlx-splash-cta {
    justify-content: center;
  }

  .hlx-splash-hero {
    max-width: min(16rem, 70vw);
  }
}

.hlx-posture {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hlx-rule);
  font-size: 0.78rem;
  color: var(--hlx-ink-muted);
  font-family: var(--hlx-font-mono);
}

/* Homepage funnel */
.hlx-purpose {
  max-width: 46rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--hlx-ink);
}

.hlx-purpose strong {
  font-weight: 600;
  color: var(--hlx-ink);
}

.hlx-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--hlx-space-md);
  margin: 0 0 var(--hlx-space-xl);
}

.hlx-cta-card {
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  background: var(--hlx-paper-2);
  padding: var(--hlx-space-md) var(--hlx-space-lg);
  min-width: 0;
}

.hlx-cta-card--primary {
  border-color: var(--hlx-accent-dim);
  background: color-mix(in srgb, var(--hlx-paper-2) 88%, var(--hlx-accent) 12%);
}

.hlx-cta-card h3 {
  margin-top: 0;
  font-size: 1.05rem;
  font-weight: 600;
  font-style: normal;
}

.hlx-cta-card pre {
  margin: 0.65rem 0;
  font-size: 0.72rem;
}

.hlx-gateway {
  margin: 0 0 var(--hlx-space-lg);
}

.hlx-gateway table {
  width: 100%;
  max-width: 40rem;
}

.hlx-splash-brand-foot {
  margin: 2rem 0 0.5rem;
  font-family: var(--hlx-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hlx-accent);
}

/* Mermaid diagrams on dark paper */
.mermaid {
  background: var(--hlx-paper-2);
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  padding: 1rem;
  margin: 0.75rem 0 1.25rem;
}

/* ── Archive index (catalogue, not equal card grid) ───── */
.hlx-kind {
  display: inline-block;
  font-family: var(--hlx-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--hlx-radius);
  border: 1px solid var(--hlx-rule);
  margin: 0 0 0.4rem;
  color: var(--hlx-ink-muted);
  white-space: nowrap;
}

.hlx-kind--analysis {
  color: var(--hlx-accent);
  border-color: color-mix(in srgb, var(--hlx-accent) 40%, var(--hlx-rule));
  background: var(--hlx-accent-faint);
}

.hlx-kind--phase5 {
  color: var(--hlx-warn);
  border-color: color-mix(in srgb, var(--hlx-warn) 40%, var(--hlx-rule));
  background: var(--hlx-warn-soft);
}

.hlx-index-row {
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  background: var(--hlx-paper-2);
  padding: 0.85rem 1rem;
  margin: 0 0 0.65rem;
  min-width: 0;
}

.hlx-index-row--analysis {
  border-left: 2px solid var(--hlx-accent-dim);
}

.hlx-index-row--phase5 {
  border-left: 2px solid var(--hlx-warn);
}

.hlx-index-row p {
  margin: 0.15rem 0;
  font-size: 0.88rem;
  color: var(--hlx-ink-muted);
  line-height: 1.45;
}

.hlx-index-row a {
  font-weight: 600;
  color: var(--hlx-ink);
}

.hlx-index-row a:hover {
  color: var(--hlx-accent);
}

.hlx-index-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--hlx-ink-muted);
  font-family: var(--hlx-font-mono);
}

/* Specimen: publish-safe vector sample block */
.hlx-specimen {
  border: 1px solid var(--hlx-rule);
  border-radius: var(--hlx-radius);
  background: var(--hlx-paper-2);
  margin: 0 0 var(--hlx-space-lg);
  overflow: hidden;
  min-width: 0;
}

.hlx-specimen-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--hlx-rule);
  background: var(--hlx-paper-3);
}

.hlx-specimen-head strong {
  font-family: var(--hlx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hlx-accent);
  font-weight: 600;
}

.hlx-specimen-head span {
  font-family: var(--hlx-font-mono);
  font-size: 0.72rem;
  color: var(--hlx-ink-muted);
}

.hlx-specimen-body {
  padding: 0.75rem 1rem 1rem;
}

.hlx-specimen-body .md-typeset table,
.hlx-specimen .md-typeset table {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
}

.hlx-specimen-meta {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--hlx-ink-muted);
  font-family: var(--hlx-font-mono);
  line-height: 1.45;
}

/* Prefer readable code inside specimen */
.hlx-specimen pre {
  margin: 0.5rem 0 0;
  max-height: 16rem;
  overflow: auto;
}

/* ═══════════════════════════════════════════════════════════
   Mobile — chef's kiss floor (320 / 375 / 414 / 768)
   Hallmark gates: no horizontal scroll, no 2-line CTAs,
   minmax(0,1fr), overflow-wrap on display, section collapse
   ═══════════════════════════════════════════════════════════ */

html,
body {
  overflow-x: clip;
}

.md-typeset,
.md-content__inner,
.md-main__inner {
  min-width: 0;
  max-width: 100%;
}

/* Long tokens / URLs don't blow the viewport */
.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Code: scroll inside, never expand page */
.md-typeset pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.md-typeset pre > code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

.md-typeset :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tables: swipe, don't squash */
.md-typeset__table,
.md-typeset table:not([class]) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.md-typeset table:not([class]) {
  font-size: 0.8rem;
}

/* Touch-friendly primary controls */
.md-typeset .md-button {
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.hlx-cta-card .md-button,
.hlx-path-card .md-button {
  width: 100%;
  margin: 0.35rem 0 0;
}

.hlx-cta-card .md-button + .md-button,
.hlx-path-card .md-button + .md-button {
  margin-top: 0.4rem;
}

/* Status strip: chips stack cleanly */
.hlx-status {
  gap: 0.4rem 0.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
}

.hlx-status span {
  line-height: 1.35;
}

/* Mermaid: scroll on narrow */
.mermaid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── ≤ 768px (tablet / large phone landscape) ── */
@media screen and (max-width: 48em) {
  .md-typeset {
    font-size: 0.92rem;
  }

  .md-typeset h1 {
    font-size: 1.55rem;
    letter-spacing: -0.015em;
  }

  .md-typeset h2 {
    font-size: 1.2rem;
  }

  .hlx-purpose,
  .hlx-lead {
    font-size: 1rem;
    max-width: none;
  }

  .hlx-cta-grid,
  .hlx-path-grid,
  .hlx-claim-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: none;
  }

  .hlx-cta-card,
  .hlx-path-card {
    padding: 0.9rem 1rem;
  }

  .hlx-cta-card pre,
  .hlx-cta-card .highlight {
    font-size: 0.68rem;
  }

  .hlx-gateway table {
    max-width: none;
  }

  .hlx-keyrules {
    position: static;
    padding: 0.85rem 1rem;
  }

  .hlx-keyrules li {
    font-size: 0.88rem;
  }

  .hlx-index-row {
    padding: 0.75rem 0.85rem;
  }

  .hlx-specimen-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .hlx-splash-brand-foot {
    letter-spacing: 0.1em;
    font-size: 0.72rem;
  }

  .hlx-posture {
    font-size: 0.72rem;
    line-height: 1.45;
  }

  /* Material cards: single column feel */
  .md-typeset .grid.cards > ul,
  .md-typeset .grid.cards > ol {
    grid-template-columns: 1fr !important;
  }
}

/* ── ≤ 414px (phones) ── */
@media screen and (max-width: 26em) {
  .md-content__inner {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .hlx-status {
    flex-direction: column;
    align-items: flex-start;
  }

  .md-typeset table:not([class]) {
    font-size: 0.74rem;
  }

  .md-typeset .md-button {
    font-size: 0.85rem;
    white-space: normal; /* allow wrap only on very narrow; prefer short labels */
    line-height: 1.25;
    text-align: center;
  }

  .hlx-kind {
    font-size: 0.62rem;
    padding: 0.12rem 0.35rem;
  }

  .hlx-cta-card h3 {
    font-size: 1rem;
  }

  /* Prevent mono code blocks from feeling cramped */
  .md-typeset pre > code {
    font-size: 0.7rem;
  }
}

/* Safe areas (notched phones) */
@supports (padding: max(0px)) {
  .md-header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .md-content__inner {
    padding-left: max(0.8rem, env(safe-area-inset-left));
    padding-right: max(0.8rem, env(safe-area-inset-right));
  }
}

/* Touch: larger hit targets for index/chips without changing desktop */
@media (pointer: coarse) {
  .hlx-map-chips .chip,
  .hlx-map-famlist button {
    min-height: 2.5rem;
  }

  .hlx-index-row a {
    display: inline-block;
    padding: 0.15rem 0;
  }
}