/* Game services page (pages/services.js). Tokens only. */

/* summary strip: each tile jumps to its section */
.svc-tile { cursor: pointer; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.svc-tile:hover { border-color: var(--border-2); background: var(--panel-2); }
.svc-tile:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.svc-tile .k-label .icon { width: 14px; height: 14px; flex: none; color: var(--faint); }

/* one card per service */
/* sticky section index: one chip per service card, the one you're reading marked */
.svc-index { position: sticky; top: var(--topbar); z-index: calc(var(--z-sticky) - 1); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--content-pad)); padding: var(--sp-2) var(--content-pad); background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.svc-index:empty { display: none; }
.svc-index::-webkit-scrollbar { display: none; }
.svc-index .chip { flex: none; }
.svc-panel { scroll-margin-top: calc(var(--topbar) + var(--content-pad) + 44px); }
.svc-panel > .card-h > .icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
.svc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--sp-3) var(--sp-4); }
.svc-panel .svc-stats { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.svc-block { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.svc-block > header { display: flex; align-items: center; gap: var(--sp-2); min-height: 20px; }
.svc-block h4 { flex: 1; min-width: 0; font-size: var(--fs-2); font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-open { display: inline-flex; color: var(--faint); border-radius: var(--radius-s); }
.svc-open:hover, .svc-open:focus-visible { color: var(--accent); }
.svc-open .icon { width: 14px; height: 14px; }
.svc-block .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-s); }

/* SDK coverage: stats beside the version breakdown */
.svc-sdk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); align-items: start; }
@container content (max-width: 860px) { .svc-sdk { grid-template-columns: minmax(0, 1fr); } }

/* services without data: what to call to turn each one on */
.svc-missing { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-3); }
.svc-miss { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px dashed var(--border-2); border-radius: var(--radius-s); }
.svc-miss > .icon { width: 16px; height: 16px; color: var(--faint); margin-top: 1px; }
.svc-miss h4 { font-size: var(--fs-3); }
.svc-miss .svc-hint { color: var(--muted); font-size: var(--fs-2); line-height: 1.6; }
.svc-miss code { font-size: var(--fs-1); background: var(--hover); color: var(--text); padding: 1px 4px; border-radius: var(--radius-s); overflow-wrap: anywhere; }

/* breakdown lists and tables: auto-fill tracks; wide tables take two once there is room */
.svc-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); grid-auto-flow: row dense; gap: var(--gap); align-items: start; }
@container content (min-width: 861px) { .svc-lists > .svc-wide { grid-column: span 2; } .svc-lists > .svc-wide:only-child { grid-column: 1 / -1; } }
.svc-plain thead { display: none; }