/* ============================================================
   Umbraset — "variant D" design tokens applied to MkDocs Material
   Mirrors docs/mockups/variant-d-mandate.html
   ============================================================ */
@import url('../assets/external/fonts.googleapis.com/css2.c3c05c28.css');

:root{
  --u-display:'Space Grotesk',sans-serif;
  --u-mono:'IBM Plex Mono',monospace;
  --u-ink:#16202e; --u-soft:#566071;
  --u-paper:#fbfcfd; --u-card:#ffffff;
  --u-line:#e4e9ef; --u-line-soft:#eef2f6; --u-gray-line:#9aa4b2; --u-gray-fill:#f1f3f6;
  --u-coral:#d85a30; --u-coral-tint:#f8ded2; --u-coral-deep:#c2410c;
  --u-blue:#2f6db0; --u-blue-tint:#dce8f7;
  --u-purple:#7a4fb0; --u-purple-tint:#e8def3;
  --u-teal:#2f8f83; --u-teal-tint:#d6ece8;
}

/* ---- Material palette overrides ---- */
[data-md-color-scheme="default"]{
  --md-primary-fg-color:#ffffff;
  --md-primary-fg-color--light:#ffffff;
  --md-primary-fg-color--dark:#f1f3f6;
  --md-accent-fg-color:var(--u-coral-deep);
  --md-typeset-a-color:var(--u-coral-deep);
  --md-default-bg-color:var(--u-paper);
  --md-typeset-color:#26384b;
}

/* ---- editorial header ---- */
.md-header{color:var(--u-ink);border-bottom:1px solid var(--u-line);box-shadow:none}
.md-header--shadow{box-shadow:none}
.md-header__title{font-family:var(--u-display);font-weight:700;letter-spacing:-.02em}
.md-tabs{color:var(--u-ink);background:#fff;border-bottom:1px solid var(--u-line)}

/* remove the default logo icon — wordmark only (mirrors variant-d) */
.md-header__button.md-logo,.md-nav__button.md-logo{display:none}

/* brand wordmark: lowercase "umbra" + "set" in coral — mirrors variant-d */
.md-header__title .md-header__topic:first-child .md-ellipsis{font-size:0;letter-spacing:0}
.md-header__title .md-header__topic:first-child .md-ellipsis::before,
.md-header__title .md-header__topic:first-child .md-ellipsis::after{
  font-size:1.05rem;line-height:2.4rem;display:inline-block;vertical-align:middle;
  text-transform:lowercase;font-weight:700}
.md-header__title .md-header__topic:first-child .md-ellipsis::before{content:"umbra";color:var(--u-ink)}
.md-header__title .md-header__topic:first-child .md-ellipsis::after{content:"set";color:var(--u-coral)}

/* ---- typography (compact, variant-d scale) ---- */
.md-typeset{font-size:.7rem;line-height:1.65}
.md-typeset h1,.md-typeset h2,.md-typeset h3,.md-typeset h4{
  font-family:var(--u-display);letter-spacing:-.01em;color:var(--u-ink);font-weight:600}
.md-typeset h1{font-weight:700;letter-spacing:-.02em;font-size:1.45rem;margin-bottom:.4rem}
.md-typeset h2{font-size:1.08rem;margin-top:1.8rem}
.md-typeset h3{font-size:.86rem}
.md-typeset code{font-family:var(--u-mono);font-size:.82em}
.md-typeset .lead{font-size:.92rem}

/* compact sidebar + TOC */
.md-nav{font-size:.62rem}
.md-nav__title{font-size:.62rem}
.md-typeset table:not([class]){font-size:.68rem}

/* lead paragraph (add {.lead} in markdown) */
.md-typeset .lead{font-size:1.05rem;color:var(--u-soft);max-width:66ch}
.md-typeset .kicker{font-family:var(--u-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--u-coral)}

/* tables: mono uppercase header */
.md-typeset table:not([class]) th{font-family:var(--u-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--u-soft);background:var(--u-paper)}
.md-typeset .yes{color:var(--u-teal);font-weight:700}
.md-typeset .no{color:var(--u-coral-deep);font-weight:700}

/* dark code block tuned to the palette */
.md-typeset pre>code{background:#10202e;color:#cdd9e5;border:1px solid #1c3346;border-radius:12px}
.highlight .c,.highlight .c1,.highlight .cm{color:#7c8aa5 !important}

/* ============================================================
   Swimlane diagram component (lifted from variant-d)
   Use inside a page via raw HTML (md_in_html is enabled)
   ============================================================ */
.md-typeset .diagram{margin:1.6rem 0;border:1px solid var(--u-line);border-radius:18px;background:var(--u-card);overflow:hidden}
.md-typeset .dg-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--u-line-soft);background:var(--u-paper)}
.md-typeset .dg-cap .t{font-family:var(--u-display);font-weight:600;font-size:.86rem}
.md-typeset .dg-cap .n{font-family:var(--u-mono);font-size:.7rem;color:var(--u-gray-line)}
.md-typeset .lane{padding:22px 24px;border-bottom:1px solid var(--u-line-soft);position:relative}
.md-typeset .lane:last-child{border-bottom:0}
.md-typeset .lane-tag{position:absolute;top:14px;left:24px;font-family:var(--u-mono);font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--u-soft)}
.md-typeset .lane.blue{background:linear-gradient(0deg,var(--u-blue-tint),transparent 140%)}
.md-typeset .lane.coral{background:linear-gradient(0deg,var(--u-coral-tint),transparent 150%)}
.md-typeset .lane.purple{background:linear-gradient(0deg,var(--u-purple-tint),transparent 140%)}
.md-typeset .lane-body{padding-top:24px}
.md-typeset .nodes{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.md-typeset .node{flex:1;min-width:140px;max-width:220px;background:var(--u-card);
  border:1px solid var(--u-line);border-radius:12px;padding:12px 14px}
.md-typeset .node.b{border-color:#b9d2ee}
.md-typeset .node .lbl{font-family:var(--u-display);font-weight:600;font-size:.82rem}
.md-typeset .node .sub{font-size:.72rem;color:var(--u-soft);margin-top:3px}
.md-typeset .node .v{font-family:var(--u-mono);font-size:.7rem;color:var(--u-blue);margin-top:7px}
.md-typeset .bigbox{background:var(--u-card);border:1.5px solid var(--u-coral);border-radius:14px;padding:16px 18px;text-align:center}
.md-typeset .bigbox .lbl{font-family:var(--u-display);font-weight:700;font-size:.95rem;color:var(--u-coral-deep)}
.md-typeset .bigbox .sub{font-size:.76rem;color:var(--u-soft);margin-top:4px}
.md-typeset .bigbox .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.md-typeset .chip{font-family:var(--u-mono);font-size:.64rem;padding:4px 10px;border-radius:999px;background:var(--u-gray-fill);color:var(--u-soft)}
.md-typeset .flow{display:flex;justify-content:center;color:var(--u-coral);font-size:22px;line-height:1;padding:8px 0}
.md-typeset .callout-pill{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.72rem;
  background:var(--u-teal-tint);color:#1f5f57;border-radius:999px;padding:6px 14px;font-weight:500}
.md-typeset .cross{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;margin-top:6px}
.md-typeset .col .item{background:var(--u-card);border:1px solid var(--u-line);border-radius:9px;
  padding:8px 10px;margin:7px 0;font-family:var(--u-mono);font-size:.7rem}
.md-typeset .col.out .item{border-color:#f0c3ae;color:var(--u-coral-deep)}
.md-typeset .col h4{font-family:var(--u-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--u-soft);margin:0 0 4px;text-align:center}
.md-typeset .cross .mid{position:relative;height:100%;min-height:120px}
.md-typeset .cross .mid svg{position:absolute;inset:0;width:100%;height:100%}

/* crossing animation */
.md-typeset .cross .mid path{stroke-dasharray:6 5}
@media (prefers-reduced-motion:no-preference){
  .md-typeset .cross .mid path{stroke-dashoffset:160;animation:cj-draw 1.1s ease-out forwards,cj-flow 1.1s linear infinite}
  .md-typeset .cross .mid path:nth-child(2){animation-delay:.15s,1.25s}
  .md-typeset .cross .mid path:nth-child(3){animation-delay:.3s,1.4s}
}
@keyframes cj-draw{to{stroke-dashoffset:0}}
@keyframes cj-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-22}}
.md-typeset .cross .mid circle{r:3.1;fill:var(--u-coral)}

/* two-column cards */
.md-typeset .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.2rem}
@media(max-width:720px){.md-typeset .cols{grid-template-columns:1fr}}
.md-typeset .ucard{background:var(--u-card);border:1px solid var(--u-line);border-radius:14px;padding:18px 20px}
.md-typeset .ucard.good{border-left:3px solid var(--u-teal)}
.md-typeset .ucard.bad{border-left:3px solid var(--u-coral)}
.md-typeset .ucard h3{margin:0 0 .3rem;font-size:1rem}
.md-typeset .ucard ul{margin:.3rem 0 0}