/* Mobile-first compatibility layer. Content, palette and search are unchanged. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --nav-height: 5.5rem;
  --nav-bottom: max(.75rem, var(--safe-bottom));
  --gutter: clamp(1rem, 4vw, 2rem);
}
html { scroll-padding-bottom: calc(var(--nav-height) + var(--nav-bottom) + 1rem); }
body { font-size: 1rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
main { width: 100%; max-width: 60rem; padding: 1.1rem max(var(--gutter), var(--safe-right)) 1.5rem max(var(--gutter), var(--safe-left)); }
.brand { padding: max(1rem, var(--safe-top)) max(1.25rem, var(--safe-right)) .25rem max(1.25rem, var(--safe-left)); }
.brand a { max-width: 100%; }
.brand img { width: clamp(16rem, 45vw, 20rem); height: auto; }
h1, .welcome h1 { font-size: clamp(2rem, 1.35rem + 3vw, 3.125rem); letter-spacing: -.025em; overflow-wrap: anywhere; }
h2, h3, p, a, button, summary { overflow-wrap: anywhere; }
.page-heading p, .welcome p, .action-card p { font-size: 1rem; }
.answer-copy, .guide-note { font-size: 1rem; line-height: 1.8; }
.source-note { font-size: 1rem; }
.answer h2, .suggestion-title { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.8125rem); }
.guide-section > h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem); }
.guide-subheading { font-size: 1.0625rem; }
.home-actions { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.action-card { display: grid; grid-template-columns: 2.375rem minmax(0, 1fr); column-gap: .9rem; padding: 1.3rem; min-height: 0; }
.action-card h2 { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); margin: .25rem 0 .5rem; }
.action-card p { margin: 0; }
.card-cta { grid-column: 2; justify-self: start; margin-top: 1rem; font-size: .875rem; }
.desktop-break { display: none; }
.action-card > *, .answer-meta > *, .navigation a, .input-wrap, .suggestion, .saved-item { min-width: 0; }
button, .primary, .secondary, summary, .source-link, .contents a { min-height: 2.75rem; min-width: 2.75rem; }
button, .primary, .secondary { max-width: 100%; white-space: normal; }
.primary, .secondary { font-size: 1rem; }
.text-button { padding-inline: .5rem; font-size: .9375rem; }
.search-panel { padding: clamp(1rem, 3vw, 1.75rem); max-width: 43.75rem; }
.search-panel textarea { width: 100%; min-width: 0; min-height: 8rem; font-size: max(16px, 1rem); line-height: 1.6; resize: vertical; scroll-margin-block: 1rem; }
.search-panel textarea::placeholder { color: #766573; }
.search-panel label { font-size: .875rem; }
#results, .reading { max-width: 46.25rem; }
.answer, .suggestion { padding: clamp(1rem, 3vw, 1.875rem); }
.guide-section .answer { padding: clamp(1rem, 3vw, 1.875rem); }
.answer-meta { flex-wrap: wrap; font-size: .8125rem; }
.answer-meta > :last-child { white-space: nowrap; }
.suggestions { grid-template-columns: minmax(0, 1fr); }
.save { font-size: .9375rem; }
.answer-actions { gap: .75rem; }
.source-link { display: inline-flex; align-items: center; max-width: 100%; padding-block: .375rem; }
.contents summary { font-size: 1rem; }
.contents summary span { float: none; display: block; margin-left: 1.15rem; font-size: .8125rem; }
.contents small { color: #83566d; font-size: .75rem; }
.contents a { font-size: 1rem; }
.navigation {
  left: var(--safe-left); right: var(--safe-right); bottom: var(--nav-bottom);
  transform: none; margin-inline: auto; width: calc(100% - var(--safe-left) - var(--safe-right) - 1.25rem);
  max-width: 35rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .125rem; padding: .375rem;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.navigation a { min-height: 3.5rem; padding: .5rem .125rem; font-size: .75rem; }
.navigation a span { max-width: 100%; }
.app-footer { padding: 0 max(1.25rem, var(--safe-right)) calc(var(--nav-height) + var(--nav-bottom) + 2rem) max(1.25rem, var(--safe-left)); font-size: .8125rem; color: #536b5f; }
.toast { width: max-content; bottom: calc(var(--nav-height) + var(--nav-bottom) + .75rem); max-width: calc(100% - var(--safe-left) - var(--safe-right) - 2rem); font-size: .875rem; }
.skip { top: 0; left: max(1rem, var(--safe-left)); transform: translateY(-150%); }
.skip:focus { top: max(.5rem, var(--safe-top)); transform: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 3px solid #125969; outline-offset: 3px; scroll-margin-block: 1.5rem; }
.guide-section:focus { outline: none; }
.contents-return {
  position: fixed;
  right: max(1rem, var(--safe-right));
  bottom: calc(var(--nav-height) + var(--nav-bottom) + .75rem);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .55rem .9rem;
  border: 1px solid #dfbbc9;
  border-radius: 999px;
  background: #fffdfd;
  color: #98345f;
  box-shadow: 0 4px 16px #4923310b;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 1100px) {
  .contents-return { bottom: max(1.25rem, var(--safe-bottom)); right: max(1.25rem, var(--safe-right)); }
}
@media print { .contents-return { display: none; } }
body[data-keyboard="open"] .navigation { visibility: hidden; pointer-events: none; }
body[data-keyboard="open"] .search-panel textarea { height: clamp(4.5rem, calc(var(--visual-height) * .28), 8rem); min-height: 4.5rem; max-height: 8rem; }
body[data-keyboard="open"] .toast { bottom: 1rem; }
@media (min-width: 601px) {
  body { font-size: 1.0625rem; }
  .brand { padding-top: max(1.75rem, var(--safe-top)); }
  .home-actions { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 1.5rem; }
  .action-card { display: flex; padding: clamp(1.5rem, 3vw, 2rem); min-height: 17.5rem; }
  .action-card h2 { margin-top: 1.1rem; }
  .action-card p { margin-bottom: 1.5rem; }
  .card-cta { margin-top: auto; }
  .desktop-break { display: initial; }
  .answer-copy, .guide-note { font-size: 1.0625rem; }
  .answer-actions > .text-button { width: auto; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .navigation a { flex-direction: row; min-height: 2.75rem; gap: .3rem; }
  .navigation svg { width: 1.125rem; height: 1.125rem; }
  .brand { padding-top: max(.5rem, var(--safe-top)); }
  .brand img { width: 14rem; }
  .welcome { padding-block: .75rem 1.5rem; }
}
@media (hover: none) {
  .primary:hover, .primary-card:hover { background: #ad396c; }
  .secondary:hover { background: #fffdfd; }
  .suggestion:hover { border-color: #ecdce3; box-shadow: none; }
}