/* CIT Tools ID family (skins, vehicles, weapons, weather, interiors, animations and the smaller ID lists), design C
   "Road Atlas" (3 Nov 2026 redesign). Loads after ui.css and before each list's own stylesheet. Replaces the old
   assets/ids/ids.css for our 1,615 ID pages (that file stays as it is for the Object IDs tool).
   The idea here: an ID is an exit number. Every ID sits on a small green plaque, each group of a list starts with a
   green guide sign, and the facts of one item read like the legend of a map sheet. Only tokens from ui.css are used. */

/* ------------------------------------------------------------------ title block parts */
.page-head .checked{margin:var(--sp-2) 0 0;max-width:var(--maxw-text);font-size:var(--fs-sm);line-height:1.45;color:var(--text-2)}
.page-head > .chips{margin-top:var(--sp-3)}
/* tags under a title (Male, Job skin on CIT, Gang skin): plain labels, not buttons */
span.chip,.page-head .chips .chip{min-height:30px;padding:2px var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:700;cursor:default}
span.chip.cit{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
span.chip.gang{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
span.chip.warn{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.jump{margin:0 0 var(--sp-4);font-size:var(--fs-md)}
.jump a{display:inline-flex;align-items:center;min-height:var(--tap)}
.muted{color:var(--text-2);font-weight:400}

/* ------------------------------------------------------------------ the search box of a list */
.filter{display:grid;gap:var(--sp-2);min-width:0}
.filter > span:not(.visually-hidden){font-family:var(--font-head);font-size:var(--fs-md);font-weight:700}
.filter input:not(.input){width:100%;min-height:48px;padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text);font-size:var(--fs-md)}
.filter .hint{margin:0}
.toolbar .count{font-size:var(--fs-sm);color:var(--text-2)}
.ghost-switch small{display:block;font-size:var(--fs-sm);line-height:1.35;color:var(--text-2)}

/* ------------------------------------------------------------------ a group of a list starts with a green guide sign:
   the place or kind in white on green, the white inner border, the number of IDs on a small plaque inside the sign */
/* room between the line above the list (a hint, a jump link) and the first group sign */
#idList:not(:first-child){margin-top:var(--sp-5)}
.group{margin:0 0 var(--sp-6);scroll-margin-top:var(--sp-4)}
.group > h2,.group > .panel__head > h2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);width:fit-content;max-width:100%;margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-4);border:var(--bw) solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 3px var(--accent),inset 0 0 0 5px var(--sign-rim);font-family:var(--font-head);font-size:24px;font-weight:700;line-height:1.15}
.group > h2 .muted,.group > .panel__head > h2 .muted{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--sp-2);border:1.5px solid var(--accent-ink);border-radius:var(--radius-sm);color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums}
.group > h2 a,.group > h2 code{color:var(--accent-ink)}
.group > h2 code{background:transparent;padding:0}
.group > p{margin:0 0 var(--sp-3);max-width:var(--maxw-text);color:var(--text-2)}
.group.panel--flat > .panel__head{margin:0;padding:0;background:none;border:0}
@media (max-width:720px){.group > h2,.group > .panel__head > h2{font-size:21px}}
@media (forced-colors:active){.group > h2{border:2px solid CanvasText}}

/* ------------------------------------------------------------------ the ID tiles of the older lists (a > img, b, span, i).
   Lists built with the shared .pics/.pic parts (Weather, Vehicle IDs, Upgrades...) are styled by ui.css instead. */
.id-grid:not(.pics){display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3);margin:0;padding:0;list-style:none}
.id-grid.small:not(.pics){grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.id-grid:not(.pics) > li{position:relative;margin:0;min-width:0}
.id-grid:not(.pics) a{position:relative;display:flex;flex-direction:column;gap:2px;height:100%;min-height:var(--tap);padding:var(--sp-2) var(--sp-3) var(--sp-3);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);text-decoration:none}
.id-grid:not(.pics) a[href]:hover{border-color:var(--line-strong);background:var(--surface);color:var(--text)}
.id-grid:not(.pics) a[href]:hover > span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.id-grid:not(.pics) a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the ID: white on a green exit plaque */
.id-grid:not(.pics) a > b{align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;padding:1px 9px;border:var(--bw) solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent),inset 0 0 0 2.5px var(--sign-rim);font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.id-grid:not(.pics) a > span{font-size:var(--fs-sm);line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.id-grid:not(.pics) a > i{font-style:normal;font-size:var(--fs-sm);line-height:1.3;color:var(--ok);font-weight:700}
/* lists with pictures: the picture fills the top of the tile, the plaque sits on its top-left corner */
.id-grid.pics-grid a,.id-grid.veh-grid a{padding:0 0 var(--sp-3);overflow:hidden}
.pics-grid a > span,.pics-grid a > i,.veh-grid a > span,.veh-grid a > i{padding-inline:var(--sp-3)}
.pics-grid a > span,.veh-grid a > span{padding-top:var(--sp-2);font-size:16px}
.pics-grid img,.pics-grid .nopic{display:block;width:100%;height:150px;margin:0;object-fit:contain;background:var(--surface-2);border-bottom:var(--bw) solid var(--line)}
.pics-grid img[src*="/pics/t/"]{height:170px}
.pics-grid .nopic{border:0;border-bottom:var(--bw) dashed var(--line-strong)}
.veh-grid img{display:block;width:100%;height:auto;aspect-ratio:8 / 5;margin:0;object-fit:contain;background:var(--surface-2);border-bottom:var(--bw) solid var(--line)}
.pics-grid a > b,.veh-grid a > b{position:absolute;top:var(--sp-2);left:var(--sp-2);z-index:1;max-width:calc(100% - 56px)}
/* a model with no ID yet: the plaque turns into a plain warning label */
.id-grid a.noid{cursor:default}
.id-grid a.noid b{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);box-shadow:none;font-family:var(--font-body);font-size:var(--fs-sm)}

/* Copy ID: a small button in the corner of each tile, so the ID can be copied without opening the page */
.cid{position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:2;display:inline-grid;place-items:center;min-width:36px;height:36px;margin:0;padding:0;border:var(--bw) solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:700 var(--fs-sm)/1 var(--font-body);white-space:nowrap;cursor:pointer}
.cid::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat}
.cid::after{content:"";position:absolute;inset:-4px}
.cid:hover{border-color:var(--text);background:var(--row-hover)}
.cid.done,.cid.is-done{padding:0 var(--sp-2);border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.cid.done::before,.cid.is-done::before{content:none}
.pic > .cid{top:var(--sp-2);right:var(--sp-2)}
@media (forced-colors:active){.cid::before{background:ButtonText}}

/* ------------------------------------------------------------------ one item's page */
/* the facts, like a map legend: label over value, in a ruled box */
.facts b{font-family:var(--font-head);font-size:1.3em;font-weight:700;font-variant-numeric:tabular-nums}
dl.facts dd .shops,.facts .shops{margin:2px 0 0;padding-inline-start:1.1em;font-weight:400}
.facts .shops li + li{margin-top:2px}
dl.facts{margin:var(--sp-5) 0 0}
dl.facts .muted{font-weight:400}
.skin-top{margin:var(--sp-5) 0 0}
.skin-top.has-pic{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);align-items:start}
.skin-top dl.facts{margin-top:0}
/* the skin pictures beside the facts (not the .pics grid of the lists) */
.skin-top .pics{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0;padding:0}
.skin-top .pics figure{margin:0;padding:var(--sp-2);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);text-align:center}
.skin-top .pics img{display:block;height:230px;width:auto;margin:0 auto}
.skin-top .pics figcaption{max-width:140px;margin:var(--sp-1) auto 0;font-size:var(--fs-sm);line-height:1.35;color:var(--text)}
.pics.render figure.cit{border-color:var(--ok)}
.pics.render figure.cit b{color:var(--ok)}
.skin-top .pics.render img{height:340px;aspect-ratio:5 / 8}
.skin-top .pics.render figcaption{max-width:200px}
@media (max-width:900px){.skin-top.has-pic.two{grid-template-columns:minmax(0,1fr)}.skin-top.two .pics{justify-content:center}}
@media (max-width:620px){.skin-top.has-pic{grid-template-columns:minmax(0,1fr)}.skin-top .pics{justify-content:center}}
@media (max-width:460px){.skin-top .pics.render img{height:250px}}

/* vehicle and weapon pictures: drawn on a plain legend-blue plate (no glow) */
.veh-pics{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0 0}
.veh-pics.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.veh-pics.one{max-width:560px}
.veh-pic{margin:0;padding:var(--sp-3);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.veh-pic img{display:block;width:100%;max-width:800px;height:auto;aspect-ratio:8 / 5;margin:0 auto}
.veh-pic figcaption{margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:1.4;color:var(--text);text-align:center}
.veh-pic.cit{border-color:var(--ok)}
.veh-pic.cit b{color:var(--ok)}
@media (max-width:620px){.veh-pics.two{grid-template-columns:minmax(0,1fr)}}

/* "On CIT" and other boxed parts: a white sheet; the CIT one has a green edge all round */
.card{margin:var(--sp-5) 0 0;padding:var(--sp-4) var(--sp-5);border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface)}
.card > h2{margin:0 0 var(--sp-3);font-size:var(--fs-xl)}
.card.cit{border:2px solid var(--accent)}
.card ul,.card ol{margin:var(--sp-2) 0 0;padding-inline-start:1.3em}
.card ul li + li,.card ol li + li{margin-top:var(--sp-1)}
.card p + p,.card > p{margin-top:var(--sp-3)}
.card .btn{margin-top:var(--sp-1)}
.cit-row + .cit-row{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--bw) solid var(--line)}
.cit-row > h3{margin:0 0 var(--sp-2)}
.cit-row .facts{margin-top:var(--sp-2)}
.cit-row p{margin-top:var(--sp-3)}
.card.cit + .facts{margin-top:var(--sp-5)}
@media (max-width:620px){.card{padding:var(--sp-4)}}

/* code lines, each with its Copy button */
div.code{margin:var(--sp-3) 0 0;border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.code-row{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-top:var(--bw) solid var(--line)}
.code-row:first-child{border-top:0}
.code-row:nth-child(even){background:var(--zebra)}
.code-row code{flex:1;min-width:0;padding:0;background:none;font-size:15px;line-height:1.45}
.code-row .copy{flex:none;min-height:40px}
@media (max-width:620px){.code-row{flex-wrap:wrap;padding-inline-start:var(--sp-3)}}
.copy-helper{position:fixed;top:0;left:0;opacity:0;pointer-events:none}

/* default colours of a vehicle: the swatch, then the colour IDs */
.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-3) 0 0;padding:0;list-style:none}
.swatches li{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);margin:0;font-size:var(--fs-sm);color:var(--text)}
.swatches svg{display:block;width:64px;height:30px;border:var(--bw) solid var(--line-strong);border-radius:var(--radius-sm)}
.sw-ids{font-weight:700;font-variant-numeric:tabular-nums}
.sw-names{color:var(--text-2)}

/* handling and stats tables */
table.handling td:first-child{width:42%}
.handling td .muted{font-size:var(--fs-sm)}
.stats td:first-child code{overflow-wrap:normal}
@media (max-width:620px){table.handling td:first-child{width:auto}.stats .muted{overflow-wrap:anywhere}}

/* previous and next item: two quiet buttons at the ends of the row */
.pager{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-6) 0 0}
.pg{display:inline-flex;align-items:center;min-height:var(--tap);padding:var(--sp-2) var(--sp-4);border:var(--bw) solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-weight:700;text-decoration:none}
.pg:hover{border-color:var(--text);background:var(--row-hover);color:var(--text);text-decoration:none}
.pg.next{margin-inline-start:auto}

/* related pages and the "Nothing found" box */
.more-links{margin:var(--sp-6) 0 0;gap:var(--sp-1) var(--sp-5)}
.more-links a{display:inline-flex;align-items:center;min-height:var(--tap)}
.none:not(.empty){margin:var(--sp-3) 0;padding:var(--sp-4);border:var(--bw) dashed var(--line-strong);border-radius:var(--radius);color:var(--text-2)}
.empty.none{margin:0 0 var(--sp-4)}
.cit-tip{max-width:52rem}

/* the ID list a detail page belongs to (aria-current="true", 6 Nov 2026): the list page itself gets the full green
   sign from ui.css (aria-current="page"); its detail pages show the same link framed, with a green base line */
.subnav a[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 -4px 0 var(--accent)}
@media (forced-colors:active){.subnav a[aria-current="true"]{border:2px solid CanvasText}}