/**
 * Customer account portal, in the Miles design language.
 * Structure mirrors the site's existing cards so it reads as part of the same
 * product rather than a plugin bolted on.
 */

.miles-portal-page { background: var(--color-background, #faf7f2); }

/* ---- hero ---- */

.miles-portal-hero {
  padding-block: 34px 44px !important;
  background:
    linear-gradient(90deg, rgba(20, 55, 49, 0.99) 0%, rgba(29, 72, 65, 0.9) 100%),
    var(--color-brand-dark, #204944);
  color: #fff;
}

.miles-portal-hero .health-hub-eyebrow { color: rgba(255, 255, 255, 0.72); }

.miles-portal-hero h1 {
  margin: 6px 0 10px;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

.miles-portal-hero__lede {
  margin: 0;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.miles-portal-hero .service-location-breadcrumb a,
.miles-portal-hero .service-location-breadcrumb li { color: rgba(255, 255, 255, 0.72); }

/* ---- body ---- */

.miles-portal-body { padding-block: 44px 76px !important; }

.miles-portal {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.miles-portal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.miles-portal__title {
  margin: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text, #1a2e2a);
}

.miles-portal__lede {
  margin: 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-soft, #536762);
}

.miles-portal__section {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-soft, #536762);
}

.miles-portal__note {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-soft, #536762);
}

/* ---- cards ---- */

.miles-portal__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.18));
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(26, 46, 42, 0.08);
}

.miles-portal__card--signin { max-width: 520px; }

/* ---- form bits ---- */

.miles-portal__form { display: flex; flex-direction: column; gap: 14px; width: 100%; }

.miles-portal__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.miles-portal__field label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-portal__field input,
.miles-portal__field textarea {
  font: inherit;
  font-size: 16px;
  width: 100%;
  padding: 11px 13px;
  color: var(--color-text, #1a2e2a);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 10px;
}

.miles-portal__field input:focus-visible,
.miles-portal__field textarea:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.45);
  outline-offset: 1px;
  border-color: var(--color-brand, #2c5f5a);
}

.miles-portal__readonly {
  margin: 0;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--color-text-soft, #536762);
  background: var(--color-background-deep, #f2ede4);
  border-radius: 10px;
}

.miles-portal__submit { align-self: flex-start; }

.miles-portal__message { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-soft, #536762); }
.miles-portal__message[data-tone="ok"] { color: var(--color-brand-dark, #204944); font-weight: 600; }
.miles-portal__message[data-tone="error"] { color: #8c3c1c; font-weight: 600; }

/* ---- bookings ---- */

.miles-portal__list { display: grid; gap: 14px; }

.miles-portal__booking {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.16));
  border-radius: 16px;
}

.miles-portal__booking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.miles-portal__booking-service {
  margin: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-portal__status {
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage, #dce7df);
}

.miles-portal__status[data-status="cancelled"] { color: #8c3c1c; background: rgba(232, 115, 74, 0.14); }
.miles-portal__status[data-status="pending"] { color: #6b5a1f; background: #f6efd8; }

/* One fact a row, its name beside it (theme-fixes.css): as columns, four
   rows' worth of label and value were squeezed side by side into a quarter
   of the card each. */
.miles-portal__booking-facts { display: block; margin: 0; }

.miles-portal__booking-facts dt {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft, #536762);
}

.miles-portal__booking-facts dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-portal__intake {
  margin: 0;
  padding: 10px 13px;
  font-size: 13px;
  border-radius: 10px;
  color: #6b5a1f;
  background: #f6efd8;
}

.miles-portal__actions { display: flex; flex-wrap: wrap; gap: 9px; }

.miles-portal__action {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  min-height: 42px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid transparent;
  border-radius: 999px;
}

.miles-portal__action:hover { background: var(--color-sage, #dce7df); }
.miles-portal__action--quiet { background: transparent; border-color: var(--color-border, rgba(44, 95, 90, 0.22)); }

.miles-portal__signout {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  cursor: pointer;
  color: var(--color-text-soft, #536762);
  background: transparent;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 999px;
}

.miles-portal__empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 26px;
  background: var(--color-sage-soft, #edf2ed);
  border-radius: 16px;
}

.miles-portal__empty p { margin: 0; color: var(--color-text-soft, #536762); }

/* ---- reschedule ---- */

.miles-portal__days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  width: 100%;
}

.miles-portal__day {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 4px;
  cursor: pointer;
  text-align: center;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.2));
  border-radius: 12px;
}

.miles-portal__day:hover { border-color: var(--color-brand, #2c5f5a); }
.miles-portal__day[aria-pressed="true"] { color: #fff; background: var(--color-brand-dark, #204944); border-color: var(--color-brand-dark, #204944); }
.miles-portal__day-dow { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.miles-portal__day-num { font-family: "Newsreader", Georgia, serif; font-size: 1.3rem; font-weight: 600; }
.miles-portal__day-mon { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }

.miles-portal__times { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.miles-portal__slotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 7px;
}

.miles-portal__slot {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 42px;
  cursor: pointer;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 10px;
}

.miles-portal__slot:hover { background: var(--color-sage-soft, #edf2ed); border-color: var(--color-brand, #2c5f5a); }

.miles-portal__compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  width: 100%;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 12px;
  overflow: hidden;
}

.miles-portal__compare-side { padding: 16px 18px; background: #fff; }
.miles-portal__compare-side p:last-child { margin: 4px 0 0; font-size: 16px; font-weight: 600; color: var(--color-text, #1a2e2a); }
.miles-portal__compare-side--new { background: var(--color-sage-soft, #edf2ed); }

/* ---- cancel reasons ---- */

.miles-portal__reasons { display: flex; flex-wrap: wrap; gap: 8px; }

.miles-portal__reason {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  min-height: 42px;
  cursor: pointer;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 999px;
}

.miles-portal__reason[aria-pressed="true"] { color: #fff; background: var(--color-brand, #2c5f5a); border-color: var(--color-brand, #2c5f5a); }

/* ---- details ---- */

.miles-portal__details {
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.16));
  border-radius: 16px;
}

.miles-portal__details summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-portal__details-body { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; max-width: 420px; }

.miles-portal__day:focus-visible,
.miles-portal__slot:focus-visible,
.miles-portal__reason:focus-visible,
.miles-portal__action:focus-visible,
.miles-portal__signout:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .miles-portal__card { padding: 24px 20px; }
  .miles-portal__submit, .miles-portal__action { width: 100%; justify-content: center; text-align: center; }
}

@media (forced-colors: active) {
  .miles-portal__day, .miles-portal__slot, .miles-portal__reason { border: 1px solid ButtonText; }
  .miles-portal__day[aria-pressed="true"], .miles-portal__reason[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/* ---- primary actions ----
   .site-booking-button is styled per-context in theme.css and picks up nothing
   here, so the portal's primary buttons state their own appearance. */

.miles-portal .site-booking-button,
.miles-portal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: var(--color-cta, #e8734a);
  border: 2px solid var(--color-cta, #e8734a);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}

.miles-portal .site-booking-button:hover,
.miles-portal__submit:hover {
  background: var(--color-cta-hover, #ce5e38);
  border-color: var(--color-cta-hover, #ce5e38);
}

.miles-portal .site-booking-button:disabled,
.miles-portal__submit:disabled { cursor: wait; opacity: 0.72; }

.miles-portal .site-booking-button:focus-visible,
.miles-portal__submit:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .miles-portal .site-booking-button,
  .miles-portal__submit { transition: none; }
}

/* ---- opt out of the global card rule ----
   theme.css line ~192 gives every direct <div> child of any <article> a card
   background, border and shadow, with !important:

       article > div, [class*="shadow-"][class*="bg-white"] { … }

   The booking cards are <article>s whose head and actions are divs, so each one
   was drawing a second box inside the card. The theme already opts one of its
   own components out of this rule the same way. */

.miles-portal__booking > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

/* ---- disclosure arrow ----
   The default ::marker is a small solid triangle. This replaces it with a
   chevron that turns when the section opens. */

.miles-portal__details summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.miles-portal__details summary::-webkit-details-marker { display: none; }
.miles-portal__details summary::marker { content: ""; }

.miles-portal__details summary::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-brand, #2c5f5a);
  border-bottom: 2px solid var(--color-brand, #2c5f5a);
  transform: rotate(-45deg);
  transform-origin: 60% 60%;
  transition: transform 0.18s ease;
}

.miles-portal__details[open] summary::before { transform: rotate(45deg); }

.miles-portal__details summary:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .miles-portal__details summary::before { transition: none; }
}

/* The same theme rule has a :hover twin at line ~199:
 *
 *     article > div:hover, … { box-shadow: var(--shadow-card-hover) !important; }
 *
 * That selector is (0,1,2) and the opt-out above is only (0,1,1), so with both
 * marked !important the hover rule won and a card-wide shadow appeared when the
 * pointer crossed the title or the buttons. Matching :hover here lifts this to
 * (0,2,1), which wins. */

.miles-portal__booking > div:hover,
.miles-portal__booking > div:focus-within {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   The patient's moment (assets/js/miles-portal.js)

   Signed in, the first panel is what the patient needs next rather than a
   ledger: the appointment coming up and what to know before it, the visit
   just made, or with nothing booked the next step; then the service cards.
   One evergreen object leads each moment, as on the rest of the site, and
   everything under it sits on white or cream.

   Divs throughout, never sections: theme.css pads every <section> 108px
   with !important. Text is 16px or more, labels 13px (checks/type-scale.js).
   ========================================================================== */

.miles-portal-kicker {
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* The page's own buttons and notes, at the site's floor. */
.miles-portal .miles-portal__action,
.miles-portal .miles-portal__signout { font-size: 16px; }
.miles-portal .miles-portal__intake { padding: 12px 16px; font-size: 16px; line-height: 1.5; border-radius: 12px; }
.miles-portal .miles-portal__intake a { font-weight: 700; color: inherit; text-underline-offset: 4px; }
.miles-portal .miles-portal__message { font-size: 16px; }

/* ---- the appointment coming up -------------------------------------------
   The day as the patient says it ("Tomorrow"), the date and the time large
   in their own column; the service, what it takes and the way to the door
   beside it; the three things they might do about it at its foot. */

.miles-portal-appt {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 255, 255, 0.07), transparent 46%),
    var(--color-brand-dark, #204944);
  box-shadow: 0 18px 44px rgba(24, 58, 54, 0.16);
}

.miles-portal-appt__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 32px 28px;
  background: #183a36;
}

.miles-portal .miles-portal-appt__count {
  margin: 0 0 14px;
  color: #f4b89c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-portal .miles-portal-appt__day,
.miles-portal .miles-portal-appt__date {
  margin: 0;
  color: #dce7df;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 21px;
  line-height: 1.3;
}

.miles-portal .miles-portal-appt__date { color: #fff; font-size: 25px; }

.miles-portal .miles-portal-appt__time {
  margin: 14px 0 0;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 54px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}

.miles-portal-appt__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 32px 34px 30px;
}

.miles-portal .miles-portal-appt__service {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

.miles-portal-appt__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-portal .miles-portal-appt__facts li {
  margin: 0;
  padding: 6px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 16px;
  line-height: 1.35;
}

.miles-portal .miles-portal-appt__where { margin: 0; color: #e3ede6; font-size: 16px; line-height: 1.55; }

/* Whether the door is open, in the site's own words and clock. */
.miles-portal .miles-portal-appt__hours {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -6px 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.miles-portal-appt__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }

.miles-portal .miles-portal-appt__links a {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.miles-portal .miles-portal-appt__links a:hover { text-decoration-color: #fff; }

.miles-portal .miles-portal-appt .miles-portal__intake { color: #6e2f12; background: #fdf1e9; }

.miles-portal .miles-portal-appt .miles-portal__actions { margin-top: 4px; }
.miles-portal .miles-portal-appt .miles-portal__action { color: #183a36; background: #fff; }
.miles-portal .miles-portal-appt .miles-portal__action:hover { background: #dce7df; }
.miles-portal .miles-portal-appt .miles-portal__action--quiet { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.5); }
.miles-portal .miles-portal-appt .miles-portal__action--quiet:hover { background: rgba(255, 255, 255, 0.1); }

/* Read at the floor: the address under the name, and the tabs. */
.miles-portal .miles-portal__me-email,
.miles-portal .miles-portal__tab { font-size: 16px; }

/* The sidebar's one column holds to the sidebar on a phone. Its track grew to
   the tab row's full length, so the row never scrolled and the last tab ran
   off the screen, where the page's overflow hid it. */
.miles-portal .miles-portal__side { grid-template-columns: minmax(0, 1fr); }

/* Another appointment under the first one's card, or under what to know before it. */
.miles-portal-appt + .miles-portal__list,
.miles-portal-before + .miles-portal__list { margin-top: 18px; }

/* ---- add to calendar: the choice, under the actions ------------------------ */

/* Inside the actions, after its button: its own row, below all of them,
   where the buttons sit side by side; straight under its button where they
   stack. */
.miles-portal-cal { display: flex; flex-wrap: wrap; flex-basis: 100%; order: 1; gap: 8px; }
.miles-portal-cal[hidden] { display: none; }

.miles-portal .miles-portal-cal__go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  cursor: pointer;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.22));
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.miles-portal .miles-portal-cal__go:hover { background: var(--color-sage-soft, #edf2ed); }
.miles-portal .miles-portal-cal__go:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.55); outline-offset: 2px; }
.miles-portal .miles-portal__action[aria-expanded="true"] { background: var(--color-sage, #dce7df); }

/* On the appointment's evergreen card, outlined in white like Cancel. */
.miles-portal .miles-portal-appt .miles-portal-cal__go { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.5); }
.miles-portal .miles-portal-appt .miles-portal-cal__go:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 560px) {
  .miles-portal-cal { order: 0; }
  .miles-portal .miles-portal-cal__go { width: 100%; justify-content: center; text-align: center; }
}

/* ---- before you come: a note, a patient's words, a guide ------------------ */

.miles-portal-before {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.miles-portal-note,
.miles-portal-reassure,
.miles-portal-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-portal .miles-portal-note__text { margin: 0; color: var(--color-text, #1a2e2a); font-size: 17px; line-height: 1.55; }

.miles-portal-reassure { background: var(--color-sage-soft, #edf2ed); border-color: transparent; }

.miles-portal .miles-portal-reassure__heading {
  margin: 0;
  color: #183a36;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
}

.miles-portal-quote { margin: 0; }
.miles-portal .miles-portal-quote blockquote { margin: 0; color: var(--color-text, #1a2e2a); font-size: 17px; line-height: 1.55; }
.miles-portal .miles-portal-quote figcaption { margin-top: 8px; color: var(--color-text-soft, #536762); font-size: 16px; }

.miles-portal-guide { padding: 0; overflow: hidden; }
.miles-portal-guide__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-brand-dark, #204944); }
.miles-portal-guide__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miles-portal-guide__media .miles-cover { position: absolute; inset: 0; aspect-ratio: auto; }
.miles-portal-guide__text { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; }

.miles-portal .miles-portal-guide__title {
  margin: 0;
  color: #183a36;
  font-size: 21px;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
}

.miles-portal .miles-portal-guide__title a { color: inherit; text-decoration: none; }
.miles-portal .miles-portal-guide__title a::after { content: ""; position: absolute; inset: 0; }
.miles-portal-guide { position: relative; }
.miles-portal-guide:hover .miles-portal-guide__title a { text-decoration: underline; text-underline-offset: 4px; }
.miles-portal-guide:focus-within { outline: 3px solid rgba(232, 115, 74, 0.55); outline-offset: 2px; }
.miles-portal .miles-portal-guide__by { margin: 0; color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.45; }

/* ---- after a visit --------------------------------------------------------- */

.miles-portal-after {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 34px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

/* Under an appointment, the same space as everything else under it. */
.miles-portal-after:not(:first-child) { margin-top: 18px; }

.miles-portal .miles-portal-after__service {
  margin: 0;
  color: #183a36;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.miles-portal .miles-portal-after__when { margin: 0; color: var(--color-text-soft, #536762); font-size: 16px; }
.miles-portal .miles-portal-after__text { margin: 4px 0 0; color: var(--color-text, #1a2e2a); font-size: 17px; line-height: 1.55; max-width: 60ch; }

.miles-portal .miles-portal-after__review {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  color: #fff;
  background: var(--color-brand-dark, #204944);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.miles-portal .miles-portal-after__review:hover { background: #183a36; }

/* The review ask in the sidebar: there on every tab for anyone who has been
   in, above Sign out; on a narrow screen the two share a row. */
.miles-portal .miles-portal__side-foot { display: grid; gap: 10px; }
.miles-portal .miles-portal__review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage-soft, #edf2ed);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.miles-portal .miles-portal__review:hover { background: var(--color-sage, #dce7df); }
.miles-portal .miles-portal__review:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.55); outline-offset: 2px; }
@media (max-width: 900px) {
  .miles-portal .miles-portal__side-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
}

/* ---- the next step: the flu season, on its card ---------------------------
   The flu page's own photograph once it has one, with the season's
   sentence, its booking and a call; the words alone until then. */

.miles-portal-next {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px 40px;
  align-items: center;
  margin-top: 18px;
  padding: 34px 40px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 6%, rgba(255, 255, 255, 0.07), transparent 44%),
    var(--color-brand-dark, #204944);
}

.miles-portal-next:first-child { margin-top: 0; }
.miles-portal-next--words { grid-template-columns: minmax(0, 1fr); }
.miles-portal-next__figure { margin: 0; }
.miles-portal-next__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.miles-portal .miles-portal-next__kicker { margin: 0; color: #cddfd2; font-size: 13px; font-weight: 700; letter-spacing: 0.105em; line-height: 1.4; text-transform: uppercase; }

.miles-portal .miles-portal-next__line {
  margin: 10px 0 0;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 22px;
  line-height: 1.38;
  text-wrap: pretty;
}

.miles-portal-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.miles-portal .miles-portal-next__book { min-height: 50px; padding: 0 24px; font-size: 16px; text-decoration: none; }

.miles-portal .miles-portal-next__call {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 5px;
}

.miles-portal .miles-portal-next__call:hover { text-decoration-color: #fff; }

/* ---- the service cards ------------------------------------------------------ */

.miles-portal-services,
.miles-portal-stories { margin-top: 44px; }
.miles-portal-after + .miles-portal-services,
.miles-portal-after + .miles-portal-stories { margin-top: 36px; }

.miles-portal .miles-portal-services__title {
  margin: 0 0 18px;
  color: #183a36;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}

.miles-portal-services__grid,
.miles-portal-stories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.miles-portal-services__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

/* A lone card, or the first of three, takes the row: its picture beside its
   words rather than one card left alone under a pair. */
.miles-portal-services__grid[data-count="1"] .miles-portal-card,
.miles-portal-services__grid[data-count="3"] .miles-portal-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

.miles-portal-services__grid[data-count="1"] .miles-portal-card__media,
.miles-portal-services__grid[data-count="3"] .miles-portal-card:first-child .miles-portal-card__media {
  aspect-ratio: auto;
  min-height: 300px;
}

.miles-portal-services__grid[data-count="1"] .miles-portal-card__media img,
.miles-portal-services__grid[data-count="3"] .miles-portal-card:first-child .miles-portal-card__media img { position: absolute; inset: 0; }

.miles-portal-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.miles-portal-card:hover { box-shadow: 0 14px 36px rgba(32, 73, 68, 0.12); }

.miles-portal-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-brand-dark, #204944);
}

.miles-portal-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.miles-portal-card__media .miles-cover { position: absolute; inset: 0; aspect-ratio: auto; }
.miles-portal .miles-portal-card__media .miles-cover__word { font-size: clamp(28px, 2.6vw, 36px); text-wrap: balance; }

.miles-portal-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}

.miles-portal .miles-portal-card__name {
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-portal .miles-portal-card__headline {
  margin: 0;
  color: #183a36;
  font-size: 24px;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.miles-portal .miles-portal-card__line { margin: 0; color: var(--color-text, #1a2e2a); font-size: 16px; line-height: 1.55; }
.miles-portal .miles-portal-card__source { color: var(--color-text-soft, #536762); font-size: 16px; text-underline-offset: 3px; }

.miles-portal-card__proof {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--color-sage-soft, #edf2ed);
}

.miles-portal .miles-portal-card__proof blockquote { font-size: 16px; }

.miles-portal .miles-portal-card__facts {
  margin: auto 0 0;
  padding-top: 6px;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.miles-portal .miles-portal-card__go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 46px;
  margin-top: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  color: #fff;
  background: var(--color-cta, #e8734a);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(232, 115, 74, 0.24);
}

.miles-portal .miles-portal-card__facts[hidden] + .miles-portal-card__free[hidden] + .miles-portal-card__go { margin-top: auto; }

/* When the next appointment is free, in the words' own sentence, under the
   length and the price: the thing most worth knowing before "See times". */
.miles-portal .miles-portal-card__free {
  margin: 0;
  color: var(--color-brand-dark, #204944);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.miles-portal .miles-portal-card__facts[hidden] + .miles-portal-card__free { margin-top: auto; padding-top: 6px; }
.miles-portal .miles-portal-card__go:hover { background: #d9623a; }
.miles-portal-card__arrow { width: 18px; height: 18px; transition: transform 160ms ease; }
.miles-portal-card__go:hover .miles-portal-card__arrow { transform: translateX(3px); }
.miles-portal .miles-portal-card__go:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.55); outline-offset: 3px; }

/* ---- narrower ------------------------------------------------------------- */

@media (max-width: 1100px) {
  .miles-portal-next { grid-template-columns: minmax(0, 1fr); padding: 30px 28px; }
  .miles-portal-next__figure { max-width: 420px; }
}

@media (max-width: 760px) {
  .miles-portal-appt { grid-template-columns: minmax(0, 1fr); }
  .miles-portal-appt__when {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 2px 18px;
    padding: 24px 24px 22px;
  }
  .miles-portal .miles-portal-appt__count { grid-column: 1 / -1; margin-bottom: 8px; }
  .miles-portal .miles-portal-appt__day { grid-column: 1; }
  .miles-portal .miles-portal-appt__date { grid-column: 1; }
  .miles-portal .miles-portal-appt__time { grid-column: 2; grid-row: 2 / span 2; justify-self: end; margin: 0; font-size: 46px; }
  .miles-portal-appt__body { padding: 24px 24px 26px; }
  .miles-portal-services__grid,
  .miles-portal-stories__grid { grid-template-columns: minmax(0, 1fr); }
  /* Every card stacks, the first of three too: the rule that lays that one
     out beside its picture is a class more specific than a bare card's, so
     it is named here as well, or it stays squeezed beside its picture. */
  .miles-portal-services__grid[data-count] .miles-portal-card,
  .miles-portal-services__grid[data-count] .miles-portal-card:first-child { display: flex; }
  .miles-portal-services__grid[data-count] .miles-portal-card__media,
  .miles-portal-services__grid[data-count] .miles-portal-card:first-child .miles-portal-card__media { aspect-ratio: 16 / 9; min-height: 0; }
  .miles-portal-after { padding: 26px 24px; }
}

@media (max-width: 560px) {
  .miles-portal-next { padding: 26px 20px 28px; border-radius: 20px; }
  .miles-portal .miles-portal-next__line { font-size: 20px; }
  .miles-portal .miles-portal-card__go { align-self: stretch; justify-content: center; text-align: center; }
  /* The review ask takes the row like "Book this again" under it; it runs to
     two lines at 390, and both sit in the middle. */
  .miles-portal .miles-portal-after__review { width: 100%; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-portal-card,
  .miles-portal-card__arrow { transition: none; }
  .miles-portal-card__go:hover .miles-portal-card__arrow { transform: none; }
}

@media (forced-colors: active) {
  .miles-portal-appt,
  .miles-portal-next,
  .miles-portal-card,
  .miles-portal-note,
  .miles-portal-reassure,
  .miles-portal-guide,
  .miles-portal-after { border: 1px solid CanvasText; }
}