/* building story: the scene drawn by assets/js/story.js, and the scroll section around it */

/* scene tokens. story.js reads the first eight for the canvas, so keep them as hex */
.st-scene{
  --st-bg:var(--surface);--st-line:#2351E5;--st-glow:#2351E5;--st-win:#2351E5;--st-paper:#FFFFFF;--st-ink:#525E70;--st-lime:#4F8A14;--st-amber:#C7860F;
  --st-card:#fff;--st-card-b:#E4E4E7;--st-card-sh:0 12px 32px rgba(10,15,30,.10);
  --st-t1:#0A0F1E;--st-t2:#525E70;--st-t3:#8896A8;--st-track:rgba(10,15,30,.09);
  --st-tag-a-bg:rgba(232,160,32,.14);--st-tag-a:#96682A;--st-tag-b-bg:rgba(35,81,229,.1);--st-tag-b:#2351E5;--st-tag-g-bg:rgba(122,194,49,.14);--st-tag-g:#4F8018;
  position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0
}
[data-theme=dark] .st-scene,.hero .st-scene,.chero .st-scene{
  --st-line:#7B9BFF;--st-glow:#4A72FF;--st-win:#C9D6FF;--st-paper:#18213C;--st-ink:#A7B1C2;--st-lime:#9FD855;--st-amber:#F0B840;
  --st-card:rgba(17,24,45,.9);--st-card-b:rgba(74,114,255,.28);--st-card-sh:0 18px 44px rgba(0,0,0,.45);
  --st-t1:#F2F5FB;--st-t2:#A7B1C2;--st-t3:#7C89A0;--st-track:rgba(255,255,255,.10);
  --st-tag-a-bg:rgba(232,160,32,.15);--st-tag-a:#F0B840;--st-tag-b-bg:rgba(74,114,255,.18);--st-tag-b:#8FA8FF;--st-tag-g-bg:rgba(122,194,49,.15);--st-tag-g:#9FD855
}
.hero .st-scene,.chero .st-scene{--st-bg:var(--navy)}
.story--plain .st-scene{--st-bg:var(--bg)}

.st-stage{position:relative;flex:1 1 auto;min-height:0}
.st-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* condition card: story.js moves it with a transform and sets its opacity */
.st-card{position:absolute;left:0;top:0;padding:11px 13px 12px;border-radius:8px;background:var(--st-card);border:1px solid var(--st-card-b);box-shadow:var(--st-card-sh);opacity:0;pointer-events:none;will-change:transform,opacity}
.st-card-n{font-size:13px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--st-t1)}
.st-card-r{font-size:11px;line-height:1.35;color:var(--st-t3);margin-top:2px}
.st-tag{display:inline-block;margin-top:9px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:3px;white-space:nowrap}
.st-tag--a{background:var(--st-tag-a-bg);color:var(--st-tag-a)}
.st-tag--b{background:var(--st-tag-b-bg);color:var(--st-tag-b)}
.st-tag--g{background:var(--st-tag-g-bg);color:var(--st-tag-g)}
.st-tag--n{background:var(--st-track);color:var(--st-t2)}
.st-list{list-style:none;margin-top:9px;padding-top:8px;border-top:1px solid var(--st-card-b)}
.st-list li{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--st-t2);padding:3px 0;opacity:.32}
.st-list li::before{content:'✓';font-size:11px;font-weight:700;color:var(--st-tag-g)}
.st-list li.on{opacity:1}
.is-narrow .st-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:9px 12px}
.is-narrow .st-card-m{min-width:0}
.is-narrow .st-tag{margin-top:0}
.is-narrow .st-list{flex:1 0 100%;display:flex;gap:14px;margin:0;padding:0;border:0}
.is-narrow .st-list li{font-size:11px;gap:5px;padding:0;white-space:nowrap}

/* the certifier's checklist: a pointer moves down it, items turn Satisfied, the bar fills */
.st-cl-h{display:flex;align-items:center;gap:8px}
.st-cl-a{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:700;background:var(--st-tag-g-bg);color:var(--st-tag-g)}
.st-cl{position:relative;list-style:none;margin:9px -6px 0;padding:0}
.st-cl li{display:flex;align-items:center;gap:7px;height:21px;padding:0 6px;border-radius:4px;font-size:11px;font-weight:500;color:var(--st-t2);transition:background .2s ease}
.st-cl li.on{color:var(--st-t1)}
.st-cl li.act{background:var(--st-tag-b-bg);color:var(--st-t1)}
.st-cl li i{position:relative;flex:0 0 auto;width:11px;height:11px;border-radius:3px;border:1.5px solid var(--st-t3)}
.st-cl li.on i{border-color:var(--st-tag-g);background:var(--st-tag-g);animation:st-tick .28s ease-out}
.st-cl li.on i::after{content:'';position:absolute;left:2px;top:-.5px;width:3px;height:6px;border:solid var(--st-bg);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.st-cl li span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cl li em{flex:0 0 auto;font-style:normal;font-size:9px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--st-t3)}
.st-cl li.on em{color:var(--st-tag-g)}
@keyframes st-tick{from{transform:scale(.4)}60%{transform:scale(1.25)}to{transform:scale(1)}}
.st-cl-cur{position:absolute;left:12px;top:9px;width:11px;height:14px;background:var(--st-t1);clip-path:polygon(0 0,0 78%,24% 60%,42% 100%,58% 92%,40% 54%,72% 54%);pointer-events:none}
.st-cl-p{display:flex;align-items:center;gap:9px;margin-top:9px}
.st-cl-bar{flex:1 1 auto;height:3px;border-radius:2px;background:var(--st-track);overflow:hidden}
.st-cl-bar i{display:block;height:100%;background:var(--st-tag-g);transform-origin:0 50%;transform:scaleX(0);transition:transform .35s ease}
.st-cl-p span{flex:0 0 auto;font-size:10px;font-weight:600;color:var(--st-t2);white-space:nowrap}
.st-card--cl.is-all .st-card-r,.st-card--cl.is-all .st-cl-p span{color:var(--st-tag-g)}
/* docked under the building it shows the item in hand only, with the count beside the name */
.is-narrow .st-card--cl{display:block;padding:9px 12px}
.is-narrow .st-card--cl .st-card-r,.is-narrow .st-cl-cur{display:none}
.is-narrow .st-cl-a{width:18px;height:18px;border-radius:5px;font-size:9px}
.is-narrow .st-cl{margin-top:5px}
.is-narrow .st-cl li{display:none}
.is-narrow .st-cl li.act{display:flex}
.is-narrow .st-cl-p{margin-top:6px}
.is-narrow .st-cl-p span{position:absolute;top:12px;right:12px}

/* on the floor the queue is drawn in the scene, so the card shows the item in hand only, at every width:
   the item and, under it, the project it belongs to */
[data-scene=floor] .st-cl-cur,[data-scene=floor] .st-cl li{display:none}
[data-scene=floor] .st-cl li.act{display:flex;height:auto;padding:5px 6px}
.st-cl li small{display:block;margin-top:1px;font-size:9.5px;font-weight:500;color:var(--st-t3);overflow:hidden;text-overflow:ellipsis}

/* the rename card: the name each file arrived with, what was read from the file, and the name proposed for it writing in
   under that. The button in its head applies every proposed name at once. */
.st-card--rn .st-cl-a{background:var(--st-tag-b-bg);color:var(--st-tag-b);font-size:11px}
.st-rn-ap{flex:0 0 auto;margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;padding:6px 9px;border-radius:5px;background:var(--st-track);color:var(--st-t3);white-space:nowrap;transition:background .2s ease,color .2s ease,transform .2s ease}
.st-card--rn.is-ready .st-rn-ap{background:#2351E5;color:#fff;transform:scale(1.05)}
.st-card--rn.is-applied .st-rn-ap{background:var(--st-tag-g-bg);color:var(--st-tag-g)}
.st-card--rn.is-applied .st-rn-ap::before{content:'\2713\00a0'}
.st-rn{list-style:none;margin:9px 0 -4px;padding:0}
.st-rn li{padding:5px 0 6px;border-top:1px solid var(--st-card-b);opacity:.3;transition:opacity .2s ease}
.st-rn li.on{opacity:1}
.st-rn s{display:block;padding-left:15px;font-size:10.5px;line-height:1.4;color:var(--st-t3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-rn li.done s{text-decoration:line-through}
/* while its file is being read, a band of light runs along the old name */
.st-rn li.read s{background:linear-gradient(90deg,transparent,var(--st-tag-b-bg) 50%,transparent) no-repeat;background-size:45% 100%;animation:st-read .8s linear infinite}
@keyframes st-read{from{background-position:-80% 0}to{background-position:180% 0}}
@media (prefers-reduced-motion:reduce){.st-rn li.read s{animation:none}}
/* what was read from the file in hand: one field at a time */
.st-rn-f{display:none;flex-wrap:wrap;gap:4px;padding:4px 0 3px 15px}
.st-rn li.cur .st-rn-f{display:flex}
.st-rn-f b{font-size:9.5px;font-weight:600;line-height:1;padding:3px 6px;border-radius:3px;background:var(--st-tag-b-bg);color:var(--st-tag-b);white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .18s ease,transform .18s ease}
.st-rn-f b.on{opacity:1;transform:none}
.st-rn span{position:relative;display:block;min-height:16px;padding-left:15px;font-size:11px;font-weight:600;line-height:1.45;color:var(--st-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-rn span::before{content:'\2192';position:absolute;left:0;top:0;font-weight:700;color:var(--st-t3)}
.st-card--rn.is-applied .st-rn span::before{content:'\2713';color:var(--st-tag-g)}
.is-narrow .st-card--rn{display:block;padding:9px 12px}
.is-narrow .st-card--rn .st-card-r{display:none}
.is-narrow .st-rn{margin-top:6px}
.is-narrow .st-rn li{display:none;padding:5px 0 0}
.is-narrow .st-rn li.cur{display:block}

/* the consultants who contribute in Chase: story.js moves each one, sets its opacity and its state */
.st-who{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;padding:2px 9px 2px 2px;border-radius:999px;background:var(--st-card);border:1px solid var(--st-card-b);box-shadow:0 3px 10px rgba(10,15,30,.08);opacity:0;pointer-events:none;white-space:nowrap;will-change:transform,opacity}
.st-who-a{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:7.5px;font-weight:700;letter-spacing:.02em;background:var(--st-tag-b-bg);color:var(--st-tag-b);transition:background .2s ease,color .2s ease}
.st-who-n{font-size:10.5px;font-weight:600;line-height:1;color:var(--st-t1)}
.st-who.is-chased{border-color:var(--st-tag-a)}
.st-who.is-chased .st-who-a{background:var(--st-tag-a-bg);color:var(--st-tag-a)}
.st-who.is-done .st-who-a{background:var(--st-tag-g-bg);color:var(--st-tag-g)}
.st-who.is-done .st-who-a::after{content:'';position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:var(--st-tag-g);box-shadow:0 0 0 1.5px var(--st-bg)}
.is-narrow .st-who{padding:2px}
.is-narrow .st-who-n{display:none}

/* two-track timeline */
.st-time{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:9px;align-items:center;padding:12px 2px 0}
.st-time-l{font-size:10.5px;font-weight:600;color:var(--st-t1);white-space:nowrap}
.st-time-l--old{font-weight:500;color:var(--st-t3)}
.st-bar{position:relative;height:3px;border-radius:2px;background:var(--st-track)}
.st-bar i{position:absolute;inset:0;border-radius:2px;transform-origin:0 50%;transform:scaleX(0)}
.st-bar b{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%}
.st-bar--db i{background:var(--st-glow)}
.st-bar--db b{background:var(--st-glow);box-shadow:0 0 0 3px var(--st-tag-b-bg)}
.st-bar--old i{background:var(--st-t3);opacity:.5}
.st-bar--old b{background:var(--st-bg);border:1.5px solid var(--st-t3)}
/* the distance the old way is still short by, drawn like a dimension line */
.st-gap{position:absolute;top:-7px;bottom:-7px;right:0;margin-left:8px;border-left:1px solid var(--st-tag-g);border-right:1px solid var(--st-tag-g);display:flex;align-items:center;justify-content:center;opacity:0;font-style:normal}
.st-gap::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--st-tag-g);opacity:.7}
.st-gap span{position:relative;padding:0 6px;background:var(--st-bg);font-size:10.5px;font-weight:700;color:var(--st-tag-g);white-space:nowrap}
.st-stages{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr)}
.st-stages span{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--st-t3);padding:1px 0 0 7px;border-left:1px solid var(--st-track);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-stages span.on{color:var(--st-t1)}
.st-note{flex:0 0 auto;margin-top:12px;font-size:12.5px;font-weight:500;color:var(--st-t2);text-align:right;opacity:0}
.is-narrow .st-time{column-gap:10px;row-gap:7px;padding-top:8px}
.is-narrow .st-time-l{font-size:9.5px}
.is-narrow .st-stages span{font-size:8.5px;padding-left:5px;letter-spacing:.03em}
.is-narrow .st-note{display:none}

/* the floor's counter: admin hours a year handled so far; at the end it gives way to the yearly label and its caveat */
.st-count{flex:0 0 auto;padding:12px 2px 0}
.st-count-top{display:grid;align-items:end;margin-bottom:9px}
.st-count-run,.st-count-end{grid-area:1/1;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 14px}
.st-count-run span{font-size:10.5px;font-weight:600;color:var(--st-t2)}
.st-count-run b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--st-t1);font-variant-numeric:tabular-nums}
.st-count-end{opacity:0}
.st-count-end b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--st-tag-g)}
.st-count-end span{font-size:11px;font-weight:500;color:var(--st-t3)}
.st-count .st-bar{margin-bottom:9px}
.st-count .st-stages{grid-template-columns:repeat(5,1fr)}
/* the static strip has five labels and no script to mark the scene narrow: on a phone they take the narrow size themselves */
@media (max-width:560px){.st-scene:not(.is-live) .st-count .st-stages span{font-size:8.5px;padding-left:5px;letter-spacing:.03em}}
.is-narrow .st-count{padding-top:8px}
.is-narrow .st-count-top{min-height:35px;margin-bottom:7px}
.is-narrow .st-count-run b{font-size:13.5px}
.is-narrow .st-count-end b{font-size:12.5px}
.is-narrow .st-count-end span{font-size:10px}
.is-narrow .st-count .st-bar{margin-bottom:7px}

/* the static building: what the scene holds in the markup. Hidden while story.js is on its way, so the
   finished frame does not flash before the story starts; shown (is-still) if the script cannot run. */
.st-scene:not(.is-live):not(.is-still)>*{visibility:hidden}
.st-still{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-still path,.st-still circle{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.st-still .k{fill:var(--st-bg)}
.st-still .f1{fill:var(--st-glow);fill-opacity:.2}
.st-still .f2{fill:var(--st-glow);fill-opacity:.34}
.st-still .f3{fill:var(--st-glow);fill-opacity:.1}
.st-still .w1{fill:var(--st-win);fill-opacity:.42;stroke:var(--st-line);stroke-opacity:.65}
.st-still .w2{fill:var(--st-win);fill-opacity:.3;stroke:var(--st-line);stroke-opacity:.65}
.st-still .l{fill:none;stroke:var(--st-line);stroke-width:1.35}
.st-still .m{fill:none;stroke:var(--st-line);stroke-opacity:.4}
.st-still .g{fill:none;stroke:var(--st-lime);stroke-width:1.8}
.st-still .gb{fill:var(--st-lime);fill-opacity:.16;stroke:var(--st-lime);stroke-width:1.6}
/* the finished floor (certifiers): each board's sheet, its code blocks, title lines and satisfied marks, the lit portal */
.st-still .sh{fill:var(--st-glow);fill-opacity:.1;stroke:var(--st-line);stroke-opacity:.8}
.st-still .cb{fill:var(--st-line);fill-opacity:.7}
.st-still .tl{fill:none;stroke:var(--st-line);stroke-opacity:.7}
.st-still .ok{fill:var(--st-lime)}
.st-still .pt{fill:var(--st-lime);fill-opacity:.3;stroke:var(--st-lime);stroke-width:1.5}
.st-still .gd{fill:none;stroke:var(--st-lime);stroke-opacity:.55;stroke-dasharray:2 3}

.st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hero */
.hero .st-scene,.chero .st-scene{height:clamp(440px,60vh,560px)}

/* scroll section: chapters on the left, the scene held in view on the right */
.story .head{margin-bottom:0}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px;align-items:start}
.story-stick{order:2;position:sticky;top:94px;height:min(660px,calc(100vh - 124px));min-height:440px}
.story-chapters{order:1}
.story-ch{min-height:64vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;transition:opacity .35s ease}
.story-ch:first-child{min-height:72vh;padding-top:8vh}
/* room below the last chapter so the scene stays held until the story has finished */
.story-ch:last-child{min-height:94vh;padding-bottom:30vh}
.story.is-live .story-ch:not(.is-on){opacity:.3}
.story-ch-in{max-width:510px}
.story-num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--link);margin-bottom:14px}
.story-ch h3{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.story-ch .st{font-size:15px;color:var(--text-2);margin:8px 0 16px}
.story-ch h3+p{margin-top:14px}
.story-ch p{font-size:16px;line-height:1.65;color:var(--text-2);margin-bottom:20px}
.story-ch .chips{margin-bottom:20px}
.story-ch .chips span{background:var(--card)}
.story-ch .more{display:inline-block;font-size:13.5px;font-weight:600;margin-bottom:20px}
.story-ch .story-old{display:flex;gap:10px;align-items:baseline;font-size:13.5px;line-height:1.5;color:var(--text-3);border-top:1px dashed var(--border);padding-top:14px;margin:0}
.story-old b{flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.story-old b::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;border:1.5px solid var(--text-3)}

@media (max-width:1000px){
  .hero .st-scene,.chero .st-scene{height:460px;max-width:580px;margin:0 auto}
  .story-grid{display:block}
  .story-stick{position:sticky;top:66px;z-index:5;height:46vh;min-height:310px;margin:22px -22px 0;padding:10px 16px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
  .story-ch,.story-ch:first-child{min-height:62vh;padding:20px 0}
  .story-ch:last-child{min-height:62vh;padding-bottom:6vh}
  .story--plain .story-stick{background:var(--bg)}
  .story-ch h3{font-size:25px}
  .story-ch p{font-size:15px}
}
@media (max-width:640px){
  .hero .st-scene,.chero .st-scene{height:400px}
}