.sidebar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sidebar-heading .brand { flex:1; min-width:0; }
.sidebar-close,.sidebar-backdrop,.home-menu-backdrop,.mobile-disclosure { display:none; }

/* Between the phone and 900px the panel has no column of its own: asked for, it opens over the page.
   So does a landscape phone, which is wider than 760 and shorter than anything else; app.js classes
   it the same way. The drawer's left edge is the Dynamic Island there, hence the inset. */
@media (min-width:761px) and (max-width:899px),(min-width:761px) and (max-height:500px) {
  .sidebar-collapse { display:inline-grid; }
  .sidebar.open { position:fixed; inset:0 auto 0 0; width:min(86vw,320px); z-index:30; padding:24px 18px calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px)); box-shadow:18px 0 55px rgba(55,31,22,.3); }
  .sidebar-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:29; width:100%; height:100%; border:0; background:rgba(37,24,19,.46); backdrop-filter:blur(2px); }
  body.nav-open { overflow:hidden; }
}

@supports (height:100dvh) {
  .app-shell,.sidebar,.main,.home-main,.profile-main { height:100dvh; min-height:100dvh; }
  /* The sign-in card measured itself in vh above 560px, which on a landscape iPhone counts the
     toolbar Safari draws over it, so the Sign in button could sit under the toolbar with nothing
     to scroll. The phone band below 560 already uses dvh; this reaches the landscape phone. */
  .auth-screen { min-height:100dvh; }
  .auth-card { max-height:calc(100dvh - 48px); }}

@media (max-width:760px) {
  :root { --mobile-safe-top:env(safe-area-inset-top,0px); --mobile-safe-right:env(safe-area-inset-right,0px); --mobile-safe-bottom:env(safe-area-inset-bottom,0px); --mobile-safe-left:env(safe-area-inset-left,0px); }
  html,body { width:100%; min-height:100%; overscroll-behavior:none; }
  body.nav-open,body.home-menu-open { overflow:hidden; }
  button,summary { touch-action:manipulation; }
  input,select,textarea { font-size:16px; }
  .auth-screen,.auth-card,.login-form,.password-field { min-width:0; }
  .auth-screen { width:100%; overflow-x:hidden; }
  .auth-screen .login-form input { font-size:16px; line-height:1.25; }
  .auth-screen .login-form .auth-code-input { font-size:20px; }
  .admin-dialog input,.admin-dialog select,.admin-dialog textarea { font-size:16px; line-height:1.25; }

  .app-shell { height:100dvh; min-height:100dvh; }
  .main,.home-main,.profile-main { height:100dvh; min-height:100dvh; }
  .sidebar { width:min(86vw,320px); height:100dvh; padding:calc(16px + var(--mobile-safe-top)) calc(16px + var(--mobile-safe-right)) calc(14px + var(--mobile-safe-bottom)) calc(16px + var(--mobile-safe-left)); z-index:30; box-shadow:18px 0 55px rgba(55,31,22,.3); }
  .sidebar-heading { min-height:48px; }
  .sidebar-close { display:inline-flex; min-width:58px; min-height:44px; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--brown) 48%, var(--line)); border-radius:8px; background:color-mix(in srgb, var(--blush-soft) 9%, var(--cream)); color:var(--ink); font-size:12px; font-weight:800; }
  .sidebar-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:29; width:100%; height:100%; border:0; background:rgba(37,24,19,.46); backdrop-filter:blur(2px); }
  .all-apps-button,.new-chat,.account-profile,.account-card>#sign-out { min-height:44px; }
  .chat-list-row .chat-link,.chat-list-row>button { min-height:44px; }
  /* On a phone the drawer is the whole screen, so the saved analyses scroll inside their own area
     and the connection card, the privacy line and the account controls keep their place at the
     bottom. The spacer stands down while that list is the thing filling the drawer, otherwise the
     two of them would split the free height between them and leave a gap above the account card. */
  .ai-sidebar { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  .ai-sidebar .chat-list { flex:1 1 auto; min-height:88px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .ai-sidebar:not([hidden]) ~ .sidebar-spacer { flex:0 0 auto; }

  .topbar { height:auto; min-height:calc(64px + var(--mobile-safe-top)); padding:var(--mobile-safe-top) calc(14px + var(--mobile-safe-right)) 0 calc(14px + var(--mobile-safe-left)); gap:10px; }
  .menu-button { width:44px; height:44px; min-width:44px; min-height:44px; border:1px solid transparent; border-radius:10px; display:inline-grid; place-items:center; }
  .menu-button:focus-visible { border-color:var(--brown); outline:3px solid color-mix(in srgb, var(--brown) 18%, transparent); }
  .sidebar-collapse { display:none; }
  .topbar-identity { min-width:0; flex:1; }
  .topbar-identity p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar .admin-primary,.topbar .integration-refresh { min-height:44px; flex:0 0 auto; }

  .home-header { height:auto; min-height:calc(64px + var(--mobile-safe-top)); padding:var(--mobile-safe-top) calc(15px + var(--mobile-safe-right)) 0 calc(15px + var(--mobile-safe-left)); }
  .home-header>img { width:120px; }
  .home-header-actions { position:relative; z-index:32; }
  .home-app-menu summary,.home-account-menu summary { width:46px; height:46px; min-width:46px; min-height:46px; }
  .home-menu-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:31; width:100%; height:100%; border:0; background:rgba(45,29,23,.34); backdrop-filter:blur(2px); }
  .home-app-popover,.home-account-popover { position:fixed; z-index:33; top:calc(72px + var(--mobile-safe-top)); left:15px; right:15px; width:auto; max-height:calc(100dvh - 92px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); overflow:auto; overscroll-behavior:contain; }
  .home-app-popover { grid-template-columns:1fr 1fr; padding:15px; }
  .home-app-popover button,.home-account-popover button { min-height:48px; }
  .home-account-popover { padding:14px; }
  .home-content { width:calc(100% - 30px); padding:27px 0 calc(24px + var(--mobile-safe-bottom)); }
  .home-intro h1 { max-width:360px; font-size:38px; line-height:.98; }
  .home-intro>p:last-child { font-size:13px; line-height:1.55; }
  /* A phone shows one tile per row, and at the desktop proportions the seventh app sat three
     screens down. The tile becomes a row: icon beside the name rather than above it, which is the
     shape a launcher takes on a phone and roughly halves the distance to the last app. */
  .app-launcher { margin-top:22px; gap:10px; }
  .app-tile { min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; padding:15px 46px 15px 15px; border-radius:15px; box-shadow:5px 5px 0 color-mix(in srgb, var(--brown) 9%, transparent); }
  .app-tile::after { width:86px; height:86px; right:-40px; bottom:-46px; }
  .app-icon { width:46px; height:46px; border-radius:16px; font-size:21px; box-shadow:4px 4px 0 color-mix(in srgb, var(--brown) 20%, transparent); }
  .app-copy { margin-top:0; gap:3px; }
  .app-copy strong { font-size:20px; }
  .app-copy small { max-width:none; font-size:11px; line-height:1.45; }
  .launch-arrow { top:50%; right:16px; font-size:19px; transform:translateY(-50%); }
  .home-data-strip { gap:8px; padding:15px; }
  .home-footer { padding:10px 15px calc(10px + var(--mobile-safe-bottom)); }

  .conversation { padding:22px 14px calc(108px + var(--mobile-safe-bottom)); overscroll-behavior:contain; }
  .welcome { margin-top:0; }
  .welcome-brand { width:190px; margin-bottom:13px; }
  .welcome h2 { font-size:30px; line-height:1.02; }
  .welcome-copy { font-size:12px; line-height:1.55; }
  .suggestions { gap:9px; }
  .suggestions button { min-height:64px; padding:10px 12px; }
  .composer-wrap { padding:10px calc(12px + var(--mobile-safe-right)) calc(8px + var(--mobile-safe-bottom)) calc(12px + var(--mobile-safe-left)); background:color-mix(in srgb, var(--cream) 97%, transparent); }
  .composer { min-height:54px; border-radius:22px; padding:10px; }
  .composer > #question { min-width:0; }
  /* The 5px halo the desktop control carries did not make the target a finger's size on its own;
     on a phone the attach and send controls are 44px in their own right. */
  .composer-actions button { width:44px; height:44px; min-width:44px; min-height:44px; }
  .composer-actions button svg { width:21px; height:21px; }
  .composer-actions { min-height:44px; }
  .composer-wrap>p { margin-top:6px; font-size:10px; line-height:1.35; }
  .desktop-disclosure { display:none; }
  .mobile-disclosure { display:inline; }
  .jump-latest { bottom:calc(96px + var(--mobile-safe-bottom)); min-width:44px; min-height:44px; }
  /* A table that runs past the edge of a phone says so in words: the scrollbar an iPhone draws is
     an overlay that only appears once a finger is already moving it. The hint is written from
     whether the table actually overflows, so it never appears over one that fits. */
  .table-frame[data-scroll]::before { content:"Swipe the table sideways for the rest of the columns"; display:block; margin:0 0 6px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.02em; }
  .table-frame::after { width:28px; }
  .table-wrap { -webkit-overflow-scrolling:touch; }
  .messages { gap:22px; }.message { gap:8px; }.mini-avatar { width:30px; height:30px; flex-basis:30px; border-radius:9px; }.message.assistant .bubble { width:calc(100% - 38px); max-width:calc(100% - 38px); }.answer-prose { padding:16px; border-radius:12px; font-size:13px; }.message.user .bubble { max-width:88%; }
  .analysis-artifact { margin-top:10px; border-radius:13px; }.artifact-heading { padding:17px 15px 13px; flex-direction:column; }.artifact-heading h3 { font-size:21px; }.artifact-actions { width:100%; justify-content:flex-start; }.artifact-export { min-height:42px; }.artifact-tabs { padding:10px 13px; }.artifact-tabs button { min-height:38px; }.recipe-explorer-controls { padding:12px 13px; }.recipe-menu-filter { flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; }.recipe-menu-filter button { flex:0 0 auto; min-height:40px; }.recipe-picker-wrap { grid-template-columns:1fr; gap:6px; }.recipe-picker { min-height:46px; }.food-cost-body { grid-template-columns:1fr; padding:12px 14px 15px; }.donut-panel { min-height:260px; }.food-cost-donut { width:min(100%,270px); }.artifact-metrics { grid-template-columns:1fr 1fr; }.artifact-metric { min-height:72px; padding:11px; }.artifact-metric strong { font-size:19px; }.artifact-legend { padding:0 14px 15px; }.artifact-legend-item { min-height:40px; text-align:left; }.artifact-notice { margin:0 14px 12px; flex-direction:column; gap:4px; }.artifact-provenance { padding:10px 14px; line-height:1.45; }.artifact-table-wrap { padding:4px 12px 14px; }.scenario-control { margin:0 14px 14px; grid-template-columns:1fr; }.scenario-control small { grid-column:1; }.series-bars { padding:13px 12px 8px; }.series-bar { grid-template-columns:20px minmax(95px,.8fr) minmax(80px,1fr); gap:7px; }.series-value { grid-column:2/-1; text-align:right; }.trend-chart { padding:12px 8px 5px; overflow-x:auto; }.trend-chart svg { min-width:580px; }
  .screenshot-review { min-height:0; padding:1px 1px 0; }.screenshot-tile,.screenshot-preview-button { width:88px; height:88px; }.screenshot-review-copy { width:100%; }.screenshot-review-heading { align-items:flex-start; flex-direction:column; gap:2px; }.screenshot-review-heading span { text-align:left; }.screenshot-review-copy textarea { min-height:74px; }.ingredient-groups { padding:12px 13px 15px; }.ingredient-row { grid-template-columns:1fr auto; padding:10px 11px; }.ingredient-type { grid-column:1/-1; }.ingredient-quantity { text-align:right; }

  .dashboard,.admin-workspace,.integrations-workspace,.profile-content { padding-left:14px; padding-right:14px; padding-bottom:calc(34px + var(--mobile-safe-bottom)); }
  .dashboard-hero h2,.admin-hero h2,.integrations-hero h2 { font-size:32px; line-height:1.02; }
  .metric-grid,.admin-metrics,.integration-metrics { gap:9px; }
  .metric-card,.admin-metrics article,.integration-metrics article { min-width:0; padding:15px; }
  .panel { padding:15px; }

  .profile-heading { gap:12px; }
  .profile-panel { padding:18px; }
  .profile-permission-management { padding:0; }
  .profile-permission-heading { padding:18px; }
  .profile-permission-heading .admin-primary { width:100%; }
  .profile-panel dl>div { grid-template-columns:88px minmax(0,1fr); }
  .profile-security-actions,.mfa-actions { width:100%; }
  .profile-security-actions button,.mfa-actions button { width:100%; min-height:44px; }

  .admin-workspace { padding-top:20px; }
  .admin-hero p:last-child { font-size:12px; line-height:1.5; }
  /* Four counters at the desktop proportions filled the screen before the member list began. They
     hold a label, a number and a line of detail; on a phone that needs about two thirds of it. */
  .admin-metrics { margin-top:16px; }
  .admin-metrics article { min-height:0; padding:12px 13px; border-radius:10px; }
  .admin-metrics span { font-size:8px; letter-spacing:.12em; }
  .admin-metrics strong { margin-top:5px; font-size:24px; }
  .admin-metrics small { margin-top:4px; font-size:9px; line-height:1.35; }
  /* Seven tabs need about 660px and a phone has 330: wrapped onto two rows every tab is on screen,
     where a strip that scrolled sideways with its scrollbar hidden kept Activity, Branding and
     Stores out of sight with nothing to say there was more. */
  .admin-tabs { gap:0 2px; margin-top:15px; flex-wrap:wrap; }
  .admin-tabs button { min-height:44px; flex:0 0 auto; padding:10px 12px; }
  .admin-panel { margin-top:15px; overflow:visible; }
  .admin-panel-heading { padding:17px 15px; }
  /* Two secondary buttons and a search field, each on a full-width row of its own, cost most of a
     screen before the first member. The buttons share a row and the search keeps its own. */
  .admin-panel-actions { width:100%; align-items:stretch; flex-wrap:wrap; gap:8px; }
  .admin-panel-actions .admin-row-action { flex:1 1 44%; min-width:0; min-height:44px; padding-left:8px; padding-right:8px; }
  .admin-panel-actions .admin-search { flex:1 1 100%; }
  .permission-set-grid { grid-template-columns:1fr; padding:14px; }
  .permission-set-card { padding:15px; }
  .admin-table { overflow:visible; padding:0 10px 10px; }
  .admin-table-head { display:none; }
  .admin-table-row,.admin-table-row.invite-row,.admin-table-row.activity-row,.admin-table-row.team-row,.admin-table-row.member-row,.admin-table-row.store-access-row { min-width:0; grid-template-columns:minmax(0,1fr) auto; gap:11px 14px; margin:10px 0 0; padding:15px; border:1px solid color-mix(in srgb, var(--brown) 23%, var(--blush-soft)); border-radius:9px; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); box-shadow:3px 3px 0 rgba(92,56,42,.06); }
  .admin-table-row:last-child { border-bottom:1px solid color-mix(in srgb, var(--brown) 23%, var(--blush-soft)); }
  .admin-user,.admin-table-row.invite-row>strong,.admin-table-row.activity-row>strong { grid-column:1/-1; }
  .admin-table-row>[data-label] { min-width:0; display:grid; grid-template-columns:minmax(78px,.55fr) minmax(0,1fr); align-items:center; gap:10px; text-align:right; }
  .admin-table-row>[data-label]::before { content:attr(data-label); color:color-mix(in srgb, var(--muted) 85%, var(--terracotta)); font-size:9px; font-weight:850; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
  .admin-app-pills { justify-content:flex-end; }
  .admin-row-actions { justify-content:flex-end; flex-wrap:wrap; }
  .admin-row-action { min-height:44px; }
  .admin-panel .date-filter { padding:14px 15px; }.activity-search { grid-column:1/-1; }.activity-more { width:calc(100% - 20px); min-height:44px; margin:6px 10px 14px; }.activity-details { grid-template-columns:96px minmax(0,1fr); }

  .integration-toolbar { gap:14px; }
  .integration-filters { max-width:100%; padding:4px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .integration-filters::-webkit-scrollbar { display:none; }
  .integration-filters button { min-height:42px; flex:0 0 auto; scroll-snap-align:start; }
  .integration-card { min-height:235px; padding:17px; }
  .integration-card-action,.integration-secondary { min-height:44px; }
  .integration-detail-dialog { width:100vw; max-width:none; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .integration-detail-shell { height:100%; max-height:none; padding:calc(60px + var(--mobile-safe-top)) calc(14px + var(--mobile-safe-right)) calc(16px + var(--mobile-safe-bottom)) calc(14px + var(--mobile-safe-left)); overscroll-behavior:contain; }
  .integration-detail-dialog .incident-close { position:fixed; z-index:4; top:calc(10px + var(--mobile-safe-top)); right:calc(12px + var(--mobile-safe-right)); width:44px; height:44px; border:1px solid color-mix(in srgb, var(--muted) 6%, var(--line)); border-radius:50%; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); }
  .integration-detail-brand { align-items:flex-start; }
  .integration-detail-brand h2 { font-size:29px; }
  .integration-detail-section { padding:15px; }
  .integration-section-heading>small { font-size:10px; line-height:1.5; }
  .integration-schedule-fields label { font-size:11px; }
  .integration-detail-actions { position:sticky; bottom:calc(-16px - var(--mobile-safe-bottom)); z-index:3; margin:18px -14px 0; padding:12px 14px calc(12px + var(--mobile-safe-bottom)); border-top:1px solid color-mix(in srgb, var(--ink) 8%, var(--blush)); background:color-mix(in srgb, var(--terracotta) 12%, var(--paper)); }
  .integration-detail-actions button { min-height:46px; flex:1; }
  #integration-save-schedule,#integration-save-locations { width:100%; min-height:46px; align-self:stretch; }}

@media (max-width:560px) {
  .auth-screen { min-height:100dvh; padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px)); }
  .auth-card { max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); padding:26px 20px; }
  .home-app-popover { grid-template-columns:1fr; }
  .home-intro h1 { font-size:36px; }
  .metric-grid,.admin-metrics,.integration-metrics,.integration-detail-facts { grid-template-columns:1fr 1fr; }
  .date-filter { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .date-filter button { grid-column:1/-1; min-height:44px; }
  .integration-location-row { grid-template-columns:minmax(0,1fr) 44px; }
  .integration-location-remove { min-width:44px; min-height:44px; }

  .admin-dialog,.integration-connect-dialog,.delete-dialog,.incident-dialog,.mfa-dialog,.mfa-onboarding-dialog,.mfa-setup-dialog { width:100vw; max-width:none; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .admin-dialog>form,.delete-dialog>form,.incident-dialog-shell,.mfa-dialog>form,.mfa-setup-dialog>form,.mfa-onboarding-shell { min-height:100%; max-height:none; overflow:auto; padding:calc(58px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px)); }
  .admin-dialog .incident-close,.incident-dialog .incident-close,.mfa-dialog .incident-close,.mfa-setup-dialog .incident-close { top:calc(10px + env(safe-area-inset-top,0px)); right:12px; width:44px; height:44px; }
  .dialog-actions,.admin-member-actions,.mfa-setup-actions { position:sticky; bottom:calc(-18px - env(safe-area-inset-bottom,0px)); z-index:3; margin-left:-18px; margin-right:-18px; padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid color-mix(in srgb, var(--brown) 27%, var(--cream)); background:var(--paper); }
  .admin-dialog>form .dialog-actions,.admin-dialog>form .admin-member-actions,.mfa-setup-dialog>form .mfa-setup-actions,.mfa-onboarding-shell .dialog-actions { margin-top:auto; }
  .dialog-actions button,.admin-member-actions button,.mfa-setup-actions button { min-height:46px; }
  .admin-member-actions { grid-template-columns:1fr 1fr; }
  .admin-member-actions>span { display:none; }
  .admin-member-actions .danger-button,.admin-member-actions #admin-resend-member-invite { grid-column:1/-1; }
  .location-access-options { grid-template-columns:1fr; }}

@media (max-width:380px) {
  .home-header>img { width:108px; }
  .home-intro h1 { font-size:33px; }
  .home-app-menu summary,.home-account-menu summary { width:44px; height:44px; min-width:44px; min-height:44px; }
  .metric-grid,.integration-metrics,.integration-detail-facts { grid-template-columns:1fr; }
  .admin-metrics { grid-template-columns:1fr 1fr; }
  .admin-main .topbar .admin-primary { padding:9px 10px; font-size:9px; }}

@media (max-width:760px) and (orientation:landscape) {
  .home-content { padding-top:20px; }
  .home-intro h1 { font-size:34px; }}

@media (max-width:760px) {
  .menu-button { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; display:inline-grid; place-items:center; border:1px solid color-mix(in srgb, var(--brown) 35%, var(--blush-soft)); border-radius:12px; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); color:color-mix(in srgb, var(--ink) 61%, var(--terracotta)); box-shadow:0 2px 0 rgba(80,49,37,.07); }
  .loss-main .menu-button { border-color:#35435f; background:#111b31; color:#f1f5ff; box-shadow:0 2px 0 rgba(0,0,0,.2); }
  .loss-main .menu-button:focus-visible { border-color:#87a9df; outline-color:rgba(117,180,255,.28); }

  .sidebar { width:min(90vw,360px); padding:calc(18px + var(--mobile-safe-top)) calc(18px + var(--mobile-safe-right)) calc(16px + var(--mobile-safe-bottom)) calc(18px + var(--mobile-safe-left)); background:linear-gradient(180deg,color-mix(in srgb, var(--rose) 41%, var(--cream)) 0,color-mix(in srgb, var(--rose) 26%, var(--cream)) 58%,color-mix(in srgb, var(--rose) 34%, var(--cream)) 100%); border-right:1px solid color-mix(in srgb, var(--ink) 11%, var(--rose)); }
  .sidebar-heading { align-items:center; padding-bottom:15px; border-bottom:1px solid rgba(119,75,57,.16); }
  .sidebar-heading .brand { justify-content:flex-start; padding:0; }
  .sidebar-heading .brand-logo { width:148px; }
  .sidebar-close { min-width:58px; min-height:40px; border-radius:999px; background:rgba(255,250,247,.88); font-size:10px; letter-spacing:.02em; }
  .all-apps-button { min-height:45px; margin:12px 0 4px; padding:10px 11px; border:1px solid transparent; border-radius:8px; font-size:11px; }
  .all-apps-button:hover,.all-apps-button:focus-visible { border-color:color-mix(in srgb, var(--brown) 33%, var(--blush)); background:rgba(255,250,247,.72); outline:none; }
  .agent-label { margin:20px 10px 8px; font-size:9px; }
  .agent { min-height:66px; border-radius:10px; padding:12px; box-shadow:4px 5px 0 rgba(91,55,41,.08); }
  .agent-icon { width:38px; height:38px; }
  .agent strong { font-size:14px; }.agent small { font-size:10px; line-height:1.35; }
  .data-card { margin-top:14px; padding:12px; border-radius:9px; background:rgba(255,250,247,.78); }
  .data-card .status-line { font-size:11px; }
  .data-card p { margin-left:16px; font-size:9px; line-height:1.4; }
  #operational-coverage-sidebar,#model-sidebar { display:none; }
  .privacy { padding:11px 6px 0; font-size:9px; }
  .account-card { margin-top:10px; padding-top:10px; gap:8px; }
  .account-profile { min-height:48px; padding:7px; border-radius:8px; }
  .account-avatar { width:34px; height:34px; }
  .account-card strong { font-size:10px; }.account-card small { font-size:8px; }
  .account-card>#sign-out { min-width:58px; min-height:42px; border:1px solid rgba(145,94,71,.22); border-radius:7px; background:rgba(255,250,247,.55); }

  .donut-panel { min-height:284px; }
  .food-cost-donut { width:min(100%,280px); cursor:pointer; touch-action:manipulation; border-radius:50%; }
  .food-cost-donut:focus-visible { outline:4px solid rgba(47,111,237,.22); outline-offset:5px; }
  .chart-tooltip { max-width:calc(100% - 26px); transform:translate(-50%,-112%); padding:9px 11px; border-radius:8px; font-size:11px; box-shadow:0 10px 28px rgba(24,18,16,.28); }
  .artifact-legend-item { border-radius:8px; }

  .admin-table { padding:2px 10px 12px; }
  .admin-table-row,.admin-table-row.invite-row,.admin-table-row.activity-row,.admin-table-row.team-row,.admin-table-row.member-row,.admin-table-row.store-access-row { display:flex; flex-direction:column; align-items:stretch; gap:0; margin-top:12px; padding:0; overflow:hidden; border-radius:12px; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); box-shadow:4px 5px 0 rgba(92,56,42,.07); }
  .admin-table-row.admin-table-head { display:none; }
  .admin-user,.admin-table-row.invite-row>strong,.admin-table-row.activity-row>strong { width:100%; padding:16px 15px 13px; border-bottom:1px solid color-mix(in srgb, var(--line) 54%, var(--paper)); }
  .admin-user-avatar { width:40px; height:40px; font-size:12px; }
  .admin-user strong { font-size:12px; }.admin-user small { margin-top:2px; font-size:8px; overflow-wrap:anywhere; white-space:normal; }
  .admin-table-row>[data-label] { width:100%; min-height:48px; padding:10px 15px; display:grid; grid-template-columns:92px minmax(0,1fr); align-items:start; gap:12px; border-bottom:1px solid color-mix(in srgb, var(--paper) 55%, var(--line)); text-align:left; }
  .admin-table-row>[data-label]::before { padding-top:3px; font-size:8px; line-height:1.35; }
  .admin-role { font-size:11px; line-height:1.35; }
  .admin-status { justify-self:start; }
  .admin-app-pills { width:100%; justify-content:flex-start; gap:6px; }
  .admin-app-pills span { min-height:28px; display:inline-flex; align-items:center; padding:5px 9px; background:color-mix(in srgb, var(--cream) 96%, var(--rose)); font-size:8px; line-height:1.2; }
  .admin-card-action { width:100%; padding:12px 15px 15px !important; border:0 !important; }
  .admin-card-action::before { display:none; }
  .admin-card-action .admin-row-action,.admin-card-action .admin-link,.admin-card-action>span { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:7px; }
  .admin-card-action .admin-link { border:1px solid color-mix(in srgb, var(--muted) 21%, var(--rose)); background:color-mix(in srgb, var(--cream) 87%, var(--paper)); color:color-mix(in srgb, var(--ink) 63%, var(--terracotta)); text-decoration:none; }
  .admin-row-actions { width:100%; justify-content:flex-start; }
  .admin-row-actions .admin-row-action { flex:1 1 100px; }
  .admin-table-row.invite-row { border-color:color-mix(in srgb, var(--brown) 7%, var(--line)); }
  .admin-table-row.invite-row>strong[data-label="Email"] { display:block; min-height:72px; padding:15px; color:color-mix(in srgb, var(--ink) 94%, var(--rose)); font-size:13px; line-height:1.35; text-align:left; overflow-wrap:anywhere; background:linear-gradient(135deg,color-mix(in srgb, var(--cream) 87%, var(--paper)),color-mix(in srgb, var(--blush) 37%, var(--paper))); }
  .admin-table-row.invite-row>strong[data-label="Email"]::before { display:block; margin:0 0 6px; color:color-mix(in srgb, var(--ink) 37%, var(--terracotta)); font-size:8px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; content:"Invitee"; }
  .admin-table-row.activity-row>strong[data-label="Event"] { display:block; min-height:0; padding:15px; color:color-mix(in srgb, var(--ink) 94%, var(--rose)); font-size:13px; line-height:1.35; text-align:left; overflow-wrap:anywhere; background:linear-gradient(135deg,color-mix(in srgb, var(--cream) 87%, var(--paper)),color-mix(in srgb, var(--blush) 37%, var(--paper))); }
  .admin-table-row.activity-row>strong[data-label="Event"]::before { display:block; margin:0 0 6px; color:color-mix(in srgb, var(--ink) 37%, var(--terracotta)); font-size:8px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
  .admin-table-row.activity-row>strong[data-label="Event"] small { display:block; margin-top:4px; }
  .admin-table-row.activity-row .activity-outcome { align-items:flex-start; }
  .admin-table-row.invite-row .admin-invite-status { grid-template-columns:92px minmax(0,1fr); align-items:start; }
  .admin-table-row.invite-row .admin-invite-status::before { grid-column:1; grid-row:1 / span 2; }
  .admin-table-row.invite-row .admin-invite-status .admin-status { grid-column:2; min-height:27px; display:inline-flex; align-items:center; justify-content:center; justify-self:start; padding:5px 10px; }
  .admin-table-row.invite-row .admin-row-actions { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:start; gap:8px 12px; }
  .admin-table-row.invite-row .admin-row-actions::before { grid-column:1; grid-row:1 / span 3; }
  .admin-table-row.invite-row .admin-row-actions .admin-row-action,.admin-table-row.invite-row .admin-row-actions>.admin-muted { grid-column:2; width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; }}

@media (prefers-reduced-motion:reduce) {
  .sidebar { transition:none; }}

/* ── Phone and iPad pass ─────────────────────────────────────────────────────────────────────
   Fixes from the September 2026 responsive audit, one comment per finding. They sit at the end so
   they win at equal specificity, and each stays inside the band it was judged in. */

/* ai-4: The jump-to-latest button is absolutely positioned from the bottom of .main with a fixed offset (112px, 96px + safe area on phones) that does not match the comp */
/* append at the very end of mobile.css so it wins over both existing .jump-latest bottom offsets */
.conversation { grid-row:2; grid-column:1; }
.composer-wrap { grid-row:3; grid-column:1; }
.jump-latest { position:relative; grid-row:2; grid-column:1; align-self:end; justify-self:center; left:auto; bottom:auto; margin-bottom:14px; transform:none; }
@media (hover:hover) { .jump-latest:hover { transform:translateY(-2px); } }

@media (max-height:480px) and (orientation:landscape) {
  /* integrations-11: On a landscape phone (812x375, which receives the tablet layout) the 36px workspace padding and the 43px two-line hero push the first metric card to y=312, leav */
  .integrations-workspace { padding-top:16px; }
  .integrations-hero { gap:20px; }
  .integrations-hero h2 { font-size:30px; margin-bottom:6px; }
  .integration-metrics { margin-top:16px; }}

@media (max-height:500px) and (orientation:landscape) {
  /* ai-3: A landscape phone (812x375) is wider than 760px so it receives the tablet chrome: an 86px topbar and a 162px composer stack (two-row composer plus the 10px disc */
  .main[data-module-view="ai"] .topbar { height:60px; min-height:60px; padding:0 calc(16px + env(safe-area-inset-right,0px)) 0 calc(16px + env(safe-area-inset-left,0px)); }
  .conversation { padding:12px calc(20px + env(safe-area-inset-right,0px)) 16px calc(20px + env(safe-area-inset-left,0px)); }
  .welcome-brand { width:150px; margin-bottom:8px; }
  .welcome h2 { font-size:26px; margin:8px 0; }
  .suggestions { grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
  .suggestions button { min-height:0; padding:9px 12px; }
  .composer-wrap { padding:6px calc(12px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px)); }
  .composer-wrap > p { display:none; }}

@media (max-width:1199px),(hover:none) and (pointer:coarse) {
  /* ai-6: Between 761px and 1199px the module falls back to desktop control sizes: the jump-to-latest button is 40x40 and the artifact chrome (tab pills, export buttons,  */
  .jump-latest { width:44px; height:44px; }
  .artifact-tabs button { min-height:44px; padding:9px 14px; }
  .artifact-export { min-height:44px; }
  .artifact-legend-item { min-height:44px; }
  /* admin-15: The table micro type is 8px on every touch viewport: app-access pill labels, member IDs, store-access detail ('Includes future stores'), event source and outcom */
  .admin-app-pills span { font-size:10px; }
  .admin-user small,.admin-location-summary small,.activity-event small,.activity-outcome small { font-size:9px; }
  /* integrations-1: The catalog filter segmented control keeps its desktop size on every iPad (and on the 812px landscape phone, which receives tablet CSS): 9px text with 7px verti */
  .integration-filters button { min-height:44px; padding:8px 14px; font-size:10px; }
  /* integrations-7: Inside the connection detail dialog the schedule form is desktop-sized on touch devices. The frequency/day/time/timezone controls use font:inherit and therefore */
  .integration-schedule-fields input,.integration-schedule-fields select { min-height:44px; font-size:16px; font-weight:500; }
  .integration-location-row input,.integration-location-row select,.integration-external-location { min-height:44px; }
  .integration-weekday-options span,.integration-schedule-enabled { min-height:44px; }
  /* integrations-9: The smallest text on the page is carried unchanged from desktop to a 768px tablet held at arm's length and to phones: 8px metric labels and status chips, 9px me */
  .integration-metrics span,.integration-status { font-size:9px; }
  .integration-metrics small,.integration-card-heading p,.integration-card-facts { font-size:10px; }
  .integration-card-facts { color:var(--muted); }}

@media (min-width:761px) and (max-width:1199px) {
  /* integrations-2: The card's primary action ('View connection' / 'Connect with Square' / 'Coming soon') and the topbar Refresh button stay at desktop height on iPads: 10px text w */
  .integration-refresh,.integration-card-action { min-height:44px; }
  /* integrations-8: The detail dialog only gets its touch treatment at 760px and below; on iPads it is the desktop dialog: the close x is a bare 26px glyph with no box (~26x31px hi */
  .integration-detail-dialog .incident-close { top:12px; right:12px; width:44px; height:44px; padding:0; display:grid; place-items:center; }
  .integration-secondary,.integration-detail-actions button,#integration-save-schedule,#integration-save-locations { min-height:44px; }
  .integration-location-row { grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) 44px; }
  .integration-location-remove { min-width:44px; min-height:44px; }
  .integration-section-heading > small { font-size:10px; line-height:1.5; }
  .integration-schedule-fields > label,.integration-weekday-fieldset legend,.integration-schedule-enabled,.integration-schedule-next { font-size:11px; }}

@media (max-width:760px) {
  /* ai-2: On a 375x812 phone the empty state opens with the top of the BREADY wordmark hidden under the topbar and ~100px of blank padding sitting between the last sugges */
  /* append inside the second (max-width:760px) block so it wins over lines 64-70 */
  .conversation { padding:16px 14px 20px; }
  .welcome-brand { width:170px; }
  .suggestions { margin-top:22px; }
  /* ai-5: On phones the assistant answer keeps a 16px padding from the old card design even though the bubble is now transparent and borderless, so the text starts 16px r */
  /* append inside the second (max-width:760px) block so it wins over line 80 */
  .answer-prose { padding:0; border-radius:0; font-size:15px; }
  .message.user .bubble { font-size:14px; }
  /* admin-8: mobile.css sets input,select,textarea to 16px on phones to stop iOS zooming on focus, but the more specific .admin-panel .date-filter input/select rule in style */
  .admin-panel .date-filter input,.admin-panel .date-filter select { font-size:16px; }
  /* admin-10: On phones the alert keeps its three-across desktop layout: a 52px severity pill, the copy squeezed to 165px (title and meta wrap to three lines at 9px) and a 64 */
  .activity-alert { flex-wrap:wrap; gap:8px 12px; }
  .activity-alert-copy { flex:1 1 200px; }
  .activity-alert .admin-link { min-height:44px; margin-left:auto; padding:0 12px; display:inline-flex; align-items:center; border:1px solid color-mix(in srgb, var(--muted) 21%, var(--rose)); border-radius:7px; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); color:color-mix(in srgb, var(--ink) 63%, var(--terracotta)); text-decoration:none; }
  /* admin-13: On the Users tab the heading actions are full-width 44px buttons, but on the Permission sets tab the primary button stays a 149x37px desktop button: under the 4 */
  .admin-panel-heading > .admin-primary { width:100%; min-height:44px; }
  /* admin-17: In the phone card layout the status pill is also the data-label cell, so the pill's background and 999px radius are applied to the whole 323x48px cell: every me */
  .admin-table-row > .admin-status[data-label] { background:transparent; border-radius:0; color:inherit; font-size:11px; font-weight:750; }
  .admin-table-row > .admin-status.active[data-label] { color:#236547; }
  .admin-table-row > .admin-status.invited[data-label] { color:#7c5a16; }
  .admin-table-row > .admin-status.suspended[data-label] { color:#873d38; }
  /* admin-18: The card action cell inherits the two-column label grid (92px + 1fr) from the [data-label] rule; its ::before label is hidden, so the button auto-places into th */
  .admin-table-row > .admin-card-action { grid-template-columns:minmax(0,1fr); }
  /* integrations-3: On phones the styles.css (max-width:700px) rule collapses Refresh to a single letter 'R' via font-size:0 + ::first-letter, producing a 29px-wide control (under  */
  .integration-refresh { min-width:44px; padding:9px 14px; font-size:10px; }
  .integration-refresh::first-letter { font-size:1em; }}

@media (max-width:380px) {
  /* loss-prevention-9: At 375px and 360px the shared (max-width:380px) rule stacks the KPI cards in one column, but the module's min-height:140px still applies, so each full-width car */
  .loss-main .metric-card { min-height:0; }
  /* admin-12: The four tabs need 349px but the strip is 332px wide at 360px (and 347px at 375px), so the strip scrolls with its scrollbar hidden and the Activity tab is clipp */
  .admin-tabs button { padding:10px 12px; }
  /* integrations-10: At 375px (and 360px) the shared (max-width:380px) rule stacks the four metric cards one per row, so four ~120px-tall cards each holding a single digit push the  */
  .integration-metrics { grid-template-columns:1fr 1fr; }
  .integration-metrics strong { font-size:24px; }}

@media (max-width:560px) {
  /* loss-prevention-2: On phones the incident dialog is a full-screen 100dvh sheet whose <dialog> element is the scroller, but the close x is position:absolute inside the shell, so it */
  .incident-dialog .incident-close { position:fixed; z-index:4; border:1px solid #35435f; border-radius:50%; background:#111b31; color:#f1f5ff; }
  .incident-workflow .case-save { justify-self:stretch; }
  /* loss-prevention-10: The store comparison heading is a single flex row on phones, so the 19px title 'Refund patterns by location' breaks onto two lines while 'All payment methods' i */
  .loss-main .store-comparison-panel .panel-heading { flex-wrap:wrap; }
  .loss-main .store-comparison-panel .panel-heading > small { flex-basis:100%; }
  /* admin-19: The Edit member and Permission set sheets already use full-width paired buttons in their sticky footer, but the Invite sheet keeps a desktop right-aligned pair  */
  .admin-dialog .dialog-actions button { flex:1 1 0; }}

@media (max-width:380px) {
  /* Four counts do not need four screens: on the narrowest phones the workspace and cash KPIs sit two
     across, the way the integration metrics already do, and the cards hug their numbers. */
  .admin-metrics,.loss-main .metric-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .admin-metrics article { min-height:0; padding:14px; }
  .admin-metrics strong { font-size:26px; }
  .loss-main .metric-card { padding:14px; }
  .loss-main .metric-value { font-size:26px; }}

@media (min-width:761px) and (max-width:1199px) {
  /* Profile on an iPad: the two panels start at the same line and stop where their own content
     stops, and every account action is a thumb-sized target. */
  .profile-grid { align-items:start; }}

@media (max-width:1199px),(hover:none) and (pointer:coarse) {
  /* Every account action is a thumb-sized target on a phone or an iPad. */
  .profile-back,.profile-security-actions button,.mfa-actions button,.profile-permission-heading .admin-primary,#add-authenticator,#change-password,#sign-out-all,#profile-sign-out { min-height:44px; }
  .profile-back { display:inline-flex; align-items:center; padding:0 10px; margin-left:-10px; }}

@media (min-width:761px) and (max-width:899px) {
  /* An iPad in portrait has room for the four counts in one strip; two across left each card
     mostly empty. Type steps down a size so the longest label still sits on one line. */
  .admin-metrics,.loss-main .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .admin-metrics article { min-height:104px; padding:16px 14px; }
  .admin-metrics strong { font-size:28px; }
  .loss-main .metric-card { min-height:112px; padding:16px 14px; }
  .loss-main .metric-label { font-size:10px; }
  .loss-main .metric-value { font-size:28px; }}

/* ── Phone and iPad pass ─────────────────────────────────────────────────────────────────────
   Fixes from the September 2026 responsive audit, one comment per finding. They sit at the end so
   they win at equal specificity, and each stays inside the band it was judged in. */

@media (max-width:760px) {
  /* profile-1: mobile.css makes the button width:100% but .mfa-actions is still a nowrap flex row, so the button is a shrinkable item beside the caption: it collapses to a nar */
  .mfa-actions { flex-direction:column; align-items:stretch; gap:10px; }
  /* profile-3: Two phone rules stack: styles.css (max-width:760px) sets .profile-content width:calc(100% - 30px) and mobile.css adds padding-left/right:14px, so the profile ha */
  .profile-content { width:100%; }
}

@media (min-width:761px) and (max-width:899px) {
  /* The connection counts join the same one-row strip the other dashboards use on an iPad in portrait. */
  .integration-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .integration-metrics article { min-height:104px; padding:16px 14px; }
  .integration-metrics strong { font-size:26px; }}

/* From the second-pass review of BreadyAI. */
@media (max-width:760px) {
  /* The extracted-text box out-specified the 16px phone rule, so iOS zoomed the page on focus. */
  .screenshot-review-copy textarea { font-size:16px; line-height:1.35; }
  /* The two smallest lines on a phone screen come up a size; the welcome still fits in one screen. */
  .composer-wrap > p { font-size:11px; }
  .welcome-copy { font-size:13px; }
}
@media (max-width:380px) {
  /* On a 360px phone the 30px title wrapped and pushed the empty state past the fold. */
  .welcome h2 { font-size:27px; }}
@media (max-width:1199px),(hover:none) and (pointer:coarse) {
  /* The screenshot tile's remove control gets a finger-sized reach without growing the tile. */
  .screenshot-remove { width:28px; height:28px; font-size:17px; }
  .screenshot-remove::after { content:""; position:absolute; inset:-8px; border-radius:50%; }
  /* Artifact micro type on touch screens, one step up, the same way the welcome and composer went. */
  .artifact-kicker,.artifact-metric span,.artifact-provenance,.artifact-table th,.artifact-table td small,.scenario-control small,.screenshot-review-copy small,.screenshot-review-heading span { font-size:10px; }
  .artifact-subtitle,.artifact-notice,.artifact-legend-item,.artifact-tabs button,.artifact-export,.artifact-table td { font-size:11px; }}

/* From the second-pass review of Loss Prevention. */
@media (max-width:760px) {
  /* The module's own padding out-specified the shared phone gutter and dropped the home-indicator inset. */
  .loss-main .dashboard { padding:22px 14px calc(34px + var(--mobile-safe-bottom)); }
}
@media (max-width:560px) {
  /* Panel padding was eating a fifth of a phone's width before the incident cards began. */
  .loss-main .panel { padding:18px 16px; }}
@media (max-width:380px) {
  /* Two across on the narrowest phones: the longest label stays on one line and the captions break whole. */
  .loss-main .metric-label { font-size:10px; }
  .loss-main .store-refund-details { flex-wrap:wrap; gap:2px 16px; }}
@media (min-width:561px) and (max-width:1199px) {
  /* On a tablet the incident sheet scrolls itself and the close control rides along at the top, so it is
     still there when the reviewer reaches the notes; the shell had been the scroller and carried it away. */
  .incident-dialog-shell { max-height:none; overflow:visible; }
  .incident-dialog .incident-close { position:sticky; top:10px; right:auto; z-index:4; display:grid; place-items:center; margin:-18px -16px -26px auto; padding:0; border:1px solid #35435f; border-radius:50%; background:#111b31; color:#f1f5ff; }}
@media (min-width:761px) and (max-width:1199px) {
  /* The date inputs sat at the browser's 13px beside a 16px button; the labels come up with them. */
  .loss-main .date-filter input { font-size:16px; }
  .loss-main .date-filter label { font-size:10px; }}
@media (max-width:932px) and (orientation:landscape) and (max-height:500px) {
  /* A landscape phone gives the dashboard the same 60px bar BreadyAI already uses there. */
  .loss-main .topbar { height:60px; min-height:60px; }}

/* From the second-pass review of Integrations. */
@media (max-width:760px) {
  /* Three sibling captions in the schedule form were three sizes; they read as one now. */
  .integration-weekday-fieldset legend,.integration-schedule-enabled,.integration-schedule-next { font-size:11px; }
}
@media (min-width:761px) and (max-width:1199px) {
  /* The connection sheet's shell scrolls, so an absolute close control left with the heading; it rides
     along at the top now and the heading keeps clear of it. */
  .integration-detail-dialog .incident-close { position:sticky; top:12px; right:12px; z-index:4; width:44px; height:44px; margin:0 0 -44px auto; padding:0; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--muted) 6%, var(--line)); border-radius:50%; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); color:color-mix(in srgb, var(--ink) 61%, var(--terracotta)); }
  .integration-detail-heading { padding-right:72px; }}
@media (min-width:1001px) and (max-width:1199px) {
  /* Four schedule columns clipped "Selected days each week" beside the rail; two columns read whole. */
  .integration-schedule-fields { grid-template-columns:repeat(2,minmax(140px,1fr)); }
  .integration-weekday-fieldset { grid-column:1/-1; }}
@media (max-width:1199px) {
  /* The status pill keeps its line beside a longer subtitle at three cards across. */
  .integration-card-heading .integration-status { flex:0 0 auto; }
  /* The remaining micro type in the sheet and the hero note come up a step, and the sync history flows
     with the sheet instead of scrolling inside it, which trapped a finger. */
  .integration-detail-facts small,.integration-history-row small { font-size:9px; }
  .integration-schedule-summary p,.integration-history-row p { font-size:10px; }
  .integration-secondary { font-size:10px; }
  .integration-history { max-height:none; }
  .integration-security-note strong { font-size:12px; }
  .integration-security-note small { font-size:10px; }}

@media (max-width:760px) {
  /* The card row labels were one step under the table head and the secondary text beside them. */
  .admin-table-row>[data-label]::before { font-size:9px; }}

@media (min-width:761px) and (max-width:1199px) {
  /* The last two panel controls under a finger's height on a tablet: the way back and Sign out. */
  .all-apps-button,.account-card>#sign-out { min-height:44px; }
  .account-card>#sign-out { padding:0 10px; }}
/* ── Analytics on a phone and an iPad ────────────────────────────────────────────────────────
   The grid already collapses to one column on its own; what a narrow screen needs is for the
   window buttons to keep a real tap target and for the summary to stop being four cramped cards. */
@media (max-width: 760px) {
  .analytics-workspace { padding: 0 1rem 3rem; }
  .flags-workspace { padding: 0 1rem 3rem; }
  .flags-headline { padding: 1.4rem 0 1rem; }
  .flags-refresh { margin-inline-start: 0; }
  .flag-head { flex-direction: column; align-items: stretch; }
  /* An organization card's controls stack under its name on a phone, each the full width and a
     finger tall; the deleted line sits above Restore rather than beside it. */
  .org-actions { flex-direction: column; align-items: stretch; }
  .org-actions button { width: 100%; min-height: 2.75rem; }
  .org-deleted { text-align: center; }
  .flag-org { align-items: stretch; }
  .flag-org .flag-switch, .flag-note { margin-inline-start: 0; max-width: none; flex-basis: 100%; }
  .flag-switch button { min-height: 2.5rem; flex: 1 1 0; }
  .analytics-headline { padding: 1.4rem 0 1.1rem; gap: 1.1rem; }
  .analytics-hero-figure { font-size: 2.85rem; }
  .analytics-hero-foot { max-width: none; }
  .analytics-table > div { max-height: 12rem; }
  .analytics-window { margin-inline-start: 0; }
  .analytics-window button { min-height: 2.75rem; min-width: 3.25rem; }
  .analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-tile-value { font-size: 1.55rem; }
  .analytics-grid { grid-template-columns: minmax(0, 1fr); }
  /* A route template is the one string here that will not wrap, so it gets the full row on a
     phone rather than squeezing the chip that says what is wrong with it. */
  .analytics-listing { flex-wrap: wrap; }
  .analytics-listing-copy { flex-basis: 100%; }
  .analytics-listing .analytics-chip { margin-inline-start: 0; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .analytics-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

/* ── Waste Logs on a phone ───────────────────────────────────────────────────────────────────
   The module is built for a wall tablet, where a 620px sheet floating on a backdrop is the right
   shape. A phone is not that. The amount sheet alone measures 838px of readout, keypad and eleven
   unit chips -- taller than the glass on every phone we support -- so it filled the screen edge to
   edge with Done below the fold and no backdrop left to tap: a keypad you could open and not get
   out of. Each sheet is a full-screen one here, scrolling its own body with the action row held at
   the bottom, clear of the home indicator. */
@media (max-width:760px) {
  .waste-dialog { width:100vw; max-width:none; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .waste-dialog > h2 { flex:0 0 auto; padding:calc(14px + var(--mobile-safe-top)) calc(18px + var(--mobile-safe-right)) 0 calc(18px + var(--mobile-safe-left)); }
  .waste-dialog > div:not(.waste-dialog-actions) { padding:0 calc(18px + var(--mobile-safe-right)) 18px calc(18px + var(--mobile-safe-left)); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  /* margin-top:auto, as the admin sheets do it: a short sheet -- picking a station is three
     choices -- would otherwise leave its action row stranded mid-screen with a field of blank
     paper under it. The row belongs at the bottom edge, under the thumb, whatever the sheet holds. */
  .waste-dialog-actions { margin-top:auto; padding:12px calc(18px + var(--mobile-safe-right)) calc(12px + var(--mobile-safe-bottom)) calc(18px + var(--mobile-safe-left)); }
  /* One thumb, one row: the action that closes the sheet spans it rather than sitting in the far
     corner, and a pair splits it evenly, the way the admin sheets already do. */
  .waste-dialog-actions button { flex:1 1 0; min-height:52px; }
}

/* ── From the platform review of 26 September 2026 ────────────────────────────────────────────
   The workspace shell on a phone, an iPad and a touch laptop, one comment per finding. */

@media (max-width:760px) {
  /* iOS zooms the page into any field under 16px. The rule at the top of this file is one class
     weaker than every styled field and has lost to a new one four times; these are the fields
     still under it. A field styled after this goes on this line. */
  .recipe-picker,.alias-field input,.branding-column > label input,.quickbooks-search input,.org-create input,.org-address input,.flag-note { font-size:16px; }
}

@media (hover:none) {
  /* Deleting a saved analysis was revealed by hover, which a finger cannot do: on an iPad or a
     phone a tap on the row opens it and closes the drawer. On touch the control is always drawn,
     in a column a thumb can hit. */
  .chat-list-row { grid-template-columns:minmax(0,1fr) 44px; }
  .delete-chat { width:44px; height:44px; opacity:1; }
}

@media (max-width:1199px),(hover:none) and (pointer:coarse) {
  /* The touch band was a width. A 12.9" iPad in landscape is 1366 CSS pixels wide and a touch
     laptop wider, and both were given the desktop's 40px menu and collapse buttons, its 26px
     dialog close glyph and its 32px row actions. A coarse pointer with no hover is a finger
     whatever the width, so the five touch blocks above now answer to it as well, and the
     controls sized only in the phone or tablet band are sized here. */
  .menu-button,.sidebar-collapse { width:44px; height:44px; }
  .admin-dialog .incident-close { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; }
  .admin-row-action { min-height:var(--control-height); }
  .admin-tabs button { min-height:46px; }
  .admin-main .admin-primary { min-height:var(--control-height); }
  .admin-link { min-height:44px; display:inline-flex; align-items:center; }
}

@media (max-width:1199px),(hover:none) and (pointer:coarse) {
  /* Controls under 44px that had no touch rule anywhere: the Store, Permission set and Status
     filter options (31px), the segmented view control (26px), the store chips (31px), the
     discount-kind tabs (21px), the digest button (36px), and on the sign-in card the Show/Hide
     button (26px) and the text buttons (24px) that are the only way to recovery and to an
     invitation on a phone. */
  .pill-select-option { min-height:44px; }
  .people-views button { min-height:44px; }
  .store-chip { min-height:44px; }
  .kind-tab { min-height:44px; }
  .digest-send { min-height:44px; }
  .password-field button { min-height:44px; min-width:44px; }
  .auth-text-button { min-height:44px; }
}

@media (max-width:760px) {
  /* Two regressions in this file's own phone block: the drawer's Close had come down to 40px and
     Sign out to 42. */
  .sidebar-close { min-height:44px; }
  .account-card>#sign-out { min-height:44px; }
}

@media (max-width:1199px),(hover:none) and (pointer:coarse) {
  /* The drawer's rows had their finger height only on a phone: on an iPad between 761 and 899px
     the same drawer opened with 33px analysis rows and a 42px New analysis. The rail's 44px
     circles at 900 and up are unchanged by a minimum they already meet. */
  .new-chat,.account-profile,.chat-list-row .chat-link,.chat-list-row > button { min-height:44px; }
}

@media (min-width:761px) and (max-height:500px) {
  /* A landscape iPhone is wider than the phone band and shorter than anything else, and with
     viewport-fit=cover its left edge is the Dynamic Island. The phone band carries that inset in
     --mobile-safe-left; the bar and the four workspaces that lacked it (Admin, Integrations,
     Profile, the home screen) sat their first column under it. Loss Prevention already had its own. */
  .topbar { padding-left:max(30px,env(safe-area-inset-left,0px)); padding-right:max(30px,env(safe-area-inset-right,0px)); }
  .home-header { padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px)); }
  .admin-workspace,.integrations-workspace { padding-left:max(18px,env(safe-area-inset-left,0px)); padding-right:max(18px,env(safe-area-inset-right,0px)); }
  .home-content,.profile-content { width:auto; margin-left:max(24px,env(safe-area-inset-left,0px)); margin-right:max(24px,env(safe-area-inset-right,0px)); }
}

@media (max-width:560px) {
  /* The admin sheets, and the MFA and MFA-setup sheets that share their class, are 100dvh with the
     form as the scroller, and their Close was absolute inside it, so it scrolled away with the
     heading; the incident and connection sheets already keep theirs fixed. Fixed for these too,
     drawn the way the connection sheet's is so it reads over whatever scrolls under it. */
  .admin-dialog .incident-close { position:fixed; z-index:4; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--muted) 6%, var(--line)); border-radius:50%; background:color-mix(in srgb, var(--cream) 87%, var(--paper)); }
}

@media (max-width:760px) {
  /* The bar's subtitle truncates with an ellipsis, but its parent div had no minimum width, so
     the div took the subtitle's full length instead: Reviews ran past the right edge and the Admin
     subtitle ran under + Invite user. Overridden here rather than edited above, so that block's
     own history stands. */
  .topbar-identity > div { min-width:0; }
  /* The smallest type on a phone comes up a step: the drawer's account card, its captions and the
     Admin counters were set at 8 and 9px, under any platform caption floor. */
  .admin-metrics span { font-size:9px; }
  .admin-metrics small { font-size:10px; }
  .agent-label,.data-card p,.privacy { font-size:10px; }
  .account-card strong { font-size:11px; }
  .account-card small { font-size:10px; }
}