/* /saved — My Week / Saved Plans. The phone dashboard's visual system: Inter
   only, deep green, crisp near-white, very pale sage / cool blue / grey-green,
   hairlines, restrained rounding, nothing cream or sand. Phone first; on a
   wide screen the same column sits centred. The shared chrome (.lfhx-*,
   .mobile-bottom-nav) is nav-footer.css's; footer-themes.css carries the
   header modifier this page wears. */
body.saved-page {
  --sv-green: #356382;
  --sv-ink: #22312b;
  --sv-muted: #55635c;
  --sv-white: #fbfcfb;
  --sv-ground: #e6eef3;       /* the homepage This weekend card's pale cool blue */
  --sv-line: #cfdbe3;         /* hairline, a blue-grey on the blue ground */
  --sv-sage: #e4eee7;
  --sv-cool: #dbe7ee;         /* a step deeper, for the tinted controls */
  --sv-greygreen: #ebf0ec;
  --sv-slate: #35576b;        /* small labels and the today marker */
  margin: 0;
  background: var(--sv-ground);
  color: var(--sv-ink);
  font-family: "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.saved-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sv-page { max-width: 680px; margin: 0 auto; padding: 0 16px 32px; }

/* ---------- heading ---------- */
.sv-head { padding: 18px 0 14px; }
.sv-head h1 { margin: 0; font: 600 26px/1.2 "Inter", Arial, sans-serif; letter-spacing: -.02em; color: var(--sv-ink); }
.sv-head p { margin: 4px 0 0; font: 400 14.5px/1.45 "Inter", Arial, sans-serif; color: var(--sv-muted); }

/* ---------- the two views ---------- */
.sv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-ground, #f2f5f3); }
.sv-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sv-muted); font: 600 14px/1 "Inter", Arial, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Active: white on the grey-green track, lettered in green; no solid fill. */
.sv-tab.is-active { background: var(--sv-white); color: var(--sv-ink); box-shadow: 0 1px 2px rgba(34, 49, 43, .08); }
.sv-tab-n { display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 6px; background: var(--sv-cool); color: var(--sv-ink); font: 600 11.5px/1.3 "Inter", Arial, sans-serif; }
.sv-tab.is-active .sv-tab-n { background: var(--sv-cool); color: var(--sv-ink); }
.sv-tab-n[hidden] { display: none; }

.sv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 12px 0 6px; }
.sv-range { margin: 0; font: 400 13.5px/1.4 "Inter", Arial, sans-serif; color: var(--sv-muted); }
.sv-fullweek { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: #fff; color: var(--sv-green); font: 600 13px/1 "Inter", Arial, sans-serif; cursor: pointer; }
.sv-fullweek[aria-pressed="true"] { background: var(--sv-cool); border-color: var(--sv-cool); }
.sv-fullweek[hidden] { display: none; }

.sv-status { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-white); font: 400 14px/1.5 "Inter", Arial, sans-serif; color: var(--sv-muted); }
.sv-status.is-error { color: var(--sv-ink); }
.sv-status[hidden] { display: none; }

/* ---------- days and rows ---------- */
.sv-list { margin: 0; padding: 0; }
.sv-group { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid #cfdbe3; }
.sv-group:first-child { border-top: 0; padding-top: 6px; }
.sv-badge { align-self: start; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; box-sizing: border-box; min-height: 58px; padding: 9px 4px 8px; border: 1px solid var(--sv-line); border-radius: 12px; background: #fff; text-align: center; }
.sv-badge-dow { font: 600 11px/1.2 "Inter", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-muted); }
.sv-badge-date { font: 600 13px/1.25 "Inter", Arial, sans-serif; text-transform: uppercase; letter-spacing: .03em; color: var(--sv-ink); white-space: nowrap; }
.sv-badge-tag { margin-top: 4px; font: 600 10px/1.2 "Inter", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-slate); }
.sv-group.is-today .sv-badge { background: var(--sv-slate); border-color: var(--sv-slate); }
.sv-group.is-today .sv-badge-dow, .sv-group.is-today .sv-badge-date, .sv-group.is-today .sv-badge-tag { color: #fff; }
.sv-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; min-width: 0; border: 1px solid var(--sv-line); border-radius: 12px; background: #fff; }
.sv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 6px 11px 12px; color: var(--sv-ink); text-decoration: none; }
.sv-title { font: 600 15px/1.3 "Inter", Arial, sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.sv-meta { font: 400 13px/1.35 "Inter", Arial, sans-serif; color: var(--sv-muted); }
.sv-repeat { color: var(--sv-slate); font-weight: 600; }
.sv-save { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; min-height: 56px; border: 0; font-family: "Inter", Arial, sans-serif; border-left: 1px solid var(--sv-line); border-radius: 0 12px 12px 0; background: var(--sv-cool); color: var(--sv-green); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-save svg { fill: currentColor; }
.sv-save-text { font: 600 10px/1 "Inter", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- empty state ---------- */
.sv-empty { margin: 14px 0 0; padding: 22px 18px 20px; border: 1px solid var(--sv-line); border-radius: 14px; background: var(--sv-white); text-align: center; }
.sv-empty[hidden] { display: none; }
.sv-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--sv-cool); color: var(--sv-green); }
.sv-empty h2 { margin: 0; font: 600 18px/1.3 "Inter", Arial, sans-serif; letter-spacing: -.015em; color: var(--sv-ink); }
.sv-empty p { margin: 6px auto 0; max-width: 34ch; font: 400 14px/1.5 "Inter", Arial, sans-serif; color: var(--sv-muted); }
.sv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 14px; padding: 0 22px; border-radius: 12px; background: var(--sv-green); color: #fff; font: 600 15px/1 "Inter", Arial, sans-serif; text-decoration: none; }

/* ---------- toast (removed / undo) ---------- */
.sv-toast { position: sticky; bottom: 76px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 10px 12px 10px 14px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-ink); color: #fff; font: 500 13.5px/1.4 "Inter", Arial, sans-serif; box-shadow: 0 6px 20px rgba(34, 49, 43, .18); }
.sv-toast[hidden] { display: none; }
.sv-toast-undo { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: transparent; color: #fff; font: 600 13px/1 "Inter", Arial, sans-serif; cursor: pointer; }

/* ---------- Premier Sponsors (kept for the homepage's shared list; not mounted on this page since the owner made sponsorship homepage-only, 17 Sept 2026) ---------- */
.sv-sponsors { margin: 26px 0 0; padding: 12px 14px 14px; border: 1px solid var(--sv-line); border-radius: 15px; background: #fff; }
.sv-sponsors[hidden] { display: none; }
.sv-sp-label { margin: 0 0 8px; text-align: center; font: 600 11px/1.5 "Inter", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--sv-muted); }
.sv-sp-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv-sp-logo { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 66px; padding: 9px 12px; border: 1px solid var(--sv-line); border-radius: 10px; background: #fff; text-decoration: none; }
.sv-sp-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 46px; object-fit: contain; }
.sv-sp-name { font: 600 14px/1.3 "Inter", Arial, sans-serif; color: var(--sv-ink); text-align: center; }

/* ---------- links back ---------- */
.sv-foot { margin: 18px 0 0; text-align: center; font: 400 13.5px/1.5 "Inter", Arial, sans-serif; color: var(--sv-muted); }
.sv-foot a { color: var(--sv-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

body.saved-page :is(a, button):focus-visible { outline: 3px solid var(--sv-green); outline-offset: 2px; }

@media (min-width: 701px) {
  .sv-page { padding-top: 12px; }
  .sv-head { padding: 26px 0 18px; }
  .sv-head h1 { font-size: 32px; }
  .sv-group { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .sv-title { font-size: 16px; }
}

/* ---------- wide desktop ----------
   Same fix as /libraries: .sv-page was 680px at every width, so the week sat
   in a narrow ribbon on a wide screen. It widens, but only to 940px -- these
   are full-width list rows, and a row stretched to 1600px puts the title and
   its time at opposite ends of the screen, which is harder to scan, not
   easier. The date rail grows with it so the badge is not marooned. */
@media (min-width: 1040px) {
  .sv-page { max-width: 940px; }
  .sv-group { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; }
}