/* The hidden attribute means hidden, whatever else a selector says.
   Without this a rule that sets display on an element type quietly
   outranks it, because [hidden] is one attribute against a class or a
   type plus attribute. That is how a date picker stayed on screen next
   to the Sold out field that had just replaced it. Three rules further
   down patch single cases of the same thing and predate this; they are
   left alone because they are correct, not because they are needed. */
[hidden] { display: none !important; }

/* ParkWelly brand system
   Charcoal and parchment carry the interface. Deep green is the brand
   signature, champagne brass is reserved for primary actions and premium
   detail. Stone, terracotta and moss are functional states only. */

:root {
  --charcoal: #111312;
  --charcoal-soft: #1b1e1c;
  --green: #163F32;
  --green-bright: #1e5643;
  --brass: #D6B77B;
  --brass-deep: #c2a05f;
  --parchment: #EFE8DA;
  --porcelain: #F7F3EB;
  --stone: #7A7D75;
  --terracotta: #B84C3A;
  --moss: #7A9652;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--parchment);
  color: var(--charcoal);
  line-height: 1.6;
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; line-height: 1.12; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: 18px;
}

/* Header */
.site-header {
  background: var(--charcoal);
  color: var(--porcelain);
  border-bottom: 1px solid rgba(214, 183, 123, 0.25);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  max-width: none;
}
.wordmark {
  font-family: var(--serif);
  font-size: 26px;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.logo-mark { width: 40px; height: 40px; margin-right: 12px; }
.site-footer .wordmark .logo-mark { width: 34px; height: 34px; }
.wordmark .wealth { color: var(--porcelain); }
.wordmark .welly { color: var(--brass); }
.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.head-right { display: flex; align-items: center; gap: 18px; }
/* One door for everybody who is not signed in. Solid brass, because it
   is the only thing in the header asking to be pressed. */
.my-wealthwelly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brass);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.my-wealthwelly:hover { background: var(--porcelain); }
.my-wealthwelly svg { width: 17px; height: 17px; flex: none; }
/* Two of these only exist at one width or the other. Sign up sits beside
   Log in on a wide screen and inside the burger on a narrow one, so
   whichever is showing is the only one in the accessibility tree. */
.in-burger { display: none; }
.burger { display: none; }
.main-nav a {
  color: var(--porcelain);
  text-decoration: none;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  font-weight: 600;
  opacity: 0.9;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--brass); opacity: 1; }
.main-nav a.nav-cta {
  border: 1px solid var(--brass);
  color: var(--brass);
  padding: 8px 16px;
  border-radius: 3px;
}
.main-nav a.nav-cta:hover { background: var(--brass); color: var(--charcoal); }
/* Account menu: brass box with hover dropdown */
.user-menu { position: relative; }
.user-box {
  display: inline-block;
  background: var(--brass);
  color: var(--charcoal) !important;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 14.5px;
}
.user-box:hover { background: var(--brass-deep); color: var(--charcoal); }
/* The menu forgives a wandering cursor: it holds for a beat after the
   pointer leaves, and the transparent padding bridges the gap between
   the button and the list so a diagonal exit does not close it.
   visibility rather than display, because display cannot be delayed. */
.user-drop {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: -12px;
  top: 100%;
  padding: 12px 12px 14px;
  min-width: 220px;
  z-index: 1100;
  transition: visibility 0s linear 0.45s, opacity 0.14s ease 0.31s;
}
.user-menu:hover .user-drop, .user-menu:focus-within .user-drop,
.user-drop:hover {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.12s ease;
}
.user-drop > a, .user-drop button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--charcoal);
  color: var(--porcelain);
  border: 1px solid rgba(214, 183, 123, 0.35);
  border-top: none;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--sans);
  cursor: pointer;
}
.user-drop > a:first-child { border-top: 2px solid var(--brass); border-radius: 3px 3px 0 0; }
.user-drop form { margin: 0; }
.user-drop button { border-radius: 0 0 3px 3px; color: var(--terracotta); }
.user-drop > a:hover, .user-drop button:hover { background: var(--green); color: var(--brass); }

.nav-badge {
  display: inline-block;
  background: var(--terracotta);
  color: var(--porcelain);
  border-radius: 9px;
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--brass);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  border-radius: 3px;
  padding: 14px 26px;
  /* anchors inherit the page line-height while buttons default to their
     own, which made a-buttons and button-buttons different heights */
  line-height: 1.4;
  cursor: pointer;
}
.btn:hover { background: var(--brass-deep); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--brass);
  color: var(--brass);
}
.btn-outline:hover { background: var(--brass); color: var(--charcoal); }
.btn-dark { background: var(--green); color: var(--porcelain); }
.btn-dark:hover { background: var(--green-bright); }
.btn-small { padding: 8px 15px; font-size: 13px; }
.btn-danger { background: transparent; border: 1px solid var(--terracotta); color: var(--terracotta); }
.btn-danger:hover { background: var(--terracotta); color: var(--porcelain); }

/* Hero */
.hero {
  background: var(--charcoal);
  color: var(--porcelain);
  position: relative;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner {
  max-width: 680px;
  padding: 110px 0 84px;
}
.hero h1 {
  font-size: clamp(44px, 6.5vw, 76px);
  color: var(--porcelain);
  margin-bottom: 12px;
}
.hero p.lede {
  color: rgba(247, 243, 235, 0.75);
  font-size: 18px;
  max-width: 34em;
  margin-bottom: 36px;
}
.hero-boot {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--brass);
  margin: 4px 0 26px;
}

/* Sections */
.section { padding: 80px 0; }
.section-dark { background: var(--charcoal); color: var(--porcelain); }
.section-green { background: var(--green); color: var(--porcelain); }

/* Brass ring motif from the share card, echoed on dark surfaces */
.section-dark, .section-green, .page-head { position: relative; overflow: hidden; }
.section-dark::before, .section-green::before, .page-head::before {
  content: "";
  position: absolute;
  right: -190px;
  top: -340px;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
    transparent 0 104px,
    rgba(214, 183, 123, 0.16) 104px 105.5px);
  pointer-events: none;
}
.section-dark > .wrap, .section-green > .wrap, .page-head > .wrap { position: relative; }
.section-porcelain { background: var(--porcelain); }
.section h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 20px; }
.section .sub { color: var(--stone); max-width: 44em; margin-bottom: 44px; font-size: 17px; }
.section-dark .sub, .section-green .sub { color: rgba(247, 243, 235, 0.7); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-detail { grid-template-columns: 1.4fr 1fr; align-items: start; }
.detail-side { position: sticky; top: 92px; }

.card {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.1);
  border-radius: 4px;
  padding: 32px 28px;
}
.section-dark .card, .section-green .card {
  background: rgba(247, 243, 235, 0.05);
  border-color: rgba(214, 183, 123, 0.3);
  color: var(--porcelain);
}
.card h3, .card .card-h { font-size: 22px; margin-bottom: 12px; }
.card p { font-size: 15px; color: var(--stone); }
.section-dark .card p, .section-green .card p { color: rgba(247, 243, 235, 0.7); }
.card .step-no {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--brass);
  display: block;
  margin-bottom: 14px;
}

.pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 700;
  border-radius: 3px;
  padding: 3px 9px;
  vertical-align: middle;
}
.pill-green { background: var(--green); color: var(--porcelain); }
.pill-brass { background: var(--brass); color: var(--charcoal); }
.pill-stone { background: rgba(122, 125, 117, 0.18); color: var(--stone); }
.pill-terracotta { background: var(--terracotta); color: var(--porcelain); }
.pill-moss { background: var(--moss); color: var(--porcelain); }

/* Forms */
.form-card {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.12);
  border-radius: 4px;
  padding: 40px;
  max-width: 560px;
}
.form-wide { max-width: 760px; }
.form-row { margin-bottom: 22px; }
.form-row label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--stone);
  margin-bottom: 7px;
}
.form-row input[type=text], .form-row input[type=email],
.form-row input[type=password], .form-row input[type=number],
.form-row input[type=date], .form-row input[type=datetime-local],
.form-row input[type=tel],
.form-row select, .form-row textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 19, 18, 0.25);
  border-radius: 3px;
  background: #fff;
  color: var(--charcoal);
}
/* iOS Safari sizes date and datetime inputs by their UA intrinsics and
   ignores width: 100% unless appearance is reset, which is why they
   overflowed the booking card on phones. */
.form-row input[type=date], .form-row input[type=datetime-local] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  max-width: 100%;
  min-width: 0;
  min-height: 47px;
  text-align: left;
}
.form-row textarea { min-height: 110px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--brass);
  border-color: var(--brass);
}
.form-row .hint { font-size: 13px; color: var(--stone); margin-top: 5px; }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* A single-line capture field (email, postcode, feed url) used in the
   strips on home, hosts, business, search, 404, and in two back-office
   forms. This was the same inline style copied onto thirteen inputs.
   The values are unchanged; they just live somewhere the phone media
   query can reach, because iOS zooms the page on any field under 16px
   and an inline style cannot be overridden. */
.inline-field {
  padding: 12px;
  border: 1px solid rgba(17, 19, 18, 0.25);
  border-radius: 3px;
  font-size: 15px;
}
.inline-field-tight { padding: 11px; font-size: 14px; }
.inline-field-sm { padding: 6px 8px; font-size: 13px; }
.inline-field-dark {
  padding: 14px;
  border: 1px solid rgba(214, 183, 123, 0.5);
  border-radius: 3px;
  background: rgba(247, 243, 235, 0.06);
  color: var(--porcelain);
  font-size: 15px;
}

.checkbox-row { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; }

/* Flash messages */
.flash-stack { margin: 24px auto 0; }
.flash {
  background: var(--green);
  color: var(--porcelain);
  border-left: 4px solid var(--brass);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: 15px;
}

/* Email capture on pages that already have something to show: quiet
   enough not to compete with the results, present enough to be seen. */
.watch-strip {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 16px 18px;
  background: rgba(17, 19, 18, 0.04);
  border-left: 3px solid var(--brass);
  border-radius: 3px;
}
.watch-strip .watch-title { font-weight: 600; font-size: 15px; }
.watch-strip form { display: flex; gap: 8px; flex-wrap: wrap; }
.watch-strip input[type="email"] {
  padding: 10px 12px;
  border: 1px solid rgba(17, 19, 18, 0.25);
  border-radius: 3px;
  font-size: 14px;
  min-width: 190px;
}
@media (max-width: 640px) {
  .watch-strip form, .watch-strip input[type="email"] { width: 100%; }
}

/* An inline warning that reads like the flash banner but sits in the
   page flow, for a caution about what is already on screen. */
.notice {
  background: var(--porcelain);
  border-left: 4px solid var(--brass);
  border-radius: 3px;
  padding: 14px 18px;
  font-size: 15px;
}
.notice-warn { border-left-color: var(--terracotta); background: rgba(180, 92, 62, 0.08); }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; background: var(--porcelain); font-size: 14.5px; }
.data-table th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--stone);
  border-bottom: 2px solid var(--charcoal);
  padding: 10px 12px;
}
.data-table td { padding: 12px; border-bottom: 1px solid rgba(17, 19, 18, 0.1); vertical-align: top; }
.table-scroll { overflow-x: auto; border: 1px solid rgba(17, 19, 18, 0.12); border-radius: 4px; }

/* Page headers for inner pages */
.page-head { background: var(--charcoal); color: var(--porcelain); padding: 64px 0 56px; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); }
.page-head p { color: rgba(247, 243, 235, 0.7); margin-top: 14px; max-width: 40em; font-size: 17px; }

/* Prose (faq, terms) */
.prose { max-width: 720px; }
.prose h2 { font-size: 26px; margin: 36px 0 12px; }
.prose h3 { font-size: 20px; margin: 26px 0 10px; }
.prose p, .prose li { color: #3a3d3b; margin-bottom: 12px; font-size: 16px; }
.prose ul { padding-left: 22px; }

/* Stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.12);
  border-radius: 4px;
  padding: 22px;
}
.stat .n { font-family: var(--serif); font-size: 34px; display: block; }

/* Account area: vertical menu card on the left, content on the right */
.account-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 28px;
  max-width: 1420px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  align-items: start;
}
.account-side { position: sticky; top: 96px; }
.account-nav-card {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.12);
  border-top: 3px solid var(--brass);
  border-radius: 4px;
  overflow: hidden;
}
.account-nav-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(17, 19, 18, 0.1);
}
.account-nav-title { font-family: var(--serif); font-size: 20px; }
.account-nav-user { font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.account-nav a {
  display: block;
  position: relative;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(17, 19, 18, 0.08);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--charcoal);
}
.account-nav a::after {
  content: "\203A";
  position: absolute;
  right: 16px;
  color: var(--stone);
}
.account-nav a:hover { background: var(--parchment); color: var(--green); }
.account-nav a.active {
  background: var(--green);
  color: var(--porcelain);
  box-shadow: inset 3px 0 0 var(--brass);
}
.account-nav a.active::after { color: var(--brass); }
.account-nav-out { border-top: 1px solid rgba(17, 19, 18, 0.1); }
.account-nav-out button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 18px;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--terracotta);
  cursor: pointer;
}
.account-nav-out button:hover { background: var(--parchment); }

/* Content column: page heads become cards, sections tighten */
.account-main { min-width: 0; }
.account-main .page-head {
  border-radius: 4px;
  padding: 40px 0 36px;
}
.account-main .page-head > .wrap,
.account-main .section > .wrap { max-width: none; }
.account-main .section { padding: 36px 0 24px; }

@media (max-width: 1024px) {
  .account-shell { display: block; padding: 18px 18px 48px; }
  .account-side { position: static; margin-bottom: 18px; }
  .account-nav-head, .account-nav-out { display: none; }
  .account-nav-card { border-top-width: 1px; }
  .account-nav { display: flex; overflow-x: auto; }
  .account-nav a {
    white-space: nowrap;
    border-bottom: none;
    border-right: 1px solid rgba(17, 19, 18, 0.08);
    font-size: 13px;
    padding: 11px 14px;
  }
  .account-nav a::after { content: none; }
}

/* Tabs */
.tab-row { display: flex; gap: 6px; border-bottom: 2px solid var(--charcoal); margin-bottom: 20px; flex-wrap: wrap; }
.tab-row a {
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--stone);
  padding: 9px 16px;
  border-radius: 3px 3px 0 0;
}
.tab-row a.active { background: var(--charcoal); color: var(--brass); }

@media print {
  .site-header, .site-footer, .hub-nav, .no-print { display: none !important; }
  .page-head { background: none; color: var(--charcoal); padding: 0 0 12px; }
  .page-head h1 { color: var(--charcoal); }
  body { background: #fff; }
}

/* Admin dashboard */
.admin-bar { background: var(--charcoal-soft); border-bottom: 1px solid rgba(214,183,123,0.2); }
.admin-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.admin-nav a {
  color: rgba(247,243,235,0.75); text-decoration: none; font-size: 13px;
  font-weight: 700; padding: 12px 15px;
}
.admin-nav a:hover { color: var(--brass); }
.admin-nav a.active { color: var(--brass); box-shadow: inset 0 -2px 0 var(--brass); }

.alert-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.alert-chip {
  display: inline-block; text-decoration: none; font-size: 13.5px;
  background: var(--porcelain); border: 1px solid var(--brass);
  border-left: 4px solid var(--brass);
  border-radius: 3px; padding: 9px 14px; color: var(--charcoal);
}
.alert-chip:hover { background: var(--parchment); }
.alert-chip strong { color: var(--green); }
.alert-chip.bad { border-color: var(--terracotta); border-left-color: var(--terracotta); }
.alert-chip.bad strong { color: var(--terracotta); }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi {
  background: var(--porcelain); border: 1px solid rgba(17,19,18,0.12);
  border-top: 3px solid var(--green); border-radius: 4px; padding: 16px 18px;
}
.kpi .k-label { display: block; font-size: 12px; color: var(--stone); font-weight: 700; }
.kpi .k-num { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.15; margin: 4px 0 2px; }
.kpi .k-sub { display: block; font-size: 12.5px; color: var(--stone); }

.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar {
  width: 100%; min-height: 2px; background: var(--green);
  border-radius: 2px 2px 0 0; transition: background 0.15s ease;
}
.bar-col:hover .bar { background: var(--brass); }
.bar-label { font-size: 11px; color: var(--stone); margin-top: 6px; }

.activity { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.activity-row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid rgba(17,19,18,0.08);
  text-decoration: none; font-size: 13.5px;
}
.activity-row:hover { background: var(--parchment); }
.act-kind {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; text-align: center;
  background: rgba(122,125,117,0.18); color: var(--stone);
}
.act-payment { background: var(--moss); color: var(--porcelain); }
.act-booking { background: var(--green); color: var(--porcelain); }
.act-space { background: var(--brass); color: var(--charcoal); }
.act-support { background: var(--terracotta); color: var(--porcelain); }
.act-text { color: var(--charcoal); }
.act-time { font-size: 11.5px; color: var(--stone); white-space: nowrap; }

/* Footer */
.site-footer {
  background: var(--charcoal);
  color: var(--porcelain);
  padding: 56px 0 40px;
  margin-top: 0;
}
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.site-footer .foot-label { font-weight: 700; }
.site-footer a { color: rgba(247, 243, 235, 0.75); text-decoration: none; display: block; font-size: 14.5px; margin-bottom: 8px; }
.site-footer a:hover { color: var(--brass); }
.site-footer .tag { color: rgba(247, 243, 235, 0.45); font-size: 13px; border-top: 1px solid rgba(214, 183, 123, 0.2); padding-top: 24px; }

/* Utility */
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.muted { color: var(--stone); }
.center { text-align: center; }
.inline-form { display: inline; }

/* A label that is itself the tick-box row. .form-row label sets
   display:block, which outranks .checkbox-row's flex, so above phone
   width the box and its sentence rendered touching. The phone rules
   lay the same label out as a flex row with its own gap. */
@media (min-width: 881px) {
  label.checkbox-row input[type="checkbox"] { margin-right: 8px; }
}

/* Search, sort and filter above a back-office table. Built by
   tabletools.js, so none of it exists without JavaScript. */
.table-tools { margin-bottom: 12px; }
.table-tools-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table-tools-search { flex: 1 1 220px; min-width: 160px; }
.table-tools-sort {
  flex: 0 1 auto;
  padding: 10px 34px 10px 12px;
  border: 1px solid rgba(17, 19, 18, 0.25);
  border-radius: 3px;
  font-size: 15px;
  min-height: 40px;
}
.table-tools-dir { white-space: nowrap; }
.table-tools-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.14);
  border-radius: 4px;
}
.table-tools-group { min-width: 150px; }
.table-tools-choice { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.table-tools-count { font-size: 13px; color: var(--stone); margin-top: 8px; }
/* A header that sorts says so, and says which way. */
.data-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.is-sortable:hover { color: var(--brass); }
.data-table th.is-sortable::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.25;
}
.data-table th.is-sorted::after { opacity: 1; color: var(--brass); }
.data-table th.is-sorted.is-desc::after {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}

/* Form dropdowns: solid brass triangle, pulled in from the edge, matching
   the map's Monthly pass and Nearest first dropdowns */
.form-card select,
.form-wide select,
/* Any select in a house form row or a card: the convention is the
   triangle everywhere, and naming only two containers meant the review
   form's rating dropdown wore the browser's chevron instead. */
.form-row select,
.card select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0h10L5 7z' fill='%23D6B77B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
}

/* Four narrow fields on one line: reg, make, model, colour */
.form-split-4 { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.9fr; gap: 12px; }
@media (max-width: 700px) { .form-split-4 { grid-template-columns: 1fr 1fr; } }

/* Pause / Cancel: solid stone from the brand palette, same size as the
   other row buttons */
.btn-stone { background: var(--stone); color: var(--porcelain); border: none; }
.btn-stone:hover { background: var(--charcoal); color: var(--brass); }

/* Admin action rows: solid palette colours, one height, wrapping instead
   of running off the table edge */
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-actions .inline-form { display: contents; }
.btn-green { background: var(--green); color: var(--porcelain); border: none; }
.btn-green:hover { background: var(--charcoal); color: var(--brass); }
.btn-terracotta { background: var(--terracotta); color: var(--porcelain); border: none; }
.btn-terracotta:hover { background: var(--charcoal); color: var(--brass); }


/* CONVENTION: buttons that sit in a table row's action column are all
   the same height and the same width, so every row's buttons line up in
   columns no matter what they say. Applies to host and admin tables
   alike; use .btn-small inside a .data-table cell or .admin-actions and
   the sizing is handled. Keep new tables to this convention. */
.data-table td .btn-small,
.admin-actions .btn-small,
.btn-fixed {
  min-width: 112px;   /* fits the longest row label (Fetch photos) */
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;
  text-align: center;
}

/* CONVENTION: a row keeps its primary actions visible and puts the rest
   behind one More menu, so rows never grow past a couple of buttons.
   Plain details/summary, so it works without JavaScript. */
.more-menu { position: relative; display: inline-block; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu[open] > summary { background: var(--charcoal); color: var(--brass); }
.more-menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 210px;
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.18);
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(17, 19, 18, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.more-menu-items a,
.more-menu-items button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--charcoal);
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.more-menu-items a:hover,
.more-menu-items button:hover { background: var(--parchment); color: var(--green); }

/* A field the form has switched off, so it reads as inert rather than
   as something the host has failed to fill in. */
.form-row input:disabled,
.form-row select:disabled {
  background: rgba(17, 19, 18, 0.05);
  color: var(--stone);
  cursor: not-allowed;
}

/* --- Phone corrections, applied nowhere else -----------------------
   The site was laid out on a laptop and made to fit a phone
   afterwards, which leaves the same handful of faults every time:
   fields that make iOS zoom, and controls sized for a mouse. They are
   collected here at the end rather than scattered, so nothing in the
   desktop rules above has to change and nothing here can reach a
   laptop. Written for a phone first, since that is where the traffic
   is and where the app will start. */
@media (max-width: 880px) {
  .detail-side { position: static; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .activity-row { grid-template-columns: 64px 1fr; }
  .act-time { display: none; }
  .wrap { padding: 0 18px; }

  /* One row: wordmark at one end, who you are and the burger at the
     other, and the site links folded behind it. The header was three
     rows deep and about 230px tall on a phone, which is a third of the
     screen gone before the map starts. */
  .site-header .wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 0;
  }
  /* Source order is wordmark, nav, then who you are; on a phone the nav
     is a full-width panel, so it has to come last or it breaks the line
     before the burger and the header is two rows again. */
  .wordmark { order: 1; font-size: 20px; margin-right: auto; }
  .head-right { order: 2; gap: 10px; }
  .site-header .main-nav { order: 3; }
  .logo-mark { width: 28px; height: 28px; margin-right: 8px; }
  .on-wide { display: none; }
  .in-burger { display: inline-block; }
  .my-wealthwelly { padding: 8px 12px; font-size: 13.5px; gap: 6px; }
  .my-wealthwelly svg { width: 15px; height: 15px; }

  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    background: none;
    border: 1px solid rgba(214, 183, 123, 0.45);
    border-radius: 4px;
    cursor: pointer;
  }
  .burger span {
    display: block;
    height: 2px;
    background: var(--brass);
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.15s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The panel takes the full width under the row. Until the script
     collapses it, it is simply the nav, so no JavaScript means the whole
     menu rather than none of it. */
  .site-header.js-nav .main-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
  }
  .site-header.js-nav .main-nav a {
    padding: 13px 2px;
    font-size: 16px;
    border-top: 1px solid rgba(214, 183, 123, 0.18);
  }
  .site-header.js-nav .main-nav a.nav-cta {
    margin: 12px 0 4px;
    text-align: center;
    padding: 12px;
    border: 1px solid var(--brass);
  }
  .site-header.js-nav.nav-open .main-nav { max-height: 60vh; overflow: auto; }
  .main-nav a { font-size: 13.5px; }
  .user-box { padding: 6px 12px; font-size: 13.5px; }
  /* Hover cannot open a menu on a touch screen, so the chip toggles it
     and the dropdown hangs off the right edge where there is room. */
  .user-menu.open .user-drop { display: block; }
  .user-drop { right: 0; left: auto; }

  .hero-inner { padding: 52px 0 40px; }
  .hero h1 { font-size: 40px; }
  .grid-3, .grid-2, .grid-detail { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 16px; }
  .stat .n { font-size: 26px; }

  .section { padding: 52px 0; }
  .page-head { padding: 40px 0 36px; }
  .form-card { padding: 24px 20px; }
  .hub-nav { gap: 2px; }
  .hub-nav a { padding: 7px 10px; font-size: 12px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .form-split { grid-template-columns: 1fr; }

  /* Sixteen pixels is not a taste: below it, iOS zooms the page the
     moment a field is focused and never zooms back, so the rest of
     the form ends up off the side of the screen. Every field. */
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=tel], input[type=search],
  input[type=date], input[type=datetime-local], input[type=time],
  input[type=url], select, textarea,
  /* An input with no type attribute is a text field, and the attribute
     selectors above do not match it: it keeps the 13.3px UA default. */
  input:not([type]) { font-size: 16px; }
  /* These four carry a smaller size from a rule specific enough to win
     the blanket one above. Left at their laptop sizes, raised here. */
  .watch-strip input[type=email],
  .inline-field, .inline-field-tight, .inline-field-sm,
  .inline-field-dark, .table-tools-sort { font-size: 16px; }

  /* A thumb is about 44px across. Anything meant to be pressed gets
     that much height, whatever its label needs. */
  /* The footer was a two column grid, so every row was as tall as its
     tallest cell: Hosts has three links and Company has six, which left
     half a screen of nothing under Hosts, and Popular areas sat in one
     column with the other half of the width empty beside it. Two
     screens of footer, mostly gaps (Henry, 2026-08-17).

     One group per row instead, each a wrapped row of chips. Nothing has
     to line up with anything, so there are no gaps to leave; every link
     is a thumb-sized target rather than a 23px line of text; and the
     whole footer reads as one system rather than a laptop's columns
     folded in half.  */
  .site-footer .cols { display: block; margin-bottom: 20px; }
  .site-footer .cols > div { margin-bottom: 16px; }
  .site-footer .cols > div:not(:first-child) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .site-footer .foot-label { margin-bottom: 2px; }
  .site-footer .cols > div:not(:first-child) .foot-label { flex: 1 0 100%; }
  .site-footer .cols a:not(.wordmark) {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 0;
    padding: 0 14px;
    border: 1px solid rgba(214, 183, 123, 0.28);
    border-radius: 3px;
    font-size: 14.5px;
    line-height: 1.2;
  }
  .site-footer .cols a:not(.wordmark):hover { border-color: var(--brass); }

  .wordmark { min-height: 44px; }
  .my-wealthwelly { min-height: 44px; }
  .head-login { display: inline-flex; align-items: center; min-height: 44px; }
  .burger { width: 44px; height: 44px; }

  /* Behind a login. The header account chip, the tab rows on the host
     bookings and admin waitlist pages, and the admin activity feed were
     all drawn at mouse sizes, and they are on every page of the two
     dashboards, so they are the first thing a thumb meets. */
  .user-box { min-height: 44px; display: inline-flex; align-items: center; }
  .tab-row a { min-height: 44px; display: inline-flex; align-items: center; }
  .activity-row { min-height: 44px; align-items: center; }
  .act-time { font-size: 12.5px; }
  .data-table .pill, .admin-actions .pill { font-size: 12.5px; }
  /* A record's name in a table is the link to that record, so it is a
     control and not prose: it needs the height of one. */
  .data-table td a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* A table is a laptop shape. Seven columns across 390px either clip
     at the right edge or squeeze a title into a five-line column, and
     a sideways scroller inside a page that scrolls down is a thing
     nobody finds. So each row becomes a card, and each cell prints its
     column name beside its value: the same information read down the
     phone instead of across a desk.

     Only tables whose cells carry data-label transform. The rest are
     already two-column field lists and read correctly as they are. A
     browser without :has() keeps the scroller, which is what it has
     today, so there is nothing to fall back to. */
  .table-scroll:has(td[data-label]) { overflow-x: visible; }
  .data-table:has(td[data-label]),
  .data-table:has(td[data-label]) tbody { display: block; }
  .data-table:has(td[data-label]) tr:has(th) { display: none; }
  .data-table:has(td[data-label]) tr:has(td) {
    display: block;
    padding: 13px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(17, 19, 18, 0.14);
    border-radius: 4px;
  }
  .data-table td[data-label] {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
    padding: 7px 0;
    border-bottom: 0;
  }
  .data-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone);
  }
  /* The first cell names the record, so it is the card's heading and a
     label on it would only repeat the column it obviously is. */
  .data-table tr > td[data-label]:first-child:not([colspan]) {
    display: block;
    text-align: left;
    padding: 0 0 10px;
    margin-bottom: 4px;
    font-size: 15.5px;
    border-bottom: 1px solid rgba(17, 19, 18, 0.1);
  }
  /* An empty label is the actions column, or a row that spans: neither
     wants a name printed next to it. */
  .data-table tr > td[data-label]:first-child::before,
  .data-table td[colspan]::before,
  .data-table td[data-label=""]::before { content: none; }
  .data-table td[colspan] { display: block; text-align: left; }
  /* The actions column is a row of 112px buttons, which is a laptop
     row: four of them are 460px wide. On a card they wrap and share
     the width instead. */
  .data-table td[data-label=""],
  .data-table td[data-label=""] .admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left;
    padding-top: 11px;
  }
  .data-table td[data-label=""] .btn-small,
  .data-table td[data-label=""] .more-menu,
  .data-table td[data-label=""] .inline-form { flex: 1 1 auto; }
  .data-table td[data-label=""] .inline-form .btn-small,
  .data-table td[data-label=""] .more-menu > summary { width: 100%; }
  /* A cell that holds controls rather than a value: the name goes above
     them on its own line, and they wrap underneath. */
  .data-table td[data-label]:has(.btn, button, .more-menu) {
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
    padding-top: 11px;
  }
  .data-table td[data-label]:has(.btn, button, .more-menu)::before {
    flex: 1 0 100%;
    margin-bottom: 8px;
  }
  /* The More menu opens against the right edge of a laptop table; in a
     card it has the whole width. */
  .data-table .more-menu-items { right: auto; left: 0; min-width: 220px; }

  /* A row of full size buttons at the foot of a dashboard sits side by
     side on a laptop and ends up ragged on a phone, each a different
     width depending on its label. Stacked and full width, they read as
     a list of things you can do. */
  .account-main :not(p):not(td) > .btn:not(.btn-small) {
    display: block;
    width: 100%;
    text-align: center;
  }
  .account-main :not(p):not(td) > .btn:not(.btn-small) + .btn:not(.btn-small) {
    margin-top: 10px;
  }

  /* Cards were given their breathing room in a three across grid on a
     laptop. Stacked one under another on a phone, the same padding
     turns three lines of text into half a screen and pushes everything
     below it down by pages. */
  /* viewport-fit=cover means the page paints under the rounded corners
     and the notch, so the sides have to be held clear of them or a
     landscape phone eats the first characters of every line. */
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .card { padding: 22px 20px; }

  /* A tick box, a dropdown and the line of text beside them are one
     control, and the line is what a thumb aims at. */
  .checkbox-row label,
  label.checkbox-row,
  .form-row label:has(input[type="checkbox"]),
  .form-card label:has(input[type="checkbox"]) {
    display: flex;
    /* nowrap and 24px of gap are for a row of short feature boxes on a
       laptop; a sentence beside one tick box needs neither, and with
       them the box wrapped onto its own line above the words. */
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 9px;
    min-height: 44px;
  }
  label.checkbox-row input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
  .card h3, .card .card-h { font-size: 19px; margin-bottom: 9px; }
  .card .step-no { margin-bottom: 8px; }
  .section .sub { margin-bottom: 26px; font-size: 16px; }

  /* The one thing a form is for. On a laptop it sits at its label's
     width under a wide card; on a phone, where every field above it
     already fills the screen, anything narrower reads as secondary. */
  .form-card > .btn:not(.btn-small),
  .form-card > form > .btn:not(.btn-small) {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Four of the thirteen account tabs fit on the screen, so the strip
     scrolls. The fade at the edge is the only thing that says so. */
  .account-nav-card { position: relative; }
  .account-nav-card::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 1px;
    width: 26px;
    pointer-events: none;
    background: linear-gradient(to right,
                rgba(247, 243, 235, 0), var(--porcelain));
  }

  /* In the account areas the footer's four columns of marketing links
     are longer than the page they sit under, and the person reading
     came to do something, not to browse areas. The mark and the line
     stay so the page still ends somewhere. */
  .app-area .site-footer .cols > *:not(:first-child) { display: none; }
  .app-area .site-footer .cols { margin-bottom: 18px; }
  .app-area .site-footer { padding-bottom: 26px; }

  /* Nothing-here rows are a sentence, not a card of fields. */
  .data-table td[colspan] { border-bottom: 0; }
  /* A heading between two card stacks has no top margin of its own: on
     a laptop the table below it carries the space, and a card stack
     does not. */
  .account-main .section h2 { margin-top: 28px; }
  .account-main .section > .wrap > h2:first-child { margin-top: 0; }
  /* A chip and a row button are both things you press with a thumb. */
  .btn-small { min-height: 40px; }
}