/*
 * Phone compositions for PHP surfaces (max-width: 720px).
 * React hubs use frontend/src/phone/phone-layouts.css.
 */

@media (max-width: 720px) {
  :root {
    --hw-global-nav-h: 56px;
    --hw-phone-top-h: 56px;
    --hw-phone-tab-h: calc(3.4rem + env(safe-area-inset-bottom, 0px));
    --hw-phone-pad: max(0.85rem, env(safe-area-inset-left, 0px));
  }

  /* Story — cover owns the first screen; Read stays in the thumb zone */
  body.single-story .hw-story-page--quiet-stage {
    --hw-quiet-stage-max: 100%;
    --hw-quiet-cover: min(46vw, 10rem);
    overflow: visible;
    --hw-quiet-hero-pad-top: calc(var(--hw-global-nav-top, 0px) + var(--hw-phone-top-h, 56px) + 0.75rem);
    --hw-quiet-title: clamp(1.85rem, 8vw, 2.5rem);
    --hw-quiet-side-max: 100%;
  }

  body.single-story .hw-story-page--quiet-stage .hw-hero-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    width: min(100%, 36rem);
    padding-inline: var(--hw-phone-pad);
  }

  body.single-story .hw-story-page--quiet-stage .hw-cover-wrap {
    width: var(--hw-quiet-cover);
    margin-inline: auto;
  }

  body.single-story .hw-story-page--quiet-stage .hw-hero-side,
  body.single-story .hw-story-page--quiet-stage .hw-hero-ledger {
    width: 100%;
    max-width: 22rem;
  }

  body.single-story .hw-hero .hw-primary-btn {
    position: static;
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  body.single-story .hw-hero-content {
    display: flex;
    flex-direction: column;
  }

  body.single-story .hw-action-row {
    order: 1;
    width: 100%;
  }

  body.single-story .hw-story-summary-wrap {
    order: 2;
  }

  body.single-story .hw-action-dock {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
    overflow-x: auto;
  }

  body.single-story .hw-action-dock .hw-action-btn,
  body.single-story .hw-action-dock .hw-status-btn,
  body.single-story .hw-action-dock .hw-support-link,
  body.single-story .hw-action-dock summary.hw-action-btn,
  body.single-story .hw-action-dock .hw-list-dropdown,
  body.single-story .hw-action-dock .hw-reader-status {
    width: auto;
    min-height: 44px;
    min-width: 44px;
    flex: 0 0 auto;
    justify-content: center;
  }

  body.single-story .hw-action-dock .hw-action-label {
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  body.single-story .hw-story-boost[open] .hw-story-boost__panel,
  body.single-story .hw-trust-report[open] .hw-trust-report-panel {
    position: fixed;
    z-index: 50;
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--hw-phone-tab-h, 3.4rem);
    width: auto;
    min-width: 0;
    height: auto;
    max-height: min(70dvh, 28rem);
    overflow: auto;
    margin: 0;
    padding: 1rem 1rem 1.25rem;
    border-radius: 1rem 1rem 0 0;
    background: #1a120e;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  }

  body.single-story .hw-tab-panels,
  body.single-story .hw-story-page {
    padding-bottom: calc(var(--hw-phone-tab-h, 3.4rem) + 1rem);
  }

  body.single-story .hw-tabs {
    position: sticky !important;
    top: calc(var(--hw-global-nav-top, 0px) + var(--hw-phone-top-h, 56px));
    z-index: 6;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible !important;
    gap: 0.35rem;
    background: var(--hw-bg, #120b08);
  }

  body.single-story .hw-tabs a,
  body.single-story .hw-tabs button {
    min-height: 44px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.single-story .hw-chapter-row,
  body.single-story .hw-chapter-list a,
  body.single-story .hw-chapter-item {
    min-height: 48px;
  }

  /* Reader — prose is the page; chrome hides while scrolling */
  body.single-chapter .hw-chapter-reader {
    --hw-reader-width: min(100%, 68ch);
    font-size: 1.05rem;
    line-height: 1.7;
  }

  body.single-chapter .hw-chapter-body,
  body.single-chapter .hw-reader-chapter-body,
  body.single-chapter [data-hw-reader-article] {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 68ch;
  }

  body.single-chapter.hw-global-nav-active {
    padding-top: 0;
  }

  body.single-chapter .hw-site-header.hw-global-nav {
    display: none;
  }

  body.single-chapter .hw-chapter-body,
  body.single-chapter .hw-reader-chapter-body {
    display: flow-root;
  }

  /* Reader toolbar — visible, thumb-sized entry to TOC + typography (P-READ).
     The side rails are hidden below 1180px; without this there is no phone
     way to change text or navigate chapters. */
  body.single-chapter .hw-reader-phone-toolbar {
    position: fixed;
    right: max(0.6rem, env(safe-area-inset-right, 0px));
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: flex;
    gap: 0.4rem;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.single-chapter .hw-reader-phone-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 1px solid rgba(212, 165, 116, 0.28);
    border-radius: 999px;
    background: rgba(12, 7, 5, 0.92);
    color: #f4dec0;
    font-size: 0.82rem;
    font-weight: 650;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  body.single-chapter .hw-reader-phone-toolbar__btn:active {
    background: rgba(28, 18, 13, 0.96);
  }

  body.single-chapter .hw-reader-phone-toolbar__glyph--aa {
    font-family: var(--hw-font-body, Georgia, serif);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* Hide the floating toolbar when chrome is scrolled away. */
  body.single-chapter.hw-phone-reader-chrome-off .hw-reader-phone-toolbar {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }

  body.single-chapter .hw-reader-bottom-nav {
    position: static;
    clear: both;
    z-index: auto;
    margin-top: 1.5rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    background: transparent;
  }

  body.single-chapter .hw-chapter-bottom a,
  body.single-chapter .hw-chapter-bottom button {
    min-height: 44px;
  }

  body.single-chapter .hw-chapter-reader.is-phone-tools .hw-chapter-sidebar--right {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 100%;
    max-width: none;
    max-height: min(52dvh, 22rem);
    margin: 0;
    padding: 0.85rem 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    overflow: auto;
    background: #1a120e;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  }

  body.single-chapter .hw-chapter-reader.is-phone-tools .hw-chapter-sidebar--right .hw-reader-tool-btn {
    min-width: 44px;
    min-height: 44px;
  }

  body.single-chapter .hw-chapter-reader.is-phone-tools .hw-reader-panel--tools,
  body.single-chapter .hw-chapter-reader.is-phone-tools .hw-reader-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  body.single-chapter .hw-chapter-reader.is-phone-tools .hw-reader-book-progress,
  body.single-chapter .hw-chapter-reader.is-phone-tools .hw-reader-tools h3 {
    display: none;
  }

  /* TOC bottom sheet — same treatment as the tools sheet (P-READ). */
  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 100%;
    max-width: none;
    max-height: min(52dvh, 22rem);
    margin: 0;
    padding: 0.85rem 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    overflow: auto;
    background: #1a120e;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  }

  /* Phone TOC: keep only the chapter list — drop cover, story title, stats. */
  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__cover,
  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__vol,
  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__story-title,
  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__author,
  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__stats,
  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__story-link {
    display: none;
  }

  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__toc-list {
    max-height: none;
    overflow: visible;
  }

  body.single-chapter .hw-chapter-reader.is-phone-toc .hw-chapter-sidebar--left .hw-chapter-sidebar__toc-item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  body.single-chapter .hw-reader-stream {
    padding-bottom: 1.25rem;
  }

  body.single-chapter.hw-phone-reader-chrome-off .hw-global-nav {
    transform: translateY(-120%);
  }

  body.single-chapter.hw-phone-reader-chrome-off .hw-chapter-progress-chrome,
  body.single-chapter.hw-phone-reader-chrome-off .hw-reader-tools-drawer {
    opacity: 0;
    pointer-events: none;
  }

  /* Settings — grouped list, rail above the section */
  body.hw-settings-page .hw-settings__layout,
  .hw-settings__layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .hw-settings__rail {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    overflow-x: auto;
    position: sticky;
    top: calc(var(--hw-global-nav-top, 0px) + var(--hw-phone-top-h, 56px));
    z-index: 4;
    width: 100%;
    padding-bottom: 0.35rem;
    background: var(--hw-fe-bg, #f7f3ed);
  }

  .hw-settings__rail-link {
    min-height: 44px;
    flex: 0 0 auto;
  }

  .hw-settings__section,
  .hw-settings form,
  .hw-settings input,
  .hw-settings select,
  .hw-settings textarea {
    max-width: 100%;
  }

  .hw-settings input,
  .hw-settings select,
  .hw-settings textarea,
  .hw-settings button {
    min-height: 44px;
  }

  /* Profile — identity, then one column */
  .hw-profile-shell .hw-profile__hero--cinema,
  .hw-profile-shell .hw-profile__layout,
  .hw-profile-shell .hw-profile__grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .hw-profile-shell {
    padding-bottom: calc(var(--hw-phone-tab-h, 3.4rem) + 1rem);
    overflow-x: clip;
  }

  /* Profile — thumb targets match Settings density (P-SETTINGS). */
  .hw-profile-shell .hw-profile__mode-btn,
  .hw-profile-shell .hw-profile__tab,
  .hw-profile-shell .hw-profile__hearth-shelf-tab,
  .hw-profile-shell .hw-profile__quest-chip,
  .hw-profile-shell .hw-profile__btn--small {
    min-height: 2.75rem;
    align-items: center;
  }

  /* Weekly prompt — one invitation */
  .hw-arena__hero,
  .hw-arena__layout,
  .hw-arena__stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .hw-arena-hourglass,
  .hw-arena-hourglass__svg {
    width: min(70vw, 16rem);
    height: auto;
    margin-inline: auto;
  }

  .hw-arena__title {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
  }

  .hw-arena {
    padding-bottom: calc(var(--hw-phone-tab-h, 3.4rem) + 1rem);
    overflow-x: clip;
  }

  /* Guidebook and suggestions */
  .hw-gb,
  .hw-suggestions {
    padding-inline: var(--hw-phone-pad);
    padding-bottom: calc(var(--hw-phone-tab-h, 3.4rem) + 1rem);
    overflow-x: clip;
  }

  .hw-gb__layout,
  .hw-gb__shell,
  .hw-suggestions__layout {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .hw-gb__article,
  .hw-gb__prose,
  .hw-suggestions__composer textarea {
    max-width: 68ch;
    font-size: 1.05rem;
    line-height: 1.65;
  }

  /* Job board — ticket rows */
  .hw-qb,
  body.hw-job-board-page .hw-qb {
    padding-bottom: calc(var(--hw-phone-tab-h, 3.4rem) + 1rem);
    overflow-x: clip;
  }

  .hw-qb__layout,
  .hw-qb__board {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .hw-qb__ticket,
  .hw-qb__row,
  .hw-qb__card {
    min-height: 4.5rem;
  }

  /* Studio — story list, tools full width */
  body.hw-author-dashboard-page .hw-stories-library,
  body.hw-author-dashboard-page .hw-ad-dash,
  body.hw-author-dashboard-page .hw-author-dashboard {
    padding-bottom: calc(var(--hw-phone-tab-h, 3.4rem) + 1rem);
    overflow-x: clip;
  }

  body.hw-author-dashboard-page .hw-stories-library-header,
  body.hw-author-dashboard-page .hw-stories-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  body.hw-author-dashboard-page .hw-stories-header-actions a,
  body.hw-author-dashboard-page .hw-stories-header-actions button {
    min-height: 48px;
    justify-content: center;
  }

  body.hw-author-dashboard-page table {
    display: block;
    overflow-x: auto;
  }

  /* Studio — primary author actions stay thumb-sized (P-STUDIO). */
  body.hw-author-dashboard-page .hw-story-book-actions__btn {
    min-height: 2.75rem;
  }

  body.hw-author-dashboard-page .hw-ad-header__range,
  body.hw-author-dashboard-page .hw-ad-header__icon-btn {
    min-height: 2.75rem;
  }

  body.hw-author-dashboard-page .hw-ad-header__icon-btn {
    min-width: 2.75rem;
  }
}