/* Styles used only by api.html and tokens.html. */

.docs { max-width: 980px; }
.docs .card { margin-bottom: 1rem; }
.docs h3 { margin-bottom: .6rem; }
.docs h4 { margin: 1rem 0 .4rem; }
.docs p { max-width: 78ch; }
.docs table { margin-top: .5rem; }
.docs .check-table td code { white-space: nowrap; }

.langbox { margin-top: .8rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.langtabs { display: flex; flex-wrap: wrap; gap: .15rem; background: var(--panel-2); padding: .3rem; border-bottom: 1px solid var(--line); }
.langtab {
  font: inherit; font-size: .8rem; border: none; background: transparent; color: var(--ink-2);
  padding: .28rem .6rem; border-radius: 7px; cursor: pointer;
}
.langtab:hover { color: var(--ink); }
.langtab.sel { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

pre.code {
  margin: 0; padding: .85rem 1rem; overflow-x: auto; background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.55;
}
pre.code.plain { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); margin-top: .5rem; }
pre.code code { background: none; padding: 0; font-size: inherit; }

/* ------------------------------------------------------------ token page */

.token-state { display: grid; gap: .35rem; padding: .7rem .9rem; border-radius: 11px;
               border: 1px solid var(--line); background: var(--panel-2); margin-bottom: .8rem; }
.token-state .badge { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.token-state.user .badge { color: var(--good); }
.token-state.guest .badge { color: var(--warn); }
.token-state.none .badge { color: var(--bad); }
.token-box {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem;
  word-break: break-all;
}
.token-value { flex: 1; min-width: 12rem; }
.danger { color: var(--bad); }