/* Tessera Viz developer portal — the site's brand, without the site's bundle.
   Colours are the olive theme's tokens (src/styles/themes.css); the White
   theme follows data-p2l-theme="white", the same switch and the same
   stored choice as the rest of viz.par2labs.com. */

:root {
  --ink-900: #070806; --ink-800: #0b0d0a; --ink-700: #10130d; --ink-600: #161a12;
  --ink-500: #1d2218; --ink-400: #272d20; --ink-300: #343b2b;
  --olive-200: #c2c893; --olive-300: #a7b069; --olive-500: #737f33; --olive-600: #5e6a28;
  --radium: #c7f23c; --radium-hi: #d4ff45; --on-radium: #0b0d0a;
  --fog-100: #f0f3ec; --fog-200: #dbdfd5; --fog-300: #c7cabf; --fog-500: #9da396; --fog-600: #8b8f84;
  --white: #ffffff; --danger: #e5484d; --warn: #f5a524;
  --heading: 'Chakra Petch', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;
  color-scheme: dark;
}
:root[data-p2l-theme="white"] {
  --ink-900: #f3f5f1; --ink-800: #eff2ed; --ink-700: #ecefe9; --ink-600: #e7eae4;
  --ink-500: #e1e6dd; --ink-400: #dadfd5; --ink-300: #d1d6c9;
  --olive-200: #666c37; --olive-300: #8d964f; --olive-500: #c0cc80; --olive-600: #cbd795;
  --radium: #5a7a0a; --radium-hi: #688c10; --on-radium: #ffffff;
  --fog-100: #202618; --fog-200: #262a20; --fog-300: #3d4035; --fog-500: #63695c; --fog-600: #777b70;
  --white: #12150f;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink-800);
  background-image: radial-gradient(1200px 780px at 12% -5%, rgba(115, 127, 51, 0.16), transparent 68%);
  background-attachment: fixed;
  color: var(--fog-200);
  font: 400 15px/1.7 var(--body);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: var(--radium); text-underline-offset: 3px; }
a:hover { color: var(--radium-hi); }
code, .mono, pre { font-family: var(--mono); }
code { font-size: .88em; background: var(--ink-600); border: 1px solid var(--ink-400); padding: 1px 5px; }
h1, h2, h3 { font-family: var(--heading); color: var(--white); line-height: 1.2; letter-spacing: .01em; }
h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 16px; font-weight: 700; }
h2 { font-size: 20px; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 16px; margin: 22px 0 8px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.skip { position: fixed; left: -9999px; top: 8px; z-index: 10; background: var(--radium); color: var(--on-radium); padding: 8px 14px; font: 700 12px var(--mono); }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--radium); outline-offset: 2px; }

/* ── bars ── */
.strip { background: var(--ink-900); border-bottom: 1px solid var(--ink-500); }
.strip-in { height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.studio { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--fog-500); }
.studio b { font: 700 12px var(--heading); color: var(--white); letter-spacing: .04em; }
.studio b.olive { color: var(--olive-300); }
.studio i { width: 4px; height: 4px; border-radius: 50%; background: var(--radium); }
.studio span { font: 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; margin-left: 8px; }
.strip-r { display: flex; align-items: center; gap: 16px; }
.strip-r a { font: 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--olive-200); text-decoration: none; }
.theme { background: none; border: 1px solid var(--ink-400); color: var(--fog-300); width: 26px; height: 22px; cursor: pointer; font-size: 12px; }
.bar { border-bottom: 1px solid var(--ink-500); background: rgba(11, 13, 10, .72); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; }
:root[data-p2l-theme="white"] .bar { background: rgba(239, 242, 237, .85); }
.bar-in { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--olive-600); background: var(--ink-900); font: 700 10px var(--mono); color: var(--radium); }
.tile i { position: absolute; right: -1px; bottom: -1px; width: 5px; height: 5px; background: var(--radium); }
.word { display: flex; align-items: center; gap: 8px; }
.word b { font: 700 19px var(--heading); letter-spacing: .04em; color: var(--white); }
.word b.olive { color: var(--olive-300); }
.word i { width: 6px; height: 6px; border-radius: 50%; background: var(--radium); }
.label { font: 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fog-500); border-left: 1px solid var(--ink-400); padding-left: 12px; }
.nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav a, .linkish { font: 500 13px var(--heading); letter-spacing: .06em; text-transform: uppercase; color: var(--fog-500); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; border-bottom: 1px solid transparent; }
.nav a:hover, .linkish:hover { color: var(--white); }
.nav a.on { color: var(--white); border-bottom-color: var(--radium); }
form.inline { display: inline; margin: 0; }

/* ── page ── */
.main { flex: 1; padding-top: 40px; padding-bottom: 64px; }
section { margin-bottom: 28px; }
.narrow { max-width: 560px; }
.kicker { font: 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--olive-300); margin: 0 0 10px; }
.lede { font-size: 17px; color: var(--fog-300); }
.muted { color: var(--fog-500); }
.small { font-size: 13px; }
.err { color: var(--danger); }
.card { border: 1px solid var(--ink-400); background: rgba(16, 19, 13, .86); padding: 24px; margin-bottom: 20px; }
:root[data-p2l-theme="white"] .card { background: rgba(255, 255, 255, .8); }
.card.slim { padding: 14px 20px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ink-400); }
.grid2 > .card { margin-bottom: 0; }
.stat { padding: 18px 22px; border-right: 1px solid var(--ink-400); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font: 600 22px var(--heading); color: var(--radium); overflow-wrap: anywhere; }
.stat span { font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fog-500); }
.note { border-left: 2px solid var(--radium); padding: 6px 12px; color: var(--white); background: var(--ink-600); margin: 0 0 14px; }
pre.key { background: var(--ink-900); border: 1px solid var(--ink-400); padding: 16px; overflow: auto; font-size: 12.5px; line-height: 1.55; color: var(--fog-200); max-height: 360px; white-space: pre-wrap; word-break: break-all; }
.links { list-style: none; padding: 0; margin: 0; }
.links li { border-top: 1px solid var(--ink-500); padding: 8px 0; }

/* ── buttons & forms ── */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--radium); color: var(--on-radium); border: 1px solid var(--radium); padding: 11px 20px; font: 600 12px var(--heading); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--radium-hi); color: var(--on-radium); }
.btn.ghost { background: transparent; color: var(--radium); }
.btn.ghost:hover { background: var(--ink-600); }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(229, 72, 77, .6); }
.btn.disabled { opacity: .45; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wrap-gap { margin-bottom: 12px; }
.form label { display: block; font: 11px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--olive-300); margin-bottom: 16px; }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: 8px; background: var(--ink-700); border: 1px solid var(--ink-400); color: var(--white); font: 400 15px var(--body); padding: 10px 12px; border-radius: 2px; text-transform: none; letter-spacing: 0; }
.form textarea.mono { font: 12px var(--mono); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--radium); }
.form .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form.tight { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ink-500); display: block; }
.form.tight label { margin-bottom: 10px; }
details summary { cursor: pointer; margin-top: 18px; color: var(--fog-300); font-size: 13px; }
.flash { border: 1px solid; padding: 12px 16px; margin: 0 0 20px; font-size: 14px; }
.flash.ok { border-color: rgba(199, 242, 60, .5); background: rgba(199, 242, 60, .07); color: var(--fog-100); }
.flash.error, .flash.ended { border-color: rgba(229, 72, 77, .55); background: rgba(229, 72, 77, .08); color: var(--fog-100); }

/* ── admin ── */
.tabs { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 12px 0 14px; border-bottom: 1px solid var(--ink-500); padding-bottom: 10px; }
.tabs a { font: 500 12px var(--heading); text-transform: uppercase; letter-spacing: .08em; color: var(--fog-500); text-decoration: none; }
.tabs a.on { color: var(--white); border-bottom: 1px solid var(--radium); }
.counts { margin-left: auto; }
.table { overflow-x: auto; border: 1px solid var(--ink-400); margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fog-500); padding: 10px 12px; border-bottom: 1px solid var(--ink-400); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--ink-500); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--ink-300); color: var(--fog-300); white-space: nowrap; }
.pill.big { font-size: 12px; padding: 6px 12px; }
.s-approved { border-color: var(--radium); color: var(--radium); }
.s-review { border-color: var(--warn); color: var(--warn); }
.s-rejected, .s-refused, .s-revoked { border-color: var(--danger); color: var(--danger); }
.checks { list-style: none; padding: 0; margin: 0 0 12px; }
.checks li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-500); }
.checks li b { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--mono); border: 1px solid; }
.checks li.pass b { color: var(--radium); border-color: var(--radium); }
.checks li.flag b { color: var(--warn); border-color: var(--warn); }
.checks li.wait b { color: var(--fog-500); border-color: var(--ink-300); }
.checks li span { display: flex; flex-direction: column; color: var(--white); font-size: 14px; }
.checks li small { color: var(--fog-500); font-size: 12px; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.kv dt { color: var(--fog-500); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.kv dd { margin: 0; color: var(--fog-100); overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; }
.lic { border-top: 1px solid var(--ink-500); padding: 8px 0; }
.lic.old { opacity: .55; }
.audit { list-style: none; padding: 0; }
.audit li { padding: 5px 0; border-bottom: 1px solid var(--ink-500); }

/* ── docs ── */
.docs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
.side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; border-right: 1px solid var(--ink-500); padding-right: 16px; }
.side ul { list-style: none; padding: 0; margin: 0; }
.side a { display: flex; gap: 10px; padding: 6px 8px; font-size: 14px; color: var(--fog-300); text-decoration: none; border-left: 2px solid transparent; }
.side a:hover { color: var(--white); background: var(--ink-600); }
.side a.on { color: var(--white); border-left-color: var(--radium); background: var(--ink-600); }
.num { font: 11px var(--mono); color: var(--olive-300); min-width: 18px; padding-top: 2px; }
.doc { min-width: 0; max-width: 820px; }
.doc p, .doc li { color: var(--fog-200); }
.doc h2 { margin-top: 34px; }
.doc h3 { margin-top: 26px; }
.doc .code { border: 1px solid var(--ink-400); margin: 16px 0 22px; background: var(--ink-900); }
.doc .code-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--ink-500); font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fog-500); }
.doc .copy { background: none; border: 1px solid var(--ink-400); color: var(--fog-300); font: 10px var(--mono); letter-spacing: .1em; padding: 3px 8px; cursor: pointer; text-transform: uppercase; }
.doc pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; color: var(--fog-100); }
.doc pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.doc table { font-size: 14px; }
.doc blockquote { margin: 16px 0; padding: 4px 16px; border-left: 2px solid var(--olive-500); color: var(--fog-300); }
.toc { padding-left: 0; list-style: none; columns: 2; }
.toc li { break-inside: avoid; padding: 5px 0; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--ink-500); }
.conf { margin-top: 28px; }

/* ── footer ── */
.foot { border-top: 1px solid var(--ink-500); padding: 18px 0; font-size: 12px; color: var(--fog-500); }
.foot-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot a { color: var(--fog-300); }

@media (max-width: 860px) {
  .grid2 { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--ink-500); padding: 0 0 12px; }
  .toc { columns: 1; }
  .kv { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid3 { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--ink-400); }
  .studio span, .label { display: none; }
  .main { padding-top: 24px; }
}