/* #37 Herd mode: full screen over the tabs, one page per fleet (scroll-snap X), ranch strip on top, pasture bands below.
   #65: Corral's size: a lane horse is a fixed 132×100 drawing in a 156 px slot, rows wrap centred; queued ones are 40 %. */
.herding,.herding body{overflow:hidden}
#herd{position:fixed;inset:0;z-index:2;overflow:hidden;background:#485e3b;--sky1:#388fc4;--sky2:#8ebbc6;color:#f4ecd8}
#herd.storm{--sky1:#1d2530;--sky2:#4f5a63}
/* #71 ranch light: Corral's RanchPainter color(day, dark) pairs, one custom property per fill; `.night` swaps them all.
   The sky (390 × 640 there, the top half here) is 388fc4→e5e8c9 / 121a32→667991; the pasture continues the ground gradient. */
#herd{--h0:#a9c9bf;--h1:#9fb9a5;--h2:#8aab88;--h3:#79966d;--lw:#d2c48c;--sh:#334c2e;--st:#e8e3b3;--bn:#a86e52;--rf:#536456;--dr:#344635;--wn:#e5dfb8;
  --tk:#776745;--l1:#859b5c;--l2:#66874f;--lh:#b0b67b;--fp:#9c916a;--fh:#e2d7ac;--fr:#8b825d;--fl:#d6c99f;--cl:#e3f1e9;--gs:#aeb57a}
#herd.night{background:#273f3e;--sky1:#121a32;--sky2:#3c4961;--h0:#617484;--h1:#586c78;--h2:#4c666a;--h3:#425b5a;--lw:#789085;--sh:#172e32;--st:#b9c3b1;--bn:#705b58;--rf:#344b50;--dr:#182d35;--wn:#ceb581;
  --tk:#3c4c4a;--l1:#557068;--l2:#405e59;--lh:#96aea0;--fp:#73847f;--fh:#d0dbd4;--fr:#6b7d75;--fl:#c4d6e0;--cl:#a6b6c6;--gs:#90a397}
#herd.night.storm{--sky1:#0b0f1a;--sky2:#262d38}
.rs .gd{fill:url(#hgr)}.night .rs .gd{fill:url(#hgrn)}
.rs .wa{fill:url(#hwd)}.night .rs .wa{fill:url(#hwn)}
.sky-night{display:none}.night .sky-night{display:inline}.storm .sky-night{opacity:.3}
.mw path{fill:none;stroke:#bab8db;stroke-opacity:.022;stroke-linecap:round}
.hc svg{fill-opacity:.2}.night .hc svg{fill-opacity:.055}
.herding #ptr{z-index:4}
.hdefs{position:absolute;width:0;height:0}
.hpages{display:flex;height:100%;overflow:auto hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.hpages::-webkit-scrollbar{display:none}
.hp{flex:0 0 100%;height:100%;overflow:hidden auto;scroll-snap-align:start;scroll-snap-stop:always;scroll-behavior:smooth;overscroll-behavior-y:contain;
  background:var(--pa,linear-gradient(#a9b06c,#7f8f50 40vh,#4c6340));padding-bottom:calc(2 * var(--ctl) + env(safe-area-inset-bottom))}
/* The strip: one 28 px dark bar, `[A]` `[×]` inside it on the right; the counts share its line when they fit, else wrap to an 11 px second line in the same bar. */
#herd .hx,#herd .hlt{position:fixed;z-index:3;top:env(safe-area-inset-top);right:var(--s2)}
#herd .hlt{right:calc(var(--s2) + var(--hit))}
.hs{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-content:center;column-gap:var(--s2);height:calc(var(--ctl) + env(safe-area-inset-top));padding:env(safe-area-inset-top) calc(2 * var(--hit) + var(--s2)) 0 var(--s3);
  background:#1f2a38f0;line-height:var(--s4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hs p{margin:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs .sum{color:#f4ecd8bb;font-size:var(--fs-meta);line-height:var(--s3)}
/* #291 switching without a touch screen: [‹] [›] at the scene's edges, mid-height (28 px, the 44 px ring), the repo dots
   under it (a 28 px button each, 16 px apart, so every ring is its own 44 px); a mouse gets the hover and the pointer. */
#herd .hnv{position:absolute;z-index:1;top:50%;left:var(--s2);translate:0 -50%;background:#1f2a38f0;color:#f4ecd8;cursor:pointer}
#herd .hnx{left:auto;right:var(--s2)}
#herd.one .hnv,#herd.one .hdt{display:none}
.hdt{display:flex;justify-content:center;gap:var(--s4);margin:0;padding-top:var(--s2)}
#herd .hdt button{padding:0;color:#f4ecd8;cursor:pointer}
#herd .hdt button::before{content:"";position:static;padding:var(--s1);border-radius:50%;background:currentColor;opacity:.45}
#herd .hdt button[aria-current]::before{opacity:1}
/* A dot overrides the global [ ] brackets: ::before becomes the dot, drawn in flow (static); ::after keeps the global
   inset (the 44 px hit area) but drops its "]". */
#herd .hdt button::after{content:""}
@media (hover:hover){#herd .hnv:hover,#herd .hdt button:hover{background:#f4ecd833}}
#herd.drag{cursor:grabbing;user-select:none;-webkit-user-select:none}
.hn{padding:0 var(--s2)}.hn .ask{background:#2a1416ee;color:var(--fg)}
/* #292: the band is as tall as the scene at full width (`--ar`, herd.js tiles()) up to 22 % of the screen (#58); the tiles fill it. */
.hr{position:relative;height:min(calc(100vw * var(--ar,.82)),max(120px,22vh));height:min(calc(100vw * var(--ar,.82)),max(120px,22svh));overflow:hidden;background:linear-gradient(var(--sky1),var(--sky2));transition:background .6s}
.hc{position:absolute;filter:blur(3px);will-change:transform}
.hc svg{display:block;width:100%;height:100%}
.rs svg:not(.t0) .moon{display:none}
.rs{position:absolute;inset:0;width:100%;height:100%}
.rs .gt{fill:none;stroke:var(--gs);stroke-opacity:.45;stroke-width:.8}
.storm .rs{filter:brightness(.72) saturate(.8)}
.storm .hc{filter:blur(3px) brightness(.55)}
.fog{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(#e9eef0 0,#dfe6e8cc 55%,#e9eef0 100%);transition:opacity .6s}
.fog1 .fog{opacity:.4}.fog2 .fog{opacity:.75}
.fog2 .hp{background:linear-gradient(#b8bfa8,#8d9a78 40vh,#66775c)}
#herd.night .hp{background:linear-gradient(#576c62,#3b5750 40vh,#28413f)}
.night .fog{background:linear-gradient(#5d6977 0,#4f5b68cc 55%,#5d6977 100%)}
.hrain{position:absolute;inset:-60px 0 0 -60px;pointer-events:none;display:none;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M10 0l-3 14M40 20l-3 14M25 40l-3 14M52 46l-3 14M3 28l-3 14' stroke='%23d8e6f5' stroke-opacity='.6'/%3E%3C/svg%3E")}
.storm .hrain{display:block}
.hflash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0}
/* #65 A: the weather caption is a solid 28 px bar at the bottom; `.hp` is padded past it (and the demo's switcher above it). */
.hcap{position:fixed;z-index:2;left:0;right:0;bottom:0;margin:0;padding:0 var(--s2) env(safe-area-inset-bottom);background:#1f2a38;font-size:var(--fs-meta);line-height:var(--ctl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.hcap[data-fps]::after{content:" · " attr(data-fps)}
.hb{padding-top:var(--s2)}
/* #292: the ranch's grass fades into the pasture below it, no straight seam. */
#herd:not(.heat,.light) .hr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:25%;pointer-events:none;background:linear-gradient(#0000,var(--bl,#a3ab68))}
#herd:not(.heat,.light) .hb{background:linear-gradient(var(--bl,#a3ab68),#0000 calc(3 * var(--s4)))}
#herd.night{--bl:#4f665d}.fog2{--bl:#b2b9a2}
.band h4{margin:0;padding:var(--s3) var(--s3) var(--s1);font-size:var(--fs);color:#f4ecd8;text-shadow:0 1px 2px #0008}
.band h4 span{opacity:.8;font-weight:400}
.b-blocked{background:#b3261e22}
.field{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:var(--s2)}
.hh,.hqh{background:none;border:0;border-radius:0;padding:0;color:inherit;font:inherit;text-align:center}
.hh{flex:0 0 156px;display:flex;flex-direction:column;align-items:center;min-height:var(--hit);padding-bottom:var(--s2)}
.hh svg,.hqh svg{display:block;height:auto;aspect-ratio:132/100;overflow:visible}
.hh svg{width:132px}
.hqh svg{width:53px;margin:0 auto}
/* #239: a theme's scene.palette may keep its done sprites undimmed (--done). */
.hh.done svg{opacity:var(--done,.75)}
.hh.dead svg{filter:sepia(1) saturate(5) hue-rotate(-50deg)}
.hl{display:flex;flex-direction:column;max-width:164px;margin:calc(-1 * var(--s1)) 0 0;padding:var(--s1) var(--s2);border-radius:8px;background:#f4ecd8;color:#3a332e;font-size:var(--fs-meta);line-height:1.3;box-shadow:0 1px 3px #0004}
.hl b,.hl>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl i,.hqh i{font-style:normal;font-weight:600}
.hl .g{color:#2f7d32}.hl .a{color:#8a5d00}.hl .r,.hqh .r{color:#b3261e}.hl .m{color:#6b625a}
.b-blocked .hl{background:#f6d9d3}
/* The gate: queued horses (53×40 in a 60 px slot) line up in queue order in their own rows, after its posts (#65 A).
   #114: the row starts 4 px past the post (4 px in, 8 px wide); every label reserves 2 lines and cells align to the top, so feet share one line. */
.gate{position:relative;display:flex;flex-wrap:wrap;align-items:start;padding:var(--s2) 0 0 calc(2 * var(--s1) + var(--s2))}
.gate::after{content:"";position:absolute;inset:0 auto 0 var(--s1);width:8px;border-left:5px solid var(--fp);pointer-events:none;
  background:repeating-linear-gradient(#0000 0 10px,var(--fr) 10px 14px,#0000 14px 26px)}
.hqh{position:relative;flex:0 0 var(--qw,60px);font-size:var(--fs-meta)}
.hqh::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--hit));height:max(100%,var(--hit));transform:translate(-50%,-50%)}
.hqh span{display:block;min-height:3em;margin:calc(-1 * var(--s1)) var(--s1) 0;border-radius:6px;background:#f4ecd8;color:#3a332e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hq{position:fixed;z-index:3;left:var(--s3);right:var(--s3);bottom:calc(var(--ctl) + env(safe-area-inset-bottom));padding:var(--s2) var(--s3);border-radius:12px;background:#f4ecd8;color:#3a332e;box-shadow:0 4px 16px #0008}
.hq p{margin:var(--s1) 0}.hq .r{color:#b3261e}.hq .m{color:#6b625a;font-size:var(--fs-meta)}
.empty{padding:var(--s3);color:#f4ecd8}
@media (prefers-reduced-motion:reduce){.hp{scroll-behavior:auto}.hrain,.hflash{display:none!important}.hr,.fog{transition:none}}
.hwx{position:fixed;z-index:3;bottom:calc(var(--ctl) + env(safe-area-inset-bottom));left:var(--s2);display:flex;gap:var(--s4);margin:0;padding:0 var(--s2);border-radius:4px;background:#1f2a38f0}
#herd .hwx .on{background:var(--l);color:var(--bg)}
.hs+.later{margin:var(--s2);background:#2a1416ee}
/* #239 heat (load_scene kind "heat"; docs/themes.md): `heat-calm|busy|held` on #herd sets the flame colours and the
   scene's layer; a sprite's kf1/kf2 groups are the two frames of its loop, swapped every 0.6 s through --o1/--o2 (a <use>
   inherits them). Held: smoke, wall flames and a red floor glow, which stay in the reduced-motion still (only the loop,
   the glow's ease and the ticket's flutter stop). No flash. */
.kf1{opacity:var(--o1,1)}.kf2{opacity:var(--o2,0)}.ksteam{opacity:var(--steam,0)}
#herd.heat{animation:kfr 1.2s infinite}
@keyframes kfr{0%,49.9%{--o1:1;--o2:0}50%,100%{--o1:0;--o2:1}}
.lds{--f1:#ee7a22;--f2:#ffd15a;--steam:1} /* #305, #337: the loading chef cooks at busy heat */
.heat-calm{--f1:#3d7fd9;--f2:#9cc8ff}.heat-busy{--f1:#ee7a22;--f2:#ffd15a;--steam:1}.heat-held{--f1:#e04a1e;--f2:#ffb03a;--steam:1}
.rs :is(.h-calm,.h-busy,.h-held){display:none}
.heat-calm .rs .h-calm,.heat-busy .rs .h-busy,.heat-held .rs .h-held{display:inline}
.heat-held .hb{background:radial-gradient(120% 50% at 50% 100%,#ff5a2a33,#0000 70%)}
.heat-held .kglow{animation:kgl 4s ease-in-out infinite alternate}
@keyframes kgl{from{opacity:.75}to{opacity:1}}
.hqh.n use{animation:var(--flutter,none);transform-box:view-box;transform-origin:50% 0}
@keyframes kflut{from{rotate:-3deg}to{rotate:3deg}}
@media (prefers-reduced-motion:reduce){#herd.heat,.heat-held .kglow,.hqh.n use{animation:none}}
/* #423 window light (load_scene kind "light"): `light-calm|busy|held` on #herd shows the shop window's sun, cloud or
   rain layer (the scene's .l-sun/.l-overcast/.l-rain); the sprites' kf1/kf2 frames loop as under heat, frame 1 under
   reduced motion. */
#herd.light{animation:kfr 1.2s infinite}
.rs :is(.l-sun,.l-overcast,.l-rain){display:none}
.light-calm .rs .l-sun,.light-busy .rs .l-overcast,.light-held .rs .l-rain{display:inline}
@media (prefers-reduced-motion:reduce){#herd.light{animation:none}}
#herd.light .hn .ask{background:var(--card)} /* the needs-you cards in the scheme's own colours, light or dark */
/* #292 wide screens: the cards are a grid of equal columns from the rail's left edge, as wide as the page's widest line
   (`--cw`, herd.js patch(); ellipsised past 520 px, the whole line in `title`); the bands sit closer. */
@media (min-width:900px){
  .field{display:grid;grid-template-columns:repeat(auto-fill,var(--cw,320px));justify-content:start;padding-left:calc(2 * var(--s1) + var(--s2))}
  .hh{width:var(--cw,320px)}.hl{align-self:stretch;max-width:none}.hl>*{width:max-content;max-width:100%;align-self:center}
  .band h4{padding-top:var(--s2)}
}