/* The day page's sheets on #day-sheet: the tick's one question (C2), the
 * chase's Next chase row (C3) and Close day (D).
 *
 * Moved out of day.css in wave M (increment D), rule for rule and in the same
 * order, when that file stood at 778 of HARD RULE 8's 800 lines. Linked
 * after day.css and planned.css and before cards.css, where these rules
 * stood: photo.css and the keypad use `.sheet__picks`, `.sheet__choices` and
 * `.sheet__hint` from here, and sheet.css (the frame) comes before all of
 * them. Every colour comes from tokens.css. */

/* ------------------------------------------ the tick's sheet (C2, §5 C2)
 *
 * #day-sheet reuses capture.css's .sheet, .sheet__card, .sheet__head and
 * .sheet__title; only its question and its stack of answers are new. */

.sheet__question {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
}

.sheet__choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sheet__choice {
  width: 100%;
}

/* ------------------------------ the chase's Next chase row (C3, §5 C3)
 *
 * `Next chase:` and its four toggles, none pressed, drawn under the title —
 * the answers below wait for one (day-sheet.js rule 6), so the next chase is
 * decided first. A chip is capture.css's `.chip` at the full 44px target;
 * pressed, it fills in the structural green, as the kind row's chosen chip
 * does. The hint under the row keeps its line once a chip is pressed and
 * says the day instead, so the answers never move under the thumb. */

.sheet__picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.sheet__pick-label {
  margin-right: var(--space-1);
  color: var(--ink-muted);
  font-weight: 600;
}

.sheet__pick {
  min-height: var(--touch);
  padding: 0 var(--space-3);
  font-size: var(--text-base);
}

.sheet__pick[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.sheet__hint {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* An answer waiting for a chip: aria-disabled, never `disabled` — it stays a
 * Tab stop, announced as unavailable — drawn quiet and with no hover; the tap
 * is refused in day-sheet.js. */
.sheet__choice[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.sheet__choice[aria-disabled="true"]:hover {
  border-color: var(--border);
}

.sheet__choice.btn--primary[aria-disabled="true"]:hover {
  border-color: var(--accent);
}

/* ------------------------------------------ Close day (D, DAY-PAGE-PLAN §7)
 *
 * The evening row's one button, #day-close: the orange emphasis while the
 * day is open — outlined, never filled, so ₹ stays the one filled cell on the
 * page — and the quiet muted outline once it reads `Closed 21:40`. */

.day__close {
  border-color: var(--emphasis);
  color: var(--warn-ink);
}

.day__close:hover:not(:disabled) {
  border-color: var(--emphasis-edge);
}

.day__close--closed {
  border-color: var(--border);
  color: var(--ink-muted);
  font-weight: 500;
}

.day__close--closed:hover:not(:disabled) {
  border-color: var(--accent);
}

/* The sheet, `.sheet__card.close` on #day-sheet (day-sheet.js rule 7). It is
 * tall — lists, a box, a select per chased line, a checkbox per open to-do —
 * so it is the plan's BOTTOM sheet (PLAN-v2 §3.2 item 4) and never taller
 * than the screen: the title and the two answers keep their places and the
 * body between them scrolls, so Close day and Not now stay in reach with the
 * keyboard up or a long plan typed. (E's review found a tall card centred on
 * a 360 x 780 phone with its answers pushed off it.) On a desk it is centred,
 * as every sheet is. */

.sheet__card.close {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  margin-block: auto 0;
  padding: 0;
  overflow: hidden;
}

/* The card takes the first focus (rule 7): a ring inside its edge, the
 * strip's green, rather than the browser's around the whole sheet. */
.sheet__card.close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.close .sheet__head {
  flex: none;
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.close__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* Side by side: one row of answers leaves the body 52 px more of a phone. */
.close .sheet__choices {
  flex: none;
  flex-direction: row;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.close .sheet__choice {
  flex: 1 1 0;
  width: auto;
}

.close__section + .close__section {
  margin-top: var(--space-4);
}

.close__heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 700;
}

.close__list {
  margin: 0;
  padding-left: 1.1rem;
}

.close__item {
  overflow-wrap: anywhere;
}

.close__item + .close__item {
  margin-top: var(--space-1);
}

.close__empty {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

.close__field {
  margin-bottom: var(--space-2);
}

/* The box grows with the plan (Chromium: the phone's Chrome, Edge and
 * PSDiary.exe's WebView2), so an evening's six lines never scroll inside a
 * body that scrolls; elsewhere it keeps its three rows and a handle. */
.close__box {
  display: block;
  min-height: calc(var(--touch) * 2);
  resize: vertical;
  field-sizing: content;
}

/* A typed line that names a party owing something: its words, then
 * `Chase of:` and, on a row of its own, the select at the card's full width —
 * two quotes from one party differ only at the end of their words, and a
 * select beside its label showed neither end nor due date (fidelity review
 * of D, M2). In the strip's wash, since a chase is what the line becomes. */
.close__chases {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.close__chase {
  padding: var(--space-2) var(--space-3);
  background: var(--tint-warn);
  border-left: 3px solid var(--emphasis);
  border-radius: var(--radius-sm);
}

.close__line {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.close__chase-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.close__chase-label {
  flex: none;
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

/* A native select, as the forms' (capture.css): a wheel on a phone. */
.close__select {
  width: 100%;
  min-width: 0;
  appearance: auto;
}

/* Under the select, the chosen item's words in full: a closed select cuts
 * them at the row's width, and the part that tells two items apart, or the
 * due date, is often at their end. */
.close__chosen {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.close__picks {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.close__subhead {
  margin: 0 0 var(--space-1);
  padding: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

/* The whole row is the checkbox's label, so the target is 44 px tall. */
.close__pick {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  cursor: pointer;
}

.close__check {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}

.close__pick-text {
  overflow-wrap: anywhere;
}

/* The line above the answers (day-sheet.js `foot`): how many typed lines
 * become chases, in the chase rows' wash, never scrolled away from the
 * button that files them. Hidden when no line does. */
.close__summary {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--tint-warn);
  color: var(--warn-ink);
  font-size: var(--text-md);
  font-weight: 600;
}

.close__summary:not([hidden]) + .sheet__choices {
  border-top: 0;
}

.close__error {
  margin: var(--space-3) 0 0;
  color: var(--danger);
  font-size: var(--text-md);
  font-weight: 600;
}

@media (min-width: 1100px) {
  .sheet__card.close {
    margin-block: auto;
  }
}

/* ------------------------------ the one When control (wave T, T6)
 *
 * when-control.js: the quick days in a row of chips, Other date… whose
 * second line is the native date input, an optional time, and the date's own
 * button. Its hosts keep their own class names (the row sheet's are
 * pending.css's); these are the parts a host left unnamed, and the root
 * every host keeps. A pressed day — a chosen control's — wears the accent,
 * as Close day's answers do. */

.when {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.when__label {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

.when__modes,
.when__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.when__mode,
.when__day {
  flex: 1 1 6rem;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: var(--touch);
  padding-block: var(--space-1);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.25;
  text-align: center;
}

.when__mode[aria-pressed="true"],
.when__day[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

/* Never the tap's target: a tap on the date under a day is the day's. */
.when__date {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 400;
  pointer-events: none;
}

.when__day[aria-pressed="true"] .when__date {
  color: var(--accent-ink);
}

.when__other {
  cursor: pointer;
}

.when__other:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.when__input {
  width: 100%;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: center;
}

.when__input:focus-visible {
  outline: none;
}

.when__confirm:not([hidden]) {
  width: 100%;
}

.when__time-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.when__time-label {
  flex: none;
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

.when__time {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 10rem;
  min-height: var(--touch);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.when__time:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}