/* The desktop composition is unchanged. Phones show one workspace pane at a time. */
.mobile-pane-tabs { display: none; }
@media (max-width: 760px) {
  html { height: 100%; }
  body:has(.app-body), body[data-page="audit"]:has(.audit-reading) {
    display: flex !important; flex-direction: column; height: 100dvh;
    min-height: 0; overflow: hidden !important; font-size: 14px;
  }
  .app-rail, body.direction-b .app-rail {
    position: static !important; display: block !important; width: 100%; height: auto !important;
    flex: none; min-height: 0; padding: 6px 10px !important; border-radius: 0; background: #17150f;
  }
  .app-rail .brand, .app-rail .rail-project, .app-rail .rail-foot,
  .app-rail .direction-b-nav-group { display: none !important; }
  .app-rail nav, body.direction-b .app-rail nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px; margin: 0 !important; overflow-x: auto; scrollbar-width: none; }
  .app-rail nav a { flex: none; min-height: 40px; padding: 10px 12px !important; font-size: 13px !important; white-space: nowrap; border-radius: 6px; }
  .app-body, body.direction-b .app-body, body[data-page="audit"]:has(.audit-reading) .app-body {
    display: flex !important; flex-direction: column; flex: 1; width: 100%; height: auto !important;
    min-width: 0; min-height: 0; margin: 0 !important; padding: 0 !important;
  }
  .topbar, body.direction-b:not([data-page="audit"]) .topbar,
  body[data-page="audit"]:has(.audit-reading) .topbar {
    height: auto !important; min-height: 48px !important; flex: none; padding: 7px 12px !important;
    align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px;
  }
  .topbar .location, #b-top-actions > .button { display: none !important; }
  #b-top-actions { gap: 5px !important; }
  #b-top-actions select { min-height: 34px !important; max-width: 132px !important; font-size: 12px !important; }
  .topbar .button { min-height: 34px; padding: 7px 10px; font-size: 12px; }
  .app-footer { display: none !important; }
  #main, body.direction-b #main, body[data-page="audit"]:has(.audit-reading) #main {
    flex: 1; min-height: 0; min-width: 0; height: auto !important; padding: 8px 10px 10px !important;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  }
  input, select, textarea { font-size: 16px !important; max-width: 100%; }
  button, summary { touch-action: manipulation; }
  .mobile-pane-tabs {
    display: flex; flex: none; gap: 4px; min-height: 43px; margin: 0 0 8px; padding: 4px;
    border-radius: 9px; background: #dedbd4;
  }
  .mobile-pane-tabs button {
    flex: 1; min-width: 0; min-height: 35px; padding: 7px 4px; border: 0; border-radius: 6px;
    background: transparent; color: #615b50; font: inherit; font-size: 13px; font-weight: 550;
  }
  .mobile-pane-tabs button[aria-selected="true"] { background: #fff; color: #181710; box-shadow: 0 1px 3px #221b1212; }
  [data-mobile-hidden="true"] { display: none !important; }
  [data-mobile-pane] { min-width: 0 !important; min-height: 0 !important; overscroll-behavior: contain; scrollbar-width: thin; }

  /* Materials: list -> preview; records stay accessible without passing the other panes. */
  body.assets-app #main { display: flex !important; flex-direction: column; overflow: hidden !important; }
  .asset-toolbar { flex: none; margin: 0 0 7px !important; min-height: 0; gap: 6px; }
  .asset-tabs { display: none !important; }
  .asset-library-tools { gap: 6px !important; flex-wrap: wrap; font-size: 11px; }
  .asset-library-tools a { padding: 4px !important; font-size: 11px; }
  #action-status:empty { display: none; }
  #panel-assets { display: flex !important; flex: 1; flex-direction: column; min-height: 0; }
  .asset-workspace { display: flex !important; flex-direction: column; flex: 1; height: auto !important; min-height: 0; gap: 0; }
  .asset-list-panel, .asset-stage, .asset-review {
    flex: 1; width: 100%; height: 100% !important; max-height: none !important; margin: 0 !important;
    border-radius: 10px !important;
  }
  .asset-list-panel { display: flex; flex-direction: column; overflow: hidden !important; padding: 12px !important; }
  body.direction-b.assets-app .asset-panel-heading { flex: none; min-height: 38px; margin: 0 0 6px; padding: 3px 5px 5px; }
  .asset-filters { flex: none; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px !important; }
  .asset-filters label:first-child { grid-column: 1/-1; }
  .asset-filters .field > span { font-size: 11px; margin-bottom: 3px; }
  .asset-filters input, .asset-filters select { min-height: 36px; padding: 6px 8px; }
  #asset-result-count { flex: none; margin: 9px 0 !important; font-size: 12px; }
  #asset-results { flex: 1; max-height: none !important; min-height: 0 !important; overflow-y: auto; }
  .asset-stage, .asset-review { overflow-y: auto !important; padding: 14px !important; }
  .asset-stage .media-frame { min-height: 0 !important; height: auto !important; }
  .asset-stage video, .asset-stage img { display: block; max-width: 100%; max-height: 45dvh !important; object-fit: contain; }
  .asset-stage h2, .asset-review h2 { font-size: 18px; }

  /* Audit: one full reading height, with question and judgment always one tap away. */
  body[data-page="audit"]:has(.audit-reading) #main { display: flex !important; flex-direction: column; overflow: hidden !important; }
  body[data-page="audit"]:has(.audit-reading) .b-batch-hero { flex: none; min-height: 0 !important; margin: 0 0 8px !important; padding: 9px 12px !important; gap: 8px; }
  .b-batch-copy p { font-size: 10px !important; margin: 0 0 3px; }
  .b-batch-copy p:last-child { display: none; }
  .b-batch-copy h2 { font-size: 14px !important; line-height: 1.4; }
  .audit-reading { display: flex !important; flex: 1; flex-direction: column; min-height: 0 !important; overflow: hidden; }
  .audit-reading .b-audit-grid { display: flex !important; flex: 1; flex-direction: column; height: auto !important; min-height: 0 !important; gap: 0 !important; overflow: hidden; }
  body[data-page="audit"] .audit-reading .b-question-column,
  .audit-reading .b-answer-card, .audit-reading .b-judgment-card {
    flex: 1 !important; width: 100%; height: 100% !important; max-height: none !important;
    position: static !important; border-radius: 10px !important;
  }
  .audit-reading .b-question-column { display: flex; flex-direction: column; overflow: hidden; }
  .audit-reading .b-question-tools { flex: none; padding: 12px !important; gap: 7px; }
  .audit-reading .b-question-tools input { min-height: 38px !important; }
  .audit-reading #questionResults { flex: 1; min-height: 0; max-height: none !important; overflow-y: auto; }
  .audit-reading .b-answer-card { overflow: hidden; }
  .audit-reading .b-answer-whole-scroll { height: 100% !important; min-height: 0; overflow-y: auto !important; }
  .audit-reading .b-answer-scroll { height: auto !important; max-height: none !important; overflow: visible !important; padding: 12px 16px 22px !important; }
  .audit-reading .b-answer-heading { padding: 14px 16px 0 !important; }
  .audit-reading .b-answer-heading h1 { font-size: 21px !important; line-height: 1.4; }
  .audit-reading .b-panel-heading h2 { font-size: 18px !important; }
  .audit-reading .b-answer-prose { font-size: 15px !important; line-height: 1.8; }
  .audit-reading .b-guidance { font-size: 12px !important; }
  .audit-reading .b-judgment-card { overflow-y: auto !important; padding: 14px 16px 22px !important; }
  .audit-reading .b-reading-actions { flex-wrap: wrap; }
  #b-findings-dialog, #b-materials-dialog { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; }

  /* Knowledge uses its existing list/detail switch; the price table retains every row. */
  body[data-page="knowledge"] #main { display: flex !important; flex-direction: column; overflow: hidden !important; }
  .knowledge-view { display: flex; flex: 1; min-height: 0; flex-direction: column; }
  .workspace-grid.library-grid { display: flex !important; flex: 1; flex-direction: column; min-height: 0; gap: 8px !important; }
  .library-sidebar { flex: none; width: 100%; padding: 0 !important; }
  .library-sidebar-head, .library-sidebar-note { display: none !important; }
  .library-sidebar .library-nav { display: flex; overflow-x: auto; flex-wrap: nowrap; margin: 0 !important; gap: 5px; }
  .library-nav button { width: auto; flex: none; white-space: nowrap; padding: 8px 11px !important; }
  .library-grid:not(.library-grid-price) .detail-column { display: none; }
  .library-grid.library-detail-open .result-column { display: none; }
  .library-grid.library-detail-open .detail-column { display: block; }
  .result-column, .detail-column, .library-price-main { flex: 1; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; margin: 0 !important; padding: 14px !important; }
  .library-mobile-back { display: block !important; min-height: 36px; }
  .library-result-list { max-height: none !important; min-height: 0 !important; }
  .library-price-main .table-wrap { max-height: none; overflow-x: auto; }

  /* Content-production iframe owns a single bounded viewport. */
  body.direction-b.content-production-app .app-body { min-height: 0 !important; }
  body.direction-b.content-production-app #main { display: flex !important; flex-direction: column; overflow: hidden !important; }
  body.direction-b.content-production-app .production-panel { flex: 1; min-height: 0 !important; height: auto !important; margin: 0 !important; }
  body.direction-b.content-production-app .production-frame { display: block; height: 100% !important; min-height: 0 !important; width: 100%; }

  body[data-page="workflow"] .geo-tabbar, body[data-page="workflow"] .exec-tabbar { flex-wrap: nowrap; overflow-x: auto; }
  body[data-page="workflow"] .geo-tabbar button, body[data-page="workflow"] .exec-tabbar button { flex: none; white-space: nowrap; }
  .exec-plan-table-wrap, .table-wrap { max-width: 100%; overflow-x: auto; }
  .exec-quantified-table { min-width: 610px; }
}