/* ============================================================
   OnsJag Web Portal — authenticated workspace shell
   ------------------------------------------------------------
   Builds on css/theme.css (same brand tokens). Everything here
   is prefixed `pt-` so it never collides with the marketing
   site classes. Reuses theme .btn / .form-group / .pill.

   The Authenticated Portal deliberately wears the Public
   Website's floating glass header: `.nav-glass`, `.nav-logo`,
   `.nav-links` and `.nav-toggle` come straight from theme.css,
   so the glass background, blur, border, radius, shadow, inset
   and mobile collapse have exactly one source of truth. Only
   the authenticated utilities (identity cluster, Log out,
   Business workspace sub-nav) are declared here, as `pt-`
   extensions of that shared bar.
   ============================================================ */

:root {
  --pt-header-top: 16px;              /* .nav-glass floating inset */
  --pt-max: 1160px;
  --pt-radius: 14px;
  --pt-border: 1px solid rgba(45, 90, 39, 0.12);
  --pt-shadow-sm: 0 1px 3px rgba(45, 90, 39, 0.06);
  --pt-shadow: 0 6px 24px rgba(45, 90, 39, 0.08);
  --pt-z-dropdown: 60;
  --pt-z-modal: 100;
}

body.pt-body {
  background: #f4f6ef;
  color: var(--vibey-dark-green);
  min-height: 100vh;
  /* Clear the floating fixed header. Reserved in CSS (not by the header's own
     box) so the shell can paint asynchronously without shifting page content. */
  padding-top: calc(var(--nav-height) + var(--pt-header-top) + 14px);
}

/* ── Skip link (protected pages) ─────────────────────────── */
.pt-skip {
  position: fixed;
  left: 16px;
  top: -70px;
  z-index: 70;
  background: var(--vibey-dark-green);
  color: var(--light-cream);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 11px 18px;
  border-radius: 10px;
  transition: top 0.18s;
}
.pt-skip:focus { top: 16px; color: var(--light-cream); }

/* ── Authenticated glass header ──────────────────────────── */
/* .pt-glass IS .nav-glass — only the authenticated extras live here. */
.pt-glass .nav-logo { gap: 9px; }

.pt-logo-tag {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(45, 90, 39, 0.1);
  color: var(--accacia-green);
}

.pt-nav-links { gap: 4px; }
/* [hidden] must win over any display rule so a conditional destination is
   genuinely absent — never merely transparent — until authority is known. */
.pt-nav-links li[hidden] { display: none; }

/* Moderator-only Platform Admin entry point — amber outline so it reads as a
   distinct operator tool. Padding compensates for the 1px border so the item
   keeps the same height as its plain siblings. */
.pt-nav-links a.pt-admin-link {
  padding: 7px 15px;
  color: #7a4a00;
  background: rgba(247, 157, 0, 0.1);
  border: 1px solid rgba(122, 74, 0, 0.28);
}
.pt-nav-links a.pt-admin-link:hover,
.pt-nav-links a.pt-admin-link.active {
  background: rgba(247, 157, 0, 0.22);
  color: #5f3a00;
}

/* Identity cluster — immediately left of the rightmost Log out, on one row. */
.pt-identity-item {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(45, 90, 39, 0.14);
}

.pt-identity {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 210px;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--vibey-dark-green);
}

.pt-avatar {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vibrant-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(45, 90, 39, 0.2);
}
.pt-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* theme.css sets `img { display: block }`, which would beat the UA [hidden]
   rule — restate it so an unresolved avatar really stays hidden. */
.pt-avatar-img[hidden] { display: none; }

.pt-identity-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pt-logout-item { margin-left: 2px; }

.pt-logout {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--vibey-dark-green);
  background: rgba(45, 90, 39, 0.06);
  border: 1px solid rgba(45, 90, 39, 0.18);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pt-logout:hover {
  background: rgba(179, 31, 5, 0.08);
  border-color: rgba(179, 31, 5, 0.3);
  color: var(--blood-red);
}

/* Visible keyboard focus on every shell control. */
.pt-skip:focus-visible,
.pt-glass a:focus-visible,
.pt-glass button:focus-visible,
.pt-subnav a:focus-visible,
.pt-biz-switch:focus-visible {
  outline: 3px solid var(--vibrant-green);
  outline-offset: 2px;
}

/* Tablet / small laptop: drop the display name before anything can wrap, so
   avatar + Log out stay on the same row without a second breakpoint panel. */
@media (min-width: 769px) and (max-width: 1024px) {
  .pt-nav-links a { padding: 8px 11px; font-size: 0.86rem; }
  .pt-nav-links a.pt-admin-link { padding: 7px 10px; }
  .pt-identity-name { display: none; }
  .pt-identity-item { margin-left: 2px; padding-left: 8px; }
  .pt-logout { padding: 9px 12px; }
}

/* Collapsed menu (shares theme.css's 768px .nav-links panel) — the identity
   cluster and Log out stack inside the panel, separated from the destinations. */
@media (max-width: 768px) {
  .pt-nav-links { align-items: stretch; }
  /* Opaque panel: unlike a marketing hero, portal content behind the menu is
     dense text, and 5% bleed-through hurts legibility. */
  .pt-nav-links.open { background: #fff; }
  .pt-nav-links li { width: 100%; }
  .pt-nav-links a.pt-admin-link { padding: 11px 15px; }
  .pt-identity-item {
    margin: 8px 0 2px;
    padding: 12px 16px 0;
    border-left: none;
    border-top: 1px solid rgba(45, 90, 39, 0.14);
  }
  .pt-identity { max-width: 100%; }
  .pt-logout-item { margin: 0; padding: 6px 16px 2px; }
  .pt-logout { width: 100%; min-height: 44px; }
}

@media (max-width: 400px) {
  .pt-shell .nav-glass { left: 10px; right: 10px; padding: 0 14px; }
  .pt-shell .nav-logo { font-size: 1.3rem; }
}

/* ── Business workspace sub-navigation (contextual, not global) ──
   Only rendered inside the Business Dashboard branch, so a user without a
   business never sees a business control — and there is no persistent
   "Loading…" chip anywhere in the header. */
.pt-subnav-wrap {
  max-width: var(--pt-max);
  margin: 0 auto;
  padding: 4px 20px 0;
}

.pt-subnav-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-dark);
  border-radius: var(--pt-radius);
  padding: 6px 8px;
  box-shadow: var(--pt-shadow-sm);
}

/* Wrap on wide screens so no destination is ever clipped out of reach; fall
   back to a horizontal scroller only where wrapping would eat the viewport. */
.pt-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
@media (max-width: 720px) {
  .pt-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}

.pt-subnav a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--grey-brown);
  padding: 9px 12px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.pt-subnav a:hover { background: rgba(45, 90, 39, 0.08); color: var(--vibey-dark-green); }
.pt-subnav a.is-active {
  background: var(--vibey-dark-green);
  color: var(--light-cream);
  font-weight: 600;
}

.pt-biz-switch {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  background: #fff;
  border: 1px solid rgba(45, 90, 39, 0.18);
  color: var(--vibey-dark-green);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.83rem;
  padding: 8px 12px;
  border-radius: 100px;
  cursor: pointer;
}
.pt-biz-switch:hover { background: var(--super-light-green); }
.pt-biz-switch[hidden] { display: none; }
.pt-caret { flex-shrink: 0; }
.pt-biz-switch .pt-biz-switch-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pt-subnav-inner { flex-direction: column; align-items: stretch; }
  .pt-biz-switch { max-width: 100%; justify-content: space-between; }
}

@media (max-width: 400px) {
  .pt-subnav-wrap { padding-left: 14px; padding-right: 14px; }
}

/* ── Main canvas ─────────────────────────────────────────── */
.pt-main {
  max-width: var(--pt-max);
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.pt-page-head { margin-bottom: 22px; }
.pt-page-head h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 4px;
}
.pt-page-head p { color: var(--grey-brown); font-size: 0.95rem; max-width: 70ch; }

.pt-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vibrant-green);
  margin-bottom: 6px;
}

/* ── Cards / panels ──────────────────────────────────────── */
.pt-card {
  background: #fff;
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-sm);
  padding: 22px;
}
.pt-card + .pt-card { margin-top: 18px; }

/* Business context header */
.pt-biz-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  background: linear-gradient(135deg, var(--super-light-green) 0%, #ffffff 70%);
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.pt-biz-header .pt-biz-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--vibey-dark-green);
  color: var(--light-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pt-biz-header .pt-biz-meta { flex: 1; min-width: 200px; }
.pt-biz-header h2 { font-size: 1.25rem; margin: 0; }
.pt-biz-header .pt-biz-sub {
  color: var(--grey-brown);
  font-size: 0.88rem;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* Status / type pills */
.pt-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.pt-tag-type { background: rgba(45, 90, 39, 0.1); color: var(--vibey-dark-green); }
.pt-tag-on { background: #e3f3d6; color: #2f6d1f; }
.pt-tag-off { background: #f0e6d6; color: #8a6d2f; }
.pt-tag-muted { background: var(--light-grey); color: var(--grey-brown); }

/* Toolbar */
.pt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.pt-toolbar .pt-toolbar-spacer { flex: 1; }
.btn.pt-btn-sm { padding: 9px 16px; font-size: 0.88rem; border-radius: 11px; }

/* ── Category section ────────────────────────────────────── */
.pt-cat {
  background: #fff;
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}
.pt-cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 18px;
  border-bottom: var(--pt-border);
  background: #fbfcf8;
}
.pt-cat-head h3 { font-size: 1.08rem; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.pt-cat-head .pt-cat-actions { margin-left: auto; display: flex; gap: 8px; }
.pt-cat-sub { color: var(--grey-brown); font-size: 0.82rem; }

.pt-svc-list { display: flex; flex-direction: column; }
.pt-svc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(45, 90, 39, 0.07);
}
.pt-svc:last-child { border-bottom: none; }
.pt-svc-img {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: var(--olive-cream); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--olive); font-size: 0.7rem;
}
.pt-svc-main { flex: 1; min-width: 180px; }
.pt-svc-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.96rem; color: var(--vibey-dark-green); }
.pt-svc-detail { color: var(--grey-brown); font-size: 0.82rem; margin-top: 1px; }
.pt-svc-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--vibey-dark-green);
  white-space: nowrap;
}
.pt-svc-price small { font-weight: 500; color: var(--grey-brown); font-size: 0.78rem; }

/* ── Empty states ────────────────────────────────────────── */
.pt-empty {
  text-align: center;
  padding: 44px 24px;
  border: 1px dashed rgba(45, 90, 39, 0.2);
  border-radius: var(--pt-radius);
  background: #fbfcf8;
}
.pt-empty .pt-empty-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--super-light-green); color: var(--vibrant-green);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.pt-empty h3 { font-size: 1.15rem; margin-bottom: 6px; }
.pt-empty p { color: var(--grey-brown); font-size: 0.92rem; max-width: 46ch; margin: 0 auto 16px; }
.pt-empty .btn-group { justify-content: center; }

/* Status / banner messages */
.pt-banner {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.9rem;
  margin-bottom: 18px;
  display: none;
}
.pt-banner.visible { display: block; }
.pt-banner-info { background: var(--super-light-green); color: #2f6d1f; border: 1px solid #cfe8bf; }
.pt-banner-warn { background: #fdf3e0; color: #8a5a00; border: 1px solid #f3dcae; }
.pt-banner-error { background: rgba(179, 31, 5, 0.07); color: var(--blood-red); border: 1px solid rgba(179,31,5,0.18); }

.pt-loading {
  text-align: center;
  color: var(--grey-brown);
  padding: 48px 20px;
  font-size: 0.92rem;
}
.pt-spinner {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 3px solid rgba(45, 90, 39, 0.15);
  border-top-color: var(--vibrant-green);
  border-radius: 50%;
  animation: pt-spin 0.8s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pt-spinner { animation-duration: 2s; }
}

/* ── Dashboard tiles ─────────────────────────────────────── */
.pt-tiles { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .pt-tiles { grid-template-columns: 1fr 1fr; } }
.pt-tile {
  display: block;
  background: #fff;
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-sm);
  padding: 20px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.pt-tile:hover { transform: translateY(-3px); box-shadow: var(--pt-shadow); }
.pt-tile h3 { font-size: 1.05rem; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; }
.pt-tile p { color: var(--grey-brown); font-size: 0.88rem; margin: 0; }
.pt-tile .icon-circle { width: 40px; height: 40px; border-radius: 11px; margin: 0; }
.pt-tile .icon-circle svg { width: 20px; height: 20px; }

/* ── Modal dialog ────────────────────────────────────────── */
.pt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--pt-z-modal);
  background: rgba(20, 30, 16, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.pt-modal-overlay.open { opacity: 1; pointer-events: auto; }
.pt-modal {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  margin: auto;
  transform: translateY(10px);
  transition: transform 0.2s;
}
.pt-modal-overlay.open .pt-modal { transform: translateY(0); }
.pt-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 8px;
}
.pt-modal-head h2 { font-size: 1.25rem; margin: 0; }
.pt-modal-head p { color: var(--grey-brown); font-size: 0.86rem; margin-top: 2px; }
.pt-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mid-grey);
  padding: 4px;
  border-radius: 8px;
  line-height: 0;
  transition: color 0.18s, background 0.18s;
}
.pt-modal-close:hover { color: var(--vibey-dark-green); background: var(--light-grey); }
.pt-modal-body { padding: 6px 22px 8px; }
.pt-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 22px;
}
.pt-modal-foot .btn { min-width: 110px; justify-content: center; }

.pt-field-error { display: block; color: var(--blood-red); font-size: 0.78rem; margin-top: 4px; min-height: 0; }
.form-group input.has-error,
.form-group select.has-error,
.form-group textarea.has-error { border-color: var(--blood-red); }
.pt-help { font-size: 0.78rem; color: var(--grey-brown); margin-top: 4px; }
.pt-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--grey-brown); }
.pt-checkbox input { width: auto; }

/* ── Preset picker ───────────────────────────────────────── */
.pt-preset-search { margin-bottom: 10px; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pt-chip {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid rgba(45, 90, 39, 0.18);
  background: #fff;
  color: var(--vibey-dark-green);
  cursor: pointer;
  transition: all 0.15s;
}
.pt-chip:hover { border-color: var(--vibrant-green); }
.pt-chip.is-active { background: var(--vibey-dark-green); color: #fff; border-color: var(--vibey-dark-green); }

.pt-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
}
@media (min-width: 520px) { .pt-preset-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pt-preset {
  text-align: left;
  border: 1px solid rgba(45, 90, 39, 0.14);
  border-radius: 11px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.pt-preset:hover { border-color: var(--vibrant-green); box-shadow: var(--pt-shadow-sm); }
.pt-preset.is-selected { border-color: var(--vibey-dark-green); background: var(--super-light-green); }
.pt-preset .pt-preset-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--vibey-dark-green); }
.pt-preset .pt-preset-sub { font-size: 0.72rem; color: var(--grey-brown); margin-top: 2px; }
.pt-preset-none { grid-column: 1 / -1; color: var(--grey-brown); font-size: 0.88rem; text-align: center; padding: 20px; }

/* Segmented add-mode switch inside the service modal */
.pt-segment {
  display: inline-flex;
  background: var(--light-grey);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}
.pt-segment button {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 14px;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--grey-brown);
  cursor: pointer;
}
.pt-segment button.is-active { background: #fff; color: var(--vibey-dark-green); box-shadow: var(--pt-shadow-sm); }

/* Created/feedback list */
.pt-inline-msg { display: none; font-size: 0.82rem; margin-top: 10px; padding: 9px 12px; border-radius: 9px; }
.pt-inline-msg.visible { display: block; }
.pt-inline-msg.is-ok { background: #ecfccb; color: #365314; }
.pt-inline-msg.is-error { background: rgba(179, 31, 5, 0.08); color: var(--blood-red); }

/* Disabled buttons */
.btn:disabled, .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* Footer (compact, portal variant) */
.pt-foot {
  max-width: var(--pt-max);
  margin: 0 auto;
  padding: 20px;
  color: var(--mid-grey);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(45, 90, 39, 0.08);
}
.pt-foot a { color: var(--grey-brown); }
.pt-foot a:hover { color: var(--vibey-dark-green); }

/* ── Create-hunt catalogue review grid (compact, category-aware) ── */
.chg-row { display: grid; grid-template-columns: 88px minmax(170px, 1fr) minmax(130px, 170px) minmax(100px, 130px) minmax(120px, 175px); gap: 4px 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--pt-border); border-radius: 8px; margin-bottom: 6px; background: inherit; }
.chg-row.is-excluded { border-style: dashed; background: rgba(0, 0, 0, 0.02); }
.chg-row .chg-name { font-weight: 600; font-size: 0.95rem; }
.chg-row select, .chg-row input[type="text"] { width: 100%; max-width: 100%; padding: 5px 8px; font-size: 0.86rem; }
.chg-include { display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; font-size: 0.86rem; }
.chg-state { font-size: 0.8rem; white-space: nowrap; }
.chg-state.is-ready { color: var(--vibey-dark-green, #2d5a27); }
.chg-state.is-review { color: #8a5a00; }
.chg-state.is-excluded-txt { color: var(--pt-muted, #777); }
.chg-sub { grid-column: 2 / -1; font-size: 0.78rem; margin: 0; }
@media (max-width: 900px) {
  .chg-row { grid-template-columns: minmax(140px, 1fr) minmax(110px, 150px); }
  .chg-row .chg-cell-include { order: -1; }
  .chg-sub { grid-column: 1 / -1; }
}

/* ── Portal Home: quick actions ──────────────────────────── */
.pt-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 12px;
}
.pt-section-head h2 { font-size: 1.15rem; margin: 0; }
.pt-section-head .pt-section-link { margin-left: auto; font-size: 0.85rem; font-weight: 600; font-family: var(--font-heading); }

.pt-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 620px) { .pt-quick { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .pt-quick { grid-template-columns: repeat(3, 1fr); } }

.pt-quick-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-sm);
  padding: 16px 18px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pt-quick-card:hover { transform: translateY(-2px); box-shadow: var(--pt-shadow); }
.pt-quick-card .icon-circle { width: 38px; height: 38px; border-radius: 11px; margin: 0; flex-shrink: 0; }
.pt-quick-card .icon-circle svg { width: 19px; height: 19px; }
.pt-quick-card h3 { font-size: 0.98rem; margin: 0 0 2px; }
.pt-quick-card p { color: var(--grey-brown); font-size: 0.85rem; margin: 0; }
/* Highlighted business shortcut — shown only once /businesses confirms access. */
.pt-quick-card.is-business { background: linear-gradient(135deg, var(--super-light-green) 0%, #ffffff 70%); }
.pt-quick-card[hidden] { display: none; }

/* ── Portal Home: recent moments feed ────────────────────── */
.pt-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) { .pt-feed { grid-template-columns: 1fr 1fr; } }
.pt-feed[hidden] { display: none; }

.pt-post {
  background: #fff;
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pt-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.pt-post-avatar {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accacia-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
}
.pt-post-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-post-avatar img[hidden] { display: none; }
.pt-post-who { min-width: 0; }
.pt-post-who h3 {
  font-size: 0.94rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-post-when { color: var(--grey-brown); font-size: 0.78rem; }

.pt-post-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--light-grey);
  overflow: hidden;
}
.pt-post-media img { width: 100%; height: 100%; object-fit: cover; }
.pt-post-media img[hidden] { display: none; }

.pt-post-body { padding: 12px 16px 14px; flex: 1; }
.pt-post-caption { font-size: 0.9rem; color: var(--grey-brown); margin: 0 0 8px; overflow-wrap: anywhere; }
.pt-post-event {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--vibey-dark-green);
  background: rgba(45, 90, 39, 0.08);
  padding: 3px 10px;
  border-radius: 100px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-post-counts {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  color: var(--grey-brown);
  font-size: 0.8rem;
}
.pt-post-counts span { display: inline-flex; align-items: center; gap: 5px; }
.pt-post-counts svg { width: 15px; height: 15px; }

/* Skeleton placeholders reserve the card box so the feed never shifts layout. */
.pt-skel {
  background: #fff;
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  overflow: hidden;
  min-height: 300px;
}
.pt-skel-media { width: 100%; aspect-ratio: 4 / 3; background: #eceee6; }
.pt-skel-line { height: 12px; border-radius: 6px; background: #eceee6; margin: 12px 16px; }
.pt-skel-line.short { width: 45%; }
.pt-skel-shimmer { animation: pt-shimmer 1.4s ease-in-out infinite; }
@keyframes pt-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── Account page ────────────────────────────────────────── */
.pt-detail-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.pt-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(45, 90, 39, 0.08);
}
.pt-detail-row:last-child { border-bottom: none; }
.pt-detail-row dt {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--grey-brown);
  flex: 0 0 190px;
}
.pt-detail-row dd {
  margin: 0;
  font-size: 0.94rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 520px) { .pt-detail-row dt { flex-basis: 100%; } }

.pt-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pt-link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: var(--pt-border);
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--vibey-dark-green);
}
.pt-link-list a:hover { background: var(--super-light-green); border-color: rgba(45, 90, 39, 0.24); }
.pt-link-list a.is-danger { color: var(--blood-red); border-color: rgba(179, 31, 5, 0.24); }
.pt-link-list a.is-danger:hover { background: rgba(179, 31, 5, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .pt-skip,
  .pt-logout,
  .pt-subnav a,
  .pt-quick-card,
  .pt-post,
  .pt-skel-shimmer { transition: none !important; animation: none !important; }
  .pt-quick-card:hover { transform: none; }
}

/* ── Business workspace: general left, accommodation right ──────────────
   The booking surfaces used to sit as peers among "Members & Staff", so
   nothing said they were one job. Grouping them into their own column, in
   the order an owner works through them, is what makes the sequence legible:
   what I have to let -> what is free -> who is coming.
   Single column on narrow screens; the accommodation group keeps its heading
   so the grouping survives the stack. */
.pt-work { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1020px) {
  .pt-work { grid-template-columns: 2fr 1fr; gap: 20px; }
  /* The general tiles keep their own two-up grid; the accommodation column
     is a single stack so its three areas read in order. */
  .pt-work .pt-tiles-general { grid-template-columns: 1fr 1fr; }
  .pt-work .pt-tiles-accom { grid-template-columns: 1fr; }
}
.pt-col-head {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vibey-dark-green);
}
.pt-tiles-accom { align-content: start; }

/* ── Accommodation menu in the portal header ────────────────────────────
   Native <details> so it opens by keyboard and needs no JS. */
.pt-nav-menu { position: relative; }
.pt-nav-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;              /* same target size as the nav links */
}
.pt-nav-menu > summary::-webkit-details-marker { display: none; }
.pt-nav-menu > summary::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}
.pt-nav-menu[open] > summary::after { transform: rotate(-135deg) translateY(0); }
.pt-nav-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 290px;
  background: #fff;
  border: var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  padding: 6px;
}
.pt-nav-drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
}
.pt-nav-drop a:hover, .pt-nav-drop a:focus-visible { background: var(--super-light-green); }
.pt-nav-drop strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--vibey-dark-green);
}
.pt-nav-drop span { display: block; font-size: 0.78rem; color: var(--grey-brown); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .pt-nav-menu > summary::after { transition: none; } }
/* Stacked mobile nav: the menu is already open inline, no overlay needed. */
@media (max-width: 860px) {
  .pt-nav-drop { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 0 10px; }
}
/* Secondary tile: a companion destination under a primary one. */
.pt-tile-sub { background: rgba(255,255,255,0.72); }
.pt-tile-sub h3 { font-size: 0.95rem; }