/* good_night: the settings switch, the time grid, the preview sheet and the Now line. Solid content only
 * (no glass), the shell's tokens, scoped under .good-night / .gn-*. */

.section-body.good-night > .group:first-child { margin-top: 0; }   /* the settings title is right above */

/* the on/off switch (a row with role=switch: the whole row is the target) */
.gn-switch-row { padding-right: 16px; }
.gn-switch {
  position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; margin-left: 12px;
  background: rgb(var(--text-rgb) / 0.16); transition: background .2s ease;
}
.gn-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .2); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.gn-switch-row[aria-checked="true"] .gn-switch { background: var(--accent); }
.gn-switch-row[aria-checked="true"] .gn-switch::after { transform: translateX(20px); }

/* the time grid in its sheet: 4 per row, 2 at 320 px still fit */
.gn-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gn-times .chip { justify-content: center; min-height: 44px; font-variant-numeric: tabular-nums; }
.gn-hint { margin: 12px 2px 0; font-size: 13px; line-height: 1.35; color: var(--hint); }

/* the preview sheet */
.gn-preview { display: grid; gap: 10px; }
.gn-day { margin: 0; font-size: 13px; color: var(--hint); }
.gn-status { margin: 0; font-size: 15px; line-height: 1.35; color: var(--text); }
.gn-status.warn { display: flex; gap: 8px; align-items: flex-start; }   /* red is for destructive actions only */
.gn-status.warn .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--hint); }
.gn-foot { margin: 2px 2px 0; font-size: 12px; line-height: 1.35; color: var(--hint); }
.gn-msg {
  padding: 12px 14px; border-radius: 16px 16px 16px 6px; background: var(--bg2); color: var(--text);
  font-size: 15px; line-height: 1.4; overflow-wrap: anywhere;
}
.gn-msg > :first-child { margin-top: 0; }
.gn-msg > :last-child { margin-bottom: 0; }
.gn-msg h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.gn-msg p { margin: 0 0 6px; }
.gn-msg ul, .gn-msg ol { margin: 0 0 6px; padding-left: 20px; }
.gn-msg li { margin: 2px 0; }
.gn-msg time { font-variant-numeric: tabular-nums; color: var(--accent); }
.gn-msg details { margin: 6px 0; }
.gn-msg summary { cursor: pointer; color: var(--accent); min-height: 32px; display: list-item; }
.gn-msg table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 14px; }
.gn-msg td { padding: 4px 6px 4px 0; vertical-align: middle; border-top: 1px solid var(--sep); }
.gn-msg td.gn-end { text-align: right; padding-right: 0; color: var(--hint); }
.gn-msg footer { margin-top: 8px; font-size: 13px; color: var(--hint); }
.gn-quiet { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--bg2); }
.gn-quiet .ico { flex: none; width: 22px; height: 22px; color: var(--hint); }
.gn-quiet p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text); }

/* the Now line: small, quiet, one tap to the preview */
.gn-tonight {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 4px;
  border: 0; background: none; color: var(--hint); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.gn-tonight .ico { flex: none; width: 18px; height: 18px; }
.gn-tonight .ico:last-child { width: 14px; height: 14px; opacity: .7; }
.gn-tonight-text { flex: 1; min-width: 0; }
.gn-tonight:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .gn-switch, .gn-switch::after { transition: none; }
}
@media (prefers-contrast: more) {
  .gn-switch { box-shadow: inset 0 0 0 1px var(--text); }
  .gn-msg, .gn-quiet { box-shadow: inset 0 0 0 1px var(--sep); }
  .gn-tonight { color: var(--text); }
}