/* The architecture storyboard at the top of the Embla 1 architecture post (arch-story.js): a full-bleed
   panel with the board on the left and an accordion of the steps on the right (under the board on
   phones). Opening a step folds out its copy and moves the board to that step's detail.
   The three attention kinds keep the colours the post was drafted and reviewed with: blue for the
   sliding window, amber for full, green for sparse, each a little brighter on dark. They are an
   approved exception to the no-blue/no-green rule, listed in scripts/check-allowlist.json. */

.as{--c-swa:#6A86B0;--c-full:#DB9D33;--c-sparse:#3F9A80;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .as{--c-swa:#8AA6D2;--c-full:#E8B14C;--c-sparse:#5CBC9C;}
}
:root[data-theme="dark"] .as{--c-swa:#8AA6D2;--c-full:#E8B14C;--c-sparse:#5CBC9C;}

.note .body .as{width:100vw;position:relative;margin:40px 0 56px calc(50% - 50vw);background:var(--void);}
.as .as-sticky{position:relative;width:min(1440px,100vw);height:clamp(600px,calc(100vh - 110px),880px);
  margin:0 auto;overflow:hidden;}
.as .as-board{position:absolute;inset:0;}
.as .as-svg{display:block;width:100%;height:100%;}

/* the key for the backbone's colours */
.as .as-legend{position:absolute;z-index:1;left:0;right:0;top:0;padding:22px 28px 8px;background:var(--void);display:flex;flex-wrap:wrap;gap:6px 20px;
  font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--ink2);}
.as .as-legend span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.as .as-legend i{display:block;width:12px;height:12px;border-radius:3px;}
.as .as-legend b{font-weight:500;color:var(--ink3);}
.as .k-swa i{background:var(--c-swa);} .as .k-full i{background:var(--c-full);} .as .k-sparse i{background:var(--c-sparse);}

/* the step copy is the source for the accordion (arch-story.js builds it into .as-nav) */
.note .body .as-copy{display:none;}

/* the accordion: one title per step, the open one folded out to its copy */
.as .as-nav{position:absolute;top:0;right:0;bottom:0;width:min(460px,38%);overflow-y:auto;
  padding:clamp(28px,9vh,96px) 44px 32px 56px;background:linear-gradient(to right,transparent,var(--void) 48px);}
.as .as-item{border-top:1px solid var(--line);}
.as .as-item:last-child{border-bottom:1px solid var(--line);}
.as .as-step{display:flex;align-items:baseline;gap:14px;width:100%;padding:15px 2px;margin:0;border:0;background:none;
  text-align:left;cursor:pointer;font-family:var(--grotesk);font-weight:500;font-size:19px;line-height:1.2;
  letter-spacing:-.01em;color:color-mix(in srgb,var(--ink) 62%,var(--void));transition:color .2s;}
.as .as-step:hover{color:var(--ink);}
.as .as-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.as .as-tt{flex:1 1 auto;min-width:0;}
.as .as-chev{flex:0 0 auto;width:12px;height:12px;align-self:center;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .3s ease;}
.as .as-item.open .as-step{color:var(--h1);font-size:22px;}
.as .as-item.open .as-chev{transform:rotate(180deg);}
.as .as-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease;}
.as .as-item.open .as-body{grid-template-rows:1fr;}
.as .as-clip{min-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:opacity .25s linear,visibility 0s linear .4s;}
.as .as-item.open .as-clip{visibility:visible;opacity:1;transition:opacity .3s linear .1s,visibility 0s;}
.as .as-pad{padding:0 2px 20px;}
.note .body .as-nav p{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink2);margin:0 0 14px;}
.note .body .as-nav a{font-family:var(--sans);font-size:14.5px;}

/* the backbone */
.as svg text{font-family:var(--mono);}
.as .as-spine{stroke:var(--line2);stroke-width:2;}
.as .as-row .r{stroke-width:1.2;}
.as .as-row text{font-size:11.5px;fill:var(--ink);}
.as .as-io .r{fill:var(--s2);stroke:var(--ink3);}
.as .as-swa .r{fill:color-mix(in srgb,var(--c-swa) 26%,var(--s1));stroke:var(--c-swa);}
.as .as-full .r{fill:color-mix(in srgb,var(--c-full) 34%,var(--s1));stroke:var(--c-full);}
.as .as-eng .r{fill:var(--s2);stroke:var(--ink3);}
.as .as-rail{stroke:var(--line2);stroke-width:1.2;stroke-dasharray:2 3;}
.as .as-tap{fill:var(--line2);}
.as .as-sparse .r{fill:color-mix(in srgb,var(--c-sparse) 26%,var(--s1));stroke:var(--c-sparse);}

/* details */
.as .as-card{fill:var(--s1);stroke:var(--line2);}
.as .as-swa .as-card{stroke:var(--c-swa);} .as .as-full .as-card{stroke:var(--c-full);} .as .as-sparse .as-card{stroke:var(--c-sparse);}
.as .as-chip{fill:var(--c-swa);} .as .as-full .as-chip{fill:var(--c-full);} .as .as-sparse .as-chip{fill:var(--c-sparse);}
.as .as-ct{fill:var(--ink);font-family:var(--grotesk)!important;font-size:16px;font-weight:500;}
.as .as-s{fill:var(--ink3);font-size:9.5px;}
.as .as-s2{fill:var(--ink2);font-size:10.5px;}
.as .as-note{fill:var(--ink2);font-size:10.5px;letter-spacing:.04em;}
.as .as-hl{fill:var(--ink);font-size:12px;font-weight:500;}
.as .as-cell{fill:var(--line2);}
.as .as-cell.mid{fill:var(--ink3);}
.as .as-cell.lit{fill:var(--ink);}
.as .as-swa .as-cell.lit{fill:var(--c-swa);} .as .as-full .as-cell.lit{fill:var(--c-full);} .as .as-sparse .as-cell.lit{fill:var(--c-sparse);}
.as .as-head{fill:var(--ink2);}
.as .as-veil{fill:var(--void);}
.as .as-kvl{fill:var(--ink);}
.as .as-guide{stroke:var(--c-full);stroke-width:1.2;stroke-dasharray:2 2;}
.as .as-arc{fill:none;stroke:var(--ink2);stroke-width:1.5;}
.as .as-bridge{stroke:var(--c-full);stroke-width:1.8;}
.as .as-reuse{stroke:var(--c-sparse);stroke-width:1.5;}
.as .as-res{stroke:var(--ink);}
.as .as-join{stroke:var(--ink2);stroke-width:1.5;}
.as .as-flow{fill:var(--ink);}
.as .as-src{fill:var(--ink);}
.as .as-exit{stroke:var(--ink3);stroke-width:1.2;stroke-dasharray:5 5;}
.as .as-blk{fill:none;stroke:var(--line2);stroke-width:1.4;}
.as .as-blk.done{stroke:var(--ink2);}
.as .as-blk.part{stroke:var(--accent);stroke-width:2.4;}
.as .as-target{fill:none;stroke:var(--ink);stroke-width:1.6;}
.as .as-tok{fill:var(--s2);stroke:var(--line2);}
.as .as-tok.now{stroke:var(--ink2);}
.as .as-brk,.as .as-wire{fill:none;stroke:var(--ink3);stroke-width:1.1;}
.as .as-hash{fill:var(--s2);stroke:var(--ink3);}
.as .as-tab{fill:var(--line2);}
.as .as-tab.lit{fill:var(--ink);}
.as .as-ex{fill:var(--ink3);opacity:.28;}
.as .as-ex.lit{fill:var(--ink);opacity:.9;}
.as .as-ex.shared{fill:var(--ink2);opacity:.75;}
.as .as-axis{stroke:var(--line2);}
.as .as-cap{stroke:var(--ink3);stroke-dasharray:3 3;}
.as .as-ident{stroke:var(--ink3);stroke-dasharray:4 4;}
.as .as-curve{fill:none;stroke:var(--ink);stroke-width:2;}
.as .as-hl.as-lab-full{fill:var(--c-full);} .as .as-hl.as-lab-sparse{fill:var(--c-sparse);}

/* the overview copy names each kind in its colour */
.as .t-swa{color:var(--c-swa);font-weight:500;}
.as .t-full{color:var(--c-full);font-weight:500;}
.as .t-sparse{color:var(--c-sparse);font-weight:500;}
/* tokens a layer cannot read: one hatched mass per run */
.as .as-na-bg{fill:var(--s2);}
.as .as-na-ln{stroke:var(--ink3);stroke-width:1.5;opacity:.45;}
.as .as-st-full{stop-color:var(--c-full);} .as .as-st-sparse{stop-color:var(--c-sparse);}

@media(max-width:760px){
  .note .body .as{margin-top:28px;}
  .as .as-sticky{height:auto;overflow:visible;}
  .as .as-board{position:sticky;top:62px;z-index:1;height:54svh;background:var(--void);}
  .as .as-legend{padding:12px 16px 6px;gap:4px 14px;font-size:11px;}
  .as .as-nav{position:relative;width:auto;overflow:visible;padding:8px 20px 28px;background:none;}
  .as .as-step{font-size:17px;padding:13px 2px;}
  .as .as-item.open .as-step{font-size:19px;}
  .note .body .as-nav p{font-size:14.5px;line-height:1.5;margin-bottom:8px;}
  .note .body .as-nav a{font-size:14px;}
}
@media(prefers-reduced-motion:reduce){
  .as .as-body,.as .as-clip,.as .as-chev,.as .as-step{transition:none!important;}
}