/* BuildMidas documentation — shell styles.
   Tokens mirror the public marketing pages (agents.html et al) so docs feel
   like the same product, not a bolted-on site. */
:root{
  --bg:#ffffff; --fg:#0e1119; --muted:#59617a; --line:#e8eaf1;
  --card:#ffffff; --card2:#f6f7fb; --brand:#1a73e8; --brand2:#7c3aed;
  --gold:#e6a938; --ink:#12141d;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 34px rgba(16,24,40,.07);
  --radius:16px;
  --sidebar:274px; --toc:220px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     background:var(--bg);color:var(--fg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ── top bar ─────────────────────────────────────────────────────────── */
.dnav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);
      backdrop-filter:saturate(160%) blur(12px)}
/* Three-part bar: brand left, search CENTRED in the row, actions right. The
   outer columns are sized equally so the search sits on the true centre line
   regardless of how wide either side's content is. */
.dnav-in{display:grid;grid-template-columns:1fr minmax(0,560px) 1fr;align-items:center;
         gap:20px;height:72px;padding:0 22px}
.dlogo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em}
.dlogo svg{width:34px;height:34px;border-radius:9px}
.dnav-sp{justify-self:end;display:flex;align-items:center;gap:12px}
.dnav-sp a{font-size:14px;color:var(--muted);font-weight:500}
.dnav-sp a:hover{color:var(--fg)}
/* Buttons carry the landing page's own tokens (.btn / .btn-primary /
   .btn-ghost) so the docs bar reads as the same product. */
.dbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:999px;
      padding:9px 17px;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;
      transition:transform .12s,filter .12s,background .12s}
.dbtn:hover{transform:translateY(-1px)}
.dnav-cta{background:#12141d;color:#fff !important}
.dnav-cta:hover{filter:brightness(1.7)}
.dbtn-ghost{background:transparent;color:var(--fg) !important;border-color:var(--line)}
.dbtn-ghost:hover{background:var(--card2)}
.dbtn svg{width:16px;height:16px;flex-shrink:0}
.dsearch{position:relative;justify-self:stretch}
.dsearch input{width:100%;height:44px;padding:0 16px 0 42px;border:1px solid var(--line);
               border-radius:999px;font-size:15px;background:var(--card2);color:var(--fg)}
.dsearch input::placeholder{color:#8b93a3}
.dsearch input:focus{outline:none;border-color:var(--brand);background:#fff}
.dsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.dsearch-out{position:absolute;top:52px;left:0;right:0;width:auto;background:#fff;border:1px solid var(--line);
             border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none;max-height:60vh;overflow:auto}
.dsearch-out a{display:block;padding:8px 10px;border-radius:8px;font-size:13.5px}
.dsearch-out a:hover{background:var(--card2)}
.dsearch-out .s-sec{font-size:11.5px;color:var(--muted)}
.dsearch-out .s-none{padding:10px;color:var(--muted);font-size:13px}

/* ── layout ──────────────────────────────────────────────────────────── */
.dshell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--toc);
        gap:34px;max-width:1440px;margin:0 auto;padding:28px 22px 80px;align-items:start}
.dnav-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:none;border-radius:12px;background:transparent;color:var(--fg);cursor:pointer;flex-shrink:0;gap:5px;flex-direction:column}
.dnav-burger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.dnav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dnav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.dnav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dside-extra{display:none}
.dside{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow-y:auto;
       scrollbar-width:thin;scrollbar-color:transparent transparent;padding-right:6px}
.dside:hover{scrollbar-color:rgba(0,0,0,.18) transparent}
.dside::-webkit-scrollbar{width:6px}
.dside::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
.dside:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18)}
.dgroup{margin-bottom:20px}
.dgroup h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
           font-weight:700;margin:0 0 6px 12px}
.dside a{display:block;padding:7px 12px;border-radius:9px;font-size:14px;color:var(--muted);font-weight:500}
.dside a:hover{background:var(--card2);color:var(--fg)}
.dside a.on{background:#e8f0fe;color:var(--brand);font-weight:600}

.dmain{min-width:0}
.dbreadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.dmain h1{font-size:38px;line-height:1.15;letter-spacing:-.025em;margin:0 0 12px;text-wrap:balance}
.dlede{font-size:17.5px;color:var(--muted);margin:0 0 30px;max-width:70ch}
.dmain h2{font-size:24px;letter-spacing:-.02em;margin:38px 0 12px;scroll-margin-top:80px;text-wrap:balance}
.dmain h3{font-size:17px;margin:24px 0 8px;scroll-margin-top:80px}
.dmain p{margin:0 0 14px;max-width:72ch}
.dmain ul,.dmain ol{margin:0 0 16px 20px;max-width:72ch}
.dmain li{margin:6px 0}
.dmain code{background:var(--card2);border:1px solid var(--line);border-radius:5px;
            padding:1px 5px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.dmain strong{font-weight:650}
/* Callouts: tinted block only — no border and no left stripe. They start at
   the same left edge as every other block and run the full width of the
   content column, so nothing in the page is inset relative to its neighbours. */
.dnote{background:#f0f9ff;border:none;border-radius:12px;padding:14px 18px;
       margin:0 0 18px;font-size:14px;color:#0b4a75;width:100%;max-width:none}
.dwarn{background:#fffaf0;border:none;border-radius:12px;padding:14px 18px;
       margin:0 0 18px;font-size:14px;color:#6b4c12;width:100%;max-width:none}
.dcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:0 0 26px}
.dcard{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:var(--card);
       box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;display:block}
.dcard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(16,24,40,.10)}
.dcard b{display:block;font-size:15px;margin-bottom:4px}
.dcard span{font-size:13.5px;color:var(--muted);line-height:1.5}
.dsteps{counter-reset:s;list-style:none;margin-left:0}
.dsteps>li{counter-increment:s;position:relative;padding-left:38px;margin:0 0 16px}
.dsteps>li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;
  border-radius:50%;background:#e8f0fe;color:var(--brand);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.dtable{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px;display:block;overflow-x:auto}
.dtable th,.dtable td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.dtable th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.dnext{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:44px;padding-top:22px}
.dnext a{border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600}
.dnext a:hover{border-color:var(--brand);color:var(--brand)}

.dtoc{position:sticky;top:76px;font-size:13.5px}
.dtoc h5{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
         font-weight:700;margin:0 0 8px}
.dtoc a{display:block;padding:4px 0 4px 11px;border-left:2px solid var(--line);color:var(--muted)}
.dtoc a:hover{color:var(--fg)}
.dtoc a.on{border-left-color:var(--brand);color:var(--brand);font-weight:600}

/* Footer matches the landing page's own footer, token for token. */
.dfoot{padding:40px 0 60px;color:var(--muted);font-size:14px}
.dfoot .in{max-width:1440px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;
           gap:20px;flex-wrap:wrap;align-items:center}
.dfoot .logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;
             letter-spacing:-.02em;color:var(--fg)}
.dfoot .logo svg{width:26px;height:26px}
.dfoot .foot-legal{display:flex;gap:8px 22px;flex-wrap:wrap;justify-content:center}
.dfoot a:hover{color:var(--fg)}

@media(max-width:1180px){
  .dshell{grid-template-columns:var(--sidebar) minmax(0,1fr)}
  .dtoc{display:none}
}
@media(max-width:900px){
  /* Nothing may push the page sideways on a phone: the nav wraps its own
     row, long words break rather than stretch, and wide content scrolls
     inside its own box (see .dtable). */
  html,body{overflow-x:hidden;max-width:100%}
  .dnav-in{display:flex;flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px;row-gap:8px}
  .dsearch{order:3;flex:1 1 100%}
  .dnav-sp{margin-left:auto}
  .dmain h1,.dmain h2,.dmain h3,.dmain p,.dmain li{overflow-wrap:anywhere}
  .dshell{grid-template-columns:1fr;gap:18px;padding-top:16px}
  /* Mobile chrome: the bar keeps the logo, the search field and a burger.
     Everything else — the sixteen doc links, the top-bar links and the Open
     dashboard button — moves inside the burger panel, so a docs page opens on
     its own content instead of on a menu. */
  .dnav-in{padding:10px 22px}
  .dsearch{order:3;flex:1 1 100%;margin:0}
  .dsearch input{width:100%}
  .dnav-sp .dnav-cta{display:none}
  .dnav-burger{display:inline-flex}

  .dside{position:fixed;left:0;right:0;top:var(--dnav-h,115px);bottom:0;z-index:60;
    display:none;margin:0;padding:14px 22px 28px;background:var(--bg);
    border-bottom:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
    max-height:none}
  .dside.open{display:block}
  body.dmenu-open{overflow:hidden}
  /* the floating Ask AI button sits above the panel's own CTA at the
     bottom of the list — it has no job while a menu is open */
  body.dmenu-open .bmpa-fab{display:none}
  .dside-extra{display:flex;flex-direction:column;gap:4px;margin-top:14px;
    padding-top:14px;border-top:1px solid var(--line)}
  /* Match the Open dashboard button on the landing pages exactly. Inside the
     panel the sidebar's own link styling out-specifies .dbtn, so the CTA was
     rendering as a plain grey link on a transparent 9px-radius box instead of
     the black pill people recognise. Values taken from .nav-cta .btn-primary
     on the landing: #12141d / #fff / 999px / 15px / 600. */
  .dside .dside-extra a.dside-cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:10px;min-height:44px;padding:11px 20px;
    background:#12141d;color:#fff;border-radius:999px;
    font-size:15px;font-weight:600;text-align:center;border:1px solid transparent}
  .dside .dside-extra a.dside-cta:hover{background:#12141d;color:#fff;opacity:.92}
  .dmain h1{font-size:30px}
  /* the field fills its pill: it owns a whole row now, and a 150px input
     inside a 346px pill left most of the control dead to taps */
  .dnav-sp a:not(.dnav-cta){display:none}
}

/* Language trigger sits with the other actions; locale-modal.css owns its
   look, this only seats it in the docs bar. */
.dnav-sp .bm-locale-trigger{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:none;border-radius:999px;background:transparent;
  color:var(--muted);cursor:pointer;flex-shrink:0}
.dnav-sp .bm-locale-trigger:hover{background:var(--card2);color:var(--fg)}