/* admin's own styles, on top of tokens.css (copied from letkite-site by scripts/sync-brand.sh; the
   one source of the brand's colours, fonts and radii). Colours here only name what a token is used
   for, so light and dark differ in one place. Light follows the site; dark uses the site's dark
   section colours. No colour in this file is new except the dark text and the dark error red. */

/* the site's metric-matched fallback, so text does not jump when IBM Plex arrives */
@font-face { font-family: 'Plex Sans Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 101.33%; ascent-override: 101.16%; descent-override: 27.14%; line-gap-override: 0%; }
@font-face { font-family: 'Plex Sans Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold');
  size-adjust: 98.41%; ascent-override: 104.16%; descent-override: 27.94%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --page: var(--bg);
  --card: var(--surface);
  --fg: var(--ink);
  --soft: var(--muted);
  --rule: var(--line);
  --input: var(--surface);
  --input-line: var(--field);
  --well: var(--bg);
  --accent: var(--brand);
  --accent-hover: var(--brand-strong);
  --on-accent: #FFFFFF;
  --link: var(--brand-2);
  --bad: var(--danger);
  --ok: var(--teal);
  --caution: var(--warn);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: var(--dark);
    --card: var(--dark-card);
    --fg: #E8EEF5;
    --soft: var(--dark-text);
    --rule: var(--dark-line);
    --input: var(--dark);
    --input-line: var(--dark-line);
    --well: var(--dark);
    --accent: var(--dark-accent);
    --accent-hover: var(--mint);
    --on-accent: var(--ink);
    --link: var(--dark-accent);
    --bad: #FF8A80;
    --ok: var(--dark-accent);
    --caution: var(--warn-dot);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--fg); font: 15px/1.6 var(--font-zh); }
main { max-width: 880px; margin: 0 auto; padding: 20px 16px 64px; }
a { color: var(--link); }
code, pre { font-family: var(--mono); }

header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
header form { margin: 0; }
.brand { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 700 20px/1 var(--font); letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; }
.brand small { font-weight: 500; font-size: 15px; color: var(--soft); letter-spacing: 0; }
.env { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule); color: var(--soft); }

nav { display: flex; gap: 4px 18px; flex-wrap: wrap; margin: 0 0 20px; font-size: 14px; }
nav a { color: var(--soft); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--fg); }
nav a.on { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.card h2 { font-size: 17px; margin: 0 0 12px; }
.card > :last-child { margin-bottom: 0; }
.warn { border-color: var(--bad); }

label { display: block; margin: 12px 0 4px; color: var(--soft); font-size: 13px; }
input, select, textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--input-line); border-radius: 10px; background: var(--input); color: var(--fg); font: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label.check { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; color: var(--fg); font-size: 14px; }
label.check input { width: auto; min-height: 0; margin-top: 5px; accent-color: var(--accent); }

/* the site's .btn--sm, primary */
button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; padding: 0 20px; border: 1.5px solid transparent; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer; }
button:hover { background: var(--accent-hover); }
button.link { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--link); font-weight: 400; font-size: inherit; }
button.link:hover { background: none; text-decoration: underline; }
.inline { display: inline; margin: 0; }
.inline button { margin: 0; }

.muted { color: var(--soft); font-size: 13px; }
.bad { color: var(--bad); }
.ok { color: var(--ok); }
.note { margin-top: 8px; }
[hidden] { display: none !important; }

.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--soft); white-space: nowrap; }
.row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

code { font-size: 13px; word-break: break-all; }
pre { white-space: pre-wrap; word-break: break-all; background: var(--well); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; font-size: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 8px; border-top: 1px solid var(--rule); vertical-align: top; }
th { color: var(--soft); font-weight: 500; border-top: 0; }
.scroll { overflow-x: auto; }

/* QR codes stay black on white in both themes, never inverted */
.qr { background: #FFFFFF; padding: 12px; border-radius: 8px; display: inline-block; line-height: 0; }