/* archigov.com/docs — the landing page's Carbon language at reading scale: g100 shell, white reading surface,
   gray-10 side navigation, one primary blue, square corners, IBM Plex. */
:root{
  --blue-60:#0f62fe; --blue-70:#0043ce; --blue-10:#edf5ff; --blue-20:#d0e2ff;
  --gray-100:#161616; --gray-90:#262626; --gray-80:#393939; --gray-70:#525252; --gray-60:#6f6f6f; --gray-50:#8d8d8d;
  --gray-30:#c6c6c6; --gray-20:#e0e0e0; --gray-10:#f4f4f4; --white:#ffffff;
  --green-60:#198038; --green-10:#defbe6; --yellow-30:#f1c21b; --yellow-10:#fcf4d6; --red-60:#da1e28; --red-10:#fff1f1;
  --purple-60:#8a3ffc; --purple-10:#f6f2ff;
  --ease:cubic-bezier(0.2,0,0.38,0.9); --fast:110ms;
  --header:48px; --side:272px; --toc:224px;
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:calc(var(--header) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;color:var(--gray-100);background:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue-60);text-underline-offset:2px}
a:hover{color:var(--blue-70)}
:focus-visible{outline:2px solid var(--blue-60);outline-offset:1px}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue-60);color:var(--white);padding:12px 16px;z-index:100}
.skip:focus{left:0}

/* ---------- shell ---------- */
header.shell{position:sticky;top:0;z-index:40;background:var(--gray-100);color:var(--white);height:var(--header);border-bottom:1px solid var(--gray-80)}
header.shell::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--blue-60),#8a3ffc 45%,#08bdba 80%,transparent)}
.bar{display:flex;align-items:center;height:100%;padding:0 16px;gap:16px}
.wordmark{font-weight:600;font-size:.875rem;color:var(--white);text-decoration:none;white-space:nowrap}
.wordmark span{font-weight:300}
.wordmark:hover{color:var(--white)}
.menu{display:none;background:none;border:0;color:var(--white);width:48px;height:48px;margin-left:-16px;cursor:pointer}
.menu:hover{background:var(--gray-80)}
.search-open{display:flex;align-items:center;gap:8px;margin-left:32px;height:32px;min-width:240px;padding:0 8px 0 12px;background:var(--gray-90);border:1px solid var(--gray-80);border-bottom-color:var(--gray-60);color:var(--gray-30);font:inherit;font-size:.875rem;cursor:pointer;transition:background-color var(--fast) var(--ease)}
.search-open:hover{background:var(--gray-80)}
.search-open span{flex:1;text-align:left}
kbd{font-family:'IBM Plex Mono',monospace;font-size:.75rem;border:1px solid var(--gray-70);padding:0 6px;color:var(--gray-30)}
nav.top{margin-left:auto;display:flex;height:100%}
nav.top a{display:flex;align-items:center;padding:0 16px;color:var(--gray-30);font-size:.875rem;text-decoration:none;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
nav.top a:hover{background:var(--gray-80);color:var(--white)}
nav.top a[aria-current]{color:var(--white);box-shadow:inset 0 -3px 0 var(--blue-60)}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
.sidenav{position:sticky;top:var(--header);height:calc(100vh - var(--header));overflow-y:auto;background:var(--gray-10);border-right:1px solid var(--gray-20);padding:24px 0 48px}
.version{font-size:.75rem;letter-spacing:.32px;color:var(--gray-70);padding:0 16px 16px;text-transform:uppercase}
.nav-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:.875rem;font-weight:600;color:var(--gray-100)}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--gray-70);border-bottom:1.5px solid var(--gray-70);transform:rotate(45deg);margin-right:4px;transition:transform var(--fast) var(--ease)}
.nav-group[open] summary::after{transform:rotate(-135deg)}
.nav-group summary:hover{background:var(--gray-20)}
.nav-group ul{list-style:none;padding:0 0 8px}
.nav-group a{display:block;padding:6px 16px 6px 32px;font-size:.875rem;color:var(--gray-70);text-decoration:none;border-left:3px solid transparent;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.nav-group a:hover{background:var(--gray-20);color:var(--gray-100)}
.nav-group a[aria-current]{background:var(--gray-20);color:var(--gray-100);font-weight:600;border-left-color:var(--blue-60)}

.content{display:grid;grid-template-columns:minmax(0,760px) var(--toc);gap:48px;padding:40px 48px 80px;justify-content:start}
article{min-width:0}
.home .content{grid-template-columns:minmax(0,1000px)}

/* ---------- reading ---------- */
.crumbs{list-style:none;padding:0;display:flex;gap:8px;font-size:.875rem;color:var(--gray-70);margin-bottom:12px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--gray-50)}
.crumbs a{color:var(--gray-70);text-decoration:none}
.crumbs a:hover{color:var(--blue-60);text-decoration:underline}
h1{font-weight:300;font-size:2.625rem;line-height:1.2;letter-spacing:0;margin-bottom:16px}
.lead{font-size:1.25rem;line-height:1.4;font-weight:300;color:var(--gray-70);margin-bottom:40px;max-width:38em}
article h2{font-weight:400;font-size:1.75rem;line-height:1.3;margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--gray-20)}
article h3{font-weight:600;font-size:1.125rem;line-height:1.4;margin:32px 0 8px}
article h4{font-weight:600;font-size:1rem;margin:24px 0 8px}
article h2,article h3,article h4{position:relative}
.anchor{position:absolute;left:-24px;width:24px;color:var(--gray-50);text-decoration:none;opacity:0;font-weight:400}
h2 .anchor{top:24px}
article h2:hover .anchor,article h3:hover .anchor,.anchor:focus{opacity:1}
article p,article li{font-size:1rem;line-height:1.625}
article p{margin:0 0 16px}
article ul,article ol{padding-left:24px;margin:0 0 16px}
article li{margin:4px 0}
article li>ul,article li>ol{margin:4px 0}
article strong{font-weight:600}
article hr{border:0;border-top:1px solid var(--gray-20);margin:40px 0}
:not(pre)>code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.875em;background:var(--gray-10);border:1px solid var(--gray-20);padding:1px 4px;word-break:break-word}
a code{color:inherit}

.code{margin:0 0 24px;background:var(--gray-100);border-left:3px solid var(--blue-60)}
.code-bar{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 0 0 16px;font-size:.75rem;letter-spacing:.32px;color:var(--gray-30);border-bottom:1px solid var(--gray-80)}
.copy{height:32px;padding:0 16px;background:none;border:0;color:var(--gray-30);font:inherit;font-size:.75rem;cursor:pointer;transition:background-color var(--fast) var(--ease)}
.copy:hover{background:var(--gray-80);color:var(--white)}
.copy.done{color:#42be65}
pre{margin:0;padding:16px;overflow-x:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.8125rem;line-height:1.6;color:var(--gray-10)}
pre code{font-family:inherit}

.table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--gray-20)}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th{background:var(--gray-20);text-align:left;font-weight:600;padding:12px 16px;white-space:nowrap}
td{padding:12px 16px;border-top:1px solid var(--gray-20);vertical-align:top;line-height:1.5}
tbody tr:hover td{background:var(--gray-10)}
td code{white-space:nowrap}

blockquote{margin:0 0 24px;padding:16px 16px 0;border-left:3px solid var(--gray-50);background:var(--gray-10)}
blockquote p{font-size:.9375rem}
.callout-title{font-weight:600;font-size:.875rem;margin-bottom:4px}
.callout.note{border-left-color:var(--blue-60);background:var(--blue-10)}
.callout.tip{border-left-color:var(--green-60);background:var(--green-10)}
.callout.important{border-left-color:var(--purple-60);background:var(--purple-10)}
.callout.warning{border-left-color:var(--yellow-30);background:var(--yellow-10)}
.callout.caution{border-left-color:var(--red-60);background:var(--red-10)}

/* ---------- on this page ---------- */
.toc{position:sticky;top:calc(var(--header) + 40px);align-self:start;max-height:calc(100vh - var(--header) - 80px);overflow-y:auto;font-size:.875rem}
.toc-title{font-size:.75rem;letter-spacing:.32px;text-transform:uppercase;color:var(--gray-70);margin-bottom:8px}
.toc ul{list-style:none;padding:0;border-left:1px solid var(--gray-20)}
.toc a{display:block;padding:4px 0 4px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--gray-70);text-decoration:none;line-height:1.4}
.toc .d3 a{padding-left:28px;font-size:.8125rem}
.toc a:hover{color:var(--gray-100)}
.toc a.active{color:var(--gray-100);border-left-color:var(--blue-60);font-weight:600}

/* ---------- pager + feedback ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.pager a{display:block;padding:16px;border:1px solid var(--gray-20);text-decoration:none;transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.pager a:hover{border-color:var(--blue-60);background:var(--gray-10)}
.pager span{display:block;font-size:.75rem;color:var(--gray-70)}
.pager b{font-weight:400;font-size:1rem;color:var(--blue-60)}
.pager-next{text-align:right;grid-column:2}
.feedback{margin-top:32px;font-size:.875rem;color:var(--gray-70)}

/* ---------- home ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--gray-20);border:1px solid var(--gray-20);margin:0 0 40px}
.cards a{display:block;background:var(--white);padding:24px;min-height:168px;text-decoration:none;color:var(--gray-100);position:relative;transition:background-color var(--fast) var(--ease)}
.cards a::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent,var(--blue-60));transition:width 240ms var(--ease)}
.cards a:hover{background:var(--gray-10)}
.cards a:hover::before{width:100%}
.cards b{display:block;font-size:1.125rem;font-weight:400;margin-bottom:8px}
.cards span{display:block;font-size:.875rem;color:var(--gray-70);line-height:1.5}
.cards em{display:block;font-style:normal;font-size:.75rem;letter-spacing:.32px;text-transform:uppercase;color:var(--accent,var(--blue-60));margin-bottom:12px}
.home h1{font-size:3rem}

/* ---------- search ---------- */
.search{position:fixed;inset:0;z-index:60;background:rgba(22,22,22,.5);display:flex;justify-content:center;align-items:flex-start;padding:80px 16px 16px}
.search[hidden]{display:none}
.search-panel{width:100%;max-width:640px;background:var(--white);box-shadow:0 8px 24px rgba(0,0,0,.25);max-height:calc(100vh - 120px);display:flex;flex-direction:column}
.search-field{display:flex;align-items:center;gap:12px;padding:0 0 0 16px;border-bottom:2px solid var(--blue-60);color:var(--gray-70)}
.search-field input{flex:1;height:56px;border:0;outline:0;font:inherit;font-size:1.125rem;background:none;color:var(--gray-100)}
.search-close{height:56px;padding:0 16px;background:none;border:0;color:var(--gray-70);font:inherit;font-size:.75rem;cursor:pointer}
.search-close:hover{background:var(--gray-10)}
.results{list-style:none;padding:0;overflow-y:auto}
.results a{display:block;padding:12px 16px;text-decoration:none;color:var(--gray-100);border-left:3px solid transparent}
.results li[aria-selected="true"] a,.results a:hover{background:var(--gray-10);border-left-color:var(--blue-60)}
.results .r-path{display:block;font-size:.75rem;color:var(--gray-70)}
.results .r-head{display:block;font-weight:600;font-size:.9375rem}
.results .r-text{display:block;font-size:.8125rem;color:var(--gray-70);margin-top:2px}
.results mark{background:var(--blue-20);color:inherit}
.results .empty{padding:16px;color:var(--gray-70);font-size:.875rem}
.search-hint{padding:8px 16px;font-size:.75rem;color:var(--gray-70);border-top:1px solid var(--gray-20)}

/* ---------- footer ---------- */
footer{background:var(--gray-100);color:var(--gray-30);font-size:.75rem;padding:32px 0;position:relative;z-index:1}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding:0 16px 0 calc(var(--side) + 48px)}
footer a{color:var(--gray-20)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .content{grid-template-columns:minmax(0,760px);padding:32px 32px 64px}
  .toc{display:none}
}
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .menu{display:block}
  .sidenav{position:fixed;left:0;top:var(--header);bottom:0;width:min(var(--side),85vw);height:auto;z-index:30;transform:translateX(-100%);transition:transform 240ms var(--ease);box-shadow:none}
  .sidenav.open{transform:none;box-shadow:4px 0 16px rgba(0,0,0,.2)}
  .scrim{position:fixed;inset:var(--header) 0 0 0;background:rgba(22,22,22,.5);z-index:20}
  .scrim[hidden]{display:none}
  .content{padding:24px 16px 56px}
  footer .wrap{padding:0 16px}
  nav.top a:not([aria-current]):not(:last-child){display:none}
  .search-open{margin-left:auto;min-width:0}
  .search-open span,.search-open kbd{display:none}
  nav.top{margin-left:0}
  h1{font-size:2rem}
  .home h1{font-size:2.25rem}
  .lead{font-size:1.125rem}
  .anchor{display:none}
}
@media (max-width:520px){ .pager{grid-template-columns:1fr} .pager-next{grid-column:1} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important} }
@media print{ header.shell,.sidenav,.toc,.pager,.feedback,footer,.copy{display:none!important} .layout,.content{display:block;padding:0} }
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
article li:has(> .check),article li:has(> p > .check){list-style:none;margin-left:-24px}
.check{display:inline-block;width:14px;height:14px;border:1px solid var(--gray-70);margin-right:10px;vertical-align:-2px}
.table-wrap:focus-visible,pre:focus-visible{outline:2px solid var(--blue-60);outline-offset:-2px}
/* ---------- screenshots ---------- */
figure.shot{margin:8px 0 32px}
.shot-link{display:block;border:1px solid var(--gray-20);background:var(--gray-10);box-shadow:0 2px 6px rgba(0,0,0,.08);transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.shot-link:hover{border-color:var(--blue-60);box-shadow:0 4px 12px rgba(0,0,0,.12)}
figure.shot img{display:block;width:100%;height:auto}
figure.shot figcaption{font-size:.8125rem;color:var(--gray-70);margin-top:8px;line-height:1.4}
/* ---------- process diagrams ---------- */
figure.diagram{margin:8px 0 32px}
.diagram-scroll{overflow-x:auto;border:1px solid var(--gray-20);background:#f4f4f4;display:flex;justify-content:center}
.diagram-scroll:focus-visible{outline:2px solid var(--blue-60);outline-offset:-2px}
svg.flow{display:block;width:100%;min-width:540px;height:auto;font-family:'IBM Plex Sans',system-ui,sans-serif}
.flow .fl-text{font-size:12.5px;fill:#161616}
.flow .fl-sub{font-size:10.5px;fill:#525252}
.flow .fl-inv{fill:#ffffff}
.flow .fl-lane{font-size:12px;font-weight:600;fill:#161616}
.flow .fl-edge{font-size:10.5px;fill:#393939}
figure.diagram figcaption{font-size:.8125rem;color:var(--gray-70);margin-top:8px}