/* Direction 03, phone-specific presentation. Loaded last only by the full-site
   candidate. No content, handlers, visibility gates or storage are replaced. */
@media screen and (max-width: 780px) {
  body.wb-studio[data-studio-full="true"] {
    --studio-width: 100%;
    --wb-body-size: 17px;
    --sf-gutter-left: max(16px, env(safe-area-inset-left));
    --sf-gutter-right: max(16px, env(safe-area-inset-right));
    background: var(--wb-paper);
  }
  body.wb-studio[data-studio-full="true"][data-reading-font="large"] { --wb-body-size: 19px; }

  /* The phone is the frame: the navigation touches its edges, while controls
     and reading text share one safe inset instead of nested card padding. */
  body.wb-studio[data-studio-full="true"] #wb-header {
    width: 100%; margin: 0; padding: max(8px, env(safe-area-inset-top)) var(--sf-gutter-right) 6px var(--sf-gutter-left);
    border: 0; border-radius: 0; box-shadow: none; gap: 4px 12px;
  }
  body.wb-studio[data-studio-full="true"] .wb-brand { min-height: 44px; }
  body.wb-studio[data-studio-full="true"] .wb-global-nav { gap: 4px; }
  body.wb-studio[data-studio-full="true"] .wb-global-nav a { min-height: 44px; border-radius: 6px; }
  body.wb-studio[data-studio-full="true"] #wb-header [data-account] { border-color: transparent; padding-inline: 8px; }
  body.wb-studio[data-studio-full="true"] #wb-context {
    width: 100%; margin: 0; padding: 8px var(--sf-gutter-right) 8px var(--sf-gutter-left);
    gap: 4px 10px; background: var(--wb-paper); border-bottom: 1px solid var(--wb-line);
  }
  body.wb-studio[data-studio-full="true"] #wb-course-title { padding-left: 0; border: 0; font-size: 13px; }
  body.wb-studio[data-studio-full="true"] #wb-context .wb-context-actions { gap: 8px; }
  body.wb-studio[data-studio-full="true"] #wb-context .wb-context-actions button {
    flex: 1 1 0; min-width: 0; border: 0; padding: 8px 4px; background: var(--wb-chrome); border-radius: 6px;
  }
  body.wb-studio[data-studio-full="true"] #wb-workspace,
  body.wb-studio[data-studio-full="true"].wb-map-open #wb-workspace {
    width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: var(--wb-paper); overflow: visible;
  }
  body.wb-studio[data-studio-full="true"] #wb-stage { border: 0; border-radius: 0; }
  body.wb-studio[data-studio-full="true"] #wb-view-tabs {
    min-height: 52px; margin: 0 var(--sf-gutter-right) 0 var(--sf-gutter-left); gap: 8px;
  }
  body.wb-studio[data-studio-full="true"] #wb-view-tabs button { min-height: 52px; padding-block: 10px; }
  body.wb-studio[data-studio-full="true"] #wb-reading #content,
  body.wb-studio[data-studio-full="true"] #wb-reading #content:has(.compact-lesson) {
    width: 100%; padding: 24px var(--sf-gutter-right) 40px var(--sf-gutter-left);
  }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-header h1 { font-size: 28px; margin-bottom: 16px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-eyebrow { margin-bottom: 10px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-header { padding-bottom: 24px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-main { padding-top: 28px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-point { gap: 4px; margin-bottom: 30px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-point h2 { font-size: 20px; margin-bottom: 10px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-conclusion { padding: 16px; border-radius: 0; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-image-button { border-radius: 4px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-extra {
    border: 0; border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); border-radius: 0;
  }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-extra > summary { padding: 16px 0; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-extra-body { padding: 0 0 12px; }
  body.wb-studio[data-studio-full="true"] #wb-reading .compact-extra-group .section {
    padding: 16px 0; border: 0; border-radius: 0; box-shadow: none;
  }
  /* Original completion button becomes full width below 780px. Keep its
     parent stacked too, including the 720–780px landscape breakpoint gap. */
  body.wb-studio[data-studio-full="true"] #wb-reading .lesson-completion {
    flex-direction: column; align-items: stretch; gap: 16px;
  }
  body.wb-studio[data-studio-full="true"] #wb-reading #toggle-complete { max-width: 100%; white-space: normal; }

  /* Hub sections share the page. Only real controls and meaningful states
     retain a boundary; directory rows keep their original order and text. */
  body.wb-studio[data-studio-full="true"] #studio-hub { width: 100%; margin: 0 0 32px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-page {
    padding: 24px var(--sf-gutter-right) 0 var(--sf-gutter-left);
  }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-page:has(> .sh-hero) { padding-top: 0; }
  body.wb-studio[data-studio-full="true"] #studio-hub h1 { font-size: 28px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-hero {
    margin-left: calc(-1 * var(--sf-gutter-left)); margin-right: calc(-1 * var(--sf-gutter-right));
    padding: 24px var(--sf-gutter-right) 20px var(--sf-gutter-left); border-radius: 0; gap: 16px;
  }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-home-map { max-width: 310px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-home-columns { border-radius: 0; background: transparent; }
  body.wb-studio[data-studio-full="true"] #studio-hub :is(.sh-continue, .sh-index) { padding: 28px 0; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-index { border-bottom: 1px solid var(--wb-line); }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-section-head { margin-top: 28px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-series > a { padding-inline: 0; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-tools { border: 0; border-radius: 0; padding: 0; background: transparent; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-filters { gap: 8px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-filters :is(button, a) {
    border: 0; border-radius: 6px; background: var(--wb-chrome); min-height: 44px;
  }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-filters :is([aria-pressed="true"], [aria-current="page"]) {
    background: var(--wb-tint); box-shadow: inset 0 -2px var(--wb-green);
  }
  body.wb-studio[data-studio-full="true"] #studio-hub #sh-catalog { border: 0; border-radius: 0; background: transparent; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-group > summary { padding: 16px 0; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-course-row {
    margin-inline: 0; gap: 4px 10px; grid-template-columns: 44px minmax(0, 1fr) 16px;
  }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-book-layout { border: 0; border-radius: 0; background: transparent; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-book-nav { padding: 0 0 16px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-book-menu > summary { padding-block: 10px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-book-body { padding: 28px 0 16px; border: 0; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-book-body h2 { font-size: 23px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-notice { padding: 14px 16px; border-radius: 0; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-rule-form { gap: 24px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-rule-form textarea { min-height: 136px; }
  body.wb-studio[data-studio-full="true"] #studio-hub .sh-source-links a { border: 0; background: var(--wb-chrome); }

  /* Keep the exact tree and its original pan/pinch handlers. Giving the
     viewport the full phone width removes two wasted surrounding frames. */
  body.wb-studio[data-studio-full="true"] .tm-work-area {
    padding: 24px var(--sf-gutter-right) 16px var(--sf-gutter-left);
  }
  body.wb-studio[data-studio-full="true"] .tm-toolbar { gap: 16px; }
  body.wb-studio[data-studio-full="true"] .tm-toolbar h2 { font-size: 23px; }
  body.wb-studio[data-studio-full="true"] .tm-tools { gap: 8px; }
  body.wb-studio[data-studio-full="true"] .tm-tools :is(button, summary) { min-height: 44px; padding: 8px 10px; }
  body.wb-studio[data-studio-full="true"] .tm-instruction { margin: 14px 0 12px; }
  /* Keep the course heading, but give the map the screen: only the primary
     zoom/fit controls stay in the first row. Existing secondary controls and
     instructions are moved into More and restored at the desktop breakpoint. */
  body.wb-studio[data-studio-full="true"] .tm-phone-tools { padding-top: 16px; }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-toolbar {
    align-items: stretch; gap: 10px; margin-bottom: 12px;
  }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-toolbar h2 { font-size: 20px; line-height: 1.45; }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-tools {
    display: grid; grid-template-columns: 44px 36px 44px minmax(64px, 1fr) 50px; gap: 6px; width: 100%;
  }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-tools > output { min-width: 0; }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-tools > button,
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-more > summary { min-width: 44px; padding-inline: 8px; }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-more > div {
    width: min(320px, calc(100vw - var(--sf-gutter-left) - var(--sf-gutter-right)));
    max-height: min(28rem, 70dvh); overflow-y: auto; box-sizing: border-box;
  }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-more .tm-branch-nav { gap: 6px; margin: 4px 0; }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-more .tm-branch-nav button {
    flex: 0 0 44px; width: auto; padding-inline: 8px; justify-content: center;
  }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-more .tm-branch-nav [data-tm="branch"] {
    flex: 1 1 auto; min-width: 0; max-width: none; white-space: normal;
  }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-more .tm-instruction { margin: 4px 0; }
  body.wb-studio[data-studio-full="true"] .tm-phone-tools .tm-status:empty { display: none; }
  body.wb-studio[data-studio-full="true"] .tm-viewport {
    width: calc(100% + var(--sf-gutter-left) + var(--sf-gutter-right));
    margin-left: calc(-1 * var(--sf-gutter-left)); margin-right: calc(-1 * var(--sf-gutter-right));
    border: 0; border-radius: 0; min-height: 0; height: var(--tm-mobile-height, auto);
  }
  body.wb-studio[data-studio-full="true"] .tm-viewport:focus-visible { outline-offset: -3px; }
  body.wb-studio[data-studio-full="true"] .tm-expanded .tm-viewport { height: auto; min-height: 120px; }
  body.wb-studio[data-studio-full="true"] .tm-text-list { padding: 20px 0; border: 0; border-radius: 0; }
  body.wb-studio[data-studio-full="true"] .tm-text-list button {
    border: 0; border-bottom: 1px solid var(--wb-line); border-radius: 0; padding: 12px 0; background: transparent;
  }
  body.wb-studio[data-studio-full="true"] .tm-text-list button:hover { background: var(--wb-tint); }

  /* Full-width sheets retain the browser dialog semantics and their existing
     close/back controls. No account/admin visibility rule is overridden. */
  body.wb-studio[data-studio-full="true"] .wb-dialog,
  body.wb-studio[data-studio-full="true"] #wb-settings-dialog,
  body.wb-studio[data-studio-full="true"] #wb-mobile-panel,
  body.wb-studio[data-studio-full="true"] #wb-mobile-panel.wb-notes-drawer {
    inset: auto 0 0; width: 100%; max-width: 100%; height: auto; max-height: 92dvh;
    margin: 0; padding: 0; border: 0; border-radius: 12px 12px 0 0;
  }
  body.wb-studio[data-studio-full="true"] .wb-dialog-head {
    gap: 12px; padding: 12px var(--sf-gutter-right) 12px var(--sf-gutter-left);
  }
  body.wb-studio[data-studio-full="true"] .wb-dialog-head button { min-width: 44px; min-height: 44px; }
  body.wb-studio[data-studio-full="true"] :is(.wb-mobile-body, #wb-account-dialog .wb-dialog-body, #wb-settings-dialog .wb-dialog-body) {
    padding: 20px var(--sf-gutter-right) max(24px, env(safe-area-inset-bottom)) var(--sf-gutter-left);
  }
  body.wb-studio[data-studio-full="true"] #wb-library .sidebar {
    padding: 16px var(--sf-gutter-right) max(24px, env(safe-area-inset-bottom)) var(--sf-gutter-left);
  }
  body.wb-studio[data-studio-full="true"] #wb-library .lesson-list { max-height: 48dvh; padding-right: 0; }
  body.wb-studio[data-studio-full="true"] #wb-library .lesson-item { padding: 12px 0; border-bottom: 1px solid var(--wb-line); border-radius: 0; }
  body.wb-studio[data-studio-full="true"] #wb-account-dialog .sidebar-tool { border: 0; border-bottom: 1px solid var(--wb-line); border-radius: 0; background: transparent; }
  body.wb-studio[data-studio-full="true"] .tm-detail {
    max-width: 100%; padding: 20px var(--sf-gutter-right) max(24px, env(safe-area-inset-bottom)) var(--sf-gutter-left);
  }
  body.wb-studio[data-studio-full="true"] .tm-detail h2 { font-size: 23px; }
  body.wb-studio[data-studio-full="true"] .tm-boundary { padding: 16px; }
  body.wb-studio[data-studio-full="true"] #wb-mobile-tools {
    padding: 8px var(--sf-gutter-right) calc(8px + env(safe-area-inset-bottom)) var(--sf-gutter-left);
    box-shadow: none; gap: 8px;
  }
  body.wb-studio[data-studio-full="true"] #wb-mobile-tools button { border-radius: 0; }
}

/* Short landscape screens need their height for the content, not a permanently
   stuck two-row toolbar. All original actions remain in normal document flow. */
@media screen and (max-width: 780px) and (max-height: 500px) {
  body.wb-studio[data-studio-full="true"] #wb-context { position: relative; }
  body.wb-studio[data-studio-full="true"] .tm-expanded .tm-work-area { overflow-y: auto; }
  body.wb-studio[data-studio-full="true"] .tm-expanded .tm-viewport { flex-shrink: 0; min-height: 180px; }
  body.wb-studio[data-studio-full="true"] .wb-dialog,
  body.wb-studio[data-studio-full="true"] #wb-settings-dialog,
  body.wb-studio[data-studio-full="true"] #wb-mobile-panel { max-height: 100dvh; border-radius: 0; }
}