/* ==== THEME TOKENS ======================================================= */
:root{
  /* Dark-first palette (accessible contrast) */
  --bg:            #0b0f17;
  --panel:         #111827;
  --panel-alt:     #0f1623;
  --ink:           #e5e7eb;
  --muted:         #9ca3af;
  --border:        #1f2937;
  --accent:        #60a5fa;
  --accent-weak:   #334155;

  --radius: .9rem;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Light theme (optional, toggled with [data-theme="light"]) */
:root[data-theme="light"]{
  --bg:#fffdf8; --panel:#ffffff; --panel-alt:#fafafa;
  --ink:#111827; --muted:#6b7280; --border:#e5e7eb;
  --accent:#2563eb; --accent-weak:#dbeafe;
}

/* ==== BASE =============================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 800px at 10% -10%, #0e1422 0%, var(--bg) 60%) no-repeat, var(--bg);
  color:var(--ink);
}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
a{color:var(--ink)} a:hover{color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:.25rem}

/* ==== HEADER / NAV ======================================================= */
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(17,24,39,.6);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:block;height:auto}
.top-nav{
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.6rem; text-decoration:none;
}
.nav-links{display:flex; align-items:center; gap:16px}
.nav-link{
  text-decoration:none; color:inherit; font-weight:500; padding:6px 2px;
}
.nav-link.active{ border-bottom:2px solid currentColor; }
.theme-btn{
  margin-left:12px; border:1px solid var(--border); background:var(--panel-alt);
  color:var(--ink); padding:.4rem .6rem; border-radius:.6rem; cursor:pointer;
}
.theme-btn:hover{ background:var(--border); }

/* ==== HERO / SECTIONS ==================================================== */
.section{padding:2rem 0}
.hero{padding:3rem 0 1rem;text-align:center}
.hero h1{font-size:clamp(2rem,3vw + 1rem,3rem);margin:0 0 .4rem}
.lead{color:var(--muted)}

/* ==== SECTION HEAD: filters + search ==================================== */
.section-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:1rem;
  align-items:end;
  margin-bottom:1rem;
}
.section-head h2{margin:0}
.filters{
  grid-column: 1 / -1;
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}
.filter-categories{
  display:flex; gap:1rem; align-items:center;
  border:1px solid var(--border);
  background:var(--panel-alt);
  padding:.45rem .6rem; border-radius:.6rem; margin:0;
}
.filter-categories legend{font-size:.85rem;color:var(--muted);padding:0 .35rem}
.filter-categories label{display:flex;gap:.45rem;align-items:center}
.filter-sort{display:flex;gap:.75rem;align-items:center}
#sort, #search{
  appearance:none; border:1px solid var(--border); background:var(--panel);
  color:var(--ink); padding:.5rem .6rem; border-radius:.6rem; font:inherit;
}
.only-unlocked{display:flex;gap:.4rem;align-items:center}
.count{margin-left:auto;color:var(--muted);font-weight:600}

.search-wrap{position:relative;display:inline-flex;align-items:center;justify-self:end}
#search{padding-left:2.25rem; min-width:240px}
.search-wrap::before{content:"🔎";position:absolute;left:.6rem;opacity:.8;font-size:.95rem}
.kbd{
  margin-left:.4rem; border:1px solid var(--border); border-bottom-width:2px;
  padding:.05rem .35rem; border-radius:.35rem; font-size:.75rem; color:var(--muted);
  background:var(--panel);
}

/* ==== GRID =============================================================== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

/* ==== CARD =============================================================== */
.card{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column; gap:.5rem;
  box-shadow: var(--shadow);
}
.card-head{padding:.9rem 1rem 0; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.item-name{margin:0;font-size:1.05rem}

/* IMAGE + zoom button */
.thumb-wrap{
  position:relative;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#0b1321;
  aspect-ratio: 4 / 3;
  padding:.5rem;
}
.thumb{width:100%;height:100%;object-fit:contain;display:block; filter: drop-shadow(0 4px 18px rgba(0,0,0,.35));}
.zoom-btn{
  position:absolute; right:.5rem; bottom:.5rem;
  border:1px solid var(--border); border-radius:.5rem;
  padding:.25rem .45rem;
  background:rgba(0,0,0,.35);
  color:#f3f4f6; font-size:.95rem; line-height:1;
  cursor:pointer;
}
/* Zoom button hover (ensure this rule is closed) */
.zoom-btn:hover{
  background:rgba(0,0,0,.55);
}

/* Lightbox (full-screen preview) */
.lightbox.hidden{display:none}
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center; z-index:2000;
}
.lightbox img{
  max-width:92vw; max-height:92vh; object-fit:contain; border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,.7);
}
.lightbox-close{
  position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); background:rgba(255,255,255,.12);
  color:#fff; font-size:28px; line-height:1; cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.22)}

/* Badges (colors for "Ready" and "Locked") */
.badge{
  display:inline-block; margin-left:.5rem; padding:.15rem .45rem; border-radius:.4rem;
  font-size:.75rem; font-weight:700; line-height:1; vertical-align:middle;
}
.badge-available{ background:#14532d; color:#dcfce7; }  /* dark green on light mint */
.badge-locked{    background:#78350f; color:#fde68a; }  /* brown on soft yellow */

/* coah/styles.css patch v2025-08-17T07:36Z — controls row polish */

/* Layout */
.controls { margin-block: 1rem 0.5rem; }
.controls-row{
  display:flex; align-items:center; flex-wrap:wrap;
  gap: .6rem 1rem;
}

/* Labels */
.control-label{
  font-size:.9rem; color:var(--muted, #a3a3a3);
  margin-right:.25rem;
}

/* Inputs / selects */
.control, .control.search{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background: var(--surface-2, #191919);
  color:#eaeaea;
  border:1px solid var(--border, #2a2a2a);
  border-radius:.5rem;
  height: 38px;
  line-height: 38px;
  padding: 0 .75rem;
}

/* Selects: add a tiny chevron spacing feel (no image to satisfy CSP) */
select.control { padding-right: 1.75rem; }

/* Search width on desktop; shrinks gracefully */
.control.search{
  min-width: 220px;
  width: clamp(180px, 28vw, 320px);
}

/* Checkbox group */
.control-checkbox{
  display:flex; align-items:center; gap:.5rem;
  padding: .25rem .5rem;
  border:1px solid var(--border, #2a2a2a);
  background: var(--surface-2, #191919);
  border-radius:.5rem;
  height:38px;
}
.control-checkbox input{ width:16px; height:16px; }

/* Item count */
.item-count{
  margin-top:.5rem;
  color: var(--muted, #a3a3a3);
  font-size:.95rem;
}

/* Focus states */
.control:focus, .control.search:focus, .control-checkbox:focus-within, select.control:focus{
  outline:none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,.25);
}

/* Mobile tidy */
@media (max-width: 720px){
  .controls-row{
    gap:.5rem;
  }
  .control.search{
    flex:1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* Keep skip link hidden until focused */
.skip-link{
  position:absolute; left:8px; top:-40px;
  background:#0f0f0f; color:#fff; padding:.4rem .6rem; border-radius:.35rem;
  transition: top .2s ease; z-index:1000; text-decoration:none; border:1px solid #2a2a2a;
}
.skip-link:focus{ top:8px; }

/* coah/styles.css patch v2025-08-17T08:14Z – uniform card images */
.grid .card .image-container{
  position: relative;
  width: 100%;
  /* Keep all cards uniform: 4:3 window (adjust if you prefer 16:9) */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: .6rem;
  background: #0e0e0e;
}
.grid .card .image-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the window without stretching */
  display: block;
}
.grid .card .magnify-btn{
  position: absolute;
  right: .5rem; bottom: .5rem;
  border: 1px solid var(--border, #2a2a2a);
  background: rgba(0,0,0,.45);
  color: #fff;
  border-radius: .5rem;
  padding: .25rem .5rem;
  cursor: pointer;
}
/* coah/styles.css patch v2025-08-17T08:32Z — image contain + modal */

.grid .card .image-container{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;          /* uniform card boxes */
  overflow: hidden;
  border-radius: .6rem;
  background: #0e0e0e;          /* letterbox background for contain */
}

/* Show the whole image inside the box */
.grid .card .image-container img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* <-- was cover; now shows entire image */
  display: block;
}

/* Magnify button (restored) */
.grid .card .magnify-btn{
  position: absolute;
  right: .5rem; bottom: .5rem;
  border: 1px solid var(--border, #2a2a2a);
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: .5rem;
  padding: .25rem .5rem;
  cursor: pointer;
  z-index: 2;
}

/* Fullscreen modal overlay */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem;
}

/* Full-res image in modal */
.modal-img{
  max-width: min(92vw, 1600px);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
/* New card layout */
.card h3 {
  margin: 0 0 .25rem;
  font-size: 1rem;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}

.badge {
  padding: .2rem .4rem;
  border-radius: .3rem;
  font-size: .8rem;
  font-weight: bold;
}
.badge.locked { background: #922; color: #fff; }
.badge.unlocked { background: #292; color: #fff; }

.condition {
  font-size: .85rem;
  font-weight: bold;
}
.condition.factory-new { color: darkgreen; }
.condition.minimal-wear { color: lightgreen; }
.condition.field-tested { color: goldenrod; }
.condition.well-worn { color: #e67e22; }
.condition.battle-scarred { color: darkred; }

.wear-wrapper {
  margin: .5rem 0;
}
.wear-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, darkgreen, lightgreen, goldenrod, #e67e22, darkred);
}
.wear-value {
  font-size: .75rem;
  text-align: center;
  margin-top: .25rem;
  opacity: .8;
}

.special, .trade {
  font-size: .8rem;
  margin-top: .25rem;
}

/* coah/styles.css patch v2025-08-17T09:07Z — stable card layout, wear bar, modal */

/* Title on top */
.card-title{ margin:0 0 .35rem; font-size:1rem; }

/* Badge + condition row */
.card-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.badge{ padding:.2rem .45rem; border-radius:.35rem; font-size:.8rem; font-weight:700; }
.badge.unlocked{ background:#1f4421; color:#eaffea; }
.badge.locked{ background:#5a1b1b; color:#ffecec; }

.condition{ font-size:.85rem; font-weight:700; }
.condition.cond-fn{ color:#0a6a0a; }      /* dark green */
.condition.cond-mw{ color:#3dbb3d; }      /* light green */
.condition.cond-ft{ color:#d1a81d; }      /* yellow */
.condition.cond-ww{ color:#d17a3a; }      /* light red/orange */
.condition.cond-bs{ color:#8b1f1f; }      /* dark red */

/* Image area */
.image-container{ position:relative; width:100%; aspect-ratio: 4 / 3; overflow:hidden; border-radius:.6rem; background:#0e0e0e; }
.image-container img{ width:100%; height:100%; object-fit: contain; display:block; }
.magnify-btn{
  position:absolute; right:.5rem; bottom:.5rem;
  border:1px solid var(--border,#2a2a2a); background:rgba(0,0,0,.55); color:#fff;
  border-radius:.5rem; padding:.25rem .5rem; cursor:pointer; z-index:2;
}

/* Wear bar + pointer + float */
.wear-wrapper{ margin:.6rem 0 .4rem; }
.wear-bar{
  position:relative; height:10px; border-radius:6px;
  background: linear-gradient(90deg,#0a6a0a 0%, #3dbb3d 22%, #d1a81d 48%, #d17a3a 72%, #8b1f1f 100%);
}
.wear-value{ margin-top:.25rem; font-size:.78rem; text-align:center; opacity:.85; }

/* Bottom lines */
.special, .trade{ font-size:.85rem; margin-top:.25rem; }

/* Fullscreen modal for magnify */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:9999; padding:2rem; }
.modal-img{ max-width:min(92vw,1600px); max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:.5rem; box-shadow:0 12px 40px rgba(0,0,0,.6); }

/* Title centered */
.card-title { margin: 0 0 .35rem; font-size: 1rem; text-align: center; }

/* Proportional wear bar (FN 7.99%, MW 6.99%, FT 22.999%, WW 6.99%, BS 55%) */
.wear-bar{
  position:relative; height:10px; border-radius:6px;
  background: linear-gradient(
    90deg,
    #0a6a0a 0%,     #0a6a0a 7.99%,    /* FN */
    #3dbb3d 7.99%,  #3dbb3d 14.98%,   /* MW */
    #d1a81d 14.98%, #d1a81d 37.979%,  /* FT */
    #d17a3a 37.979%,#d17a3a 44.969%,  /* WW */
    #8b1f1f 44.969%,#8b1f1f 100%      /* BS */
  );
}
/* coah/styles.css patch v2025-08-17T10:22Z — center title, flip pointer, bold labels */

/* Center the card title */
.card-title{ margin:0 0 .35rem; font-size:1rem; text-align:center; }

/* Proportional wear bar color bands */
.wear-bar{
  position:relative; height:10px; border-radius:6px;
  background: linear-gradient(
    90deg,
    #0a6a0a 0%,     #0a6a0a 7.99%,     /* FN 0–0.0799 */
    #3dbb3d 7.99%,  #3dbb3d 14.98%,    /* MW 0.08–0.1499 */
    #d1a81d 14.98%, #d1a81d 37.979%,   /* FT 0.15–0.37999 */
    #d17a3a 37.979%,#d17a3a 44.969%,   /* WW 0.38–0.4499 */
    #8b1f1f 44.969%,#8b1f1f 100%       /* BS 0.45–1 (≈55%) */
  );
}

/* Bold labels for Special / Trade lock */
.special strong, .trade strong { font-weight:700; }
.trade { margin-top:.25rem; }

/* Fix: pointer sits ABOVE the bar, pointing DOWN, tip touching the bar */
.wear-pointer{
  position: absolute;
  left: 0;                 /* set by JS as left:% */
  bottom: 100%;            /* place the triangle above the bar */
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #fff;   /* ▼ points downward */
  margin-bottom: 2px;           /* tiny breathing room */
}
.magnify-btn{ transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.magnify-btn:hover, .magnify-btn:focus-visible{
  transform: scale(1.06);
  background-color: rgba(0,0,0,.72);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  outline: none;
}

}