/* dev.agentmesh.ai: the shared palette, the left menu and the light/dark switch.
   Every page loads this after its own <style>, so the tokens here replace the
   page's. Light is the default; dark only when the reader presses the switch
   (theme.js). Ratios are WCAG 2 contrast, measured; the floor is 7:1 for body
   text and 4.5:1 for every other piece of text at any size, and deploy.sh
   refuses to publish below it (tools/contrast-gate.mjs). No text is faded with
   opacity or a translucent colour. */

/* ── Light ── */
:root{
  --bg:#FFFFFF;          /* page */
  --surface:#F6F4EF;     /* menu, cards, panels */
  --surface-2:#EEEBE3;   /* a panel inside a panel */
  --line:#DCD8CF;        /* borders only, never text */
  --text:#14211F;        /* 16.57 on bg, 15.08 on surface, 13.91 on surface-2 */
  --text-2:#3B4A48;      /*  9.30 on bg,  8.46 on surface */
  --text-3:#4F5F5C;      /*  6.72 on bg,  6.12 on surface,  5.64 on surface-2 */
  --accent:#0A5E49;      /*  7.75 on bg,  7.05 on surface */
  --accent-tint:#E3F1EB; /* current menu row: --text on it 14.24 */
  --amber:#8A4B00;  --amber-tint:#FDF1E0;   /* 6.80 on bg, 6.10 on tint, 5.71 on surface-2 */
  --blue:#1D5BC2;   --blue-tint:#EAF1FD;    /* 6.31 on bg, 5.56 on tint, 5.30 on surface-2 */
  --violet:#6340C4; --violet-tint:#F1ECFC;  /* 6.86 on bg, 5.93 on tint */
  --mint:#0A5E49;   --mint-tint:#E3F1EB;    /* 7.75 on bg, 6.66 on tint */
  --on-strong:#FFFFFF;   /* text on an amber/accent fill: 6.80 on amber */

  /* The names the pages' own CSS was written with, mapped onto the palette. */
  --ink:var(--bg); --panel:var(--surface); --panel-2:var(--surface-2);
  --paper:var(--text); --dim:var(--text-2); --faint:var(--text-3);
  --signal:var(--amber); --verify:var(--mint); --address:var(--blue); --broadcast:var(--violet);
  --text2:var(--text-2); --railtext:var(--text-2);
}

/* ── Dark (the switch) ── */
:root[data-theme="dark"]{
  --bg:#10191C; --surface:#16232A; --surface-2:#1C2B32; --line:#2A3B40;
  --text:#E9F0EE;        /* 15.42 on bg, 13.89 on surface */
  --text-2:#C3D0CD;      /* 11.23 on bg, 10.11 on surface */
  --text-3:#A7B6B2;      /*  8.47 on bg,  7.63 on surface, 6.92 on surface-2 */
  --accent:#4FD9AB;      /* 10.06 on bg,  9.06 on surface */
  --accent-tint:#15302A; /* --text on it 12.21 */
  --amber:#F2A93B;  --amber-tint:#2A2418;   /* 8.93 on bg, 7.71 on tint */
  --blue:#8AB8FF;   --blue-tint:#172636;    /* 8.81 on bg, 7.59 on tint, 7.20 on surface-2 */
  --violet:#C2AEFF; --violet-tint:#221F35;  /* 9.16 on bg, 8.20 on tint */
  --mint:#4FD9AB;   --mint-tint:#15302A;    /* 10.06 on bg, 7.96 on tint */
  --on-strong:#10191C;   /* 8.93 on amber */
  color-scheme:dark;
}

/* ── The page ── */
:root body{ background:var(--bg); background-image:none; color:var(--text); }
:root body::before{ content:none; display:none; }
:root body > .layout{ grid-template-columns:280px minmax(0,1fr); gap:0; padding:0; }
:root .main > .wrap, :root .main .wrap{ padding-left:48px; padding-right:48px; }

/* ── The left menu ── */
.sidenav{ background:var(--surface); border-right:1px solid var(--line); position:sticky; top:0;
  align-self:start; height:100vh; overflow-y:auto; scrollbar-width:thin; padding:22px 18px 28px;
  z-index:10; font-family:var(--body); }
.sn-head{ display:flex; align-items:center; gap:10px; margin:0 0 22px; }
.sn-brand{ display:flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; }
.sn-mark{ flex:none; }
.sn-wm{ font-family:var(--disp); font-weight:500; font-size:1.12rem; letter-spacing:-.01em; }
.sn-wm b{ font-weight:700; }
.sn-btn{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--body);
  font-size:.85rem; font-weight:600; line-height:1.2; color:var(--text); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:6px 10px; cursor:pointer; }
.sn-btn:hover{ border-color:var(--text-3); }
.sn-btn svg{ width:16px; height:16px; }
.sn-to-light{ display:none; }
:root[data-theme="dark"] .sn-to-dark{ display:none; }
:root[data-theme="dark"] .sn-to-light{ display:inline; }
.sn-btn.sn-menu{ display:none; margin-left:0; }
.sn-sec{ margin:0 0 6px; }
.sn-sec > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:700; letter-spacing:.01em; color:var(--text); padding:8px 10px; border-radius:8px; }
.sn-sec > summary::-webkit-details-marker{ display:none; }
.sn-sec > summary:hover{ background:var(--bg); }
.sn-chev{ margin-left:auto; width:14px; height:14px; color:var(--text-3); transition:transform .15s ease; }
.sn-sec[open] > summary .sn-chev{ transform:rotate(90deg); }
.sn-items{ padding:2px 0 8px; }
.sn-items a{ display:block; font-size:.9375rem; line-height:1.35; color:var(--text-2); text-decoration:none;
  padding:7px 10px 7px 20px; margin:1px 0; border-radius:8px; border-left:3px solid transparent; }
.sn-items a:hover{ color:var(--text); background:var(--bg); }
.sn-items a.on{ color:var(--text); font-weight:600; background:var(--accent-tint); border-left-color:var(--accent); }
.sn-ext{ font-size:.8em; margin-left:3px; }
.sn-foot{ margin-top:22px; padding:16px 10px 0; border-top:1px solid var(--line); font-size:.85rem;
  color:var(--text-3); line-height:1.5; }
.sn-foot a{ color:var(--accent); font-weight:600; }
.sidenav a:focus-visible, .sidenav button:focus-visible, .sidenav summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; }

/* ── Shared page parts, made readable on both grounds ── */
:root a:focus-visible{ outline-color:var(--accent); }
:root .kicker, :root .eyebrow{ font-family:var(--body); font-weight:700; letter-spacing:.08em; color:var(--accent); }
:root .eyebrow .tag{ color:var(--accent); }
:root pre, :root pre.code{ background:var(--surface); color:var(--text); border-color:var(--line); }
:root .btn-signal{ color:var(--on-strong); box-shadow:none; }
:root .btn-signal .sub, :root .btn-signal.big .sub{ color:var(--on-strong); }
:root .btn-ghost{ background:var(--bg); }
:root table th{ background:var(--surface); }
:root .topbar{ background:var(--bg); }

/* The step menu inside the Google Cloud and Azure guides, set like the site menu. */
:root .main .rail .rh{ font-family:var(--body); font-size:.9rem; font-weight:700; letter-spacing:.01em;
  text-transform:none; color:var(--text); }
:root .main .rail nav a{ font-family:var(--body); font-size:.9375rem; line-height:1.35; color:var(--text-2);
  border-radius:0 8px 8px 0; }
:root .main .rail nav a:hover{ color:var(--text); }
:root .main .rail nav a.on{ color:var(--text); font-weight:600; background:var(--accent-tint); border-left-color:var(--accent); }
:root .main .rail nav a .n, :root .main .rail nav a.on .n{ color:var(--text-3); font-family:var(--body); }

/* The analytics consent bar (ga.js) draws itself from the page's colours when
   it opens; these keep it on the palette if the reader switches theme. */
:root #analytics-consent{ background:var(--surface) !important; color:var(--text) !important;
  border-color:var(--line) !important; }
:root #analytics-consent button{ background:var(--bg) !important; color:var(--text) !important;
  border-color:var(--text) !important; }
:root #analytics-consent button:last-child{ background:var(--text) !important; color:var(--bg) !important; }

/* ── Narrow screens: the menu folds behind a Menu button ── */
@media (max-width:900px){
  :root body > .layout{ grid-template-columns:minmax(0,1fr); }
  .sidenav{ position:sticky; top:0; height:auto; max-height:100vh; border-right:0;
    border-bottom:1px solid var(--line); padding:12px 16px; }
  .sn-head{ margin:0; }
  .sn-btn.sn-menu{ display:inline-flex; }
  .sn-nav, .sn-foot{ display:none; }
  .sidenav.open .sn-nav{ display:block; margin-top:14px; }
  .sidenav.open .sn-foot{ display:block; }
  :root .main > .wrap, :root .main .wrap{ padding-left:16px; padding-right:16px; }
}
@media (prefers-reduced-motion:reduce){ .sn-chev{ transition:none; } }