/* Own OpenRouter key and demo limits: settings block, usage line, limit panel. Tokens come from /base.css. */

.keybox { margin-top: 40px; max-width: 720px; border: 1px solid var(--line-strong); background: var(--paper); }
.keybox > summary { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 12px 16px; min-height: 52px; cursor: pointer; list-style: none; }
.keybox > summary::-webkit-details-marker { display: none; }
.keybox > summary:focus-visible { outline: 2px solid var(--oxblood); outline-offset: -2px; }
.kb-title { display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--f-head); letter-spacing: -.02em; }
.kb-title::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform .15s; }
.keybox[open] .kb-title::before { transform: rotate(45deg); }
.kb-state { font: 500 13px/1.3 var(--f-head); color: var(--muted); }
.kb-state.on { color: var(--oxblood); }
.kb-state.on::before { content: ''; display: inline-block; width: 6px; height: 12px; background: var(--sulphur); margin-right: 8px; vertical-align: -1px; }
.kb-body { padding: 16px 16px 18px; border-top: 1px solid var(--line); }
.kb-body > p:first-child { color: var(--muted); font-size: 15px; max-width: 54em; margin-bottom: 16px; }
.kb-body .field { margin-bottom: 12px; max-width: 520px; }
.kb-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-get { font: 500 14px var(--f-head); margin-left: 6px; text-underline-offset: 3px; }
.kb-msg { margin-top: 12px; font-weight: 500; font-size: 15px; }
.kb-msg:empty { display: none; }
.kb-msg.ok { color: #2f5d2a; }
.kb-msg.bad { color: #9b2c1f; }
.keybox .hint { margin-top: 12px; }
.keybox + .danger { margin-top: 28px; }

.usage { margin-top: 10px; font: 500 14px/1.4 var(--f-head); color: var(--muted); }
.usage:empty { display: none; }
.usage a { color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }

.err.limit { border-left-width: 6px; align-items: center; }
.err.limit .lim-text { min-width: 0; flex: 1 1 280px; }
.err.limit .lim-text .label { color: var(--oxblood); }
.err.limit .lim-text p { margin-top: 4px; }

@media (max-width: 720px) {
  .keybox { margin-top: 32px; }
  .kb-acts .btn { flex: 1 1 auto; }
  .kb-get { margin-left: 0; flex-basis: 100%; }
  .err.limit .btn { width: 100%; }
}