/* OKI Games comment widget (pairs with /assets/okc.js).
   Dark, one accent, headings in the game's garage style (system-ui italic 900, uppercase, wide tracking).
   The tokens below are defaults; a page re-themes them on .okc (site.css does that via "body .okc").
   The account <dialog> carries the .okc class too, so it picks up the same tokens. */

.okc {
  --okc-bg: #111;
  --okc-card: #161616;
  --okc-field: #0c0c0c;
  --okc-line: #262626;
  --okc-line-2: #333;
  --okc-fg: #e8e8e8;
  --okc-hi: #fff;
  --okc-dim: #8a8a8a;
  --okc-accent: #ff5a1f;
  --okc-on-accent: #0a0a0a;
  --okc-danger: #ff5d5d;
  --okc-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --okc-indent: 12px;               /* per reply level, phones */
  --okc-gut: 0px;                   /* body/actions offset under the avatar, phones */
  --okc-glow: color-mix(in srgb, var(--okc-accent) 22%, transparent);
  color: var(--okc-fg);
  font-family: var(--okc-font);
  color-scheme: dark;
}
@media (min-width: 560px) { .okc { --okc-indent: 22px; --okc-gut: 42px; } }
.okc *, .okc *::before, .okc *::after { box-sizing: border-box; }
.okc [hidden] { display: none !important; }
.okc-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.okc :focus-visible { outline: 2px solid var(--okc-accent); outline-offset: 3px; }

/* ── header ── */
.okc-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 6px 24px; margin: 0 0 22px;
}
.okc-title {
  display: flex; align-items: center; gap: 16px; margin: 0;
  font: italic 900 clamp(2.1rem, 8vw, 3.4rem)/.95 var(--okc-font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--okc-hi);
}
.okc-title:focus { outline: none; }
.okc-title:focus-visible { outline: 2px solid var(--okc-accent); outline-offset: 6px; }
.okc-count {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 10px;
  font: italic 900 16px/1 var(--okc-font); letter-spacing: .04em; color: var(--okc-on-accent);
  font-variant-numeric: tabular-nums;
}
.okc-count::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--okc-accent); transform: skewX(-14deg);
}
.okc-who {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px;
  color: var(--okc-dim); font-size: 14px;
}
.okc-who b { color: var(--okc-fg); font-weight: 600; overflow-wrap: anywhere; }

/* ── buttons ── */
.okc-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; margin: 0;
  border: 0; background: none; color: var(--okc-fg); cursor: pointer;
  font: italic 800 13px/1 var(--okc-font); letter-spacing: .18em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.okc-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg);
  transition: background-color .2s, border-color .2s, transform .3s cubic-bezier(.22, 1, .36, 1), filter .2s;
}
.okc-btn--accent { color: var(--okc-on-accent); }
.okc-btn--accent::before { background: var(--okc-accent); box-shadow: 0 10px 30px -14px var(--okc-accent); }
.okc-btn--accent:hover:not(:disabled)::before { filter: brightness(1.1); transform: skewX(-14deg) scale(1.03); }
.okc-btn--ghost::before { border: 1px solid var(--okc-line-2); }
.okc-btn--ghost:hover:not(:disabled)::before { border-color: var(--okc-fg); }
.okc-btn:active:not(:disabled)::before { transform: skewX(-14deg) scale(.97); }
.okc-btn--sm { min-height: 42px; padding: 0 20px; font-size: 12px; }
.okc-btn--block { width: 100%; }
.okc-btn:disabled { cursor: not-allowed; opacity: .45; }
.okc-btn--accent:disabled { opacity: 1; color: var(--okc-dim); }          /* neutral until there is text to send */
.okc-btn--accent:disabled::before { background: var(--okc-line-2); box-shadow: none; }
.okc-btn:focus-visible { outline-offset: 5px; }
.okc-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: 0;
  border: 0; background: none; color: var(--okc-fg); cursor: pointer;
  font: 600 14px/1 var(--okc-font);
  text-decoration: underline; text-decoration-color: var(--okc-line-2); text-underline-offset: 5px;
}
.okc-link:hover:not(:disabled) { text-decoration-color: var(--okc-accent); }
.okc-link:disabled { color: var(--okc-dim); cursor: progress; }

/* ── logged-out gate / composer ── */
.okc-gate {
  position: relative; display: grid; gap: 18px; margin: 0 0 30px;
  padding: 20px 18px 22px 22px; background: var(--okc-card); border: 1px solid var(--okc-line);
}
.okc-gate::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--okc-accent);
}
.okc-gate__t { margin: 0; max-width: 48ch; color: var(--okc-dim); font-size: 15px; line-height: 1.55; }
.okc-gate__t b { color: var(--okc-fg); font-weight: 650; }
.okc-gate__row { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 0 6px; }
.okc-gate--wait { min-height: 154px; }
.okc-gate--wait::before { background: var(--okc-line-2); }

.okc-form { display: grid; gap: 10px; margin: 0; }
.okc-form--root { margin: 0 0 30px; padding: 14px; background: var(--okc-card); border: 1px solid var(--okc-line); }
.okc-ta {
  display: block; width: 100%; min-height: 64px; max-height: 360px; margin: 0; resize: vertical;
  padding: 12px 14px; background: var(--okc-field); color: var(--okc-fg);
  border: 1px solid var(--okc-line-2); border-radius: 0;
  font: 16px/1.5 var(--okc-font);
  transition: border-color .15s, box-shadow .15s;
}
.okc-form--root .okc-ta { min-height: 92px; }
.okc-ta::placeholder { color: var(--okc-dim); opacity: 1; }
.okc-ta:focus { outline: none; border-color: var(--okc-accent); box-shadow: 0 0 0 3px var(--okc-glow); }
.okc-ta[aria-invalid="true"] { border-color: var(--okc-danger); }
.okc-ta[readonly] { opacity: .65; }
.okc-form__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.okc-as { margin-right: auto; color: var(--okc-dim); font-size: 13px; overflow-wrap: anywhere; }
.okc-as b { color: var(--okc-fg); font-weight: 600; }
.okc-bytes {
  margin-left: auto; color: var(--okc-dim);
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
}
.okc-as + .okc-bytes { margin-left: 0; }
.okc-bytes.is-near { color: var(--okc-accent); }
.okc-bytes.is-over { color: var(--okc-danger); font-weight: 700; }
.okc-form__btns { display: flex; align-items: center; gap: 14px; padding-right: 6px; }
.okc-err { margin: 0; color: var(--okc-danger); font-size: 14px; line-height: 1.45; }
.okc-err:empty { display: none; }

/* ── list ── */
.okc-list { display: grid; }
.okc-list > .okc-c { border-top: 1px solid var(--okc-line); }
.okc-list > .okc-c:last-of-type { border-bottom: 1px solid var(--okc-line); }
.okc-c { position: relative; padding: 18px 0 8px; }
.okc-kids > .okc-c { padding: 14px 0 2px; }
.okc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; font-size: 14px; line-height: 1.3; }
.okc-av {
  position: relative; isolation: isolate; flex: none;
  display: inline-grid; place-items: center; width: 32px; height: 24px; margin-left: 3px;   /* skew stays inside the column */
  font: italic 900 13px/1 var(--okc-font); color: var(--okc-fg);
}
.okc-av::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #262626; transform: skewX(-14deg); }
.okc-c--own > .okc-meta .okc-av { color: var(--okc-on-accent); }
.okc-c--own > .okc-meta .okc-av::before { background: var(--okc-accent); }
.okc-av--tomb::before { background: none; border: 1px dashed var(--okc-line-2); }
.okc-name { color: var(--okc-hi); font-weight: 650; overflow-wrap: anywhere; }
.okc-you {
  padding: 3px 6px 2px; border: 1px solid currentColor; color: var(--okc-accent);
  font: italic 800 10px/1 var(--okc-font); letter-spacing: .16em; text-transform: uppercase;
}
.okc-re { color: var(--okc-dim); font-size: 13px; }
.okc-time { color: var(--okc-dim); font-size: 13px; white-space: nowrap; }
.okc-tomb { color: var(--okc-dim); font-style: italic; }
.okc-body {
  margin: 8px 0 0; padding-left: var(--okc-gut);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 16px; line-height: 1.6; color: var(--okc-fg);
}
.okc-c > .okc-form { margin: 12px 0 6px var(--okc-gut); }
.okc-c > .okc-err { margin: 2px 0 6px var(--okc-gut); }
.okc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 4px 0 0 calc(var(--okc-gut) - 10px); }
.okc-act {
  min-height: 36px; padding: 0 10px; margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--okc-dim); font: 700 12px/1 var(--okc-font); letter-spacing: .12em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.okc-act:hover:not(:disabled) { color: var(--okc-fg); }
.okc-act:disabled { cursor: progress; opacity: .6; }
.okc-act[aria-expanded="true"]:not(.okc-act--fold) { color: var(--okc-accent); }
.okc-act--danger, .okc-act--danger:hover:not(:disabled) { color: var(--okc-danger); }
.okc-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 2px; padding-left: 10px; }
.okc-confirm__q { margin-right: 6px; color: var(--okc-fg); font-size: 14px; }
@media (pointer: coarse) { .okc-act { min-height: 44px; } }

.okc-kids { margin: 2px 0 0; }
.okc-kids--nest {
  margin-left: calc(var(--okc-gut) / 2 + 2px);
  padding-left: var(--okc-indent); border-left: 2px solid var(--okc-line);
}
@media (max-width: 559px) { .okc-kids--nest { margin-left: 4px; } }

@keyframes okc-flash { from { background-color: var(--okc-glow); } to { background-color: transparent; } }
.okc-c--flash { animation: okc-flash 2.4s ease-out; }
.okc-c:focus { outline: none; }

.okc-state {
  display: grid; justify-items: start; gap: 16px; padding: 30px 0;
  border-top: 1px solid var(--okc-line); border-bottom: 1px solid var(--okc-line); color: var(--okc-dim);
}
.okc-state p { margin: 0; font-size: 16px; }
.okc-state--empty::before {        /* a little chequered flag strip */
  content: ''; width: 60px; height: 12px; margin-left: 4px; transform: skewX(-14deg); opacity: .85;
  background: repeating-conic-gradient(var(--okc-fg) 0 25%, transparent 0 50%) 0 0 / 12px 12px;
}
.okc-more { justify-self: start; margin: 22px 0 0 6px; }
.okc-note { margin: 16px 0 0; color: var(--okc-dim); font-size: 13px; }

.okc-skel { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 20px 0; border-top: 1px solid var(--okc-line); }
.okc-skel__av { grid-row: span 2; width: 32px; height: 24px; background: #1e1e1e; transform: skewX(-14deg); }
.okc-skel__l {
  height: 12px; max-width: 420px;
  background: linear-gradient(90deg, #1a1a1a 0%, #262626 50%, #1a1a1a 100%) 0 0 / 200% 100%;
  animation: okc-shimmer 1.4s linear infinite; animation-delay: calc(var(--i, 0) * .15s);
}
.okc-skel__l--s { width: 55%; }
@keyframes okc-shimmer { to { background-position: -200% 0; } }

/* ── account dialog ── */
html.okc-lock { overflow: hidden; }
.okc-dlg {
  width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--okc-fg); overflow: visible;
}
.okc-dlg:not([open]) { display: none; }
.okc-dlg::backdrop { background: rgb(0 0 0 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.okc-dlg__card {
  position: relative; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 30px 24px 22px; background: var(--okc-bg); border: 1px solid var(--okc-line);
  box-shadow: 0 40px 100px -30px #000;
  overscroll-behavior: contain;
}
.okc-dlg__card::before {
  content: ''; position: absolute; top: -1px; left: 24px; width: 72px; height: 5px;
  background: var(--okc-accent); transform: skewX(-24deg);
}
.okc-x {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; background: none; color: var(--okc-dim); cursor: pointer;
  font: 300 30px/1 var(--okc-font);
}
.okc-x:hover { color: var(--okc-fg); }
.okc-dlg__kicker {
  margin: 4px 0 10px; color: var(--okc-accent);
  font: italic 800 11px/1 var(--okc-font); letter-spacing: .28em; text-transform: uppercase;
}
.okc-dlg__title {
  margin: 0 0 12px; color: var(--okc-hi);
  font: italic 900 36px/1 var(--okc-font); letter-spacing: .08em; text-transform: uppercase;
}
.okc-dlg__intro { margin: 0 0 18px; color: var(--okc-dim); font-size: 14px; line-height: 1.55; }
.okc-dlg__note {
  margin: 0 0 16px; padding: 10px 12px; background: var(--okc-card);
  border-left: 3px solid var(--okc-accent); font-size: 14px; line-height: 1.45;
}
.okc-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 20px; border-bottom: 1px solid var(--okc-line); }
.okc-tab {
  min-height: 46px; margin: 0 0 -1px; padding: 0 6px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--okc-dim); cursor: pointer;
  font: italic 800 12px/1.2 var(--okc-font); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.okc-tab:hover { color: var(--okc-fg); }
.okc-tab[aria-selected="true"] { color: var(--okc-hi); border-bottom-color: var(--okc-accent); }
.okc-auth { display: grid; gap: 14px; }
.okc-field { display: grid; gap: 7px; }
.okc-lab { color: var(--okc-dim); font: 700 11px/1 var(--okc-font); letter-spacing: .16em; text-transform: uppercase; }
.okc-in {
  width: 100%; min-height: 48px; margin: 0; padding: 0 14px;
  background: var(--okc-field); color: var(--okc-fg); border: 1px solid var(--okc-line-2); border-radius: 0;
  font: 16px/1.2 var(--okc-font);
}
.okc-in:focus { outline: none; border-color: var(--okc-accent); box-shadow: 0 0 0 3px var(--okc-glow); }
.okc-in[aria-invalid="true"] { border-color: var(--okc-danger); }
.okc-hint { margin: 0; color: var(--okc-dim); font-size: 13px; line-height: 1.5; }
.okc-hint__prev { color: var(--okc-fg); }
.okc-auth .okc-btn--block { margin-top: 8px; }
.okc-dlg__err { margin: 14px 0 0; color: var(--okc-danger); font-size: 14px; line-height: 1.45; }
.okc-dlg__err:empty { display: none; }
.okc-google { display: grid; justify-items: center; gap: 14px; margin-top: 18px; }
.okc-or {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0;
  color: var(--okc-dim); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
}
.okc-or::before, .okc-or::after { content: ''; flex: 1; height: 1px; background: var(--okc-line); }
.okc-gbtn { display: flex; justify-content: center; min-height: 40px; }
.okc-dlg__fine { margin: 18px 0 0; color: var(--okc-dim); font-size: 12px; line-height: 1.5; }

/* ── phones ── */
@media (max-width: 559px) {
  .okc-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .okc-form--root { padding: 12px; }
  .okc-gate { padding: 18px 16px 20px 20px; }
  .okc-gate__row { padding: 0 8px; gap: 14px; }
  .okc-gate__row .okc-btn { flex: 1 1 100%; }
  .okc-dlg__card { padding: 28px 18px 20px; }
  .okc-dlg__title { font-size: 30px; }
  .okc-tab { font-size: 11px; letter-spacing: .08em; }
  .okc-act { padding: 0 8px; letter-spacing: .08em; }
  .okc-acts { margin-left: calc(var(--okc-gut) - 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .okc *, .okc *::before, .okc *::after { animation: none !important; transition: none !important; }
}

/* ── score beside a name (rico 2026-10-06: "the score is shown beside the username") ── */
.okc-score {
  display: inline-block; padding: 2px 6px 1px; border: 1px solid var(--okc-line-2);
  color: var(--okc-accent); font: italic 800 11px/1.2 var(--okc-font); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── comment rating: one small thumb at the average + count; the 5 choices only in a transient popover ── */
.okc-ratewrap { position: relative; display: inline-flex; margin-left: auto; }
.okc-rate {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 6px; margin: 0;
  border: 0; background: none; color: var(--okc-dim); cursor: pointer;
  font: 600 13px/1 var(--okc-font); font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
}
.okc-rate:hover:not(.okc-rate--own), .okc-rate[aria-expanded="true"] { color: var(--okc-fg); }
.okc-rate--mine { color: var(--okc-accent); }
.okc-rate--own { cursor: default; }
.okc-thumb {
  width: 16px; height: 16px; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.okc-thumb--none { opacity: .45; }
.okc-pop {
  position: absolute; z-index: 5; right: 0; top: calc(100% + 4px);
  display: flex; gap: 2px; padding: 4px; white-space: nowrap;
  background: var(--okc-card); border: 1px solid var(--okc-line-2); box-shadow: 0 12px 30px -10px #000;
}
.okc-pop__b {
  display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0;
  border: 1px solid transparent; background: none; color: var(--okc-fg); cursor: pointer;
}
.okc-pop__b .okc-thumb { width: 20px; height: 20px; }
.okc-pop__b:hover:not(:disabled) { border-color: var(--okc-line-2); }
.okc-pop__b.is-on { color: var(--okc-accent); border-color: var(--okc-accent); }
.okc-pop__b:disabled { cursor: progress; opacity: .6; }
@media (pointer: coarse) { .okc-rate { min-height: 36px; } }

.okc-sort { display: flex; gap: 0 2px; margin: -12px 0 14px -10px; }
.okc-sort .okc-act[aria-pressed="true"] { color: var(--okc-accent); }

/* ── account button (<span data-okc-account>) + its menu ── */
.okc-acctwrap { position: relative; display: inline-flex; }
.okc-acct {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; background: rgb(0 0 0 / .35); color: #fff; cursor: pointer;
  font: italic 800 12px/1 var(--okc-font); letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .2s, background-color .2s; -webkit-tap-highlight-color: transparent;
}
.okc-acct:hover { border-color: var(--okc-accent); background: rgb(0 0 0 / .6); }
.okc-acct--in { padding: 0 12px 0 10px; letter-spacing: .02em; text-transform: none; font-style: normal; font-weight: 650; font-size: 14px; }
.okc-acct .okc-av { margin-left: 0; }
.okc-acct .okc-av::before { background: var(--okc-accent); }
.okc-acct .okc-av { color: var(--okc-on-accent); }
.okc-acct__name { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okc-acct .okc-score { border-color: rgb(255 255 255 / .25); }
.okc-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 168px;
  display: grid; padding: 6px 0; background: var(--okc-bg); border: 1px solid var(--okc-line-2);
  box-shadow: 0 20px 50px -18px #000;
}
.okc-menu__i {
  display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0 16px; border: 0; background: none;
  color: var(--okc-fg); cursor: pointer; text-align: left; text-decoration: none;
  font: italic 800 12px/1 var(--okc-font); letter-spacing: .18em; text-transform: uppercase;
}
.okc-menu__i:hover, .okc-menu__i:focus-visible { color: var(--okc-hi); background: var(--okc-card); }
@media (max-width: 559px) { .okc-acct__name { max-width: 6.5em; } }