/* ==========================================================================
   ChefQuote — mobile layer
   --------------------------------------------------------------------------
   Every rule lives inside a @media (max-width: ...) block. Above 900px this
   file is inert and cannot affect the desktop layout.

   Install (after the page's own style block):
       link rel="stylesheet" href="mobile.css"      -> in head
       script src="mobile.js" defer                 -> before /body

   BUILT TO DEGRADE SAFELY
   The navigation works with or without JavaScript. Without JS it renders as
   a plain stacked list of links; with JS it collapses into a drawer. Nothing
   is hidden unless the script is confirmed running (html.cq-js).
   ========================================================================== */


/* ==========================================================================
   1. TABLET AND BELOW  (<= 900px)
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (hover: none) and (max-width: 1180px) {

  /* --- 1a. Text inflation ------------------------------------------------
     iOS Safari and some Android browsers enlarge text on rotation unless
     told not to. Without this, landscape breaks the layout.            */
  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }


  /* --- 1b. Overflow safety -----------------------------------------------
     The site sets word-break/overflow-wrap to normal !important globally.
     On a phone a long word or URL then has nowhere to go and pushes the
     page sideways. Older keyword first as a fallback, modern one second
     for browsers that understand it.                                   */
  /* overflow-x on html only. Putting it on html AND body makes body a
     scroll container on iOS, which breaks sticky positioning and stops
     scroll-snap and scrollIntoView working reliably. */
  html { max-width: 100%; overflow-x: hidden; }
  body { max-width: 100%; }

  body, p, li, td, th, dd, dt,
  h1, h2, h3, h4, h5, h6,
  a[href], code, pre,
  .thesis-card, .moat-card, .faq-card, .lane-card,
  .product-map-card, .conversion-card, .commercial-card, .demo-path-card,
  .market-pill, .capability-chip-row, .visual-caption, .source-list {
    word-break: break-word;        /* fallback: older Android / Safari */
    overflow-wrap: break-word;     /* widely supported */
    overflow-wrap: anywhere;       /* modern; ignored where unknown */
  }

  pre, table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img, svg, video, iframe { max-width: 100%; height: auto; }


  /* --- 1c. Touch behaviour ------------------------------------------------ */
  a, button, [role="button"], .button, summary {
    -webkit-tap-highlight-color: rgba(20, 20, 20, 0.12);
    touch-action: manipulation;    /* removes the 300ms delay on older devices */
  }


  /* --- 1d. Stop iOS zooming in when a field is focused --------------------
     Any input under 16px makes iOS Safari zoom the page on focus, and it
     does not zoom back. Matters most on crew.html and the workspace.  */
  input, select, textarea {
    font-size: max(16px, 1rem);
    max-width: 100%;
  }


  /* --- 1e. Collapse every multi-column grid to a single column ----------- */
  .hero,
  .section-head,
  .market-strip,
  .market-thesis,
  .market-thesis-grid,
  .commercial-grid,
  .conversion-grid,
  .conversion-card-grid,
  .demo-path-grid,
  .faq-grid,
  .lane-grid,
  .method-pillar-grid,
  .metric-grid,
  .moat-grid,
  .product-map-grid,
  .proof-grid,
  .protected-method-snapshot,
  .visual-showcase,
  .hero-human-proof {
    grid-template-columns: 1fr !important;
  }

  .thesis-card, .moat-card, .faq-card, .lane-card, .product-map-card,
  .conversion-card, .commercial-card, .demo-path-card, .method-pillar {
    min-width: 0;
  }


  /* --- 1f. Header: no-JS baseline ----------------------------------------
     The nav becomes an even two-up grid: compact, evenly spaced, and with
     labels centred so no button carries dead space on one side. Usable on
     its own, so a failed or blocked script never strands anyone.       */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 12px;
  }

  header .nav-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
    width: 100%;
  }

  header .nav-actions .button {
    width: 100%;
    min-width: 0;
    justify-content: center;   /* centred label: no dead space either side */
    text-align: center;
    min-height: 46px;
    padding: 11px 10px;
    font-size: 0.86rem;
  }

  /* Any odd trailing item spans the full row so the grid never ends ragged */
  header .nav-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* The account slot is empty until signed in; collapse it so it can
     never leave a hole in the grid */
  header .nav-actions #accountMount:empty { display: none; }

  /* The toggle only appears once the script has built it */
  .cq-nav-toggle { display: none; }


  /* --- 1g. Enhanced: drawer, only when JS is confirmed --------------------
     html.cq-js is set by mobile.js. Until then none of this applies and
     the stacked baseline above stays visible.                          */
  html.cq-js header .nav-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(20, 20, 20, 0.12);
  }

  html.cq-js header .nav-actions[hidden] { display: none; }

  html.cq-js .cq-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1;
    color: #1d1d1d;
    background: #fff;
    border: 1px solid rgba(20, 20, 20, 0.2);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(20, 20, 20, 0.05);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .cq-nav-toggle:active { transform: translateY(1px); }

  .cq-nav-toggle .cq-bars {
    position: relative;
    display: block;
    width: 17px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  .cq-nav-toggle .cq-bars::before,
  .cq-nav-toggle .cq-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 17px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cq-nav-toggle .cq-bars::before { top: -6px; }
  .cq-nav-toggle .cq-bars::after  { top: 6px; }

  .cq-nav-toggle[aria-expanded="true"] .cq-bars { background: transparent; }
  .cq-nav-toggle[aria-expanded="true"] .cq-bars::before { transform: translateY(6px) rotate(45deg); }
  .cq-nav-toggle[aria-expanded="true"] .cq-bars::after  { transform: translateY(-6px) rotate(-45deg); }


  /* --- 1h. Touch targets -------------------------------------------------- */
  .button, .workflow-link, .section-go, .workflow-go { min-height: 44px; }
}


/* ==========================================================================
   2. PHONE  (<= 620px)
   ========================================================================== */
@media (max-width: 620px), (pointer: coarse) and (hover: none) and (max-width: 820px) {

  /* --- 2a. Safe areas ----------------------------------------------------
     Notched and rounded screens (iPhone X onward, many Androids). These
     resolve to 0 where there are no insets, so they are always safe. */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }


  /* --- 2b. Breathing room ------------------------------------------------ */
  .wrap { width: min(100% - 28px, 1180px); }
  .section { padding-top: 34px; padding-bottom: 34px; }

  .thesis-card, .moat-card, .faq-card, .lane-card, .product-map-card,
  .conversion-card, .commercial-card, .demo-path-card, .method-pillar,
  .proof-card, .visual-frame {
    padding: 16px;
  }


  /* --- 2c. Type scale ---------------------------------------------------- */
  h1 { font-size: clamp(1.65rem, 7.4vw, 2.25rem); line-height: 1.12; letter-spacing: -0.02em; }
  h2 { font-size: clamp(1.32rem, 5.9vw, 1.7rem);  line-height: 1.18; }
  h3 { font-size: clamp(1.06rem, 4.6vw, 1.25rem); line-height: 1.25; }

  .eyebrow { font-size: 0.63rem; letter-spacing: 0.07em; }
  body, p, li { font-size: 0.95rem; line-height: 1.55; }


  /* --- 2d. Hero ---------------------------------------------------------- */
  .hero { gap: 18px; }
  .hero-copy { padding: 16px; }

  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .hero-actions .button { width: 100%; justify-content: center; }

  .hero-metric { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }


  /* --- 2e. Sections ------------------------------------------------------- */
  .section-head { gap: 10px; }
  .section-foot { margin-top: 18px; }

  .thesis-pills, .visual-pills, .capability-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .market-pill { font-size: 0.72rem; }

  .workflow-link { grid-template-columns: 1fr !important; gap: 6px; padding: 14px; }
  .workflow-go { justify-self: start; }

  .cta-panel {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 18px;
    text-align: left;
  }

  .cta-panel .button { width: 100%; justify-content: center; }


  /* --- 2f. Tables become stacked cards ------------------------------------ */
  table.cq-stack,
  table.cq-stack thead,
  table.cq-stack tbody,
  table.cq-stack tr,
  table.cq-stack th,
  table.cq-stack td {
    display: block;
    width: 100%;
  }

  table.cq-stack { overflow-x: visible; }
  table.cq-stack thead { display: none; }

  table.cq-stack tr {
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 10px;
    background: #fff;
    padding: 6px 12px;
    margin-bottom: 10px;
  }

  table.cq-stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(20, 20, 20, 0.08);
    text-align: left;
  }

  table.cq-stack td:last-child { border-bottom: 0; }

  table.cq-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #686868;
  }

  footer .wrap { text-align: left; }
  .source-list { font-size: 0.78rem; }
}


/* ==========================================================================
   3. SMALL PHONE  (<= 380px)   iPhone SE, compact Androids
   ========================================================================== */
@media (max-width: 380px) {
  .wrap { width: min(100% - 22px, 1180px); }
  .hero-metric { grid-template-columns: 1fr; }
  .brand > span > span { display: none; }              /* keep name, drop tagline */
  .cq-nav-toggle span:not(.cq-bars) { display: none; } /* icon-only menu button */
}


/* ==========================================================================
   4. PHONE IN LANDSCAPE
   Short viewports: trim vertical padding so content still fits.
   ========================================================================== */
@media (max-width: 900px) and (max-height: 460px) and (orientation: landscape) {
  .section { padding-top: 22px; padding-bottom: 22px; }
  .hero { gap: 12px; }
  html.cq-js header .nav-actions {
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   5. WIDTH FIX — .hero-board
   .hero-board is a <figure> and the site has no rule for it, so browsers
   apply their default margin: 1em 40px. That 80px steals the width on a
   phone. Mobile only; desktop keeps its current spacing.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (hover: none) and (max-width: 1180px) {
  .hero-board,
  figure.hero-board {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Same default-margin trap on any other figure */
  figure { margin-left: 0; margin-right: 0; }
}


/* ==========================================================================
   6. SECTION NAVIGATION  (<= 900px)
   Gentle scroll-snap plus a jump control, so sections can be moved
   through quickly without a long scroll.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (hover: none) and (max-width: 1180px) {

  /* snap goes on the scrolling element (html), not body — body is not the
     scroller, so snap declared there is silently ignored.
     proximity, not mandatory: sections taller than the screen still
     scroll normally instead of trapping the reader */
  /* No browser-driven scrolling. scroll-behavior:smooth and scroll-snap
     both keep animating after our code sets a target, which is what made a
     single press travel 10,804px. Every jump is animated by mobile.js so
     nothing competes for control of the scroll position. */
  html.cq-js {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  html.cq-js section {
    scroll-margin-top: 12px;
  }

  /* --- the jump control ------------------------------------------------- */
  .cq-secnav {
    position: fixed;
    right: 10px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 60;
    display: none;              /* shown once JS builds it */
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(20, 20, 20, 0.16);
    box-shadow: 0 8px 24px rgba(20, 20, 20, 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  html.cq-js .cq-secnav { display: flex; }

  .cq-secnav button {
    font: inherit;
    font-weight: 900;
    line-height: 1;
    color: #1d1d1d;
    background: transparent;
    border: 0;
    border-radius: 9px;
    min-width: 42px;
    min-height: 38px;
    padding: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
  }

  .cq-secnav button:active { background: rgba(20, 20, 20, 0.08); }
  .cq-secnav button[disabled] { opacity: 0.3; }

  .cq-secnav .cq-count {
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #686868;
    border-top: 1px solid rgba(20, 20, 20, 0.1);
    border-bottom: 1px solid rgba(20, 20, 20, 0.1);
    border-radius: 0;
    min-height: 32px;
  }

  .cq-secnav svg { width: 15px; height: 15px; display: block; margin: 0 auto; }

  /* --- the full section list (every section, one tap away) -------------- */
  .cq-seclist {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    background: rgba(20, 20, 20, 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .cq-seclist[data-open="true"] { display: block; }

  .cq-seclist-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 76vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f3f3f0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 34px rgba(20, 20, 20, 0.22);
  }

  .cq-seclist-title {
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #686868;
    margin: 2px 4px 10px;
  }

  .cq-seclist a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 10px;
    background: #fff;
    color: #141414;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
  }

  .cq-seclist a[aria-current="true"] {
    border-color: rgba(20, 20, 20, 0.4);
    background: #ededeb;
  }

  .cq-seclist a .cq-idx {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 900;
    color: #686868;
    min-width: 18px;
  }

  .cq-seclist-close {
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    color: #fff;
    background: #1d1d1d;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }
}


/* ==========================================================================
   8. THE REST OF THE SITE  (<= 900px)
   Layout rules for method, morale, crew, and business-health. Same
   principle throughout: even spacing, never a ragged row, no dead space.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (hover: none) and (max-width: 1180px) {

  /* --- 8a. Full-width stacks -------------------------------------------
     Content and control groups that cannot stay side by side.        */
  .layout,
  .result-row,
  .trust-strip,
  .calc-steps li,
  .combined-grid,
  .demand-resource-grid,
  .dimension-row,
  .driver-list li,
  .fix-grid,
  .load-grid,
  .risk-panel,
  .lane-grid,
  .form-grid,
  #dimPanel .form-grid,
  .crew-decision-grid,
  .crew-rationale-grid,
  .pressure-basis,
  .pressure-bridge-grid,
  .pressure-bridge-row,
  .pressure-controls,
  .pressure-summary-grid,
  .pressure-system-head,
  .pressure-card summary,
  .health-hero,
  .health-explainer-grid,
  .health-bottom-grid,
  .health-segment-grid,
  .health-dashboard-head,
  .health-command-read,
  .health-segment-top,
  .health-action-list,
  .vm-wrap {
    grid-template-columns: 1fr !important;
  }

  /* --- 8b. Even two-up --------------------------------------------------
     Numbers read well side by side and a 2-up grid leaves no gaps.  */
  .health-kpi-grid,
  .health-mini-grid,
  .crew-impact-grid,
  .metric-row,
  .vm-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* An odd final tile spans the row so the grid never ends ragged */
  .health-kpi-grid > :last-child:nth-child(odd),
  .health-mini-grid > :last-child:nth-child(odd),
  .crew-impact-grid > :last-child:nth-child(odd),
  .vm-counts > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* --- 8c. Controls that must stay horizontal ---------------------------
     Segmented switches stay in a row and scroll if needed, rather than
     collapsing into a confusing stack.                              */
  .view-bar,
  .view-switch {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }

  .view-bar::-webkit-scrollbar,
  .view-switch::-webkit-scrollbar { display: none; }

  .view-bar > *,
  .view-switch > * {
    flex: 1 0 auto;
    min-width: 0;
    white-space: nowrap;
  }

  /* --- 8d. Charts -------------------------------------------------------
     A plot cannot be usefully stacked; let it scroll inside its frame. */
  .vm-plot {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- 8e. Field groups -------------------------------------------------- */
  .form-grid label,
  .form-grid .field { min-width: 0; }

  .metric-row > *,
  .health-kpi-grid > *,
  .health-mini-grid > * { min-width: 0; }
}


/* ==========================================================================
   9. PHONE REFINEMENTS FOR THE REST OF THE SITE  (<= 620px)
   ========================================================================== */
@media (max-width: 620px), (pointer: coarse) and (hover: none) and (max-width: 820px) {

  /* Dense number tiles go single-column on a narrow phone so values are
     never clipped mid-figure. */
  .crew-impact-grid,
  .vm-counts {
    grid-template-columns: 1fr !important;
  }

  /* Consistent card padding everywhere, matching the homepage */
  .pressure-card,
  .risk-panel,
  .health-segment,
  .health-kpi,
  .crew-card,
  .fix-grid > *,
  .load-grid > * {
    padding: 16px;
  }

  /* Long definition-style rows read better stacked than squeezed */
  .result-row,
  .metric-row {
    gap: 6px;
  }
}



/* ==========================================================================
   10. ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cq-nav-toggle .cq-bars::before,
  .cq-nav-toggle .cq-bars::after { transition: none; }

  html.cq-js { scroll-snap-type: none; scroll-behavior: auto; }
}


/* ==========================================================================
   11. CONTROL CLUSTERS  (<= 900px)
   The workspace switcher, its view modes, and the crew view bar are all
   inline-flex with no wrap, so on a narrow screen their buttons overflow
   the container and land on top of each other. Rebuilt as even grids:
   nothing overlaps, nothing is clipped, spacing is uniform.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (hover: none) and (max-width: 1180px) {

  /* --- outer shell: stack, full width ---------------------------------- */
  .workspace-switcher {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .workspace-switcher-copy { min-width: 0; }

  .workspace-control-cluster {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    justify-content: stretch;
  }

  /* --- Off-Premise / On-Premise: even pair ------------------------------ */
  .workspace-switcher-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  /* --- Morale Guard / Business Health: even pair ------------------------ */
  .morale-guard-nav-button,
  .business-health-nav-button {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 46px;
  }

  /* --- view modes: Dashboard / Line View / Full View -------------------- */
  .workspace-view-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .mode-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    padding: 5px;
  }

  /* every control button: full width of its cell, centred, never clipped */
  .workspace-switcher-actions button,
  .mode-switch button,
  .view-switch button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    min-height: 44px;
    padding: 10px 6px;
    font-size: 0.8rem;
    white-space: normal;        /* let two-word labels wrap instead of clip */
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  /* --- crew view bar ---------------------------------------------------- */
  .view-bar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .view-switch {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    width: 100%;
    padding: 4px;
    border-radius: 12px;
    overflow: visible;
  }

  /* chips must be allowed to wrap or their text is cut off */
  .chip {
    white-space: normal !important;
    overflow-wrap: break-word;
    max-width: 100%;
  }
}


/* ==========================================================================
   12. JUMP LANDING POSITION  (<= 900px)
   Sections must land clear of any sticky header so the whole panel is
   visible after a jump, not tucked underneath it.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (hover: none) and (max-width: 1180px) {
  html.cq-js {
    scroll-padding-top: 84px;
  }

  html.cq-js section,
  html.cq-js article,
  html.cq-js main h2,
  html.cq-js main h3 {
    scroll-margin-top: 84px;
    scroll-snap-align: none;
  }
}


/* ==========================================================================
   13. PHONE: tighten control spacing  (<= 620px)
   ========================================================================== */
@media (max-width: 620px), (pointer: coarse) and (hover: none) and (max-width: 820px) {
  .workspace-switcher { padding: 10px; gap: 8px; }
  .workspace-switcher-actions button,
  .mode-switch button,
  .view-switch button { font-size: 0.76rem; padding: 9px 4px; }

  /* dense field rows: tighter gutters so values are not pushed off screen */
  .form-grid { gap: 10px; }
  .metric-row, .result-row { gap: 5px; }
}


/* ==========================================================================
   14. AUTO-COLLAPSED GRIDS  (<= 900px)
   mobile.js measures each grid and tags the ones that cannot survive a
   narrow screen. This is what catches every panel inside the workspace
   without naming 116 selectors, and it keeps working as panels are added.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) and (hover: none) and (max-width: 1180px) {
  .cq-col1 {
    grid-template-columns: 1fr !important;
  }

  .cq-col1 > * { min-width: 0; }
}


/* ==========================================================================
   15. VERSION SWITCH
   Always available, at every width, so a visitor is never trapped in a
   version the detection chose for them. Deliberately quiet: it sits in
   the footer, not in the way of the page.
   ========================================================================== */
@media (max-width: 900px) {

.cq-version-switch {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.cq-version-btn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  color: #505050;
  background: transparent;
  border: 1px solid rgba(20, 20, 20, 0.22);
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.cq-version-btn:hover { color: #141414; border-color: rgba(20, 20, 20, 0.4); }
.cq-version-btn:active { transform: translateY(1px); }

/* When the desktop version is chosen on a phone, the mobile-only controls
   would be out of place — the visitor asked for the desktop experience. */
html[data-cq-version="desktop"] .cq-secnav,
html[data-cq-version="desktop"] .cq-seclist,
html[data-cq-version="desktop"] .cq-nav-toggle {
  display: none !important;
}

html[data-cq-version="desktop"] header .nav-actions[hidden] {
  display: flex !important;
}
}

/* ==========================================================================
   15. FIELD OVERFLOW  (<= 900px)
   Inputs are width:100% but sit in grid/flex cells whose default
   min-width:auto refuses to shrink below the content, so the field
   pushes out past the panel edge. min-width:0 lets the cell shrink;
   the field then wraps downward instead of escaping sideways.
   ========================================================================== */
@media (max-width: 900px) {

  .form-grid > *,
  .field,
  .field > *,
  label,
  .input-row > *,
  .snapshot-grid > *,
  fieldset > * {
    min-width: 0;
  }

  input,
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Text areas grow downward with longer entries and never sideways.
     Nothing above or below shifts horizontally as they do. */
  textarea {
    resize: vertical;
    min-height: 88px;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
  }

  /* Single-line fields keep their text inside the box */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  input[type="number"] {
    text-overflow: ellipsis;
  }

  /* Panels that host fields must be able to shrink too */
  .panel, .card, .section-card, .snapshot, .quote-panel {
    min-width: 0;
    max-width: 100%;
  }
}


/* ==========================================================================
   16. PHILOSOPHY: match the two-questions card to its neighbours
   ========================================================================== */
@media (max-width: 900px) {
  .tldr-card,
  .section-card,
  .hero-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
}


/* ==========================================================================
   17. WIDE TABLE CELLS  (<= 620px)
   Formulas and other long values get the full column width, running
   horizontally under their label instead of being squeezed into the
   right half of the row. mobile.js tags these cells.
   ========================================================================== */
@media (max-width: 620px) {
  table.cq-stack td.cq-wide {
    display: block;
    padding: 9px 0 11px;
  }

  table.cq-stack td.cq-wide::before {
    display: block;
    margin-bottom: 6px;
  }

  table.cq-stack td.cq-wide code {
    display: inline-block;
    max-width: 100%;
    padding: 3px 7px;
    font-size: 0.82rem;
    line-height: 1.5;
    background: #f2f2ef;
    border-radius: 5px;
    overflow-wrap: break-word;
  }

  /* successive formula fragments read as a sequence, not a wall */
  table.cq-stack td.cq-wide code + code { margin-top: 4px; }
}


/* ==========================================================================
   18. WORKSPACE: single view switcher  (<= 900px)
   The site shows one premise switcher at a time. Restated here (after the
   grid rules) so nothing in this file can resurrect the hidden one.
   ========================================================================== */
@media (max-width: 900px) {
  body:not(.restaurant-workspace-active) .restaurant-view-switch,
  body.restaurant-workspace-active .chef-view-switch {
    display: none !important;
  }
}


/* ==========================================================================
   19. BUILD A QUOTE: field overflow, real cause  (<= 900px)
   .job-snapshot-top declares minmax(280px, .75fr) for its second column —
   a hard 280px floor a phone cannot honour, so the grid grew past the
   panel border. .job-snapshot-fields is a 4-track grid. Both are named
   explicitly rather than relying on measurement, because these panels are
   hidden at load and a measuring pass cannot see them.
   ========================================================================== */
@media (max-width: 900px) {
  .job-snapshot-top,
  .job-snapshot-fields,
  .guide-fields,
  .profile-grid,
  .quick-audit-grid,
  .starter-grid {
    grid-template-columns: 1fr !important;
  }

  .job-snapshot-top { padding: 12px; }
  .panel-body { padding: 14px; }

  .job-snapshot-top > *,
  .job-snapshot-fields > *,
  .job-snapshot-copy,
  .snapshot-decision-card,
  .snapshot-decision-strip {
    min-width: 0;
    max-width: 100%;
  }

  .job-snapshot-fields label,
  .guide-fields label,
  .profile-grid label { display: block; min-width: 0; }

  .job-snapshot-fields input,
  .job-snapshot-fields select,
  .guide-fields input,
  .guide-fields select,
  .guide-fields textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* ==========================================================================
   20. CONDENSE / EXPAND across whole wedges  (<= 900px)
   The built-in control only wraps ten panels and hides their direct body,
   which is why it appeared to fold away a caption. mobile.js extends the
   same two buttons to every titled section on the page.
   ========================================================================== */
@media (max-width: 900px) {
  .cq-folded > *:not(h2):not(h3):not(.cq-fold-note) { display: none !important; }

  .cq-fold-note {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 750;
    color: #686868;
  }
}


/* ==========================================================================
   21. JUMP CONTROL: guaranteed visible in the workspace  (<= 900px)
   The workspace stacks sticky bars and overlays with their own z-index.
   Pin the jump control above all of them and make sure no page-level rule
   can suppress it in Full View or Line View, on either premise.
   ========================================================================== */
@media (max-width: 900px) {
  html.cq-js .cq-secnav {
    display: flex !important;
    z-index: 2147483000;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .cq-seclist { z-index: 2147483001; }

  /* Full View / Line View / either premise must not hide it */
  body.wizard-mode html.cq-js .cq-secnav,
  body.guided-compact html.cq-js .cq-secnav,
  body.restaurant-workspace-active html.cq-js .cq-secnav {
    display: flex !important;
  }

  /* keep it clear of the workspace's own bottom bars */
  html.cq-js .cq-secnav { bottom: calc(18px + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   22. FILE INPUTS  (<= 900px)
   A file input carries an intrinsic width from its button chrome and
   ignores a percentage max-width, so it escapes its padded label. The
   label is the visible control; the input only needs to be reachable.
   ========================================================================== */
@media (max-width: 900px) {
  input[type="file"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 0.78rem !important;
  }

  label.file-action,
  .memory-actions > * {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .memory-actions {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }
}


/* ==========================================================================
   23. FILE INPUT, REAL CAUSE  (<= 900px)
   label.file-action is display:inline, so a percentage width on the input
   resolves against the nearest BLOCK ancestor, not the label — which is
   why width/max-width:100% never constrained it. Making the label a flex
   container with a shrinkable child is what actually holds it in.
   ========================================================================== */
@media (max-width: 900px) {
  label.file-action {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  label.file-action > input[type="file"] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}