/* fx/night.css: the 2:13am reminder scene and the 4:00am fleet scene. Builds on .mock, .clock, .bubble, .paper, .paper-row, .badge in styles.css.
   Only palette colours (plus the night card edge rgba(242,239,231,.12)); everything sits on --green by day and #22392F by night. */

/* 2:13am: phone chat left, clock and the reminder list right; one column under 860px */
.mock.remind{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"phone clock" "phone list";align-items:center;column-gap:clamp(18px,3vw,40px)}
.remind .clock{grid-area:clock;align-self:end;flex-wrap:wrap;row-gap:6px}
.remind .clock small{max-width:9ch}
.remind .list{grid-area:list;justify-self:stretch;width:auto;align-self:start}
.phone{grid-area:phone;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:300px;padding:14px 14px 16px;border-radius:26px;background:var(--green);box-shadow:inset 0 0 0 1px rgba(242,239,231,.12);font-size:.98rem}
.phone-top{margin-bottom:auto;display:flex;align-items:center;gap:8px;padding:2px 4px 12px;color:var(--cream);font-size:.92rem;box-shadow:inset 0 -1px rgba(242,239,231,.12)}
.phone-top i{width:10px;height:10px;border-radius:50%;background:var(--orange)}
.phone-top small{margin-left:auto;font-size:.85rem;opacity:.75}
.phone .bubble{max-width:88%;padding:12px 16px;line-height:1.4}
.phone .bubble small{display:block;margin-top:4px;font-size:.75rem;font-weight:400;opacity:.7;text-align:right}
.phone .typing{position:absolute;right:14px;bottom:16px;display:flex;gap:5px;padding:14px 16px;border-radius:18px 18px 4px 18px;background:var(--orange)}
.phone .typing i{width:7px;height:7px;border-radius:50%;background:#fff}
.list .paper-row{grid-template-columns:6.2em 1fr;gap:10px;white-space:nowrap}
.list .paper-row span:not(:first-child){text-align:left}
.list .paper-row span:first-child{font-weight:600}
.list .paper-row.new span:last-child{color:var(--orange-d);font-weight:700}

/* 4:00am: four agent tiles, each wired across the column gap to the captain's sheet */
.mock.fleet{--wire:clamp(22px,4vw,52px);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:var(--wire);align-items:stretch}
.crew{display:grid;gap:10px}
.agent{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding:12px 16px;border-radius:6px;background:#FBF9F3;color:var(--green);line-height:1.3}
.agent b{font-weight:600}
.agent span{grid-column:1;font-size:.92rem;opacity:.75}
.agent em{grid-column:2;grid-row:1/span 2;font-style:normal;font-weight:700;color:var(--orange-d)}
.wire{position:absolute;left:100%;top:50%;width:var(--wire);height:2px;margin-top:-1px;background:var(--orange)}
.mock .captain{position:relative;justify-self:stretch;width:auto;align-content:center}
.captain .paper-row{grid-template-columns:1fr auto}
.captain .paper-row.in span:last-child{color:var(--orange-d);font-weight:700}
.captain .badge{right:-10px;top:-12px}

/* the list's rows do not wrap, so below about 640px of picture column (phones included) the two columns stack; container set in styles.css */
@container (max-width:640px){
  .mock.remind{grid-template-columns:1fr;grid-template-areas:"clock" "phone" "list"}
  .remind .clock{align-self:auto}
  .remind .clock small{max-width:none}
  .phone{min-height:0}
}
@media (max-width:480px){
  .mock.fleet{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);font-size:.95rem}
  .mock.fleet{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .agent{padding:10px;column-gap:6px}
  .mock .captain{padding:16px 12px}
  .captain .badge{display:none}   /* no room beside the head; the total row already says it was sent */
  .captain .paper-head{font-size:1.25rem}
  .captain .paper-row.total{font-size:.88rem}
}
@media (max-width:379px){   /* 320 px phones: "Captain" and the ticks ran 1 px past the sheet */
  .mock.fleet{--wire:16px}
  .mock .captain{padding:14px 9px}
  .captain .paper-head{font-size:1.12rem}
}