/* ------------------------------------------------------------------
   Sniffi comic viewer.

   Two rules run through this file:
     1. The MAP animates. Levels open and collapse, and the turn between
        Part One and Part Two is a visible movement.
     2. The PANEL never animates. It appears, and it holds still, because
        it is read slowly and stared at.
   Nothing here autoplays. There is no timer in this project.
   ------------------------------------------------------------------ */

:root{
  --page:#F2F4F6;
  --ink:#1A1D21;
  --muted:#5A6270;
  --hair:#D8DDE3;
  --panel:#FFFFFF;
  --head:#0E1116;
  --gold:#E0AE2B;
  --dead:#B3352E;
  --proceed:#2E7D52;
  --branch:#2D5FA8;
  --caution:#B07A14;
  --map-w:332px;
  --top-h:56px;
  --chrome:188px;   /* top bar, padding and the pager under the panel */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--ink);
  font-family:'Georgia',Gelasio,serif;
  -webkit-text-size-adjust:100%;
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:10px 14px}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------ top bar */
.top{
  position:sticky;top:0;z-index:40;
  height:var(--top-h);
  display:flex;align-items:center;gap:14px;
  padding:0 14px;
  background:var(--head);
  border-bottom:3px solid rgba(224,174,43,.55);
}
.top h1{
  font-size:17px;font-weight:400;color:#F4F2EE;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.counter{
  font-family:'Century Gothic',Questrial,sans-serif;
  font-size:13px;color:#9AA3AB;letter-spacing:.06em;white-space:nowrap;
}
.iconbtn,.ghostbtn{
  font:inherit;font-size:13px;
  background:transparent;color:#C9D0D7;
  border:1px solid #39414B;border-radius:5px;
  padding:6px 11px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.iconbtn:hover,.ghostbtn:hover{color:#fff;border-color:#5A6470}
.bars{width:14px;height:10px;position:relative;display:inline-block}
.bars::before,.bars::after,.bars span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor}
.bars::before{top:0}.bars::after{bottom:0}
.bars{background:
  linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 4px/100% 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 8px/100% 2px no-repeat;}

/* ------------------------------------------------------------ shell */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--top-h))}

/* ------------------------------------------------------------ map */
.map{
  width:var(--map-w);flex:0 0 var(--map-w);
  transition:width .25s ease, flex-basis .25s ease, opacity .2s ease;
  position:sticky;top:var(--top-h);
  height:calc(100vh - var(--top-h));
  overflow-y:auto;overscroll-behavior:contain;
  background:#EAEDF1;border-right:1px solid var(--hair);
}
.map-inner{padding:18px 16px 60px}
.part{margin-bottom:26px}
.part-h{margin:0 0 3px;font-size:15px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.part-kicker{
  font-family:'Century Gothic',Questrial,sans-serif;
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:#8B95A1;font-weight:400;
}
.part-note{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--muted);font-style:italic}

/* --- tree --- */
.gate{border-top:1px solid #DDE2E7;padding:8px 0 6px}
.gate:last-child{border-bottom:1px solid #DDE2E7}
.gate-head{
  display:flex;align-items:baseline;gap:8px;width:100%;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left;
}
.gate-name{
  font-family:'Century Gothic',Questrial,sans-serif;
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#404955;font-weight:700;
}
.gate-count{font-size:11px;color:#8B95A1;font-style:italic;margin-left:auto}
.gate.is-current .gate-name{color:var(--ink)}

.dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.dot{
  width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;background:transparent;
  padding:0;cursor:pointer;position:relative;
}
.dot.is-live{background:currentColor}
.dot.is-current{outline:2px solid var(--ink);outline-offset:2px}
/* a pruned branch is drawn struck through, so the pruning is visible at a glance */
.dot.is-dead::after{
  content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;
  background:currentColor;transform:rotate(-45deg);
}

/* the opening and collapsing level: this is the animation */
.siblings{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s ease, opacity .25s ease, margin .3s ease;
  opacity:0;margin-top:0;
}
.gate.is-current .siblings{grid-template-rows:1fr;opacity:1;margin-top:8px}
.siblings-in{overflow:hidden;min-height:0}
.sib{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;font-size:12.5px;line-height:1.35;color:#465061;
  padding:4px 6px 4px 9px;border-left:3px solid transparent;border-radius:0 3px 3px 0;
}
.sib:hover{background:#E1E6EB}
.sib.is-current{background:#DCE2E8;color:var(--ink);font-weight:700}
.sib .sib-l{
  font-family:'Century Gothic',Questrial,sans-serif;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8B95A1;margin-right:6px;
}

/* --- hinge --- */
.part-hinge{
  border:1px solid #D2D8DF;background:#F7F8FA;border-radius:6px;padding:13px 13px 14px;
  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.part-hinge.is-active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,174,43,.18)}
.hinge-node{margin-top:8px}
.hinge-btn{
  display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;
  font:inherit;font-size:12.5px;line-height:1.35;
  background:#fff;border:1px solid var(--hair);border-radius:5px;
  padding:9px 10px;cursor:pointer;color:#33404E;
}
.hinge-btn:hover{border-color:#B9C2CC}
.hinge-btn.is-current{border-color:var(--gold);background:#FFFDF6;font-weight:700;color:var(--ink)}
.hinge-diamond{color:var(--gold);font-size:13px;line-height:1.2}

/* --- recipe track --- */
.track-wrap{position:relative}
.dep-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dep-layer path{
  fill:none;stroke:#C3A25A;stroke-width:1.4;stroke-dasharray:4 3;opacity:.5;
  transition:opacity .25s ease, stroke .25s ease, stroke-width .25s ease;
}
.dep-layer path.is-hot{stroke:var(--caution);stroke-width:2.2;opacity:1;stroke-dasharray:none}
.track{list-style:none;margin:0;padding:0 46px 0 0;counter-reset:none}
.step{margin:0 0 4px}
.step-btn{
  display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;
  font:inherit;font-size:12.5px;line-height:1.35;color:#465061;
  background:#fff;border:1px solid var(--hair);border-radius:5px;
  padding:7px 9px;cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.step-btn:hover{border-color:#B9C2CC}
.step-btn.is-current{border-color:var(--ink);background:#EEF1F4;color:var(--ink);font-weight:700}
.step-btn.is-linked{border-color:var(--caution);background:#FFFDF6}
.step-n{
  font-family:'Century Gothic',Questrial,sans-serif;
  font-size:10.5px;color:#8B95A1;min-width:15px;font-weight:700;
}
.step-btn.is-current .step-n{color:var(--caution)}

/* ------------------------------------------------------------ reader */
.reader{flex:1 1 auto;min-width:0;padding:20px 22px 44px;display:flex;flex-direction:column;align-items:center}

.stage{
  width:100%;
  /* As wide as the column allows. It used to be capped by the window HEIGHT so
     Next never needed a scroll, which scaled a page to 0.58 on a 1366x768
     laptop and left body text at 9-10 px. Next now lives in a sticky bar. */
  max-width:1500px;
  background:var(--panel);
  border:1px solid var(--hair);border-radius:7px;
  box-shadow:0 1px 3px rgba(20,26,34,.07);
  overflow:hidden;
}
.stage:focus{outline:none}
/* the panel is 1600x1000; this keeps it whole at every width, never cropped */
.svg-host{width:100%;aspect-ratio:1600/1000;display:block}
.svg-host svg{display:block;width:100%;height:100%}
.load-err{margin:0;padding:22px;color:var(--dead);font-size:14px}


.below{width:100%;max-width:1500px}


/* dependency reasons, spelled out. This is the content of Part Two. */
/* the hidden attribute must win over display:grid */
.deps[hidden],.load-err[hidden],.scrim[hidden]{display:none !important}
.deps{
  margin-top:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;
  margin:14px 2px 0;padding:13px 15px;
  background:#FFFDF6;border:1px solid #E5D4A8;border-radius:6px;
}
.dep-col h3{
  margin:0 0 6px;font-family:'Century Gothic',Questrial,sans-serif;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#8A6A1E;font-weight:700;
}
.dep-col ul{margin:0;padding-left:16px}
.dep-col li{font-size:13px;line-height:1.5;margin-bottom:5px;color:#3C4553}
.dep-col li b{color:var(--ink)}
.dep-col .none{font-size:13px;color:#8B95A1;font-style:italic;padding-left:0;list-style:none}
.dep-link{background:none;border:0;padding:0;font:inherit;color:#8A6A1E;cursor:pointer;text-decoration:underline}

/* the pager rides at the bottom of the window while the page is taller than it */
.pagerbar{
  position:sticky;bottom:0;z-index:20;width:100%;max-width:1500px;
  padding:10px 0 12px;
  background:linear-gradient(to top, var(--page) 72%, transparent);
}
.pager{display:flex;align-items:center;gap:14px;margin:0 2px}
.pagebtn{
  font:inherit;font-size:13.5px;background:#fff;color:var(--ink);
  border:1px solid var(--hair);border-radius:5px;padding:9px 15px;cursor:pointer;
}
.pagebtn:hover:not(:disabled){border-color:#AEB8C2}
.pagebtn:disabled{opacity:.4;cursor:default}
.pager-mid{margin-left:auto;margin-right:auto;font-size:12.5px;color:var(--muted);font-style:italic;text-align:center}

.scrim{display:none}

/* wide screens: the Map button collapses the sidebar and gives the panel the room */
@media (min-width:1001px){
  body.map-collapsed .map{
    /* min-width:0 is required: a flex item's automatic minimum size is
       min-content, so without it the sidebar refuses to collapse */
    width:0;flex-basis:0;min-width:0;overflow:hidden;opacity:0;
    border-right-width:0;
  }
  body.map-collapsed .stage,body.map-collapsed .below,body.map-collapsed .pagerbar{
    max-width:1600px;
  }
}

/* ------------------------------------------------------------ narrow */
@media (max-width:1000px){
  .map{
    position:fixed;top:var(--top-h);left:0;z-index:35;
    transform:translateX(-100%);transition:transform .28s ease;
    box-shadow:2px 0 14px rgba(15,20,26,.16);
  }
  body.map-open .map{transform:translateX(0)}
  body.map-open .scrim{
    display:block;position:fixed;inset:var(--top-h) 0 0 0;z-index:30;
    background:rgba(16,21,27,.34);
  }
  .reader{padding:14px 13px 40px}
  .deps{grid-template-columns:1fr}
}
@media (max-width:900px){
  .stage{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .svg-host{min-width:1000px}
}
@media (max-width:620px){
  .top h1{display:none}
    }

/* people who ask for less motion get none */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ------------------------------------------------------------ print
   One panel per page. Ctrl+P prints the panel on screen; the Print all
   button fills #printSheet first and prints the whole set.            */
@media print{
  @page{size:landscape;margin:8mm}
  body{background:#fff}
  .top,.map,.scrim,.below,.skip{display:none !important}
  .shell{display:block}
  .reader{padding:0;display:block}
  .stage{border:0;box-shadow:none;border-radius:0;max-width:none}
  .svg-host{aspect-ratio:auto}
  .svg-host svg{width:100%;height:auto}

}

/* link back to the main site (the page is public and reached from search) */
.homelink{font-family:'Century Gothic',Questrial,sans-serif;font-size:15px;letter-spacing:.02em;color:#F4F2EE;text-decoration:none}
.homelink:hover{color:#fff}