/* ============================================================================
   THE CLIENT PORTAL — built to the measured Air Dev specification
   ----------------------------------------------------------------------------
   Every number in this file comes from AIRDEV-SPEC.md, which was read off the
   live prototype with getComputedStyle rather than estimated from a picture.
   If you change a value here, change it there too, and say why.

   ── WHY THIS IS A SEPARATE FILE ───────────────────────────────────────────

   app.css dresses five booking flows, an admin and a portal. Putting the
   portal's exact proportions in there would mean every future admin tweak
   risks the one surface a paying client looks at. This file owns the portal
   and nothing else owns it.

   ── THE THREE THINGS THAT MAKE IT READ AS AIR DEV ─────────────────────────

   1 · SQUARE CORNERS. Radius is 0 everywhere. The single biggest reason the
       previous version read as a generic CRM was rounded cards.
   2 · NO SHADOWS. Separation comes from hairlines and whitespace.
   3 · THE STAT VALUES ARE SIDEBAR BLUE-GREY, not body ink. That one colour
       choice is what makes the summary row read as a band rather than as
       four floating metrics.
   ========================================================================= */

/* ── THE CONTRAST PASS ────────────────────────────────────────────────────
   Three colours failed WCAG AA and were measured, not guessed. Ratios below
   are computed against the surface each one actually sits on; the numbers
   are in the file so the next person changing a colour can check rather
   than re-derive.

     --pt-muted  #655c54 on #f2ede8   3.64  FAIL   (help text, labels,
                                                    placeholders, statuses,
                                                    meta — most secondary
                                                    text in the product)
                 #655c54 on #f2ede8   5.62  pass
                 #655c54 on a card    5.97  pass

     --pt-group  #655c54 on #565f68   2.44  FAIL   (sidebar group labels —
                                                    failed even the 3.0
                                                    large-text threshold)
                 #d6d8da on #565f68   4.55  pass

     --pt-nav    rgba linen .82 on slate ≈ 3.63  FAIL  (every nav item)
                 full linen              5.11  pass

   The muted brown keeps its warmth — it is darkened, not replaced with a
   neutral grey — so the palette still reads as this product rather than as
   a contrast-checker's idea of one.

   `--pt-muted-on-dark` exists because #655c54 against the demo banner's
   near-black is 2.07. Secondary text on a dark surface has to go the other
   way, and one variable cannot do both.                                   */
:root {
  --pt-sidebar-w: 240px;
  --pt-gutter: 70px;
  --pt-hero-h: 266px;
  --pt-rule: rgba(149, 126, 104, 0.22);
  --pt-linen: #eae3db;
  --pt-slate: #565f68;
  --pt-muted: #655c54;
  --pt-muted-on-dark: #c6c1bb;
  --pt-group: #d6d8da;
  --pt-nav: #eae3db;
  --pt-nav-active: rgba(234, 227, 219, 0.46);
}

/* ==========================================================================
   FRAME
   ========================================================================== */
.pt {
  display: flex;
  min-height: 100vh;

  /* ── WHY THE SIDEBAR COLUMN IS PAINTED HERE AND NOT ON THE SIDEBAR ─────
     `.pt__side` is sticky and one viewport tall, which is what keeps the
     navigation reachable on a long page. But a sticky element only covers
     the viewport it is stuck in — so on any page taller than the screen,
     everything below the first 100vh showed the PARENT's ivory through
     the sidebar column. A blue-grey bar that stops two thirds of the way
     down and turns ivory.

     Painting the column on the flex container instead means the slate runs
     the full height of the document by construction, whatever that height
     turns out to be. No fixed positioning, no hardcoded height, and the
     sidebar itself keeps behaving exactly as it did.

     The width comes from the same custom property the sidebar uses, so the
     paint and the element can never disagree. */
  background-color: var(--surface-canvas, #f2ede8);
  background-image: linear-gradient(
    to right,
    var(--pt-slate) 0,
    var(--pt-slate) var(--pt-sidebar-w),
    transparent var(--pt-sidebar-w)
  );
  background-repeat: no-repeat;
}

.pt__side {
  width: var(--pt-sidebar-w);
  flex: 0 0 var(--pt-sidebar-w);
  background: var(--pt-slate);
  border-right: 1px solid rgba(242, 237, 232, 0.04);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.pt__main {
  flex: 1 1 auto;
  min-width: 0;                       /* so long words cannot widen the page */
  padding: 40px var(--pt-gutter) 80px;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.pt__brand {
  padding: 26px 20px 24px;
  border-bottom: 1px solid rgba(242, 237, 232, 0.08);
}
/* ── THE WORDMARK ─────────────────────────────────────────────────────────
   Item 2. It was 18px tall — legible, but it read as a utility label rather
   than as the studio's name, which is the one piece of branding on an
   otherwise deliberately quiet screen.

   30px inside the SAME 240px sidebar: the brief was explicit that the
   sidebar must not get wider to accommodate this. The logotype is a wide
   lockup, so `width: 100%` with `height: auto` would overflow the 200px of
   usable space — height-driven sizing with a max-width ceiling keeps it
   inside the padding at every zoom level. */
.pt__brand img {
  height: 30px;
  width: auto;
  max-width: 100%;
  display: block;
}

.pt__nav { flex: 1 1 auto; overflow-y: auto; padding: 18px 0 24px; }

.pt__group { margin-top: 22px; }
.pt__group:first-child { margin-top: 0; }

/* Storica 9px / 1.44px — small enough to be texture rather than text, which
   is exactly its job. */
.pt__grouplabel {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--pt-group);
  padding: 0 20px 8px;
  margin: 0;
}

.pt__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 20px;                 /* measured */
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body, 'Darker Grotesque'), system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 1.2px;
  color: var(--pt-nav);
  transition: background-color .15s ease;
}
.pt__item:hover { background: rgba(234, 227, 219, 0.14); }
.pt__item--on { background: var(--pt-nav-active); color: #2a2f34; }
.pt__item:focus-visible { outline: 2px solid var(--pt-linen); outline-offset: -2px; }
.pt__item svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }

.pt__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-top: 1px solid rgba(242, 237, 232, 0.08);
}
.pt__avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: rgba(234, 227, 219, 0.22);
  color: var(--pt-linen);
  display: grid; place-items: center;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; letter-spacing: .06em;
}
.pt__username {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pt-linen);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   GREETING
   ========================================================================== */
.pt__greeting {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 22px;
  line-height: 22px;
  font-weight: 300;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: #0d0d0d;
  margin: 0 0 46px;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   HERO
   --------------------------------------------------------------------------
   Square, 266px, 40px of padding, a photograph behind a scrim. The scrim is
   a gradient rather than a flat overlay so the type stays legible over a
   light corner of the image without flattening the whole picture.
   ========================================================================== */
.pt__hero {
  position: relative;
  min-height: var(--pt-hero-h);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  background: var(--pt-slate);
}
.pt__hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pt-hero-image, none);
  background-size: cover;
  background-position: center;
}
.pt__hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(28, 24, 22, .78) 0%,
    rgba(28, 24, 22, .55) 45%,
    rgba(28, 24, 22, .38) 100%);
}
.pt__heroinner {
  position: relative; z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.pt__herolabel {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pt-linen); margin: 0 0 10px;
}
.pt__heroname {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 44px;
  line-height: 48.4px;
  font-weight: 300;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--pt-linen);
  margin: 0;
  overflow-wrap: anywhere;
}
.pt__herovenue {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; line-height: 22.95px;
  color: var(--pt-linen);
  margin: 14px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(234, 227, 219, .38);
  max-width: 30ch;
}

/* ── THE ONE-LINE DESCRIPTION ─────────────────────────────────────────────
   The "short useful description" item 1 asks every page header to carry.
   Sits under the title above the hairline, so a page reads title → what
   this page is for → the wedding facts, top to bottom.

   Capped at 62ch: this is the only prose in the band and the band is as
   wide as the content column, so without a ceiling a two-clause sentence
   becomes one very long line across a wide monitor. */
.pt__herolede {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; line-height: 23px;
  color: var(--pt-linen);
  margin: 14px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(234, 227, 219, .38);
  max-width: 62ch;
}
.pt__herometa {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; line-height: 22.4px;
  color: var(--pt-linen);
  margin: 12px 0 0;
}
.pt__herocount { text-align: right; flex: 0 0 auto; }
.pt__herodays {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 96px; line-height: 96px; font-weight: 300;
  letter-spacing: -1.92px;
  color: var(--pt-linen);
  margin: 0;
}
.pt__herodayslabel {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: 1.12px; text-transform: uppercase;
  color: var(--pt-linen); margin: 2px 0 0;
}

/* ==========================================================================
   FOUR SUMMARY COLUMNS
   --------------------------------------------------------------------------
   Columns on the page, not cards. The vertical hairlines and the blue-grey
   numerals are what make this a band rather than four floating metrics.
   ========================================================================== */
.pt__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 61px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--pt-rule);
}
.pt__stat { padding: 0 26px; }
.pt__stat:first-child { padding-left: 0; }
.pt__stat + .pt__stat { border-left: 1px solid var(--pt-rule); }

.pt__statlabel {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 1.04px;
  text-transform: uppercase; color: var(--pt-muted);
  margin: 0 0 10px;
}
.pt__statvalue {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 36px; font-weight: 500; letter-spacing: -.36px;
  color: var(--pt-slate);            /* NOT body ink — see the header */
  line-height: 1;
  margin: 0;
  overflow-wrap: anywhere;
}
.pt__statsub {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; line-height: 20.8px; letter-spacing: 1.28px;
  text-transform: uppercase; color: var(--pt-muted);
  margin: 8px 0 0;
}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.pt__sectionhead {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 22px; line-height: 26px; font-weight: 300;
  letter-spacing: 1.32px; text-transform: uppercase;
  color: #0d0d0d;
  margin: 0;
  padding-bottom: 10px;
  display: inline-block;
  border-bottom: 1px solid #0d0d0d;   /* short rule, heading width only */
}
.pt__sectionrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin: 56px 0 26px;
}
.pt__sectionmeta {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: 1.12px; text-transform: uppercase;
  color: var(--pt-muted); text-align: right; margin: 0;
}

/* ==========================================================================
   THE JOURNEY
   --------------------------------------------------------------------------
   NOT in the Air Dev reference — see §7 of AIRDEV-SPEC.md. Built in its
   language: square, hairlined, Storica numerals, no shadows.

   The Design Intensive genuinely is a sequence, and a couple's first question
   is "is anything waiting on me". A flat checklist cannot answer that.
   ========================================================================== */
.pt__journey { margin-top: 4px; }

.pt__step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0 20px;
  position: relative;
  padding-bottom: 30px;
}
.pt__step:last-child { padding-bottom: 0; }

/* The connecting line. Drawn on the rail column, stopping at the last step. */
.pt__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px; top: 30px; bottom: 0;
  width: 1px;
  background: var(--pt-rule);
}

.pt__stepnum {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 15px; font-weight: 300; letter-spacing: .12em;
  color: var(--pt-muted);
  width: 31px; height: 31px;
  display: grid; place-items: center;
  border: 1px solid var(--pt-rule);
  background: var(--surface-canvas, #f2ede8);
  position: relative; z-index: 1;
}
.pt__step--done .pt__stepnum {
  background: var(--pt-slate); border-color: var(--pt-slate); color: var(--pt-linen);
}
.pt__step--now .pt__stepnum {
  border-color: #0d0d0d; color: #0d0d0d;
}

.pt__steptitle {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 17px; line-height: 22px; font-weight: 300;
  letter-spacing: .06em; text-transform: uppercase;
  color: #0d0d0d; margin: 4px 0 0;
}
.pt__stepbody {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; line-height: 22px; color: var(--pt-muted);
  margin: 6px 0 0; max-width: 52ch;
}
.pt__stepwhen {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .04em; color: var(--pt-muted);
  margin: 6px 0 0;
}
.pt__here {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 1.04px;
  text-transform: uppercase; color: #0d0d0d; margin: 0 0 2px;
}
.pt__owner {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .04em; margin: 8px 0 0;
}
.pt__owner--you { color: #0d0d0d; font-weight: 600; }
.pt__owner--studio { color: var(--pt-muted); }
.pt__owner--locked { color: var(--pt-muted); font-style: italic; }

/* ==========================================================================
   ACTION CARDS
   --------------------------------------------------------------------------
   Also an extension rather than a copy. Flat, square, hairlined, no shadow.
   The whole card is the target — three separately clickable-looking pieces
   is three chances to miss on a phone.
   ========================================================================== */
.pt__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--pt-rule);          /* the gap IS the hairline grid */
  border: 1px solid var(--pt-rule);
  margin-top: 4px;
}
.pt__card {
  background: var(--surface-raised, #fdfcfb);
  border: 0;
  padding: 24px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 158px;
  transition: background-color .15s ease;
  font: inherit;
}
.pt__card:hover { background: #fff; }
.pt__card:focus-visible { outline: 2px solid var(--pt-slate); outline-offset: -3px; }

.pt__cardtitle {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 15px; line-height: 20px; font-weight: 300;
  letter-spacing: .09em; text-transform: uppercase;
  color: #0d0d0d; margin: 0;
}
.pt__carddesc {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; line-height: 21px; color: var(--pt-muted);
  margin: 8px 0 0; flex: 1 1 auto;
}
.pt__cardfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 18px;
}
.pt__cardarrow { color: var(--pt-muted); flex: 0 0 auto; }

/* ---- Status pills ------------------------------------------------------
   Square, small, uppercase. Dark fill for the one that needs a person. */
.pt__pill {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 1.04px;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--pt-rule);
  color: var(--pt-muted);
  background: none;
}
.pt__pill--now { background: #2e2a27; border-color: #2e2a27; color: var(--pt-linen); }
.pt__pill--done { color: var(--pt-slate); border-color: var(--pt-slate); }

/* ==========================================================================
   MOBILE
   --------------------------------------------------------------------------
   The sidebar becomes a drawer rather than shrinking. A 240px sidebar at
   375px leaves 135px of page, and shrinking the text to fit is how a
   navigation becomes unreadable.
   ========================================================================== */
.pt__menubtn { display: none; }
.pt__scrim { display: none; }

@media (max-width: 1023px) {
  .pt__menubtn {
    display: inline-flex; align-items: center; gap: 9px;
    position: fixed; top: 14px; left: 14px; z-index: 40;
    padding: 10px 14px; min-height: 44px;
    background: var(--pt-slate); color: var(--pt-linen);
    border: 0; cursor: pointer;
    font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
    font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase;
  }
  /* No sidebar column below 1024px, so no painted column either — it
     would be a blue-grey stripe down the left of a phone with nothing in
     it. The drawer carries the navigation instead. */
  .pt { background-image: none; }

  .pt__side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    transform: translateX(-100%);
    transition: transform .22s ease;
    /* A long nav must still be reachable inside the drawer. */
    overflow-y: auto;
  }
  .pt--open .pt__side { transform: translateX(0); }
  .pt--open .pt__scrim {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(13, 13, 13, .38);
  }
  .pt__main { padding: 70px 40px 64px; }
}

@media (max-width: 767px) {
  .pt__main { padding: 68px 20px 56px; }
  .pt__greeting { font-size: 19px; line-height: 24px; margin-bottom: 26px; }

  .pt__hero { min-height: 220px; padding: 24px; }
  .pt__heroinner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pt__heroname { font-size: 32px; line-height: 35px; }
  .pt__herodays { font-size: 62px; line-height: 62px; }
  .pt__herocount { text-align: left; }

  .pt__stats { grid-template-columns: 1fr 1fr; margin-top: 34px; }
  .pt__stat { padding: 18px 16px; }
  .pt__stat:first-child, .pt__stat:nth-child(3) { padding-left: 0; }
  .pt__stat + .pt__stat { border-left: 1px solid var(--pt-rule); }
  .pt__stat:nth-child(3) { border-left: 0; }
  .pt__stat:nth-child(3), .pt__stat:nth-child(4) { border-top: 1px solid var(--pt-rule); }
  .pt__statvalue { font-size: 30px; }

  .pt__cards { grid-template-columns: 1fr; }
  .pt__card { min-height: 0; }
  .pt__sectionrow { margin: 40px 0 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .pt__sectionmeta { text-align: left; }
  .pt__step { grid-template-columns: 44px 1fr; gap: 0 14px; }
  .pt__step:not(:last-child)::before { left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt__side, .pt__card, .pt__item { transition: none; }
}

/* ---------------------------------------------------------------------------
   Additions made when the markup was converted. Same system — Storica
   uppercase heads with a short underline, hairlines at rgba(149,126,104,.22),
   square corners, no shadows.
   ------------------------------------------------------------------------- */

/* ── THE READABLE WIDTH ───────────────────────────────────────────────────
   Item 1. This was `max-width: 100%`, which on a 27" monitor stretched
   forms, tables, calendars and paragraphs across 1,700px. A line of body
   copy that long is genuinely hard to read — the eye loses the return.

   1180px is not a guess. It is what the Air Dev reference actually renders
   its content column at, measured on 23 September 2026 with
   getBoundingClientRect at a 1563px viewport: content starts at x=310 (the
   240px sidebar plus the 70px gutter) and the band is 1183px wide.

   Flush left behind the gutter rather than centred in the remaining space,
   which is also what the reference does — the column is anchored to the
   sidebar, not floated in the middle of the window. */
.pt__inner {
  max-width: 1180px;
}

.pt__section { margin-top: 56px; }

.pt__stepmeta {
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 17px; line-height: 22.95px; color: #6B6259;
  margin: 6px 0 0; max-width: 58ch;
}

/* Sub-pages reuse the greeting as their page title. Same Storica line as the
   overview greeting so a couple never sees two different heading scales. */
.pt__section > .pt__sectionhead:first-child { margin-top: 0; }

/* ============================================================================
   ADDED WHEN THE CLIENT SUITE WAS CONVERTED
   ----------------------------------------------------------------------------
   suite.html renders from js/suite/suite.js, which was still the old
   white-card layout after the booking-flow portal had already been moved to
   this system. These are the classes that layout needs: the hero's text
   column, the date stacks in the deadline rows, and the row text itself.

   All of it obeys the same three rules as the rest of the file — square
   corners, no shadow, hairlines at rgba(149,126,104,.22).
   ========================================================================== */

/* The hero splits into a text column and the floated day count. */
.pt__herotext { flex: 1 1 auto; min-width: 0; }

/* ---- Deadline rows ------------------------------------------------------
   MONTH above DAY. A single "Mar 14" reads as data; the stack reads as a
   calendar, which is the Air Dev row signature. */
.pt__date {
  flex: 0 0 auto;
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.pt__datemonth {
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #655c54;
}

.pt__dateday {
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: #565F68;
  margin-top: 2px;
}

.pt__rowtext {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 17px;
  line-height: 22.95px;
  color: #3E3831;
}

.pt__sectionrow--late .pt__rowtext { color: #0D0D0D; }

.pt__sectionempty {
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 17px;
  line-height: 22.95px;
  color: #655c54;
  margin: 0;
}

/* A text button, not a boxed one — the section already has its own edges. */
.pt__more {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 0;
  min-height: 44px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(149, 126, 104, 0.45);
  border-radius: 0;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: #565F68;
  cursor: pointer;
}
.pt__more:hover { color: #0D0D0D; border-bottom-color: #0D0D0D; }
.pt__more:focus-visible { outline: 2px solid #565F68; outline-offset: 2px; }

@media (max-width: 767px) {
  .pt__date { width: 44px; }
  .pt__dateday { font-size: 22px; }
  .pt__rowtext { font-size: 16px; line-height: 21px; }
}

/* ---- Per-service section pages ------------------------------------------
   The Design Intensive's intake / connect / floor plan pages, Wedding
   Management's handover pages, and the two light appointment portals. Simple
   key–value rows in the same system: hairlines, no boxes. */
.pt__lede {
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 19px;
  line-height: 26px;
  color: #6B6259;
  margin: 0 0 8px;
  max-width: 56ch;
}

.pt__rowkey {
  flex: 0 0 auto;
  width: 180px;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: #655c54;
}

@media (max-width: 767px) {
  .pt__rowkey { width: 100%; margin-bottom: 4px; }
  .pt__sectionrow { flex-wrap: wrap; }
  .pt__lede { font-size: 17px; line-height: 24px; }
}

/* The planning-fee line under the summary columns. Quiet, but present —
   it is the sentence that stops a wedding budget being read as a fee. */
.pt__feenote {
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #655c54;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(149, 126, 104, 0.22);
  max-width: 62ch;
}

/* ==========================================================================
   THE REBUILT SECTIONS — September 2026 revision
   --------------------------------------------------------------------------
   Inspiration, questionnaires, the handover checklist, vendor records,
   documents & notes, the timeline, the budget and the guest list.

   The house rules hold throughout, because they are what make a screen read
   as this product rather than as a generic dashboard: square corners, no
   shadows, hairlines in --pt-rule, Storica for headings, values in the
   sidebar blue-grey rather than body ink.
   ========================================================================== */

/* ---- Shared form furniture ---------------------------------------------- */
.vr__filters {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  padding: 0 0 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--pt-rule);
}
.vr__flabel { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vr__flabel > span,
.vr__flab {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; font-weight: 300; letter-spacing: 1.44px;
  text-transform: uppercase; color: var(--pt-muted);
}
.vr__filters select,
.vr__filters input,
.vr__field input,
.vr__field select,
.vr__field textarea,
.insp__input,
.bd__inline {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: #0d0d0d;
  background: transparent;
  border: 1px solid var(--pt-rule);
  border-radius: 0;
  padding: 9px 11px;
  min-height: 40px;
  max-width: 100%;
}
.vr__field textarea, .vr__field input, .vr__field select { width: 100%; }
.vr__filters select:focus-visible,
.vr__field input:focus-visible,
.vr__field select:focus-visible,
.vr__field textarea:focus-visible,
.insp__input:focus-visible {
  outline: 2px solid var(--pt-slate); outline-offset: 1px;
}
.vr__field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.vr__fields {
  display: grid; gap: 14px 22px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.vr__field--wide { grid-column: 1 / -1; }
.vr__rowactions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.vr__archive, .insp__remove, .dn__del {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .04em;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pt-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.vr__archive:hover, .insp__remove:hover, .dn__del:hover { color: #0d0d0d; }

/* ---- Inspiration / Vision Board -------------------------------------------
   TIGHTENED — item 2. This page had a section heading, two lines of help
   text, a bordered link panel, a second section heading, the uploader, a
   third heading and then the images. Six blocks of chrome above the first
   photograph, under a watercolour band that had already said all of it.

   Now: label, field, dropzone, board. The page header does the explaining.
   ------------------------------------------------------------------------- */
.insp { margin-top: 4px; }

.insp__linkrow { margin-bottom: 18px; }
.insp__linklabel {
  display: block; margin-bottom: 7px;
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--pt-muted);
}
.insp__linkfield { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.insp__input { flex: 1 1 320px; min-width: 0; }

.insp__count {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .04em; color: var(--pt-muted);
  margin: 22px 0 10px;
}
.insp__empty { margin-top: 22px; }

/* ── ONE DROP ZONE, NOT A COLUMN OF BOXES ──────────────────────────────────
   Shallower than it was: this sits between the link and the board, and a
   90px-tall dashed rectangle in the middle of a page pushed the actual
   inspiration below the fold. */
.insp__drop, .dn__drop {
  border: 1px dashed rgba(149, 126, 104, .5);
  background: rgba(234, 227, 219, .28);
  padding: 26px 24px;
  text-align: center;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.dn__drop { margin-top: 16px; }
.insp__drop:hover, .dn__drop:hover { background: rgba(234, 227, 219, .5); }
.insp__drop:focus-visible, .dn__drop:focus-visible {
  outline: 2px solid var(--pt-slate); outline-offset: 2px;
}
.insp__drop--on, .dn__drop--on {
  background: rgba(86, 95, 104, .12);
  border-color: var(--pt-slate);
  border-style: solid;
}
.insp__dropbig, .dn__dropbig {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 15px; font-weight: 300; letter-spacing: 1.1px;
  text-transform: uppercase; color: #0d0d0d; margin: 0;
}
.insp__dropsmall, .dn__dropsmall {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted); margin: 5px 0 0;
}
.insp__dropbrowse { text-decoration: underline; text-underline-offset: 3px; color: #0d0d0d; }

/* ── MASONRY VIA CSS COLUMNS ───────────────────────────────────────────────
   Inspiration images are portrait, landscape and square in one board. A
   uniform grid either crops them — losing the thing she is pointing at — or
   letterboxes them into grey. Columns keep every image whole. */
.insp__grid { columns: 3 250px; column-gap: 18px; }
.insp__tile {
  break-inside: avoid; margin: 0 0 18px;
  border: 1px solid var(--pt-rule);
  background: rgba(255, 255, 255, .42);
}
.insp__img { display: block; width: 100%; height: auto; }
.insp__ph {
  display: grid; place-items: center; min-height: 130px; padding: 18px;
  text-align: center;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted);
  background: rgba(234, 227, 219, .5);
}
.insp__ph--error { color: #7a3b2e; background: rgba(160, 90, 70, .1); }

/* The caption is the point of the tile, so it is compact and always open —
   no heading, no label, no per-tile Save button. */
.insp__cap { padding: 10px 11px 11px; }
.insp__comment {
  width: 100%; resize: vertical;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; line-height: 1.38; color: #0d0d0d;
  background: transparent;
  border: 0; border-bottom: 1px solid transparent;
  border-radius: 0; padding: 2px 0;
}
.insp__comment:hover { border-bottom-color: var(--pt-rule); }
.insp__comment:focus { border-bottom-color: var(--pt-slate); outline: none; }
/* Full opacity: .8 on the new muted brown lands back under 4.5. A
   placeholder is real text and has to be readable. */
.insp__comment::placeholder { color: var(--pt-muted); opacity: 1; }

.insp__actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.insp__cat {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; letter-spacing: .04em;
  background: transparent; border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 3px 6px; min-height: 0; color: var(--pt-muted);
}
.insp__savec {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 7px 14px; cursor: pointer; color: #0d0d0d;
}
.insp__savec:hover { background: rgba(234, 227, 219, .6); }
.insp__saved {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; color: var(--pt-muted); margin-left: auto;
}
.insp__name {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; margin: 0 0 6px; color: var(--pt-muted); overflow-wrap: anywhere;
}
.insp__file { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---- Questionnaires ------------------------------------------------------ */
.qn__stats { margin-bottom: 26px; }
.qn__list { display: flex; flex-direction: column; }
.qn__row {
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
  padding: 20px 0; border-bottom: 1px solid var(--pt-rule);
}
.qn__row:last-child { border-bottom: 0; }
.qn__main { min-width: 0; }
.qn__title {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 17px; font-weight: 300; letter-spacing: .9px; text-transform: uppercase;
  color: #0d0d0d; margin: 0;
}
.qn__purpose {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: var(--pt-muted); margin: 6px 0 0; max-width: 62ch;
}
.qn__meta { display: flex; flex-wrap: wrap; gap: 18px; margin: 9px 0 0; }
.qn__meta span {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: .04em; color: var(--pt-muted);
}
.qn__side { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.qn__notyet {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; color: var(--pt-muted);
}
.qn__form { margin-top: 12px; }
.qn__field { padding: 14px 0; border-bottom: 1px solid var(--pt-rule); }
.qn__q {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; color: #0d0d0d; margin: 0; display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap;
}
.qn__qn {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 12px; letter-spacing: 1.2px; color: var(--pt-muted);
}
.qn__req {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--pt-muted);
}
.qn__help, .qn__type {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted); margin: 5px 0 0 0;
}
.qn__type { font-size: 14px; letter-spacing: .04em; }

/* ---- Handover checklist --------------------------------------------------- */
.hv__progress { padding-bottom: 6px; }
.hv__bar { height: 4px; background: rgba(149, 126, 104, .2); margin-bottom: 12px; }
.hv__barfill { display: block; height: 100%; background: var(--pt-slate); }
.hv__progresstext {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; color: #0d0d0d; margin: 0 0 8px;
}
.hv__list { display: flex; flex-direction: column; }
.hv__row {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 16px;
  align-items: start; padding: 18px 0; border-bottom: 1px solid var(--pt-rule);
}
.hv__row:last-child { border-bottom: 0; }
.hv__row--done .hv__title { color: var(--pt-muted); }
.hv__check input { width: 17px; height: 17px; accent-color: var(--pt-slate); }
.hv__title {
  display: block; cursor: pointer;
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 16px; font-weight: 300; letter-spacing: .8px; text-transform: uppercase;
  color: #0d0d0d;
}
.hv__detail, .hv__note {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: var(--pt-muted); margin: 6px 0 0; max-width: 64ch;
}
.hv__note { color: var(--pt-slate); }
.hv__side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.hv__due {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: .04em; color: var(--pt-muted); white-space: nowrap;
}
.hv__due--late { color: #7a3b2e; }
/* "No date" is information, not a disabled control — dimming it to .55 put
   it under the AA threshold. It is distinguished by wording instead. */
.hv__due--none { font-style: italic; }

/* ---- Vendor records ------------------------------------------------------- */
.vr__list { display: flex; flex-direction: column; }
.vr__card { border-bottom: 1px solid var(--pt-rule); }
.vr__head {
  display: grid; width: 100%; text-align: left; cursor: pointer;
  grid-template-columns: minmax(180px, 2fr) 1fr 1fr auto 1fr auto;
  gap: 18px; align-items: center;
  padding: 16px 0; background: none; border: 0;
}
.vr__head:hover { background: rgba(234, 227, 219, .34); }
.vr__head:focus-visible { outline: 2px solid var(--pt-slate); outline-offset: -2px; }
.vr__name {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 16px; font-weight: 300; letter-spacing: .8px; text-transform: uppercase;
  color: #0d0d0d; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.vr__flag {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; letter-spacing: .04em; text-transform: none; color: #7a3b2e;
}
.vr__cat, .vr__contact, .vr__docn {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted);
}
.vr__money {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: var(--pt-slate); text-align: right;
}
.vr__money em { display: block; font-style: normal; font-size: 13px; color: var(--pt-muted); }
.vr__detail { padding: 6px 0 24px; }
.vr__sub {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--pt-muted); margin: 22px 0 10px;
}
.vr__docs { border-top: 1px solid var(--pt-rule); margin-top: 18px; }
.vr__doc { gap: 14px; }
.vr__docview, .vr__docdel, .dn__view, .dn__edit {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: .04em;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px;
}
.vr__docview:hover, .vr__docdel:hover, .dn__view:hover, .dn__edit:hover { color: #0d0d0d; }
.vr__upload { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.vr__file { font-family: var(--font-body, 'Darker Grotesque'), sans-serif; font-size: 15px; }
.vr__gaps {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: #7a3b2e; margin: 18px 0 0;
}

/* ---- Documents & notes ---------------------------------------------------- */
.dn__table, .bd__table, .gl__table { margin-top: 18px; }
.dn__thead, .bd__thead, .gl__thead {
  display: grid; gap: 18px; padding: 0 0 9px;
  border-bottom: 1px solid var(--pt-rule);
}
.dn__trow, .bd__trow, .gl__trow {
  display: grid; gap: 18px; padding: 14px 0;
  border-bottom: 1px solid var(--pt-rule); align-items: center;
}
.dn__thead span, .bd__thead span, .gl__thead span {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; font-weight: 300; letter-spacing: 1.44px;
  text-transform: uppercase; color: var(--pt-muted);
}
.dn__trow span, .bd__trow span, .gl__trow span {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: #0d0d0d; min-width: 0; overflow-wrap: anywhere;
}
.dn__thead, .dn__trow { grid-template-columns: minmax(200px, 2.4fr) auto 1fr 1fr auto; }
.dn__acts { display: flex; gap: 14px; }
.dn__notes { display: flex; flex-direction: column; margin-top: 18px; }
.dn__note { padding: 18px 0; border-bottom: 1px solid var(--pt-rule); }
.dn__notehead { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.dn__notetitle {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 16px; font-weight: 300; letter-spacing: .8px; text-transform: uppercase;
  color: #0d0d0d; margin: 0;
}
.dn__notebody {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; line-height: 1.45; color: #0d0d0d; margin: 8px 0 0; max-width: 68ch;
}
.dn__notemeta {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 10px 0 0;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; color: var(--pt-muted);
}
.dn__editor { border: 1px solid var(--pt-rule); padding: 20px; margin-top: 16px; }

/* ---- Timeline -------------------------------------------------------------- */
.tl__topline {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.tl__count {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; color: var(--pt-muted); margin: 0;
}
.tl__topacts { display: flex; gap: 12px; flex-wrap: wrap; }
.tl__filters { border-top: 1px solid var(--pt-rule); padding-top: 18px; margin-bottom: 8px; }
.tl__filterlabel {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--pt-muted); margin: 0 0 10px; text-align: center;
}
.tl__chips { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.tl__chip {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 3px 0; cursor: pointer; color: var(--pt-muted);
}
.tl__chip:hover { color: #0d0d0d; }
.tl__chip--on { color: #0d0d0d; border-bottom-color: #0d0d0d; }
.tl__day { margin-top: 30px; }
.tl__dayhead {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 12px; font-weight: 300; letter-spacing: 1.44px; text-transform: uppercase;
  color: #0d0d0d; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--pt-rule);
}
.tl__entries { position: relative; }
/* The spine. Sits behind the dots, between the time gutter and the cards. */
.tl__entries::before {
  content: ''; position: absolute; top: 10px; bottom: 10px; left: 84px;
  width: 1px; background: var(--pt-rule);
}
.tl__entry {
  display: grid; grid-template-columns: 74px 21px 1fr; gap: 0;
  align-items: start; margin-bottom: 14px; position: relative;
}
.tl__time { padding-top: 14px; text-align: right; }
.tl__clock {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .04em; color: var(--pt-muted); white-space: nowrap;
}
.tl__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pt-linen); border: 1px solid var(--pt-muted);
  margin: 19px auto 0; position: relative; z-index: 1;
}
.tl__entry--key .tl__dot { background: var(--pt-slate); border-color: var(--pt-slate); }
.tl__card { border: 1px solid var(--pt-rule); padding: 15px 18px; background: rgba(255,255,255,.42); }
.tl__entry--key .tl__card { border-color: var(--pt-slate); }
.tl__cardhead { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.tl__title {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 16px; font-weight: 300; letter-spacing: .8px; text-transform: uppercase;
  color: #0d0d0d; margin: 0;
}
.tl__order { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.tl__move, .tl__edit {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--pt-muted);
}
.tl__move:disabled { opacity: .3; cursor: default; }
.tl__move:hover:not(:disabled), .tl__edit:hover { color: #0d0d0d; }
.tl__edit { text-decoration: underline; text-underline-offset: 3px; }
.tl__detail {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; line-height: 1.42; color: var(--pt-muted); margin: 7px 0 0; max-width: 68ch;
}
.tl__meta { display: flex; gap: 20px; flex-wrap: wrap; margin: 9px 0 0; }
.tl__owner, .tl__where {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: .04em; color: var(--pt-slate);
}
.tl__where { color: var(--pt-muted); }
.tl__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tl__tag {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pt-linen); background: var(--pt-slate); padding: 4px 9px;
}
.tl__editor { border-top: 1px solid var(--pt-rule); margin-top: 16px; padding-top: 16px; }
.tl__audset { border: 0; padding: 0; margin: 12px 0 0; }
.tl__audset legend { padding: 0; }
.tl__audopt {
  display: inline-flex; gap: 7px; align-items: center; margin: 8px 18px 0 0;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif; font-size: 15px;
}

/* ---- Budget ----------------------------------------------------------------- */
.bd__fee { margin-bottom: 20px; }
.bd__bar { display: flex; height: 6px; background: rgba(149, 126, 104, .2); margin-top: 6px; }
.bd__seg { display: block; height: 100%; }
.bd__seg--paid { background: var(--pt-slate); }
.bd__seg--committed { background: rgba(86, 95, 104, .42); }
.bd__legend {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin: 10px 0 0;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: .04em; color: var(--pt-muted);
}
.bd__legend span { display: inline-flex; gap: 7px; align-items: center; }
.bd__key { width: 9px; height: 9px; display: inline-block; }
.bd__key--paid { background: var(--pt-slate); }
.bd__key--committed { background: rgba(86, 95, 104, .42); }
.bd__key--free { background: rgba(149, 126, 104, .2); }
.bd__legendpct { margin-left: auto; }
.bd__tabs {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--pt-rule); padding-bottom: 12px; margin-bottom: 4px;
}
.bd__tab {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 12px; font-weight: 300; letter-spacing: 1.44px; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 4px 0; cursor: pointer; color: var(--pt-muted);
}
.bd__tab--on { color: #0d0d0d; border-bottom-color: #0d0d0d; }
.bd__tabn {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: 0; margin-left: 6px; color: var(--pt-muted);
}
.bd__adjust { margin-left: auto; }
.bd__totaledit { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; width: 100%; }
.bd__thead, .bd__trow { grid-template-columns: minmax(180px, 2fr) 1fr 1fr 1fr 1fr auto; }
.bd__table--p .bd__thead, .bd__table--p .bd__trow {
  grid-template-columns: minmax(190px, 2.2fr) 1.2fr 1.2fr 1fr .9fr auto;
}
.bd__cat, .bd__desc {
  font-family: var(--font-display, Storica), Georgia, serif !important;
  font-size: 15px !important; letter-spacing: .8px; text-transform: uppercase;
}
.bd__desc em, .bd__note {
  display: block; font-style: normal; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif; font-size: 14px;
  color: var(--pt-muted); margin-top: 4px;
}
.bd__flag, .bd__over { color: #7a3b2e; }
.bd__flag {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 13px; letter-spacing: .04em; text-transform: none; margin-left: 8px;
}
.bd__trow--over .bd__cat { color: #7a3b2e; }
.bd__owing { color: var(--pt-slate); }
.bd__late { color: #7a3b2e; }
.bd__late em { display: block; font-style: normal; font-size: 13px; }
.bd__inline { max-width: 110px; }
.bd__acts { display: flex; gap: 12px; justify-content: flex-end; }

/* ---- Guest list --------------------------------------------------------------- */
.gl__topacts { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.gl__search { flex: 1 1 260px; }
.gl__thead, .gl__trow {
  grid-template-columns: minmax(190px, 2.2fr) .7fr 1fr .8fr 1.6fr 1fr;
}
.gl__table--ind .gl__thead, .gl__table--ind .gl__trow {
  grid-template-columns: minmax(170px, 1.6fr) 1.4fr .9fr .7fr 1fr 1.4fr;
}
.gl__name { font-weight: 500; }
.gl__name em {
  display: block; font-style: normal; font-size: 14px; color: var(--pt-muted); margin-top: 3px;
}
.gl__email { overflow-wrap: anywhere; }
.gl__diet { color: var(--pt-muted) !important; font-size: 15px !important; }
.gl__meals { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 14px; }
.gl__meal { display: flex; flex-direction: column; gap: 4px; }
.gl__mealn {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 34px; font-weight: 300; line-height: 1; color: var(--pt-slate);
}
.gl__meallabel {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--pt-muted);
}

/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   Every grid above collapses to stacked rows on a narrow screen. The tables
   become label/value pairs rather than six columns squeezed into 375px,
   which is what produced horizontal overflow before.
   ========================================================================== */
@media (max-width: 1100px) {
  .insp__grid { columns: 2 220px; }
  .vr__head { grid-template-columns: minmax(150px, 2fr) 1fr auto 1fr; }
  .vr__contact, .vr__docn { display: none; }
}

@media (max-width: 900px) {
  .bd__thead, .gl__thead, .dn__thead { display: none; }
  .bd__trow, .gl__trow, .dn__trow {
    grid-template-columns: 1fr; gap: 6px; padding: 16px 0;
  }
  .bd__acts, .dn__acts { justify-content: flex-start; }
  .tl__entry { grid-template-columns: 62px 17px 1fr; }
  .tl__entries::before { left: 70px; }
  .qn__row { flex-direction: column; gap: 14px; }
  .qn__side { justify-content: flex-start; }
  .hv__row { grid-template-columns: 24px 1fr; }
  .hv__side { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
}

@media (max-width: 760px) {
  .insp__grid { columns: 1; }
  .vr__head {
    grid-template-columns: 1fr; gap: 6px; text-align: left;
  }
  .vr__money { text-align: left; }
  .vr__cat, .vr__contact, .vr__docn { display: block; }
  .tl__chips { gap: 16px; justify-content: flex-start; }
  .tl__filterlabel { text-align: left; }
  .tl__entry { grid-template-columns: 54px 15px 1fr; }
  .tl__entries::before { left: 61px; }
  .bd__adjust, .gl__topacts { margin-left: 0; }
  .vr__filters { gap: 14px; }
  .gl__meals { gap: 26px; }
}

/* ==========================================================================
   PRINT — the timeline's "Print / PDF"
   --------------------------------------------------------------------------
   Everything that is navigation, demo scaffolding or an editing control comes
   off, and what is left is the run of show on white paper. This is what makes
   the print button produce something a vendor can actually be handed.
   ========================================================================== */
@media print {
  .pt__side, .dash__mobilenav, .topbar,
  .demo-banner, .demo-switch, .demonav, .demonav__toggle,
  .tl__filters, .tl__topacts, .tl__order, .tl__editor,
  .pt__cards, .pt__more { display: none !important; }

  .pt { display: block; }
  .pt__main { padding: 0; }
  .pt__inner { max-width: 100%; }
  .pt__hero {
    min-height: 0; padding: 0 0 18px; background: none;
    border-bottom: 1px solid #ccc; color: #000;
  }
  .pt__hero::before, .pt__hero::after { display: none; }
  .pt__herolabel, .pt__heroname, .pt__herolede, .pt__herometa,
  .pt__herodays, .pt__herodayslabel { color: #000 !important; }
  .tl__card { border-color: #ccc; background: none; }
  .tl__tag { background: none; color: #444; border: 1px solid #bbb; }
  .tl__entry { break-inside: avoid; }
}

/* The over-allocation warning. Not a red box — in this system emphasis is
   position and wording, and a scarlet panel would be the loudest thing on a
   page about money the couple has not yet spent. */
.bd__warn {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; line-height: 1.45; color: #7a3b2e;
  border-left: 2px solid #7a3b2e; padding: 2px 0 2px 14px;
  margin: 16px 0 0; max-width: 66ch;
}

/* ==========================================================================
   THE QUESTIONNAIRE RUNNER
   --------------------------------------------------------------------------
   One component, three services. The card list reuses .qn__row from the
   earlier build; everything below dresses the form that expands INSIDE it.

   ── THE DRAWER IS PART OF THE CARD ────────────────────────────────────────
   Not a modal, not a panel at the bottom of the page. It is nested markup,
   so it cannot drift out of position, cannot be scrolled past, and needs no
   focus trap or overlay to be usable on a phone.
   ========================================================================== */
.qn__cardhead {
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
}
.qn__row--open { background: rgba(234, 227, 219, .26); }
.qn__row--open .qn__cardhead { padding-bottom: 4px; }
.qn__drawer { margin-top: 6px; }

.qr {
  border-top: 1px solid var(--pt-rule);
  padding-top: 18px; margin-top: 12px;
}

/* ---- Progress ------------------------------------------------------------ */
.qr__bar { margin-bottom: 18px; }
.qr__track { height: 3px; background: rgba(149, 126, 104, .2); }
.qr__fill { display: block; height: 100%; background: var(--pt-slate); transition: width .2s ease; }
.qr__meta {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted); margin: 8px 0 0;
}
.qr__saved { color: var(--pt-slate); }
.qr__readonly {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted);
  border-left: 2px solid var(--pt-rule); padding-left: 12px; margin: 0 0 16px;
}

/* ---- Sections ------------------------------------------------------------ */
.qr__sections {
  display: flex; gap: 22px; flex-wrap: wrap;
  border-bottom: 1px solid var(--pt-rule); padding-bottom: 10px; margin-bottom: 18px;
}
.qr__section {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 10px; font-weight: 300; letter-spacing: 1.3px; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 3px 0; cursor: pointer; color: var(--pt-muted);
}
.qr__section:hover { color: #0d0d0d; }
.qr__section--on { color: #0d0d0d; border-bottom-color: #0d0d0d; }

.qr__errors {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; line-height: 1.45; color: #7a3b2e;
  border-left: 2px solid #7a3b2e; padding: 2px 0 2px 14px; margin: 0 0 18px;
}

/* ---- Fields --------------------------------------------------------------- */
.qr__fields { border: 0; padding: 0; margin: 0; min-width: 0; }
/* ── A SUBMITTED QUESTIONNAIRE MUST STILL BE READABLE ──────────────────
   This dimmed the whole fieldset to .72, which is every question AND every
   answer on a form the couple has already sent — exactly the text item 1
   says is too light. Read-only is now signalled by the disabled CONTROLS
   (dashed borders, see .qr__choice:disabled) and by the explanatory line
   above the form, not by fading the content. */
.qr__fields[disabled] { opacity: 1; }
.qr__fields[disabled] .qr__input {
  background: rgba(149, 126, 104, .07);
  border-style: dashed;
  color: #0d0d0d;
}
.qr__legend {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 11px; letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--pt-muted); padding: 0; margin-bottom: 14px;
}
.qr__field { margin-bottom: 20px; max-width: 62ch; }
.qr__qhead { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.qr__label {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; line-height: 1.35; color: #0d0d0d;
}
.qr__req {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pt-muted);
}
.qr__help {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted); margin: 4px 0 0;
}
.qr__input {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: #0d0d0d; background: transparent;
  border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 9px 11px; margin-top: 8px; width: 100%; min-height: 42px;
}
.qr__input--sm { max-width: 220px; }
.qr__textarea { resize: vertical; line-height: 1.45; }
.qr__input:focus-visible { outline: 2px solid var(--pt-slate); outline-offset: 1px; }

/* Choices are buttons, not radios: a 44px target on a phone, and the
   selected state is legible without relying on the native control. */
.qr__choices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.qr__choice {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .02em;
  background: transparent; border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 9px 14px; min-height: 40px; cursor: pointer; color: #0d0d0d;
}
.qr__choice:hover { background: rgba(234, 227, 219, .6); }
.qr__choice--on { background: var(--pt-slate); border-color: var(--pt-slate); color: var(--pt-linen); }
.qr__choice:focus-visible { outline: 2px solid var(--pt-slate); outline-offset: 2px; }

.qr__field--ack { margin-bottom: 20px; max-width: 62ch; }
.qr__ack { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.qr__ack input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--pt-slate); }
.qr__ack span {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; line-height: 1.4; color: #0d0d0d;
}
.qr__ack em {
  font-style: normal; font-size: 11px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--pt-muted); margin-left: 6px;
}

.qr__money { display: flex; align-items: center; gap: 0; margin-top: 8px; }
.qr__prefix {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: var(--pt-muted);
  border: 1px solid var(--pt-rule); border-right: 0; padding: 9px 10px; min-height: 42px;
  display: flex; align-items: center;
}
.qr__money .qr__input { margin-top: 0; max-width: 200px; }

.qr__upload { margin-top: 10px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qr__file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qr__uploadbtn {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--pt-rule); padding: 9px 14px; cursor: pointer; color: #0d0d0d;
}
.qr__uploadbtn:hover { background: rgba(234, 227, 219, .6); }
.qr__nofile, .qr__files {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted); margin: 0; padding: 0; list-style: none;
}

.qr__contact, .qr__repeatfields {
  display: grid; gap: 12px 18px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.qr__sub { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qr__sub > span {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pt-muted);
}
.qr__sub input, .qr__sub select {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; background: transparent; color: #0d0d0d;
  border: 1px solid var(--pt-rule); border-radius: 0; padding: 8px 10px; min-height: 38px;
  width: 100%;
}

.qr__repeat { margin-top: 10px; }
.qr__repeatrow {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 14px;
  align-items: start; padding: 14px 0; border-bottom: 1px solid var(--pt-rule);
}
.qr__repeatn {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 11px; letter-spacing: 1.2px; color: var(--pt-muted); padding-top: 18px;
}
.qr__rowdel, .qr__addrow, .qr__later {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px;
}
.qr__rowdel { padding-top: 18px; }
.qr__addrow { margin-top: 14px; }
.qr__rowdel:hover, .qr__addrow:hover, .qr__later:hover { color: #0d0d0d; }

/* ---- Actions --------------------------------------------------------------- */
.qr__actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--pt-rule); padding-top: 18px; margin-top: 6px;
}
.qr__spacer { flex: 1 1 auto; }
.qr__nav {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 9px 16px; cursor: pointer; color: #0d0d0d;
}
.qr__nav:hover:not(:disabled) { background: rgba(234, 227, 219, .6); }
.qr__nav:disabled { opacity: .35; cursor: default; }

@media (max-width: 760px) {
  .qn__cardhead { flex-direction: column; gap: 12px; }
  .qr__sections { gap: 14px; }
  .qr__field, .qr__field--ack { max-width: 100%; }
  .qr__repeatrow { grid-template-columns: 1fr; gap: 8px; }
  .qr__repeatn, .qr__rowdel { padding-top: 0; }
  .qr__actions { gap: 10px; }
  .qr__spacer { flex-basis: 100%; height: 0; }
  .qr__input--sm { max-width: 100%; }
}

/* ==========================================================================
   THE TWO ISSUED DOCUMENTS
   --------------------------------------------------------------------------
   Item 2. Agreement and invoice, side by side, above everything else on
   Documents & Notes — because they are the two files a couple opens this
   page to find, and burying them in a list with the venue's parking map is
   how a client ends up emailing to ask for their own contract.

   Two cards rather than a table: an invoice has figures that want their own
   small grid, and an agreement has none. A shared table would have four
   empty cells on every agreement row.
   ========================================================================== */
.dn__issued {
  display: grid; gap: 20px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.dn__doc {
  border: 1px solid var(--pt-rule);
  background: rgba(255, 255, 255, .42);
  padding: 22px 24px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.dn__dockind {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--pt-muted); margin: 0;
}
.dn__doctitle {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 17px; font-weight: 300; letter-spacing: .8px; text-transform: uppercase;
  color: #0d0d0d; margin: 0; line-height: 1.25;
}
.dn__docmeta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted);
}
.dn__figures {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--pt-rule);
}
.dn__figures div { min-width: 0; }
.dn__figures dt {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pt-muted); margin: 0 0 3px;
}
.dn__figures dd {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 17px; color: var(--pt-slate); margin: 0; overflow-wrap: anywhere;
}
.dn__docacts {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: auto; padding-top: 14px;
}
.dn__dl {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px;
}
.dn__dl:hover { color: #0d0d0d; }

@media (max-width: 760px) {
  .dn__issued { grid-template-columns: 1fr; gap: 16px; }
  .dn__figures { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   SHEET — the one modal / drawer
   --------------------------------------------------------------------------
   Item 13. Square corners, hairlines, no shadow on the panel itself — the
   scrim does the separating, which is what keeps it inside the Air Dev
   language rather than looking like a bootstrap dialog dropped on top.
   ========================================================================== */
.sheet { position: fixed; inset: 0; z-index: 900; display: flex; }
.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(28, 24, 22, .46);
}
.sheet__panel {
  position: relative; z-index: 1;
  background: var(--surface-canvas, #f2ede8);
  border: 1px solid var(--pt-rule);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 64px);
  width: min(620px, calc(100vw - 48px));
  margin: auto;
}
.sheet--drawer { justify-content: flex-end; }
.sheet--drawer .sheet__panel {
  margin: 0; max-height: 100vh; height: 100vh;
  width: min(560px, 100vw);
  border-right: 0; border-top: 0; border-bottom: 0;
}

.sheet__head {
  display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
  padding: 22px 26px 16px; border-bottom: 1px solid var(--pt-rule);
}
.sheet__title {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 17px; font-weight: 300; letter-spacing: 1.1px; text-transform: uppercase;
  color: #0d0d0d; margin: 0;
}
.sheet__sub {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: var(--pt-muted); margin: 5px 0 0;
}
.sheet__x {
  background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--pt-muted); padding: 0 2px;
}
.sheet__x:hover { color: #0d0d0d; }

.sheet__body { padding: 20px 26px; overflow-y: auto; flex: 1 1 auto; }
.sheet__fields {
  display: grid; gap: 16px 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sheet__field { min-width: 0; }
.sheet__field--wide { grid-column: 1 / -1; }
.sheet__label {
  display: block;
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--pt-muted); margin-bottom: 6px;
}
/* "Required" is real text, not decoration — .8 put it back under AA. It is
   already distinguished by being small and uppercase. */
.sheet__req { margin-left: 8px; }
.sheet__help {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; color: var(--pt-muted); margin: 0 0 6px;
}
.sheet__input {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: #0d0d0d; background: transparent;
  border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 9px 11px; width: 100%; min-height: 42px;
}
.sheet__input:focus-visible { outline: 2px solid var(--pt-slate); outline-offset: 1px; }
.sheet__error {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; color: #7a3b2e; margin: 5px 0 0;
}
.sheet__checks { display: flex; gap: 10px 18px; flex-wrap: wrap; }
.sheet__check {
  display: inline-flex; gap: 7px; align-items: center;
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif; font-size: 15px;
}

.sheet__foot {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 16px 26px 20px; border-top: 1px solid var(--pt-rule);
}
.sheet__spacer { flex: 1 1 auto; }
.sheet__save {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--pt-slate); color: var(--pt-linen);
  border: 1px solid var(--pt-slate); border-radius: 0;
  padding: 10px 20px; cursor: pointer;
}
.sheet__save:hover { background: #4a525a; }
.sheet__cancel {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 10px 18px; cursor: pointer; color: #0d0d0d;
}
.sheet__cancel:hover { background: rgba(234, 227, 219, .6); }
.sheet__delete {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px;
}
.sheet__delete:hover { color: #7a3b2e; }
.sheet__delete--armed { color: #7a3b2e; font-weight: 600; text-decoration: none; }

@media (max-width: 760px) {
  /* Full-bleed on a phone. A 620px panel inside a 375px viewport with 24px
     margins leaves 327px for a form — enough to be cramped and not enough
     to be usable. */
  .sheet__panel, .sheet--drawer .sheet__panel {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    margin: 0; border: 0;
  }
  .sheet { align-items: stretch; }
  .sheet__fields { grid-template-columns: 1fr; }
  .sheet__foot { padding-bottom: 28px; }
}

/* A control that cannot be used must not look like one that can. */
.qr__choice:disabled, .qr__choice[disabled] {
  opacity: .5; cursor: default; background: transparent;
  border-style: dashed;
}
.qr__choice--on:disabled, .qr__choice--on[disabled] {
  opacity: .8; background: rgba(86, 95, 104, .5); border-style: solid;
}
.vr__editbtn {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 14px; letter-spacing: .04em;
  background: none; border: 0; padding: 4px 0 12px; cursor: pointer;
  color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px;
}
.vr__editbtn:hover { color: #0d0d0d; }

/* ==========================================================================
   ACCOUNT & ACCESS
   ========================================================================== */
.acct__notice {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: var(--pt-slate);
  border-left: 2px solid var(--pt-slate); padding: 4px 0 4px 14px;
  margin: 0 0 18px; max-width: 68ch;
}
.acct__lede { max-width: 66ch; }
.acct__grid {
  display: grid; gap: 16px 22px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 720px;
}
.acct__grid--narrow { grid-template-columns: minmax(220px, 340px); }
.acct__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acct__label {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--pt-muted);
}
.acct__input {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: #0d0d0d; background: transparent;
  border: 1px solid var(--pt-rule); border-radius: 0;
  padding: 9px 11px; min-height: 42px; width: 100%;
}
.acct__input:focus-visible { outline: 2px solid var(--pt-slate); outline-offset: 1px; }
.acct__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.acct__error {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: #7a3b2e;
  border-left: 2px solid #7a3b2e; padding: 2px 0 2px 12px; margin: 16px 0 0; max-width: 60ch;
}
.acct__link {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pt-muted); text-decoration: underline; text-underline-offset: 3px;
}
.acct__link:hover { color: #0d0d0d; }
.acct__link--warn:hover { color: #7a3b2e; }

.acct__table { margin-top: 4px; }
.acct__thead, .acct__trow {
  display: grid; gap: 16px; align-items: center;
  grid-template-columns: minmax(170px, 1.7fr) 1fr 1.2fr .8fr .7fr auto;
  padding: 13px 0; border-bottom: 1px solid var(--pt-rule);
}
.acct__thead { padding-top: 0; }
.acct__thead span {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 9px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--pt-muted);
}
.acct__trow span {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 16px; color: #0d0d0d; min-width: 0; overflow-wrap: anywhere;
}
.acct__name em {
  display: block; font-style: normal; font-size: 14px; color: var(--pt-muted); margin-top: 3px;
}
.acct__rowacts { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

.acct__cards {
  display: grid; gap: 18px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 760px;
}
.acct__card {
  border: 1px solid var(--pt-rule); background: rgba(255, 255, 255, .42);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
}
.acct__card--default { border-color: var(--pt-slate); }
.acct__cardbrand {
  font-family: var(--font-display, Storica), Georgia, serif;
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--pt-muted); margin: 0;
}
.acct__cardnum {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 19px; letter-spacing: .08em; color: #0d0d0d; margin: 0;
}
.acct__cardexp {
  font-family: var(--font-body, 'Darker Grotesque'), sans-serif;
  font-size: 15px; color: var(--pt-muted); margin: 0;
}
.acct__cardacts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }

@media (max-width: 900px) {
  .acct__thead { display: none; }
  .acct__trow { grid-template-columns: 1fr; gap: 6px; }
  .acct__rowacts { justify-content: flex-start; margin-top: 6px; }
}
@media (max-width: 760px) {
  .acct__grid, .acct__grid--narrow { grid-template-columns: 1fr; }
  .acct__cards { grid-template-columns: 1fr; }
}