/* option 03, night shift: one example night drawn as the struck arc. Prefix .hero-night-shift, local classes ns- */
.hero-night-shift .ns{padding-block:clamp(12px,1.6vw,20px) clamp(20px,2.4vw,32px)}
.hero-night-shift .ns-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:center;min-height:calc(var(--hero-vh) - var(--nav-h) - clamp(32px,4vw,52px))}

/* copy column */
.hero-night-shift .ns-copy{max-width:600px;grid-column:1;grid-row:1}
.hero-night-shift .ns-tile,.hero-night-shift .ns-slot{grid-column:2;grid-row:1}
.hero-night-shift .ns-eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:22px}
.hero-night-shift .ns-h1{font-size:clamp(34px,3.8vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin-bottom:24px}
.hero-night-shift .ns-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-night-shift .ns-line{display:block;will-change:transform}
/* one mask and one text block, so the whole headline counts as a single largest contentful element */
.hero-night-shift .ns-l2{color:var(--text-2)}
.hero-night-shift .ns-lead{font-size:clamp(17px,1.35vw,20px);color:var(--text-2);line-height:1.5;max-width:42ch;margin-bottom:32px}
.hero-night-shift .ns-ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero-night-shift .ns-hint{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);max-width:42ch}

/* the tile: sky, dial, slot */
.hero-night-shift .ns-tile{--ns-fg:#fff;--ns-fg-2:rgba(255,255,255,.66);--ns-fg-3:rgba(255,255,255,.2);--ns-bead:#8FB0FF;
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-tile);background-color:#141A4A;
  height:calc(var(--hero-vh) - var(--nav-h) - clamp(32px,4vw,52px));min-height:640px;max-height:860px;
  display:flex;flex-direction:column;padding:20px 24px 24px;color:var(--ns-fg);outline:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-night-shift .ns-tile.is-day{--ns-fg:#0D0D0D;--ns-fg-2:rgba(13,13,13,.72);--ns-fg-3:rgba(13,13,13,.13);--ns-bead:#2457FF}
.hero-night-shift .ns-tile.ns-snap,.hero-night-shift .ns-tile.ns-snap *{transition:none!important}
.hero-night-shift .ns-tile.is-drag{cursor:grabbing}
.hero-night-shift .ns-tile:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.hero-night-shift .ns-sky{position:absolute;inset:0;z-index:-1}
.hero-night-shift .ns-sky::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,rgba(0,0,0,0),rgba(0,0,0,.08))}

.hero-night-shift .ns-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;letter-spacing:.04em;color:var(--ns-fg-2);transition:color .6s var(--ease)}
.hero-night-shift .ns-owner{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;background:var(--ns-fg-3);transition:background .6s var(--ease)}
.hero-night-shift .ns-tile.is-day .ns-owner{background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 0 0 1px var(--glass-edge)}
.hero-night-shift .ns-owner-dot{width:7px;height:7px;border-radius:50%;background:var(--ns-fg-2)}
.hero-night-shift .ns-tile.is-morning .ns-owner-dot{background:#1DBF73;box-shadow:0 0 0 3px rgba(29,191,115,.2)}

.hero-night-shift .ns-dial{position:relative;flex:none;width:100%}
.hero-night-shift .ns-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;max-width:none}
.hero-night-shift .ns-svg text{font-family:var(--font-mono);font-weight:400;fill:var(--ns-fg-2);transition:fill .6s var(--ease)}
.hero-night-shift .ns-track{stroke:var(--ns-fg-3);transition:stroke .6s var(--ease)}
.hero-night-shift .ns-arc{stroke:var(--ns-fg);transition:stroke .6s var(--ease)}
.hero-night-shift .ns-tick{stroke:var(--ns-fg-2);transition:stroke .6s var(--ease)}
.hero-night-shift .ns-mk{transition:fill .6s var(--ease)}
.hero-night-shift .ns-bead{fill:var(--ns-bead)}
.hero-night-shift .ns-halo{fill:none;stroke:var(--ns-bead)}
.hero-night-shift .ns-clap{fill:var(--ns-fg-3)}
.hero-night-shift .ns-clap-on{fill:var(--accent)}
.hero-night-shift .ns-ring{fill:none;stroke:#5B8BFF}

.hero-night-shift .ns-read{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.hero-night-shift .ns-clock{font-size:var(--ns-clock,64px);letter-spacing:-.045em;line-height:1;color:var(--ns-fg);font-variant-numeric:tabular-nums;transition:color .6s var(--ease)}
/* a11y-08: `.ns-sub` used to read `var(--ns-fg-2)`, a colour section.js's render() flips between the
   is-day/is-night pair by the *average* luminance of the sky mesh's four keyframe colours; the sky
   shader itself (section.js skyAt(), speed 0.22, its own swirl and grain) keeps moving under that
   average, and a local patch on the wrong side of it measured 4.38:1 against the 4.5:1 floor - a near
   miss, not an extreme, which is exactly what a heuristic tuned on an average and not the pixel gets
   wrong. Same fix as `.c-head-copy .tile-k` in css/app/console.css for the same shape of bug: a
   near-opaque chip, reusing the glass-pill recipe `.ns-owner.is-day` and `.ns-card`/`.ns-sum` already
   carry in this file, removes the sky as a variable instead of chasing the exact frame - one colour,
   not a day/night pair, so there is nothing left to fall on the wrong side of. */
.hero-night-shift .ns-sub{
  margin-top:12px;font-size:12px;letter-spacing:.04em;
  display:inline-flex;color:var(--ink);
  padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
  backdrop-filter:blur(8px) saturate(1.2);
}

/* the slot: card and summary stacked in one cell so the height never jumps. It is a sibling of the tile
   so phones can put the dial above the headline and the card after the calls to action; on wide screens it
   sits in the tile's grid cell, pinned to the tile's bottom edge */
.hero-night-shift .ns-slot{position:relative;z-index:1;display:grid;justify-items:center;align-items:start;align-self:end;padding:0 24px 24px}
.hero-night-shift .ns-card,.hero-night-shift .ns-sum{grid-area:1/1;width:min(420px,100%);color:var(--ink);text-align:left;border-radius:20px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-line);box-shadow:var(--glass-lift);padding:14px 16px 16px;will-change:opacity,transform}
.hero-night-shift .ns-card{align-self:start}
.hero-night-shift .ns-card-h,.hero-night-shift .ns-sum-h{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:12px}
.hero-night-shift .ns-live{width:8px;height:8px;border-radius:50%;background:#1DBF73;box-shadow:0 0 0 3px rgba(29,191,115,.18);flex:none}
.hero-night-shift .ns-time{margin-left:auto;font-size:12px;color:var(--text-3)}
.hero-night-shift .ns-empty{font-size:15px;color:var(--text-2);padding:6px 0 4px}
.hero-night-shift .ns-bub{max-width:86%;width:fit-content;padding:9px 13px;border-radius:16px;font-size:15px;line-height:1.35}
.hero-night-shift .ns-bub.in{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.hero-night-shift .ns-outwrap{display:grid;justify-items:end;margin-top:8px}
.hero-night-shift .ns-outwrap > *{grid-area:1/1}
.hero-night-shift .ns-bub.out{background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.hero-night-shift .ns-typing{display:inline-flex;align-self:center;gap:4px;padding:8px 12px;border-radius:14px;background:rgba(13,13,13,.06)}
.hero-night-shift .ns-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:night-shift-tp 1s infinite ease-in-out}
.hero-night-shift .ns-typing i:nth-child(2){animation-delay:.15s}
.hero-night-shift .ns-typing i:nth-child(3){animation-delay:.3s}
@keyframes night-shift-tp{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.hero-night-shift .ns-tag{display:inline-block;margin-top:12px;font-size:13px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.hero-night-shift .ns-tag.is-booked{color:#0B7A4B;background:#E6F7EF;border-color:transparent}
.hero-night-shift .ns-tag.is-held{color:#fff;background:var(--accent);border-color:transparent}

.hero-night-shift .ns-sum-h span:first-child{color:var(--ink);font-size:15px}

/* the morning report: a row of KPI tiles read before the timeline detail */
.hero-night-shift .ns-kpis{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hero-night-shift .ns-kpi{display:flex;flex-direction:column;gap:6px;padding:10px 10px 9px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);min-width:0}
.hero-night-shift .ns-kpi-ic{width:16px;height:16px;color:var(--text-3)}
.hero-night-shift .ns-kpi-ic svg{width:100%;height:100%;display:block}
.hero-night-shift .ns-kpi-n{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-night-shift .ns-kpi-l{font-size:11px;letter-spacing:.01em;color:var(--text-3);line-height:1.25}
.hero-night-shift .ns-kpi[data-kpi="booked"] .ns-kpi-ic{color:#0B7A4B}
.hero-night-shift .ns-kpi[data-kpi="held"] .ns-kpi-ic{color:var(--accent)}

.hero-night-shift .ns-rows{list-style:none;margin:0 0 12px;padding:0;display:grid}
.hero-night-shift .ns-rows li{display:grid;grid-template-columns:62px 84px minmax(0,1fr);gap:10px;align-items:baseline;font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.hero-night-shift .ns-rows .mono{font-size:12px;color:var(--text-3)}
.hero-night-shift .ns-rows .ns-who{color:var(--text-2)}
.hero-night-shift .ns-rows li.is-held .ns-what::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;transform:translateY(-1px)}
.hero-night-shift .ns-sum-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.hero-night-shift .ns-sum-f .mono{font-size:12px;color:var(--text-2)} /* text-3 on the grey card was 4.38:1, under AA */

@media (max-width:980px){
  .hero-night-shift .ns-in{grid-template-columns:minmax(0,1fr);min-height:0;gap:28px}
  .hero-night-shift .ns-copy{max-width:640px;grid-column:1;grid-row:2}
  .hero-night-shift .ns-tile{grid-column:1;grid-row:1}
  .hero-night-shift .ns-slot{grid-column:1;grid-row:3;align-self:start;padding:0}
  .hero-night-shift .ns-card,.hero-night-shift .ns-sum{border-color:var(--glass-edge);background:#fff}
  /* one column: the card that is switched off stops holding room, so the 6 pm card does not sit above a screen of
     empty space kept for the morning report. The slot only grows while the visitor drags the clock (their action). */
  .hero-night-shift .ns-slot{position:relative}
  .hero-night-shift .ns-slot > .is-off{position:absolute;top:0;left:0;right:0;margin:0 auto}
  .hero-night-shift .ns-tile{height:auto;min-height:0;max-height:none;padding:16px 16px 16px}
  .hero-night-shift .ns-hint{margin-top:24px}
}
@media (max-width:520px){
  .hero-night-shift .ns-eyebrow{margin-bottom:16px}
  .hero-night-shift .ns-h1{font-size:40px;margin-bottom:18px}
  .hero-night-shift .ns-lead{margin-bottom:24px}
  .hero-night-shift .ns-ctas .pill.lg{height:44px;padding:0 18px;font-size:15px}
  .hero-night-shift .ns-kpis{grid-template-columns:repeat(2,1fr);gap:8px 8px}
  .hero-night-shift .ns-kpi-n{font-size:20px}
  .hero-night-shift .ns-rows li{grid-template-columns:62px 70px minmax(0,1fr);gap:8px;font-size:13px}
  .hero-night-shift .ns-bub{font-size:14px}
  .hero-night-shift .ns-sub{margin-top:8px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .hero-night-shift .ns-typing i{animation:none}
}