/* The Week review — increment W15 (PLAN-v2 §3.8 "Extra pages"; §10 v1.0).
 *
 * Phone-first, in the MOCKUP's own language: one stacked column of compact
 * day rows, the week's totals, then the "Still pending?" sweep; nothing
 * scrolls sideways at 390px, and below 1100px running text keeps to
 * --measure (CLAUDE.md conventions). The desk needs no second pane — the
 * page is a review, not a table — so it simply stays readable at 48rem.
 *
 * Every colour is a token (tokens.css), so light and dark both hold; 44px
 * targets via --touch on the week turns, the day links and the sweep's
 * three controls. */

/* The header link the integrator may add beside Ledger, a desktop page's
 * like the board's (ledger.css .shell__link--ledger says why; the phone
 * reaches the page through the More menu instead). */
.shell__link--week {
  display: none;
}

@media (min-width: 1100px) {
  .shell__link--week {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------- the bar */

.week__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.week__name {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.week__turn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.week__turn:hover {
  background: var(--surface-sunken);
}

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

/* ------------------------------------------------------ On This Day card */

.week__otd {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ps-lime);
  border-radius: var(--radius);
  background: var(--surface);
}

.week__otd-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.week__otd-day {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.week__otd-line {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  max-width: var(--measure);
}

/* --------------------------------------------------------- the day rows */

.week__days {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.week__day {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.week__day + .week__day {
  border-top: 1px solid var(--border);
}

.week__day--today {
  background: var(--surface-sunken);
}

.week__day-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 7.5rem;
  min-height: var(--touch);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

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

.week__day-body {
  flex: 1;
  min-width: 0;
}

.week__day-counts {
  margin: 0;
  font-size: var(--text-md);
}

.week__day-spend,
.week__day-quiet {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------ the totals */

.week__totals {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.week__totals-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.week__totals-counts {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
}

.week__totals-spend {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  color: var(--ink-muted);
}

.week__empty {
  margin: var(--space-3) 0;
  color: var(--ink-faint);
}

/* ------------------------------------------------- the "Still pending?" sweep */

.week__sweep {
  margin-top: var(--space-6);
}

.week__sweep-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.week__sweep-title {
  margin: 0;
  font-size: 1rem;
}

.week__sweep-count {
  font-size: var(--text-sm);
  color: var(--warn-ink);
  font-weight: 700;
}

.week__sweep-lede,
.week__sweep-empty {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.week__items {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.week__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.week__item + .week__item {
  border-top: 1px solid var(--border);
}

.week__item--held {
  opacity: 0.6;
}

.week__item-words {
  flex: 1 1 14rem;
  min-width: 0;
}

.week__item-l1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-base);
}

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

.week__item-amount {
  margin-left: auto;
  white-space: nowrap;
}

.week__item-l2 {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.week__clause--late {
  color: var(--warn-ink);
  font-weight: 600;
}

/* The three controls: 44px each, wrapping under the words on a 360px phone. */
.week__item-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.week__act {
  min-height: var(--touch);
}

/* The held row's controls look held, as the strip's do. */
.week__act[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

/* The desk: the review stays one readable column. */
@media (min-width: 1100px) {
  #week-body {
    max-width: 48rem;
  }
}

/* Increment P: what is planned for a day still to come — the Planned strip's
 * own orange ink (5.57:1 on the surface, 7.0:1 in the dark), one line each. */
.week__day-plan {
  margin: 0;
  color: var(--warn-ink);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}