/* Garage Bins V2 — component layer on top of styles.css (brand kit design-v2). */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }

body { -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 24px); }
svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; }
h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
main { padding: 4px 14px 16px; }

/* Header */
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.brand:hover { color: var(--text); }
.brand-mark { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font: 800 30px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.brand-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 7px; height: 7px; }
.status-dot.ok { background: var(--steel); }
.status-dot.loading { background: var(--yellow); }
.status-dot.err { background: var(--rust); }
body[data-route="voice"] .app-header, body[data-route="voice"] .bottom-nav { display: none; }
body[data-route="bin"] .app-header, body[data-route="edit"] .app-header, body[data-route="create"] .app-header { display: none; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--text); }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn-spacer { width: 44px; }

/* Search bar */
.searchbar, .search-box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px 6px 6px 14px; margin: 4px 0 12px; box-shadow: var(--shadow); position: relative; }
.searchbar-field { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 17px; min-height: 44px; }
.searchbar-field svg, .search-box .search-icon { width: 20px; height: 20px; flex: none; color: var(--text-muted); position: static; transform: none; }
.search-box input { flex: 1; border: 0 !important; background: transparent !important; padding: 10px 0 !important; font-size: 17px !important; box-shadow: none !important; color: var(--text); min-width: 0; }
.searchbar-mic { width: 48px; height: 44px; border: 0; border-radius: 11px; background: var(--yellow); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.searchbar-mic svg { width: 22px; height: 22px; }
.searchbar-mic.is-listening { animation: micpulse 1.2s ease-in-out infinite; }

/* Filter pills */
.location-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 12px; scrollbar-width: none; flex-wrap: nowrap; }
.filter-chip { border: 0; background: var(--chip); color: var(--ink); border-radius: 8px; padding: 7px 11px; font: 600 13px var(--font); white-space: nowrap; min-height: 32px; cursor: pointer; }
.filter-chip .num { font-weight: 700; }
.filter-chip.active { background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) {
  .filter-chip { background: var(--surface-2); color: var(--text); }
  .filter-chip.active { background: var(--yellow); color: var(--ink); }
}

/* Bin cards */
.bin-list { display: flex; flex-direction: column; gap: 10px; }
.bin-card { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); }
.bin-card:hover { color: var(--text); border-color: var(--steel); transform: none; }
.binno { width: 56px; height: 56px; border-radius: 12px; background: var(--binno-bg); color: var(--binno-fg); display: grid; place-items: center; font: 800 28px/1 var(--font-display); flex: none; font-variant-numeric: tabular-nums; }
.binno-lg { width: 84px; height: 84px; font-size: 44px; border-radius: 14px; background: var(--yellow); color: var(--ink); }
.bin-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bin-card-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bin-card-name { font: 700 18px/1.25 var(--font); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: -.01em; }
.tag { font: 700 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; margin: 0; }
.item-preview { margin: 0; color: var(--text-muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
.item-preview em { font-style: normal; }
.bin-card-meta { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); }
.bin-card-meta svg, .detail-loc svg { width: 14px; height: 14px; flex: none; }

/* FAB */
.fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px); z-index: 45; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 22px; border-radius: 14px; background: var(--yellow); color: var(--ink); font: 800 20px var(--font-display); text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 3px 0 var(--yellow-press), 0 6px 16px rgba(31,35,40,.18); }
.fab:hover { color: var(--ink); }
.fab svg { width: 20px; height: 20px; stroke-width: 3; }
.list-toolbar { display: none; }

/* Bottom nav */
.bottom-nav { background: var(--nav-bg); border-top: 1px solid var(--border); backdrop-filter: none; padding-top: 8px; }
.bottom-nav a { color: var(--text-muted); font: 700 12px var(--font); gap: 4px; justify-content: flex-start; }
.bottom-nav a i { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; font-style: normal; }
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"], .bottom-nav a.active { color: var(--text); }
.bottom-nav a[aria-current="page"] i, .bottom-nav a.active i { background: var(--yellow); color: var(--ink); }
.bottom-nav a:hover { color: var(--text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 12px; font: 800 18px var(--font-display); text-transform: uppercase; letter-spacing: .06em; padding: 0 18px; border: 2px solid transparent; }
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: var(--yellow); color: var(--ink); box-shadow: 0 3px 0 var(--yellow-press); }
.btn-primary:hover:not(:disabled) { background: #FFCB33; color: var(--ink); }
.btn-primary:disabled { background: var(--chip); color: var(--steel); box-shadow: none; opacity: 1; }
.btn-secondary, .btn-ghost { background: transparent; color: var(--text); border-color: var(--text); box-shadow: none; }
.btn-secondary:hover:not(:disabled), .btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); box-shadow: 0 3px 0 #000; }
.btn-dark:hover { color: var(--btn-dark-fg); }
.btn-danger { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn-danger:hover:not(:disabled) { background: #9E3B19; color: #fff; }
.btn-sm { min-height: 40px; font-size: 16px; padding: 0 12px; }
.btn-text { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.btn-text svg { width: 16px; height: 16px; }
.btn-text:disabled { color: var(--text-muted); text-decoration: none; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Detail */
.detail-top { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 10px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 16px; min-height: 44px; margin: 0; }
.back-link svg { width: 20px; height: 20px; stroke-width: 2.5; color: var(--text); }
.pill-btn { background: var(--chip); color: var(--ink); border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 15px; }
@media (prefers-color-scheme: dark) { .pill-btn { background: var(--surface-2); color: var(--text); } }
.detail-hero { display: flex; gap: 16px; align-items: center; background: var(--hero-bg); color: var(--hero-fg); border-radius: 16px; padding: 18px; margin-bottom: 12px; }
.detail-hero h2 { margin: 2px 0 2px; font: 800 34px/1 var(--font-display); color: var(--hero-fg); overflow-wrap: anywhere; }
.tag-on-ink { color: #C9CED3; }
.detail-loc { margin: 0; display: flex; gap: 5px; align-items: center; font-size: 14px; color: #D8DCDF; }
.card-block { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; box-shadow: var(--shadow); color: var(--text); }
.lab { font: 700 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.lab-row { display: flex; justify-content: space-between; align-items: center; }
.item-list { list-style: none; margin: 0; padding: 0; }
.item-list li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--border); font-size: 16px; }
.item-list li:first-child { padding-top: 8px; }
.item-list li:last-child { border-bottom: 0; }
.item-list li::before { content: ""; position: absolute; left: 2px; top: calc(50% - 4px); width: 8px; height: 8px; background: var(--yellow); outline: 1.5px solid var(--ink); border-radius: 1px; }
.item-list li:first-child::before { top: calc(50% - 2px); }
.notes-text { margin: 0; font-size: 15px; }
.sticker-card { display: flex; align-items: center; gap: 16px; }
.sticker-card strong { display: block; font-size: 16px; }
.sticker-sub { display: block; color: var(--text-muted); font-size: 14px; }
.sticker-thumb { width: 104px; height: 80px; flex: none; border: 1px solid var(--border); border-radius: 6px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.sticker-thumb canvas { width: 72px !important; height: 72px !important; }
.action-bar { position: sticky; bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0 4px; background: linear-gradient(rgba(0,0,0,0), var(--bg) 35%); z-index: 5; }
body[data-route="voice"] .action-bar { bottom: calc(var(--safe-bottom) + 8px); }
body[data-route="voice"] { padding-bottom: 24px; }
.empty-inline { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 6px 0; color: var(--text-muted); }
.empty-inline p { margin: 0; }

/* Empty states */
.empty-hero { text-align: center; padding: 36px 20px; background: var(--surface); border: 1px dashed var(--tote); border-radius: 16px; }
.empty-hero h2 { margin: 10px 0 6px; font-size: 26px; }
.empty-hero p { color: var(--text-muted); margin: 0 auto 16px; max-width: 30ch; }
.empty-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 16px; background: var(--yellow); color: var(--ink); display: grid; place-items: center; }
.empty-icon svg { width: 34px; height: 34px; }

/* Forms */
.form-group label, .field-label { font: 700 13px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.form-group input, .form-group textarea, .form-group select, .vi-input { background: var(--input-bg); color: var(--text); border: 1.5px solid var(--border); border-radius: 12px; font-size: 16px; }
.form-group input:focus, .form-group textarea:focus, .vi-input:focus { border-color: var(--ink); box-shadow: var(--focus-ring); outline: none; }
@media (prefers-color-scheme: dark) { .form-group input:focus, .form-group textarea:focus, .vi-input:focus { border-color: var(--yellow); } }
.form-group input[readonly] { background: var(--surface-2); color: var(--text-muted); }
#view-edit > h2, #view-create > h2 { font-size: 30px !important; }
.form-status.success { background: var(--yellow-soft); border-color: var(--yellow-press); color: var(--ink); }
.form-status.error, .error-banner { background: var(--rust-soft); border-color: var(--rust); color: #7A2A0E; }
.form-status.info, .form-status.saving { background: var(--surface-2); border-color: var(--border); color: var(--text); }
@media (prefers-color-scheme: dark) {
  .form-status.error, .error-banner { background: rgba(184,70,31,.18); color: #F3B59E; }
  .form-status.success { background: rgba(255,194,14,.14); color: var(--text); }
}
mark { background: var(--highlight-bg); color: var(--highlight); border-radius: 3px; padding: 0 2px; }
.category-tag { background: var(--chip); color: var(--ink); border: 0; }
.location-tag { background: var(--chip); color: var(--ink); border: 0; }
@media (prefers-color-scheme: dark) { .category-tag, .location-tag { background: var(--surface-2); color: var(--text); } }
.bin-id-badge { background: var(--ink); color: #fff; border: 0; }

/* Voice items (edit/create) + voice screen chips */
.vi-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.vi-undo svg { width: 16px; height: 16px; }
.vi-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vi-chip { display: inline-flex; align-items: center; border: 2px solid var(--text); border-radius: 12px; background: var(--surface); max-width: 100%; }
.vi-chip.ask { border-style: dashed; background: var(--yellow-soft); }
@media (prefers-color-scheme: dark) { .vi-chip.ask { background: rgba(255,194,14,.12); } }
.vi-chip-text { border: 0; background: none; color: var(--text); font: 600 16px var(--font); padding: 8px 4px 8px 12px; min-height: 40px; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.vi-q { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
.vi-chip-btn { border: 0; background: none; color: var(--text-muted); width: 34px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.vi-chip-btn:last-child { padding-right: 6px; }
.vi-chip-btn svg { width: 16px; height: 16px; stroke-width: 2.5; }
.vi-chip.editing { padding: 2px; }
.vi-edit { border: 0; background: transparent; color: var(--text); font: 600 16px var(--font); padding: 6px 10px; min-width: 180px; outline: none; }
.vi-empty { color: var(--text-muted); font-size: 14px; padding: 4px 0; }
.vi-count { color: var(--text-muted); }
.vi-clarify { background: var(--surface-2); border-radius: 12px; padding: 12px; margin-bottom: 10px; border-left: 4px solid var(--yellow); }
.vi-clarify-q { margin: 0 0 8px; font-size: 15px; }
.vi-clarify-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vi-clarify-opts .btn { text-transform: none; font: 600 15px var(--font); letter-spacing: 0; }
.vi-live { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 15px; }
.vi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rust); flex: none; animation: micpulse 1s infinite; }
.vi-entry { display: flex; gap: 8px; align-items: center; }
.vi-input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; }
.vi-mic, .vi-send { width: 48px; height: 48px; flex: none; border-radius: 12px; border: 0; display: grid; place-items: center; cursor: pointer; }
.vi-mic { background: var(--yellow); color: var(--ink); }
.vi-mic.is-listening { background: var(--ink); color: var(--yellow); animation: micpulse 1.2s infinite; }
.vi-send { background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .vi-send { background: var(--surface-2); color: var(--text); } }
.vi-mic svg, .vi-send svg { width: 22px; height: 22px; }

/* Voice screen */
.voice-top { display: flex; align-items: center; justify-content: space-between; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.voice-target { text-align: center; }
.voice-target .tag { font-size: 12px; }
.voice-bin { margin: 0; font: 700 18px var(--font); }
.mic-stage { display: flex; flex-direction: column; align-items: center; padding: 18px 0 14px; }
.mic-big { width: 150px; height: 150px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 0 var(--yellow-press), 0 0 0 22px var(--yellow-soft); margin: 26px 0 30px; outline: 2px dashed transparent; outline-offset: 30px; transition: outline-color .2s; }
@media (prefers-color-scheme: dark) { .mic-big { box-shadow: 0 6px 0 var(--yellow-press), 0 0 0 22px rgba(255,194,14,.16); } }
.mic-big svg { width: 52px; height: 52px; stroke-width: 2.2; }
.mic-big:disabled { background: var(--chip); color: var(--steel); box-shadow: none; }
.mic-stage.live .mic-big { outline-color: #E2B33A; }
.wave { display: flex; gap: 5px; align-items: center; height: 40px; opacity: .25; }
.wave i { width: 7px; height: 16px; border-radius: 4px; background: var(--text); }
.wave i:nth-child(3n) { height: 30px; } .wave i:nth-child(4n+1) { height: 22px; } .wave i:nth-child(6) { height: 38px; }
.mic-stage.live .wave { opacity: 1; }
.mic-stage.live .wave i { animation: wave 0.9s ease-in-out infinite; }
.mic-stage.live .wave i:nth-child(2n) { animation-delay: .15s; } .mic-stage.live .wave i:nth-child(3n) { animation-delay: .3s; }
.mic-state { margin-top: 8px; font-size: 15px; color: var(--text); }
.heard { margin: 0; font: 700 20px/1.4 var(--font); overflow-wrap: anywhere; }
@keyframes wave { 50% { transform: scaleY(.45); } }
@keyframes micpulse { 50% { opacity: .65; } }

/* QR / settings pages keep their layout, re-skinned */
.settings-panel, .print-panel, .help-note, .theme-chip-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.bin-check-item { background: var(--surface); border-color: var(--border); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 370px) {
  .brand-name { font-size: 27px; }
  .binno { width: 50px; height: 50px; font-size: 25px; }
  .bin-card { gap: 12px; padding: 12px; }
  .detail-hero h2 { font-size: 30px; }
  .btn { font-size: 16px; padding: 0 12px; }
  .mic-big { width: 132px; height: 132px; }
}

/* fixes after first screenshot pass */
[hidden] { display: none !important; }
.filter-chip .num { margin-left: 4px; }
body[data-route="bin"] .bottom-nav, body[data-route="edit"] .bottom-nav, body[data-route="create"] .bottom-nav { display: none; }
body[data-route="bin"] .action-bar { bottom: calc(var(--safe-bottom) + 8px); }
body[data-route="bin"], body[data-route="edit"], body[data-route="create"] { padding-bottom: 32px; }
body[data-route="bin"] main, body[data-route="edit"] main, body[data-route="create"] main, body[data-route="voice"] main { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.vi-chip-text { font-size: 15px; padding: 7px 2px 7px 11px; min-height: 38px; }
.vi-chip-btn { width: 30px; height: 38px; }
@media (max-width: 370px) { .binno.binno-lg { width: 76px; height: 76px; font-size: 40px; } }

/* v2.1 — 360x640 fix: the action bar is fixed, and content reserves its height plus the safe area,
   so the last chips and the type box can always scroll clear of it. Short screens get a compact mic. */
body[data-route="voice"] .action-bar, body[data-route="bin"] .action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 640px; margin: 0 auto;
  padding: 12px 14px calc(12px + var(--safe-bottom));
  background: linear-gradient(rgba(0,0,0,0), var(--bg) 22%);
}
body[data-route="voice"], body[data-route="bin"] { padding-bottom: calc(96px + var(--safe-bottom)); }
html:has(body[data-route="voice"]), html:has(body[data-route="bin"]) { scroll-padding-bottom: calc(104px + var(--safe-bottom)); }
@media (max-height: 700px) {
  .mic-stage { padding: 4px 0 8px; }
  .mic-big { width: 112px; height: 112px; margin: 18px 0 22px; box-shadow: 0 5px 0 var(--yellow-press), 0 0 0 14px var(--yellow-soft); outline-offset: 20px; }
  .mic-big svg { width: 40px; height: 40px; }
  .wave { height: 28px; }
}

/* V2.3: best-guess chips (no card) get a dotted underline + a one-line hint */
.vi-chip.guess .vi-chip-text { text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; }
.vi-hint { list-style: none; flex-basis: 100%; font: 500 0.8125rem/1.3 Inter, system-ui, sans-serif; color: var(--text-muted); margin-top: 2px; }
/* V2.4: split/join tap target on low-confidence chips (44px tall hit area via padding) */
.vi-fix { font: 600 0.75rem/1 Inter, system-ui, sans-serif; color: var(--text); background: transparent; border: 1px dashed var(--text-muted); border-radius: 999px; padding: 6px 8px; margin: 0 2px; min-height: 32px; cursor: pointer; }
.vi-fix:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.vi-chip.guess .vi-chip-text { text-decoration-thickness: 2px; }
/* V2.5: every chip tap target ≥ 44×44 CSS px (text, 🎤, ✕, join, split) at all widths */
.vi-chip-text, .vi-chip-text:only-child { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.vi-chip-btn, .vi-chip-btn:last-child { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.vi-fix { min-height: 44px; min-width: 44px; padding: 0 10px; margin: 0; border-radius: 10px; font-size: 0.8125rem; }
/* V2.5.1: remaining tap targets ≥ 44×44 (Undo, clarify-card options, bin pills) */
.vi-undo, #voice-undo, .btn-text.vi-undo { min-height: 44px; min-width: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
.vi-clarify-opts .btn, .vi-clarify-opts .btn-sm { min-height: 44px; min-width: 44px; }
.pill-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* V2.5.2: main-list filter pills ≥ 44px tall */
.filter-chip { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
/* V2.5.2: AA contrast everywhere. Muted text on light uses a darker Steel (#505A63, ≥4.86:1 on Tote, ≥5.39:1 on Chip/hover rows). */
:root { --text-muted: #505A63; }
@media (prefers-color-scheme: dark) { :root { --text-muted: #A9B1B9; } }
.btn:disabled, .btn[disabled] { color: var(--text-muted); }
.btn-primary:disabled, .btn-primary[disabled] { color: #505A63; }   /* sits on Chip in both schemes */
.mic-big:disabled { color: #505A63; }
/* V2.5.3: Stickers + Themes tap targets ≥ 44×44 */
.btn-text { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding-left: 8px; padding-right: 8px; }
p a[href^="#/"] { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; vertical-align: middle; }
input[type=color] { min-width: 48px; min-height: 44px; }
.color-chip { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.checkbox-inline { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; }