/* ==========================================================================
   Owner portal (body.app). Load after tokens.css.
   Friendly + roomy: 1rem body text, 2.5rem controls, 64rem content width.
   ========================================================================== */

/* The signed-in frame is the sidebar in tokens.css. Owner pages keep the serif title and the roomy measure. */
body.has-shell.app .page-header { margin-bottom: var(--space-8); }
body.has-shell.app .shell-body > main > .container { padding-top: var(--space-2); }

/* ---- Page frame ---- */
.app main { padding-block: var(--space-8) var(--space-16); }
.app main > .container > .page-header h1,
.app .page-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: -0.015em; }
.page-narrow { max-width: var(--form-max); }

/* ---- Footer: slim, not a marketing footer ---- */
.app-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-6); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-text-muted); }
.app-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.app-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.app-footer a { color: var(--color-text-2); }
.app-footer p { margin: 0; }

/* ---- Upcoming appointments on the owner home ----
   Two counts, then today's next visits. Cards stack below 40rem.
   The week is Monday through Sunday in the business time zone. */
.appointments { display: grid; gap: var(--stack-gap); margin-bottom: var(--space-8); }
.appointments-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.appointments-head h2 { font-size: var(--text-lg); line-height: var(--lh-lg); }
.appointments-head .hint { margin: var(--space-1) 0 0; }
.appointments-head .btn { min-height: 2.75rem; }
.stat-grid { display: grid; gap: var(--stack-gap); }
@media (min-width: 40rem) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat-label { margin: 0; font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-hover); }
.stat-value { margin: var(--space-2) 0 0; font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
.stat-hint { margin: var(--space-1) 0 0; }
.appointment-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.appointment {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: var(--space-1) var(--space-4);
  min-height: 2.75rem; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm); line-height: var(--lh-sm);
}
.appointment:last-child { border-bottom: 0; padding-bottom: 0; }
.appointment-when { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.appointment-who { font-weight: 600; color: var(--color-text); min-width: 0; }
.appointment-what, .appointment-staff { color: var(--color-text-2); min-width: 0; }
@media (max-width: 39.99rem) {
  .appointment { grid-template-columns: minmax(0, 1fr) auto; }
  .appointment-what, .appointment-staff { grid-column: 1 / -1; }
}
/* Requested visits above today's list. The time includes the weekday because these are not all today. */
.confirm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.confirm {
  display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-1) var(--space-4);
  min-height: 2.75rem; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm); line-height: var(--lh-sm);
}
.confirm:last-child { border-bottom: 0; padding-bottom: 0; }
.confirm-when { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.confirm-what { color: var(--color-text); min-width: 0; }
@media (max-width: 39.99rem) {
  .confirm { grid-template-columns: minmax(0, 1fr) auto; }
  .confirm-what { grid-column: 1 / -1; }
}

/* ---- Dashboard layout: main column + side column at 64rem ---- */
.dash-grid { display: grid; gap: var(--stack-gap); }
.dash-main, .dash-side { display: grid; gap: var(--stack-gap); align-content: start; min-width: 0; }
@media (min-width: 80rem) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .dash-full { grid-column: 1 / -1; }
}
@media (max-width: 63.99rem) {
  .nav-link, .nav-section > summary, .nav-parent > summary { min-height: 2.75rem; }
}

/* ---- Project stage stepper ----
   <ol class="stepper"> <li class="step step-done | step-upcoming" [aria-current="step"]>
     <span class="step-mark">1</span><span class="step-copy"><span class="step-name">Intake</span><span class="step-state">Completed · Sep 2</span></span></li> */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.step { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; min-width: 0; }
.step-mark {
  flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-size: var(--text-xs); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border-strong);
}
.step-copy { display: flex; flex-direction: column; min-width: 0; }
.step-name { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--color-text-2); }
.step-state { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--color-text-muted); }
.step-done .step-mark { background: var(--color-text); border-color: var(--color-text); color: #ffffff; }
.step[aria-current="step"] .step-mark { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; outline: 3px solid var(--color-primary-subtle); }
.step[aria-current="step"] .step-name { color: var(--color-primary-hover); }
.step[aria-current="step"] .step-state { color: var(--color-text-2); font-weight: 500; }
/* vertical connector (mobile/tablet) */
.step:not(:last-child)::after { content: ""; position: absolute; left: 0.75rem; top: 2.25rem; bottom: -0.25rem; width: 1px; background: var(--color-border); }
.step-done:not(:last-child)::after { background: var(--color-text); }
@media (min-width: 64rem) {
  .stepper { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
  .step { flex-direction: column; gap: var(--space-2); padding: 0; }
  .step:not(:last-child)::after { left: 2rem; right: var(--space-1); top: 0.75rem; bottom: auto; width: auto; height: 1px; }
}

/* Stage history: collapsed by default under the stepper */
.history { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.history ol { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--lh-sm); }
.history time { display: inline-block; min-width: 6.5rem; font-weight: 600; color: var(--color-text); }

/* ---- Bookings list (dashboard card + /bookings) ----
   <li class="booking"><time class="booking-when" datetime="2026-10-20T15:00">Tue, Oct 20 <span>3:00 PM</span></time>
   <span class="booking-what">Kids' cut</span><span class="badge badge-warning">Needs confirmation</span></li> */
.booking-group + .booking-group { margin-top: var(--space-5); }
.booking-group-title { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--color-text-muted); }
.booking-group:last-child .booking:last-child { border-bottom: 0; padding-bottom: 0; }
.booking-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.booking {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); line-height: var(--lh-sm);
}
.booking-when { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.booking-when span { display: block; font-weight: 400; color: var(--color-text-muted); }
.booking-what { color: var(--color-text); min-width: 0; }
@media (max-width: 39.99rem) {
  .booking { grid-template-columns: minmax(0, 1fr) auto; }
  .booking-what { grid-column: 1; grid-row: 2; }
  .booking .badge { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/* ---- Auth (login, verify) ---- */
.auth-wrap { display: flex; justify-content: center; padding-top: clamp(var(--space-4), 8vh, var(--space-16)); }
.auth-card { width: 100%; max-width: var(--auth-max); padding: var(--space-6); }
@media (min-width: 40rem) { .auth-card { padding: var(--space-8); } }
.auth-card h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--lh-3xl); margin-bottom: var(--space-2); }
.auth-card .lede { margin: 0 0 var(--space-6); }
.auth-card .form-actions { margin-top: var(--space-5); }
.auth-foot { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-text-muted); }

/* ---- Owner list pages (services, team) ---- */
.reorder { display: inline-flex; gap: var(--space-1); }
.reorder .btn { min-width: var(--control-h-sm); padding-inline: var(--space-2); }
.reorder-slot { visibility: hidden; }

/* ---- Hours ---- */
.hours-week { margin-bottom: var(--space-6); }
.hours-holidays { margin-top: var(--space-6); }
.site-tech { margin-top: var(--space-8); }
.hours-row { display: grid; grid-template-columns: 7rem auto 1fr; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.hours-row .day { font-weight: 600; }
.hours-times { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.hours-times input[type="time"] { width: 8rem; }
@media (max-width: 39.99rem) { .hours-row { grid-template-columns: 1fr auto; } .hours-times { grid-column: 1 / -1; } }

/* Owner help: short numbered sections. The measure stays readable beside the sidebar. */
.help-page { max-width: 42rem; }
.help-page .card > p:first-of-type { margin-top: var(--space-3); }
.help-steps, .help-list {
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.help-steps { counter-reset: help; }
/* The number sits beside the paragraph. The li is not a grid: a and strong must stay inline. */
.help-steps > li, .help-list > li { min-width: 0; }
.help-steps > li { position: relative; padding-left: 2.5rem; }
.help-steps > li > p, .help-list > li > p { display: block; margin: 0; }
.help-steps > li a,
.help-steps > li strong,
.help-list > li a,
.help-list > li strong { display: inline; white-space: normal; }
.help-steps > li::before {
  counter-increment: help;
  content: counter(help);
  position: absolute;
  left: 0;
  top: 0.125rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}
.help-page .hint { margin-top: var(--space-2); }

/* Owner page titles stay serif even when a narrow wrapper sits between the container and the header. */
.app .page-header h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: -0.015em; }

/* JSON blocks. The admin site-content page uses the same rule in admin.css. */
pre.json { margin: 0 0 var(--space-4); padding: var(--space-3); max-height: 32rem; overflow: auto; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: 500 0.8125rem/1.25rem var(--font-mono); }

/* Dollar amount and the extra hour ranges the weekly form already posts. */
.money { display: flex; align-items: center; gap: var(--space-2); }
.money input { max-width: 10rem; }
.range-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.range-row > div, .range-row > .field { flex: 1 1 8rem; min-width: 0; margin: 0; }
.status-code { margin: 0 0 var(--space-2); font: 500 var(--text-sm)/var(--lh-sm) var(--font-mono); letter-spacing: 0.04em; color: var(--color-text-muted); }
.danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; }
.danger-row p { margin: 0; max-width: 40rem; }