/* Moving between days — increment J's rules (NEXT-PLAN §5 J).
 *
 * Its own stylesheet: day.css and capture.css take no new rules (the wave's
 * ground rules), so the arrows, the foot that stands where the dock was on
 * any day but today, a past day's read-only close and a day to come's
 * read-only strip are styled here. Every colour comes from tokens.css; light
 * and dark are one definition; every target is 44 px (--touch).
 */

/* ------------------------------------------------------- the swipe surface
 *
 * The browser keeps the vertical scroll and the pinch; a sideways finger is
 * left to day-page.js, which turns the day. A chip row scrolls sideways on
 * its own: it is its own scroll container, so this does not reach it. */

#today {
  touch-action: pan-y pinch-zoom;
}

/* ------------------------------------------------------- ‹ date ›, row 1 */

.day__nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* A 44 px target either side of the date, drawn as a quiet glyph: the date
 * stays the row's one strong thing (MOCKUP.html's header). A glyph is a
 * third of its target, so each target reaches over the date's side bearing
 * and ‹ into the page's gutter — raised above the date, so the overlap is
 * the arrow's to tap — which keeps `‹ Wed 30 Sep ›  ₹2,180 · Business ▾` on
 * one row at 360 px. */
.day__step {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--touch);
  min-height: var(--touch);
  color: var(--ink-muted);
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

#day-prev {
  margin: 0 calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-3));
}

#day-next {
  margin-left: calc(-1 * var(--space-2));
}

.day__step:hover {
  color: var(--accent);
}

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

/* ------------------------------------- a past day's close, read-only (N12) */

.day__closed {
  margin: 0;
  color: var(--ink-muted);
  font-weight: 500;
}

/* --------------------------------------- the foot on any day but today */

/* Where the dock was, and the same shape: sticky on the tab bar, the card's
 * surface and its top corners — so the day reads to the same foot, and the
 * one way back to writing is in the thumb's reach. */
.day__back:not([hidden]) {
  display: flex;
}

.day__back {
  position: sticky;
  bottom: var(--tabs-h);
  z-index: 2;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-dock);
}

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

.day__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ------------------------------ a day to come: its to-dos, read-only */

/* No tick and no Tomorrow — nothing to tap, so no 44 px row and no box that
 * would look like one: the row is its words and, for a payment, its amount. */
.planned__row--ahead {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  padding: var(--space-1) 0;
}

.planned__row--ahead .planned__text,
.planned__row--ahead .planned__amount {
  padding-top: 0;
}

/* ------------------------------------- a private row on the amber strip
 *
 * veil.js's `Private item — tap to show` reads in the strip's own orange
 * ink, today's and a day to come's alike: cards.css's --accent green is
 * 3.76:1 on the dark amber (J's fixer round 1, finding 1); --warn-ink is
 * 7.0:1 dark and 4.9:1 light — search.css's rule for its amber cards. */
#planned .veil__show {
  color: var(--warn-ink);
}

/* ======================================================================
 * Increment P — plan ahead (2026-10-13: "when I go to Saturday ... there is
 * no provision to record a meeting"). A day to come's own plans can be
 * changed and removed where they are listed; the compose, `Plan for Sat 17
 * Oct`, stands in the dock's place; and a past day's foot gains one button.
 * Here, after J's rules for the same two kinds of day, which these extend.
 * Every colour is a token; nothing is under 12 px; every control is 44 px.
 * ====================================================================== */

/* ------------------------------- a day to come: the owner's own plans */

/* J's read-only row had nothing to tap and so no 44 px line. A plan's row
 * has two controls — its words, the button that hands it to the compose, and
 * Remove — so it is a whole row again, laid from its top like today's: a
 * long plan wraps under its own first line, never under Remove. */
.planned__row--plan {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: var(--touch);
  padding: 0;
}

.planned__row--plan .planned__text {
  padding-top: calc((var(--touch) - 1lh) / 2);
  padding-bottom: calc((var(--touch) - 1lh) / 2);
}

/* A PRIVATE plan's `Private item — tap to show` (veil.js) is the only way to
 * its Change button, so here it is a whole 44 px control in its own box.
 * Everywhere else the button is one line of text, 23 px tall, whose 44 px tap
 * area is a positioned ::after (cards.css): a thumb found it — measured, top
 * and bottom of the row — but the box did not say so, to a ruler or to a focus
 * ring (review of P, round 1). The box is made the row's height and pulled
 * back by the same amount above and below, so the line it stands on, and the
 * row, are no taller: 44 px, as every other plan's. */
.planned__row--plan .veil__show {
  min-height: var(--touch);
  margin-block: calc((1lh - var(--touch)) / 2);
}

.planned__row--plan .veil__show::after {
  content: none;
}

/* The box now fills the row: its ring goes inside, as Remove's does. */
.planned__row--plan .veil__show:focus-visible {
  outline-offset: -2px;
}

/* Remove: "Tomorrow"'s own shape and quiet ink (planned.css .planned__push) —
 * the row's words are what he came for; this is the way out of a mistake. */
.planned__remove {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.planned__remove[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
}

.planned__remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------ the compose on a day to come */

/* Where the dock was, and its shape (J's foot above took the same): sticky
 * on the tab bar, the card's surface, the top corners. Three rows — its name
 * and the time, the kinds, the words and Save — so the three kinds are all in
 * view at 360 px and the words' box is as wide as the page at 320 px. */
.plan:not([hidden]) {
  display: flex;
}

.plan {
  position: sticky;
  bottom: var(--tabs-h);
  z-index: 2;
  margin-top: auto;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-dock);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch);
}

.plan__title {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
}

/* Cancel while a plan is being changed, and — on the desk — Back to today:
 * one quiet text control at the end of the kinds' row, a whole 44 px tall. */
.plan__back:not([hidden]) {
  display: inline-flex;
}

.plan__back {
  flex: none;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.plan__back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The status line owns no row while it says nothing (capture.css's rule for
 * the dock's): an empty <p> would still take a flex gap. */
.plan__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.plan__note:empty,
.plan__chips:empty {
  display: none;
}

.plan__note--error {
  color: var(--danger);
  font-weight: 600;
}

.plan__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.plan__chips > .chip--choose {
  min-height: var(--touch);
}

/* The suggestions open above the fields, in the bar's own flow. */
.plan__suggest {
  max-height: min(13.75rem, 30dvh);
}

/* The kinds: ONE row that scrolls sideways and never wraps, with the fade
 * scroll-row.js asks for at a clipped edge — capture-dock.css's `.kinds`,
 * whose 1.5rem this is. The chips are a little tighter than the dock's, so
 * all three are in view from 360 px; only a 320 px phone scrolls the row. */
.plan__opts {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.plan__kinds {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.plan__kinds::-webkit-scrollbar {
  display: none;
}

.plan__kinds[data-more] {
  -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, var(--ink) calc(100% - 1.5rem), transparent);
}

.plan__kinds[data-before] {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem);
  mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem);
}

.plan__kinds[data-before][data-more] {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem, var(--ink) calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem, var(--ink) calc(100% - 1.5rem), transparent);
}

.plan__kinds > .chip {
  flex: none;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding-inline: var(--space-2);
  white-space: nowrap;
}

/* A scroller clips what is drawn outside it: the focus ring goes inside. */
.plan__kinds > .chip:focus-visible {
  outline-offset: -2px;
}

.plan__time,
.plan__box {
  min-height: var(--touch);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.plan__time {
  flex: none;
  width: 7rem;
  padding: 0 var(--space-2);
}

/* The time is the one When control's, alone (wave T, T6): its frame takes no room of its own. */
.plan__when {
  flex: none;
}

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

.plan__box {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--space-3);
}

/* The hint is longer than a phone's box: cut with an ellipsis, never mid-letter. */
.plan__box:placeholder-shown {
  text-overflow: ellipsis;
}

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

/* .btn--primary is as wide as its row everywhere else; here it stands beside the box. */
.plan__save {
  flex: none;
  width: auto;
}

/* ------------------------------ a past day: `Add a spend to this day` */

/* Below the desk the tab bar's Today is a thumb away, and the row is the
 * kinds': the link home is the desk's alone (where there are no tabs). Taken
 * off the page, not moved off it — a link merely out of sight is still a Tab
 * stop. */
@media (max-width: 1099.98px) {
  .plan .plan__back--home {
    display: none;
  }
}

/* A row of its own under the note and Back to today, the foot's full width:
 * a spend is the one thing still added to a day gone by (day-spend.js). */
.day__spend {
  flex: 1 0 100%;
}