/* §32 THE DOOR CLOCK — a slanted calendar plate in the header.

   Top strip: the day of the week, the date and the moon that night.
   Under it: the countdown, big and leaning, with DAYS LEFT beside it.
   Bottom: twenty ticks, one per week — gone, this one, still to come.

   One colour drives the countdown: --dc. It walks from the game's yellow to
   its alarm red as the door gets closer, and the last week breathes. */
#doorClock{flex:0 0 auto;align-self:center;margin:-4px 8px -4px 4px;line-height:1;
  --dc:var(--yellow,#ffd64a); --dc-ink:#041a2a;
  font-family:"Impact","Haettenschweiler","Arial Narrow Bold","Oswald",sans-serif}
#doorClock.dc1{--dc:#ffd64a}
#doorClock.dc2{--dc:#ffab3d}
#doorClock.dc3{--dc:#ff6a3a}
#doorClock.dc4{--dc:#ff3b2e}
#doorClock.open{--dc:#7ee081}
/* §53 a R.I.B.S. day: the countdown itself goes the game's alarm red, whatever the band */
#doorClock.ribs{--dc:var(--alarm,#ff8a6b)}

/* the plate leans; everything inside leans back so the text stays upright */
.dc-plate{position:relative;transform:skewX(-14deg);
  display:grid;grid-template-rows:auto auto auto;min-width:118px;
  background:linear-gradient(160deg,#0d2c45 0%,#061827 70%);
  border:1px solid #0e4e78;border-left:4px solid var(--dc);
  box-shadow:0 2px 8px rgba(0,8,14,.6), inset 0 1px 0 rgba(150,205,255,.12);
  transition:border-color 1.2s linear}
.dc-plate > *{transform:skewX(14deg)}

/* ---- the date strip ---- */
.dc-top{display:flex;align-items:center;gap:6px;padding:3px 8px 2px 10px;
  border-bottom:1px solid rgba(14,78,120,.8)}
.dc-wd{font-size:12px;letter-spacing:.06em;color:var(--dc-ink);background:var(--blue-lit,#b9dcf4);
  padding:1px 5px 0;transform:skewX(-14deg)}
/* Sunday: the red, dimmed — an outline, so a R.I.B.S. day can have the full red */
#doorClock.sun .dc-wd{background:transparent;color:var(--alarm,#ff3b2e);box-shadow:inset 0 0 0 1px var(--alarm,#ff3b2e)}
/* §53 R.I.B.S.: the day something happens to the whole vault */
#doorClock.ribs .dc-wd{background:var(--alarm,#ff3b2e);color:#fff;box-shadow:none}
#doorClock.ribs .dc-date em{color:var(--alarm,#ff3b2e)}
.dc-date{font-size:12px;letter-spacing:.08em;color:var(--blue-lit,#b9dcf4)}
.dc-date em{font-style:normal;font-size:16px;margin-left:3px;color:#fff}
.dc-moon{margin-left:auto;width:16px;height:16px;display:block}
.dc-moon svg{width:100%;height:100%;display:block;overflow:visible}
.dc-moon .dark{fill:#0a2233;stroke:#2f5a78;stroke-width:1}
.dc-moon .lit{fill:#f4efd8;filter:drop-shadow(0 0 2px rgba(244,239,216,.7))}

/* ---- the countdown ---- */
.dc-main{display:flex;align-items:center;gap:7px;padding:2px 10px 1px 12px}
#doorClock #doorDays{font-family:inherit;font-weight:400;font-size:30px;letter-spacing:.01em;
  color:var(--dc) !important;font-style:italic;
  /* a hollow copy of the number sits behind it, offset: the poster look */
  text-shadow:2px 2px 0 var(--dc-ink), 3px 3px 0 rgba(255,255,255,.18), 0 0 14px rgba(0,0,0,.5);
  transition:color 1.2s linear}
#doorClock #doorLbl{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.18em;
  line-height:1.25;color:var(--blue-lit,#b9dcf4)}

/* ---- the weeks ---- */
.dc-weeks{display:flex;gap:2px;padding:0 10px 4px 12px}
.dc-weeks i{flex:1 1 0;height:3px;min-width:3px;background:#0b3450}
.dc-weeks i.done{background:rgba(185,220,244,.45)}
/* a week with a R.I.B.S. day in it: a red cap on the tick */
.dc-weeks i.rb{box-shadow:inset 0 1px 0 var(--alarm,#ff3b2e)}
.dc-weeks i.rb.now{box-shadow:0 0 5px var(--dc), inset 0 1px 0 var(--alarm,#ff3b2e)}
.dc-weeks i.now{background:var(--dc);box-shadow:0 0 5px var(--dc);animation:dcTick 1.6s ease-in-out infinite}
@keyframes dcTick{0%,100%{opacity:1}50%{opacity:.35}}

/* the last week breathes; the door, when it opens, is just the word */
#doorClock.soon .dc-plate{animation:dcPulse 2.4s ease-in-out infinite}
@keyframes dcPulse{0%,100%{box-shadow:0 2px 8px rgba(0,8,14,.6)}50%{box-shadow:0 0 14px rgba(255,59,46,.55)}}
#doorClock.open #doorDays{font-size:22px}

@media (prefers-reduced-motion:reduce){
  #doorClock.soon .dc-plate,.dc-weeks i.now{animation:none}
  .dc-plate,#doorClock #doorDays{transition:none}
}

/* ==========================================================================
   §32c THE STATUS STRIP — the rest of the header, in the plate's language.
   Slanted chips, one fact each: the day, the time, the shift, the next meal,
   whether you are free, and the two tallies.
   ========================================================================== */
header #hTime, header #hDuty{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;white-space:nowrap;
  align-self:center;font-family:var(--mono);color:var(--blue-dim,#6f9bbd)}
header #hTime{margin-left:2px}

.hs-day{display:flex;align-items:baseline;gap:4px}
.hs-day em{font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--blue-dim,#6f9bbd)}
.hs-day b{font-family:"Impact","Haettenschweiler","Arial Narrow Bold","Oswald",sans-serif;font-weight:400;
  font-style:italic;font-size:22px;color:var(--blue-lit,#b9dcf4) !important}

/* the time is the other big number in the header */
.hs-time{font-family:"Impact","Haettenschweiler","Arial Narrow Bold","Oswald",sans-serif;
  font-style:italic;font-size:28px;letter-spacing:.02em;color:#fff;line-height:1;
  text-shadow:2px 2px 0 #041a2a, 3px 3px 0 rgba(255,255,255,.14);padding:0 4px 0 2px}

/* a chip: a slanted label and a tag hanging off its end */
.hs-chip, .hs-state, .hs-tally{display:inline-flex;align-items:stretch;transform:skewX(-14deg);
  border:1px solid #0e4e78;background:linear-gradient(160deg,#0d2c45,#061827);
  box-shadow:0 1px 4px rgba(0,8,14,.5);line-height:1}
.hs-chip > *, .hs-state > *, .hs-tally > *{transform:skewX(14deg)}
/* the coloured tag on a chip leans with the chip, so its block fills the slanted
   end instead of sticking out of it as an upright box; only its word stands up */
.hs-chip > i{transform:none}
.hs-chip > i > span{display:inline-block;transform:skewX(14deg)}
/* label and tag share one line box, so the two words sit on the same baseline */
.hs-chip > em, .hs-chip > i{display:flex;align-items:center;line-height:1}
.hs-chip em{font-style:normal;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-lit,#b9dcf4);padding:6px 9px 5px}
.hs-chip i{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.12em;padding:6px 9px 5px;
  color:#041a2a;background:#6f9bbd}
.hs-chip.on{border-left:3px solid var(--alarm,#ff3b2e)}
.hs-chip.on i{background:var(--alarm,#ff3b2e);color:#fff}
.hs-chip.off{border-left:3px solid #7dbf8a}
.hs-chip.off i{background:#7dbf8a}
.hs-chip.meal i{background:transparent;color:var(--blue-dim,#6f9bbd);border-left:1px solid #0e4e78}
.hs-chip.meal.now{border-color:var(--yellow,#ffd64a)}
.hs-chip.meal.now i{background:var(--yellow,#ffd64a);color:#041a2a;border-left:0;
  animation:hsMeal 2s ease-in-out infinite}
@keyframes hsMeal{0%,100%{filter:none}50%{filter:brightness(1.25)}}

/* free or on shift: the one thing that says where you are allowed to be */
.hs-state{border-left:4px solid #7dbf8a}
.hs-state.on{border-left-color:var(--alarm,#ff3b2e)}
.hs-state .onblk, .hs-state .offblk{border:0;padding:6px 9px 5px;font-size:13.5px;letter-spacing:.14em;
  background:transparent;margin:0}
.hs-state i{font-style:normal;font-size:12.5px;letter-spacing:.03em;color:var(--blue-lit,#b9dcf4);
  padding:6px 10px 5px 2px}

/* the tallies: a word and a number */
.hs-tally em{font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--blue-dim,#6f9bbd);
  padding:7px 5px 5px 8px}
.hs-tally b{font-family:"Impact","Haettenschweiler","Arial Narrow Bold","Oswald",sans-serif;font-weight:400;
  font-style:italic;font-size:19px;color:#fff;padding:3px 9px 2px 2px}
.hs-tally.miss b{color:#ffb3a8}
.hs-tally.bad{border-color:var(--alarm,#ff3b2e)}
.hs-tally.bad b{color:var(--alarm,#ff3b2e)}
@media (prefers-reduced-motion:reduce){ .hs-chip.meal.now i{animation:none} }

/* the header as two rows beside the plate: the clock and the shift on top,
   where you stand and the tallies under it. title, plate and cog span both. */
header{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-rows:auto auto;
  align-items:center;column-gap:14px;row-gap:6px}
header #hFac{grid-column:1;grid-row:1 / span 2;align-self:center}
header #doorClock{grid-column:2;grid-row:1 / span 2;margin:0 2px}
header #hTime{grid-column:3;grid-row:1;margin-left:0}
header #hDuty{grid-column:3;grid-row:2}
header #cog{grid-column:4;grid-row:1 / span 2;align-self:center}