/* =========================================================
   V46 — responsive/mobile layout
   Converts the desktop left-hand obi into a compact top bar,
   preserves a full reading column, and keeps controls touchable.
   ========================================================= */

:root{
  --mobile-page-pad:max(1rem, env(safe-area-inset-left));
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

@media (max-width:900px){
  :root{
    --manual-essay-left-gap:0px!important;
    --manual-essay-right-space:0px!important;
    --essay-mono-size:1rem!important;
  }

  html,
  body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body{
    display:block!important;
  }

  .site-shell{
    width:100%!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }

  /* The former vertical obi becomes a compact, persistent top navigation. */
  .left-column{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    position:relative!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
      "language brand type"
      "navigation navigation navigation"!important;
    align-items:center!important;
    gap:.65rem .75rem!important;
    padding:
      max(.65rem, env(safe-area-inset-top))
      max(.9rem, env(safe-area-inset-right))
      .72rem
      max(.9rem, env(safe-area-inset-left))!important;
    border:0!important;
    border-bottom:1px solid #111!important;
    background:#fff!important;
    z-index:20!important;
  }

  .left-column::before,
  .left-column::after,
  .side-nav::after{
    display:none!important;
  }

  .language-tools,
  .font-tools,
  .side-nav,
  .site-mark{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    writing-mode:horizontal-tb!important;
    margin:0!important;
    max-width:none!important;
  }

  .language-tools{
    grid-area:language!important;
    justify-self:start!important;
    display:flex!important;
    align-items:center!important;
    gap:.65rem!important;
    font-size:.84rem!important;
    line-height:1!important;
  }

  .font-tools{
    grid-area:type!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:.65rem!important;
  }

  .font-tools button{
    min-width:1.55rem!important;
    min-height:1.55rem!important;
    padding:.15rem!important;
    font-size:.84rem!important;
    line-height:1!important;
    touch-action:manipulation;
  }

  .site-mark{
    grid-area:brand!important;
    justify-self:center!important;
    display:none!important;
    color:#111!important;
    text-align:center!important;
    font-size:.72rem!important;
    line-height:1.1!important;
    letter-spacing:.015em!important;
    white-space:nowrap!important;
  }

  .site-mark br,
  .site-mark span:last-child{
    display:none!important;
  }

  .side-nav{
    grid-area:navigation!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:.45rem 1rem!important;
  }

  .side-nav > a,
  .side-nav .nav-parent-link,
  .side-nav .nav-parent{
    display:inline-flex!important;
    align-items:center!important;
    min-height:2rem!important;
    padding:.2rem 0!important;
    font-size:.9rem!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    touch-action:manipulation;
  }

  .side-nav .tools-nav-group,
  .side-nav .nav-group{
    display:contents!important;
  }

  /* The parent tools link is sufficient in the compact navigation. */
  .side-nav .nav-submenu{
    display:none!important;
  }

  .reader{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }

  .essay{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:
      clamp(1.8rem,6vw,2.8rem)
      max(1rem, env(safe-area-inset-right))
      max(5rem, calc(3rem + env(safe-area-inset-bottom)))
      max(1rem, env(safe-area-inset-left))!important;
    overflow-wrap:break-word!important;
  }

  .essay-header{
    width:100%!important;
    max-width:100%!important;
    margin-right:0!important;
    margin-bottom:clamp(2.5rem,12vw,4.5rem)!important;
  }

  .essay h1,
  .essay-header h1{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(2.35rem,9.6vw,4.6rem)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }

  .essay > p,
  .essay p{
    width:100%!important;
    max-width:68ch!important;
    font-size:calc(var(--reader-body-size,16px) + 1px)!important;
    line-height:1.68!important;
    letter-spacing:0!important;
    margin-bottom:1.45rem!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  .inline-quadra{
    width:100%!important;
    margin:3.25rem 0 3.75rem!important;
    padding:0!important;
  }

  .inline-quadra blockquote,
  .example-poem{
    max-width:100%!important;
    font-size:calc(var(--reader-quadra-size,20px) + 2px)!important;
    line-height:1.08!important;
    overflow-wrap:break-word!important;
  }

  .metric-grid,
  .examples-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:1rem!important;
  }

  .example-card{
    width:100%!important;
    min-width:0!important;
    min-height:13rem!important;
  }

  .example-answer{
    padding:1rem!important;
    overflow-wrap:break-word!important;
  }

  .archive-callout,
  .forma-section,
  .examples-section{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .right-column,
  .scroll-zone{
    display:none!important;
  }

  .ascii-rain,
  .ascii-valley{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    width:0!important;
    height:0!important;
  }

  /* Tools page: preview first, controls next, without desktop minimum widths. */
  #reader .tools-page{
    width:100%!important;
    max-width:none!important;
    padding:
      clamp(1.4rem,5vw,2.2rem)
      max(.85rem, env(safe-area-inset-right))
      max(4rem, calc(2.5rem + env(safe-area-inset-bottom)))
      max(.85rem, env(safe-area-inset-left))!important;
  }

  .tools-page .forma-head h2{
    max-width:100%!important;
    font-size:clamp(2.15rem,10.5vw,3.65rem)!important;
    line-height:1!important;
    overflow-wrap:break-word!important;
  }

  .tools-page .forma-head p{
    font-size:1rem!important;
    line-height:1.5!important;
  }

  .tool-shell{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1rem!important;
  }

  .tool-shell .cutter-stage{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1rem!important;
  }

  .tool-shell .preview-frame,
  .tools-page .preview-frame{
    width:100%!important;
    min-width:0!important;
    min-height:15rem!important;
    max-height:none!important;
    aspect-ratio:4 / 5!important;
  }

  .tool-shell .tools-sidebar{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1rem!important;
  }

  .tool-shell .cutter-controls,
  .tools-page .cutter-controls{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.75rem!important;
    padding:.75rem!important;
    overflow:visible!important;
  }

  .tool-shell .cutter-controls > *,
  .tools-page .cutter-controls > *{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .tool-shell button,
  .tool-shell .file-button,
  .tool-shell .control-inline,
  .tool-shell .range-control,
  .tool-shell .select-control,
  .tool-shell .seed-control{
    width:100%!important;
    min-width:0!important;
    min-height:3.65rem!important;
    padding:.75rem!important;
    font-size:1rem!important;
    line-height:1.25!important;
  }

  .tool-shell .range-control{
    grid-template-columns:auto minmax(0,1fr) 3.7rem!important;
  }

  .tool-shell .number-stepper{
    grid-template-columns:2.8rem minmax(0,1fr) 2.8rem!important;
  }
}

/* Extra-narrow phones: simplify the first row without sacrificing content width. */
@media (max-width:390px){
  .left-column{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:
      "language type"
      "navigation navigation"!important;
  }

  .site-mark{
    display:none!important;
  }

  .side-nav{
    gap:.35rem .75rem!important;
  }

  .side-nav > a,
  .side-nav .nav-parent-link,
  .side-nav .nav-parent{
    font-size:.84rem!important;
  }

  .essay{
    padding-left:max(.85rem, env(safe-area-inset-left))!important;
    padding-right:max(.85rem, env(safe-area-inset-right))!important;
  }

  .essay h1,
  .essay-header h1{
    font-size:clamp(2.15rem,9.2vw,3.35rem)!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
}

/* Archive page */
@media (max-width:720px){
  body:has(.archive-shell){
    overflow:auto!important;
  }

  .archive-shell{
    min-height:100dvh!important;
    padding:
      max(4.25rem, calc(3rem + env(safe-area-inset-top)))
      max(.85rem, env(safe-area-inset-right))
      max(3.5rem, calc(2.5rem + env(safe-area-inset-bottom)))
      max(.85rem, env(safe-area-inset-left))!important;
  }

  .archive-focus{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    grid-template-rows:
      auto auto auto
      clamp(15rem,43vh,21rem)
      auto auto auto
      minmax(4rem,auto)
      auto!important;
    gap:.45rem!important;
    align-content:start!important;
  }

  .archive-poem{
    min-width:0!important;
    padding:.55rem .1rem!important;
  }

  .archive-poem span{
    max-width:100%!important;
  }

  .archive-tools{
    grid-template-columns:1fr!important;
    gap:.55rem!important;
  }

  .archive-tools button,
  .archive-tools input{
    height:3.25rem!important;
    min-width:0!important;
  }

  .archive-back{
    top:max(.85rem, env(safe-area-inset-top))!important;
    left:max(.85rem, env(safe-area-inset-left))!important;
  }

  .archive-lang{
    top:max(.65rem, env(safe-area-inset-top))!important;
    right:max(.65rem, env(safe-area-inset-right))!important;
  }
}

/* Privacy pages */
@media (max-width:720px){
  body:has(> main:not(.reader):not(.archive-shell)){
    overflow:auto!important;
  }

  body > main:not(.reader):not(.archive-shell){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:
      max(4.5rem, calc(3rem + env(safe-area-inset-top)))
      max(1rem, env(safe-area-inset-right))
      max(3.5rem, calc(2.5rem + env(safe-area-inset-bottom)))
      max(1rem, env(safe-area-inset-left))!important;
    font-size:1rem!important;
    line-height:1.7!important;
  }

  body > main:not(.reader):not(.archive-shell) h1{
    font-size:clamp(1.8rem,8vw,2.6rem)!important;
    line-height:1.05!important;
  }

  body > main:not(.reader):not(.archive-shell) h2{
    font-size:.9rem!important;
    margin-top:2.25rem!important;
  }
}


/* V47 — mobile notes, references and scansion */
@media (max-width: 900px) {
  /* Bibliography / recommended reading use the same scale as the notes section. */
  .reference-section h2,
  .reference-section .reference-entry,
  .notes-section h2,
  .notes-section li,
  .notes-section .note-backlink {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* Keep each scansion verse and its rhyme letter on one compact row. */
  .essay .metric-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1.15em !important;
    column-gap: .4em !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    font-size: clamp(9px, 2.55vw, 11px) !important;
    line-height: 1.35 !important;
  }
  .essay .metric-grid > span,
  .essay .metric-grid > b {
    min-width: 0 !important;
    padding: .58em .12em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
  }
  .essay .metric-grid > span {
    letter-spacing: -0.025em !important;
  }
  .essay .metric-grid > b {
    text-align: right !important;
    align-self: center !important;
  }
}

/* Notes at the bottom behave as return links to their superscript callouts. */
.notes-section li[data-note-ref] {
  cursor: pointer;
}
.notes-section .note-backlink {
  color: inherit;
  text-decoration: none;
}
.notes-section li[data-note-ref]:hover .note-backlink,
.notes-section li[data-note-ref]:focus .note-backlink {
  text-decoration: underline;
}
.footnote-ref[id] {
  scroll-margin-top: 8rem;
}