/* BRP Access release console (ADR-0055). The Gateway's design tokens (apps/gateway/src/ui.ts) and the
   approved Releases mockup. No inline styles anywhere: the CSP allows only this file. */
:root { --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f0f2f5; --fg:#12161b; --muted:#566170; --line:#e1e5ea; --accent:#0f766e; --accent-soft:#e2f1ee; --on-accent:#ffffff; --ok:#146c37; --ok-soft:#e3f3e8; --bad:#b3261e; --bad-soft:#fbe8e6; --warn:#8a5100; --warn-soft:#fbf0da; --info:#1c56b0; --info-soft:#e6eefb; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg:#0b0d10; --surface:#12161b; --surface-2:#191e25; --fg:#e7ebf0; --muted:#9aa5b3; --line:#262c35; --accent:#2dd4bf; --accent-soft:#0d2c28; --on-accent:#04211d; --ok:#4ade80; --ok-soft:#10261a; --bad:#f87171; --bad-soft:#2c1414; --warn:#fbbf24; --warn-soft:#2a200b; --info:#7aa7ff; --info-soft:#142039; color-scheme: dark; } }
:root[data-theme='dark'] { --bg:#0b0d10; --surface:#12161b; --surface-2:#191e25; --fg:#e7ebf0; --muted:#9aa5b3; --line:#262c35; --accent:#2dd4bf; --accent-soft:#0d2c28; --on-accent:#04211d; --ok:#4ade80; --ok-soft:#10261a; --bad:#f87171; --bad-soft:#2c1414; --warn:#fbbf24; --warn-soft:#2a200b; --info:#7aa7ff; --info-soft:#142039; color-scheme: dark; }
@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:700; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14px/1.5 'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mono, code { font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.muted { color:var(--muted); } .small { font-size:12px; } .nowrap { white-space:nowrap; } .wrap { overflow-wrap:anywhere; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Top bar and side menu, as in the Gateway. */
header.top { background:var(--surface); border-bottom:1px solid var(--line); }
header.top .in { padding:10px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--fg); } .brand:hover { text-decoration:none; }
.logo { width:28px; height:28px; border-radius:7px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; }
.brand .sub { font-weight:500; color:var(--muted); }
header.top .right { margin-left:auto; display:flex; gap:12px; align-items:center; color:var(--muted); flex-wrap:wrap; }
.region { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); font-size:13px; font-weight:600; white-space:nowrap; }
.region span { color:var(--muted); font-weight:500; }
.acct { display:inline-flex; align-items:center; gap:8px; padding:3px 10px 3px 3px; border:1px solid var(--line); border-radius:999px; color:var(--fg); font-weight:500; font-size:13px; }
.acct:hover { text-decoration:none; background:var(--surface-2); }
.acct .av { width:26px; height:26px; border-radius:999px; display:grid; place-items:center; background:var(--info-soft); color:var(--info); font-size:11px; font-weight:700; }
.acct .role { color:var(--muted); font-weight:400; }
.shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 57px); }
aside.side { background:var(--surface); border-right:1px solid var(--line); padding:6px 12px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:calc(100vh - 57px); overflow-y:auto; }
aside.side .grp { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:14px 10px 4px; }
aside.side nav { display:flex; flex-direction:column; gap:1px; }
aside.side nav a { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; color:var(--fg); font-weight:500; }
aside.side nav a svg { color:var(--muted); flex-shrink:0; } aside.side nav a:hover { text-decoration:none; background:var(--surface-2); }
aside.side nav a.active { background:var(--accent-soft); color:var(--accent); font-weight:600; } aside.side nav a.active svg { color:var(--accent); }
aside.side .foot { margin-top:auto; border-top:1px solid var(--line); padding:12px 6px 0; display:grid; gap:4px; font-size:12px; color:var(--muted); }
aside.side .foot b { color:var(--fg); font-weight:600; }
.theme-toggle { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; font-size:12.5px; }
.theme-toggle .i-sun, .theme-toggle .t-light { display:none; }
:root[data-theme='dark'] .theme-toggle .i-sun, :root[data-theme='dark'] .theme-toggle .t-light { display:inline; }
:root[data-theme='dark'] .theme-toggle .i-moon, :root[data-theme='dark'] .theme-toggle .t-dark { display:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .i-sun, :root:not([data-theme='light']) .theme-toggle .t-light { display:inline; } :root:not([data-theme='light']) .theme-toggle .i-moon, :root:not([data-theme='light']) .theme-toggle .t-dark { display:none; } }
.login-theme { position:fixed; top:16px; right:16px; }

main { width:100%; max-width:1240px; padding:22px 28px 60px; display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-content:start; }
h1 { font-size:24px; margin:0; letter-spacing:-.01em; text-wrap:balance; }
h2 { font-size:17px; margin:0; text-wrap:balance; }
h3 { font-size:14px; margin:0; }
.head { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-end; justify-content:space-between; }
.head .t { display:grid; gap:4px; }
.sub { color:var(--muted); font-size:13px; }
section { display:grid; gap:12px; min-width:0; }
.sechead { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.sechead .sub { flex:1 1 260px; }
.stack { display:grid; gap:12px; } .stack-s { display:grid; gap:6px; } .stack-l { display:grid; gap:18px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .between { justify-content:space-between; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; min-width:0; }
.pad { padding:14px 16px; } .flush { overflow:hidden; }
.narrow { max-width:720px; }

.pill { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:500; background:var(--surface-2); color:var(--muted); white-space:nowrap; }
.pill.ok { background:var(--ok-soft); color:var(--ok); } .pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.bad { background:var(--bad-soft); color:var(--bad); } .pill.info { background:var(--info-soft); color:var(--info); }
.pill.acc { background:var(--accent-soft); color:var(--accent); }
.dot { width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block; }

.flash { padding:10px 14px; border-radius:8px; } .flash.ok { background:var(--ok-soft); color:var(--ok); } .flash.bad { background:var(--bad-soft); color:var(--bad); } .flash.warn { background:var(--warn-soft); color:var(--warn); } .flash.info { background:var(--info-soft); color:var(--info); }

/* Needs attention */
.attn ul { margin:0; padding:0; }
.attn li { list-style:none; display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:12px; padding:10px 14px 10px 0; border-top:1px solid var(--line); align-items:center; }
.attn li:first-child { border-top:0; }
.sev { align-self:stretch; border-radius:0 3px 3px 0; } .sev.warn { background:var(--warn); } .sev.bad { background:var(--bad); } .sev.info { background:var(--info); }
.attn .what { font-weight:600; } .attn .why { color:var(--muted); font-size:13px; }
.attn .empty { padding:14px 16px; color:var(--ok); }
@media (max-width:560px) { .attn li { grid-template-columns:4px minmax(0,1fr); } .attn li > :last-child { grid-column:2; justify-self:start; } }

/* Environments */
.envs { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; }
.env { display:grid; gap:10px; padding:14px 16px; align-content:start; }
.env .name { display:flex; justify-content:space-between; gap:8px; align-items:center; flex-wrap:wrap; }
.env .ver { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:22px; font-weight:500; letter-spacing:-.01em; overflow-wrap:anywhere; }
.env .ver.unknown { color:var(--muted); font-size:16px; }
.env dl, dl.kv { margin:0; display:grid; grid-template-columns:110px minmax(0,1fr); gap:5px 10px; font-size:13px; }
.env dt, dl.kv dt { color:var(--muted); } .env dd, dl.kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.env .acts { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding-top:10px; align-self:end; }
.env.staging { border-top:3px solid var(--warn); } .env.prod { border-top:3px solid var(--accent); } .env.skew { border-top-color:var(--warn); }

/* From merge to production */
.flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stage { padding:12px 14px; border-left:1px solid var(--line); display:grid; gap:4px; align-content:start; min-width:0; }
.stage:first-child { border-left:0; }
.stage .k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.stage .v { font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; overflow-wrap:anywhere; }
.stage .pill { justify-self:start; }
@media (max-width:760px) { .flow { grid-template-columns:1fr 1fr; } .stage:nth-child(3) { border-left:0; } .stage:nth-child(n+3) { border-top:1px solid var(--line); } }
@media (max-width:420px) { .flow { grid-template-columns:1fr; } .stage { border-left:0; border-top:1px solid var(--line); } .stage:first-child { border-top:0; } }
.waiting { border-top:1px solid var(--line); padding:10px 14px; display:grid; gap:4px; font-size:13px; }
.waiting .c { display:flex; gap:10px; flex-wrap:wrap; }

/* Tables */
.tscroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:9px 12px; border-top:1px solid var(--line); vertical-align:top; }
thead th { border-top:0; font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; background:var(--surface-2); white-space:nowrap; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
td.acts { text-align:right; white-space:nowrap; }
.tfoot { padding:8px 12px; border-top:1px solid var(--line); }

/* Buttons and forms */
button, .btn { font:inherit; font-size:13px; font-weight:500; border:1px solid var(--line); background:var(--surface); color:var(--fg); border-radius:7px; padding:5px 11px; cursor:pointer; white-space:nowrap; display:inline-block; line-height:1.5; }
.btn:hover { text-decoration:none; } button:hover, .btn:hover { border-color:var(--accent); }
button.primary, .btn.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
button.danger, .btn.danger { color:var(--bad); }
button.danger.solid { background:var(--bad); border-color:var(--bad); color:#fff; }
button.link { border:0; background:none; color:var(--accent); padding:0; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.big, .btn.big { padding:8px 14px; font-size:14px; }
form.inline { display:inline; }
input, select, textarea { font:inherit; color:var(--fg); background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:7px 10px; min-width:0; }
label { display:grid; gap:4px; font-weight:500; font-size:13px; }
label.check { display:flex; gap:8px; align-items:center; font-weight:400; } label.check input { width:auto; }
.form { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; align-items:start; }
.otp, input.word { font-family:'IBM Plex Mono',ui-monospace,monospace; }
.otp { font-size:20px; letter-spacing:.3em; text-align:center; }
details > summary { cursor:pointer; }
.notes { margin:0; padding-left:18px; display:grid; gap:3px; font-size:13px; }

/* Fleet */
.bar { display:block; width:100%; min-width:120px; height:10px; border-radius:5px; background:var(--surface-2); }
.bar rect.done { fill:var(--ok); } .bar rect.failed { fill:var(--bad); }
.waves { display:grid; gap:6px; font-size:13px; }
.wave { display:grid; grid-template-columns:170px minmax(0,1fr) 90px; gap:10px; align-items:center; }
@media (max-width:520px) { .wave { grid-template-columns:1fr 80px; } .wave .bar { grid-column:1 / -1; grid-row:2; } }

/* Actions */
.actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.action { padding:14px 16px; display:grid; gap:8px; align-content:start; }
.guard { display:flex; flex-wrap:wrap; gap:6px; }
.how { font-size:12.5px; color:var(--muted); }
.confirm { border:1px dashed var(--line); border-radius:8px; padding:12px 14px; display:grid; gap:10px; background:var(--surface-2); }
.confirm input { max-width:260px; width:100%; }
.steps { margin:0; padding-left:20px; display:grid; gap:4px; }

/* Sign-in pages */
.login-wrap { min-height:100vh; display:grid; place-items:center; align-content:center; justify-content:center; grid-template-columns:minmax(0,460px); padding:56px 16px 24px; max-width:none; margin:0 auto; }
.login h1 { font-size:21px; }
.login { width:100%; max-width:380px; padding:22px; display:grid; gap:12px; justify-self:center; }
.login.wide { max-width:460px; }
.error { color:var(--bad); margin:0; }
.qr { justify-self:center; } .qr svg { width:220px; height:220px; background:#fff; padding:10px; border-radius:10px; display:block; }
.codes { display:grid; grid-template-columns:repeat(2,auto); gap:6px 18px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:15px; justify-content:start; }
.secret { font-family:'IBM Plex Mono',ui-monospace,monospace; word-break:break-all; margin:6px 0 0; }
.linkbox { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12.5px; word-break:break-all; padding:10px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); }
.foot { color:var(--muted); font-size:12px; border-top:1px solid var(--line); padding-top:12px; }
.audit td.detail { white-space:normal; max-width:420px; overflow-wrap:anywhere; color:var(--muted); }

@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  aside.side { position:static; height:auto; flex-direction:row; padding:6px 12px; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; }
  aside.side nav { flex-direction:row; } aside.side .grp, aside.side .foot { display:none; } aside.side nav a { white-space:nowrap; }
}
@media (max-width:640px) { main { padding:16px 16px 48px; } header.top .in { padding:10px 16px; } .region, .acct .role, .brand .sub { display:none; } .env dl, dl.kv { grid-template-columns:96px minmax(0,1fr); } }
@media (prefers-reduced-motion: no-preference) { button, .btn { transition:border-color .15s; } }