/* Camo tracker (/mw4/camos/ and /mw4/camos/<weapon>/). Tokens from tokens.css; mobile first. */

/* Progress: native <progress> with the numbers beside it, so the state never depends on colour or the bar alone. */
.camo-prog { display: grid; grid-template-columns: 1fr; gap: var(--space-1); margin: var(--space-3) 0; max-width: 40rem; }
.camo-prog-label { font-size: var(--text-sm); font-weight: 600; }
.camo-prog progress { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.camo-prog progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 5px; }
.camo-prog progress::-webkit-progress-value { background: var(--accent); border-radius: 5px; }
.camo-prog progress::-moz-progress-bar { background: var(--accent); border-radius: 5px; }
.camo-prog-text { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.camo-prog-overall .camo-prog-label { font-size: var(--text-md); }
.camo-prog-overall progress { height: 14px; border-radius: 7px; }
.camo-classes { display: grid; gap: var(--space-1) var(--space-5); margin: var(--space-4) 0 var(--space-5); }
.camo-classes .camo-prog { margin: var(--space-2) 0; }
@media (min-width: 720px) {
  .camo-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camo-prog { grid-template-columns: 11rem minmax(8rem, 1fr) auto; align-items: center; gap: var(--space-3); }
  .camo-classes .camo-prog, .camo-weapon .camo-prog { grid-template-columns: 1fr; }
}

/* Boxes */
.camo-check, .camo-item { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.camo-check { justify-content: center; min-width: 44px; min-height: 44px; }
.camo-item { min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.camo-item:hover { background: var(--surface-2); }
.camo-check input, .camo-item input { appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--border-control); border-radius: 6px; background: var(--surface-2); cursor: pointer; }
.camo-check input:checked, .camo-item input:checked { border-color: var(--accent); background: var(--accent); }
.camo-check input:checked::after, .camo-item input:checked::after { content: ""; width: 6px; height: 12px; margin-top: -2px; border: solid var(--accent-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.camo-check input:focus-visible, .camo-item input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.camo-item-text { font-size: var(--text-sm); line-height: 1.3; }
.camo-item-text .meta { margin-left: var(--space-1); }
.camo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-1) var(--space-3); list-style: none; margin: 0 0 var(--space-3); padding: 0; }

/* Tools, shared-link banner, status */
.camo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.camo-tools[hidden], .camo-shared[hidden], .camo-link[hidden] { display: none; }
.camo-tools .btn { min-height: 44px; }
.camo-link { flex: 1 1 100%; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text); font: inherit; font-size: var(--text-sm); }
.camo-link-label { flex: 1 1 100%; display: block; }
.camo-shared { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--info); border-radius: var(--radius-lg); background: var(--info-soft); }
.camo-shared p { margin: 0 0 var(--space-2); }
.camo-shared-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.camo-shared .btn { min-height: 44px; }
.camo-status { min-height: 1.5em; margin: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Hub: weapon folds and account camos */
.camo-class { margin-top: var(--space-4); }
.camo-class h4 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.camo-weapon > summary { flex-wrap: wrap; }
.camo-w-name { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; font-weight: 700; flex: 1 1 10rem; }
.camo-w-name .wthumb { width: 56px; height: auto; }
.camo-weapon summary .camo-prog { flex: 1 1 10rem; margin: 0; }
.camo-weapon summary .camo-prog-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.camo-modes { display: grid; gap: var(--space-4); margin: var(--space-3) 0 var(--space-5); }
@media (min-width: 900px) { .camo-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.camo-mode h4 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.camo-acc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.camo-acc { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
.camo-acc + .camo-acc { border-top: 1px solid var(--border); }
.camo-acc .camo-item { padding-left: 0; font-weight: 600; }
.camo-acc-req { padding-left: calc(24px + var(--space-3)); font-size: var(--text-sm); color: var(--text-muted); }

/* Weapon page tables */
.camo-block { margin-top: var(--space-5); }
.camo-block h3 { margin: 0 0 var(--space-2); }
.camo-block > p { max-width: 62ch; }
.camo-table td.tick { width: 52px; padding: 0 0 0 var(--space-2); vertical-align: middle; }
.camo-table .num-val { font-variant-numeric: tabular-nums; }
.camo-table td:nth-child(4), .camo-table td:nth-child(5) { min-width: 12rem; }

/* Below 640px each row of a camo table becomes a card: box and camo name on top, then every value under its own label, no sideways scrolling */
@media (max-width: 639px) {
  .table-wrap:has(.camo-table) { overflow: visible; border: 0; border-radius: 0; background: none; }
  table.data.camo-table, .camo-table tbody, .camo-table tr, .camo-table th, .camo-table td { display: block; }
  .camo-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .camo-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
  table.data.camo-table td.tick { grid-column: 1; grid-row: 1; padding: 0; border: 0; }
  table.data.camo-table th[scope="row"] { grid-column: 2; grid-row: 1; padding: 0; border: 0; }
  table.data.camo-table td:not(.tick) { grid-column: 1 / -1; min-width: 0; padding: 3px 0 3px var(--space-3); border: 0; }
  table.data.camo-table td.num { text-align: left; white-space: normal; }
  .camo-table td[data-label]::before { content: attr(data-label); display: block; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
  .camo-table tbody tr:hover { background: var(--surface-1); }
}