/* beindie tool — Steam page inspector */

#siRoot .split > .stack{min-width:0;grid-template-columns:minmax(0,1fr)}
#siRoot .panel{min-width:0}

.si-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

.si-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}
.si-search .btn{height:45px}
@media (max-width:620px){
  .si-search{grid-template-columns:1fr}
  .si-search .btn{justify-self:start;height:auto}
}

.si-indet{width:35%;background:var(--accent);animation:si-slide 1.1s ease-in-out infinite}
@keyframes si-slide{0%{margin-left:0}50%{margin-left:65%}100%{margin-left:0}}
@media (prefers-reduced-motion:reduce){.si-indet{animation:none;width:100%}}

.si-card{padding-top:0}
.si-hero{border:1px solid var(--line);background:var(--shade);aspect-ratio:920/430;overflow:hidden}
.si-hero img{width:100%;height:100%;object-fit:cover;display:block}
.si-hero__none{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--pixel);font-size:10px;letter-spacing:.05em;color:var(--muted);
}
.si-title h2{letter-spacing:-.03em}
.si-title .dek{max-width:60ch}

.si-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.si-fact{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.si-fact dt{
  font-family:var(--pixel);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.si-fact dd{margin:7px 0 0;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:760px){.si-facts{grid-template-columns:repeat(2,1fr)}}

.si-bar{height:9px;background:var(--line);border:1px solid var(--line-strong)}
.si-bar i{display:block;height:100%;background:var(--blue)}

.si-audit{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line)}
.si-check{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
  padding:13px 16px;background:var(--paper-3);font-size:15px;line-height:1.45;
}
.si-check__tag{
  font-family:var(--pixel);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 7px;border:1px solid var(--ink);white-space:nowrap;min-width:46px;text-align:center;
}
.si-check.is-pass .si-check__tag{background:var(--green);color:#141414}
.si-check.is-warn .si-check__tag{background:var(--orange);color:#141414}
.si-check.is-fail .si-check__tag{background:var(--red);color:#141414}
.si-check b{font-weight:600;display:block}
.si-check__d{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;max-width:62ch}
.si-check__w{font-family:var(--pixel);font-size:9px;color:var(--muted);letter-spacing:.05em}
@media (max-width:620px){
  .si-check{grid-template-columns:auto 1fr;gap:12px}
  .si-check__w{display:none}
}

#siCmpPane .form-grid .field > .btn{justify-self:start}

table.si-cmp{min-width:520px}
.si-cmp th[scope="row"]{
  text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  white-space:nowrap;width:1%;
}
.si-cmp td{text-align:right}

.si-rules{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:15px;color:var(--muted);line-height:1.5}
.si-rules li{padding-left:18px;position:relative}
.si-rules li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--accent);border:1px solid var(--ink)}
.si-rules b{color:var(--ink);font-weight:600}

.chip.muted{color:var(--muted)}

/* Shareable-state bar under the tool head (CONTRACT-v4 §4.F.3).
   The button is a plain .copy from site.css; the JS keeps its data-copy
   attribute pointed at the current URL, hash and all. */
.tool-share{border-bottom:1px solid var(--line);background:var(--paper-2)}
.tool-share .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:14px}
.tool-share .hint{margin:0;max-width:74ch}
/* The hint is the only place that says what a shared link carries. It used
   to be hidden below 560px, which is where most people read it. */
@media (max-width:560px){.tool-share .hint{flex:1 1 100%}}

/* ---------- copy buttons: the failure has to be as loud as the success ----------
   site.css styles .is-copied, and site.js only ever reaches that branch. A
   clipboard that is unavailable (a non-secure origin) or refused (a denied
   permission) left the button sitting still, which reads exactly like a
   silent success. The tool scripts handle their own copy buttons and set one
   of these two states every time. */
.is-copyfail{background:var(--red);color:#141414;border-color:var(--ink)}
.copy-note{
  flex:1 1 100%;margin:0;font-size:12.5px;line-height:1.45;
  color:var(--red);font-weight:600;
}
.copy-note:empty{display:none}

/* Anything driven by a thumb: the shared chrome is sized for a mouse, and
   30px of button is not a tap target. */
@media (pointer:coarse){
  .copy,.chip,.seg button,.btn-sm{min-height:40px}
  .copy,.seg button{display:inline-flex;align-items:center;justify-content:center}
}

/* On a phone the side-by-side table is wider than the screen. Without a pinned
   first column the row label scrolls out of view and every number after it
   loses its subject. */
@media (max-width:620px){
  .si-cmp th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--paper-2)}
}