/* Usability improvements build on the existing armory palette and components. */
:root { --muted: #b0bcaa; --dim: #a0ae99; }
.positive { color: var(--accent); }
.negative { color: var(--red); }
.icon-btn { width: 44px; height: 44px; min-width: 44px; }
.search-trigger { min-height: 44px; padding: 5px 0; }
.text-button { min-height: 44px; }
.btn, .filter-select, .pill { min-height: 44px; }
.btn.small { min-height: 40px; }
.summary-card h2, .summary-name { font-size: 14px; }
.summary-card h2 small, .summary-sub, .stat-legend, .technical-stats span,
.technical-stats small, .cost-snapshot, .cost-number small, .budget-label,
.budget-remainder, .cost-line, .cost-label, .field-help, .notice,
.drawer-count, .modal-head p, .detail-stat span, .detail-part, .detail-part small,
.item-type, .item-bottom small, .code-author, .code-stats small,
.code-stats > span, .tag, .gear-meta, .source-row p, .page-footer,
.weapon-card small, .section-tab .mini-count, .nav-button small { font-size: 12px; }
.field-help, .notice, .modal-head p { line-height: 1.7; }
.part-card .part-name, .candidate strong, .item-card .item-name,
.gear-card > strong, .ammo-panel select { font-size: 14px; }
.part-card .part-price, .candidate small, .stat-label { font-size: 13px; }
.part-card .part-slot, .candidate .candidate-deltas { font-size: 12px; }
.part-card { min-height: 106px; }
.part-card .part-name { white-space: normal; overflow-wrap: anywhere; }
.weapon-card { min-height: 104px; }
.weapon-card strong { font-size: 14px; }
.slot-pin { max-width: 170px; }
.slot-pin small, .slot-pin strong { font-size: 12px; }
.slot-pin strong { max-width: 128px; }
.stage-title span, .stage-footer { font-size: 12px; }
.stage-hint-mobile { display: none; }
.stat-value small { color: var(--dim); font-size: 12px; }
.stat-label em { font-size: 12px; }
.cost-number { font-size: clamp(27px, 2.5vw, 36px); }
.cost-label { align-items: center; }
.cost-label .icon-btn { border: 0; }
.summary .cost-card { order: 0; }
.summary .stats-card, .summary .outfit-summary { order: 1; }
.summary { top: 16px; }
.cost-card { scroll-margin-top: 20px; scroll-margin-bottom: 170px; }
.cost-line { padding: 3px 0; }
.budget-field input { min-height: 40px; }
.budget-slider { min-height: 32px; cursor: pointer; }
.mode-label { font-size: 12px; }
.source-actions .icon-btn { width: 44px; height: 44px; }

.budget-setup { border: 1px solid var(--line); border-radius: 10px; padding: 15px 18px; margin-bottom: 22px; background: linear-gradient(110deg, var(--surface-selected), var(--panel)); }
.budget-setup-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.budget-setup-top > label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.budget-setup-top .text-button { flex: none; }
.budget-start-field { display: inline-flex; align-items: center; gap: 8px; background: var(--input); border: 1px solid var(--line); border-radius: 6px; padding: 0 11px; }
.budget-start-field input { width: 112px; min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--text); font: 17px var(--number); text-align: right; }
.budget-start-field > span { color: var(--muted); font-size: 12px; }
.draft-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin: 7px 0; overflow-wrap: anywhere; }
.draft-status .icon { flex: none; }
.budget-setup .recommend-bar { border: 0; background: transparent; margin: 4px 0 0; padding: 0; gap: 9px; }
.recommend-bar > span { font-size: 13px; }
.outfit-summary-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 13px; }
.outfit-summary-line > span { color: var(--muted); }
.outfit-summary-line strong { font-size: 13px; font-weight: 500; max-width: 72%; text-align: right; }
.outfit-summary-line small { color: var(--muted); font-size: 12px; width: 100%; text-align: right; }
.mobile-budget { display: none; }

.modal-head, .modal-footer { flex-shrink: 0; }
.modal-head h2 { line-height: 1.45; }
.modal-footer { flex-wrap: wrap; }
.modal-footer .btn { font-size: 13px; }
.modal .field-input, .modal .search-input { min-height: 44px; }
.drawer { width: 470px; max-height: 100dvh; }
.drawer-toolbar { gap: 8px; }
.drawer-count { margin: 14px 0; line-height: 1.65; }
.candidate { padding: 13px 12px; min-height: 100px; }
.candidate > img { width: 62px; height: 58px; flex: none; }
.candidate .candidate-deltas { gap: 6px 11px; line-height: 1.6; }
.candidate.selected:not(.previewed) { background: var(--surface-hover); border-color: var(--accent-border); }
.candidate.previewed { background: var(--accent-bg); border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.current-part-label { display: inline-block; color: var(--accent); font-size: 11px; margin-left: 6px; }
.candidate-price-diff { display: inline-block; color: var(--muted); font-size: 12px; margin-left: 6px; }
.candidate.original .candidate-content small { font: 12px/1.6 var(--font); color: var(--muted); }
.preview-start { border: 1px solid var(--line); border-radius: 7px; background: var(--surface-tint); padding: 12px 14px; margin: 14px 0; font-size: 13px; }
.preview-start p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.part-comparison { margin: 14px 0; padding: 14px; background: var(--surface-tint); border: 1px solid var(--line); border-radius: 8px; }
.part-comparison h3 { font-size: 14px; line-height: 1.6; margin: 0 0 12px; scroll-margin-top: 10px; }
.preview-price { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.preview-price span { color: var(--muted); font-size: 12px; display: block; }
.preview-price strong { font: 22px var(--number); display: block; margin-top: 3px; }
.preview-price strong small { font: 12px var(--font); }
.preview-budget { font-size: 13px; margin: 9px 0 12px; color: var(--accent); }
.preview-budget.negative { color: var(--red); }
.preview-stats { width: 100%; border-collapse: collapse; font-size: 12px; }
.preview-stats th, .preview-stats td { padding: 6px 0; border-top: 1px solid var(--line); text-align: right; font-weight: 400; }
.preview-stats th:first-child { text-align: left; color: var(--muted); }
.preview-stats thead th { font-size: 12px; color: var(--muted); }
.preview-stats td { font-family: var(--number); }
.preview-removals { font-size: 12px; line-height: 1.8; color: var(--orange); padding: 9px 11px; border-left: 2px solid var(--orange); background: var(--warning-bg); }
.part-comparison .field-help { font-size: 12px; margin-bottom: 0; }
.part-drawer .modal-footer .btn { flex: 1; }
.save-review { display: flex; flex-direction: column; gap: 7px; padding: 15px; background: var(--surface-tint); border: 1px solid var(--line); border-radius: 7px; margin: 4px 0 20px; font-size: 13px; }
.save-review > strong { font-size: 18px; }
.save-review > span { color: var(--muted); }
.save-review b { color: var(--accent); font-family: var(--number); }

.search-start { padding: 28px 0 10px; color: var(--muted); font-size: 14px; }
.search-start .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.search-empty { padding: 25px 4px; color: var(--muted); font-size: 14px; text-align: center; }
.search-empty h3 { color: var(--text); font-size: 17px; overflow-wrap: anywhere; }
.search-empty .btn { margin: 6px 4px; }
.search-group { margin: 22px 0 10px; }
.search-group h3 { margin: 0 0 9px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.search-group h3 > span { color: var(--muted); font: 12px var(--number); }
.search-group h3 .text-button { margin-left: auto; }
.global-result-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.global-result { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 90px; padding: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; text-align: left; }
.global-result:hover { border-color: var(--accent-dim); }
.global-result > img { width: 62px; height: 50px; object-fit: contain; flex: none; }
.global-result > span { min-width: 0; }
.global-result strong { display: block; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; font-weight: 500; }
.global-result small { color: var(--muted); font-size: 12px; display: block; margin-top: 5px; }
.global-result .result-action { margin-left: auto; color: var(--accent); font-size: 12px; flex: none; }

.catalog-filters { display: flex; gap: 13px; align-items: end; flex-wrap: wrap; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.catalog-filters > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; min-width: 115px; flex: 1; }
.catalog-filters input, .catalog-filters select { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--input); color: var(--text); font-size: 13px; }
.catalog-filters > .check-filter { flex-direction: row; align-items: center; gap: 7px; min-height: 44px; flex: 0 0 auto; min-width: 130px; cursor: pointer; }
.catalog-filters .check-filter input { width: 20px; height: 20px; min-height: 20px; accent-color: var(--accent); }
.filter-note { color: var(--muted); font-size: 12px; margin: 10px 1px 18px; }
.item-tile { position: relative; min-width: 0; }
.item-tile .item-card { width: 100%; height: 100%; padding-bottom: 62px; min-height: 250px; }
.item-tile.in-comparison .item-card { border-color: var(--accent); }
.item-tile .item-name { white-space: normal; }
.item-facts { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); }
.compare-toggle { display: inline-flex; align-items: center; gap: 6px; position: absolute; bottom: 10px; left: 12px; right: 12px; min-height: 40px; padding: 7px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); justify-content: center; font-size: 12px; }
.compare-toggle[aria-pressed=true] { color: var(--accent); border-color: var(--accent-dim); }
.compare-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-overlay); backdrop-filter: blur(12px); padding: 12px; position: sticky; top: 12px; z-index: 9; margin-bottom: 18px; }
.compare-selection { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; }
.compare-chip { display: flex; align-items: center; gap: 5px; padding-left: 10px; background: var(--accent-bg); border-radius: 5px; font-size: 12px; }
.compare-chip button { width: 40px; height: 40px; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.compare-controls { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.comparison-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.equipment-comparison { width: 100%; min-width: 590px; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.equipment-comparison th, .equipment-comparison td { border: 1px solid var(--line); padding: 13px; text-align: left; vertical-align: top; font-weight: 400; overflow-wrap: anywhere; }
.equipment-comparison tr > th:first-child { width: 110px; color: var(--muted); background: var(--surface-tint); }
.equipment-comparison thead th > img { width: 100%; height: 95px; object-fit: contain; display: block; }
.equipment-comparison thead strong { font-size: 14px; display: block; margin-top: 8px; }
.equipment-comparison .comparison-price { font-family: var(--number); color: var(--accent); font-size: 17px; }

.code-source-note { display: flex; align-items: start; gap: 9px; color: var(--muted); font-size: 12px; border: 1px solid var(--line); border-radius: 7px; padding: 12px 15px; margin-bottom: 20px; }
.code-source-note .icon { flex: none; margin-top: 3px; }
.code-freshness { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 11px; margin: 13px 0; font-size: 12px; color: var(--muted); }
.code-freshness > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; }
.code-freshness time { font-family: var(--number); }
.code-freshness strong { font-size: 12px; font-weight: 400; color: var(--text); }
.verification-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--warning-line); border-radius: 4px; color: var(--orange); background: var(--warning-bg); }
.verification-badge.verified { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); }
.code-stats { flex-wrap: wrap; gap: 8px; }
.code-stats strong { font-size: 22px; }
.code-card .code-content h2 { font-size: 17px; }
.code-card .code-picture { height: 170px; }
.code-actions .btn { font-size: 13px; }

@media (min-width: 1001px) {
  .budget-setup { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; }
  .budget-setup-top, .draft-status { grid-column: 1; }
  .budget-setup .recommend-bar { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; flex-wrap: wrap; max-width: 320px; }
  .budget-setup .recommend-bar > span { width: 100%; margin-right: 0; }
  .cost-line { margin: 5px 0; padding: 0; }
}

@media (max-width: 1000px) {
  .summary { position: static; }
  .global-result-list { grid-template-columns: 1fr; }
  .budget-setup-top { gap: 10px; }
}
@media (max-width: 820px) {
  .summary { display: grid; }
  .budget-setup { padding: 14px; }
  .catalog-filters > label { min-width: 130px; }
}
@media (max-width: 600px) {
  .app-shell { padding-bottom: calc(165px + env(safe-area-inset-bottom)); }
  .sidebar { height: calc(70px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .navigation { height: 70px; }
  .nav-button { min-height: 70px; gap: 5px; }
  .nav-button span { font-size: 12px; }
  .nav-button .icon { width: 20px; height: 20px; }
  .topbar { height: 64px; padding: 0 14px; gap: 8px; }
  .topbar-right { gap: 4px; }
  .search-trigger, .topbar-right > .icon-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .search-trigger .icon { width: 20px; height: 20px; }
  .topbar-right > .badge { padding: 4px; font-size: 11px; }
  .breadcrumb { font-size: 11px; gap: 5px; }
  .main-content { padding: 20px 15px 26px; }
  .page-heading { gap: 10px; margin-bottom: 20px; }
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 12px; max-width: 185px; }
  .heading-actions { margin-top: 17px; gap: 6px; flex: none; }
  .heading-actions > .btn { min-height: 44px; font-size: 12px; padding: 8px 10px; }
  .heading-actions > .btn.ghost { min-width: 44px; width: 44px; font-size: 0; padding: 10px; }
  .heading-actions > .btn svg { width: 16px; height: 16px; }
  .budget-setup { padding: 13px; margin-bottom: 18px; }
  .budget-setup-top > label { gap: 6px; font-size: 12px; flex-wrap: nowrap; }
  .budget-start-field { padding: 0 8px; gap: 5px; }
  .budget-start-field input { width: 95px; font-size: 16px; }
  .budget-setup-top [data-action=undo] { width: 44px; min-width: 44px; font-size: 0; padding: 0; justify-content: center; }
  .budget-setup-top [data-action=undo] .icon { width: 18px; height: 18px; }
  .budget-setup .recommend-bar > span { width: 100%; font-size: 12px; }
  .budget-setup .recommend-bar .btn { min-height: 44px; font-size: 12px; }
  .draft-status { font-size: 12px; margin: 8px 0; line-height: 1.6; }
  .section-tabs { gap: 20px; }
  .mode-label { font-size: 11px; gap: 4px; }
  .section-tab { font-size: 14px; min-height: 44px; }
  .weapon-card { min-height: 110px; height: 110px; min-width: 88px; padding: 8px; }
  .weapon-card strong { font-size: 14px; }
  .weapon-card small { font-size: 12px; }
  .weapon-stage { height: 245px; }
  .stage-header { top: 14px; left: 14px; right: 14px; }
  .stage-title span { font-size: 11px; }
  .stage-title h2 { font-size: 25px; }
  .stage-controls { gap: 6px; }
  .stage-controls .icon-btn { width: 40px; height: 40px; min-width: 40px; }
  .weapon-hero { top: 73px; height: 142px; left: 5%; width: 90%; }
  .stage-watermark { top: 104px; }
  .slot-pin { display: none; }
  .stage-footer { bottom: 12px; left: 14px; right: 14px; font-size: 11px; }
  .stage-hint-desktop { display: none; }
  .stage-hint-mobile { display: inline; margin-left: auto; }
  .section-heading h2 { font-size: 15px; }
  .part-card { min-height: 112px; padding: 12px 10px; gap: 8px; }
  .part-card .part-slot { font-size: 12px; }
  .part-card .part-name { font-size: 14px; line-height: 1.5; }
  .part-card .part-price { font-size: 12px; }
  .part-card .part-image, .part-card.empty .part-placeholder { width: 38px; height: 42px; }
  .summary { display: flex; gap: 14px; }
  .summary-card { padding: 18px; }
  .summary .cost-card { order: 0; }
  .summary-card h2 { font-size: 14px; }
  .cost-number { font-size: 35px; }
  .cost-line, .stat-label { font-size: 13px; }
  .cost-snapshot, .summary-sub, .budget-label, .budget-remainder { font-size: 12px; }
  .gear-card { min-height: 190px; padding: 14px; }
  .gear-card > strong { font-size: 14px; }
  .gear-meta { font-size: 12px; }
  .gear-card > span:first-child { font-size: 12px; }
  .ammo-panel { flex-wrap: wrap; gap: 10px; }
  .ammo-info { min-width: 0; flex-basis: calc(100% - 62px); }
  .ammo-panel select { min-height: 44px; font-size: 12px; width: 100%; }
  .ammo-info label, .ammo-quantity label { font-size: 12px; }
  .ammo-quantity { display: flex; align-items: center; gap: 10px; margin-left: 52px; }
  .ammo-quantity input { width: 90px; min-height: 44px; }
  .outfit-buttons { flex-wrap: wrap; }
  .outfit-buttons .btn { font-size: 12px; min-height: 44px; }
  .outfit-intro p { font-size: 12px; }
  .notice, .page-footer { font-size: 12px; }
  .footer-links { gap: 13px; flex-wrap: wrap; justify-content: center; }
  .footer-links button { min-height: 44px; }
  .mobile-budget { position: fixed; display: flex; align-items: center; gap: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); left: 0; right: 0; padding: 10px 12px; min-height: 78px; z-index: 19; background: var(--panel-overlay); border-top: 1px solid var(--accent-border); backdrop-filter: blur(15px); box-shadow: 0 -10px 28px #0005; }
  .mobile-budget-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; flex: 1; padding: 0; background: transparent; text-align: left; min-height: 54px; }
  .mobile-budget-main > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mobile-budget-main strong { font: 21px var(--number); color: var(--text); }
  .mobile-budget-main small { font: 12px/1.5 var(--font); color: var(--muted); }
  .mobile-budget-main .mobile-budget-right { text-align: right; }
  .mobile-budget-right > strong { font: 13px var(--number); color: var(--accent); }
  .mobile-budget.over .mobile-budget-right > strong { color: var(--red); }
  .mobile-budget.incomplete .mobile-budget-right > strong { color: var(--orange); }
  .mobile-budget-main .mobile-budget-right small { font-size: 11px; }
  body.modal-open .mobile-budget { display: none; }
  #toast-root { bottom: calc(170px + env(safe-area-inset-bottom)); }
  .toast { font-size: 13px; }
  .modal { max-height: 94dvh; }
  .drawer { max-width: 100%; width: 100%; max-height: 100dvh; }
  .drawer .modal-body { padding: 3px 15px 20px; }
  .modal-head { padding: 16px 15px 12px; }
  .modal-head p, .modal-footer .btn { font-size: 12px; }
  .modal-head .icon-btn { width: 44px; height: 44px; }
  .modal-footer { padding: 12px 15px; gap: 7px; }
  .modal-footer .btn { min-height: 44px; padding: 8px 10px; }
  .candidate { min-height: 110px; }
  .candidate > img { width: 49px; height: 49px; }
  .candidate strong { font-size: 14px; }
  .candidate small, .candidate .candidate-deltas { font-size: 12px; }
  .current-part-label { font-size: 11px; margin-left: 0; display: block; }
  .candidate-price-diff { display: block; margin-left: 0; }
  .candidate.original .icon { margin: 0 9px; }
  .preview-price strong { font-size: 21px; }
  .global-result-list { grid-template-columns: 1fr; }
  .global-result .result-action { font-size: 12px; }
  .global-result > img { width: 52px; }
  .toolbar .search-input { min-height: 44px; }
  .pill, .filter-select { font-size: 12px; min-height: 44px; }
  .catalog-filters { gap: 12px; padding: 13px; }
  .catalog-filters > label { min-width: 115px; }
  .catalog-filters > .check-filter { min-width: 145px; }
  .catalog-filters .text-button { font-size: 12px; }
  .result-count { font-size: 12px; }
  .item-tile .item-card { min-height: 280px; padding: 12px 12px 64px; }
  .item-card .item-name { font-size: 14px; }
  .item-card .item-image { height: 85px; }
  .item-bottom { gap: 5px; flex-wrap: wrap; }
  .item-bottom > strong { font-size: 14px; }
  .compare-toggle { min-height: 44px; left: 10px; right: 10px; }
  .compare-tray { top: 5px; padding: 10px; }
  .compare-chip { font-size: 12px; }
  .compare-chip button { width: 44px; height: 44px; }
  .compare-controls { width: 100%; justify-content: flex-end; gap: 12px; }
  .code-freshness { font-size: 12px; }
  .code-content h2 { font-size: 17px; }
  .code-stats strong { font-size: 23px; }
  .code-tags .tag { font-size: 12px; }
  .code-actions .btn { font-size: 13px; }
  .detail-part, .detail-part small { font-size: 12px; }
  .detail-parts { grid-template-columns: 1fr; }
  .detail-part > img { width: 44px; height: 40px; }
}