/* finale2030.css — งานที่หายไปอย่างเงียบๆ (class2027 r13.2). Story tokens; motion is opacity and colour only; host slots styled only through module wrappers.
   Square cells at one even pitch with a hairline gap, filled only, each kind one solid block, each change a colour change in place: mint = an employee job with someone in it,
   grey = not replaced (grey-green in the steady world: a hiring lag), rust = laid off; screen 3: mint person = employee, sand = not; screen 4: mint bar = in a job, outlined = not. Screen states are classes on small groups.
   Screens 1, 3, 4 and 5 carry a caption under the chart, laid over the space below the art so the art never changes size. */
.f61{--f61-bg:#0b1b1f;--f61-line:#23434a;--f61-ink:#e6efe9;--f61-muted:#9db3ad;--f61-faint:#6f8a84;--f61-mint:#a8e6cf;--f61-amber:#e3a96b;--f61-rust:#e0927a;--f61-gold:#f0eee5;--f61-sand:#b09a72;--f61-lag:#7aa99a;--f61-title:#fff;--f61-copy:#cfdcd8;
  --f61-th:Anuphan,"Noto Sans Thai",sans-serif;--f61-num:Newsreader,Georgia,serif;--f61-top:var(--c38-head,68px);--f61-k:1;
  background:var(--f61-bg);color:var(--f61-ink);font-family:var(--f61-th);position:relative;overflow:clip}
.f61 *{box-sizing:border-box}
.f61-scroller{height:calc(var(--f61-len,8.5) * (100svh - var(--f61-top)));position:relative}
.f61-stage{position:sticky;top:var(--f61-top);height:calc(100svh - var(--f61-top));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;justify-items:center;gap:8px;padding:12px 16px 20px;overflow:hidden}
.f61-panel{width:100%;max-width:520px;min-height:168px;display:grid;grid-template-rows:auto minmax(0,1fr)}
.f61-when{font:500 clamp(40px,5.4vw,68px)/1 var(--f61-num);font-variant-numeric:tabular-nums;color:var(--f61-mint);margin:0 0 18px}
.f61-beat{grid-row:2;grid-column:1;opacity:0;pointer-events:none;transition:opacity .16s;margin:0;min-height:0}
.f61-beat.on{opacity:1;pointer-events:auto;transition:opacity .3s .17s}
.f61-hd>*{font:600 clamp(24px,7vw,29px)/1.22 var(--f61-th);letter-spacing:-.005em;margin:0 0 6px;color:var(--f61-title);text-wrap:balance}
.f61-ln>*{font:400 18px/1.45 var(--f61-th);color:var(--f61-copy);margin:0 0 8px;text-wrap:balance}
.f61-k5 .f61-hd>*{font-size:clamp(26px,7.4vw,32px)}
/* the closing line is a view, not a result: the label first on its row, in the mark's muted ink; a rule separates the words from the grids */
.f61-k5 .f61-ln{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding-bottom:14px;border-bottom:1px solid var(--f61-line);margin-bottom:14px}
.f61-k5 .f61-ln>:not(.f61-by){font:600 clamp(22px,6.4vw,27px)/1.3 var(--f61-th);color:var(--f61-ink);margin-bottom:0}
.f61-by{font:600 15px/1.3 var(--f61-th);letter-spacing:.08em;color:var(--f61-muted);margin:0}.f61-by::after{content:'·';margin-left:10px}
.f61-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.f61-orphan{display:none}
.f61>.f61-scope{font-size:13px;line-height:1.6;color:var(--f61-faint);margin:0 auto;max-width:720px;padding:14px 16px 18px;text-align:center;transition:opacity .25s}
/* the source note: one item per line, left-aligned, readable on a phone */
.f61>.f61-note{font-size:14px;line-height:1.65;color:var(--f61-muted);max-width:560px;padding:8px 16px 40px;text-align:left}.f61-note>span{display:block;margin:0 0 8px}.f61-nb{white-space:nowrap}
/* the reality check after the stage: body type, not small print */
.f61>.f61-scope-check{font-size:17px;line-height:1.75;color:var(--f61-copy);max-width:560px;padding:28px 16px 6px;text-align:left;text-wrap:pretty}
.f61.is-motion.f61-near>.f61-scope{opacity:0}
.f61-art{width:min(100%,calc((100svh - var(--f61-top) - 250px) * .9));max-width:560px;aspect-ratio:360/400;position:relative}
.f61-svg{display:block;width:100%;height:100%;overflow:visible}
/* the captions under the chart: placed in the art's grid area (both lines named: an abspos item's auto line is the stage's edge), just below the drawing (screen 1's
   rooms end at 86% of the art, under the year; screen 4's lanes and years at 74%), out of the flow, so every phone keeps its art; one at a time, with its screen */
.f61-cap{margin:0;font:400 14px/1.45 var(--f61-th);color:var(--f61-muted);text-wrap:balance}.f61-sw{display:inline-block;width:.72em;height:.72em;margin-right:.35em;background:var(--f61-lag);vertical-align:-.04em}
.f61-stage>.f61-cap{position:absolute;grid-area:2/1/3/2;top:100%;left:0;right:0;max-width:560px;margin:6px auto 0;text-align:center;pointer-events:none;opacity:0;transition:opacity .16s}
.f61-stage>.f61-cap.on{opacity:1;transition:opacity .3s .17s}.f61-stage>.f61-cap1{top:86%}.f61-stage>.f61-cap4{top:76%}
@media(max-width:819px) and (max-height:760px){.f61-stage>.f61-cap{margin-top:3px;font-size:12.5px;line-height:1.35}}
.f61-pic{opacity:0;visibility:hidden;transition:opacity .16s,visibility 0s .16s}
.f61-pic.on{opacity:1;visibility:visible;transition:opacity .3s .17s,visibility 0s .17s}
.f61-nt,.f61-nt *{transition:none!important}
/* SVG text: never below 12 CSS px (--f61-k = CSS px per unit) */
.f61-t{font:400 max(14px,calc(12px / var(--f61-k))) var(--f61-th);fill:var(--f61-ink)}
.f61-head{font-size:max(15px,calc(12.5px / var(--f61-k)));font-weight:600}
.f61-who{font-size:max(14px,calc(12.5px / var(--f61-k)));font-weight:500;fill:var(--f61-ink)}
.f61-lab{font-size:max(14px,calc(12px / var(--f61-k)))}
.f61-mk{font-size:max(12.5px,calc(12px / var(--f61-k)));fill:var(--f61-muted)}
.f61-big{font:500 44px var(--f61-num);fill:var(--f61-mint)}
.f61-n{font-family:var(--f61-num);font-size:17px}
.f61-yr{font-size:max(14px,calc(12px / var(--f61-k)));fill:var(--f61-muted)}
.f61-greyt{fill:#a7b9b5}.f61-sandt{fill:#cdb994}.f61-goldt{fill:var(--f61-gold)}.f61-rustt{fill:var(--f61-rust)}.f61-jobt{fill:var(--f61-mint)}.f61-nojobt{fill:var(--f61-ink)}
/* a position: a flat fill in its kind's colour, never an outline, no frame. The change in place: the fill fades to the new colour; nothing moves */
.f61-c{transition:fill .5s}
.f61-grey{fill:#5f7571}.f61-lag{fill:var(--f61-lag)}.f61-rust{fill:var(--f61-rust)}
.f61-fig{transition:opacity .5s}
.f61-emp{fill:var(--f61-mint)}
.f61-non{fill:var(--f61-sand)}
/* screen 4's lanes: a mint bar in a job, an outlined bar not */
.f61-sE{fill:var(--f61-mint)}.f61-sO{fill:var(--f61-amber);opacity:.7}.f61-sN{fill:none;stroke:var(--f61-faint);stroke-width:1.5;stroke-dasharray:4 3}
.f61-tick{stroke:var(--f61-gold);stroke-width:2;stroke-dasharray:4 3}.f61-axis{fill:none;stroke:var(--f61-faint);stroke-width:1}
.f61-when,.f61-key,.f61-hd1,.f61-end,.f61-ledger{opacity:0;transition:opacity .16s}
.f61-when.on,.f61-key.on,.f61-hd1.on,.f61-end.on,.f61-ledger.on{opacity:1;transition:opacity .3s .17s}
/* screen 2: the steady room and its header fade */
.f61-roomREF,.f61-hREF{transition:opacity .3s .17s}
.f61-solo .f61-roomREF,.f61-solo .f61-hREF{opacity:0;transition:opacity .16s}
/* the host's actions block: plain prose, no fold */
.f61-after{max-width:560px;margin:0 auto;padding:20px 16px 48px;color:var(--f61-copy);font:400 17px/1.75 var(--f61-th)}
.f61-after>*{margin:0 0 16px;text-wrap:pretty}
.f61-after-h{font:600 clamp(24px,6.4vw,30px)/1.25 var(--f61-th);letter-spacing:-.005em;color:var(--f61-title);margin:0 0 12px;text-wrap:balance}
.f61-after-who{font:600 15px/1.4 var(--f61-th);letter-spacing:.06em;color:var(--f61-mint);margin:26px 0 6px}
.f61-after-close{margin-top:30px;color:var(--f61-ink)}
@media(min-width:820px){
  .f61-stage{grid-template-columns:minmax(280px,420px) auto;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-content:center;gap:0 clamp(24px,5vw,72px);padding:16px clamp(24px,4vw,72px) 24px}
  .f61-panel{grid-row:1/-1}.f61-art{grid-row:2;grid-column:2}.f61-stage>.f61-cap{grid-area:2/2/3/3;font-size:15px}
  .f61-art{height:min(calc(100svh - var(--f61-top) - 64px),700px,calc((86vw - 290px) / .9));width:auto;max-width:none}
  .f61-panel{max-width:420px;min-height:0;justify-self:start}
  .f61-hd>*{font-size:clamp(30px,3vw,38px)}.f61-ln>*{font-size:20px}
  .f61-k5 .f61-hd>*{font-size:clamp(32px,3.3vw,42px)}.f61-k5 .f61-ln>:not(.f61-by){font-size:clamp(26px,2.6vw,33px)}
  .f61-by{font-size:16px}
  .f61>.f61-scope-check{font-size:18px}
  .f61-after{font-size:18px;padding:28px 16px 72px}
}
.f61.is-static .f61-scroller{height:auto}
.f61.is-static .f61-stage{position:static;height:auto;display:block;padding:24px 16px 40px;overflow:visible;max-width:none}
.f61.is-static :is(.f61-art,.f61-when,.f61-stage>.f61-cap){display:none}
.f61.is-static .f61-panel{display:block;max-width:none;min-height:0}
.f61.is-static .f61-beat{opacity:1;pointer-events:auto;display:block;max-width:520px;margin:0 auto 44px;padding-bottom:36px;border-bottom:1px solid var(--f61-line)}
.f61.is-static .f61-beat:last-child{border-bottom:0}
.f61.is-static .f61-snap{width:min(100%,400px);aspect-ratio:360/400;margin:4px 0 14px}
.f61-cap-s{text-align:center;max-width:400px;margin:-2px 0 14px}.f61-cap-s.f61-cap1{margin-top:max(calc(-15.5% - 4px),-66px)}.f61-cap-s.f61-cap4{margin-top:max(calc(-24% - 4px),-100px)}
.f61.is-static .f61-orphan{display:block;max-width:520px;margin:0 auto;color:var(--f61-muted)}
.f61.is-static *{transition:none!important}
.f61:not(.is-static) :is(.f61-snap,.f61-cap-s){display:none}
/* Round 180: a short mechanism vignette belongs to each scroll scene. */
.f180-vignette{margin:24px 0 0;padding-left:0;border:0;max-width:400px}
.f180-vignette>p{font:400 clamp(17px,1.65vw,21px)/1.8 var(--f61-th);color:var(--f61-copy);margin:0;text-wrap:pretty}
.f61.is-static .f180-vignette{max-width:none;margin:16px 0 26px}
@media(max-width:819px){
 .f61:has(.f180-vignette).is-motion .f61-panel{min-height:0;max-width:400px}
 .f180-vignette{margin-top:12px;padding-left:0}
 .f180-vignette>p{font-size:16px;line-height:1.65}
 /* The replacement entrant/history graphics are taller than the SVG frame.
    Let their real height participate in layout so copy cannot overlap them. */
 .f61:has(.f180-vignette).d170-ready.is-motion:is([data-screen="3"],[data-screen="4"]) .f61-art{height:auto;aspect-ratio:auto}
 .f61:has(.f180-vignette).d170-ready.is-motion:is([data-screen="3"],[data-screen="4"]) .f61-art>.f61-svg{display:none}
 .f61:has(.f180-vignette).d170-ready.is-motion:is([data-screen="3"],[data-screen="4"]) .d170-motion-layer{position:relative;inset:auto}
 .f61:has(.f180-vignette).d170-ready.is-motion:is([data-screen="3"],[data-screen="4"]) .f61-stage{row-gap:20px}
}
@media print{
  .f61{--f61-bg:#fff;--f61-ink:#091c2b;--f61-muted:#4d625d;--f61-faint:#6a7f7a;--f61-line:#c9d3d0;--f61-mint:#3f9a78;--f61-amber:#b7772f;--f61-sand:#a8905f;--f61-lag:#9cc9b8;--f61-title:#091c2b;--f61-copy:#2a3b38;--f61-gold:#091c2b}
  .f61-greyt{fill:#5f7370}.f61-sandt{fill:#6e5a36}.f61-sN{stroke:#8a9a96}.f61-grey{fill:#a9b6b3}
  .f61-after-who{color:#2d7a5c}
}

/* Removed editorial beat remains in the copy archive, never in the reading flow. */
.f61-beat[data-f184-removed]{display:none!important}
@media(max-width:819px){.f61-when{font-size:40px;margin-bottom:10px}}