/* Back of House — no frameworks, theme-aware.
 *
 * The palette and type are PeyePeye's own, taken from peyepeye-storybook:
 * navy, pink, Inter. The components there are React and Tailwind and this is
 * server-rendered Go with no build step, so what carries across is the
 * language rather than the code — the colours, the weight of a title, the
 * navy header bar with its pink icon chip.
 *
 * Inter is served from this binary rather than from Google. A console that
 * runs a restaurant should not need somebody else's CDN to be up in order to
 * render, and every page load going to a third party is a privacy question
 * nobody asked for. Latin only, three weights: 141 KB against a font request
 * that never happens.
 */
@font-face {
  font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/font/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/font/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/assets/font/inter-900.woff2") format("woff2");
}

:root {
  /* The brand, verbatim. */
  --navy: #1e2a4a;
  --pink: #e84b7a;
  --pink-hover: #d4406b;
  --pink-light: #fce4ec;

  --bg: #ffffff; --fg: var(--navy); --muted: #6b7687; --line: #e9ecf1;
  --card: #f7f8fa; --accent: var(--pink); --accent-fg: #ffffff;
  --error-bg: #fdecea; --error-fg: #b3372f; --code-bg: #f1f3f7;
  /* The rail and page headers are navy; text on them is white. */
  --shell: var(--navy); --shell-fg: #ffffff; --shell-muted: rgba(255,255,255,.55);
  --shell-line: rgba(255,255,255,.12); --shell-hover: rgba(255,255,255,.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark is the navy pulled down rather than a different palette, so the
       brand still reads as itself with the lights off. */
    --bg: #12172a; --fg: #e8ecf4; --muted: #94a0b8; --line: #263050;
    --card: #1a2039; --accent: var(--pink); --accent-fg: #ffffff;
    --error-bg: #3a1f22; --error-fg: #f2938f; --code-bg: #212a47;
    --shell: #0d1222; --shell-fg: #ffffff; --shell-muted: rgba(255,255,255,.5);
    --shell-line: rgba(255,255,255,.10); --shell-hover: rgba(255,255,255,.06);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* font-black for titles, as the design does — it is most of what makes a
   PeyePeye screen look like one. */
h1 { font-size: 1.5rem; font-weight: 900; letter-spacing: -.01em; margin: 0 0 16px; }
h2 { font-size: 1rem; font-weight: 700; margin: 28px 0 10px; letter-spacing: -.005em; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-hover); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85em;
  background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }

.brand { font-weight: 700; letter-spacing: .3px; }
.brand span { color: var(--accent); font-weight: 500; margin-left: 3px; }
.brand.big { font-size: 1.3rem; margin-bottom: 12px; }
.dim { color: var(--muted); }

/* ── Chrome ─────────────────────────────────────────────────────────────
   A fixed left rail and a thin top bar. The rail is grouped because a flat
   list of a dozen links has to be read in full to find one; the groups answer
   "what am I trying to do" before you start reading names.

   Layout is grid rather than fixed positioning so the content column cannot
   slide under the rail, which is what the old top-bar version did at narrow
   widths. Below 860px the rail becomes a drawer, opened by a checkbox — no
   script, so it works on the first paint rather than after one. */
body.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "brand top" "side main";
  min-height: 100vh;
}
:root { --rail: 224px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--accent); color: var(--accent-fg); padding: 10px 14px;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.top {
  grid-area: top; display: flex; align-items: center; gap: 14px;
  padding: 0 22px; height: 60px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 4;
}
.brand {
  grid-area: brand; display: flex; align-items: center; gap: 9px;
  height: 60px; padding: 0 14px;
  background: var(--shell); color: var(--shell-fg);
  position: sticky; top: 0; z-index: 5;
}
.brand img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.brand .mark { line-height: 1.1; }
.brand b { display: block; font-size: .86rem; font-weight: 900; letter-spacing: .04em; line-height: 1.1; }
/* The tagline, in the brand's own words and its own pink. */
.brand span { display: block; color: var(--pink); font-weight: 700; font-size: .58rem;
  letter-spacing: .03em; }
.brand.big { font-size: 1.3rem; margin-bottom: 12px; border: 0; padding: 0; height: auto; }

/* The language switch. Pushed to the right with the identity, and it takes the
   auto margin so the pair sits together — the whoami block kept it before and
   the switch would otherwise have sat against the hamburger. */
.langform { display: flex; margin: 0 0 0 auto; }
/* Signed out there is no top bar to sit in, so it pins to the corner of the
   page instead. */
.langform.plain { position: fixed; top: 14px; right: 16px; margin: 0; z-index: 5; }
.langform button {
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 5px 11px; border-radius: 7px; cursor: pointer; font-size: .82rem;
  font-weight: 600;
}
.langform button:hover { border-color: var(--accent); color: var(--accent); }
.whoami { display: flex; align-items: center; gap: 10px; margin: 0 0 0 12px; }
.whoami .who { color: var(--muted); font-size: .85rem; }
.whoami button {
  background: none; border: 1px solid var(--line); color: var(--fg);
  padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: .85rem;
}
.whoami button:hover { border-color: var(--accent); color: var(--accent); }

/* The rail */
.side {
  grid-area: side; background: var(--shell); color: var(--shell-fg);
  padding: 16px 10px 40px; overflow-y: auto;
  /* Exactly the viewport below the top bar, not as tall as its own links.
     align-self:start with only a max-height let the navy stop wherever the
     last nav item happened to fall, leaving white beneath it on any page
     taller than the menu. Sticky still works because the rail scrolls its
     own overflow rather than the page. */
  position: sticky; top: 60px; align-self: start;
  height: calc(100vh - 60px); height: calc(100dvh - 60px);
}
.navgroup { margin-bottom: 20px; }
.navlabel {
  display: block; padding: 0 10px 6px;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--shell-muted);
}
.navitem {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; margin: 1px 0; border-radius: 8px;
  color: var(--shell-fg); font-size: .89rem; line-height: 1.3;
}
.navitem:hover { background: var(--shell-hover); }
.navitem.on { background: var(--pink); color: #fff; font-weight: 700; }
.navitem.on .badge-count { background: #fff; color: var(--pink); }
/* A count you are meant to act on, not decoration. Only drawn when non-zero. */
.badge-count {
  min-width: 19px; text-align: center; font-size: .7rem; font-weight: 700;
  background: var(--accent); color: var(--accent-fg);
  border-radius: 999px; padding: 2px 6px;
}

.hamburger, .scrim, .navtoggle { display: none; }

main.shell {
  grid-area: main; width: 100%; max-width: 980px;
  padding: 26px 22px 72px;
}
main.center {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
}

@media (max-width: 860px) {
  body.app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .brand { display: none; }
  .top { padding-left: 14px; }
  .hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 7px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 8px;
  }
  .hamburger span { display: block; height: 2px; background: var(--fg); border-radius: 2px; }
  .side {
    position: fixed; inset: 60px auto 0 0; width: 248px; z-index: 6;
    background: var(--bg); max-height: none;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .navtoggle:checked ~ .side { transform: none; }
  .navtoggle:checked ~ .scrim {
    display: block; position: fixed; inset: 60px 0 0 0; z-index: 5;
    background: rgba(0,0,0,.35);
  }
  main.shell { padding: 20px 16px 60px; }
}

/* Cards & forms */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px;
}
.card.auth { width: 100%; max-width: 380px; }
.card.auth.wide { max-width: 460px; }
label { display: block; margin: 12px 0 4px; font-size: .9rem; color: var(--muted); }
input {
  width: 100%; padding: 9px 11px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg); font-size: .95rem;
}
input.code { font-size: 1.3rem; letter-spacing: .4em; text-align: center; }
button.primary {
  width: 100%; margin-top: 16px; padding: 10px;
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 8px; font-size: .95rem; font-weight: 600;
  cursor: pointer;
}
.hint { color: var(--muted); font-size: .87rem; }
.error {
  background: var(--error-bg); color: var(--error-fg);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  width: 100%; max-width: 460px;
}
main.shell .error { max-width: none; }

.qrbox { display: flex; justify-content: center; margin: 14px 0; }
.qrbox svg { border-radius: 8px; max-width: 240px; height: auto; }

.secretbox { margin: 14px 0; }
.secretbox .label { color: var(--muted); font-size: .8rem; margin: 10px 0 4px; }
.secretbox code { display: block; padding: 8px 10px; word-break: break-all; }
.secretbox .secret { font-size: 1.05rem; letter-spacing: .12em; }

/* Dashboard */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.card.stat .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.card.stat .value { font-size: 1.5rem; font-weight: 700; margin: 6px 0 2px; }
.card.stat .value.ok { color: var(--accent); font-size: 1.1rem; }
.card.stat .value.dim { color: var(--muted); font-size: 1.1rem; }
.card.stat .hint { margin: 4px 0 0; }

/* Status badges */
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.badge.pass { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.badge.warn { background: #e8a13d33; color: #b97f1e; }
.badge.fail { background: var(--error-bg); color: var(--error-fg); }

/* Platform page */
.card.tenet { margin: 10px 0; }
.card.tenet h3 { margin: 0 0 6px; font-size: .98rem; color: var(--accent); }
.card.tenet p { margin: 4px 0; font-size: .92rem; }

/* CMS */
.cms { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .cms { grid-template-columns: 1fr; } }
.doclist { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.docitem { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; color: var(--fg); }
.docitem span { font-size: .75rem; }
.docitem.active, .docitem:hover { background: var(--bg); }
.editor textarea { width: 100%; margin-top: 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--fg); padding: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .84rem; line-height: 1.5; resize: vertical; }
.editor button { width: auto; padding: 9px 22px; }

/* Tables */
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .8rem; }

/* Docs center */
.folder { color: var(--muted); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; margin: 10px 6px 2px; font-weight: 700; }
.reader .rendered h1 { font-size: 1.25rem; margin: .2em 0 .5em; }
.reader .rendered h2 { font-size: 1.05rem; margin: 1.2em 0 .4em; border: none; padding: 0; }
.reader .rendered h3 { font-size: .95rem; }
.reader .rendered pre { background: var(--code-bg); padding: 12px; border-radius: 8px; overflow-x: auto; }
.reader .rendered li { margin: 3px 0; }
.reader .rendered hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

/* Chatbot cartridge */
.chat { max-width: 760px; }
.chatlog { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; min-height: 120px; }
.msg { max-width: 85%; padding: 9px 13px; border-radius: 12px; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .who { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-bottom: 2px; }
.msg .text { white-space: pre-wrap; font-size: .93rem; }
.chatform { display: flex; gap: 8px; }
.chatform input[type=text] { flex: 1; margin: 0; }
.chatform button { width: auto; margin: 0; padding: 9px 20px; }
.chatreset { margin-top: 8px; }
.chatreset button { background: none; border: none; color: var(--muted); font-size: .78rem; cursor: pointer; padding: 0; }

/* User provisioning */
.formrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.grantrow { margin:14px 0 4px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.grantrow .label { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
label.check { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:.9rem; color:var(--fg); }
label.check input { width:auto; margin:0; }
form.grants { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
form.grants button { padding:5px 12px; border:1px solid var(--line); border-radius:7px;
  background:var(--bg); color:var(--fg); font-size:.82rem; cursor:pointer; }
code.invite { display:inline-block; margin-top:5px; font-size:.72rem; word-break:break-all; max-width:34ch; }
/* Only what makes this one different from every other select: full width in
   a form column. It used to restate the basics, which was harmless until
   there was a base rule to fight — its `background` shorthand wiped the
   chevron and its padding took away the room for it, and both were invisible
   in the stylesheet because the base rule reads as if it won. */
select.lvl { margin-top:4px; width:100%; }

/* Read-only document view */
pre.docbody { margin-top: 10px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; overflow-x: auto; white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .84rem; line-height: 1.5; }

/* Feedback queue */
.fblist { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.fbitem { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
@media (max-width: 720px) { .fbitem { grid-template-columns: 1fr; } }
.fbitem.closed { opacity: .62; }
.fbhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fbhead strong { font-size: .98rem; }
.fbbody { margin-top: 7px; font-size: .9rem; white-space: pre-wrap; }
.fbmeta { margin-top: 7px; font-size: .78rem; color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.fbitem form { margin-top: 10px; }
.fbitem form button { padding: 5px 12px; font-size: .82rem; cursor: pointer;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; }
.fbshots { display: flex; flex-direction: column; gap: 8px; }
.fbshot img { display: block; width: 240px; max-width: 100%; border-radius: 8px;
  border: 1px solid var(--line); }
a.fbtoggle { font-size: .85rem; }

/* ── Dashboard ──────────────────────────────────────────────────────────
   "Needs you" is the whole point of the page, so it is the loudest thing on
   it and it is absent when there is nothing — a panel that is usually empty
   stops being read, and then is not read on the day it matters. */
.attention { margin-bottom: 28px; }
h2.flush { margin-top: 0; }
.allclear {
  color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 28px;
}
.needs {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; margin-bottom: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; background: var(--card); color: var(--fg);
}
.needs:hover { border-color: var(--accent); }
.needs .n {
  flex: none; min-width: 34px; text-align: center;
  font-size: 1.25rem; font-weight: 700; color: var(--accent);
}
.needs .what { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.needs .what strong { font-weight: 600; font-size: .95rem; }
.needs .what em { font-style: normal; color: var(--muted); font-size: .84rem; }
.needs .go { flex: none; color: var(--accent); font-size: .85rem; font-weight: 600; }

.stations {
  display: grid; gap: 10px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.station {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--fg);
}
.station:hover { border-color: var(--accent); }
.station strong { font-size: .95rem; }
.station span { color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* Activity reads as a log, so it is dense and headerless — the columns say
   what they are without being labelled. */
.card.flat { padding: 4px 8px; }
table.activity { width: 100%; border-collapse: collapse; }
table.activity td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.activity tr:last-child td { border-bottom: 0; }
table.activity .when { white-space: nowrap; color: var(--muted); font-size: .84rem; }
table.activity .when span { display: block; font-size: .74rem; opacity: .75; }
table.activity .who { white-space: nowrap; font-size: .87rem; }
table.activity .detail { color: var(--muted); font-size: .87rem; }

/* An invitation link exists to be copied and sent to somebody. It used to
   wrap across four lines of hex, which is unreadable and easy to half-select.
   One line, select-all on a single click, no script. */
code.invite {
  display: block; margin-top: 6px; padding: 7px 10px;
  /* Capped rather than 100%: inside a table cell a percentage resolves
     against a cell that simply grows, so a 90-character link dragged the
     whole Accounts table off the right edge of the page. */
  max-width: 300px; overflow-x: auto; white-space: nowrap;
  font-size: .78rem; user-select: all; cursor: pointer;
  border: 1px dashed var(--line);
}
/* Grant checkboxes sit inline with their label rather than stacking, so a row
   of four stations reads as one decision instead of four. */
.grantrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 4px; }
.grantrow .label {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
label.check {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: .88rem; color: var(--fg); white-space: nowrap;
}
label.check input { width: auto; margin: 0; }
/* The primary action is a button, not a banner. */
form .primary, button.primary { width: auto; padding: 9px 18px; }

/* ── Page header ────────────────────────────────────────────────────────
   The navy bar with a pink icon chip, from RestaurantAIMenuUpload. It is what
   makes a screen read as PeyePeye rather than as an admin panel, so every
   station page gets one. */
.pagehead {
  display: flex; align-items: center; gap: 13px;
  background: var(--shell); color: var(--shell-fg);
  border-radius: 14px; padding: 15px 18px; margin: 0 0 22px;
}
.pagehead .chip {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(232,75,122,.2); color: var(--pink);
  display: flex; align-items: center; justify-content: center;
}
.pagehead h1 { margin: 0; font-size: 1.12rem; color: var(--shell-fg); }
.pagehead p { margin: 2px 0 0; font-size: .8rem; color: var(--shell-muted); }

/* Primary actions are pink, because that is the brand's "do this" colour. */
button.primary, .btn.primary {
  background: var(--pink); color: #fff; border: 0; font-weight: 700;
  border-radius: 10px; cursor: pointer;
}
button.primary:hover, .btn.primary:hover { background: var(--pink-hover); }
button.danger { border-color: #d0a0a0; color: #b3372f; }

/* Cards pick up the softer radius the design uses throughout. */
.card, .needs, .station, .ctl { border-radius: 14px; }

/* A table in a card scrolls inside the card rather than pushing the page
   sideways. Station access is the widest column and the one most likely to
   grow — every new station adds a checkbox to it. */
.card { overflow-x: auto; }
.card > table { min-width: 100%; }
table th {
  text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   Secondary buttons and dropdowns.

   Only button.primary was ever styled, so every other button and every
   <select> fell back to the browser's native widget — square corners, system
   font, a grey bevel. Beside a pink primary and Inter everywhere else they
   read as something left unfinished.
   --------------------------------------------------------------------------- */

button, .btn, input[type="submit"] {
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  cursor: pointer;
  /* iOS otherwise renders its own rounded grey pill regardless of the above. */
  -webkit-appearance: none; appearance: none;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  border-color: var(--accent); color: var(--accent);
}
button:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button:disabled { opacity: .55; cursor: default; }
button:disabled:hover { border-color: var(--line); color: var(--fg); }

/* The primary keeps winning over the base above. */
button.primary, .btn.primary, input[type="submit"].primary {
  border: 0; color: #fff; background: var(--pink);
}
button.primary:hover, .btn.primary:hover { background: var(--pink-hover); color: #fff; }

/* Destructive, but not shouting: a red button beside a pink one reads as the
   same invitation. It is quiet until hovered, like the action it performs. */
button.danger { border-color: var(--line); color: var(--error-fg); }
button.danger:hover { border-color: var(--error-fg); background: var(--error-bg); color: var(--error-fg); }

select {
  font: inherit; font-size: .9rem;
  padding: 9px 32px 9px 11px; border-radius: 8px;
  border: 1px solid var(--line); background-color: var(--bg); color: var(--fg);
  cursor: pointer;
  /* The native arrow is the giveaway, so it is replaced with one drawn in the
     muted grey the rest of the console uses. A fixed grey rather than a token
     because a CSS variable cannot be interpolated into a data URI — this one
     reads on both the light and dark grounds. */
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238A94A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
select:hover { border-color: var(--accent); }

textarea {
  font: inherit; width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }

/* A row of actions sits together rather than stacking full width. */
.btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.btns button, .btns .btn { width: auto; margin-top: 0; }