/* Phone layer. Loaded last on every live page.
   Desktop is untouched: every rule sits inside a max-width query.
   Nothing is hidden or removed on a phone — content reflows, stacks or scrolls
   inside its own container. */

/* Phones and tablets (touch screens only, so a narrow desktop window keeps its desktop layout):
   layouts that cannot fit fall back to a stacked, scrolling page. */
@media (max-width: 1024px) and (pointer: coarse) {
  /* login: the decorative background is 200% wide; keep it on screen. */
  body:has(> .auth-container)::before { top: 0; left: 0; width: 100%; height: 100%; }

  /* email: the reading pane is pinned to the screen width. */
  body main.body { width: 100% !important; max-width: 100% !important; }

  /* Form controls never grow past the screen (a dropdown sizes itself to its longest option). */
  body select, body textarea,
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { max-width: 100%; min-width: 0; }

  /* filter: the field grid folds to as many columns as fit. */
  body .filter-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  /* word lab: tiles may shrink so two columns fit. */
  body .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .lab-tile { min-width: 0; }

  /* human (publisher): the header's buttons wrap onto extra rows; the title takes its own row. */
  body .head { flex-wrap: wrap; row-gap: 6px; padding-left: 10px; padding-right: 10px; }
  body .head input { flex: 1 1 100%; width: 100%; }
  /* icon bar across the top, document list opens beneath it, editor below; the page scrolls. */
  body:has(> .toolbar) { flex-direction: column; height: auto; min-height: 100vh; overflow: auto; }
  body > .toolbar { width: 100%; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); padding: 4px 8px; overflow-x: auto; }
  body > .drawer { width: 100%; max-height: 0; border-right: 0; }
  body > .drawer.open { max-height: 45vh; overflow-y: auto; border-bottom: 1px solid var(--border); }
}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }

  /* Media and code never push the page wider than the screen. */
  img, video, canvas, iframe, embed, object { max-width: 100%; }
  img, video { height: auto; }
  pre { max-width: 100%; overflow-x: auto; }

  /* Wide tables scroll inside their own box instead of widening the page. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 16px stops iOS from zooming the page when a field is focused. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px; max-width: 100%; min-width: 0; }

  /* Comfortable tap targets. */
  button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { min-height: 40px; }

  /* Top navigation: every tab keeps its icon AND label; the row swipes sideways. */
  body .app-topnav-row { height: 44px; -webkit-overflow-scrolling: touch; }
  body .app-topnav .app-link { flex: 0 0 auto; overflow: visible; padding: 5px 14px; gap: 6px; }
  body .app-topnav .app-label { display: inline; overflow: visible; font-size: 13px; }
  body .app-topnav .app-icon { font-size: 16px; }
  body .app-topnav .app-brand { display: flex; }

  /* Projects home on a phone: an earlier rule switches the app nav off and leaves only the
     Chats / Projects bar. Bring the nav back, directly beneath that bar, so Mail, Media,
     Schedule, Settings and the rest stay reachable. */
  body.gce-phone .app-topnav { display: flex !important; top: calc(56px + env(safe-area-inset-top, 0px)); }

  /* Shared page column: slimmer side padding so content gets the width. */
  body .wrap { padding-left: 14px; padding-right: 14px; }

  /* ── email ── the header row (title + badge + two buttons) wraps instead of overflowing. */
  body header.bar { flex-wrap: wrap; height: auto; row-gap: 6px; }

  /* ── settings ── two-up form rows stack; fields may shrink below their default width. */
  body .field-row, body #permit-rules .pr-grid2 { grid-template-columns: minmax(0, 1fr); }
  body #topnav-tabs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .hint { white-space: normal; overflow-wrap: anywhere; }
  body div:has(> #fr-status) { flex-wrap: wrap; }
  /* rows built by script (requirements, signals): name on its own line, then type + signal
     side by side, then the required / on / delete controls. !important because the script
     writes flex/width inline on these fields. */
  body .fr-row { flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 !important; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
  body .fr-row .fr-label { flex: 1 1 100% !important; width: 100% !important; }
  body .fr-row .fr-kind, body .fr-row .fr-signal { flex: 1 1 130px !important; width: auto !important; }
  body .fr-row .fr-del { margin-left: auto; min-width: 40px; }

  /* ── business ── */
  body .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body input.search { width: 100%; flex: 1 1 100%; }

  /* ── schedule ── */
  body .add-event-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .add-event-card > :first-child { grid-column: 1 / -1; }
  body .month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }

  /* ── Content built by script (prompt answers, uploaded-file results, generated rows) ──
     These carry inline grid/flex styles, so they need a rule that beats inline: grids fall
     to as many columns as fit (min 200px each), flex rows wrap. Nothing is dropped. */
  body [style*="grid-template-columns"]:not([style*="repeat(7"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  }
  body [style*="display:flex"]:not([style*="nowrap"]):not([style*="column"]),
  body [style*="display: flex"]:not([style*="nowrap"]):not([style*="column"]) { flex-wrap: wrap; }
  body code { overflow-wrap: anywhere; }

  /* ── Headers and toolbars: wrap instead of overflowing ── */
  body .topbar, body .runner-header, body .program-header, body .workflow-header,
  body div:has(> .ch-btn), body #stats-bar { flex-wrap: wrap; row-gap: 8px; height: auto; }
  body .topbar-search, body .topbar-center { width: 100%; flex: 1 1 100%; }
  body .topbar-left, body .topbar-right { min-width: 0; }
  body .mode-tabs { max-width: 100%; overflow-x: auto; }
  body .countdown { flex-wrap: wrap; max-width: 100%; }

  /* ── Multi-column pages: columns stack, in order, nothing hidden ── */
  body .three-pane > *, body .lab-tile, body .field { min-width: 0; }
  body .lab-grid { grid-template-columns: minmax(0, 1fr); }

  /* editor: three-panel workspace becomes one scrolling column; the slide-over fits the screen */
  body:has(.panels) { height: auto; min-height: 100vh; overflow: auto; }
  body:has(.panels) .main, body .panels { flex-direction: column; overflow: visible; }
  body:has(.panels) .sidebar { width: 100%; min-width: 0; border-right: 0; border-bottom: 0.5px solid var(--border); }
  body .panel1, body .panel3 { width: 100%; min-width: 0; border-left: 0; border-right: 0; }
  body .doc-slideover { width: 100vw; right: -100vw; }

  /* ── Project desk (filing_review): one pane at a time ──
     The document stays in view; the Documents and Conversations rails fold to edge tabs and
     open full-width when tapped (gce-phone-desk.js keeps only one open). */
  html:has(> body > nav.toc), body:has(> nav.toc):not(.dms-rail-no-grid) { height: 100dvh; }
  body:has(> nav.toc):not(.dms-rail-no-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  body:has(> nav.toc):not(.dms-rail-no-grid) main { grid-column: 1 !important; min-width: 0; }
  /* An open pane stops short of the other pane's 28px edge tab, so both tabs stay visible and switch panes. */
  body:has(> nav.toc):not(.dms-rail-no-grid):not(.left-nav-collapsed) nav.toc { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; }
  body:has(> nav.toc).conv-rail-docked:not(.conv-rail-collapsed) #conv-drawer { left: 28px !important; width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; }
  /* A folded Conversations rail is just its edge tab; nothing else may show through the 28px strip. */
  body:has(> nav.toc).conv-rail-collapsed #conv-drawer { overflow: hidden !important; }
  body:has(> nav.toc).conv-rail-collapsed #conv-drawer > :not(.conv-rail-tab) { display: none !important; }
  body:has(> nav.toc) .gce-rail-grip { display: none !important; }   /* drag-to-resize handles mean nothing on a full-width rail */
  body #sections.stack-render, body #sections.stack-render-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body .stack-grid { grid-template-columns: minmax(0, 1fr); }

  /* Project header: it scrolls away with the page (sticky it would cover the documents), and its
     buttons sit in a compact grid instead of a tall stack of loose rows. */
  body #project-topbar { position: static !important; padding: 10px 12px; }
  body #project-topbar > button, body #project-topbar .tb-row > button, body #project-topbar .tb-row > details > summary {
    font-size: 13px; padding: 6px 8px; min-height: 36px; white-space: normal; line-height: 1.2; }
  body #project-topbar > button { width: calc(50% - 12px); margin: 3px 4px; }
  body #project-topbar .proj-toprow { display: block !important; }
  body #project-topbar .tb-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  body #project-topbar .tb-row > button, body #project-topbar .tb-row > details > summary { width: 100%; min-width: 0; }
  body #project-topbar details#project-lock-bar { margin-top: 6px; width: 100%; }

  /* Floating tools (Point & Report, Trace, Record clicks, Does it work?, Activity, What's new):
     one "Tools" button opens them, so they stop covering the document and the chat bar. */
  body:has(> nav.toc) #gce-tools-launcher { display: inline-flex; align-items: center; gap: 6px; position: fixed; left: 14px; z-index: 100001;
    bottom: calc(var(--gce-cb-h, 100px) + 10px); padding: 8px 14px; border-radius: 999px; border: 1px solid #d1d5db;
    background: #fff; color: #111827; font: 600 13px system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  body:has(> nav.toc):has(#gce-tools-launcher):not(.gce-tools-open) :is(#gce-ft-btn, #gce-fs-toggle, #gce-pr-rec, #gce-pr-toggle, #gce-pt-toggle, #gce-ct-toggle, #gce-process-panel-root, #gce-close-all) { display: none !important; }
  body.gce-tools-open :is(#gce-ft-btn, #gce-fs-toggle, #gce-pr-rec, #gce-pr-toggle, #gce-pt-toggle, #gce-ct-toggle, #gce-process-panel-root, #gce-close-all) {
    transform: translateY(calc(-1 * (var(--gce-cb-h, 0px) + 52px))); }

  /* Opened Tools: the click-trace pill shares a spot with the Activity pill, so it goes one row up. */
  body.gce-tools-open #gce-ct-toggle { transform: translateY(calc(-1 * (var(--gce-cb-h, 0px) + 100px))); }

  /* New-feature popups: one at a time on a small screen; the next appears when "Got it" retires
     the current one. Every feature stays listed in the spotlight panel. */
  body .gce-fs-toast ~ .gce-fs-toast, body .gce-fs-ring ~ .gce-fs-ring { display: none !important; }
  /* The popup docks as a banner under the top nav (its script pins it next to its target, which on
     a phone can land on top of the chat or off-screen). "Got it ✓" / "Try it" work as before. */
  body .gce-fs-toast { top: calc(env(safe-area-inset-top, 0px) + 112px) !important; bottom: auto !important;
    left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; transform: none !important; }
  body .gce-fs-toast .fs-arrow { display: none; }

  /* Chat answers: long links and unbroken words wrap inside the panel instead of running off it. */
  body .app-chatbar .chatbar-conversation { overflow-wrap: anywhere; }
  body .app-chatbar .chatbar-conversation a { overflow-wrap: anywhere; word-break: break-all; }

  /* Notices ("Imported: 4821 sentences from <long file name>") wrap and stay on the screen. */
  body #toast { max-width: calc(100vw - 24px); white-space: normal; overflow-wrap: anywhere; }

  /* standards: the number badge stays beside the text but the text may shrink and wrap. */
  body .standard-card { flex-wrap: wrap; }
  body .standard-body { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

  /* renewal audit: the step chain stacks top to bottom, same order */
  body .chain-row { flex-direction: column; gap: 8px; }
  body .chain-step { flex: 0 0 auto; }

  /* workflow: the session list sits above the content instead of beside it */
  body:has(.session-sidebar) { flex-direction: column; }
  body .session-sidebar { position: static; width: 100%; min-width: 0; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border, #E5E5E5); }
  body .workflow-container { margin-left: auto; }
}