/* The Claude page's 3 AM (pages/panes.js nightView): the nights Claude made
   the owner's change notes, the newest on a row of the home and each one
   read as a chat. The phone's components/work/NightPage.tsx, the same. */

/* The night's coin: a moon on dark blue, the same in every theme. */
.night-moon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #16203A; border: 1.5px solid #A9B2C3; color: #FFD970;
}
.night-moon svg { width: 48%; height: 48%; fill: currentColor; stroke: none; }
/* A run of the day ("Do pending now"): the sun on a sky blue. The sun is drawn in strokes. */
.night-sun { background: #3D7FC4; border-color: #BFD8F2; }
.night-sun svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 44; stroke-linecap: round; }

/* The 3 AM label, with "Do pending now" level with it on the right. */
/* As tall with the key as without it, so nothing under it moves when it comes or goes. Without
   it the label sits at the band's foot, as near its row as every other label; with it, level with it. */
.night-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: 8px; }
.night-head.with-key { align-items: center; }
.night-head .pane-sec-label { margin: 0 0 0 2px; min-width: 0; }
.night-now {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px 0 12px;
  border-radius: 22px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.night-now > svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 40; stroke-linecap: round; }
.night-now:disabled { cursor: default; }
.night-now .spin { flex: none; width: 17px; height: 17px; }
.night-now-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent, #fff); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* The row on the home. */
.night-row {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); cursor: pointer;
}
.night-row-words { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.night-row-title { font-size: 15.5px; font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
.night-row-sub { font-size: 13.5px; color: var(--ink-muted); margin-top: 1px; }
.night-row-sub.live { color: var(--accent); }
.night-row-go { flex: none; display: inline-flex; color: var(--ink-faint); }
.night-row-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 44; }

/* The head: the coin, the date (a tap lists every night), ‹ ›. */
/* Level with the box and the cards (.work-band-biz reaches 6px past them for its + button). */
.night-band { gap: 6px; margin-right: 0; }
.night-who {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.night-title { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ink); overflow-wrap: break-word; }
.night-title-end { white-space: nowrap; }
.night-title-caret { display: inline-block; vertical-align: middle; margin-left: 4px; line-height: 0; color: var(--ink-muted); }
.night-title-caret svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 44; }
.night-step {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.night-step svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 44; }
.night-step:disabled { opacity: 0.3; }

/* The chat. */
.night-chat { display: flex; flex-direction: column; padding: 0 0 28px; min-width: 0; }
.night-stamp { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-muted); margin: 6px 0 4px; }
.night-stamp.end { margin-top: 14px; }
.night-page {
  align-self: center; max-width: 90%; margin: 16px 0 8px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--ink-muted); text-align: center;
}
.night-page b { color: var(--ink); font-weight: 700; }
.night-chat .pane-msg { margin-top: 6px; }
.night-chat .pane-msg.tail { margin-bottom: 0; }
.night-reply { margin-bottom: 10px; }
.night-meta { margin: 3px 6px 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.night-reply.quiet .pane-bubble { background: none; border-color: transparent; color: var(--ink-muted); padding-left: 4px; padding-right: 4px; }
.night-kept { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; color: var(--pane-needs); margin-bottom: 2px; }
.night-open {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0 16px;
  border-radius: 22px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.night-open svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 32; }

/* Every night, in its sheet. */
.night-list { padding: 0 16px 12px; }
.night-list-head { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.night-list-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 0;
  border: 0; border-top: 1px solid var(--border); background: none; color: inherit; font: inherit; cursor: pointer;
}
.night-list-row:first-of-type { border-top: 0; }
.night-list-tick { flex: none; display: inline-flex; color: var(--accent); }
.night-list-tick svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 44; }