/* ═══════════════════════════════════════════════════════════════════════════
   DEVICE LAYOUTS — phone (Phase 5) and tablet (Phase 6)
   ═══════════════════════════════════════════════════════════════════════════
   Loaded after the app's own styles. Nothing here applies to a laptop/desktop:
   • phone:  @media (max-width: 767px) only
   • tablet: body.layout-tablet only — set by js/core/layout.js on an 11" touch
             screen (≥ 1024 px wide with a touch screen, or inside the Android app),
             or when "This device → Layout" is set to Tablet. A laptop with a
             mouse keeps its layout whatever its width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A TOUCH SCREEN IN THE LAPTOP LAYOUT (an iPad upright, 768–1023 px: TASKS-SPRINT-9 M66) ──
   The layout stays the laptop's (changing it waits for the owner), but a finger gets targets it can hit
   on the checkout's cart, the repair form's status steps and the stock take's count boxes. */
@media (pointer: coarse) {
  .ci-note-toggle { min-width: 44px; min-height: 44px; }
  .ci-var-price-input { min-height: 40px; }
  #pos-share-btn { min-height: 44px; }
  #cash-given-input { min-height: 40px; }
  .rs-step { min-height: 44px; }
  /* the stock take's count boxes and its Save counts (a phone or a tablet counting on the shelf: D13) */
  .mb-cnt { min-height: 40px; }
  .mb-cnt-bar .cv-btn { min-height: 44px; }
  /* Repairs → Pricing: a part in frame colours (an OLED screen in Black / White) has a price line per colour,
     each tapped to edit — 16 px high on the made-up shop's audit (M69) */
  .rp-color-cell.mx2-pp-line { min-height: 32px; display: flex; align-items: center; justify-content: center; }
  /* MX3d's colour slots that a tap acts on (a job's dots): a finger's height on touch; with a mouse they stay tiny */
  .mx-slot.mx-dot { min-height: 32px; }
}

/* ── PHONE: one-handed checkout ──────────────────────────────────────────── */
#pos-cart-bar, #mobile-nav-backdrop, #cart-sheet-backdrop { display: none; }

@media (max-width: 767px) {
  /* header: only what matters on a small screen */
  .topbar-right > button[onclick^="launchDiscreteWindow"], .topbar-right .date-time .date, .logo-sub { display: none !important; }
  .topbar-logo .logo-text { font-size: 14px; }
  /* the backup light (js/settings/backup-light.js, M63): there on the phone too, never wider than it can be */
  #backup-light { max-width: 42vw; min-height: 44px; overflow: hidden; text-overflow: ellipsis; display: block !important; line-height: 34px; padding: 4px 8px !important; }

  /* the menu slides over the page instead of a permanent rail */
  body.ui-v2 .sidebar-v2 { position: fixed; top: 0; left: 0; bottom: 0; z-index: 600; width: 270px !important; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(0,0,0,.18); }
  body.ui-v2.mobile-nav-open .sidebar-v2 { transform: none; }
  body.ui-v2 .sidebar-v2 .sv2-label { display: inline !important; }
  body.ui-v2 .sidebar-v2 .sv2-section { display: block !important; }
  body.ui-v2 .sidebar-v2 .sv2-item { justify-content: flex-start !important; margin: 1px 8px !important; padding: 12px 12px !important; min-height: 48px; }
  body.mobile-nav-open #mobile-nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 590; }
  #sv2-collapse-toggle { width: 44px !important; height: 44px !important; }

  /* checkout: the products take the screen, the cart waits at the bottom */
  #page-pos.active { flex-direction: column; }
  #page-pos .pos-left { padding: 8px 10px calc(92px + env(safe-area-inset-bottom)); gap: 8px; }
  .pos-pages-bar { flex-wrap: nowrap !important; overflow-x: auto; max-height: none !important; }
  .pos-toolbar { flex-wrap: wrap; gap: 8px !important; position: sticky; top: 0; z-index: 5; background: var(--bg); padding-bottom: 4px; }
  .pos-toolbar .search-input-wrap { order: 1; flex: 1 1 100% !important; }
  .pos-toolbar .search-input-wrap input { min-height: 48px; font-size: 16px !important; border-radius: 12px; }   /* 16px: no zoom-in on focus */
  .pos-toolbar .pos-manage-btn { display: none; }
  .pos-toolbar .cat-filter { order: 2; flex-wrap: nowrap !important; overflow-x: auto !important; flex-basis: 100%; padding-bottom: 2px; }
  .pos-toolbar .cat-btn, .cv-mode-btn { min-height: 42px; padding: 8px 14px !important; font-size: 14px !important; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 8px !important; }
  .product-card { min-height: 104px; padding: 10px; }
  .product-card:active { transform: scale(.97); background: var(--accent-light); }
  .product-name { font-size: 13px; }
  .product-card-img, .product-card-img-placeholder { max-height: 54px; }

  /* the cart is a sheet from the bottom */
  #page-pos .pos-right { position: fixed; left: 0; right: 0; bottom: 0; width: 100% !important; max-height: 88dvh; height: 88dvh; z-index: 520;
    border-left: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.2); transform: translateY(105%); transition: transform .22s ease; }
  body.cart-sheet-open #page-pos .pos-right { transform: none; }
  body.cart-sheet-open #cart-sheet-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 510; }
  #page-pos .cart-header { padding: 12px 16px; }
  #page-pos .cart-header::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 3px; background: var(--border2); }
  #page-pos .cart-header { position: relative; }
  .cart-sheet-close { display: inline-flex !important; }
  .pm-btn, .pm-btn-square { min-height: 50px; font-size: 14px !important; border-radius: 12px !important; }
  .btn-checkout { min-height: 58px; font-size: 18px !important; border-radius: 14px !important; }
  .cart-footer { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important; }
  #discount-amount { min-height: 36px; font-size: 16px !important; width: 70px !important; }

  /* the bar under the thumb: what's in the cart, and Charge */
  body.pos-active #pos-cart-bar { display: flex; position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 500; gap: 8px; }
  body.cart-sheet-open #pos-cart-bar { display: none; }
  #pos-cart-bar button { min-height: 60px; border-radius: 16px; border: none; font-weight: 800; font-family: var(--font-ui, 'DM Sans', sans-serif); cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
  #pos-cart-bar .pcb-cart { flex: 1; background: var(--surface); color: var(--text); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 15px; }
  #pos-cart-bar .pcb-count { background: var(--accent); color: #fff; border-radius: 12px; padding: 2px 9px; font-size: 13px; margin-right: 8px; }
  #pos-cart-bar .pcb-pay { flex: 0 0 42%; background: var(--accent); color: #fff; font-size: 17px; }
  #pos-cart-bar .pcb-pay:disabled { opacity: .45; }
  #pos-cart-bar.bump .pcb-cart { animation: pcbBump .35s ease; }
  @keyframes pcbBump { 40% { transform: scale(1.05); } }

  /* dialogs fill the width on a phone */
  .modal, .modal-content, .cv-pop { max-width: 100vw !important; }
}
.cart-sheet-close { display: none; margin-left: 8px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 18px; cursor: pointer; }

/* ── TABLET (Samsung Galaxy Tab A11+, 11", landscape): body.layout-tablet only ──
   Checkout is master–detail: the cart and payment on the LEFT (30 %), products
   and search on the RIGHT (70 %). Payment + Charge sit at the bottom-left,
   under the left thumb; product cards (tap = add to cart) under the right.
   Everything a finger touches is ≥ 44 px; table rows and pagination are
   larger. None of this reaches a phone (≤ 767 px) or a laptop with a mouse. */
body.layout-tablet { --tab-tap: 48px; }
body.layout-tablet #page-pos.active { flex-direction: row-reverse; }
body.layout-tablet #page-pos .pos-right { width: 30% !important; min-width: 330px; max-width: 460px; border-left: 0; border-right: 1px solid var(--border); }
body.layout-tablet #page-pos .pos-left { padding: 14px 16px; gap: 10px; }

/* products + search (right, 70 %) */
body.layout-tablet .pos-toolbar { flex-wrap: wrap; gap: 10px !important; }
body.layout-tablet .pos-toolbar .search-input-wrap { order: -1; flex: 1 1 60% !important; }
body.layout-tablet .pos-toolbar .search-input-wrap input { min-height: 52px; font-size: 17px !important; border-radius: 14px; padding-left: 42px; }
body.layout-tablet .pos-toolbar .search-input-wrap .search-icon { font-size: 18px; left: 14px; }
body.layout-tablet .pos-toolbar .cat-filter { order: 1; flex-basis: 100%; gap: 8px; }
body.layout-tablet .pos-manage-btn { order: 0; flex: 0 0 auto; min-height: 52px; padding: 0 18px; font-size: 15px; border-radius: 14px; }
body.layout-tablet .cat-btn, body.layout-tablet .cv-mode-btn, body.layout-tablet .pos-page-tab { min-height: var(--tab-tap); padding: 10px 18px !important; font-size: 15px !important; border-radius: 24px; }
body.layout-tablet .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 12px !important; }
body.layout-tablet .product-card { min-height: 128px; padding: 12px; border-radius: 14px; }
body.layout-tablet .product-card:active { transform: scale(.97); background: var(--accent-light); }
body.layout-tablet .product-name { font-size: 15px; }
/* the cart's price box at the tablet's 15 px: "1299.00" was cut off (64 px for 71 px of text, found when an iPad
   upright got this layout, M67); eight digits' width and its padding */
body.layout-tablet .ci-var-price-input { width: calc(8ch + 14px); }
body.layout-tablet .product-price { font-size: 15px; }
body.layout-tablet .cv-pop button, body.layout-tablet .cv-pop .cv-opt { min-height: var(--tab-tap); font-size: 15px; }

/* cart + payment (left, 30 %) */
body.layout-tablet #page-pos .cart-header { padding: 14px 16px; }
body.layout-tablet #page-pos .cart-header h3 { font-size: 17px; }
body.layout-tablet #pos-share-btn, body.layout-tablet #ps-open-tickets-btn { min-height: 40px; padding: 6px 12px !important; font-size: 13px !important; }
body.layout-tablet .cart-items { padding: 10px 12px; gap: 8px; }
body.layout-tablet .cart-item { padding: 10px 12px; border-radius: 12px; }
body.layout-tablet .ci-name { font-size: 15px; }
body.layout-tablet .ci-total { font-size: 15px; }
body.layout-tablet .ci-remove { width: 40px; height: 40px; font-size: 18px; }
body.layout-tablet .ci-row2 { margin-top: 8px; }
body.layout-tablet .ci-qty-btn { width: 40px !important; height: 40px !important; font-size: 20px !important; }
body.layout-tablet .cart-footer { padding: 12px 14px 14px !important; }
body.layout-tablet .disc-type-btn, body.layout-tablet .btn-clear-disc { min-width: 40px; min-height: 40px; font-size: 14px; }
body.layout-tablet #discount-amount { min-height: 40px; font-size: 16px !important; width: 80px !important; }
body.layout-tablet #grand-total { font-size: 26px !important; }
body.layout-tablet .payment-methods { flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 8px !important; }
body.layout-tablet .pm-btn, body.layout-tablet .pm-btn-square { flex: 1 1 40%; min-height: 56px; font-size: 16px !important; border-radius: 12px !important; }
body.layout-tablet .pm-btn-square { flex-basis: 100%; }   /* Square on its own row, the widest target */
body.layout-tablet #split-pay-cb { width: 22px !important; height: 22px !important; }
body.layout-tablet .btn-checkout { min-height: 66px; font-size: 21px !important; border-radius: 14px !important; }

/* everywhere: rows, pagination, controls */
body.layout-tablet td { padding: 14px 16px; font-size: 14px; }
body.layout-tablet th { padding: 12px 16px; font-size: 12px; }
body.layout-tablet .rpt-table td, body.layout-tablet .dc-table td { padding: 12px 12px; }
body.layout-tablet .pagination { gap: 8px; }
body.layout-tablet .pg-btn { min-width: var(--tab-tap); min-height: var(--tab-tap); font-size: 15px; border-radius: 12px; }
body.layout-tablet .per-page-wrap select { min-height: 44px; font-size: 15px; }
body.layout-tablet .btn, body.layout-tablet .btn-sm { min-height: 44px; }
body.layout-tablet .form-input, body.layout-tablet select.form-input, body.layout-tablet .form-select { min-height: 46px; font-size: 16px; }
body.layout-tablet input[type=checkbox], body.layout-tablet input[type=radio] { width: 22px; height: 22px; }
body.layout-tablet .settings-nav-item { min-height: var(--tab-tap); font-size: 15px; }
body.layout-tablet.ui-v2 .sv2-item { min-height: var(--tab-tap); }
body.layout-tablet .modal-close, body.layout-tablet .close-btn { min-width: 44px; min-height: 44px; }

/* ── REPAIR BOARD (Repairs → 🗂 Board; js/repairs/repair-board.js) — every device ── */
.rb-board { flex: 1; min-height: 0; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.rb-col { flex: 0 0 250px; display: flex; flex-direction: column; min-height: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; transition: background .12s, opacity .12s, box-shadow .12s; }
.rb-col-thin { flex-basis: 150px; }
.rb-col-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-weight: 800; font-size: 13px; border-top: 4px solid var(--border); border-radius: 14px 14px 0 0; }
.rb-count { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.rb-col-body { flex: 1; overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.rb-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 9px 10px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-x pan-y; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.rb-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.rb-card[data-stage="collected"] { cursor: pointer; opacity: .8; }
.rb-card-top { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--text3); font-family: var(--font-num, 'DM Mono', monospace); }
.rb-tag { font-family: var(--font-ui, 'DM Sans', sans-serif); font-weight: 800; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--accent-light); color: var(--accent); }
.rb-urgent { background: #fee2e2; color: #b91c1c; text-transform: capitalize; }
.rb-name { font-weight: 800; font-size: 14px; margin-top: 2px; }
.rb-dev { font-size: 12px; color: var(--text2); }
.rb-prob { font-size: 11px; color: var(--text3); margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rb-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--text3); }
.rb-next { border: 1px solid var(--accent); background: var(--accent-light); color: var(--accent); border-radius: 8px; font-size: 11px; font-weight: 800; padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.rb-empty, .rb-drop-note { text-align: center; color: var(--text3); font-size: 12px; padding: 16px 6px; }
.rb-dragging { opacity: .35; }
.rb-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: rotate(2deg) scale(1.03); box-shadow: 0 14px 34px rgba(0,0,0,.25); cursor: grabbing; }
body.rb-drag-active, body.rb-drag-active * { cursor: grabbing !important; }
.rb-col.rb-ok { background: #ecfdf5; border-color: #86efac; }
.rb-col.rb-no { opacity: .45; }
.rb-col.rb-ok.rb-over { box-shadow: 0 0 0 3px #22c55e inset; }
.rb-col.rb-no.rb-over { box-shadow: 0 0 0 3px #ef4444 inset; }
body.layout-tablet .rb-col { flex-basis: 280px; }
body.layout-tablet .rb-card { padding: 12px 12px; }
body.layout-tablet .rb-name { font-size: 16px; }
body.layout-tablet .rb-dev { font-size: 14px; }
body.layout-tablet .rb-next { min-height: 40px; padding: 6px 12px; font-size: 13px; }
/* a product's name in the flat lists (accessory tabs, Quick Stock) opens its card: a finger-sized
   row on the tablet and the phone (TASKS-NIGHT2 N4); the laptop keeps the tight list */
body.layout-tablet #rb-search { min-height: 48px; }
@media (max-width: 767px) { .rb-col { flex-basis: 78vw; } }

/* ── STOCK TAKE: scan to count (camera inside the page) ── */
.st-scan-toggle { padding: 6px 12px; font-size: 12px; font-weight: 800; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent); cursor: pointer; }
.st-scan-toggle.active { background: var(--accent); color: #fff; }
/* stock take: find rows by typing (js/inventory/stock-take-find.js) */
.st-find { margin-bottom: 12px; }
.st-find-head { display: flex; gap: 6px; align-items: center; }
.st-find-head input { flex: 1; min-width: 0; }
.st-find-list { max-height: 360px; overflow-y: auto; }
.st-find-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.st-find-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-find-name span { margin-left: 6px; color: var(--text2); }
.st-find-sys { font-size: 11px; color: var(--text3); white-space: nowrap; }
.st-find-row input { width: 64px; padding: 5px 6px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; }
.st-find-row button { padding: 5px 10px; font-size: 12px; font-weight: 700; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent); cursor: pointer; }
.st-find-empty { font-size: 12px; color: var(--text3); padding: 6px 4px; }
body.layout-tablet .st-find-row input, body.layout-tablet .st-find-row button { min-height: 44px; font-size: 15px; }
.st-scan-wrap { display: flex; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.st-scan-cam { position: relative; flex: 0 0 360px; max-width: 100%; aspect-ratio: 4 / 3; background: #0f172a; border-radius: 12px; overflow: hidden; }
.st-scan-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-scan-line { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 8px #ef4444; pointer-events: none; }
.st-scan-cam-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #e2e8f0; font-size: 13px; line-height: 1.4; background: rgba(15,23,42,.72); }
.st-scan-cam-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 8px; }
.st-scan-cam-bar button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.92); font-weight: 800; font-size: 13px; cursor: pointer; }
.st-scan-cam-bar #st-scan-torch { flex: 0 0 48px; }
.st-scan-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.st-scan-head { display: flex; gap: 8px; flex-wrap: wrap; }
.st-scan-head input { flex: 1 1 180px; }
.st-scan-save { padding: 8px 14px; border: 0; border-radius: 10px; background: #16a34a; color: #fff; font-weight: 800; cursor: pointer; }
.st-scan-save:disabled { opacity: .45; cursor: default; }
.st-scan-clear { padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-weight: 700; cursor: pointer; }
.st-scan-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.st-scan-sum { font-size: 12px; color: var(--text3); font-weight: 700; }
.st-scan-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); }
.st-scan-row.st-scan-flash { animation: stScanFlash .6s ease; }
@keyframes stScanFlash { 0% { background: #bbf7d0; } 100% { background: var(--surface2); } }
.st-scan-name { flex: 1; min-width: 0; font-size: 13px; }
.st-scan-name span { display: block; font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-scan-sys { font-size: 11px; color: var(--text3); white-space: nowrap; }
.st-scan-sys em { font-style: normal; font-weight: 800; } .st-scan-sys em.up { color: #16a34a; } .st-scan-sys em.down { color: #dc2626; }
.st-scan-row button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 16px; font-weight: 800; cursor: pointer; }
.st-scan-row input { width: 56px; height: 34px; text-align: center; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-weight: 800; }
.st-scan-row .st-scan-x { border: 0; background: none; color: var(--text3); }
.st-scan-empty { color: var(--text3); font-size: 13px; padding: 16px 0; text-align: center; }
.st-scan-pickbox { border: 1px solid var(--accent); background: var(--accent-light); border-radius: 10px; padding: 8px; font-size: 13px; }
.st-scan-pickrows { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; max-height: 150px; overflow-y: auto; }
.st-scan-pickrows button { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.st-scan-unk { font-size: 12px; color: #b91c1c; }
body.layout-tablet .st-scan-cam { flex-basis: 440px; }
body.layout-tablet .st-scan-row button, body.layout-tablet .st-scan-row input { width: 44px; height: 44px; }
body.layout-tablet .st-scan-row input { width: 64px; }
body.layout-tablet .st-scan-save, body.layout-tablet .st-scan-clear, body.layout-tablet .st-scan-toggle { min-height: 46px; font-size: 14px; }
body.layout-tablet .st-scan-list { max-height: 420px; }
@media (max-width: 767px) { .st-scan-cam { flex-basis: 100%; } }

/* ── PHONE: pages that were cut off (tools/audit/page-audit.js) ── */
@media (max-width: 767px) {
  /* timesheet: clock + staff on top, the tabs and roster below (was two squeezed columns) */
  #page-timesheet.active { flex-direction: column !important; overflow-y: auto; }
  #ts-sidebar { width: 100% !important; min-width: 0 !important; max-width: none !important; max-height: 46dvh; flex: 0 0 auto; border-right: 0 !important; border-bottom: 2px solid var(--border); }
  #page-timesheet > div:last-child { flex: 1 0 auto !important; overflow: visible !important; }
  #ts-tabs-bar { overflow-x: auto; min-width: 0; flex: 1 1 auto; }
  #ts-tabs-bar + div { display: none; }
  /* matrix + repair-pricing toolbars wrap; the brand tabs get their own full-width row (they were 0 px wide) */
  .mx2-toolbar { flex-wrap: wrap !important; row-gap: 8px; }
  .mx2-tabs { flex: 1 1 100% !important; min-width: 0 !important; }
  .table-toolbar { flex-wrap: wrap; }
  /* settings lists: rows wrap, wide ones scroll */
  .settings-section-body { overflow-x: auto; }
  .cp-row, .cat-settings-row { flex-wrap: wrap; row-gap: 6px; }
}

/* ── TABLET: every control a finger can hit (tools/audit/page-audit.js found 1,500+ under 32 px) ──
   One rule instead of page-by-page patches: buttons, tabs, fields and selects are at
   least 40 px on the tablet. :where() keeps these at zero specificity, so every
   deliberate size above (Charge 66 px, payment 56 px, search 52 px …) still wins.
   Matrix grids and product cards keep their own sizing. */
body.layout-tablet :where(button, select, .rpt-tab, .cv-cat, .tbl-btn, [role=button], input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden])):not(:where(.mx2-table, .cv-grid, .cv-fold-grid, .products-grid, .rb-board, .st-scan-cam) *) { min-height: 40px; }
body.layout-tablet :where(button, .tbl-btn):not(:where(.mx2-table, .cv-grid, .cv-fold-grid, .products-grid) *) { min-width: 40px; }
body.layout-tablet :where(input:not([type=checkbox], [type=radio]), select, textarea):not(:where(.mx2-table *)) { font-size: max(15px, 1em); }
body.layout-tablet .color-swatch { width: 40px !important; height: 40px !important; }
body.layout-tablet .tab-menu-dots { min-width: 36px !important; min-height: 36px !important; }
/* what the page audit found small on pack v5 (TASKS-DAY-29 D17): the Repairs overview's headings and rows,
   the colour pickers (Settings → Variant Groups), the Timesheet's "+" cells, sortable table headers
   (Transactions, Repairs history) and the receipt logo slider — a finger's size on the tablet and the
   phone; the laptop keeps its tight lists */
body.layout-tablet #spanel-variants input[type=color] { width: 40px !important; min-width: 40px; flex-shrink: 0; height: 40px !important; }   /* min-width: its row squeezed it to 12 px on an iPad upright */
body.layout-tablet .ts-add-cell { min-height: 40px; display: flex; align-items: center; justify-content: center; }
body.layout-tablet th.sort-th { height: 44px; }
body.layout-tablet #s-receipt-logo-size { height: 40px; }

/* ── PHONE: the same finger-sized controls, a little tighter (36 px) ──
   Zero specificity like the tablet rule above, so every deliberate phone size wins.
   Fields are 16 px text: iOS Safari zooms the page into any field smaller than that. */
@media (max-width: 767px) {
  /* Inventory's (and Restock's, Transactions') four figures two by two: a shop's stock value ("$421,041")
     pushed the fourth card off a 390 px screen (M69) */
  .inventory-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(button, select, .rpt-tab, .cv-cat, .tbl-btn, [role=button], input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden])):not(:where(.mx2-table, .cv-grid, .cv-fold-grid, .products-grid, .rb-board, .st-scan-cam) *) { min-height: 36px; }
  /* D17: as on the tablet (above) */
  #spanel-variants input[type=color] { width: 40px !important; min-width: 40px; flex-shrink: 0; height: 40px !important; }
  .ts-add-cell { min-height: 40px; display: flex; align-items: center; justify-content: center; }
  th.sort-th { height: 44px; }
  #s-receipt-logo-size { height: 40px; }
  .color-swatch { width: 40px !important; height: 40px !important; }
  :where(button, .tbl-btn):not(:where(.mx2-table, .cv-grid, .cv-fold-grid, .products-grid) *) { min-width: 36px; }
  :where(input:not([type=checkbox], [type=radio]), select, textarea):not(:where(.mx2-table *)) { font-size: max(16px, 1em); }
  /* a tab's ⋯ menu (a span, so the rule above misses it): one per category tab — a per-brand shop
     has twenty on Restock → ＋ Manual (TASKS-OVERNIGHT N4) */
  .tab-menu-dots { min-width: 36px !important; min-height: 36px !important; display: inline-flex; align-items: center; justify-content: center; }
  /* the Repairs board's "→ next stage" (the tablet rule above has it; the board is left out of the
     general rule so its cards stay compact) and the flat lists' product names (N4) */
  .rb-next { min-height: 40px; padding: 6px 12px; font-size: 13px; }
}
/* repair parts at the checkout (js/pos/repair-hit.js) */
.cv-hit-tool { margin-right: 2px; }
#rh-modal .rh-stock { font-size: 12px; color: var(--text3); margin-bottom: 10px; }
#rh-modal .rh-choices { display: flex; flex-direction: column; gap: 8px; }
#rh-modal .rh-choices button { min-height: 44px; font-size: 14px; }
#rh-modal .rh-choices button[disabled] { opacity: .5; cursor: not-allowed; }
#rh-modal .rh-why { font-size: 12px; color: var(--text3); }
/* inventory table: stock for types with many rows (js/inventory/inv-row-stock.js) */
.inv-rows-out { color: var(--text3); font-weight: 500; white-space: nowrap; }
.inv-out-sort { display: block; margin: 2px 0 0; padding: 1px 6px; font-size: 10px; font-weight: 600; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text3); cursor: pointer; white-space: nowrap; }
.inv-out-sort.on { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* ── PHONE CHECKOUT (js/pos/phone-checkout.js; the owner's design of 30 Sep) ──
   The quick tabs in a dock under the thumb; the top bar and the chips go as the list scrolls
   (body.pc-lvl1 / .pc-lvl2) and a capsule floats instead; search is a button until tapped
   (body.pc-search-open); "Added … · Undo" after a tap; More / Edit as a sheet (body.pc-sheet-open);
   the model-and-colour picker as a bottom sheet. Phone only: nothing here reaches a tablet or a laptop. */
#pc-dock, #pc-cap, #pc-snack, #pc-sheet, #pc-sheet-bg, .pc-search-btn, .pc-search-cancel { display: none; }
/* A tablet and a computer (the owner, 30 Sep): the tab row and the chips go as the products scroll
   down (body.pc-lvl2), and the capsule floats over the products instead; the top bar stays. */
#page-pos .pos-left { position: relative; }
body:not(.layout-phone).pos-active.pc-lvl2 #pos-pages-bar, body:not(.layout-phone).pos-active.pc-lvl2 .pos-toolbar { display: none; }
body:not(.layout-phone).pos-active.pc-lvl2 #pc-cap { display: flex; }
body:not(.layout-phone) #pc-cap { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 20; align-items: center; gap: 2px; padding: 3px; border-radius: 22px; background: rgba(22,23,26,.92); box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 92%; }
body:not(.layout-phone) #pc-cap button { height: 36px; border: none; border-radius: 18px; background: transparent; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
body:not(.layout-phone) #pc-cap .pc-cap-dot { width: 7px; height: 7px; border-radius: 4px; background: #4ade80; flex: 0 0 auto; }
body:not(.layout-phone) #pc-cap .pc-cap-search { width: 36px; padding: 0; justify-content: center; background: #2c2d31; font-size: 15px; }
body.layout-tablet #pc-cap button { height: 44px; border-radius: 22px; font-size: 15px; }
body.layout-tablet #pc-cap .pc-cap-search { width: 44px; }
/* Every page (js/core/scroll-head.js): the rows above a list that scrolls down go (.sh-hide) and a
   capsule floats over the list instead; a little scroll up or the capsule brings them back. */
.sh-hide { display: none !important; }
.page.sh-away, .sh-root.sh-away { position: relative; }
#sh-cap { display: none; }
.page.sh-away > #sh-cap, .sh-root.sh-away > #sh-cap { display: flex; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 30; padding: 3px; border-radius: 22px; background: rgba(22,23,26,.92); box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 92%; }
#sh-cap button { height: 36px; border: none; border-radius: 18px; background: transparent; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* folded (shFold): the capsule sits in the page's flow above the list, not over its head row */
.page.sh-pinned > #sh-cap, .sh-root.sh-pinned > #sh-cap { position: static; transform: none; margin: 4px auto 6px; width: max-content; max-width: calc(100% - 16px); }
#sh-cap .sh-cap-dot { width: 7px; height: 7px; border-radius: 4px; background: #4ade80; flex: 0 0 auto; }
body.layout-tablet #sh-cap button, body.layout-phone #sh-cap button { height: 44px; border-radius: 22px; font-size: 15px; }
#pc-toast { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); z-index: 508; opacity: 0; pointer-events: none; transition: opacity .2s; display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px; background: rgba(22,23,26,.92); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
@media (max-width: 767px) {
  body.layout-phone #pos-pages-bar { display: none !important; }   /* the dock has the tabs */
  body.layout-phone #page-pos .pos-left { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  body.layout-phone .products-grid { touch-action: pan-y; }
  body.layout-phone #products-grid { padding-bottom: 72px !important; }   /* the last row clears the cart bar and its shadow at the end of the scroll (M67 asks 40 px) */
  body.layout-phone.pos-active #pos-cart-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
  #pos-cart-bar .pcb-chev { font-size: 12px; color: var(--text3); margin-left: 4px; }
  /* the top bar goes on the first scroll down; the chips on the next; the list's top brings them back */
  body.layout-phone.pos-active .topbar { transition: max-height .2s ease, opacity .15s ease; overflow: hidden; max-height: 52px; }
  body.layout-phone.pos-active.pc-lvl1 .topbar { max-height: 0; opacity: 0; border-bottom-width: 0; }
  body.layout-phone.pos-active.pc-lvl2 .pos-toolbar { display: none; }
  body.layout-phone.pos-active.pc-lvl2:not(.pc-search-open) #pc-cap { display: flex; }
  #pc-cap { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 506; align-items: center; gap: 2px; padding: 3px; border-radius: 22px; background: rgba(22,23,26,.92); box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 92vw; }
  #pc-cap button { height: 38px; border: none; border-radius: 19px; background: transparent; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #pc-cap .pc-cap-dot { width: 7px; height: 7px; border-radius: 4px; background: #4ade80; flex: 0 0 auto; }
  #pc-cap .pc-cap-search { width: 38px; padding: 0; justify-content: center; background: #2c2d31; font-size: 16px; }
  /* search: a button; open, the field takes the row with Cancel */
  body.layout-phone .pc-search-btn { display: inline-flex; order: 0; flex: 0 0 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 17px; }
  body.layout-phone .pos-toolbar .cat-filter { order: 1; flex: 1 1 0; flex-basis: 0; min-width: 0; }
  body.layout-phone .pos-toolbar .search-input-wrap { display: none; order: 0; }
  body.layout-phone.pc-search-open .pos-toolbar .search-input-wrap { display: block; }
  body.layout-phone.pc-search-open .pos-toolbar .cat-filter, body.layout-phone.pc-search-open .pc-search-btn { display: none; }
  body.layout-phone.pc-search-open .search-input-wrap input { padding-right: 84px; }
  body.layout-phone.pc-search-open .pc-search-cancel { display: inline-flex; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 36px; align-items: center; padding: 0 10px; border: none; border-radius: 10px; background: transparent; color: var(--accent); font-weight: 700; font-size: 15px; }
  /* the dock */
  body.layout-phone.pos-active #pc-dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 505; gap: 4px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  #pc-dock button { border: none; background: transparent; color: var(--text); font-family: var(--font-ui, 'DM Sans', sans-serif); cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
  #pc-dock .pc-menu { flex: 0 0 48px; height: 48px; font-size: 22px; }
  #pc-dock .pc-tab { flex: 1 1 0; min-width: 0; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 15px; font-weight: 800; letter-spacing: .01em; }
  #pc-dock .pc-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #pc-dock .pc-dot { width: 4px; height: 4px; border-radius: 2px; background: transparent; }
  #pc-dock .pc-tab.active, #pc-dock .pc-more.active { background: var(--accent); color: #fff; }
  #pc-dock .pc-tab.active .pc-dot { background: #fff; }
  #pc-dock .pc-more { flex: 0 0 56px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
  #pc-dock .pc-more-dots { font-size: 16px; line-height: 1; }
  #pc-dock .pc-more-label { max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* "Added Glitter · Undo" */
  body.layout-phone.pos-active #pc-snack.on { display: flex; }
  body.cart-sheet-open #pc-snack { display: none !important; }
  #pc-snack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(142px + env(safe-area-inset-bottom)); z-index: 507; align-items: center; gap: 12px; height: 40px; padding: 0 6px 0 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.12); font-size: 14px; font-weight: 600; max-width: 92vw; }
  #pc-snack span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #pc-snack button { height: 32px; padding: 0 12px; border: none; border-radius: 16px; background: var(--accent-light); color: var(--accent); font-size: 14px; font-weight: 800; }
  #pc-toast.on { opacity: 1; }
  /* the sheet: More, and Edit quick tabs */
  body.pc-sheet-open #pc-sheet-bg { display: block; position: fixed; inset: 0; z-index: 530; background: rgba(22,23,26,.42); }
  body.pc-sheet-open #pc-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 531; max-height: 88dvh; overflow-y: auto; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
  #pc-sheet .pc-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--border2, var(--border)); margin: 2px auto 12px; }
  #pc-sheet .pc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
  #pc-sheet .pc-sheet-title { font-size: 22px; font-weight: 800; }
  #pc-sheet .pc-note { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 10px 0; }
  #pc-sheet .pc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #pc-sheet .pc-big { height: 60px; padding: 0 14px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); font-size: 16px; font-weight: 700; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #pc-sheet .pc-big.active { border-color: var(--accent); }
  #pc-sheet .pc-btn-sm { height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); font-size: 14px; font-weight: 700; }
  #pc-sheet .pc-edit-row { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 8px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--border); }
  #pc-sheet .pc-updown { display: flex; flex-direction: column; gap: 2px; }
  #pc-sheet .pc-updown button { width: 36px; height: 22px; min-height: 22px; border: none; border-radius: 6px; background: var(--surface); font-size: 11px; }
  #pc-sheet .pc-edit-label { width: 72px; flex: 0 0 72px; height: 44px; box-sizing: border-box; border: 2px solid var(--text); border-radius: 12px; text-align: center; font-size: 17px; font-weight: 800; background: var(--surface); }
  #pc-sheet .pc-edit-target { flex: 1 1 0; min-width: 0; height: 44px; border: 1px solid var(--border); border-radius: 12px; padding: 0 10px; font-size: 15px; background: var(--surface); }
  #pc-sheet .pc-edit-x { width: 36px; height: 44px; border: none; background: transparent; font-size: 16px; color: var(--text3); }
  #pc-sheet .pc-add { width: 100%; height: 48px; border: 2px dashed var(--border2, var(--border)); border-radius: 16px; background: transparent; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  #pc-sheet .pc-sheet-foot { display: flex; gap: 8px; margin-top: 12px; }
  #pc-sheet .pc-btn { flex: 1 1 0; height: 52px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); font-size: 16px; font-weight: 700; }
  #pc-sheet .pc-btn.pc-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  /* the model-and-colour picker: a bottom sheet with finger-sized rows */
  body.layout-phone .cv-pop-bg { display: flex; align-items: flex-end; justify-content: center; padding: 0 !important; }
  body.layout-phone .cv-pop, body.layout-phone .cv-pop.cv-pop-wide { width: 100% !important; max-width: 100vw !important; max-height: 86dvh; margin: 0 !important; border-radius: 22px 22px 0 0 !important; }
  body.layout-phone #cv-pick-q { min-height: 48px; font-size: 16px; }
  body.layout-phone .cv-pick-model { font-size: 16px; font-weight: 800; }
  body.layout-phone .cv-pick-opt { min-height: 48px; font-size: 15px; padding: 8px 14px; border-radius: 12px; }
  .pc-kept { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; margin: 6px 0; border-radius: 12px; background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 600; }
  .pc-kept b { color: inherit; }
  .pc-kept button { margin-left: auto; width: 36px; height: 36px; border: none; border-radius: 10px; background: transparent; color: inherit; font-size: 15px; }
}

/* ── PHONE: the repair job form (W12) ─────────────────────────────────────
   Two columns left three fields too narrow to type in at 390 px (the custom repair's name 45 px,
   its price 36 px, the quote's status 48 px). The repairs row takes the whole width, with
   Priority under it; the quote's status goes under its total. */
@media (max-width: 767px) {
  #repair-job-form .form-row.rdf-row-repairs { grid-template-columns: 1fr; }
  #repair-job-form #rdf-custom-repair-name { min-width: 0; flex: 3 1 120px !important; }
  #repair-job-form #rdf-custom-repair-price { min-width: 0; flex: 1 1 84px !important; }
  #repair-job-form .rdf-quote-box { flex-wrap: wrap; }
  #repair-job-form #rdf-quote-accepted { min-width: 140px; }
  #repair-job-form #rdf-total { width: 120px !important; }
  /* two date boxes side by side are wider than the phone: one under the other */
  #repair-job-form #rsec-collection .form-row { grid-template-columns: 1fr; }
}
/* a section's heading reached by Tab shows where the keyboard is */
#repair-job-form .repair-section-header[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }


/* ── THE CHECKOUT'S VIEW (js/pos/checkout-view.js; the owner, 1 Oct): the top rows hidden, short names ── */
body.pos-active.cc-hide-top .topbar { display: none !important; }
body.pos-active.cc-hide-tabs:not(.layout-phone) #pos-pages-bar { display: none !important; }
#page-pos .pos-toolbar { position: relative; }
.cc-view-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.cc-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 290px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); }
/* The matrices' ☰ View menu (matrix-jobs.js mxViewMenu) wears .cc-menu too and opens on the page's body. It must sit over
   the checkout's Quick Matrices flyout (#pos-matrix-flyout, z-index 998): with the checkout menu's 60 (and app.css's 900)
   it opened under it, unseen and untappable (the owner, 1 Oct). */
.cc-menu.mx-vmenu { z-index: 1001; }
.cc-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.cc-row:hover { background: var(--surface2); }
.cc-row input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.cc-row b { display: block; font-size: 13px; color: var(--text); }
.cc-row small { display: block; font-size: 11.5px; color: var(--text3); }
.cc-edit { width: 100%; margin-top: 4px; min-height: 40px; border: 1px dashed var(--border2); border-radius: 8px; background: transparent; color: var(--text2); font-weight: 700; cursor: pointer; }
select.cat-btn.cc-dept { font-weight: 800; color: var(--text); padding-right: 22px; }
.cc-names-bg { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cc-names { width: min(460px, 100%); max-height: 86dvh; display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.cc-names h3 { margin: 0; padding: 14px 16px 8px; font-size: 16px; }
.cc-names h3 small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text3); }
.cc-list { overflow: auto; padding: 4px 16px; }
.cc-li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 6px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.cc-li-dept { padding-left: 0; font-weight: 800; }
.cc-li input { width: 86px; min-height: 36px; text-align: center; font-weight: 700; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); }
.cc-names-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; }