/* ---------- Docs page ---------- */
.docs-hero{background:var(--ca-navy-900);color:var(--ca-paper);padding-block:clamp(2.5rem,6vw,4rem)}
.docs-hero .wrap{display:grid;gap:var(--s-3)}
.docs-hero .display{color:var(--ca-paper);font-size:clamp(2.25rem,5vw,3.75rem)}
.docs-hero .lead{max-width:60ch}
.docs-hero .meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-navy-300);margin-top:var(--s-2)}
.docs{display:grid;grid-template-columns:270px minmax(0,1fr);gap:var(--s-7);padding-block:var(--s-7) var(--s-8);align-items:start}
.docs>div{min-width:0}
.doc{grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){.docs{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}}
/* ---------- Sidebar navigation ----------
   Quiet grouped list rather than a stack of cards: the section titles do the
   work, and only the active item carries colour. The active section's own
   subheadings unfold beneath it, so the sidebar always shows where you are and
   what is inside where you are. */
.dnav{min-width:0;position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;
  overscroll-behavior:contain;padding-right:var(--s-2)}
.dnav-search{position:relative;display:flex;align-items:center;gap:var(--s-2);
  margin-bottom:var(--s-4);padding:0 var(--s-3);height:40px;background:var(--ca-white);
  border:1px solid var(--ca-limestone);border-radius:var(--r-1)}
.dnav-search:focus-within{border-color:var(--ca-navy-700)}
.dnav-search svg{width:16px;height:16px;flex:none;color:var(--ca-slate)}
/* 16px, or iOS zooms the whole page when this takes focus. The ring lives on
   .dnav-search:focus-within, so removing it here is intentional. */
.dnav-search input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font-family:var(--font-text);font-size:1rem;color:var(--ca-ink)}
.dnav-search kbd{flex:none;font-family:var(--font-text);font-weight:600;font-size:.75rem;
  color:var(--ca-slate);border:1px solid var(--ca-limestone);border-bottom-width:2px;
  border-radius:3px;padding:0 var(--s-1);line-height:1.4}

.dnav-group + .dnav-group{margin-top:var(--s-5)}
.dnav-title{font-family:var(--font-accent);font-weight:600;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ca-slate);
  margin:0 0 var(--s-2);padding-left:var(--s-3)}
.dnav ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}

.dnav a{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-1);color:var(--ca-charcoal);text-decoration:none;
  font-size:.9375rem;line-height:1.35;border-left:2px solid transparent}
.dnav-i{width:18px;height:18px;flex:none;color:var(--ca-slate)}
.dnav a:hover{background:var(--ca-navy-50);color:var(--ca-navy-700)}
.dnav a:hover .dnav-i{color:var(--ca-navy-700)}

.dnav a[aria-current="true"]{color:var(--ca-red-500);font-weight:600;
  background:var(--ca-red-50);border-left-color:var(--ca-red-500)}
.dnav a[aria-current="true"] .dnav-i{color:var(--ca-red-500)}

/* The active section's subheadings, hung off a rule that lines up with the
   icon column above them. */
/* Indented so the sub-labels land just under the parent label, with the rule
   sitting in the icon column. */
.dnav-sub{list-style:none;margin:var(--s-1) 0 var(--s-2) var(--s-3);
  padding-left:var(--s-5);display:grid;gap:var(--s-1);border-left:1px solid var(--ca-fog)}
.dnav-sub a{padding:var(--s-1) var(--s-2);font-size:.875rem;color:var(--ca-slate);border-left:0}
.dnav-sub a:hover{background:var(--ca-navy-50);color:var(--ca-navy-700)}
.dnav-sub a[aria-current="true"]{background:none;color:var(--ca-red-500);font-weight:600}

.dnav-empty{font-size:.9375rem;color:var(--ca-slate);padding:var(--s-3)}
.dnav-home{display:inline-block;margin-top:var(--s-5);padding:var(--s-2) var(--s-3);
  font-family:var(--font-accent);font-weight:600;font-size:.875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ca-navy-700);text-decoration:none}
.dnav-home:hover{color:var(--ca-red-500)}

.dnav-toggle{display:none}

@media (max-width:960px){
  .dnav-toggle{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
    padding:0 var(--s-4);margin-bottom:var(--s-4);background:var(--ca-white);
    border:2px solid var(--ca-navy-700);border-radius:var(--r-1);
    font-family:var(--font-accent);font-weight:600;font-size:1.0625rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ca-navy-700);cursor:pointer}
  .dnav-toggle svg{width:20px;height:20px}
  .dnav{position:static;max-height:none;overflow:visible;display:none;
    padding:var(--s-4);margin-bottom:var(--s-5);
    border:1px solid var(--ca-limestone);border-radius:var(--r-2)}
  .dnav.is-open{display:block}
}

.doc{display:grid;gap:var(--s-4);padding-bottom:var(--s-7);margin-bottom:var(--s-7);border-bottom:1px solid var(--ca-fog);scroll-margin-top:90px}
.doc:last-child{border-bottom:0}
.doc>h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.75rem,3.4vw,2.25rem);line-height:1.08;color:var(--ca-navy-700);padding-left:var(--s-4);border-left:6px solid var(--tab,var(--ca-navy-700))}
.doc h3{font-family:var(--font-text);font-weight:700;font-size:1.25rem;color:var(--ca-navy-700);margin-top:var(--s-3)}
.doc h4{font-family:var(--font-accent);font-weight:600;font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-gold-700);margin-top:var(--s-2)}
.doc p{color:var(--ca-charcoal);max-width:70ch}
.doc ul,.doc ol{padding-left:1.25rem;color:var(--ca-charcoal);display:grid;gap:.35rem;max-width:70ch}
.doc .note{background:var(--ca-gold-50);border-left:4px solid var(--ca-gold-500);padding:var(--s-3) var(--s-4);border-radius:0 var(--r-1) var(--r-1) 0;font-size:.9375rem}
.doc .callout{background:var(--ca-navy-700);color:var(--ca-paper);border-radius:var(--r-2);padding:var(--s-5);display:grid;gap:.5rem}
.doc .callout p{color:var(--ca-navy-100);max-width:none}
.doc .callout a{color:var(--ca-paper)}
.doc .callout .eyebrow{color:var(--ca-gold-500)}
.profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-4)}
.profile{border:1px solid var(--ca-limestone);border-radius:var(--r-2);background:var(--ca-white);padding:var(--s-4) var(--s-5);display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;align-content:start}
.profile h3{margin:0;font-family:var(--font-text);font-weight:400;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--ca-navy-700)}
.profile dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.9375rem;margin:0}
.profile dt{font-family:var(--font-accent);font-weight:600;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-gold-700);padding-top:.2rem}
.profile dd{margin:0;color:var(--ca-charcoal)}
.profile .overview{color:var(--ca-ink);font-size:.9375rem}
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-4)}
.link-card{border:1px solid var(--ca-limestone);border-radius:var(--r-2);padding:var(--s-4) var(--s-5);display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem;background:var(--ca-white)}
.link-card b{color:var(--ca-navy-700);font-size:1.0625rem}
.link-card p{font-size:.9375rem}
.link-card ul{font-size:.9rem}
.link-card .btn-row{margin-top:.35rem}
.stars{font-family:var(--font-text);letter-spacing:.05em;color:var(--ca-gold-700);white-space:nowrap}
.punch{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-3)}
.punch div{border:2px dashed var(--ca-navy-300);border-radius:var(--r-2);padding:var(--s-4);min-height:104px;display:grid;align-content:space-between;gap:.5rem;font-family:var(--font-accent);font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-navy-700);background:var(--ca-white)}
.punch div span{font-family:var(--font-text);font-weight:400;font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--ca-slate)}
.punch div i{width:26px;height:26px;border-radius:50%;border:2px solid var(--ca-red-500);display:block}
.qb th.lft,.qb td.lft{text-align:left}
.orgchart{border:1px solid var(--ca-limestone);border-radius:var(--r-2);background:var(--ca-white);padding:var(--s-3)}
.orgchart img{width:100%;height:auto}
.top-link{position:fixed;right:16px;bottom:16px;z-index:50}

/* The group name above the section title, the way GitBook labels a page. */
.doc-eyebrow{font-family:var(--font-accent);font-weight:600;font-size:.875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ca-gold-700);
  padding-left:var(--s-4);margin:0 0 calc(var(--s-3) * -1)}

/* The seal on the Quick Book cover. Two columns where there is room, with the
   badge leading the title; it drops above the copy on narrow screens
   rather than shrinking to an illegible token. */
.docs-hero .wrap{
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:var(--s-6);
}
.docs-seal{
  grid-row:1 / span 4;
  grid-column:1;
  width:clamp(112px,13vw,188px);
  height:auto;
  align-self:center;
  filter:drop-shadow(0 8px 22px rgba(1,19,47,.55));
}
@media (max-width:760px){
  .docs-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .docs-seal{grid-row:auto;grid-column:1;width:104px;margin-bottom:var(--s-2)}
}