/* Mirror of CP26 visual language, observed from the running portals on 2026-09-20.
   Tokens were read off the live pages (palette + typography), not from source. */
:root{
  --bg:#FAFBFC; --surface:#FFFFFF; --line:#E2E5E9; --line-strong:#D5D9DF;
  --ink:#0B0D11; --body:#232833; --muted:#667080; --muted2:#8D95A1; --slate:#363D49;
  --brand:#A52A84; --brand-hover:#8A1F6D; --brand-tint:#FDEFF8;
  --accent:#D93F04; --accent-tint:#FFF4EE;
  --ok:#1E7A52; --ok-tint:#EAF6F0; --warn:#8A5A00; --warn-tint:#FFF6E4;
  --bad:#A3231B; --bad-tint:#FDEDEC;
  --prop:#4B2E83; --prop-tint:#F1ECFA;
  --r:8px; --sidebar:247px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--body);
  font-family:"IBM Plex Sans","Helvetica Neue",Helvetica,sans-serif;
  font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-hover); text-decoration:underline}
code,.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}

/* ---- shell ---- */
.shell{display:flex; min-height:100vh}
.sidebar{width:var(--sidebar); flex:0 0 var(--sidebar); background:var(--surface);
  border-right:1px solid var(--line); display:flex; flex-direction:column}
.sidebar--ops{--sidebar:240px}
.brand{display:flex; align-items:center; gap:8px; height:52px; padding:0 16px;
  border-bottom:1px solid var(--line); font-weight:600; color:var(--brand); letter-spacing:.2px}
.brand .dot{width:18px;height:18px;border-radius:5px;background:var(--brand);display:inline-block}
.side-nav{padding:8px; display:flex; flex-direction:column; gap:2px}
.side-group{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.side-group:last-child{border-bottom:0}
.side-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;
  color:var(--slate); font-weight:500}
.side-item:hover{background:#F5F6F8; text-decoration:none; color:var(--slate)}
.side-item.is-active{background:var(--brand-tint); color:var(--brand-hover)}
.side-item .ic{width:18px;text-align:center;color:var(--muted);font-size:13px}
.side-sub{padding:2px 0 2px 30px;display:flex;flex-direction:column;gap:1px}
.side-sub a{height:25px;display:flex;align-items:center;padding:0 8px;border-radius:5px;color:var(--slate)}
.side-sub a:hover{background:#F5F6F8;text-decoration:none}
.side-sub a.is-active{background:var(--brand-tint);color:var(--brand-hover)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{height:52px; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 16px 0 24px}
.crumbs{color:var(--muted)}
.crumbs a{color:var(--muted)} .crumbs .sep{padding:0 8px; color:var(--muted2)}
.crumbs .now{color:var(--body)}
.topbar-right{display:flex;align-items:center;gap:8px}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-tint);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:11px}

.page{padding:24px 32px 64px; max-width:1180px}
h1{font-size:28px; line-height:1.15; margin:0 0 6px; color:var(--ink); font-weight:500}
h2{font-size:16px; margin:0 0 4px; color:var(--ink); font-weight:500}
h3{font-size:13px; margin:0 0 4px; color:var(--ink); font-weight:600}
.lede{color:var(--muted); margin:0 0 20px; max-width:70ch}
.env-head{margin-bottom:18px}
.env-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.env-sub{color:var(--muted);margin:4px 0 14px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:0}
.tabs a{padding:7px 12px;border-radius:6px 6px 0 0;color:var(--slate);font-weight:500}
.tabs a:hover{background:#F5F6F8;text-decoration:none}
.tabs a.is-active{color:var(--brand-hover);box-shadow:inset 0 -2px 0 var(--brand)}
.subtabs{display:flex;gap:4px;padding:10px 0 0}
.subtabs a{padding:4px 9px;border-radius:999px;color:var(--slate);font-size:12px}
.subtabs a:hover{background:#F5F6F8;text-decoration:none}
.subtabs a.is-active{background:var(--brand-tint);color:var(--brand-hover)}

/* ---- cards ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin:16px 0}
.card__head{padding:14px 16px; border-bottom:1px solid var(--line)}
.card__body{padding:16px}
.card__foot{padding:12px 16px; background:#F5F6F8; border-top:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r); display:flex; gap:8px; align-items:center}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;
  font-size:12px;font-weight:500;border:1px solid transparent}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--prod{background:var(--brand-tint);color:var(--brand-hover)}
.badge--ok{background:var(--ok-tint);color:var(--ok)}
.badge--warn{background:var(--warn-tint);color:var(--warn)}
.badge--bad{background:var(--bad-tint);color:var(--bad)}
.badge--idle{background:#F0F2F5;color:var(--muted)}
.badge--observed{background:#EEF3F8;color:#2A4A6B;border-color:#D2E0EC}
.badge--proposed{background:var(--prop-tint);color:var(--prop);border-color:#DCD1F0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:6px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--body);
  font:inherit; font-weight:500; cursor:pointer}
.btn:hover{background:#F5F6F8; text-decoration:none; color:var(--body)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{background:#C33903;color:#fff}
.btn--sm{height:26px;padding:0 9px;font-size:12px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* ---- forms ---- */
label.fld{display:block;margin-bottom:14px;max-width:460px}
label.fld > span{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
input[type=text],input[type=email],select,textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:6px;background:#fff;
  padding:7px 9px;font:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-tint);border-color:var(--brand)}
.hint{color:var(--muted);font-size:12px;margin-top:4px}

/* ---- data tables ---- */
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:last-child td{border-bottom:0}

/* ---- definition rows ---- */
dl.kv{display:grid;grid-template-columns:200px 1fr;gap:0;margin:0}
dl.kv dt{color:var(--muted);padding:7px 0;border-bottom:1px solid var(--line)}
dl.kv dd{margin:0;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink)}
dl.kv dt:last-of-type,dl.kv dd:last-of-type{border-bottom:0}

/* ---- notices ---- */
.notice{border:1px solid var(--line);border-left-width:3px;border-radius:6px;padding:12px 14px;margin:12px 0}
.notice h3{margin-bottom:4px}
.notice--keep{background:var(--ok-tint);border-color:#C6E4D5;border-left-color:var(--ok)}
.notice--warn{background:var(--warn-tint);border-color:#EFDDB4;border-left-color:var(--warn)}
.notice--stop{background:var(--bad-tint);border-color:#F2CFCC;border-left-color:var(--bad)}
.notice--info{background:#EEF3F8;border-color:#D2E0EC;border-left-color:#2A4A6B}

/* ---- provenance marker: observed vs proposed ---- */
.prov{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.prov--observed{background:#EEF3F8;color:#2A4A6B}
.prov--proposed{background:var(--prop-tint);color:var(--prop)}
.provbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:6px;
  padding:9px 12px;margin:0 0 18px}
.provbar .t{color:var(--muted);font-size:12px}

/* ---- steps ---- */
.step{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:14px 0}
.step__head{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.step__n{flex:0 0 24px;height:24px;border-radius:50%;background:#F0F2F5;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
.step.is-active .step__n{background:var(--brand);color:#fff}
.step.is-done .step__n{background:var(--ok-tint);color:var(--ok)}
.step.is-locked{opacity:.5}
.step__body{padding:0 16px 16px 52px}
.step[hidden]{display:none}

/* record cards */
.rec{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:10px 0;background:#fff}
.rec--change{border-left:3px solid var(--accent)}
.rec--keep{border-left:3px solid var(--ok);background:var(--ok-tint)}
.rec dl.kv{grid-template-columns:130px 1fr}
.rec dl.kv dt,.rec dl.kv dd{border-bottom:0;padding:3px 0}
.copyrow{display:flex;gap:8px;align-items:center}
.copyrow code{background:#F5F6F8;border:1px solid var(--line);border-radius:4px;padding:2px 6px}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:0}
.tl .mark{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);margin-top:1px}
.tl li.is-done .mark{background:var(--ok);border-color:var(--ok)}
.tl li.is-now .mark{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.tl .when{color:var(--muted);font-size:12px}

.log{list-style:none;margin:0;padding:0;font-size:12px}
.log li{padding:6px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.log li:last-child{border-bottom:0}
.log b{color:var(--ink);font-weight:500}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}.sidebar{display:none}}
.spacer{height:8px}