/* ── keymap library ───────────────────────────────────────────────────────
   The community config pages, built out of the site's existing vocabulary
   rather than a second one.

   This file previously described a dark theme — near-white text, white
   hairline borders, translucent white cards — on a site whose page is
   #E9ECF1. The sensitivity numbers, which are the only reason anyone opens
   this page, rendered #e2e8f0 on #E9ECF1 and could not be read at all. What
   follows is the same page rebuilt on the tokens in style.css.

   The organising idea is inherited, not invented: the keycap is the site's
   one rounded shape, and this is the one page where keycaps are literally the
   subject. Filters are keycaps because the archive's filters are keycaps.
   Keybinds are keycaps because they *are* keys. Everything else stays square
   and quiet, and the numbers get the mono face they always should have had. */

/* ── header ─────────────────────────────────────────────────────────────── */
.kml-head{max-width:var(--measure);margin-bottom:26px}
.kml-h1{font-family:var(--disp);font-weight:800;font-stretch:112%;
  font-size:clamp(28px,4.4vw,44px);line-height:1.06;letter-spacing:-.015em;
  margin:0 0 12px}
.kml-intro{font-size:17px;line-height:1.6;color:var(--body);margin:0}

/* ── filters ────────────────────────────────────────────────────────────
   The same sticky strip and the same keycaps the archive uses, so moving
   between the two feels like one site with two taxonomies rather than two
   sites. Games take a two-character cap; the device toggle takes an icon,
   because "PC" and "Mobile" is a distinction a shape makes faster than a
   word does. */
.kml-filters{position:sticky;top:0;z-index:20;background:var(--field);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:10px 0 11px;margin-bottom:clamp(26px,4vw,40px)}
.kml-filters__in{display:flex;gap:14px 18px;align-items:center;flex-wrap:wrap}
.kml-filter-set{list-style:none;display:flex;gap:7px;margin:0;padding:0 2px 3px;
  overflow-x:auto;scrollbar-width:none;max-width:100%;
  /* Same signal the archive's key row uses: the row scrolls on a phone and the
     fade is the only thing that says so. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.kml-filter-set::-webkit-scrollbar{display:none}
@media(min-width:900px){.kml-filter-set{-webkit-mask-image:none;mask-image:none}}
.kml-filter-set li{flex:none}
.kml-devices{margin-inline-start:auto}
.kml-count{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:11.5px;color:var(--mute);white-space:nowrap}
@media(max-width:640px){
  .kml-devices{margin-inline-start:0}
  .kml-count{width:100%}
}

/* ── card ───────────────────────────────────────────────────────────────── */
.kml-grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:1fr}
@media(min-width:760px){.kml-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.kml-grid{grid-template-columns:repeat(3,1fr)}}
/* The li is the grid item and the card is what people see, so the card has to
   be the full height of the track or the "Full config" link floats mid-air. */
.kml-grid > li{display:flex}

.kml-card{background:var(--plate);border:1px solid var(--line);
  padding:18px 18px 16px;display:flex;flex-direction:column;width:100%;
  transition:border-color .12s,transform .12s}
.kml-card:hover{border-color:var(--bind);transform:translateY(-2px)}
.kml-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.kml-author{font-family:var(--disp);font-weight:700;font-stretch:106%;
  font-size:15px;color:var(--ink);text-decoration:none;letter-spacing:-.005em}
.kml-author:hover{color:var(--bind)}
.kml-date{font-family:var(--mono);font-size:11px;color:var(--mute);
  white-space:nowrap}
.kml-desc{font-size:14.5px;line-height:1.55;color:var(--body);
  margin:0 0 14px}

/* ── vote ───────────────────────────────────────────────────────────────
   A keycap you press: the same 2px of travel the archive's filters have, so
   the affordance is already familiar before it is discovered. */
.kml-vote{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;
  background:var(--plate);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 2px 0 rgba(16,19,25,.14);
  padding:5px 9px 5px 7px;color:var(--ink);font:inherit;cursor:pointer;
  transition:transform .09s,box-shadow .09s,background-color .12s,border-color .12s}
.kml-vote:hover{border-color:var(--bind)}
.kml-vote:active,.kml-vote--on{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.kml-vote--on{background:var(--bind);border-color:var(--bind);color:#fff}
.kml-vote-n{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:12px}
.kml-vote-label{font-family:var(--disp);font-weight:600;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.kml-vote--on .kml-vote-label{color:rgba(255,255,255,.72)}

/* ── the numbers ────────────────────────────────────────────────────────
   A config is a spec sheet, so it is set like one: the label small and quiet
   in the display face, the value large and tabular in the mono face. This is
   the block that was invisible. */
/* Hairlines come from the cells' own borders, not from a background bleeding
   through a 1px gap: auto-fill leaves empty tracks on the last row, and with
   the bleed technique those rendered as grey phantom cells for values nobody
   submitted. */
/* 84px, not 62px, and labels wrap instead of clipping. These cells used to
   hold invented short names ("2× Scope"); they now hold the games' own wording
   ("Tactical Scope (2×)", "Camera TPP (no scope)"), and a label truncated to
   "TACTICAL S…" on the one page built to be copied is the same class of
   failure as a number nobody could read. The cell is a column with the value
   pinned to the bottom, so a two-line label does not shove its number out of
   line with the ones beside it. */
.kml-spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  border:1px solid var(--line);border-width:1px 0 0 1px;margin:0 0 14px}
.kml-spec div{background:var(--plate);padding:7px 8px 8px;
  border:1px solid var(--line);border-width:0 1px 1px 0;
  display:flex;flex-direction:column;justify-content:space-between}
.kml-spec dt{font-family:var(--disp);font-weight:600;font-stretch:108%;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;
  color:var(--mute);margin-bottom:5px;overflow-wrap:anywhere}
.kml-spec dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:16px;color:var(--ink);line-height:1}

/* ── keybinds ───────────────────────────────────────────────────────────
   The signature of the page. A keybind was a table cell of plain text on a
   site whose entire visual argument is that a binding looks like a keycap
   floating over a game. Now it looks like one. */
.kml-binds{margin:0 0 14px}
.kml-binds > summary{font-family:var(--disp);font-weight:600;font-stretch:108%;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:6px 0}
.kml-binds > summary:hover{color:var(--ink)}
.kml-binds > summary::-webkit-details-marker{display:none}
.kml-binds[open] > summary{color:var(--ink)}
.kml-bind-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.kml-bind{display:flex;align-items:center;gap:9px}
.kml-bind__a{font-size:13.5px;color:var(--body);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kml-bind__dots{flex:1;border-bottom:1px dotted var(--line);min-width:12px}

.kml-detail-link{margin-top:auto;padding-top:12px;display:inline-flex;
  align-items:center;gap:6px;font-family:var(--disp);font-weight:600;
  font-stretch:106%;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bind);text-decoration:none}
.kml-detail-link:hover{text-decoration:underline;text-underline-offset:3px}

.kml-empty{padding:40px 0;color:var(--mute);font-size:16px}

/* ── pager ──────────────────────────────────────────────────────────────── */
.kml-pager{display:flex;align-items:center;gap:16px;margin:32px 0 0;
  font-family:var(--mono);font-size:12px;color:var(--mute)}
.kml-page-btn{font-family:var(--disp);font-weight:600;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--bind);
  text-decoration:none}
.kml-page-btn:hover{text-decoration:underline;text-underline-offset:3px}

/* ── submit ─────────────────────────────────────────────────────────────── */
.kml-submit-wrap{margin-top:clamp(40px,6vw,64px);padding-top:32px;
  border-top:1px solid var(--line);max-width:640px}
.kml-submit-h{font-family:var(--disp);font-weight:800;font-stretch:110%;
  font-size:22px;margin:0 0 10px;letter-spacing:-.01em}
.kml-login-note{font-size:14.5px;color:var(--body);margin:0 0 18px}
.kml-login-note a{color:var(--bind);text-underline-offset:3px}
.kml-logout-btn{background:none;border:0;padding:0;cursor:pointer;
  color:var(--bind);font:inherit;text-decoration:underline;text-underline-offset:3px}
.kml-fieldset{border:1px solid var(--line);padding:14px 16px 16px;margin:16px 0}
.kml-fieldset legend{font-family:var(--disp);font-weight:600;font-stretch:108%;
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);padding:0 6px}
.kml-sens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px}
.kml-sens-field label{display:block;font-family:var(--disp);font-weight:600;
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);margin-bottom:4px}
.kml-sens-field input{width:100%;padding:7px 9px;background:var(--plate);
  border:1px solid var(--line);color:var(--ink);
  font:700 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.kml-sens-field input:focus{outline:none;border-color:var(--bind);
  box-shadow:0 0 0 3px rgba(43,76,255,.16)}
.kml-msg{padding:9px 12px;font-size:14px;margin-bottom:14px}
.kml-msg--ok{background:rgba(43,76,255,.08);color:var(--bind);
  border-inline-start:3px solid var(--bind)}
.kml-msg--err{background:rgba(214,39,74,.07);color:var(--flag);
  border-inline-start:3px solid var(--flag)}

/* ── detail page ────────────────────────────────────────────────────────── */
.kml-breadcrumb{font-family:var(--disp);font-weight:600;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--mute);
  margin-bottom:22px}
.kml-breadcrumb a{color:var(--mute);text-decoration:none}
.kml-breadcrumb a:hover{color:var(--bind)}
.kml-breadcrumb span{color:var(--ink)}
.kml-detail{max-width:var(--measure)}
.kml-detail-head{margin-bottom:20px}
.kml-detail-title{font-family:var(--disp);font-weight:800;font-stretch:112%;
  font-size:clamp(26px,3.8vw,38px);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 14px}
.kml-detail-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kml-badge{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--disp);font-weight:600;font-stretch:108%;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;
  border:1px solid var(--line);background:var(--plate);color:var(--ink)}
.kml-detail-desc{font-size:17px;line-height:1.62;color:var(--body);
  margin:0 0 28px}
.kml-detail-section{margin-bottom:28px}
.kml-detail-sh{display:flex;align-items:center;gap:8px;
  font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
/* Section marks are set off the heading's own colour but not its size — at
   11px an icon reads as lint, so these two are pinned. */
.kml-detail-sh .i,.kml-binds > summary .i{width:15px;height:15px}
.kml-detail .kml-spec{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.kml-detail .kml-spec dd{font-size:20px}
.kml-detail .kml-bind-list{grid-template-columns:1fr;max-width:420px}

.kml-affiliate-cta{background:var(--plate);border-inline-start:3px solid var(--bind);
  padding:16px 20px;margin:28px 0}
.kml-affiliate-cta p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}
.kml-affiliate-cta a{color:var(--bind);font-weight:600;text-underline-offset:3px}

.kml-back-nav{display:flex;gap:20px;flex-wrap:wrap;margin-top:32px;
  padding-top:20px;border-top:1px solid var(--line)}
.kml-back-link,.kml-submit-link{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--disp);font-weight:600;font-stretch:106%;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--bind);
  text-decoration:none}
.kml-back-link:hover,.kml-submit-link:hover{text-decoration:underline;
  text-underline-offset:3px}

@media print{.kml-filters,.kml-vote,.kml-submit-wrap,.kml-affiliate-cta{display:none}}

/* ── provenance ───────────────────────────────────────────────────────────
   A config is either something a player sent us or something we wrote, and a
   reader must be able to tell at a glance which one they are reading.

   The mark for ours is deliberately the keycap's opposite: square, unfilled,
   no shadow, dashed. The rounded pressable shape on this site means "a key, a
   filter, a thing you act on"; an editorial baseline is none of those. The
   dash carries the rest of the meaning — this is a placeholder holding the
   spot until somebody's real config takes it. */
.kml-tag-editorial{
  font-family:var(--disp);font-weight:600;font-stretch:106%;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  padding:3px 6px;border:1px dashed var(--line);border-radius:0;
  white-space:nowrap;flex:none;
}

/* Same dashed rule turned on its side, so the card tag and the page notice
   read as one statement rather than two unrelated boxes. Sits inside the
   detail header, above the description it qualifies. */
.kml-editorial-note{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--plate);border-inline-start:3px dashed var(--line);
  padding:12px 16px;margin:16px 0 0;
  font-size:13.5px;line-height:1.55;color:var(--body);
}
.kml-editorial-note .i{width:16px;height:16px;flex:none;margin-top:2px;color:var(--mute)}
.kml-editorial-note a{color:var(--bind);font-weight:600;text-underline-offset:3px}

/* ── keybind entry ────────────────────────────────────────────────────────
   The one field on the site whose contents are literally a key, so it is the
   one input that gets to be a keycap: mono face, centred, and it presses down
   on focus with the same 2px the vote button and the archive filters use. */
.kml-bind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:10px 12px}
.kml-bind-field label{display:block;font-family:var(--disp);font-weight:600;
  font-stretch:106%;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mute);margin-bottom:5px}
.kml-bind-field input{
  width:100%;padding:6px 9px;background:var(--plate);color:var(--ink);
  border:1px solid var(--line);border-radius:5px;
  box-shadow:0 2px 0 rgba(16,19,25,.10);
  font-family:var(--mono);font-size:12.5px;text-align:center;
}
.kml-bind-field input::placeholder{color:var(--mute);opacity:.55}
.kml-bind-field input:focus{
  outline:none;border-color:var(--bind);
  transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,0);
}

/* ── field notes ──────────────────────────────────────────────────────────
   One job each: the note under a legend explains the game, the note under the
   button explains what happens after you press it. Both stay in body serif so
   they read as sentences, not as more labels. */
.kml-field-note{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--mute)}
.kml-form-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}

@media(prefers-reduced-motion:reduce){
  .kml-bind-field input:focus{transform:none;box-shadow:0 2px 0 rgba(16,19,25,.10)}
}