/* L2 — THE STANDALONE PAGES of the legacy family (login, home, report, agent,
   blueprint, controls, dashboard, wizard, index) in Lacquer. Linked AFTER
   theme.css and BEFORE each page's inline <style>; scoped to `html.lacquer`,
   which _lacquer.html's activation gives the document. theme.css is NEVER
   edited: its names are REMAPPED here exactly as the Concierge thread's are
   (LACQUER_L2_PAGES_PLAN.md D1). Words, structure, handlers and ids untouched.

   1 · THE LEGACY TOKENS — a byte-identical COPY of lacquer-thread.css's block
   (the thread's bytes are pinned by its own mutation proof, so the block is
   copied, not moved; test_lacquer_pages asserts the two stay identical). */
@import url("/static/lacquer-dock.css");
@import url("/static/lacquer-controls.css");
html.lacquer {
  --bg: var(--lacquer-page);
  --panel: var(--lacquer-card);
  --panel2: var(--lacquer-well);
  --text: var(--lacquer-ink-2);
  --muted: var(--lacquer-ink-3);
  --dim: var(--lacquer-label);
  --line: var(--lacquer-line);
  --line2: var(--lacquer-line-2);
  --brand: var(--routing-ink);        /* deterministic routing: neutral Mono ink (teal retired) */
  --brand2: var(--action-ink);
  --violet: var(--model-ink);
  --green: var(--success-ink);
  --gold: var(--caution-ink);
  --red: var(--danger-ink);
  --ok: var(--success-ink);          /* blueprint.js reads var(--ok, #2f9e63) */
  /* Antti's light refinement: greyer, less pink wells for the thread's
     carved surfaces; canonical tokens untouched (shell defines --shell-well). */
  --thread-well: var(--shell-well, var(--lacquer-well));
}

/* 2 · THE GROUND — theme.css paints a dark radial gradient on body; the page is
   the Lacquer page ground, in both themes, with the body face. */
html.lacquer body {
  background: var(--lacquer-page); color: var(--lacquer-ink-2);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
html.lacquer a { color: var(--action-ink); }
html.lacquer :is(code, pre, .mono, .k, .tag, .small, .eyebrow, .audit, .kk, .sn, .sd, .st2, .pill, .metric .k) { font-family: var(--mono); }

/* 3 · HEADER BARS — the seven family headers + the operator/wizard `.top` are
   one chrome: a hairline, Mono ink-3 links, the title face for the mark. */
html.lacquer :is(header.ahead, header.bhead, header.chead, header.dhead, header.hhead, header.rhead, header.top) {
  border-bottom: 1px solid var(--lacquer-line-2); background: transparent;
  color: var(--lacquer-ink-3);
}
html.lacquer header :is(h1, .brandmark h1) {
  font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; color: var(--lacquer-ink);
}
html.lacquer header .tag { color: var(--lacquer-ink-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; }
html.lacquer :is(.oplink, header a, .brandmark .tag, .pill) { color: var(--lacquer-ink-3); }
html.lacquer :is(.oplink, header a):hover { color: var(--action-ink); }
html.lacquer .pill { background: var(--lacquer-well); border: 0; box-shadow: var(--lacquer-carve); border-radius: 999px; }

/* the theme switch (v2/_themebtn.html) — the Concierge's #themebtn material */
html.lacquer .lacquer-themebtn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 10px;
  background: var(--lacquer-card); color: var(--lacquer-ink-3); border: 0; border-radius: 100px; cursor: pointer;
  box-shadow: var(--lacquer-rim), 0 0 0 1px var(--lacquer-line-2); font: inherit; line-height: 1;
  transition: transform .18s, box-shadow .18s, color .18s;
}
html.lacquer .lacquer-themebtn:hover { color: var(--action-ink); box-shadow: var(--lacquer-rim), var(--lacquer-drop), 0 0 0 1px var(--lacquer-line-2); }
html.lacquer .lacquer-themebtn:active { transform: translateY(1px); }

/* 4 · CARDS — the `.blk` of dashboard/home/report is the SAME glossy card as the
   thread's (rule text mirrored from lacquer-thread.css §2); `.card` and the
   wizard/operator panels take the same material. */
html.lacquer :is(.blk, .card, .auth.card, .step, .compile, .center .trust) {
  background: var(--lacquer-gloss), var(--lacquer-card);
  border: 0; border-radius: 18px; color: var(--lacquer-ink-2);
  box-shadow: var(--lacquer-rim), var(--lacquer-drop), 0 0 0 1px var(--lacquer-line-2);
}
html.lacquer .blk .bh, html.lacquer .eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--lacquer-ink-3);
}
html.lacquer :is(.blk .bignum, .metric .v, .big) { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; color: var(--lacquer-ink); }
html.lacquer :is(.blk .k, .kk, .k) { color: var(--routing-ink); }
html.lacquer :is(.empty, .unav, .unavail, .muted-note, .small, .note, .who, .sub, .honest, .sessnote) { color: var(--lacquer-ink-3); }
html.lacquer :is(.kvrow, .audit, .line, .hline, .figrow, .kk) { border-color: var(--lacquer-line-2); }
html.lacquer :is(.practice, .badge, .kchip, .costchip, .zero, .role, .tabb, .tabs2 button) {
  background: var(--lacquer-well); color: var(--lacquer-ink-3); border: 0; border-radius: 999px; box-shadow: var(--lacquer-carve);
}
/* the hex literals of agent/dashboard/wizard/login — overridden BY CLASS */
html.lacquer :is(.tabb.on, .tabs2 button.on, .rail .d.done .n, .rung.done) {
  background: var(--lacquer-brand-grad); color: var(--lacquer-btn-ink); border-color: transparent; box-shadow: var(--lacquer-brand-bloom);
}
html.lacquer .rung.now { border-color: var(--action-ink); color: var(--action-ink); }
html.lacquer :is(details.xd pre, pre.curl, pre, .cli) { background: var(--lacquer-well); color: var(--lacquer-ink-2); border: 0; box-shadow: var(--lacquer-carve); border-radius: 12px; }
html.lacquer .compile { border: 1px dashed var(--lacquer-line); background: var(--lacquer-well); }
/* controls.css's interim plate (#171307) and theme.css's build log (#080d14) */
html.lacquer .ctl-interim { background: var(--lacquer-amber-tint); color: var(--lacquer-ink-2); border: 0; box-shadow: var(--lacquer-carve); border-radius: 12px; }
html.lacquer :is(.chip, .chip.roadmap) { background: var(--lacquer-well); color: var(--lacquer-ink-3); border: 0; box-shadow: var(--lacquer-carve); }
html.lacquer .chip.roadmap { background: var(--lacquer-amber-tint); color: var(--lacquer-ink-2); }
html.lacquer :is(input[type=checkbox], input[type=radio]) { background: var(--lacquer-well); accent-color: var(--lacquer-brand-2); }
html.lacquer .log { background: var(--lacquer-well); color: var(--lacquer-ink-2); border: 0; box-shadow: var(--lacquer-carve); border-radius: 12px; }
html.lacquer .center .trust { color: var(--success-ink); border: 0; }
html.lacquer .st2.gold, html.lacquer .lockk { color: var(--caution-ink); }
html.lacquer .st2.green { color: var(--success-ink); }
html.lacquer .st2.red, html.lacquer .err { color: var(--danger-ink); }

/* 5 · CONTROLS + FIELDS — secondary = carved well, primary = brand plate */
html.lacquer :is(.btn, button.btn, a.btn, .vtog, .tabb) {
  background: var(--lacquer-well); color: var(--lacquer-ink-2); border: 0; border-radius: 999px;
  box-shadow: var(--lacquer-carve); font-family: var(--font-body); cursor: pointer;
  transition: transform .18s, box-shadow .18s, color .18s;
}
html.lacquer :is(.btn.primary, button.primary, .btn.brand) {
  background: var(--lacquer-brand-grad); color: var(--lacquer-btn-ink); box-shadow: var(--lacquer-brand-bloom);
}
html.lacquer :is(.btn, .vtog):hover { color: var(--action-ink); }
html.lacquer :is(.btn.primary, button.primary):hover { color: var(--lacquer-btn-ink); box-shadow: var(--lacquer-brand-bloom), var(--lacquer-drop-lift); }
html.lacquer button:not(:disabled):active { transform: translateY(1px); }
html.lacquer .vtog b.on { color: var(--action-ink); }
html.lacquer :is(input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], textarea, select) {
  background: var(--lacquer-well); color: var(--lacquer-ink); border: 0; border-radius: 12px; box-shadow: var(--lacquer-carve);
  font-family: var(--font-body);
}
html.lacquer :is(input, textarea, select):focus-visible, html.lacquer :is(button, a, summary):focus-visible {
  outline: 2px solid var(--lacquer-brand-2); outline-offset: 2px;
}
html.lacquer table { border-color: var(--lacquer-line-2); }
html.lacquer :is(th, td) { border-color: var(--lacquer-line-2); }
html.lacquer th { font-family: var(--mono); color: var(--lacquer-ink-3); font-weight: 500; letter-spacing: .06em; }
/* GUI-11: keep long evidence commands readable within their own card. */
html.lacquer pre.curl {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  max-width: 100%; box-sizing: border-box; overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.lacquer :is(button, .btn, .lacquer-themebtn):is(:hover, :active) { transform: none; transition: none; }
}
@media (forced-colors: active) {
  html.lacquer :is(.blk, .card, .btn, .lacquer-themebtn) { border: 1px solid CanvasText; box-shadow: none; }
}