/* ============================================================================
 * preview-theme.css — the "looks like the marketing site" skin for a preview.
 *
 * Loaded AFTER the compiled Tailwind app.css, only in preview instances, so it
 * overrides the shell without the live CHT CRM ever seeing it. The palette and
 * the sidebar are lifted straight from catalinahome.tech's "see it working"
 * mockup (.ct-app-* in site.css): deep saguaro sidebar, cream nav, a calm paper
 * workspace with a single search + a page head. If this file is absent, the
 * layout falls back to the original top-nav shell, so nothing here can leak.
 *
 * Everything is namespaced under .pv-* / body.pv-body so it can only touch the
 * chrome this theme adds, never the content templates' own Tailwind classes.
 * ========================================================================== */

:root {
  --pv-saguaro:      #2f4536;
  --pv-saguaro-700:  #233529;
  --pv-sage:         #8aa17c;
  --pv-sage-deep:    #5f7b59;
  --pv-cream:        #fffcf4;
  --pv-sand:         #f4eee2;
  --pv-sand-deep:    #ece4d2;
  --pv-paper:        #fbf7ee;
  --pv-ink:          #25302a;
  --pv-ink-soft:     #4a554f;
  --pv-ink-mute:     #66716b; /* darkened to clear WCAG AA at small sizes */
  --pv-line:         #ddd3bd;
  --pv-line-soft:    #e8e0cd;
  --pv-gold:         #c9942b;
  --pv-clay:         #b85a35;
  --pv-serif:        var(--font-display, "Source Serif 4", Georgia, "Times New Roman", serif);
}

body.pv-body { background: var(--pv-sand); }

/* ── Touch targets: text-style buttons and the reminder checkbox get a real
   hit area, since the smallest controls are the most tapped. */
body.pv-body button.text-link { min-height: 34px; padding: 6px 8px !important; display: inline-flex; align-items: center; }
body.pv-body .pv-rem-check { width: 30px; height: 30px; font-size: 18px; }
body.pv-body .pv-room-chip { padding: 7px 14px; }
body.pv-body .btn-ghost.text-xs, body.pv-body .btn.text-xs { min-height: 34px; }

/* ── Shell: sidebar + workspace ─────────────────────────────────────────── */
.pv-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.pv-side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--pv-saguaro); color: var(--pv-cream);
  display: flex; flex-direction: column;
  padding: 16px 12px; border-right: 1px solid var(--pv-saguaro-700);
}

.pv-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 16px; text-decoration: none;
  font-family: var(--pv-serif); font-weight: 600; font-size: 16px;
  color: var(--pv-cream); line-height: 1.12; letter-spacing: -0.01em;
}
.pv-brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(150deg, var(--pv-gold), var(--pv-clay));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.pv-brand em { font-style: normal; }

.pv-nav {
  display: flex; flex-direction: column; gap: 1px; flex: 1;
  overflow-y: auto; margin: 0 -4px; padding: 0 4px;
}
.pv-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  color: rgba(255, 252, 244, 0.74); font-size: 0.925rem; font-weight: 500; /* rem so Settings > Text size scales it */
  white-space: nowrap;
}
.pv-nav a:hover { background: rgba(255, 252, 244, 0.08); color: var(--pv-cream); }
.pv-nav a.is-active { background: rgba(255, 252, 244, 0.15); color: var(--pv-cream); font-weight: 600; }
.pv-nav a svg { width: 16px; height: 16px; flex: none; opacity: 0.92; }
.pv-nav a.pv-child { padding-left: 12px; font-size: 0.875rem; color: rgba(255, 252, 244, 0.66); }
/* Larger text sizes widen the sidebar a little so labels stay on one line. */
html.pv-text-large .pv-shell { grid-template-columns: 250px 1fr; }
html.pv-text-xlarge .pv-shell { grid-template-columns: 268px 1fr; }

.pv-nav-label {
  padding: 15px 10px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255, 252, 244, 0.42);
}

.pv-user {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid rgba(255, 252, 244, 0.14);
  display: flex; align-items: center; gap: 10px;
}
.pv-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--pv-sage); color: var(--pv-saguaro);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.pv-user-name { font-size: 12.5px; font-weight: 600; color: var(--pv-cream); line-height: 1.2; min-width: 0; }
.pv-user-name em {
  display: block; font-style: normal; font-weight: 400; font-size: 11px;
  color: rgba(255, 252, 244, 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.pv-signout {
  margin-left: auto; color: rgba(255, 252, 244, 0.62);
  background: none; border: 0; cursor: pointer; padding: 5px; border-radius: 6px;
  display: inline-flex;
}
.pv-signout:hover { color: var(--pv-cream); background: rgba(255, 252, 244, 0.08); }
.pv-signout svg { width: 17px; height: 17px; }

/* ── Workspace ──────────────────────────────────────────────────────────── */
.pv-main { min-width: 0; display: flex; flex-direction: column; background: var(--pv-paper); }

.pv-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  /* Opaque on purpose: a translucent blur lets the report show through the
     bar while scrolling, which reads as broken on a tablet. */
  background: var(--pv-paper);
  border-bottom: 1px solid var(--pv-line-soft);
}
.pv-search { position: relative; flex: 1; max-width: 380px; display: flex; align-items: center; }
.pv-search svg { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--pv-ink-mute); pointer-events: none; }
.pv-search input {
  width: 100%; font-size: 13px; padding: 8px 14px 8px 34px;
  border-radius: 999px; border: 1px solid var(--pv-line);
  background: var(--pv-cream); color: var(--pv-ink);
}
.pv-search input::placeholder { color: var(--pv-ink-mute); }
.pv-search input:focus { outline: none; border-color: var(--pv-sage-deep); box-shadow: 0 0 0 3px rgba(95, 123, 89, 0.15); }

/* iOS home-screen app: the status bar overlays the page, so the sticky top
   bar and the drawer start below it (env() is 0 everywhere else). */
.pv-top { padding-top: calc(11px + env(safe-area-inset-top, 0px)); }
.pv-side { padding-top: env(safe-area-inset-top, 0px); }
.pv-backdrop { top: 0; }
.pv-top-spacer { margin-left: auto; }
.pv-top-who { font-size: 13px; color: var(--pv-ink-soft); white-space: nowrap; }

.pv-content { padding: 24px 22px 40px; max-width: 1200px; width: 100%; margin: 0 auto; }

/* ── Mobile: sidebar becomes an off-canvas drawer ───────────────────────── */
.pv-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: -6px 0 -6px -6px;
  border: 0; background: none; color: var(--pv-ink-soft); cursor: pointer; border-radius: 8px;
}
.pv-hamburger:hover { background: var(--pv-sand-deep); }
.pv-hamburger svg { width: 22px; height: 22px; }
.pv-backdrop { display: none; }
.pv-backdrop[hidden] { display: none !important; } /* the drawer script toggles this */

@media (max-width: 900px) {
  .pv-shell { grid-template-columns: 1fr; }
  .pv-side {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: 256px; max-width: 84vw;
    transform: translateX(-100%); transition: transform 0.16s ease;
    box-shadow: 0 20px 60px -20px rgba(35, 53, 41, 0.6);
  }
  .pv-side.is-open { transform: translateX(0); }
  .pv-hamburger { display: inline-flex; }
  .pv-backdrop { display: block; position: fixed; inset: 0; background: rgba(37, 48, 42, 0.5); z-index: 55; }
  .pv-content { padding: 18px 16px 40px; }
}

/* ── A few gentle content-side softenings, safely scoped ─────────────────── */
.pv-main .btn-primary,
.pv-main .btn.btn-primary { border-radius: 999px; }

/* ── Property overview: card grid ───────────────────────────────────────── */
.pv-prop-intro { margin-bottom: 22px; }
.pv-prop-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pv-sage-deep); margin-bottom: 8px;
}
.pv-prop-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--pv-sage-deep); display: inline-block; }
.pv-prop-title { font-family: var(--pv-serif); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--pv-saguaro); letter-spacing: -0.02em; line-height: 1.05; }
.pv-prop-sub { color: var(--pv-ink-soft); font-size: 15px; margin-top: 6px; max-width: 52ch; }

.pv-prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }

.pv-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--pv-cream); border: 1px solid var(--pv-line); border-radius: 14px; overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.pv-card:hover { box-shadow: 0 18px 40px -22px rgba(47, 69, 54, 0.45); transform: translateY(-2px); border-color: var(--pv-sage); }
.pv-card-top { padding: 16px 16px 13px; }
.pv-card-name { font-family: var(--pv-serif); font-size: 19px; font-weight: 600; color: var(--pv-saguaro); letter-spacing: -0.01em; line-height: 1.15; }
.pv-card-owner { font-size: 12.5px; color: var(--pv-ink-mute); margin-top: 3px; }
.pv-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; min-height: 22px; }
.pv-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--pv-sand-deep); color: var(--pv-ink-soft); }
.pv-badge.warm { background: #f6e6cf; color: #8a5a1a; }
.pv-badge.go   { background: #e2ecdc; color: var(--pv-sage-deep); }

.pv-card-stats { display: flex; gap: 22px; padding: 4px 16px 15px; }
.pv-stat { display: flex; flex-direction: column; }
.pv-stat b { font-family: var(--pv-serif); font-size: 23px; font-weight: 600; color: var(--pv-ink); line-height: 1; }
.pv-stat span { font-size: 11px; color: var(--pv-ink-mute); margin-top: 4px; }
.pv-stat.is-due b { color: var(--pv-clay); }

.pv-card-foot {
  margin-top: auto; padding: 11px 16px; background: var(--pv-paper);
  border-top: 1px solid var(--pv-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pv-card-addr { font-size: 12px; color: var(--pv-ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-card-open { font-size: 12.5px; font-weight: 600; color: var(--pv-sage-deep); white-space: nowrap; }
.pv-card:hover .pv-card-open { color: var(--pv-saguaro); }

.pv-prop-empty { padding: 40px; text-align: center; color: var(--pv-ink-mute); border: 1px dashed var(--pv-line); border-radius: 14px; }

/* ── House-manager dashboard ────────────────────────────────────────────── */
.pv-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.pv-btn-primary {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--pv-cream);
  background: var(--pv-saguaro); border-radius: 999px; padding: 10px 18px; white-space: nowrap;
  transition: background 0.15s ease;
}
.pv-btn-primary:hover { background: var(--pv-saguaro-700); }

.pv-dash-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pv-dash-main, .pv-dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pv-panel { background: var(--pv-cream); border: 1px solid var(--pv-line); border-radius: 14px; overflow: hidden; }
.pv-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 18px 11px; }
.pv-panel-head h2 { font-family: var(--pv-serif); font-size: 17px; font-weight: 600; color: var(--pv-saguaro); margin: 0; letter-spacing: -0.01em; }
.pv-panel-head a { font-size: 12.5px; font-weight: 600; color: var(--pv-sage-deep); text-decoration: none; white-space: nowrap; }
.pv-panel-head a:hover { color: var(--pv-saguaro); }
.pv-panel-empty { padding: 4px 18px 20px; color: var(--pv-ink-mute); font-size: 14px; }

.pv-list { list-style: none; margin: 0; padding: 0 6px 6px; }
.pv-list-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; }
.pv-list-row:hover { background: var(--pv-sand); }
.pv-list li + li .pv-list-row { border-top: 1px solid var(--pv-line-soft); border-radius: 0; }
.pv-list li + li .pv-list-row:hover { border-radius: 10px; border-top-color: transparent; }
.pv-list-main { display: flex; flex-direction: column; min-width: 0; }
.pv-list-name { font-size: 14px; font-weight: 600; color: var(--pv-ink); line-height: 1.25; }
.pv-list-sub { font-size: 12px; color: var(--pv-ink-mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-list-compact .pv-list-row { padding: 8px 12px; }

.pv-due { font-size: 12px; font-weight: 700; color: var(--pv-ink-mute); white-space: nowrap; flex: none; }
.pv-due.soon { color: var(--pv-sage-deep); }
.pv-due.over { color: var(--pv-clay); }
.pv-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--pv-sand-deep); color: var(--pv-ink-soft); white-space: nowrap; flex: none; }
.pv-amount { font-size: 13.5px; font-weight: 700; color: var(--pv-ink); white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }

.pv-panel-tight .pv-panel-head { padding-bottom: 8px; }
.pv-mini-stats { display: flex; gap: 18px; padding: 2px 18px 18px; }
.pv-mini-stats .pv-stat b { font-family: var(--pv-serif); font-size: 26px; }

.pv-big-figure { padding: 2px 18px 14px; }
.pv-big-figure b { display: block; font-family: var(--pv-serif); font-size: 30px; font-weight: 600; color: var(--pv-ink); line-height: 1; letter-spacing: -0.01em; }
.pv-big-figure.is-due b { color: var(--pv-clay); }
.pv-big-figure span { font-size: 12px; color: var(--pv-ink-mute); margin-top: 5px; display: block; }

/* Money/stat figures inside tiles. The app's .h2 is display type
   (clamp 2–3rem) and blows out a third-width card once the number grows past
   four digits — this is the tile-sized replacement: big, bounded, and it
   wraps instead of escaping the box. */
.pv-figure {
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: clamp(19px, 1.2vw + 12px, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pv-saguaro, #2f4536);
  overflow-wrap: anywhere;
}
.pv-big-figure b { overflow-wrap: anywhere; font-size: clamp(22px, 1.4vw + 14px, 30px); }

/* The app's .field-input resets padding-right to .75rem, shoving the option
   text under the select's built-in arrow (drawn at right .5rem). Clear it. */
select.field-input { padding-right: 2.5rem; text-overflow: ellipsis; }

@media (max-width: 860px) {
  .pv-dash-grid { grid-template-columns: 1fr; }
  /* iPhone Safari zooms the viewport into any focused input under 16px and
     leaves it there. 16px effective size on touch screens prevents that. */
  input, select, textarea { font-size: 16px !important; }
}

/* ── Login: business-branded mark in place of the CHT logo ──────────────── */
.pv-login-mark {
  display: block; width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 16px;
  background: linear-gradient(150deg, var(--pv-gold), var(--pv-clay));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px -10px rgba(184, 90, 53, 0.5);
}

/* ── Week board (the /admin landing) ────────────────────────────────────────
   A Sunday→Saturday strip, matching the legacy system's layout. Tabs read as
   a calendar strip; today wears the gold thread. */
.pv-week { margin-top: 4px; }
.pv-week-tabs {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-bottom: 18px;
}
.pv-week-tab {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 4px 8px; cursor: pointer;
  background: var(--pv-cream); border: 1px solid var(--pv-line);
  border-radius: 10px; color: var(--pv-ink-soft); font: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.pv-week-tab:hover { background: var(--pv-paper); border-color: var(--pv-sage-deep); }
.pv-week-tab.is-selected {
  background: var(--pv-saguaro); border-color: var(--pv-saguaro);
  color: var(--pv-cream);
}
.pv-week-tab.is-today:not(.is-selected) { border-color: var(--pv-gold); }
.pv-week-tab-day {
  font-family: var(--pv-serif); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em;
}
.pv-week-tab-count { font-size: 12px; opacity: 0.75; }
.pv-week-tab-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--pv-gold); color: var(--pv-cream);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 1px 7px; border-radius: 99px; text-transform: uppercase;
}
.pv-week-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 10px;
}
.pv-week-panel-title {
  font-family: var(--pv-serif); font-size: 19px; font-weight: 600;
  color: var(--pv-ink); margin: 0;
}
.pv-week-panel-count { color: var(--pv-ink-mute); font-size: 13px; }
.pv-week-list {
  background: var(--pv-cream); border: 1px solid var(--pv-line);
  border-radius: 12px; overflow: hidden;
}
.pv-week-row {
  /* minmax guarantees the name column real width: a badge-heavy row (the
     sample house wears 7) would otherwise let the auto badge track take its
     full one-line width and collapse the 1fr name track to zero. */
  display: grid; grid-template-columns: 34px minmax(180px, 1fr) auto auto auto;
  gap: 14px; align-items: center; padding: 12px 16px;
  color: inherit; text-decoration: none; position: relative;
  border-bottom: 1px solid var(--pv-line-soft);
}
/* The whole row is the link (stretched), with a real button beside it. */
.pv-week-rowlink { position: absolute; inset: 0; z-index: 0; }
.pv-week-act { position: relative; z-index: 1; display: flex; justify-content: flex-end; min-width: 24px; }
.pv-week-btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--pv-saguaro); background: var(--pv-saguaro);
  color: var(--pv-cream); text-decoration: none; min-height: 38px; display: inline-flex; align-items: center; }
.pv-week-btn:hover { background: var(--pv-saguaro-700); }
.pv-week-btn.is-go { background: var(--pv-gold); border-color: var(--pv-gold); color: var(--pv-ink); }
.pv-week-btn.is-done { background: #dcead9; border-color: #dcead9; color: #2f6b3c; }
.pv-rail-add { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px 4px; }
.pv-week-row:last-child { border-bottom: 0; }
.pv-week-row:nth-child(even) { background: var(--pv-paper); }
.pv-week-row:hover { background: var(--pv-sand); }
.pv-week-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--pv-sand-deep); color: var(--pv-ink-soft);
  font-size: 12px; font-weight: 700;
}
.pv-week-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pv-week-name {
  font-family: var(--pv-serif); font-weight: 600; font-size: 15px;
  color: var(--pv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-week-addr {
  color: var(--pv-ink-mute); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-week-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pv-badge.gold { background: rgba(201, 148, 43, 0.14); color: #8a6415; }
.pv-week-dates { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.pv-week-date { font-size: 12px; color: var(--pv-ink-soft); white-space: nowrap; }
.pv-week-date b { font-weight: 600; color: var(--pv-ink-mute); margin-right: 4px;
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
.pv-week-open { color: var(--pv-ink-mute); }
.pv-week-empty {
  padding: 26px 16px; text-align: center; color: var(--pv-ink-mute);
  background: var(--pv-cream); border: 1px dashed var(--pv-line); border-radius: 12px;
}
.pv-week-former { margin-top: 10px; font-size: 12.5px; color: var(--pv-ink-mute); }
.pv-week-former a { color: var(--pv-sage-deep); }
@media (max-width: 860px) {
  /* Phones keep the badges (Sample, low Reserve, Pending notes ARE the point
     of the board) — only the Last/Next date column gives way. The row is a
     GRID, so the badge block must be placed explicitly on its own full-width
     second line; left to auto-placement it lands in the 24px arrow track and
     crushes the name out of the row entirely. */
  .pv-week-row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 4px; }
  .pv-week-dates { display: none; }
  .pv-week-open { grid-column: 3; grid-row: 1; }
  .pv-week-meta { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

/* ── Property list view (replaces the 120-tile grid) ── */
.pv-prop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 2px 0 14px;
}
.pv-prop-tabs { display: inline-flex; gap: 4px; background: var(--pv-sand-deep);
  padding: 3px; border-radius: 10px; }
.pv-prop-tabs a { padding: 5px 14px; border-radius: 8px; font-size: 13px;
  color: var(--pv-ink-soft); text-decoration: none; }
.pv-prop-tabs a.is-on { background: var(--pv-saguaro); color: var(--pv-cream); font-weight: 600; }
.pv-prop-sorts { font-size: 13px; color: var(--pv-ink-mute); display: flex; gap: 10px; flex-wrap: wrap; }
.pv-prop-sorts a { color: var(--pv-sage-deep); text-decoration: none; }
.pv-prop-sorts a.font-semibold, .pv-prop-sorts a.text-saguaro { color: var(--pv-saguaro); }
.pv-plist-row {
  /* same name-column guarantee as .pv-week-row */
  display: grid; grid-template-columns: minmax(180px, 1fr) auto auto 24px;
  gap: 14px; align-items: center; padding: 12px 16px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--pv-line-soft);
}
.pv-plist-row:last-child { border-bottom: 0; }
.pv-plist-row:nth-child(even) { background: var(--pv-paper); }
.pv-plist-row:hover { background: var(--pv-sand); }
@media (max-width: 860px) {
  .pv-plist-row { grid-template-columns: 1fr 24px; }
  .pv-plist-row .pv-week-meta, .pv-plist-row .pv-week-dates { display: none; }
}

/* ── Live search dropdown ── */
.pv-search-wrap { position: relative; }
.pv-search-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  background: var(--pv-cream); border: 1px solid var(--pv-line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(37, 48, 42, 0.14);
  max-height: 62vh; overflow-y: auto;
}
.pv-search-pop:empty { display: none; }
.pv-search-pop .card, .pv-search-pop .fixed { position: static !important; width: auto !important;
  box-shadow: none !important; border: 0 !important; }

/* ── Week board layout: day tabs left, reminders rail right ── */
.pv-week-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px; align-items: start;
}
.pv-week-main { min-width: 0; }
.pv-remind { position: sticky; top: 16px; }
.pv-remind-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.pv-remind-list {
  background: var(--pv-cream); border: 1px solid var(--pv-line);
  border-radius: 12px; overflow-y: auto; max-height: calc(100vh - 90px);
}
.pv-remind-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--pv-line-soft); font-size: 13px;
}
.pv-remind-row:last-child { border-bottom: 0; }
.pv-remind-row:nth-child(even) { background: var(--pv-paper); }
.pv-remind-fold { margin-top: 10px; }
.pv-remind-fold > summary {
  cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 700;
  color: var(--pv-ink-mute); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 4px;
}
.pv-remind-fold > summary::-webkit-details-marker { display: none; }
.pv-remind-fold > summary::before { content: "\25B8"; margin-right: 6px; }
.pv-remind-fold[open] > summary::before { content: "\25BE"; }
.pv-remind-due { display: block; font-size: 10.5px; font-weight: 700;
  color: var(--pv-ink-mute); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 1px; }
.pv-remind-due.is-over { color: #b85a35; }
.pv-remind-due.is-today { color: var(--pv-gold); }
.pv-remind-what { min-width: 0; display: flex; flex-direction: column; }
.pv-remind-what a { color: var(--pv-ink); font-weight: 600; text-decoration: none; }
.pv-remind-what a:hover { text-decoration: underline; }
.pv-remind-where { color: var(--pv-ink-mute); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; }
.pv-remind-doneform { flex-shrink: 0; margin-top: 2px; }
.pv-remind-doneform button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--pv-line);
  background: var(--pv-cream); color: var(--pv-sage-deep);
  min-height: 38px; /* the rail's most-tapped control — near Apple's 44px */
}
.pv-remind-doneform button:hover { background: var(--pv-saguaro); color: var(--pv-cream);
  border-color: var(--pv-saguaro); }
@media (max-width: 1100px) {
  .pv-week-layout { grid-template-columns: 1fr; }
  .pv-remind { position: static; }
  .pv-remind-list { max-height: none; }
}

/* office worker: tables on narrow screens scroll sideways inside their own
   box instead of pushing the page wide; the first column stays put. */
.pv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 860px) {
  .pv-table-scroll { margin: 0 -4px; padding: 0 4px; }
  .pv-table-scroll > table { min-width: 560px; }
  .pv-table-scroll > table th:first-child,
  .pv-table-scroll > table td:first-child { position: sticky; left: 0; background: var(--pv-card, #fff); z-index: 1; }
}