/* ============================================================
   Los Santos 100% — GTA V custom completion checklist
   Dark game-HUD aesthetic. No gradients, hairline borders.

   GTA V has no regions on the source site, so there is no region filter,
   no region column and no borough palette here. What the checklist groups
   by instead is the map's own three story groups — Missions, Collectibles,
   Activities — and those carry the identity hues.
   ============================================================ */

:root {
  --bg:        #111214;
  --panel:     #1A1C20;
  --panel-2:   #1F2126;
  --text:      #EDEAE2;
  --muted:     #868D98;
  /* GTA V accent — the green of the game's own HUD/logo, matched to map.css */
  --accent:    #3FBF9F;
  --accent-hi: #6cd4ba;
  --accent-rgb: 63,191,159;
  --line:      #2A2D33;

  /* Three group hues, lifted straight from map.js's GROUP_HUE so a Collectibles
     chip here reads as the same family as a Collectibles marker on the map.
     All three sit clear of the green accent, so a chip never looks "selected"
     by colour alone. --*-t is the lifted text tint on the dark panel. */
  --g-missions:      #E4726B;   /* coral */
  --g-collectibles:  #6FC7E8;   /* cyan */
  --g-activities:    #E0A75A;   /* amber */

  --g-missions-t:     #F0958F;
  --g-collectibles-t: #9BDAF1;
  --g-activities-t:   #EFC287;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Anton", "Arial Narrow", Impact, var(--sans);

  --radius: 6px;
  --wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--accent); color: #111214; font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius); transition: top .15s;
}
.skip-link:focus { top: 12px; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hi); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------- HUD ---------------- */

.hud {
  position: sticky; top: 0; z-index: 40;
  background: rgba(17,18,20,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.hud-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; padding-top: 14px; padding-bottom: 14px;
  flex-wrap: wrap;
}

.hud-main { display: flex; align-items: center; gap: 18px; min-width: 0; }

.hud-pct {
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 68px);
  line-height: .9;
  color: var(--accent);
  transform: skewX(-6deg);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
  text-align: left;
}

.hud-meta { min-width: 0; }

.hud-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: .085em;
  text-transform: uppercase;
  margin: 0 0 2px;
  transform: skewX(-6deg);
}

.hud-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.page-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px; }
.page-nav a, .page-nav span {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px;
  white-space: nowrap;
}
.page-nav a:hover { color: var(--text); border-color: #3A3E46; }
.page-nav .here { color: #111214; background: var(--accent); border-color: var(--accent); font-weight: 600; }

.hud-sub {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hud-sub .dot { color: var(--line); }
.hud-sub .num { color: var(--text); font-weight: 600; }

/* One-line provenance note: this checklist is assembled, not published. */
.hud-note {
  margin: -4px 0 8px;
  font-size: 11.5px;
  color: #6E757F;
  max-width: 62ch;
}

.hud-bar {
  width: min(280px, 46vw); height: 4px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.hud-bar > span {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width .28s ease;
}

.hud-counters { display: flex; gap: 10px; flex-wrap: wrap; }

.counter {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--line));
  border-radius: var(--radius);
  padding: 8px 12px 8px 11px;
  min-width: 158px;
}
.counter-label {
  display: block;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.counter-val {
  font-family: var(--display);
  font-size: 19px; line-height: 1.15;
  letter-spacing: .04em;
  transform: skewX(-6deg);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.counter-val .of { color: var(--muted); }
.counter.full .counter-val { color: var(--accent); }
.counter-pip {
  width: 10px; height: 10px; flex: none;
  background: var(--ct, var(--muted));
  box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}

.counter.tick { animation: tick .5s ease; }
@keyframes tick {
  0%   { background: rgba(var(--accent-rgb),.22); border-color: var(--accent); }
  40%  { background: rgba(var(--accent-rgb),.12); border-color: var(--accent); }
  100% { background: var(--panel); border-color: var(--line); }
}
.counter.tick .counter-val { animation: tickval .5s ease; }
@keyframes tickval {
  0%   { color: var(--accent); transform: skewX(-6deg) translateY(-2px); }
  100% { color: var(--text); transform: skewX(-6deg) translateY(0); }
}

/* ---------------- Panels ---------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 20px 0;
}

main.wrap { padding-bottom: 40px; }

/* ---------------- Controls ---------------- */

.controls { padding: 4px 0 0; }

.toolrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.field { position: relative; display: flex; align-items: center; }

.search-field { flex: 1 1 260px; min-width: 200px; }
.search-ico {
  position: absolute; left: 11px; color: var(--muted); display: flex; pointer-events: none;
}

input[type="search"], select {
  width: 100%;
  background: #141518;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius);
}
input[type="search"] { padding-left: 34px; }
input[type="search"]::placeholder { color: #6C737D; }
input[type="search"]:focus, select:focus { border-color: var(--accent); }
select { padding-right: 28px; cursor: pointer; }

.sort-mobile { display: none; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 38px; height: 21px; background: #26282D; border: 1px solid var(--line);
  border-radius: 4px; position: relative; transition: background .15s, border-color .15s;
}
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  background: var(--muted); border-radius: 2px; transition: transform .15s, background .15s;
}
.switch input:checked + .switch-track { background: rgba(var(--accent-rgb),.2); border-color: var(--accent); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(17px); background: var(--accent); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-label { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.switch input:checked ~ .switch-label { color: var(--text); }

.tool-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.btn {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text);
  background: #202329;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #282C33; border-color: #3A3E46; }
.btn-danger:hover { color: #FF8A75; border-color: #6E3A31; }
.btn-accent { background: var(--accent); color: #111214; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #111214; }

/* chips */
.chipgroup { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chipgroup:last-child { border-bottom: 0; }

.chipgroup-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; flex-wrap: wrap;
}
.chipgroup-title {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.chipgroup-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-family: var(--sans); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
}
.linkbtn:hover { color: var(--accent); }
.sep { color: var(--line); font-size: 11px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #17181C;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--sans); font-size: 13px;
  padding: 7px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.chip:hover { background: var(--panel-2); color: var(--text); }
.chip[aria-pressed="true"] { color: var(--text); background: var(--panel-2); border-color: #3A3E46; }
.chip[aria-pressed="false"] { opacity: .5; }
.chip[aria-pressed="false"] .chip-count { opacity: .8; }

.chip-count {
  font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--muted); letter-spacing: -.01em;
}
.chip.done .chip-count { color: var(--accent); }
.chip-dot { width: 8px; height: 8px; flex: none; background: var(--ct, var(--muted)); }

/* Category chips carry their group's hue on the dot, so the 27 chips read as
   three blocks at a glance without needing sub-headings. */
.chip.grp-97 { --ct: var(--g-missions); }
.chip.grp-94 { --ct: var(--g-collectibles); }
.chip.grp-91 { --ct: var(--g-activities); }

.chip.grp-97[aria-pressed="true"] { border-color: rgba(228,114,107,.5); background: rgba(228,114,107,.10); color: var(--g-missions-t);     --ct: var(--g-missions-t); }
.chip.grp-94[aria-pressed="true"] { border-color: rgba(111,199,232,.5); background: rgba(111,199,232,.10); color: var(--g-collectibles-t); --ct: var(--g-collectibles-t); }
.chip.grp-91[aria-pressed="true"] { border-color: rgba(224,167,90,.5);  background: rgba(224,167,90,.10);  color: var(--g-activities-t);   --ct: var(--g-activities-t); }

/* Twenty-seven category chips run well past three rows on a narrow window.
   Cap the list and let it scroll rather than push the table off-screen. */
.chipgroup[data-group="category"] .chips {
  max-height: 178px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3A3E46 transparent;
  padding-right: 2px;
}
.chipgroup[data-group="category"] .chips::-webkit-scrollbar { width: 8px; }
.chipgroup[data-group="category"] .chips::-webkit-scrollbar-thumb {
  background: #3A3E46; border-radius: 4px;
}
.chipgroup[data-group="category"] .chips::-webkit-scrollbar-track { background: transparent; }

/* ---------------- Table ---------------- */

.table-panel { padding: 0; overflow: hidden; }

.table-meta {
  display: flex; align-items: baseline; gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.table-meta .num { color: var(--text); font-size: 13px; }

.table-scroll { overflow-x: auto; }

.checklist-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.checklist-table th {
  text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #16181B;
}
.checklist-table th.c-found { padding: 12px 8px 12px 18px; }
.checklist-table th.c-info  { padding: 12px 18px 12px 14px; }

/* No region column: the freed width goes to the name and info cells. */
.c-found { width: 76px; }
.c-name  { width: 28%; }
.c-cat   { width: 16%; }

.sortbtn {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 12px 14px;
  text-align: left;
}
.sortbtn:hover { color: var(--text); }
.arrow { width: 8px; opacity: 0; }
.arrow::before { content: "\25B2"; font-size: 7px; }
th[aria-sort="ascending"]  .sortbtn { color: var(--accent); }
th[aria-sort="descending"] .sortbtn { color: var(--accent); }
th[aria-sort="ascending"]  .arrow { opacity: 1; }
th[aria-sort="descending"] .arrow { opacity: 1; transform: rotate(180deg); }

.checklist-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background .12s, opacity .12s;
}
.checklist-table tbody tr:last-child { border-bottom: 0; }
.checklist-table tbody tr:hover { background: var(--panel-2); }
.checklist-table tbody tr.is-hidden { display: none; }

.checklist-table td {
  padding: 14px;
  vertical-align: top;
}
.checklist-table td.c-found { padding-left: 18px; padding-right: 8px; }
.checklist-table td.c-info  { padding-right: 18px; }

/* checkbox */
.cb-wrap { display: inline-flex; align-items: center; }
.cb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0;
  border: 1.5px solid #3D424B;
  border-radius: 3px;
  background: #141518;
  cursor: pointer;
  position: relative;
  flex: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.cb:hover { border-color: var(--muted); }
.cb:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14), 0 0 10px rgba(var(--accent-rgb),.25);
}
.cb:checked::after {
  content: "";
  position: absolute; left: 6.5px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid #111214;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

tr.done { opacity: .62; }
tr.done:hover { opacity: .85; }
tr.done .item-title { text-decoration: line-through; color: var(--muted); text-decoration-thickness: 1px; }

.item-title { font-weight: 500; line-height: 1.4; }

.pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 6px;
  vertical-align: -5px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted);
  opacity: 0;
  transition: color .12s, border-color .12s, opacity .12s;
}
.pin:hover { color: var(--accent); border-color: #3A3E46; }
tr:hover .pin, .pin:focus-visible { opacity: 1; }
@media (hover: none) { .pin { opacity: 1; } }
tr.done .pin { opacity: 0; }
tr.done:hover .pin, tr.done .pin:focus-visible { opacity: 1; }

.tag {
  display: inline-block;
  font-size: 12px; line-height: 1.35;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #17181C;
  white-space: nowrap;
}
/* The category tag is the only tag on a row now, so it carries the group hue
   rather than the neutral grey GTA IV used beside its region tag. */
.tag-cat { color: #B9BEC7; }
.tag-cat.grp-97 { color: var(--g-missions-t);     background: rgba(228,114,107,.11); border-color: rgba(228,114,107,.38); }
.tag-cat.grp-94 { color: var(--g-collectibles-t); background: rgba(111,199,232,.11); border-color: rgba(111,199,232,.38); }
.tag-cat.grp-91 { color: var(--g-activities-t);   background: rgba(224,167,90,.11);  border-color: rgba(224,167,90,.38); }

/* info cell */
.info-cell { display: flex; gap: 10px; align-items: flex-start; }
.info-body { flex: 1 1 auto; min-width: 0; color: #C7CBD2; font-size: 13.5px; }
.info-body.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.2em; /* fallback clamp for engines without -webkit-line-clamp */
}
.info-body > *:first-child { margin-top: 0; }
.info-body > *:last-child  { margin-bottom: 0; }
.info-body p { margin: 0 0 .55em; }
.info-body ul, .info-body ol { margin: .35em 0 .7em; padding-left: 1.2em; }
.info-body li { margin: .18em 0; }
.info-body strong { color: var(--text); font-weight: 600; }
.info-body em { color: #D6D9DE; }
.info-body a { color: var(--accent); }
.info-body br { line-height: 1; }
.info-empty { color: #5F656E; font-family: var(--mono); font-size: 13px; }

.chev {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); cursor: pointer;
  transition: color .12s, border-color .12s, transform .15s;
}
.chev:hover { color: var(--accent); border-color: #3A3E46; }
.chev svg { transition: transform .15s ease; }
tr.expanded .chev svg { transform: rotate(90deg); }

/* empty state */
.empty { padding: 44px 18px 50px; text-align: center; }
.empty p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(14px);
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  color: var(--text); padding: 11px 16px; border-radius: var(--radius);
  font-size: 13.5px; z-index: 70;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* footer */
.foot {
  color: #666C75; font-size: 12.5px;
  padding: 8px 2px 0;
}
.foot p { margin: 0 0 4px; }
.foot code { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .hud-inner { gap: 16px; }
  .counter { min-width: 0; flex: 1 1 auto; }
  .hud-counters { width: 100%; }
}

@media (max-width: 820px) {
  body { font-size: 14.5px; }
  .wrap { padding: 0 12px; }
  .sort-mobile { display: flex; flex: 1 1 150px; }
  .tool-actions { margin-left: 0; width: 100%; }
  .tool-actions .btn { flex: 1 1 auto; }

  .table-scroll { overflow-x: visible; }
  .checklist-table, .checklist-table tbody, .checklist-table tr, .checklist-table td { display: block; width: auto; }
  .checklist-table thead { display: none; }
  .checklist-table { table-layout: auto; }

  .checklist-table tbody tr {
    position: relative;
    padding: 14px 14px 14px 52px;
    border-bottom: 1px solid var(--line);
  }
  .checklist-table td { padding: 0; }
  .checklist-table td.c-found {
    position: absolute; left: 14px; top: 15px; padding: 0;
  }
  .checklist-table td.c-name { font-size: 15px; margin-bottom: 8px; }
  .checklist-table td.c-cat  { display: inline-block; margin: 0 6px 8px 0; }
  .checklist-table td.c-info { padding: 0; }
}

@media (max-width: 480px) {
  .hud-pct { font-size: 40px; }
  .counter { padding: 7px 9px; }
  .counter-label { font-size: 9.5px; letter-spacing: .08em; }
  .counter-val { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .counter.tick { outline: 2px solid var(--accent); }
}