/* Comfortable type and touch targets, including Safari and Home Screen mode. */
:root { --reading-scale: 1; }
:root[data-text=large] { --reading-scale: 1.125; }
.mobile-nav-more { display: none; }

.text-toggle[aria-pressed=true] { outline: 2px solid var(--primary); outline-offset: 2px; }
.mobile-menu-grid { display: grid; gap: 12px; }

.mobile-menu-grid svg { width: 25px; height: 25px; flex: none; }

.mobile-menu-grid button[aria-current=page] { border: 2px solid var(--primary); }
@media (min-width: 951px) {  }

@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1rem); }
}

@media (max-width: 950px) {
  html { font-size: calc(16px * var(--reading-scale)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.55; }
  body:has(dialog[open]) { overflow: hidden; }
  h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.04em; }
  h2, .panel-head h2 { font-size: 1.25rem; line-height: 1.35; }
  h3 { font-size: 1.0625rem; line-height: 1.4; }
  p, .heading p, .panel p, .reset-settings p, .stage-flow { font-size: 1rem; }
  small, .hint, .muted, .event, .event small, .empty, .result-count, .payment, .payment small, .item-title small, .pair, .pending-list, .board-help, .queue-blockers, .search-query { font-size: .875rem; line-height: 1.6; }
  .eyebrow { font-size: .75rem; letter-spacing: .1em; }
  
  button { -webkit-tap-highlight-color: transparent; }
  button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .item-row input, .item-row select, .order-quantity-row input, .global-search input,
  #reset-form input:not([type=checkbox]):not([type=radio]) {
    min-width: 0; max-width: 100%; min-height: 50px; font-size: 1rem;
    padding: 13px 12px; border-radius: 12px; scroll-margin: 90px 0;
  }
  input[type=date] { min-inline-size: 0; width: 100%; appearance: none; -webkit-appearance: none; }
  input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
  textarea { min-height: 120px; }
  label, .item-row label, .order-quantity-row label { font-size: .9375rem; line-height: 1.5; }
  
  
  
  
  
  .workspace { margin-left: 0; min-width: 0; min-height: 100dvh; }
  .main { padding: 24px max(16px, env(safe-area-inset-right)) calc(108px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .main *, .modal-body *, .confirmation-body * { min-width: 0; }
  .main, .modal-body, .confirmation-body { overflow-wrap: anywhere; }
  .sidebar {
    inset: auto 0 0; width: 100%; height: auto; z-index: 20; flex-direction: row;
    padding: 7px max(4px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    border: 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 30px #0c214714;
  }
  .sidebar>.brand, .sidebar>.subtitle, .sidebar-bottom { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 3px; }
  .sidebar nav button { display:none; }
  .sidebar nav button[data-page=dashboard], .sidebar nav button[data-page=orders], .sidebar nav button[data-page=production], .sidebar nav button[data-page=finance], .sidebar nav button.mobile-nav-more { display:flex;flex-direction:column;align-items:center;justify-content:center; }
  
  
  
  [data-keyboard=true] .sidebar { visibility: hidden; pointer-events: none; }
  .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; height: auto; gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  }
  .topbar .crumb, .connection-label { display: none; }
  .mobile-brand { display: block; grid-column: 1; grid-row: 1; font-size: .9375rem; letter-spacing: .02em; }
  .topbar-actions { display: contents; }
  .topbar-actions .online { display: flex; grid-column: 2; grid-row: 1; gap: 4px; }
  .topbar-actions #refresh-data { display: block; }
  
  .topbar .appearance-controls { grid-column: 1/-1; grid-row: 2; justify-content: space-between; gap: 8px; }
  
  
  
  .global-search { display: flex; grid-column: 1/-1; grid-row: 3; width: 100%; max-width: none; min-width: 0; }
  .global-search input { padding-left: 38px; padding-right: 12px; }
  .global-search kbd { display: none; }
  .heading, .detail-top { flex-wrap: wrap; gap: 16px; align-items: flex-start; }
  .heading h1, .detail-top h1 { font-size: 1.75rem; }
  
  .detail-top>div { max-width: 100%; }
  .detail-top .muted { display: block; }
  .panel { padding: 18px; border-radius: 16px; }
  .panel-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .grid, .cards, .kanban, .lanes, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .stack { gap: 18px; }
  .toolbar { gap: 12px; }
  
  
  .metrics { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .metric { padding: 20px; }
  .metric .label, .metric small { font-size: .875rem; }
  .metric .number { font-size: 2rem; margin: 10px 0; }
  
  
  
  
  
  
  .hero.compact-hero { padding: 22px; }
  .compact-hero h2 { font-size: 1.375rem; }
  .compact-hero p { font-size: 1rem; }
  .hero-emblem { display: none; }
  .production-pulse { grid-template-columns: minmax(0, 1fr); }
  .pulse-intro { padding: 22px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .pulse-intro .eyebrow { font-size: .75rem; }
  .pulse-intro h2 { font-size: 1.25rem; }
  .pulse-intro p { font-size: .875rem; }
  .production-dial { position: relative; inset: auto; width: 120px; height: 120px; margin: 20px auto 0; }
  .production-dial small { font-size: .75rem; }
  .production-dial strong { font-size: 1.875rem; }
  .pulse-order-head { flex-wrap: wrap; }
  .pulse-order-head strong { font-size: 1.0625rem; }
  .pulse-order-head small, .pulse-order-foot { font-size: .875rem; }
  .pulse-order-foot { flex-wrap: wrap; }
  .progress { height: 12px; }
  .badge { font-size: .8125rem; line-height: 1.4; white-space: normal; padding: 7px 10px; }
  .next-task { padding: 20px; }
  .next-task strong { font-size: 1rem; }
  .next-task .eyebrow { font-size: .75rem; }
  
  
  
  
  .recap-values { grid-template-columns: 1fr; }
  .recap-values>div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .recap-values small { font-size: .9375rem; }
  .recap-values strong { font-size: 1.5rem; margin: 0; }
  .recap-items>div { flex-wrap: wrap; font-size: 1rem; gap: 10px; }
  .recap-items>div>strong { flex: 1 1 100%; }
  .recap-items>div>span { font-size: .875rem; }
  
  
  
  .table-wrap:has(.mobile-card-table) { overflow: visible; }
  .mobile-card-table, .mobile-card-table tbody { display: block; width: 100%; white-space: normal; }
  .mobile-card-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .mobile-card-table tbody tr { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
  .mobile-card-table tbody tr:last-child { margin-bottom: 0; }
  .mobile-card-table tbody tr:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
  .mobile-card-table td { display: block; padding: 10px 0; font-size: 1rem; border: 0; white-space: normal; }
  .mobile-card-table td+td { border-top: 1px solid var(--line); }
  .mobile-card-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .8125rem; font-weight: 600; margin-bottom: 6px; }
  .mobile-card-table td small { font-size: .875rem; }
  
  .mobile-card-table td>strong { font-size: 1.0625rem; }
  
  
  
  
  
  
  .board-stage-heading { flex-wrap: wrap; }
  .board-stage-heading h3 { font-size: 1.25rem; }
  .board-stage-heading small { font-size: .875rem; }
  
  
  
  
  .order-item-tiles { grid-template-columns: minmax(0, 1fr); }
  
  
  .tile-print-info small, .tile-waiting-text, .tile-bopp { font-size: .875rem; }
  
  .tile-print-info .pair { font-size: .9375rem; flex-wrap: wrap; }
  .tile-print-info .pair strong { font-size: 1.25rem; }
  
  
  .batch-table, .batch-table tbody { display: block; }
  .batch-table thead { display: none; }
  .batch-table tr { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 16px; }
  .batch-table td { display: block; grid-column: 2; padding: 0; border: 0; font-size: 1rem; }
  
  
  
  
  .batch-table td>small, .queue-print>span, .queue-print>small, .batch-toolbar small { font-size: .875rem; }
  
  
  .queue-print>strong { font-size: 1.5rem; }
  .batch-toolbar { gap: 12px; }
  .batch-toolbar .check, .batch-toolbar>span { font-size: .9375rem; }
  
  .batch-toolbar .check { align-items: center; flex-wrap: wrap; }
  .production-item .item-title { flex-wrap: wrap; gap: 10px; }
  .print-quantity>strong { font-size: 2.25rem; }
  .print-step .print-missing, .print-quantity>span { font-size: 1rem; }
  .print-step .pair { flex-direction: column; align-items: stretch; }
  .receipt-widget { padding: 16px; }
  .receipt-widget>p { font-size: .9375rem; }
  
  
  
  
  .receipt-fields input[readonly] { font-size: 1.5rem; }
  .confirmation-body { padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); }
  .confirmation-body h2, .warning-confirmation h2 { font-size: 1.625rem; }
  .confirmation-body>p, .confirmation-totals, .confirmation-body .pending-list { font-size: 1rem; }
  
  
  
  .confirmation-body .eyebrow { font-size: .75rem; }
  .shipping-debt-amount { font-size: 2.5rem; }
  dialog {
    position: fixed; inset: var(--visible-top, 0px) 0 auto; width: 100%; max-width: 100%;
    height: 100dvh; height: var(--visible-height, 100dvh); max-height: 100dvh;
    max-height: var(--visible-height, 100dvh); margin: 0; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    scroll-padding-top: 90px; border: 0;
  }
  .modal-head { gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  .modal-head h2 { font-size: 1.25rem; line-height: 1.4; }
  .modal-body { padding: 22px max(18px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  
  .form-grid { gap: 20px; }
  .order-stages li { font-size: .8125rem; align-items: flex-start; flex-direction: column; }
  .order-stages li span { width: 28px; height: 28px; font-size: .875rem; }
  .order-question { font-size: 1.375rem; }
  .order-help { font-size: 1rem; }
  
  
  
  
  
  
  
  
  .selection-toolbar { flex-wrap: wrap; gap: 12px; }
  .selection-toolbar .ghost { font-size: .9375rem; }
  .order-quantity-row { grid-template-columns: minmax(0,1fr) 26px; padding: 16px; gap: 18px; }
  .quantity-item-name { grid-column: 1; }
  .quantity-item-name strong { font-size: 1.125rem; }
  .quantity-item-name small { font-size: .875rem; }
  .order-quantity-row>[data-remove-item] { grid-column: 2; grid-row: 1; }
  .order-quantity-row label { grid-column: 1/-1; grid-row: auto; }
  .custom-product, .custom-product summary { font-size: .9375rem; }
  
  
  .login-page { grid-template-columns: 1fr; min-height: 100dvh; }
  .login-story { padding: max(24px, env(safe-area-inset-top)) 24px 24px; min-height: 0; gap: 16px; }
  .login-story h1 { font-size: 2rem; margin: 15px 0 0; }
  .login-story p, .login-story footer, .login-story .eyebrow { display: none; }
  .login-form { flex-direction: column; padding: 24px 24px max(36px, env(safe-area-inset-bottom)); }
  .login-form form { margin-top: 0; max-width: 440px; }
  .login-form h2 { font-size: 1.75rem; }
  .login-form .muted { font-size: 1rem; }
  .login-appearance { position: static; align-self: stretch; margin-bottom: 28px; }
  .login-appearance .appearance-controls { gap: 8px; }
  .collection-head, .backup-row { flex-direction: column; align-items: flex-start; }
  .collection-grand-total { text-align: left; }
  .collection-head p, .collection-company p, .collection-alert>small,
  .collection-order-links a, .reset-scopes small, .reset-impact, .reset-ack,
  .reset-backups>p, .backup-row small { font-size: .9375rem; }
  .collection-head h2 { font-size: 1.5rem; }
  
  #toast, #saving-status { bottom: calc(100px + env(safe-area-inset-bottom)); font-size: .9375rem; max-width: calc(100% - 32px); }
  #saving-status { right: 16px; }
}

@media (max-width: 370px) {
  .mobile-brand { font-size: .8125rem; }
  
  
}

@media (hover: none) {
  button:hover { filter: none; }
  
}

/* Buttons use the original component rules; only the mobile layout is retained. */
.text-toggle { min-width: 0; min-height: 0; width: 32px; height: 32px; padding: 0; font-size: 14px; }
@media (max-width: 950px) {
  button { font-size: 16px; line-height: normal; }
  .batch-choice { display: block; width: auto; min-height: 0; margin: 0; }
}
.mobile-menu-grid button { display: flex; align-items: center; gap: 12px; text-align: left; }
@media (min-width: 951px) { .text-toggle { display: none; } }