@charset "utf-8";

/*
Theme Name: Hiboboard - Hospitality Operations Dashboard HTML Template.
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Buttons
   1.3 Eyebrow
   1.4 Reveals
2. Generated Utilities
   2.1 Product Colours
   2.2 Tape Chart Placement
   2.3 Time Grid Placement
   2.4 Widths
3. App Shell
4. Sidebar
   4.1 Jump & Pins
5. Top Bar
6. Menus, Modals & Drawers
   6.1 Dropdown Menus
   6.2 Notifications Panel
   6.3 Scope Panel
   6.4 Modals
   6.5 Shared Overlays
   6.6 Assistant
   6.7 Drawers
   6.8 Toasts & Tooltips
   6.9 Command Palette
7. Page Head & Banners
   7.1 Page Head
   7.2 Banners
   7.3 Alerts
8. Cards & KPI Tiles
   8.1 Card
   8.2 KPI Tiles
   8.3 Lists In Cards
   8.4 Media Cards
   8.5 Showcase Cards
   8.6 Showcase Variants
9. Tables & Toolbars
   9.1 Toolbar
   9.2 Table
   9.3 Pagination
   9.4 Record Cards
   9.5 Table Behaviour
10. Forms
   10.1 Fields
   10.2 Checks & Switches
   10.3 Custom Select
   10.4 File Drop
   10.5 Special Inputs
   10.6 Image Field
   10.7 Theme Looks
   10.8 Icon Picker
11. Badges, Avatars & Progress
   11.1 Badges
   11.2 Avatars
   11.3 Progress
   11.4 Tabs
12. States & Charts
   12.1 State Switcher
   12.2 Empty & No Results
   12.3 Skeleton
   12.4 Charts
13. Calendars, Boards & Steps
   13.1 Tape Chart
   13.2 Time Grid
   13.3 Kanban
   13.4 Timeline
   13.5 Wizard Steps
14. Auth, State Pages, Portal & Print
   14.1 Auth
   14.2 State Pages
   14.3 Guest Portal
   14.4 Print
15. Page Specifics
   15.1 UI Kit
16. Bookings
   16.1 Policy Stages
   16.2 Message Thread
   16.3 Enquiry Inbox
   16.4 Trip Itinerary
   16.5 Table Inputs
17. Overview & Network
   17.1 Intelligent Overview
   17.2 Setup Checklist
   17.3 Property Pages
   17.4 Opening Hours
   17.5 Pre-Opening
   17.6 Regions & Rate Push
18. Catalogue
   18.1 Units
   18.2 Unit Editor
   18.3 Allotment Grid
   18.4 Vertical Tabs
19. Availability & Rates
   19.1 Tape Legend & Days
   19.2 Seasons
   19.3 Rate Grid
20. Policies
   20.1 Payment Schedules
   20.2 Cancellation Tiers
   20.3 Revenue Components
21. Guests
   21.1 Guest Profile
   21.2 Documents
22. Money
   22.1 Methods & Ledger
   22.2 Invoice Document
23. Operations
   23.1 Live Status
   23.2 Rota
24. Guest Services
   24.1 Gate
   24.2 Menus
   24.3 Floor Plan
25. Retail
   25.1 Product Images
   25.2 Fulfilment & Transfers
26. Promotions & Places
   26.1 Offer Preview
   26.2 Tier Table
   26.3 Destinations
27. Product Modules
   27.1 Ski
   27.2 Water Park
   27.3 Kids Club
   27.4 Jet Charter
28. Partners & SaaS
   28.1 Territories & Links
   28.2 Plans & Billing
29. Insight
   29.1 Reports
   29.2 Profit & Loss
   29.3 Reviews
   29.4 Search
30. Website & Marketing
   30.1 Home Sections
   30.2 Post Editor
   30.3 Gallery
   30.4 FAQs
31. Team & Settings
   31.1 Settings Hub
   31.2 Business Model & Permissions
   31.3 Brand
   31.4 Notifications & Templates
   31.5 Form Builder & Profile
   31.6 Permission Cards
32. Auth Extras
   32.1 Sign-In Flows
33. Portal & Print Extras
   33.1 Consent And Signature
   33.2 Guest Portal
   33.3 Print Extras
34. Vendor Themes
   34.1 Shared
   34.2 Date Picker
   34.3 Searchable Selects
   34.4 Range Sliders
   34.5 Colour Picker
   34.6 Editors
   34.7 Uploads
   34.8 Month Calendars
   34.9 Drag And Drop
   34.10 Maps
   34.11 Lightbox & Carousels
35. Shape System
   35.1 People
   35.2 Signals & Counts
   35.3 Point Controls
   35.4 Category Icons
   35.5 Progress
   35.6 Structure
*/

/*======================
1. General
========================*/
/* Brand tokens: the Hibo identity (ink, paper and the four pillars) */
:root {
  --hbd-color-ink: #0E1014;
  --hbd-color-ink-rgb: 14, 16, 20;
  --hbd-color-raised: #171A21;
  --hbd-color-raised-rgb: 23, 26, 33;
  --hbd-color-raised-2: #20242D;
  --hbd-color-raised-3: #2A2F3A;
  --hbd-color-paper: #F4F2ED;
  --hbd-color-paper-rgb: 244, 242, 237;
  --hbd-color-white: #FFFFFF;
  --hbd-color-white-rgb: 255, 255, 255;
  /* the four pillars: Hospitality, Intelligence, Business, Operations */
  --hbd-color-coral: #FF6B4A;
  --hbd-color-coral-rgb: 255, 107, 74;
  --hbd-color-coral-deep: #C53F20;
  --hbd-color-iris: #5B7CFF;
  --hbd-color-iris-rgb: 91, 124, 255;
  --hbd-color-iris-deep: #3450CC;
  --hbd-color-jade: #22B07D;
  --hbd-color-jade-rgb: 34, 176, 125;
  --hbd-color-jade-deep: #137452;
  --hbd-color-amber: #FFB547;
  --hbd-color-amber-rgb: 255, 181, 71;
  --hbd-color-amber-deep: #955F0B;
  --hbd-color-body: #5F636C;
  --hbd-color-muted: #7C818B;
  --hbd-color-border: #E2DDD2;
  --hbd-color-border-2: #D3CDBF;
  --hbd-ff-heading: 'Schibsted Grotesk', sans-serif;
  --hbd-ff-body: 'Onest', sans-serif;
  --hbd-ff-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --hbd-fs-h1: clamp(28px, 2.4vw, 38px);
  --hbd-fs-h2: 26px;
  --hbd-fs-h3: 20px;
  --hbd-fs-h4: 17px;
  --hbd-fs-h5: 15px;
  --hbd-fs-h6: 13.5px;
  /* shape: structure takes a soft corner, people and signals stay round (the Shape System applies these) */
  --hbd-r-card: 10px;
  --hbd-r-panel: 12px;
  --hbd-r-field: 8px;
  --hbd-r-btn: 8px;
  --hbd-r-sm: 6px;
  /* motion is for changes only: a state change, an overlay coming in, one going out */
  --hbd-t-state: 0.12s;
  --hbd-t-enter: 0.2s;
  --hbd-t-exit: 0.16s;
  --hbd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hbd-sidebar: 272px;
  --hbd-sidebar-mini: 80px;
  --hbd-topbar: 68px;
  --hbd-gutter: 32px;

  /* Role variables (light mode = paper). The dark theme redefines only these. */
  --hbd-bg: #EFECE6;
  --hbd-surface: var(--hbd-color-white);
  --hbd-surface-2: #F8F7F3;
  --hbd-surface-3: #EFECE5;
  --hbd-heading: var(--hbd-color-ink);
  --hbd-text: var(--hbd-color-body);
  --hbd-muted: var(--hbd-color-muted);
  --hbd-faint: #A4A7AE;
  --hbd-line: var(--hbd-color-border);
  --hbd-line-2: var(--hbd-color-border-2);
  --hbd-hover: rgba(var(--hbd-color-ink-rgb), 0.035);
  --hbd-tonal: rgba(var(--hbd-color-ink-rgb), 0.055);
  --hbd-scroll: rgba(var(--hbd-color-ink-rgb), 0.24);
  --hbd-tonal-2: rgba(var(--hbd-color-ink-rgb), 0.09);
  --hbd-input-bg: var(--hbd-color-white);
  --hbd-card-ring: 0 0 0 1px rgba(var(--hbd-color-ink-rgb), 0.055), 0 1px 2px rgba(var(--hbd-color-ink-rgb), 0.04), 0 14px 32px -22px rgba(var(--hbd-color-ink-rgb), 0.28);
  --hbd-lift: 0 0 0 1px rgba(var(--hbd-color-ink-rgb), 0.07), 0 2px 4px rgba(var(--hbd-color-ink-rgb), 0.05), 0 22px 44px -24px rgba(var(--hbd-color-ink-rgb), 0.36);
  --hbd-shadow: 0 20px 50px rgba(var(--hbd-color-ink-rgb), 0.08);
  --hbd-shadow-lg: 0 34px 90px rgba(var(--hbd-color-ink-rgb), 0.18);
  --hbd-coral-text: var(--hbd-color-coral-deep);
  --hbd-iris-text: var(--hbd-color-iris-deep);
  --hbd-jade-text: var(--hbd-color-jade-deep);
  --hbd-amber-text: var(--hbd-color-amber-deep);
  --hbd-tint: 0.13;
  --hbd-skeleton: #E9E5DC;
  --hbd-skeleton-2: #F3F0EA;
}

/* Dark mode = ink. One attribute on <html>, set by the theme toggle. */
[data-theme="dark"] {
  --hbd-bg: var(--hbd-color-ink);
  --hbd-surface: var(--hbd-color-raised);
  --hbd-surface-2: var(--hbd-color-raised-2);
  --hbd-surface-3: var(--hbd-color-raised-3);
  --hbd-heading: var(--hbd-color-white);
  --hbd-text: rgba(var(--hbd-color-white-rgb), 0.68);
  --hbd-muted: rgba(var(--hbd-color-white-rgb), 0.5);
  --hbd-faint: rgba(var(--hbd-color-white-rgb), 0.32);
  --hbd-line: rgba(var(--hbd-color-white-rgb), 0.08);
  --hbd-line-2: rgba(var(--hbd-color-white-rgb), 0.16);
  --hbd-hover: rgba(var(--hbd-color-white-rgb), 0.04);
  --hbd-tonal: rgba(var(--hbd-color-white-rgb), 0.08);
  --hbd-scroll: rgba(var(--hbd-color-white-rgb), 0.2);
  --hbd-tonal-2: rgba(var(--hbd-color-white-rgb), 0.12);
  --hbd-input-bg: rgba(var(--hbd-color-white-rgb), 0.035);
  --hbd-card-ring: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.06), 0 16px 34px -22px rgba(0, 0, 0, 0.7);
  --hbd-lift: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.1), 0 24px 48px -24px rgba(0, 0, 0, 0.85);
  --hbd-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --hbd-shadow-lg: 0 40px 110px rgba(0, 0, 0, 0.55);
  --hbd-coral-text: var(--hbd-color-coral);
  --hbd-iris-text: #8CA3FF;
  --hbd-jade-text: #4CCB9C;
  --hbd-amber-text: var(--hbd-color-amber);
  --hbd-tint: 0.16;
  --hbd-skeleton: #232833;
  --hbd-skeleton-2: #2C323E;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* figures line up in table columns only; large figures and text keep proportional spacing (tabular figures open
   gaps round commas, points and ones in these faces) */
.hbd-table td.num,
.hbd-table th.num {
  font-variant-numeric: tabular-nums;
}
:root {
  scroll-behavior: auto;
}
body {
  font-family: var(--hbd-ff-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--hbd-text);
  background-color: var(--hbd-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s var(--hbd-ease);
}
a:hover {
  color: var(--hbd-coral-text);
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: var(--hbd-heading);
}
::selection {
  background: var(--hbd-color-coral);
  color: var(--hbd-color-ink);
}
:focus-visible {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
.hbd-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* every scroll area: a slim bar in the theme's colour, never the system default; the ink surfaces take a light thumb */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hbd-scroll) transparent;
}
.hbd-sidebar,
.hbd-topbar,
.hbd-scope,
.hbd-menu,
.hbd-notify,
.hbd-select-list,
.hbd-iconpick-menu,
.hbd-card.is-ink,
.hbd-assistant .modal-content {
  --hbd-scroll: rgba(var(--hbd-color-white-rgb), 0.22);
}
.visually-hidden-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}

/*---- 1.1 Typography ----*/
h1,
h2,
h3,
h4,
h5,
h6,
.t-h1,
.t-h2,
.t-h3,
.t-h4 {
  font-family: var(--hbd-ff-heading);
  color: var(--hbd-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
h1,
.t-h1 {
  font-size: var(--hbd-fs-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
h2,
.t-h2 {
  font-size: var(--hbd-fs-h2);
  letter-spacing: -0.025em;
}
h3,
.t-h3 {
  font-size: var(--hbd-fs-h3);
}
h4,
.t-h4 {
  font-size: var(--hbd-fs-h4);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h5 {
  font-size: var(--hbd-fs-h5);
  font-weight: 700;
  letter-spacing: -0.005em;
}
h6 {
  font-size: var(--hbd-fs-h6);
  font-weight: 700;
  letter-spacing: 0;
}
p {
  margin-bottom: 0;
}
p + p {
  margin-top: 12px;
}
.hbd-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--hbd-text);
}
.hbd-small {
  font-size: 13.5px;
  line-height: 1.5;
}
.hbd-xs {
  font-size: 12.5px;
  line-height: 1.45;
}
.hbd-caps {
  font-family: var(--hbd-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--hbd-muted);
}
.hbd-num {
  font-family: var(--hbd-ff-heading);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hbd-mono {
  font-family: var(--hbd-ff-mono);
  font-size: 13px;
}
.hbd-strong {
  font-weight: 600;
  color: var(--hbd-heading);
}
.text-heading {
  color: var(--hbd-heading) !important;
}
.text-muted-hbd {
  color: var(--hbd-muted) !important;
}
.text-coral {
  color: var(--hbd-coral-text) !important;
}
.text-iris {
  color: var(--hbd-iris-text) !important;
}
.text-jade {
  color: var(--hbd-jade-text) !important;
}
.text-amber {
  color: var(--hbd-amber-text) !important;
}

/*---- 1.2 Buttons ----*/
.hbd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--hbd-r-btn);
  font-family: var(--hbd-ff-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color var(--hbd-t-state) ease, background-color var(--hbd-t-state) ease, transform var(--hbd-t-state) ease;
}
.hbd-btn:hover {
  color: var(--hbd-color-ink);
  background-color: #FF8466;
}
.hbd-btn:active {
  transform: scale(0.98);
}
.hbd-btn > i {
  font-size: 13px;
}
/* an arrow only where the button leaves the page: it nudges on hover */
.hbd-btn .btn-ic {
  display: inline-flex;
  width: 14px;
}
.hbd-btn .btn-ic i {
  font-size: 13px;
  transition: transform var(--hbd-t-enter) ease;
}
.hbd-btn .btn-ic i + i {
  display: none;
}
.hbd-btn:hover .btn-ic i {
  transform: translateX(3px);
}
.hbd-btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
  gap: 8px;
}
.hbd-btn-lg {
  height: 52px;
  padding: 0 26px;
  font-size: 15px;
}
.hbd-btn-block {
  width: 100%;
}
.hbd-btn-outline {
  background-color: var(--hbd-tonal);
  color: var(--hbd-heading);
  box-shadow: none;
}
.hbd-btn-outline > i:first-child {
  color: var(--hbd-coral-text);
}
.hbd-btn-outline:hover {
  color: var(--hbd-heading);
  background-color: var(--hbd-tonal-2);
}
/* on an ink panel (both themes) */
.hbd-btn-outline-light {
  background-color: rgba(var(--hbd-color-white-rgb), 0.1);
  color: var(--hbd-color-white);
  box-shadow: none;
}
.hbd-btn-outline-light > i:first-child {
  color: var(--hbd-color-coral);
}
.hbd-btn-outline-light:hover {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.18);
}
.hbd-btn-ghost {
  background-color: transparent;
  color: var(--hbd-heading);
}
.hbd-btn-ghost:hover {
  color: var(--hbd-heading);
  background-color: var(--hbd-tonal);
}
.hbd-btn-ghost.is-danger-text,
.hbd-btn-ghost.is-danger-text:hover {
  color: var(--hbd-coral-text);
}
.hbd-btn-dark {
  background-color: var(--hbd-color-ink);
  color: var(--hbd-color-white);
}
.hbd-btn-dark:hover {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-raised-2);
}
[data-theme="dark"] .hbd-btn-dark {
  background-color: var(--hbd-color-white);
  color: var(--hbd-color-ink);
}
[data-theme="dark"] .hbd-btn-dark:hover {
  background-color: #E6E3DC;
}
.hbd-btn-danger {
  background-color: var(--hbd-color-coral-deep);
  color: var(--hbd-color-white);
}
.hbd-btn-danger:hover {
  color: var(--hbd-color-white);
  background-color: #A8341A;
}
.hbd-btn-success {
  background-color: var(--hbd-color-jade);
  color: var(--hbd-color-ink);
}
.hbd-btn-success:hover {
  background-color: #2BC08A;
}
.hbd-btn[disabled],
.hbd-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.hbd-btn.is-loading {
  color: transparent;
  pointer-events: none;
}
.hbd-btn.is-loading::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--hbd-color-ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: hbd-spin 0.7s linear infinite;
}
/* icon buttons: top bar, table rows, modal close (round: see the Shape System) */
.hbd-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 0;
  color: var(--hbd-heading);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.hbd-icon-btn:hover {
  background-color: var(--hbd-color-coral);
  color: var(--hbd-color-ink);
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral);
}
.hbd-icon-btn.is-sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.hbd-icon-btn.is-bare {
  box-shadow: none;
}
.hbd-icon-btn.is-bare:hover {
  background-color: var(--hbd-hover);
  color: var(--hbd-coral-text);
}
.hbd-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.hbd-link i {
  font-size: 11px;
  transition: transform 0.35s var(--hbd-ease);
}
.hbd-link:hover {
  color: var(--hbd-coral-text);
}
.hbd-link:hover i {
  transform: translateX(4px);
}
.hbd-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
@keyframes hbd-spin {
  to {
    transform: rotate(360deg);
  }
}

/*---- 1.3 Eyebrow ----*/
/* the Hibo eyebrow: a four-colour dash (the pillars) then tracked caps */
.hbd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hbd-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}
.eb-dash {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.eb-dash i {
  display: block;
  width: 9px;
  height: 4px;
  background-color: var(--hbd-color-coral);
}
.eb-dash i:nth-child(2) {
  background-color: var(--hbd-color-iris);
}
.eb-dash i:nth-child(3) {
  background-color: var(--hbd-color-jade);
}
.eb-dash i:nth-child(4) {
  background-color: var(--hbd-color-amber);
}

/*---- 1.4 Reveals ----*/
/* motion is for changes only: cards and rows are on screen at once (no scroll reveals in the app) */

/*======================
2. Generated Utilities
========================*/
/*---- 2.1 Product Colours ----*/
.pc-hibotel {
  --pc-ground: #14110E;
  --pc-accent: #C2A46A;
}
.pc-hiboxa {
  --pc-ground: #1D3531;
  --pc-accent: #F59288;
}
.pc-hiboski {
  --pc-ground: #063856;
  --pc-accent: #00B4D5;
}
.pc-hibojet {
  --pc-ground: #111111;
  --pc-accent: #D2C09E;
}
.pc-hibolimo {
  --pc-ground: #111111;
  --pc-accent: #D2C09E;
}
.pc-hibotour {
  --pc-ground: #1D1611;
  --pc-accent: #F79838;
}
.pc-hibomar {
  --pc-ground: #0C3A46;
  --pc-accent: #FCC024;
}
.pc-hibokids {
  --pc-ground: #005385;
  --pc-accent: #D8128B;
}
.pc-hibomerch {
  --pc-ground: #14110E;
  --pc-accent: #C2A46A;
}
.pc-hiboncierge {
  --pc-ground: #14110E;
  --pc-accent: #C2A46A;
}
/*---- 2.2 Tape Chart Placement ----*/
.tc-s1 { grid-column-start: 1; }
.tc-s2 { grid-column-start: 2; }
.tc-s3 { grid-column-start: 3; }
.tc-s4 { grid-column-start: 4; }
.tc-s5 { grid-column-start: 5; }
.tc-s6 { grid-column-start: 6; }
.tc-s7 { grid-column-start: 7; }
.tc-s8 { grid-column-start: 8; }
.tc-s9 { grid-column-start: 9; }
.tc-s10 { grid-column-start: 10; }
.tc-s11 { grid-column-start: 11; }
.tc-s12 { grid-column-start: 12; }
.tc-s13 { grid-column-start: 13; }
.tc-s14 { grid-column-start: 14; }
.tc-s15 { grid-column-start: 15; }
.tc-s16 { grid-column-start: 16; }
.tc-s17 { grid-column-start: 17; }
.tc-s18 { grid-column-start: 18; }
.tc-s19 { grid-column-start: 19; }
.tc-s20 { grid-column-start: 20; }
.tc-s21 { grid-column-start: 21; }
.tc-s22 { grid-column-start: 22; }
.tc-s23 { grid-column-start: 23; }
.tc-s24 { grid-column-start: 24; }
.tc-s25 { grid-column-start: 25; }
.tc-s26 { grid-column-start: 26; }
.tc-s27 { grid-column-start: 27; }
.tc-s28 { grid-column-start: 28; }
.tc-s29 { grid-column-start: 29; }
.tc-s30 { grid-column-start: 30; }
.tc-s31 { grid-column-start: 31; }
.tc-w1 { grid-column-end: span 1; }
.tc-w2 { grid-column-end: span 2; }
.tc-w3 { grid-column-end: span 3; }
.tc-w4 { grid-column-end: span 4; }
.tc-w5 { grid-column-end: span 5; }
.tc-w6 { grid-column-end: span 6; }
.tc-w7 { grid-column-end: span 7; }
.tc-w8 { grid-column-end: span 8; }
.tc-w9 { grid-column-end: span 9; }
.tc-w10 { grid-column-end: span 10; }
.tc-w11 { grid-column-end: span 11; }
.tc-w12 { grid-column-end: span 12; }
.tc-w13 { grid-column-end: span 13; }
.tc-w14 { grid-column-end: span 14; }
.tc-w15 { grid-column-end: span 15; }
.tc-w16 { grid-column-end: span 16; }
.tc-w17 { grid-column-end: span 17; }
.tc-w18 { grid-column-end: span 18; }
.tc-w19 { grid-column-end: span 19; }
.tc-w20 { grid-column-end: span 20; }
.tc-w21 { grid-column-end: span 21; }
.tc-w22 { grid-column-end: span 22; }
.tc-w23 { grid-column-end: span 23; }
.tc-w24 { grid-column-end: span 24; }
.tc-w25 { grid-column-end: span 25; }
.tc-w26 { grid-column-end: span 26; }
.tc-w27 { grid-column-end: span 27; }
.tc-w28 { grid-column-end: span 28; }
.tc-w29 { grid-column-end: span 29; }
.tc-w30 { grid-column-end: span 30; }
.tc-w31 { grid-column-end: span 31; }
/*---- 2.3 Time Grid Placement ----*/
.gr-s1 { grid-row-start: 1; }
.gr-s2 { grid-row-start: 2; }
.gr-s3 { grid-row-start: 3; }
.gr-s4 { grid-row-start: 4; }
.gr-s5 { grid-row-start: 5; }
.gr-s6 { grid-row-start: 6; }
.gr-s7 { grid-row-start: 7; }
.gr-s8 { grid-row-start: 8; }
.gr-s9 { grid-row-start: 9; }
.gr-s10 { grid-row-start: 10; }
.gr-s11 { grid-row-start: 11; }
.gr-s12 { grid-row-start: 12; }
.gr-s13 { grid-row-start: 13; }
.gr-s14 { grid-row-start: 14; }
.gr-s15 { grid-row-start: 15; }
.gr-s16 { grid-row-start: 16; }
.gr-s17 { grid-row-start: 17; }
.gr-s18 { grid-row-start: 18; }
.gr-s19 { grid-row-start: 19; }
.gr-s20 { grid-row-start: 20; }
.gr-s21 { grid-row-start: 21; }
.gr-s22 { grid-row-start: 22; }
.gr-s23 { grid-row-start: 23; }
.gr-s24 { grid-row-start: 24; }
.gr-h1 { grid-row-end: span 1; }
.gr-h2 { grid-row-end: span 2; }
.gr-h3 { grid-row-end: span 3; }
.gr-h4 { grid-row-end: span 4; }
.gr-h5 { grid-row-end: span 5; }
.gr-h6 { grid-row-end: span 6; }
.gr-h7 { grid-row-end: span 7; }
.gr-h8 { grid-row-end: span 8; }
.gr-h9 { grid-row-end: span 9; }
.gr-h10 { grid-row-end: span 10; }
.gr-h11 { grid-row-end: span 11; }
.gr-h12 { grid-row-end: span 12; }
/*---- 2.4 Widths ----*/
.w-p0 { width: 0%; }
.w-p1 { width: 1%; }
.w-p2 { width: 2%; }
.w-p3 { width: 3%; }
.w-p4 { width: 4%; }
.w-p5 { width: 5%; }
.w-p6 { width: 6%; }
.w-p7 { width: 7%; }
.w-p8 { width: 8%; }
.w-p9 { width: 9%; }
.w-p10 { width: 10%; }
.w-p11 { width: 11%; }
.w-p12 { width: 12%; }
.w-p13 { width: 13%; }
.w-p14 { width: 14%; }
.w-p15 { width: 15%; }
.w-p16 { width: 16%; }
.w-p17 { width: 17%; }
.w-p18 { width: 18%; }
.w-p19 { width: 19%; }
.w-p20 { width: 20%; }
.w-p21 { width: 21%; }
.w-p22 { width: 22%; }
.w-p23 { width: 23%; }
.w-p24 { width: 24%; }
.w-p25 { width: 25%; }
.w-p26 { width: 26%; }
.w-p27 { width: 27%; }
.w-p28 { width: 28%; }
.w-p29 { width: 29%; }
.w-p30 { width: 30%; }
.w-p31 { width: 31%; }
.w-p32 { width: 32%; }
.w-p33 { width: 33%; }
.w-p34 { width: 34%; }
.w-p35 { width: 35%; }
.w-p36 { width: 36%; }
.w-p37 { width: 37%; }
.w-p38 { width: 38%; }
.w-p39 { width: 39%; }
.w-p40 { width: 40%; }
.w-p41 { width: 41%; }
.w-p42 { width: 42%; }
.w-p43 { width: 43%; }
.w-p44 { width: 44%; }
.w-p45 { width: 45%; }
.w-p46 { width: 46%; }
.w-p47 { width: 47%; }
.w-p48 { width: 48%; }
.w-p49 { width: 49%; }
.w-p50 { width: 50%; }
.w-p51 { width: 51%; }
.w-p52 { width: 52%; }
.w-p53 { width: 53%; }
.w-p54 { width: 54%; }
.w-p55 { width: 55%; }
.w-p56 { width: 56%; }
.w-p57 { width: 57%; }
.w-p58 { width: 58%; }
.w-p59 { width: 59%; }
.w-p60 { width: 60%; }
.w-p61 { width: 61%; }
.w-p62 { width: 62%; }
.w-p63 { width: 63%; }
.w-p64 { width: 64%; }
.w-p65 { width: 65%; }
.w-p66 { width: 66%; }
.w-p67 { width: 67%; }
.w-p68 { width: 68%; }
.w-p69 { width: 69%; }
.w-p70 { width: 70%; }
.w-p71 { width: 71%; }
.w-p72 { width: 72%; }
.w-p73 { width: 73%; }
.w-p74 { width: 74%; }
.w-p75 { width: 75%; }
.w-p76 { width: 76%; }
.w-p77 { width: 77%; }
.w-p78 { width: 78%; }
.w-p79 { width: 79%; }
.w-p80 { width: 80%; }
.w-p81 { width: 81%; }
.w-p82 { width: 82%; }
.w-p83 { width: 83%; }
.w-p84 { width: 84%; }
.w-p85 { width: 85%; }
.w-p86 { width: 86%; }
.w-p87 { width: 87%; }
.w-p88 { width: 88%; }
.w-p89 { width: 89%; }
.w-p90 { width: 90%; }
.w-p91 { width: 91%; }
.w-p92 { width: 92%; }
.w-p93 { width: 93%; }
.w-p94 { width: 94%; }
.w-p95 { width: 95%; }
.w-p96 { width: 96%; }
.w-p97 { width: 97%; }
.w-p98 { width: 98%; }
.w-p99 { width: 99%; }
.w-p100 { width: 100%; }

/*======================
3. App Shell
========================*/
/* sidebar + main (top bar, banners, content, foot bar) */
.hbd-shell {
  min-height: 100vh;
}
.hbd-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--hbd-sidebar);
  transition: margin-left 0.4s var(--hbd-ease);
}
.is-sidebar-mini .hbd-main {
  margin-left: var(--hbd-sidebar-mini);
}
.hbd-content {
  flex: 1;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 30px var(--hbd-gutter) 48px;
}
.hbd-content.is-full {
  max-width: none;
}
.hbd-footbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 18px var(--hbd-gutter);
  border-top: 1px solid var(--hbd-line);
  font-size: 13px;
  color: var(--hbd-muted);
}
.hbd-footbar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.hbd-footbar a:hover {
  color: var(--hbd-coral-text);
}
.hbd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1035;
  background-color: rgba(var(--hbd-color-ink-rgb), 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.is-sidebar-open .hbd-backdrop {
  opacity: 1;
  visibility: visible;
}
/* grids used by every page */
.hbd-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.hbd-grid > * {
  min-width: 0;
}
/* a card alone in its grid cell fills the row, so neighbours line up */
.hbd-grid > div > .hbd-card:only-child,
.hbd-grid > div > .hbd-kpi:only-child,
.hbd-grid > div > .hbd-media-card:only-child,
.hbd-grid > div > .hbd-cta-tile:only-child {
  height: 100%;
}
/* detail and form layouts: the main card keeps its own height beside a taller aside */
.hbd-grid.is-top {
  align-items: start;
}
.hbd-grid.is-top > div > .hbd-card:only-child {
  height: auto;
}
.span-12 { grid-column: span 12; }
.span-9 { grid-column: span 9; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.row-span-2 { grid-row: span 2; }
.hbd-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hbd-stack.is-tight {
  gap: 14px;
}
.hbd-section + .hbd-section {
  margin-top: 28px;
}

/*======================
4. Sidebar
========================*/
/* ink in both themes: the brand chrome. Three levels: group > item, group > sub-group > item */
.hbd-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  width: var(--hbd-sidebar);
  background-color: var(--hbd-color-ink);
  color: rgba(var(--hbd-color-white-rgb), 0.7);
  box-shadow: inset -1px 0 0 rgba(var(--hbd-color-white-rgb), 0.06);
  transition: width 0.4s var(--hbd-ease), transform 0.4s var(--hbd-ease);
}
.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--hbd-topbar);
  padding: 0 22px;
  flex: none;
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.06);
}
.sb-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sb-logo .logo-word {
  display: block;
  width: 168px;
  height: auto;
}
.sb-logo .logo-ring {
  display: none;
  width: 34px;
  height: 34px;
}
.sb-close {
  display: none;
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.18);
}
/* the network card under the logo */
.sb-org {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 16px 6px;
  padding: 12px 14px;
  background-color: var(--hbd-color-raised);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.06);
  flex: none;
}
.sb-org .org-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  background-color: var(--hbd-color-raised-2);
}
.sb-org .org-mark img {
  width: 24px;
  height: 24px;
}
.sb-org .org-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.sb-org .org-name {
  font-family: var(--hbd-ff-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hbd-color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-org .org-sub {
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.sb-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--hbd-color-white-rgb), 0.16) transparent;
}
.sb-scroll::-webkit-scrollbar {
  width: 5px;
}
.sb-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(var(--hbd-color-white-rgb), 0.16);
}
/* group header: coral caps, collapsible */
.sb-group + .sb-group {
  margin-top: 4px;
}
.sb-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
  text-align: left;
}
.sb-group-toggle:hover {
  color: rgba(var(--hbd-color-white-rgb), 0.75);
}
.sb-group-toggle i {
  font-size: 10px;
  color: rgba(var(--hbd-color-white-rgb), 0.35);
  transition: transform 0.35s var(--hbd-ease);
}
.sb-group.is-closed .sb-group-toggle i {
  transform: rotate(-90deg);
}
.sb-group.is-closed .sb-list {
  display: none;
}
.sb-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* an item: icon tile, label, optional role tag and count */
.sb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 4px 10px 4px 4px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(var(--hbd-color-white-rgb), 0.72);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.sb-link .sb-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: rgba(var(--hbd-color-white-rgb), 0.62);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.sb-link .sb-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-link:hover {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.04);
}
.sb-link:hover .sb-ic {
  color: var(--hbd-color-white);
}
.sb-link.is-active {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
  box-shadow: inset 3px 0 0 var(--hbd-color-coral);
}
.sb-link.is-active .sb-ic {
  background-color: var(--hbd-color-coral);
  color: var(--hbd-color-ink);
}
/* role markers: O owned, F franchise, P partners, R referrers, S SaaS */
.sb-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  color: var(--hbd-color-ink);
}
.sb-tag.is-iris { background-color: var(--hbd-color-iris); }
.sb-tag.is-amber { background-color: var(--hbd-color-amber); }
.sb-tag.is-coral { background-color: var(--hbd-color-coral); }
.sb-tag.is-jade { background-color: var(--hbd-color-jade); }
.sb-tag.is-ink {
  background-color: var(--hbd-color-white);
}
.sb-count {
  flex: none;
  min-width: 22px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}
/* third level: a product sub-group with its Hibo glyph */
.sb-sub-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 4px 10px 4px 4px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(var(--hbd-color-white-rgb), 0.72);
  text-align: left;
}
.sb-sub-toggle .sb-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  font-size: 17px;
  color: var(--pc-accent);
  background-color: var(--pc-ground);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
}
.sb-sub-toggle .sb-label {
  flex: 1;
}
.sb-sub-toggle > i {
  font-size: 10px;
  color: rgba(var(--hbd-color-white-rgb), 0.35);
  transition: transform 0.35s var(--hbd-ease);
}
.sb-sub-toggle:hover {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.04);
}
.sb-sub.is-open .sb-sub-toggle > i {
  transform: rotate(180deg);
}
.sb-sub-list {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 20px;
  padding-left: 12px;
  box-shadow: inset 1px 0 0 rgba(var(--hbd-color-white-rgb), 0.1);
}
.sb-sub.is-open .sb-sub-list {
  display: flex;
}
.sb-sub-list .sb-link .sb-ic {
  width: 26px;
  height: 26px;
  font-size: 12px;
}
.sb-foot {
  flex: none;
  padding: 14px 16px 18px;
  box-shadow: inset 0 1px 0 rgba(var(--hbd-color-white-rgb), 0.06);
}
.sb-help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background-color: var(--hbd-color-raised);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.06);
}
.sb-help i {
  flex: none;
  font-size: 16px;
  color: var(--hbd-color-amber);
}
.sb-help b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hbd-color-white);
}
.sb-help span {
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.sb-help:hover b {
  color: var(--hbd-color-coral);
}
.sb-version {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(var(--hbd-color-white-rgb), 0.35);
}

/* collapsed: the icon rail */
.is-sidebar-mini .hbd-sidebar {
  width: var(--hbd-sidebar-mini);
}
.is-sidebar-mini .sb-head {
  justify-content: center;
  padding: 0;
}
.is-sidebar-mini .sb-logo .logo-word,
.is-sidebar-mini .sb-org .org-text,
.is-sidebar-mini .sb-label,
.is-sidebar-mini .sb-tag,
.is-sidebar-mini .sb-count,
.is-sidebar-mini .sb-group-toggle span,
.is-sidebar-mini .sb-sub-toggle > i,
.is-sidebar-mini .sb-help span,
.is-sidebar-mini .sb-help b,
.is-sidebar-mini .sb-version {
  display: none;
}
.is-sidebar-mini .sb-logo .logo-ring {
  display: block;
}
.is-sidebar-mini .sb-org {
  justify-content: center;
  margin: 14px 12px 4px;
  padding: 10px 0;
}
.is-sidebar-mini .sb-group-toggle {
  justify-content: center;
  padding: 10px 0 4px;
}
.is-sidebar-mini .sb-group.is-closed .sb-list {
  display: flex;
}
.is-sidebar-mini .sb-link,
.is-sidebar-mini .sb-sub-toggle {
  justify-content: center;
  padding: 4px 0;
}
.is-sidebar-mini .sb-sub-list {
  margin-left: 0;
  padding-left: 0;
  box-shadow: none;
}
.is-sidebar-mini .sb-help {
  justify-content: center;
}



/*---- 4.1 Jump & Pins ----*/
.sb-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  height: 38px;
  margin: 12px 12px 2px;
  padding: 0 10px 0 12px;
  border-radius: var(--hbd-r-field);
  font-size: 13.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.55);
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.06);
  transition: background-color var(--hbd-t-state) ease, color var(--hbd-t-state) ease;
}
.sb-jump:hover {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.1);
}
.sb-jump .sb-label {
  flex: 1;
  text-align: left;
}
.sb-jump kbd {
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--hbd-ff-body);
  font-size: 10.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.55);
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.is-sidebar-mini .sb-jump {
  justify-content: center;
  width: 44px;
  margin: 12px auto 2px;
  padding: 0;
}
.is-sidebar-mini .sb-jump kbd {
  display: none;
}
.sb-pin {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 10px;
  color: rgba(var(--hbd-color-white-rgb), 0.4);
  opacity: 0;
  transition: opacity var(--hbd-t-state) ease, color var(--hbd-t-state) ease;
}
.sb-link:hover .sb-pin,
.sb-pin:focus-visible,
.sb-pin.is-on {
  opacity: 1;
}
.sb-pin:hover,
.sb-pin.is-on {
  color: var(--hbd-color-coral);
}
.is-sidebar-mini .sb-pin {
  display: none;
}
.sb-pinned {
  padding: 8px 0 6px;
  margin-bottom: 4px;
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.06);
}
.sb-pinned-label {
  display: block;
  padding: 6px 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.is-sidebar-mini .sb-pinned-label {
  display: none;
}

/*======================
5. Top Bar
========================*/
/* ink with the soft maze and a blur in both themes: the Hibo header, turned into a working bar */
.hbd-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--hbd-topbar);
  padding: 0 var(--hbd-gutter);
  background-color: rgba(var(--hbd-color-ink-rgb), 0.94);
  background-image: url("../img/bg/pattern-maze-soft.png");
  background-size: 1440px auto;
  background-position: center top;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.07);
  color: rgba(var(--hbd-color-white-rgb), 0.72);
}
.tb-left,
.tb-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-left {
  flex: 1;
  min-width: 0;
}
.tb-right {
  flex: none;
}
.hbd-topbar .hbd-icon-btn {
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.16);
}
.hbd-topbar .hbd-icon-btn:hover {
  color: var(--hbd-color-ink);
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral);
}
.tb-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 2px var(--hbd-color-ink);
}
.tb-burger .burger-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 16px;
}
.tb-burger .burger-lines span {
  display: block;
  height: 2px;
  background-color: currentColor;
}
.tb-burger .burger-lines span:nth-child(2) {
  width: 11px;
}
/* scope switcher: which properties the page is looking at */
.tb-scope {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 44px;
  padding: 0 14px 0 6px;
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.12);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.tb-scope:hover,
.tb-scope[aria-expanded="true"] {
  background-color: rgba(var(--hbd-color-white-rgb), 0.05);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.24);
}
.tb-scope .scope-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--hbd-color-raised-2);
}
.tb-scope .scope-ic img {
  width: 20px;
  height: 20px;
}
.tb-scope .scope-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  text-align: left;
}
.tb-scope .scope-label {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.tb-scope .scope-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-scope > i {
  font-size: 10px;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
/* search */
.tb-search {
  position: relative;
  flex: 1;
  max-width: 440px;
}
.tb-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  font-size: 13px;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
  transform: translateY(-50%);
}
.tb-search input {
  width: 100%;
  height: 42px;
  padding: 0 44px 0 40px;
  border: 0;
  border-radius: 0;
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.1);
  color: var(--hbd-color-white);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.tb-search input::placeholder {
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.tb-search input:focus {
  outline: 0;
  background-color: rgba(var(--hbd-color-white-rgb), 0.09);
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral);
}
.tb-search kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  padding: 2px 7px;
  border-radius: 0;
  font-family: var(--hbd-ff-mono);
  font-size: 11px;
  color: rgba(var(--hbd-color-white-rgb), 0.55);
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
  transform: translateY(-50%);
}
/* the live tally: a working-day summary in the bar (the Hibo suite tally) */
.tb-tally {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 40px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.1);
}
.tb-tally b {
  font-family: var(--hbd-ff-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--hbd-color-white);
}
.tb-tally .sep {
  width: 6px;
  height: 6px;
  background-color: var(--hbd-color-coral);
}
/* the user */
.tb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 10px 3px 3px;
  color: var(--hbd-color-white);
  transition: background-color 0.3s ease;
}
.tb-user:hover,
.tb-user[aria-expanded="true"] {
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
}
/* the assistant's microphone: round, ringed in the four pillar colours */
.tb-voice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--hbd-color-white);
  background: conic-gradient(var(--hbd-color-coral), var(--hbd-color-amber), var(--hbd-color-jade), var(--hbd-color-iris), var(--hbd-color-coral));
  transition: transform 0.25s var(--hbd-ease);
}
.tb-voice::before {
  position: absolute;
  content: "";
  inset: 2px;
  border-radius: 50%;
  background-color: var(--hbd-color-raised);
}
.tb-voice i {
  position: relative;
}
.tb-voice:hover {
  transform: scale(1.06);
}
.tb-voice:focus-visible {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 3px;
}
.tb-full .ic-compress,
.is-fullscreen .tb-full .ic-expand {
  display: none;
}
.is-fullscreen .tb-full .ic-compress {
  display: inline-block;
}
.tb-user img {
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.tb-user .user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
.tb-user .user-name {
  font-size: 13.5px;
  font-weight: 600;
}
.tb-user .user-role {
  font-size: 11.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.theme-toggle .ic-dark {
  display: none;
}
[data-theme="dark"] .theme-toggle .ic-light {
  display: none;
}
[data-theme="dark"] .theme-toggle .ic-dark {
  display: inline-block;
}
.theme-toggle .hbi-sun {
  font-size: 1.2em;
}

/*======================
6. Menus, Modals & Drawers
========================*/
/*---- 6.1 Dropdown Menus ----*/
/* popovers stay dark in both themes (the Hibo sub-menu: raised panel, heavy shadow, hairline ring) */
.hbd-menu.dropdown-menu {
  min-width: 230px;
  padding: 8px;
  margin-top: 8px !important;
  border: 0;
  border-radius: 0;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
  color: rgba(var(--hbd-color-white-rgb), 0.72);
  font-size: 14px;
}
.hbd-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 0;
  color: rgba(var(--hbd-color-white-rgb), 0.8);
  font-weight: 500;
  white-space: nowrap;
}
.hbd-menu .dropdown-item i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
  transition: color 0.2s ease;
}
.hbd-menu .dropdown-item:hover i,
.hbd-menu .dropdown-item:focus i {
  color: var(--hbd-color-coral);
}
.hbd-menu .dropdown-item:hover,
.hbd-menu .dropdown-item:focus {
  background-color: rgba(var(--hbd-color-white-rgb), 0.07);
  color: var(--hbd-color-white);
}
.hbd-menu .dropdown-item:hover i {
  color: var(--hbd-color-coral);
}
.hbd-menu .dropdown-item.is-danger,
.hbd-menu .dropdown-item.is-danger i {
  color: #FF8F74;
}
.hbd-menu .dropdown-divider {
  margin: 6px 0;
  border-color: rgba(var(--hbd-color-white-rgb), 0.08);
  opacity: 1;
}
.hbd-menu .dropdown-header {
  padding: 8px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.hbd-menu .menu-kbd {
  margin-left: auto;
  font-family: var(--hbd-ff-mono);
  font-size: 11px;
  color: rgba(var(--hbd-color-white-rgb), 0.4);
}
/* the user card at the head of the user menu */
.menu-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px;
  margin-bottom: 6px;
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.08);
}
.menu-user img {
  width: 42px;
  height: 42px;
  object-fit: cover;
}
.menu-user b {
  display: block;
  font-size: 14px;
  color: var(--hbd-color-white);
}
.menu-user span {
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}

/*---- 6.2 Notifications Panel ----*/
.hbd-notify.dropdown-menu {
  width: 390px;
  padding: 0;
}
.notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.08);
}
.notify-head b {
  font-family: var(--hbd-ff-heading);
  font-size: 16px;
  color: var(--hbd-color-white);
}
.notify-head a {
  font-size: 12.5px;
  color: var(--hbd-color-coral);
}
.notify-list {
  max-height: 380px;
  overflow-y: auto;
}
.notify-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  color: rgba(var(--hbd-color-white-rgb), 0.72);
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.05);
}
.notify-item:hover {
  background-color: rgba(var(--hbd-color-white-rgb), 0.04);
  color: rgba(var(--hbd-color-white-rgb), 0.9);
}
.notify-item .n-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--hbd-color-ink);
}
.notify-item .n-body {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.notify-item .n-body b {
  color: var(--hbd-color-white);
  font-weight: 600;
}
.notify-item .n-time {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.4);
}
.notify-item.is-unread {
  box-shadow: inset 3px 0 0 var(--hbd-color-coral), inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.05);
}
.notify-foot {
  display: block;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--hbd-color-white);
}
.notify-foot:hover {
  color: var(--hbd-color-coral);
}
.notify-empty {
  padding: 36px 24px;
  text-align: center;
  font-size: 13.5px;
}
.notify-empty i {
  display: block;
  margin-bottom: 10px;
  font-size: 22px;
  color: var(--hbd-color-jade);
}

/*---- 6.3 Scope Panel ----*/
/* the Hibo mega-menu shell: the property list on the left, a preview on the right */
.hbd-scope.dropdown-menu {
  width: 860px;
  max-width: calc(100vw - 32px);
  padding: 0;
}
.scope-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 430px;
}
.scope-list {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background-color: var(--hbd-color-ink);
}
.scope-search {
  position: relative;
  margin-bottom: 10px;
}
.scope-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.4);
  transform: translateY(-50%);
}
.scope-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 0;
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
  color: var(--hbd-color-white);
  font-size: 13.5px;
}
.scope-search input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral);
}
.scope-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 436px;
  padding-bottom: 28px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}
.scope-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  color: rgba(var(--hbd-color-white-rgb), 0.75);
  text-align: left;
}
.scope-item:hover,
.scope-item.is-active {
  background-color: rgba(var(--hbd-color-white-rgb), 0.07);
  color: var(--hbd-color-white);
}
.scope-item .si-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 17px;
  color: var(--pc-accent);
  background-color: var(--pc-ground);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
}
.scope-item .si-ic.is-all {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
  font-size: 13px;
}
.scope-item .si-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.scope-item .si-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.scope-item .si-sub {
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.scope-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}
.scope-stage .shot-frame img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
.scope-stage h5 {
  color: var(--hbd-color-white);
}
.scope-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 14px;
  box-shadow: inset 0 1px 0 rgba(var(--hbd-color-white-rgb), 0.08);
}
.scope-facts b {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--hbd-color-white);
}
.scope-facts span {
  font-size: 11.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.shot-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
}
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  background-color: var(--hbd-color-raised-2);
}
.shot-bar i {
  display: block;
  width: 7px;
  height: 7px;
  background-color: rgba(var(--hbd-color-white-rgb), 0.22);
}
.shot-bar i:first-child {
  background-color: var(--hbd-color-coral);
}
.shot-bar i:nth-child(2) {
  background-color: var(--hbd-color-amber);
}
.shot-bar i:nth-child(3) {
  background-color: var(--hbd-color-jade);
}
.shot-bar .shot-url {
  margin-left: 8px;
  font-size: 10.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}

/*---- 6.4 Modals ----*/
.hbd-modal .modal-content {
  border: 0;
  border-radius: 0;
  background-color: var(--hbd-surface);
  color: var(--hbd-text);
  box-shadow: var(--hbd-shadow-lg);
}
.hbd-modal .modal-header {
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-modal .modal-header p {
  margin-top: 4px;
  font-size: 13.5px;
}
.hbd-modal .modal-body {
  padding: 22px 24px;
}
.hbd-modal .modal-footer {
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--hbd-line);
}
.hbd-modal .modal-footer > * {
  margin: 0;
}
.modal-backdrop.show {
  background-color: var(--hbd-color-ink);
  opacity: 0.55;
}
.modal-backdrop,
.offcanvas-backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* the confirm modal: a coloured icon tile, the question, the consequence */
.hbd-confirm .modal-body {
  display: flex;
  gap: 18px;
  padding-top: 26px;
}
.hbd-confirm .confirm-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  font-size: 18px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}
.hbd-confirm.is-danger .confirm-ic {
  background-color: var(--hbd-color-coral);
}
.hbd-confirm h4 {
  margin-bottom: 6px;
}

/*---- 6.5 Shared Overlays ----*/
/* import: the template line, the column matching table and its marks */
.imp-template {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  background-color: var(--hbd-surface-2);
}
.imp-template p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
}
.imp-map td {
  vertical-align: middle;
}
.imp-map .hbd-field {
  min-width: 190px;
}
.imp-sample {
  font-size: 13px;
  color: var(--hbd-muted);
}
.imp-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hbd-muted);
}
.imp-mark.is-ok {
  color: var(--hbd-jade-text);
}
.imp-mark.is-warn {
  color: var(--hbd-amber-text);
}
/* composer: the variables row under the message */
.cm-insert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
.cm-insert .field-label {
  margin: 0 8px 0 0;
}
/* document viewer: the page on a grey stage, the file's facts beside it */
.doc-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
}
.doc-stage {
  padding: 0 28px 28px;
  background-color: var(--hbd-surface-2);
}
.doc-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.doc-sheet {
  transform-origin: top center;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
  aspect-ratio: 1 / 1.32;
  margin: 0 auto;
  padding: 38px 42px;
  background-color: var(--hbd-color-white);
  box-shadow: 0 12px 34px rgba(var(--hbd-color-ink-rgb), 0.14);
}
.doc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 10px;
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-ink-rgb), 0.1);
}
.doc-mark {
  flex: none;
  width: 34px;
  height: 34px;
  background:
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) left top / 50% 50% no-repeat,
    linear-gradient(var(--hbd-color-iris), var(--hbd-color-iris)) right top / 50% 50% no-repeat,
    linear-gradient(var(--hbd-color-jade), var(--hbd-color-jade)) left bottom / 50% 50% no-repeat,
    linear-gradient(var(--hbd-color-amber), var(--hbd-color-amber)) right bottom / 50% 50% no-repeat;
}
.doc-name {
  margin-bottom: 6px;
  font-family: var(--hbd-ff-heading);
  font-size: 18px;
  color: var(--hbd-color-ink);
}
.doc-line {
  display: block;
  height: 8px;
  background-color: rgba(var(--hbd-color-ink-rgb), 0.09);
}
.doc-line.is-head {
  height: 12px;
}
.doc-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
  background-color: rgba(var(--hbd-color-ink-rgb), 0.04);
}
.doc-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.doc-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  font-size: 20px;
  color: var(--hbd-color-jade-deep);
  box-shadow: inset 0 0 0 2px var(--hbd-color-jade);
}
.doc-side .hbd-kv {
  margin: 0;
}
/* toolbar buttons that stay pressed */
.hbd-icon-btn.is-active {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}

/*---- 6.6 Assistant ----*/
.ai-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 19px;
  color: var(--hbd-color-white);
  background: conic-gradient(from 200deg, var(--hbd-color-coral), var(--hbd-color-amber), var(--hbd-color-jade), var(--hbd-color-iris), var(--hbd-color-coral));
}
.ai-mark.is-sm {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.hbd-thread .msg .ai-mark {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.hbd-assistant .as-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hbd-assistant .as-title p {
  margin: 2px 0 0;
  font-size: 13px;
}
.as-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0 18px;
  text-align: center;
}
.as-orb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: transparent;
}
.as-orb .orb-core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  font-size: 26px;
  color: var(--hbd-color-white);
  background: conic-gradient(from 200deg, var(--hbd-color-coral), var(--hbd-color-amber), var(--hbd-color-jade), var(--hbd-color-iris), var(--hbd-color-coral));
  box-shadow: 0 16px 40px rgba(var(--hbd-color-coral-rgb), 0.3);
}
.as-orb .orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(var(--hbd-color-coral-rgb), 0.35);
  opacity: 0;
}
.hbd-assistant[data-state="listening"] .orb-ring {
  animation: hbd-orb 1.8s ease-out infinite;
}
.hbd-assistant[data-state="listening"] .orb-ring + .orb-ring {
  animation-delay: 0.9s;
}
@keyframes hbd-orb {
  from { opacity: 0.9; transform: scale(0.7); }
  to { opacity: 0; transform: scale(1.35); }
}
.as-state {
  font-size: 13px;
  font-weight: 600;
  color: var(--hbd-coral-text);
}
.as-heard {
  max-width: 560px;
  margin: 0;
  font-family: var(--hbd-ff-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hbd-heading);
}
.as-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  visibility: hidden;
}
.as-wave i {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--hbd-color-coral);
}
.hbd-assistant[data-state="listening"] .as-wave {
  visibility: visible;
}
.hbd-assistant[data-state="listening"] .as-wave i {
  animation: hbd-wave 0.9s ease-in-out infinite alternate;
}
.as-wave i:nth-child(2) { animation-delay: 0.1s !important; background-color: var(--hbd-color-amber); }
.as-wave i:nth-child(3) { animation-delay: 0.2s !important; background-color: var(--hbd-color-jade); }
.as-wave i:nth-child(4) { animation-delay: 0.3s !important; background-color: var(--hbd-color-iris); }
.as-wave i:nth-child(5) { animation-delay: 0.4s !important; background-color: var(--hbd-color-jade); }
.as-wave i:nth-child(6) { animation-delay: 0.5s !important; background-color: var(--hbd-color-amber); }
.as-wave i:nth-child(7) { animation-delay: 0.6s !important; }
@keyframes hbd-wave {
  from { height: 6px; }
  to { height: 26px; }
}
.as-answer {
  display: none;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 3px 0 0 var(--hbd-color-coral);
}
.as-answer p {
  margin: 4px 0 12px;
  font-size: 15px;
  color: var(--hbd-heading);
}
.hbd-assistant[data-state="answer"] .as-answer {
  display: flex;
}
.as-try {
  margin-top: 18px;
}
.as-try-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px;
}
.as-try-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  text-align: left;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
  border: 0;
}
.as-try-item i {
  color: var(--hbd-coral-text);
}
.as-try-item:hover {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.08);
}
/* the ask bar: on the ink briefing, and light in cards and the assistant */
.ai-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.14);
}
.ai-ask > i {
  color: var(--hbd-color-coral);
}
.ai-ask input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hbd-color-white);
  font-size: 14.5px;
}
.ai-ask input:focus {
  outline: 0;
}
.ai-ask input::placeholder {
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.ai-ask:focus-within {
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral), 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.18);
}
.ai-ask .ai-mic {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.ai-ask.is-light {
  background-color: var(--hbd-input-bg);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.ai-ask.is-light input {
  color: var(--hbd-heading);
}
.ai-ask.is-light input::placeholder {
  color: var(--hbd-faint);
}
.ai-ask.is-light .ai-mic {
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
}
.ai-ask.is-light:focus-within {
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral), 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .hbd-assistant .orb-ring,
  .hbd-assistant .as-wave i {
    animation: none !important;
  }
}

/*---- 6.7 Drawers ----*/
.hbd-drawer.offcanvas.is-wide {
  width: 720px;
}
.hbd-drawer.offcanvas {
  width: 460px;
  max-width: 100vw;
  border: 0;
  background-color: var(--hbd-surface);
  color: var(--hbd-text);
  box-shadow: var(--hbd-shadow-lg);
}
.hbd-drawer .offcanvas-header {
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-drawer .offcanvas-body {
  padding: 22px 24px;
}
.hbd-drawer .drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--hbd-line);
}
.offcanvas-backdrop.show {
  background-color: var(--hbd-color-ink);
  opacity: 0.55;
}

/*---- 6.8 Toasts & Tooltips ----*/
.hbd-toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.hbd-toast {
  --tt: var(--hbd-color-jade);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 12px 12px 12px 14px;
  background-color: #111318;
  color: rgba(var(--hbd-color-white-rgb), 0.72);
  box-shadow: 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08), 0 20px 50px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  pointer-events: auto;
}
.hbd-toast.is-error { --tt: var(--hbd-color-coral); }
.hbd-toast.is-info { --tt: var(--hbd-color-iris); }
.hbd-toast .toast-ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--hbd-color-ink);
  background-color: var(--tt);
}
.hbd-toast .toast-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.hbd-toast b {
  display: block;
  color: var(--hbd-color-white);
  font-weight: 600;
  font-size: 13.5px;
}
.hbd-toast .toast-undo {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.1);
  transition: background-color var(--hbd-t-state) ease;
}
.hbd-toast .toast-undo:hover {
  background-color: rgba(var(--hbd-color-white-rgb), 0.2);
}
.hbd-toast .toast-close {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.hbd-toast .toast-close:hover {
  color: var(--hbd-color-white);
}
/* the time left: a thin line that runs out (paused while the pointer is on the toast) */
.hbd-toast .toast-time {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--tt);
  transform-origin: left center;
  animation: hbd-toast-time 4.2s linear forwards;
}
.hbd-toast:hover .toast-time {
  animation-play-state: paused;
}
@keyframes hbd-toast-time {
  to { transform: scaleX(0); }
}
.tooltip {
  --bs-tooltip-bg: #111318;
  --bs-tooltip-border-radius: 6px;
  --bs-tooltip-font-size: 12.5px;
  --bs-tooltip-padding-x: 10px;
  --bs-tooltip-padding-y: 6px;
  --bs-tooltip-opacity: 1;
  font-family: var(--hbd-ff-body);
  font-weight: 500;
}
.hbd-tip .tooltip-inner {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}




/*---- 6.9 Command Palette ----*/
.hbd-palette {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background-color: rgba(var(--hbd-color-ink-rgb), 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hbd-palette[hidden] {
  display: none;
}
.pal-box {
  display: flex;
  flex-direction: column;
  width: 640px;
  max-width: 100%;
  max-height: 70vh;
  overflow: hidden;
  border-radius: var(--hbd-r-panel);
  background-color: var(--hbd-color-raised);
  color: var(--hbd-color-white);
  box-shadow: 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08), 0 40px 100px rgba(0, 0, 0, 0.5);
}
.pal-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(var(--hbd-color-white-rgb), 0.08);
}
.pal-search i {
  color: var(--hbd-color-coral);
}
.pal-search input {
  flex: 1;
  height: 58px;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: var(--hbd-color-white);
  background: transparent;
}
.pal-search input::placeholder {
  color: rgba(var(--hbd-color-white-rgb), 0.4);
}
.hbd-palette kbd {
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--hbd-ff-body);
  font-size: 11px;
  color: rgba(var(--hbd-color-white-rgb), 0.6);
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.pal-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.pal-group {
  padding: 10px 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.pal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--hbd-r-field);
  color: rgba(var(--hbd-color-white-rgb), 0.82);
}
.pal-item.is-active {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.pal-ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.7);
  background-color: rgba(var(--hbd-color-white-rgb), 0.07);
}
.pal-item.is-active .pal-ic {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.pal-name {
  font-size: 14px;
  font-weight: 500;
}
.pal-where {
  flex: 1;
  font-size: 12.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.4);
  text-align: right;
}
.pal-go {
  font-size: 11px;
  opacity: 0;
}
.pal-item.is-active .pal-go {
  opacity: 1;
  color: var(--hbd-color-coral);
}
.pal-empty {
  padding: 26px 10px;
  font-size: 13.5px;
  text-align: center;
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.pal-foot {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
  border-top: 1px solid rgba(var(--hbd-color-white-rgb), 0.08);
}
.pal-foot kbd {
  margin-right: 4px;
}

/*======================
7. Page Head & Banners
========================*/
/*---- 7.1 Page Head ----*/
/* every page opens the Hibo way: eyebrow with the four-colour dash, an 800 title, a one-line lead, actions */
.hbd-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
  margin-bottom: 22px;
}
.ph-text {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 820px;
}
.ph-actions {
  flex: none;
}
/* a "more" menu among the page actions takes the height and ring of the buttons beside it */
.ph-actions .dropdown > .hbd-icon-btn {
  width: 44px;
  height: 44px;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.ph-text h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 30px;
}
.ph-text h1 .hbd-badge,
.ph-text h1 .hbd-role,
.ph-text h1 .hbd-product {
  font-family: var(--hbd-ff-body);
  letter-spacing: 0;
}
.ph-text .hbd-lead {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--hbd-muted);
}
.ph-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hbd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--hbd-muted);
}
.hbd-crumbs a {
  color: var(--hbd-text);
}
.hbd-crumbs a:hover {
  color: var(--hbd-coral-text);
}
.hbd-crumbs i {
  font-size: 9px;
  color: var(--hbd-faint);
}
.hbd-crumbs span {
  color: var(--hbd-heading);
  font-weight: 500;
}
/* the page's own tab row under the head (Overview / Units / Team ...) */
.hbd-page-tabs {
  margin: -8px 0 24px;
}
/* a strip of figures under a title (hero facts, compacted) */
.hbd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin-top: 18px;
}
.hbd-facts .fact b {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--hbd-heading);
}
.hbd-facts .fact span {
  font-size: 12.5px;
  color: var(--hbd-muted);
}

/*---- 7.2 Banners ----*/
/* full-width strips above the content: announcement, trial, impersonation */
.hbd-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px var(--hbd-gutter);
  font-size: 13.5px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}
.hbd-banner > i {
  flex: none;
}
.hbd-banner p {
  flex: 1;
  min-width: 0;
}
.hbd-banner b {
  font-weight: 600;
}
.hbd-banner a:not(.hbd-btn) {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hbd-banner a:not(.hbd-btn):hover {
  color: inherit;
  opacity: 0.75;
}
.hbd-banner .banner-close {
  flex: none;
  color: inherit;
}
.hbd-banner.is-info {
  background-color: var(--hbd-color-iris);
  color: var(--hbd-color-white);
}
.hbd-banner.is-danger {
  background-color: var(--hbd-color-coral);
}
.hbd-banner.is-success {
  background-color: var(--hbd-color-jade);
}
.hbd-banner.is-ink {
  background-color: var(--hbd-color-raised-2);
  color: rgba(var(--hbd-color-white-rgb), 0.8);
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.06);
}
.hbd-banner.is-ink > i {
  color: var(--hbd-color-amber);
}
.hbd-banner .hbd-btn {
  flex: none;
}

/*---- 7.3 Alerts ----*/
/* inline messages inside a page or card: a quiet tint, the tone in a round icon chip, no side bar */
.hbd-alert {
  --al: var(--hbd-color-iris);
  --al-rgb: var(--hbd-color-iris-rgb);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  font-size: 14px;
  background-color: rgba(var(--al-rgb), 0.07);
  box-shadow: inset 0 0 0 1px rgba(var(--al-rgb), 0.2);
  color: var(--hbd-text);
}
.hbd-alert.is-success { --al: var(--hbd-color-jade); --al-rgb: var(--hbd-color-jade-rgb); }
.hbd-alert.is-warning { --al: var(--hbd-color-amber); --al-rgb: var(--hbd-color-amber-rgb); }
.hbd-alert.is-danger { --al: var(--hbd-color-coral); --al-rgb: var(--hbd-color-coral-rgb); }
.hbd-alert > i {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--hbd-color-white);
  background-color: var(--al);
}
.hbd-alert.is-warning > i,
.hbd-alert.is-success > i {
  color: var(--hbd-color-ink);
}
.hbd-alert > div {
  padding-top: 3px;
}
.hbd-alert b {
  display: block;
  margin-bottom: 2px;
  color: var(--hbd-heading);
  font-weight: 600;
}
.hbd-alert .alert-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

/*======================
8. Cards & KPI Tiles
========================*/
/*---- 8.1 Card ----*/
.hbd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring);
  border-radius: 0;
}
.card-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 18px 22px 0;
}
.card-head.has-line {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hbd-line);
}
.card-title {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.card-title h4 {
  font-size: 16.5px;
}
.card-title p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--hbd-muted);
}
.card-tools {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: -6px;
  margin-left: auto;
}
.card-body {
  flex: 1;
  padding: 18px 22px 22px;
}
.card-body.is-flush {
  padding: 0;
}
.card-body.is-tight {
  padding-top: 10px;
}
.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--hbd-line);
  font-size: 13px;
}
/* clickable cards: lift + a 2px pillar ring (the Hibo standards tile), the colour cycling by position */
.is-ring {
  --ring: var(--hbd-color-coral);
  transition: transform 0.4s var(--hbd-ease), box-shadow 0.4s var(--hbd-ease);
}
.hbd-ring-grid > .is-ring:nth-child(4n+2),
.hbd-ring-grid > * > .is-ring:nth-child(4n+2) {
  --ring: var(--hbd-color-iris);
}
.hbd-ring-grid > .is-ring:nth-child(4n+3) {
  --ring: var(--hbd-color-jade);
}
.hbd-ring-grid > .is-ring:nth-child(4n+4) {
  --ring: var(--hbd-color-amber);
}
.is-ring:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--ring), var(--hbd-shadow);
}

/*---- 8.2 KPI Tiles ----*/
/* a compact Hibo pillar card: a 4px pillar bar on top, caps label, count-up figure, delta */
.hbd-kpi {
  --kc: var(--hbd-color-coral);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px 22px 18px;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring);
}
.hbd-kpi { --kc-rgb: var(--hbd-color-coral-rgb); }
.hbd-kpi.is-iris { --kc: var(--hbd-color-iris); --kc-rgb: var(--hbd-color-iris-rgb); }
.hbd-kpi.is-jade { --kc: var(--hbd-color-jade); --kc-rgb: var(--hbd-color-jade-rgb); }
.hbd-kpi.is-amber { --kc: var(--hbd-color-amber); --kc-rgb: var(--hbd-color-amber-rgb); }
.kpi-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
}
.kpi-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--hbd-muted);
}
.kpi-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 13px;
  color: var(--kc);
  background-color: rgba(var(--kc-rgb), 0.13);
}
.kpi-value {
  font-family: var(--hbd-ff-heading);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hbd-heading);
}
.kpi-value small {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--hbd-muted);
}
.kpi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.hbd-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hbd-jade-text);
  background-color: rgba(var(--hbd-color-jade-rgb), var(--hbd-tint));
}
.hbd-delta i {
  font-size: 9px;
}
.hbd-delta.is-down {
  color: var(--hbd-coral-text);
  background-color: rgba(var(--hbd-color-coral-rgb), var(--hbd-tint));
}
.hbd-delta.is-flat {
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
}
.kpi-spark {
  height: 42px;
  margin: 2px -6px -6px;
}
/* the headline figure: once per dashboard, in the pillar gradient (the Hibo hero numeral) */
.hbd-hero-figure {
  font-family: var(--hbd-ff-heading);
  font-size: clamp(44px, 4.4vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background-image: linear-gradient(100deg, var(--hbd-color-coral) 0%, var(--hbd-color-iris) 38%, var(--hbd-color-jade) 70%, var(--hbd-color-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* a row of figures is one strip: one surface, hairline dividers (the gap shows the line colour) */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--hbd-r-card);
  background-color: var(--hbd-line);
  box-shadow: var(--hbd-card-ring);
}
.kpi-row > .hbd-kpi {
  border-radius: 0;
  box-shadow: none;
}
.kpi-row.is-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.kpi-row.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi-row.is-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*---- 8.3 Lists In Cards ----*/
/* key-value rows (booking summary, settings summary) */
.hbd-kv {
  display: flex;
  flex-direction: column;
}
.hbd-kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hbd-line);
  font-size: 14px;
}
.hbd-kv > div:last-child {
  border-bottom: 0;
}
.hbd-kv dt {
  font-weight: 400;
  color: var(--hbd-muted);
}
.hbd-kv dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--hbd-heading);
}
.hbd-kv .is-total dt,
.hbd-kv .is-total dd {
  font-family: var(--hbd-ff-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--hbd-heading);
}
.hbd-kv .is-saving dd {
  color: var(--hbd-jade-text);
}
/* record rows: a thumb or avatar, a name and a sub-line, a trailing value */
.hbd-rows {
  display: flex;
  flex-direction: column;
}
.hbd-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hbd-line);
  min-width: 0;
}
.hbd-row:last-child {
  border-bottom: 0;
}
/* a sentence above its actions keeps a clear gap */
.card-body > p + .hbd-btn-row,
.card-body > p + .hbd-btn {
  margin-top: 14px;
}
/* a short list across the row */
.rows-3col .hbd-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}
.rows-3col .hbd-row {
  border-bottom: 0;
}
/* a long list split in two columns */
.rows-2col .hbd-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.rows-2col .hbd-row:last-child {
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-row .row-main {
  flex: 1;
  min-width: 0;
}
.hbd-row .row-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hbd-heading);
}
.hbd-row .row-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hbd-muted);
  overflow-wrap: anywhere;
}
.hbd-row .row-end {
  flex: none;
  text-align: right;
  font-size: 13.5px;
}
.hbd-row .row-end b {
  display: block;
  color: var(--hbd-heading);
  font-weight: 600;
}
a.hbd-row:hover .row-title {
  color: var(--hbd-coral-text);
}
/* thumbnails */
.hbd-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  background-color: var(--hbd-surface-3);
}
.hbd-thumb.is-sm {
  width: 38px;
  height: 38px;
}
.hbd-thumb.is-lg {
  width: 72px;
  height: 56px;
}
/* a glyph tile in a product's own colours */
.hbd-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  font-size: 20px;
  color: var(--pc-accent);
  background-color: var(--pc-ground);
  box-shadow: inset 0 0 0 4px var(--pc-ground), inset 0 0 0 5px rgba(var(--hbd-color-white-rgb), 0.14);
}
.hbd-glyph.is-sm {
  width: 32px;
  height: 32px;
  font-size: 15px;
  box-shadow: none;
}
.hbd-glyph.is-lg {
  width: 58px;
  height: 58px;
  font-size: 27px;
}
/* an icon tile on the theme surface (not a product) */
.hbd-tile-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  font-size: 15px;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
}
.hbd-tile-ic.is-coral {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.hbd-tile-ic.is-iris {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-iris);
}
.hbd-tile-ic.is-jade {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-jade);
}
.hbd-tile-ic.is-amber {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}

/*---- 8.4 Media Cards ----*/
/* a property or product card: the photo, a body, a foot of figures */
.hbd-media-card {
  display: flex;
  flex-direction: column;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring);
}
.hbd-media-card .mc-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--hbd-surface-3);
}
.hbd-media-card .mc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--hbd-ease);
}
.hbd-media-card:hover .mc-img img {
  transform: scale(1.05);
}
.hbd-media-card .mc-flags {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hbd-media-card .mc-body {
  flex: 1;
  padding: 18px 20px;
}
.hbd-media-card .mc-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hbd-media-card .mc-title h5 {
  font-size: 16px;
}
.hbd-media-card .mc-sub {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.hbd-media-card .mc-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hbd-line);
}
.hbd-media-card .mc-foot > div {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--hbd-muted);
}
.hbd-media-card .mc-foot > div + div {
  border-left: 1px solid var(--hbd-line);
}
.hbd-media-card .mc-foot b {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--hbd-heading);
}
/* meters: a label, a bar and a value (occupancy by property, plan usage) */
.hbd-meter + .hbd-meter {
  margin-top: 16px;
}
.hbd-meter .meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 13.5px;
}
.hbd-meter .meter-top b {
  color: var(--hbd-heading);
  font-weight: 600;
}
/* the coral call-to-action tile of a bento (Finish setup, Upgrade) */
.hbd-cta-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  background-color: var(--hbd-color-coral);
  color: var(--hbd-color-ink);
}
.hbd-cta-tile h4 {
  color: var(--hbd-color-ink);
  font-size: 20px;
  font-weight: 800;
}
.hbd-cta-tile p {
  color: rgba(var(--hbd-color-ink-rgb), 0.78);
  font-size: 14px;
}
.hbd-cta-tile .hbd-btn {
  align-self: flex-start;
}
/* an ink card (a dark panel on the paper page: highlight, promo, the network map) */
.hbd-card.is-ink {
  background-color: var(--hbd-color-ink);
  color: rgba(var(--hbd-color-white-rgb), 0.68);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.06);
}
.hbd-card.is-ink h1,
.hbd-card.is-ink h2,
.hbd-card.is-ink h3,
.hbd-card.is-ink h4,
.hbd-card.is-ink h5 {
  color: var(--hbd-color-white);
}
.hbd-card.is-ink .hbd-badge {
  color: rgba(var(--hbd-color-white-rgb), 0.8);
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.hbd-card.is-ink .hbd-badge.is-coral { color: var(--hbd-color-coral); }
.hbd-card.is-ink .hbd-badge.is-iris { color: #8FA6FF; }
.hbd-card.is-ink .hbd-badge.is-jade { color: var(--hbd-color-jade); }
.hbd-card.is-ink .hbd-badge.is-amber { color: var(--hbd-color-amber); }
.hbd-card.is-ink .card-head.has-line,
.hbd-card.is-ink .card-foot {
  border-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.hbd-card.is-maze {
  background-image: url("../img/bg/pattern-maze-soft.png");
  background-size: 1200px auto;
  background-position: center;
}




/* a card title led by its icon tile */
.card-title.has-icon {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
/*---- 8.5 Showcase Cards ----*/
/* a person or brand as a card worth sharing: photo cover with glass controls, a story-ring avatar, the year's figure with
   its sparkline, stat tiles, progress to the next tier, the copyable link */
.show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.st-data > .show-grid,
.st-data > [data-view-pane] > .show-grid {
  padding: 22px;
}
.show-card {
  --sc: var(--hbd-color-coral);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
  transition: transform 0.4s var(--hbd-ease), box-shadow 0.4s ease;
}
.show-card.is-iris { --sc: var(--hbd-color-iris); }
.show-card.is-jade { --sc: var(--hbd-color-jade); }
.show-card.is-amber { --sc: var(--hbd-color-amber); }
.show-card.is-muted { --sc: var(--hbd-faint); }
.show-card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2), 0 34px 60px -34px rgba(var(--hbd-color-ink-rgb), 0.6);
}
.show-card.is-selected {
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral), 0 30px 56px -34px rgba(var(--hbd-color-coral-rgb), 0.7);
}
/* cover */
.sc-cover {
  position: relative;
  height: 132px;
  overflow: hidden;
  background-color: var(--hbd-color-ink);
}
.sc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--hbd-ease);
}
.show-card:hover .sc-cover img {
  transform: scale(1.07);
}
.sc-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(var(--hbd-color-ink-rgb), 0.45) 0%, rgba(var(--hbd-color-ink-rgb), 0) 42%, rgba(var(--hbd-color-ink-rgb), 0.5) 100%);
  pointer-events: none;
}
.show-card.is-paused .sc-cover img,
.show-card[data-status="paused"] .sc-cover img {
  filter: grayscale(1);
}
/* glass controls on the photo */
.sc-select,
.sc-rank,
.sc-menu .hbd-icon-btn {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-ink-rgb), 0.42);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sc-select {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s ease, transform 0.25s var(--hbd-ease), background-color 0.25s ease;
}
.show-card:hover .sc-select,
.show-grid.is-selecting .sc-select,
.show-card.is-selected .sc-select,
.sc-select:focus-within {
  opacity: 1;
  transform: none;
}
.sc-select input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.sc-select span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 13px;
  color: rgba(var(--hbd-color-white-rgb), 0.55);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;
}
.sc-select:hover span {
  color: var(--hbd-color-white);
}
.sc-select input:checked + span {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
  box-shadow: 0 8px 20px rgba(var(--hbd-color-coral-rgb), 0.55);
}
.sc-select input:focus-visible + span {
  outline: 2px solid var(--hbd-color-white);
  outline-offset: 2px;
}
.sc-rank {
  position: absolute;
  top: 13px;
  right: 54px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sc-rank.is-top {
  color: var(--hbd-color-ink);
  background: linear-gradient(100deg, var(--hbd-color-amber), var(--hbd-color-coral));
  box-shadow: 0 8px 22px rgba(var(--hbd-color-coral-rgb), 0.45);
}
.sc-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}
.sc-menu .hbd-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.sc-menu .hbd-icon-btn:hover {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-white);
}
/* identity: the avatar in a story ring over the cover's edge */
.sc-id {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: -36px;
  padding: 0 18px;
}
.sc-ring {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background-color: var(--hbd-line-2);
}
.sc-ring.is-live {
  background: conic-gradient(from 200deg, var(--hbd-color-coral), var(--hbd-color-amber), var(--hbd-color-jade), var(--hbd-color-iris), var(--hbd-color-coral));
}
.sc-ring.is-pending {
  background: repeating-conic-gradient(var(--hbd-color-amber) 0 20deg, transparent 20deg 32deg);
}
.sc-ring .hbd-avatar {
  width: 70px;
  height: 70px;
  border: 3px solid var(--hbd-surface);
  font-size: 21px;
}
.sc-name {
  flex: 1;
  min-width: 0;
  padding-top: 44px;
}
.sc-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-title a {
  color: var(--hbd-heading);
}
.sc-title a:hover {
  color: var(--hbd-coral-text);
}
.sc-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.sc-kind i {
  font-size: 11px;
  color: var(--sc);
}
.sc-id > .hbd-badge {
  flex: none;
  margin-top: 46px;
}
/* the year's figure and its months */
.sc-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 18px 0;
}
.sc-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}
.sc-figure {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--hbd-heading);
}
.show-card.is-top .sc-figure {
  padding-right: 0.04em;
  background: linear-gradient(100deg, var(--hbd-color-coral), var(--hbd-color-amber) 45%, var(--hbd-color-jade) 75%, var(--hbd-color-iris));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sc-hero .hbd-delta {
  flex: none;
  margin-bottom: 2px;
}
.sc-spark {
  height: 70px;
  margin: 6px 0 0;
}
/* three stat tiles */
.sc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 18px 0;
}
.sc-stats > div {
  min-width: 0;
  padding: 11px 12px;
  background-color: var(--hbd-tonal);
}
.sc-stats b {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--hbd-heading);
}
.sc-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--hbd-muted);
}
.sc-stats span i {
  font-size: 10px;
  color: var(--sc);
}
/* progress to the next tier */
.sc-tier {
  padding: 16px 18px 0;
}
.sc-tier .st-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.sc-tier .st-top > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.sc-tier .st-top i {
  font-size: 11px;
  color: var(--sc);
}
.sc-tier .st-top b {
  color: var(--hbd-heading);
}
.sc-tier .st-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--hbd-jade-text);
}
.sc-tier .st-done i {
  color: var(--hbd-jade-text);
}
.show-card.is-muted .hbd-progress span {
  background-color: var(--hbd-faint);
}
/* the foot: the link to copy, the way in */
.sc-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 18px;
}
.sc-link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hbd-heading);
  background-color: var(--hbd-tonal);
  transition: background-color 0.25s ease;
}
.sc-link > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.sc-link i {
  font-size: 12px;
  color: var(--sc);
}
.sc-link i:last-child {
  color: var(--hbd-muted);
}
.sc-link:hover {
  background-color: var(--hbd-tonal-2);
}
.sc-link:hover i:last-child {
  color: var(--hbd-coral-text);
}
.sc-go.hbd-icon-btn {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
  box-shadow: none;
  transition: transform 0.3s var(--hbd-ease), background-color 0.25s ease, color 0.25s ease;
}
.sc-go.hbd-icon-btn:hover {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-ink);
  transform: translateX(3px);
}
[data-theme="dark"] .sc-go.hbd-icon-btn:hover {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-white);
}


/*---- 8.6 Showcase Variants ----*/
/* the same card language on every showcase page: a colour cover where there is no photo, chips and a route on the
   cover, a round mark for things, an editorial variant, and a compact size inside a card */
.show-card { --sc-deep: var(--hbd-color-coral-deep); }
.show-card.is-iris { --sc-deep: var(--hbd-color-iris-deep); }
.show-card.is-jade { --sc-deep: var(--hbd-color-jade-deep); }
.show-card.is-amber { --sc-deep: var(--hbd-color-amber-deep); }
.show-card.is-muted { --sc-deep: #5F636C; }
.show-card.is-ink { --sc: #2E3440; --sc-deep: var(--hbd-color-ink); }
.sc-cover.is-graphic {
  background: radial-gradient(90% 120% at 100% 0%, rgba(var(--hbd-color-white-rgb), 0.22), transparent 60%),
    linear-gradient(135deg, var(--sc) 0%, var(--sc-deep) 100%);
}
.sc-cover.is-graphic::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("../img/bg/pattern-maze-soft.png") center / 900px auto repeat;
  opacity: 0.2;
}
.sc-cover.is-graphic::after {
  background: linear-gradient(180deg, rgba(var(--hbd-color-ink-rgb), 0.1), rgba(var(--hbd-color-ink-rgb), 0.25));
}
.sc-glyph {
  position: absolute;
  right: 22px;
  bottom: -18px;
  font-size: 104px;
  line-height: 1;
  color: rgba(var(--hbd-color-white-rgb), 0.26);
  transform: rotate(-12deg);
  transition: transform 0.9s var(--hbd-ease);
}
.show-card:hover .sc-glyph {
  transform: rotate(-4deg) scale(1.08);
}
.show-card.is-dim .sc-cover img {
  filter: grayscale(1);
}
.show-card.is-dim .sc-cover.is-graphic {
  background: linear-gradient(135deg, var(--hbd-faint) 0%, #4A4E57 100%);
}
.sc-cover.is-tall {
  height: 186px;
}
/* chips and a big line on the cover */
.sc-chips {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.show-card.has-mark .sc-chips {
  right: 12px;
  left: auto;
  justify-content: flex-end;
  max-width: calc(100% - 120px);
}
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-ink-rgb), 0.45);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sc-chip i {
  font-size: 11px;
  opacity: 0.85;
}
.sc-chip b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}
.sc-cover-title {
  position: absolute;
  left: 18px;
  bottom: 46px;
  z-index: 2;
  font-family: var(--hbd-ff-heading);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--hbd-color-white);
  text-shadow: 0 2px 18px rgba(var(--hbd-color-ink-rgb), 0.55);
}
.sc-bolts {
  display: inline-flex;
  gap: 1px;
}
.sc-bolts .is-off {
  opacity: 0.35;
}
/* editorial: the headline wraps, the photo leads */
.show-card.is-editorial .sc-title {
  font-size: 18px;
  line-height: 1.3;
  white-space: normal;
}
.show-card.is-editorial .sc-stats {
  padding-top: 14px;
}
/* identity: a thing's round mark, or a plain title under the cover */
.sc-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 4px solid var(--hbd-surface);
  border-radius: 50%;
  font-size: 26px;
  color: var(--hbd-color-white);
  background-color: var(--sc);
  box-shadow: 0 14px 30px -14px rgba(var(--hbd-color-ink-rgb), 0.7);
}
.show-card.is-amber .sc-mark,
.show-card.is-jade .sc-mark {
  color: var(--hbd-color-ink);
}
.sc-id > .sc-badge {
  flex: none;
  margin-top: 46px;
}
.sc-id.is-plain {
  margin-top: 0;
  padding-top: 18px;
}
.sc-id.is-plain .sc-name {
  padding-top: 0;
}
.sc-id.is-plain > .sc-badge {
  margin-top: 2px;
}
.sc-kind > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sc-name .sc-kind {
  display: flex;
}
.sc-note {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.sc-note s {
  margin-right: 4px;
}
.sc-stats.is-1 { grid-template-columns: minmax(0, 1fr); }
.sc-stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-extra {
  padding: 16px 18px 0;
}
.sc-extra .hbd-meter {
  margin: 0;
}
.sc-acts {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sc-acts .hbd-btn {
  border-radius: 999px;
}
.sc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hbd-heading);
}
.sc-glyphs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sc-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--hbd-muted);
}
.sc-line + .sc-line {
  margin-top: 8px;
}
.sc-line b {
  color: var(--hbd-heading);
  font-weight: 600;
}
.sc-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.sc-author b {
  display: block;
  color: var(--hbd-heading);
  font-weight: 600;
}
.sc-author span {
  font-size: 12px;
  color: var(--hbd-muted);
}
/* inside a card: a smaller card */
.show-grid.is-compact {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.card-body > .show-grid.is-compact,
.card-body.is-flush > .show-grid.is-compact {
  padding: 18px 20px 20px;
}
.show-grid.is-compact .sc-cover {
  height: 104px;
}
.show-grid.is-compact .sc-mark,
.show-grid.is-compact .show-card .sc-ring .hbd-avatar {
  width: 60px;
  height: 60px;
  font-size: 20px;
}
.show-grid.is-compact .sc-id {
  margin-top: -30px;
}
.show-grid.is-compact .sc-name {
  padding-top: 36px;
}
.show-grid.is-compact .sc-id > .sc-badge {
  margin-top: 38px;
}
.show-grid.is-compact .sc-glyph {
  font-size: 80px;
}
.show-grid.is-compact .sc-figure {
  font-size: 26px;
}

/*======================
9. Tables & Toolbars
========================*/
/*---- 9.1 Toolbar ----*/
.hbd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hbd-line);
}
.tool-search {
  position: relative;
}
.hbd-toolbar .tool-search {
  flex: 1 1 240px;
  max-width: 340px;
}
.tool-search i {
  position: absolute;
  left: 13px;
  top: 50%;
  font-size: 12.5px;
  color: var(--hbd-muted);
  transform: translateY(-50%);
}
.tool-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: var(--hbd-tonal);
  font-size: 14px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.tool-search input:hover {
  background-color: var(--hbd-tonal-2);
}
.tool-search input:focus {
  outline: 0;
  background-color: var(--hbd-input-bg);
  border-color: var(--hbd-color-coral);
}
.hbd-toolbar .tool-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* status pills with counters: the Hibo suite tabs */
.hbd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hbd-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hbd-text);
  background-color: var(--hbd-tonal);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.hbd-pill .pill-n {
  min-width: 22px;
  padding: 1px 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface);
}
.hbd-pill:hover {
  color: var(--hbd-heading);
  background-color: var(--hbd-tonal-2);
}
.hbd-pill.is-active {
  color: var(--hbd-bg);
  background-color: var(--hbd-heading);
  box-shadow: none;
}
.hbd-pill.is-active .pill-n {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
/* active filters as removable chips */
.hbd-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--hbd-line);
  font-size: 13px;
}
.hbd-filter-chips .chips-label {
  color: var(--hbd-muted);
}
.hbd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 6px 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hbd-heading);
  background-color: var(--hbd-tonal);
}
.hbd-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: var(--hbd-muted);
}
.hbd-chip button:hover {
  color: var(--hbd-coral-text);
}
.hbd-filter-chips .chips-clear {
  font-weight: 600;
  color: var(--hbd-coral-text);
}
/* the bulk bar replaces the toolbar while rows are selected */
.hbd-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background-color: var(--hbd-color-ink);
  color: rgba(var(--hbd-color-white-rgb), 0.8);
  font-size: 13.5px;
}
.hbd-bulk b {
  color: var(--hbd-color-white);
}
.hbd-bulk .bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.hbd-bulk .hbd-btn-outline {
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.25);
}
.hbd-bulk .hbd-btn-outline:hover {
  color: var(--hbd-color-ink);
}

/*---- 9.2 Table ----*/
/* a safety net: columns are designed to fit (and collapse per breakpoint); a long value never breaks the card */
.hbd-table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.hbd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.hbd-table th {
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-table td {
  padding: 13px 14px;
  vertical-align: middle;
  color: var(--hbd-text);
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-table tbody tr {
  transition: background-color 0.2s ease;
}
.hbd-table tbody tr:hover {
  background-color: var(--hbd-hover);
}
.hbd-table tbody tr.is-selected {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.07);
}
.hbd-table tbody tr:last-child td {
  border-bottom: 0;
}
.hbd-table th:first-child,
.hbd-table td:first-child {
  padding-left: 22px;
}
.hbd-table th:last-child,
.hbd-table td:last-child {
  padding-right: 22px;
}
.hbd-table.is-compact th,
.hbd-table.is-compact td {
  padding: 11px 14px;
}
.hbd-table.is-compact th:first-child,
.hbd-table.is-compact td:first-child {
  padding-left: 22px;
}
.hbd-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* a right-aligned figure keeps its distance from the column after it */
.hbd-table th.num + th,
.hbd-table td.num + td {
  padding-left: 30px;
}
/* a meter in a row: the bar on the row's centre line, its figure beside it, every bar the same length */
.hbd-table td .hbd-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}
.hbd-table td .hbd-meter .hbd-progress {
  order: 1;
  flex: 1;
  min-width: 80px;
}
.hbd-table td .hbd-meter .meter-top {
  order: 2;
  flex: none;
  justify-content: flex-end;
  min-width: 78px;
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hbd-table td .hbd-meter .meter-top span:empty,
.hbd-table td .hbd-meter .meter-top b:empty {
  display: none;
}
.hbd-table .strong {
  font-weight: 600;
  color: var(--hbd-heading);
}
.hbd-table .col-check {
  width: 44px;
}
.hbd-table .col-actions {
  width: 56px;
  text-align: right;
}
.hbd-table .nowrap {
  white-space: nowrap;
}
.hbd-table .muted {
  color: var(--hbd-muted);
  font-size: 13px;
}
/* the main cell: a thumb or avatar, a title and a sub-line */
.cell-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cell-main .cm-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.cell-main .cm-title {
  font-weight: 600;
  color: var(--hbd-heading);
  white-space: nowrap;
}
a.cell-main:hover .cm-title,
.cell-main a:hover .cm-title {
  color: var(--hbd-coral-text);
}
.cell-main .cm-sub {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
/* sortable heads */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.th-sort i {
  font-size: 9px;
  opacity: 0.5;
}
.th-sort:hover,
.th-sort.is-asc,
.th-sort.is-desc {
  color: var(--hbd-heading);
}
.th-sort.is-asc i,
.th-sort.is-desc i {
  opacity: 1;
  color: var(--hbd-coral-text);
}
.hbd-table th.num .th-sort {
  flex-direction: row-reverse;
}

/*---- 9.3 Pagination ----*/
.hbd-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 22px;
  border-top: 1px solid var(--hbd-line);
  font-size: 13px;
  color: var(--hbd-muted);
}
.hbd-pager .pager-size {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hbd-pager .pager-size .hbd-control {
  width: 82px;
}
.hbd-pager .pager-size .hbd-select-btn {
  height: 34px;
  padding: 0 30px 0 12px;
  border-color: transparent;
  background-color: var(--hbd-tonal);
  font-size: 13px;
}
.hbd-pages {
  display: flex;
  gap: 4px;
}
.hbd-pages a,
.hbd-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hbd-heading);
  background-color: var(--hbd-tonal);
}
.hbd-pages a:hover {
  background-color: var(--hbd-tonal-2);
  color: var(--hbd-heading);
}
.hbd-pages .is-current {
  color: var(--hbd-bg);
  background-color: var(--hbd-heading);
  box-shadow: none;
}
.hbd-pages .is-gap {
  background-color: transparent;
  color: var(--hbd-muted);
}
.hbd-pages .is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
/* a second line under a plain cell value (a date and its window, an expiry and the days left) */
.hbd-table td > .cm-sub {
  display: block;
  font-size: 12px;
  color: var(--hbd-muted);
}
/* the card view of a list (grid toggle) */
.hbd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 22px;
}






/*---- 9.4 Record Cards ----*/
/* a list of named things as cards: head (thumb, title, badge, menu), label/value facts, an optional foot */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.st-data > .rec-grid,
.st-data > [data-view-pane] > .rec-grid,
.card-body.is-flush > .rec-grid {
  padding: 20px 22px 22px;
}
.rec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.rec-card:hover {
  box-shadow: inset 0 0 0 1px var(--hbd-line-2), 0 16px 34px -22px rgba(var(--hbd-color-ink-rgb), 0.4);
}
.rec-card.is-selected {
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral);
}
.rec-card .rc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 14px 14px 16px;
}
.rec-card .rc-head .cell-main {
  flex: 1;
  min-width: 0;
}
.rec-card .rc-head .cm-title {
  font-size: 15px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rec-card .rc-check {
  flex: none;
  margin-top: 4px;
}
.rec-card .rc-badge {
  flex: none;
  margin-top: 2px;
}
.rec-card .rc-menu {
  flex: none;
  margin: -4px -4px 0 0;
}
.rec-card .rc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: auto;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--hbd-line);
}
.rec-card .rc-fact {
  min-width: 0;
}
.rec-card .rc-fact > span {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hbd-muted);
}
.rec-card .rc-fact > b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--hbd-heading);
  overflow-wrap: anywhere;
}
.rec-card .rc-fact > b .cm-sub,
.rec-card .rc-fact > b small {
  display: block;
  font-weight: 400;
  color: var(--hbd-muted);
}
.rec-card .rc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--hbd-line);
}


/*---- 9.5 Table Behaviour ----*/
/* the select column shows on hover, on focus, or for every row once one is picked */
.hbd-table .col-check .hbd-check {
  opacity: 0;
  transition: opacity var(--hbd-t-state) ease;
}
.hbd-table:hover thead .col-check .hbd-check,
.hbd-table tbody tr:hover .col-check .hbd-check,
.hbd-table .col-check .hbd-check:focus-within,
.hbd-table.is-selecting .col-check .hbd-check {
  opacity: 1;
}
.hbd-table tbody tr.is-link {
  cursor: pointer;
}
.hbd-table tbody tr.is-link:hover .cell-main .cm-title {
  color: var(--hbd-coral-text);
}
/* sorting: one arrow, on hover; the sorted column keeps it */
.th-sort i {
  font-size: 10px;
  opacity: 0;
  transition: opacity var(--hbd-t-state) ease;
}
.hbd-table th:hover .th-sort i {
  opacity: 0.5;
}
.th-sort.is-asc i,
.th-sort.is-desc i {
  opacity: 1;
  color: var(--hbd-coral-text);
}
/* compact density (My Profile) */
.is-dense .hbd-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.is-dense .hbd-table th {
  padding-top: 9px;
  padding-bottom: 9px;
}
/* the bulk bar floats at the foot of the screen while rows are picked */
.hbd-bulk:not([hidden]) {
  position: fixed;
  left: calc((100vw + var(--hbd-sidebar)) / 2);
  bottom: 24px;
  z-index: 1045;
  min-width: 460px;
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}
.is-sidebar-mini .hbd-bulk:not([hidden]) {
  left: calc((100vw + var(--hbd-sidebar-mini)) / 2);
}
.hbd-bulk .hbd-btn {
  border-radius: 999px;
}
/* the list's header stays in view while the page scrolls (wide screens, where list columns fit) */
@media (min-width: 1200px) {
  .st-data > .hbd-table-wrap,
  .st-data > [data-view-pane] > .hbd-table-wrap {
    overflow: visible;
  }
  .st-data .hbd-table thead th {
    position: sticky;
    top: var(--hbd-topbar);
    z-index: 3;
  }
}

/*======================
10. Forms
========================*/
/*---- 10.1 Fields ----*/
/* the Hibo field: a caps label, a square control with an FA icon at its left edge */
.hbd-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hbd-field > label,
.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hbd-heading);
}
.hbd-field .req {
  color: var(--hbd-coral-text);
}
.hbd-field .label-note {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hbd-muted);
}
.hbd-control {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.hbd-control > .ctl-ic {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 1;
  font-size: 13px;
  color: var(--hbd-coral-text);
  transform: translateY(-50%);
  pointer-events: none;
}
.hbd-control > .ctl-ic.is-top {
  top: 22px;
}
.hbd-input,
.hbd-control input,
.hbd-control select,
.hbd-control textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hbd-line-2);
  border-radius: var(--hbd-r-field);
  background-color: var(--hbd-input-bg);
  color: var(--hbd-heading);
  font-size: 14.5px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.hbd-control > .ctl-ic ~ input,
.hbd-control > .ctl-ic ~ select,
.hbd-control > .ctl-ic ~ textarea {
  padding-left: 40px;
}
.hbd-control textarea {
  height: auto;
  min-height: 118px;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.55;
  resize: vertical;
}
.hbd-control input::placeholder,
.hbd-control textarea::placeholder {
  color: var(--hbd-faint);
}
.hbd-control input:hover,
.hbd-control select:hover,
.hbd-control textarea:hover {
  border-color: var(--hbd-muted);
}
.hbd-control input:focus,
.hbd-control select:focus,
.hbd-control textarea:focus {
  outline: 0;
  border-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.16);
}
.hbd-control input[readonly],
.hbd-control input:disabled,
.hbd-control select:disabled,
.hbd-control textarea:disabled {
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
  cursor: not-allowed;
}
.hbd-control select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--hbd-muted) 50%), linear-gradient(135deg, var(--hbd-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
[data-theme="dark"] .hbd-control select option {
  background-color: var(--hbd-color-raised);
}
/* addons: a currency before, a unit after */
.hbd-control .ctl-addon {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 13px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
  border: 1px solid var(--hbd-line-2);
}
.hbd-control .ctl-addon:first-child {
  border-right: 0;
}
.hbd-control .ctl-addon:last-child {
  border-left: 0;
}
.hbd-control .ctl-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--hbd-muted);
  transform: translateY(-50%);
}
.hbd-control .ctl-btn:hover {
  color: var(--hbd-coral-text);
}
.hbd-control.has-btn input {
  padding-right: 46px;
}
.field-help {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.field-error {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hbd-coral-text);
}
.field-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--hbd-muted);
}
/* validation states */
.hbd-field.is-invalid .hbd-control input,
.hbd-field.is-invalid .hbd-control select,
.hbd-field.is-invalid .hbd-control textarea,
.hbd-field.is-invalid .hbd-select-btn {
  border-color: var(--hbd-color-coral-deep);
  box-shadow: 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.12);
}
[data-theme="dark"] .hbd-field.is-invalid .hbd-control input,
[data-theme="dark"] .hbd-field.is-invalid .hbd-control textarea {
  border-color: var(--hbd-color-coral);
}
.hbd-field.is-invalid .field-error {
  display: flex;
}
.hbd-field.is-invalid .field-help {
  display: none;
}
.hbd-field.is-valid .hbd-control input,
.hbd-field.is-valid .hbd-control textarea {
  border-color: var(--hbd-color-jade);
}
.hbd-field.is-valid .hbd-control::after {
  position: absolute;
  content: "\f00c";
  right: 14px;
  top: 50%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--hbd-jade-text);
  transform: translateY(-50%);
}
.hbd-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.hbd-form-grid.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hbd-form-grid.is-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hbd-form-grid .is-wide {
  grid-column: 1 / -1;
}
/* a form in sections: the title and help on the left, the fields on the right */
.hbd-form-section {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 20px 40px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hbd-line);
}
/* inside an 8-column card (a form beside an aside) the title sits above the fields, so values are not cut */
.span-7 .hbd-form-section,
.span-8 .hbd-form-section,
.span-9 .hbd-form-section {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.hbd-form-section:first-child {
  padding-top: 4px;
}
.hbd-form-section:last-child {
  border-bottom: 0;
}
.hbd-form-section .fs-text h4 {
  margin-bottom: 6px;
}
.hbd-form-section .fs-text p {
  font-size: 13.5px;
  color: var(--hbd-muted);
}
/* the sticky save bar */
.hbd-savebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 22px;
  background-color: var(--hbd-color-ink);
  color: rgba(var(--hbd-color-white-rgb), 0.75);
  box-shadow: 0 -20px 50px rgba(var(--hbd-color-ink-rgb), 0.12);
  font-size: 13.5px;
}
.hbd-savebar .save-state {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hbd-savebar .save-state i {
  color: var(--hbd-color-amber);
}
.hbd-savebar .hbd-btn-ghost {
  color: var(--hbd-color-white);
}

/*---- 10.2 Checks & Switches ----*/
.hbd-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--hbd-text);
  cursor: pointer;
}
.hbd-check input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
}
.hbd-check .box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--hbd-line-2);
  background-color: var(--hbd-input-bg);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hbd-check .box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--hbd-color-ink);
  border-bottom: 2px solid var(--hbd-color-ink);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.hbd-check input:checked + .box {
  border-color: var(--hbd-color-coral);
  background-color: var(--hbd-color-coral);
}
.hbd-check input:checked + .box::after {
  opacity: 1;
}
.hbd-check input:indeterminate + .box {
  border-color: var(--hbd-color-coral);
  background-color: var(--hbd-color-coral);
}
.hbd-check input:indeterminate + .box::after {
  width: 8px;
  height: 0;
  border-left: 0;
  transform: none;
  opacity: 1;
}
.hbd-check input:focus-visible + .box {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
.hbd-check.is-radio .box {
  border-radius: 50%;
}
.hbd-check.is-radio .box::after {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background-color: var(--hbd-color-ink);
  transform: none;
}
.hbd-check .check-text b {
  display: block;
  font-weight: 600;
  color: var(--hbd-heading);
}
.hbd-check .check-text span {
  font-size: 13px;
  color: var(--hbd-muted);
}
/* a square switch */
.hbd-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  cursor: pointer;
}
.hbd-switch input {
  position: absolute;
  opacity: 0;
  width: 42px;
  height: 24px;
}
.hbd-switch .track {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  background-color: var(--hbd-line-2);
  transition: background-color 0.25s ease;
}
.hbd-switch .track::after {
  position: absolute;
  content: "";
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background-color: var(--hbd-color-white);
  transition: transform 0.3s var(--hbd-ease);
}
.hbd-switch input:checked + .track {
  background-color: var(--hbd-color-jade);
}
.hbd-switch input:checked + .track::after {
  transform: translateX(18px);
}
.hbd-switch input:focus-visible + .track {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
.hbd-switch input:disabled + .track {
  opacity: 0.45;
}
/* a settings row: text on the left, a switch on the right */
.hbd-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-switch-row:last-child {
  border-bottom: 0;
}
.hbd-switch-row b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.hbd-switch-row span {
  font-size: 13px;
  color: var(--hbd-muted);
}
/* chip checkboxes: square toggle chips (filters, tags, days of the week) */
.hbd-chip-check {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.hbd-chip-check input {
  position: absolute;
  opacity: 0;
}
.hbd-chip-check span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  font-size: 13.5px;
  color: var(--hbd-heading);
  border: 1px solid transparent;
  background-color: var(--hbd-tonal);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hbd-chip-check:hover span {
  background-color: var(--hbd-tonal-2);
}
.hbd-chip-check span em {
  font-style: normal;
  font-size: 12px;
  color: var(--hbd-muted);
}
.hbd-chip-check input:checked + span {
  color: var(--hbd-bg);
  background-color: var(--hbd-heading);
  border-color: var(--hbd-heading);
}
.hbd-chip-check input:checked + span em {
  color: var(--hbd-color-coral);
}
.hbd-chip-check input:focus-visible + span {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
.hbd-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* bare field: the label stays for screen readers only (a filter in a card head or page head) */
.hbd-field.is-bare > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hbd-field.is-bare .hbd-control select {
  height: 42px;
}
/* compact drop-downs: a bare filter in a page or card head, a pick inside a table cell; tonal like the other controls */
.hbd-field.is-bare .hbd-select-btn {
  min-width: 200px;
  max-width: 300px;
  height: 42px;
  border-color: transparent;
  background-color: var(--hbd-tonal);
  font-size: 14px;
  font-weight: 500;
}
.hbd-field.is-bare .hbd-select-btn:hover,
.hbd-control.is-cell .hbd-select-btn:hover {
  border-color: transparent;
  background-color: var(--hbd-tonal-2);
}
.hbd-control.is-cell {
  width: 170px;
}
.hbd-control.is-cell .hbd-select-btn {
  height: 36px;
  padding: 0 34px 0 12px;
  border-color: transparent;
  background-color: var(--hbd-tonal);
  font-size: 13.5px;
}
.hbd-control.is-cell .hbd-select-btn::after {
  right: 13px;
}
/* radio cards: pick one of a few rich options (property role, plan, product type) */
.hbd-radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.hbd-radio-card {
  position: relative;
  display: block;
  cursor: pointer;
}
.hbd-radio-card input {
  position: absolute;
  opacity: 0;
}
.hbd-radio-card .rc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 18px;
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
  transition: box-shadow 0.25s ease;
}
.hbd-radio-card .rc-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-right: 22px;
}
.hbd-radio-card .rc-text b {
  font-family: var(--hbd-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--hbd-heading);
}
.hbd-radio-card .rc-text small {
  font-size: 13px;
  color: var(--hbd-muted);
}
/* row variant: a compact pick-list (products, units) */
.hbd-radio-cards.is-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.hbd-radio-cards.is-row .rc-body {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.hbd-radio-cards.is-row .rc-text {
  gap: 2px;
}
.hbd-radio-cards.is-row .rc-text b {
  font-size: 14.5px;
}
.hbd-radio-cards.is-row .rc-text small {
  font-size: 12px;
}
.hbd-radio-cards.is-row .rc-mark {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}
.hbd-radio-card .rc-mark {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: transparent;
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.hbd-radio-card input:checked + .rc-body {
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral);
}
.hbd-radio-card input:checked + .rc-body .rc-mark {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
  box-shadow: none;
}
.hbd-radio-card input:focus-visible + .rc-body {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
/* range */
.hbd-range {
  width: 100%;
  accent-color: var(--hbd-color-coral);
}

/*---- 10.3 Custom Select ----*/
/* the Hibo drop-down: the native <select> stays in the DOM, a button and a listbox draw it */
.hbd-control.is-select .hbd-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.hbd-select-btn {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--hbd-line-2);
  background-color: var(--hbd-input-bg);
  color: var(--hbd-heading);
  font-size: 14.5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.hbd-control > .ctl-ic ~ .hbd-select-btn {
  padding-left: 40px;
}
.hbd-select-btn::after {
  position: absolute;
  content: "";
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--hbd-coral-text);
  border-bottom: 1.5px solid var(--hbd-coral-text);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--hbd-ease);
}
.hbd-select-btn:hover {
  border-color: var(--hbd-muted);
}
.hbd-control.is-open .hbd-select-btn {
  border-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.16);
}
.hbd-control.is-open .hbd-select-btn::after {
  transform: translateY(-30%) rotate(-135deg);
}
.hbd-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1080;
  width: max-content;
  max-width: 360px;
  display: none;
  max-height: 280px;
  padding: 6px;
  margin: 0;
  overflow-y: auto;
  list-style: none;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
}
.hbd-select-list:focus {
  outline: 0;
}
.hbd-control.is-open .hbd-select-list {
  display: block;
}
.hbd-select-list li {
  padding: 9px 12px;
  font-size: 14px;
  color: rgba(var(--hbd-color-white-rgb), 0.78);
  cursor: pointer;
}
.hbd-select-list li.is-active {
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
  color: var(--hbd-color-white);
}
.hbd-select-list li[aria-selected="true"] {
  color: var(--hbd-color-coral);
  font-weight: 600;
}
.hbd-select-list li[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/*---- 10.4 File Drop ----*/
/* four states: empty, dragging over, uploading, done / error */
.hbd-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 20px;
  text-align: center;
  font-size: 13.5px;
  background-color: var(--hbd-surface-2);
  border: 1px dashed var(--hbd-line-2);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.hbd-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.hbd-drop .drop-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 17px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.hbd-drop b {
  color: var(--hbd-heading);
  font-weight: 600;
}
.hbd-drop .drop-note {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.hbd-drop.is-over {
  border-color: var(--hbd-color-coral);
  background-color: rgba(var(--hbd-color-coral-rgb), 0.06);
}
.hbd-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.hbd-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
  font-size: 13.5px;
}
.hbd-file .file-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hbd-iris-text);
  background-color: rgba(var(--hbd-color-iris-rgb), var(--hbd-tint));
}
.hbd-file .file-main {
  flex: 1;
  min-width: 0;
}
.hbd-file .file-name {
  display: block;
  font-weight: 600;
  color: var(--hbd-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbd-file .file-meta {
  font-size: 12px;
  color: var(--hbd-muted);
}
.hbd-file .hbd-progress {
  margin-top: 6px;
}
.hbd-file.is-error .file-ic {
  color: var(--hbd-coral-text);
  background-color: rgba(var(--hbd-color-coral-rgb), var(--hbd-tint));
}
.hbd-file.is-error .file-meta {
  color: var(--hbd-coral-text);
}
.hbd-file.is-done .file-ic {
  color: var(--hbd-jade-text);
  background-color: rgba(var(--hbd-color-jade-rgb), var(--hbd-tint));
}

/*---- 10.5 Special Inputs ----*/
/* one-time code boxes (two-factor) */
.hbd-otp {
  display: flex;
  gap: 10px;
}
.hbd-otp input {
  width: 52px;
  height: 58px;
  border: 1px solid var(--hbd-line-2);
  border-radius: 0;
  background-color: var(--hbd-input-bg);
  font-family: var(--hbd-ff-heading);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: var(--hbd-heading);
}
.hbd-otp input:focus {
  outline: 0;
  border-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.16);
}
/* colour swatches (brand settings) */
.hbd-swatch-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hbd-swatch-pick label {
  position: relative;
  cursor: pointer;
}
.hbd-swatch-pick input {
  position: absolute;
  opacity: 0;
}
.hbd-swatch-pick .sw {
  display: block;
  width: 38px;
  height: 38px;
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-ink-rgb), 0.12);
}
.hbd-swatch-pick input:checked + .sw {
  box-shadow: 0 0 0 2px var(--hbd-bg), 0 0 0 4px var(--hbd-heading);
}
/* password strength */
.hbd-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.hbd-strength i {
  flex: 1;
  height: 4px;
  background-color: var(--hbd-line);
}
.hbd-strength[data-score="1"] i:nth-child(-n+1) { background-color: var(--hbd-color-coral); }
.hbd-strength[data-score="2"] i:nth-child(-n+2) { background-color: var(--hbd-color-amber); }
.hbd-strength[data-score="3"] i:nth-child(-n+3) { background-color: var(--hbd-color-iris); }
.hbd-strength[data-score="4"] i { background-color: var(--hbd-color-jade); }




/*---- 10.6 Image Field ----*/
/* the image is the upload: click or drop a file on it; the X takes it off and leaves the empty drop target */
.hbd-imgup {
  position: relative;
}
.hbd-imgup .iu-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 200px;
  margin: 0;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
  cursor: pointer;
}
.hbd-imgup .iu-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hbd-imgup.is-logo .iu-frame {
  height: 130px;
  background-color: var(--hbd-color-paper);
}
.hbd-imgup.is-logo.is-dark .iu-frame {
  background-color: var(--hbd-color-ink);
}
.hbd-imgup.is-logo .iu-frame img {
  width: auto;
  max-width: 70%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}
.hbd-imgup.is-circle {
  width: 112px;
}
.hbd-imgup.is-circle .iu-frame {
  width: 112px;
  height: 112px;
  border-radius: 50%;
}
/* empty: the drop target */
.hbd-imgup .iu-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
}
.hbd-imgup.is-empty .iu-frame {
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
  background-image: repeating-linear-gradient(90deg, var(--hbd-line-2) 0 8px, transparent 8px 14px), repeating-linear-gradient(90deg, var(--hbd-line-2) 0 8px, transparent 8px 14px),
    repeating-linear-gradient(0deg, var(--hbd-line-2) 0 8px, transparent 8px 14px), repeating-linear-gradient(0deg, var(--hbd-line-2) 0 8px, transparent 8px 14px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
}
.hbd-imgup.is-circle.is-empty .iu-frame {
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.hbd-imgup.is-empty .iu-frame img,
.hbd-imgup.is-empty .iu-over,
.hbd-imgup.is-empty .iu-remove {
  display: none;
}
.hbd-imgup.is-empty .iu-empty {
  display: flex;
}
.hbd-imgup .iu-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.hbd-imgup .iu-empty b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.hbd-imgup .iu-empty small {
  font-size: 12px;
  color: var(--hbd-muted);
}
.hbd-imgup.is-circle .iu-empty small,
.hbd-imgup.is-circle .iu-empty b {
  display: none;
}
/* filled: a camera on hover says the image takes a new file */
.hbd-imgup .iu-over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-ink-rgb), 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hbd-imgup .iu-frame:hover .iu-over,
.hbd-imgup.is-over .iu-over {
  opacity: 1;
}
.hbd-imgup.is-over .iu-frame {
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral);
}
.hbd-imgup:focus-within .iu-frame {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
.hbd-imgup .iu-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-ink-rgb), 0.78);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease;
}
.hbd-imgup .iu-remove:hover {
  background-color: var(--hbd-color-coral);
}
.hbd-imgup.is-dark .iu-remove {
  background-color: rgba(var(--hbd-color-white-rgb), 0.16);
}
.hbd-imgup.is-circle .iu-remove {
  top: 4px;
  right: 4px;
}

/*---- 10.7 Theme Looks ----*/
/* the default theme is picked from a drawing of the dashboard in it */
.hbd-radio-cards.is-themes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hbd-radio-cards.is-themes .rc-body {
  gap: 12px;
  padding: 10px 10px 14px;
}
.hbd-radio-cards.is-themes .rc-text b {
  font-size: 14px;
}
.hbd-radio-cards.is-themes .rc-text small {
  font-size: 12px;
}
.hbd-radio-cards.is-themes .rc-mark {
  top: 16px;
  right: 16px;
  background-color: var(--hbd-surface);
}
.theme-look {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 11;
  background-color: var(--tl-ground);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
.theme-look.is-light,
.tl-half.is-light {
  --tl-ground: var(--hbd-color-paper);
  --tl-card: var(--hbd-color-white);
  --tl-bit: #E7E2D8;
}
.theme-look.is-dark,
.tl-half.is-dark {
  --tl-ground: var(--hbd-color-ink);
  --tl-card: var(--hbd-color-raised);
  --tl-bit: var(--hbd-color-raised-3);
}
.tl-half {
  position: absolute;
  inset: 0;
  display: flex;
  background-color: var(--tl-ground);
}
.tl-half.is-dark {
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);
}
.theme-look .tp-side {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 5px;
  width: 18%;
  padding: 16% 4% 0;
  background-color: #0B0D11;
}
.theme-look .tp-side i {
  display: block;
  height: 3px;
  background-color: rgba(var(--hbd-color-white-rgb), 0.22);
}
.theme-look .tp-side i:first-child {
  background-color: var(--hbd-color-coral);
}
.theme-look .tp-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7%;
  min-width: 0;
}
.theme-look .tp-top {
  flex: none;
  height: 11%;
  background-color: var(--hbd-color-ink);
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.06);
}
.theme-look .tp-kpis {
  display: flex;
  gap: 6%;
  height: 16%;
  padding: 0 8%;
}
.theme-look .tp-kpis i {
  flex: 1;
  background-color: var(--tl-card);
  box-shadow: inset 0 2px 0 var(--hbd-color-coral);
}
.theme-look .tp-kpis i:nth-child(2) {
  box-shadow: inset 0 2px 0 var(--hbd-color-iris);
}
.theme-look .tp-kpis i:nth-child(3) {
  box-shadow: inset 0 2px 0 var(--hbd-color-jade);
}
.theme-look .tp-panel {
  position: relative;
  flex: 1;
  margin: 0 8% 9%;
  background-color: var(--tl-card);
}
.theme-look .tp-line {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 22%;
  height: 40%;
  background: linear-gradient(160deg, transparent 48%, var(--hbd-color-coral) 48% 52%, transparent 52%);
  opacity: 0.9;
}


/*---- 10.8 Icon Picker ----*/
/* the field: the chosen icon in a coral tile, its name, a caret; the menu: search, groups, a grid of 500 */
.hbd-iconpick .ip-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--hbd-line-2);
  background-color: var(--hbd-input-bg);
  color: var(--hbd-heading);
  font-size: 14.5px;
  text-align: left;
  transition: border-color 0.25s ease;
}
.hbd-iconpick .ip-btn:hover,
.hbd-iconpick .ip-btn[aria-expanded="true"] {
  border-color: var(--hbd-color-coral);
}
.hbd-iconpick .ip-cur {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.hbd-iconpick .ip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hbd-iconpick .ip-caret {
  font-size: 11px;
  color: var(--hbd-coral-text);
  transition: transform 0.25s ease;
}
.hbd-iconpick .ip-btn[aria-expanded="true"] .ip-caret {
  transform: rotate(180deg);
}
.hbd-iconpick-menu.dropdown-menu {
  width: 392px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 0;
  border-radius: 0;
  background-color: var(--hbd-color-raised);
  color: var(--hbd-color-white);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  z-index: 1090;
}
.hbd-iconpick-menu .tool-search input {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.hbd-iconpick-menu .tool-search input:focus {
  background-color: rgba(var(--hbd-color-white-rgb), 0.12);
}
.hbd-iconpick-menu .tool-search input::placeholder,
.hbd-iconpick-menu .tool-search i {
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.hbd-iconpick-menu .ip-cats {
  display: flex;
  gap: 6px;
  margin: 10px -12px 8px;
  padding: 0 12px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hbd-iconpick-menu .ip-cat {
  flex: none;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--hbd-color-white-rgb), 0.72);
  background-color: rgba(var(--hbd-color-white-rgb), 0.07);
  white-space: nowrap;
}
.hbd-iconpick-menu .ip-cat:hover {
  color: var(--hbd-color-white);
}
.hbd-iconpick-menu .ip-cat.is-active {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.hbd-iconpick-menu .ip-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  max-height: 264px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--hbd-color-white-rgb), 0.2) transparent;
}
.hbd-iconpick-menu .ip-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 15px;
  color: rgba(var(--hbd-color-white-rgb), 0.78);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hbd-iconpick-menu .ip-cell:hover,
.hbd-iconpick-menu .ip-cell:focus-visible {
  outline: 0;
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.1);
}
.hbd-iconpick-menu .ip-cell.is-picked {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.hbd-iconpick-menu .ip-cell.is-none {
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.hbd-iconpick-menu .ip-empty {
  padding: 18px 0 8px;
  font-size: 13px;
  text-align: center;
  color: rgba(var(--hbd-color-white-rgb), 0.55);
}

/*======================
11. Badges, Avatars & Progress
========================*/
/*---- 11.1 Badges ----*/
/* square tints: jade active/paid, amber pending, coral overdue/failed, iris scheduled/info, neutral draft */
.hbd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--hbd-text);
  background-color: var(--hbd-surface-3);
}
.hbd-badge.is-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: currentColor;
}
.hbd-badge.is-jade {
  color: var(--hbd-jade-text);
  background-color: rgba(var(--hbd-color-jade-rgb), var(--hbd-tint));
}
.hbd-badge.is-amber {
  color: var(--hbd-amber-text);
  background-color: rgba(var(--hbd-color-amber-rgb), calc(var(--hbd-tint) + 0.05));
}
.hbd-badge.is-coral {
  color: var(--hbd-coral-text);
  background-color: rgba(var(--hbd-color-coral-rgb), var(--hbd-tint));
}
.hbd-badge.is-iris {
  color: var(--hbd-iris-text);
  background-color: rgba(var(--hbd-color-iris-rgb), var(--hbd-tint));
}
.hbd-badge.is-ink {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-ink);
}
[data-theme="dark"] .hbd-badge.is-ink {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-white);
}
.hbd-badge.is-solid-coral {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.hbd-badge.is-caps {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hbd-badge.is-outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
/* role badges: Owned / Franchised / Partner (the sidebar markers, as words) */
.hbd-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 2px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hbd-heading);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.hbd-role b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  color: var(--hbd-color-ink);
}
.hbd-role.is-owned b { background-color: var(--hbd-color-iris); color: var(--hbd-color-white); }
.hbd-role.is-franchised b { background-color: var(--hbd-color-amber); }
.hbd-role.is-partner b { background-color: var(--hbd-color-coral); }
.hbd-role.is-referrer b { background-color: var(--hbd-color-jade); }
.hbd-role.is-saas b { background-color: var(--hbd-color-ink); color: var(--hbd-color-white); }
[data-theme="dark"] .hbd-role.is-saas b { background-color: var(--hbd-color-white); color: var(--hbd-color-ink); }
/* the scope panel, menus, notifications and ink cards stay ink in both themes: a role tag on them reads white */
.hbd-scope .hbd-role,
.hbd-menu .hbd-role,
.hbd-notify .hbd-role,
.hbd-topbar .hbd-role,
.hbd-card.is-ink .hbd-role {
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.22);
}
.hbd-scope .hbd-role.is-saas b,
.hbd-menu .hbd-role.is-saas b,
.hbd-notify .hbd-role.is-saas b,
.hbd-card.is-ink .hbd-role.is-saas b {
  background-color: var(--hbd-color-white);
  color: var(--hbd-color-ink);
}
.hbd-media-card .mc-flags .hbd-role,
.hbd-media-card .mc-flags .hbd-badge {
  background-color: var(--hbd-color-white);
  color: var(--hbd-color-ink);
  box-shadow: none;
}
/* product marker: a small square in the product accent + its name */
.hbd-product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--hbd-text);
}
.hbd-product i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: var(--pc-accent);
  background-color: var(--pc-ground);
}
.hbd-kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--hbd-ff-mono);
  font-size: 11.5px;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 -1px 0 var(--hbd-line-2);
}
.hbd-code {
  display: inline-block;
  padding: 1px 7px;
  font-family: var(--hbd-ff-mono);
  font-size: 12.5px;
  color: var(--hbd-coral-text);
  background-color: var(--hbd-surface-2);
}
.hbd-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 12px;
}
/* the stars carry their own colour: a row's text colour never greys them */
.hbd-stars i {
  color: var(--hbd-color-amber);
}
.hbd-stars i.is-off {
  color: var(--hbd-line-2);
}

/*---- 11.2 Avatars ----*/
.hbd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
  object-fit: cover;
}
.hbd-avatar.is-sm {
  width: 32px;
  height: 32px;
  font-size: 11px;
}
.hbd-avatar.is-lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.hbd-avatar.is-xl {
  width: 88px;
  height: 88px;
  font-size: 28px;
}
.hbd-avatar.is-coral { background-color: var(--hbd-color-coral); }
.hbd-avatar.is-iris { background-color: var(--hbd-color-iris); color: var(--hbd-color-white); }
.hbd-avatar.is-jade { background-color: var(--hbd-color-jade); }
.hbd-avatar-stack {
  display: flex;
  align-items: center;
}
.hbd-avatar-stack .hbd-avatar {
  box-shadow: 0 0 0 2px var(--hbd-surface);
}
.hbd-avatar-stack .hbd-avatar + .hbd-avatar {
  margin-left: -10px;
}
.hbd-avatar-stack .stack-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 2px var(--hbd-surface);
}

/*---- 11.3 Progress ----*/
.hbd-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  background-color: var(--hbd-surface-3);
}
.hbd-progress > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--hbd-color-coral);
}
.hbd-progress.is-thin {
  height: 3px;
}
.hbd-progress.is-thick {
  height: 10px;
}
.hbd-progress.is-pillars > span {
  background-image: linear-gradient(90deg, var(--hbd-color-coral), var(--hbd-color-iris), var(--hbd-color-jade), var(--hbd-color-amber));
}
.hbd-progress.is-iris > span { background-color: var(--hbd-color-iris); }
.hbd-progress.is-jade > span { background-color: var(--hbd-color-jade); }
.hbd-progress.is-amber > span { background-color: var(--hbd-color-amber); }
/* a stacked bar: shares of a whole (revenue streams, room states) */
.hbd-stackbar {
  display: flex;
  height: 10px;
  overflow: hidden;
  background-color: var(--hbd-surface-3);
}
.hbd-stackbar span {
  display: block;
  height: 100%;
}
.hbd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.hbd-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hbd-legend i {
  width: 9px;
  height: 9px;
}
.hbd-legend b {
  color: var(--hbd-heading);
  font-weight: 600;
}
/* the four pillar fills for bars and legend dots */
.fill-coral { background-color: var(--hbd-color-coral); }
.fill-iris { background-color: var(--hbd-color-iris); }
.fill-jade { background-color: var(--hbd-color-jade); }
.fill-amber { background-color: var(--hbd-color-amber); }
.fill-ink { background-color: var(--hbd-heading); }
.fill-muted { background-color: var(--hbd-line-2); }

/*---- 11.4 Tabs ----*/
.hbd-tabs {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-tabs::-webkit-scrollbar {
  display: none;
}
.hbd-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 13px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hbd-muted);
}
.hbd-tab::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--hbd-color-coral);
  transform: scaleX(0);
  transition: transform 0.35s var(--hbd-ease);
}
.hbd-tab:hover {
  color: var(--hbd-heading);
}
.hbd-tab.is-active {
  color: var(--hbd-heading);
}
.hbd-tab.is-active::after {
  transform: scaleX(1);
}
.hbd-tab .tab-n {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-3);
}
.card-head .hbd-tabs {
  border-bottom: 0;
}
.hbd-tab-panel {
  display: none;
}
.hbd-tab-panel.is-active {
  display: block;
}
/* segmented control: a compact switch between views or ranges */
.hbd-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background-color: var(--hbd-tonal);
}
.hbd-seg button {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hbd-muted);
}
.hbd-seg button:hover {
  color: var(--hbd-heading);
}
.hbd-seg button.is-active {
  color: var(--hbd-heading);
  background-color: var(--hbd-surface);
  box-shadow: 0 1px 3px rgba(var(--hbd-color-ink-rgb), 0.12);
}
[data-theme="dark"] .hbd-seg button.is-active {
  background-color: var(--hbd-color-raised-3);
}

/*======================
12. States & Charts
========================*/
/*---- 12.1 State Switcher ----*/
/* one wrapper per list or widget; data-state picks which block shows: data, empty, noresults, loading, error.
   The back end renders the right one; the demo's state menu flips them to show every design. */
.hbd-states > .st-empty,
.hbd-states > .st-noresults,
.hbd-states > .st-loading,
.hbd-states > .st-error {
  display: none;
}
.hbd-states[data-state="empty"] > .st-data,
.hbd-states[data-state="noresults"] > .st-data,
.hbd-states[data-state="loading"] > .st-data,
.hbd-states[data-state="error"] > .st-data {
  display: none;
}
.hbd-states[data-state="empty"] > .st-empty,
.hbd-states[data-state="noresults"] > .st-noresults,
.hbd-states[data-state="loading"] > .st-loading,
.hbd-states[data-state="error"] > .st-error {
  display: block;
}

/*---- 12.2 Empty & No Results ----*/
.hbd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 52px 24px;
  text-align: center;
}
.hbd-empty .empty-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 6px;
  font-size: 26px;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
/* the four pillar corners around the art */
.hbd-empty .empty-art::before,
.hbd-empty .empty-art::after {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
}
.hbd-empty .empty-art::before {
  left: -4px;
  top: -4px;
  border-left: 3px solid var(--hbd-color-coral);
  border-top: 3px solid var(--hbd-color-coral);
}
.hbd-empty .empty-art::after {
  right: -4px;
  bottom: -4px;
  border-right: 3px solid var(--hbd-color-jade);
  border-bottom: 3px solid var(--hbd-color-jade);
}
.hbd-empty h4 {
  font-size: 18px;
}
.hbd-empty p {
  max-width: 420px;
  font-size: 14px;
  color: var(--hbd-muted);
}
.hbd-empty .hbd-btn-row {
  justify-content: center;
  margin-top: 6px;
}
.hbd-empty.is-compact {
  padding: 30px 18px;
}
.hbd-empty.is-compact .empty-art {
  width: 56px;
  height: 56px;
  font-size: 19px;
}
.hbd-empty.is-noresults .empty-art {
  color: var(--hbd-iris-text);
}
.hbd-empty.is-error .empty-art {
  color: var(--hbd-coral-text);
}
.hbd-empty .error-code {
  font-family: var(--hbd-ff-mono);
  font-size: 12px;
  color: var(--hbd-muted);
}

/*---- 12.3 Skeleton ----*/
.hbd-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}
.sk {
  display: block;
  height: 12px;
  background-color: var(--hbd-skeleton);
  background-image: linear-gradient(90deg, transparent 0%, var(--hbd-skeleton-2) 50%, transparent 100%);
  background-size: 220% 100%;
  animation: hbd-shimmer 1.4s ease infinite;
}
.sk.is-title { height: 18px; width: 38%; }
.sk.is-line { width: 100%; }
.sk.is-short { width: 55%; }
.sk.is-block { height: 120px; }
.sk.is-chart { height: 220px; }
.sk.is-sq { width: 40px; height: 40px; flex: none; }
.sk.is-figure { height: 32px; width: 46%; }
.sk-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.sk-row .sk-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}
@keyframes hbd-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk,
  .hbd-preloader .pre-ring {
    animation: none;
  }
}

/*---- 12.4 Charts ----*/
.hbd-chart {
  position: relative;
  min-height: 260px;
  margin: 0 -6px;
}
.hbd-chart.is-sm {
  min-height: 230px;
}
.hbd-chart.is-lg {
  min-height: 330px;
}
.hbd-chart.is-xl {
  min-height: 760px;
}
.hbd-chart.is-donut {
  min-height: 240px;
}
/* ApexCharts inherits the dashboard type */
.apexcharts-canvas text,
.apexcharts-legend-text {
  font-family: var(--hbd-ff-body) !important;
}
.apexcharts-tooltip.apexcharts-theme-dark {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hbd-color-raised-2) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  border-bottom: 1px solid rgba(var(--hbd-color-white-rgb), 0.08) !important;
  background: transparent !important;
  font-family: var(--hbd-ff-body) !important;
  font-weight: 600;
}
.apexcharts-xaxistooltip {
  display: none;
}
/* no data in the chosen range */
.chart-nodata {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface);
}
.chart-nodata i {
  font-size: 20px;
  color: var(--hbd-faint);
}
.chart-nodata b {
  color: var(--hbd-heading);
}
.hbd-chart.is-nodata .chart-nodata {
  display: flex;
}

/*======================
13. Calendars, Boards & Steps
========================*/
/*---- 13.1 Tape Chart ----*/
/* units down the side, nights across; bars are placed with the generated .tc-s (start) and .tc-w (span) classes */
.hbd-tape {
  overflow-x: auto;
  scrollbar-width: thin;
}
.tape-inner {
  min-width: 860px;
}
.tape-head,
.tape-row {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
}
.tape-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--hbd-surface-2);
  border-bottom: 1px solid var(--hbd-line);
}
.tape-days,
.tape-cells {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
}
.tape-days.is-7,
.tape-cells.is-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.tape-days.is-31,
.tape-cells.is-31 {
  grid-template-columns: repeat(31, minmax(0, 1fr));
}
.tape-corner {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hbd-muted);
  border-right: 1px solid var(--hbd-line);
}
.tape-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  font-size: 11px;
  color: var(--hbd-muted);
  border-left: 1px solid var(--hbd-line);
}
.tape-day b {
  font-family: var(--hbd-ff-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--hbd-heading);
}
.tape-day.is-weekend {
  background-color: var(--hbd-hover);
}
.tape-day.is-today {
  box-shadow: inset 0 -3px 0 var(--hbd-color-coral);
}
.tape-day.is-today b {
  color: var(--hbd-coral-text);
}
.tape-group {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
  border-bottom: 1px solid var(--hbd-line);
}
.tape-row {
  border-bottom: 1px solid var(--hbd-line);
}
.tape-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  min-height: 48px;
  font-size: 13.5px;
  border-right: 1px solid var(--hbd-line);
}
.tape-unit b {
  display: block;
  font-weight: 600;
  color: var(--hbd-heading);
}
.tape-unit span {
  font-size: 11.5px;
  color: var(--hbd-muted);
}
.tape-unit .hk {
  width: 8px;
  height: 8px;
  flex: none;
}
.tape-cells {
  position: relative;
  grid-template-rows: 48px;
}
.tape-cell {
  grid-row: 1;
  border-left: 1px solid var(--hbd-line);
}
.tape-cell.is-weekend {
  background-color: var(--hbd-hover);
}
.tape-cell.is-today {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.05);
}
.tape-bar {
  position: relative;
  z-index: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  height: 32px;
  margin: 0 3px;
  padding: 0 10px;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-jade);
  box-shadow: inset 3px 0 0 rgba(var(--hbd-color-ink-rgb), 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tape-bar:hover {
  color: var(--hbd-color-ink);
  transform: translateY(-1px);
  box-shadow: inset 3px 0 0 rgba(var(--hbd-color-ink-rgb), 0.25), 0 10px 24px rgba(var(--hbd-color-ink-rgb), 0.18);
}
.tape-bar.is-inhouse { background-color: var(--hbd-color-iris); color: var(--hbd-color-white); }
.tape-bar.is-hold { background-color: var(--hbd-color-amber); }
.tape-bar.is-request {
  background-color: var(--hbd-surface);
  color: var(--hbd-heading);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2), inset 3px 0 0 var(--hbd-color-amber);
}
.tape-bar.is-block {
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-3);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--hbd-color-ink-rgb), 0.06) 6px 12px);
  box-shadow: none;
}
.tape-bar.is-checkout {
  background-color: var(--hbd-color-coral);
}
.tape-bar .bar-meta {
  font-weight: 500;
  opacity: 0.75;
}

/*---- 13.2 Time Grid ----*/
/* resources across, 30-minute rows down; events use the generated .gr-s (start row) and .gr-h (rows) classes */
.hbd-timegrid {
  overflow-x: auto;
}
.tg-inner {
  display: grid;
  grid-template-columns: 64px repeat(var(--cols, 4), minmax(112px, 1fr));
}
.tg-inner.cols-3 { --cols: 3; }
.tg-inner.cols-4 { --cols: 4; }
.tg-inner.cols-5 { --cols: 5; }
.tg-inner.cols-6 { --cols: 6; }
.tg-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
  border-bottom: 1px solid var(--hbd-line);
  border-left: 1px solid var(--hbd-line);
}
.tg-head span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--hbd-muted);
}
.tg-times,
.tg-col {
  display: grid;
  grid-template-rows: repeat(24, 30px);
}
.tg-inner.rows-12 .tg-times,
.tg-inner.rows-12 .tg-col { grid-template-rows: repeat(12, 30px); }
.tg-inner.rows-16 .tg-times,
.tg-inner.rows-16 .tg-col { grid-template-rows: repeat(16, 30px); }
.tg-inner.rows-20 .tg-times,
.tg-inner.rows-20 .tg-col { grid-template-rows: repeat(20, 30px); }
.tg-time {
  padding: 0 8px;
  font-size: 11px;
  color: var(--hbd-muted);
  text-align: right;
  transform: translateY(-7px);
}
.tg-time:first-child {
  transform: translateY(3px);
}
.tg-col {
  position: relative;
  border-left: 1px solid var(--hbd-line);
  background-image: linear-gradient(var(--hbd-line) 1px, transparent 1px);
  background-size: 100% 60px;
}
.tg-ev {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 4px;
  padding: 6px 8px;
  overflow: hidden;
  font-size: 12px;
  color: var(--hbd-heading);
  background-color: rgba(var(--hbd-color-coral-rgb), 0.16);
  box-shadow: inset 3px 0 0 var(--hbd-color-coral);
}
.tg-ev b {
  font-weight: 600;
}
.tg-ev span {
  color: var(--hbd-muted);
}
.tg-ev.is-iris { background-color: rgba(var(--hbd-color-iris-rgb), 0.16); box-shadow: inset 3px 0 0 var(--hbd-color-iris); }
.tg-ev.is-jade { background-color: rgba(var(--hbd-color-jade-rgb), 0.16); box-shadow: inset 3px 0 0 var(--hbd-color-jade); }
.tg-ev.is-amber { background-color: rgba(var(--hbd-color-amber-rgb), 0.2); box-shadow: inset 3px 0 0 var(--hbd-color-amber); }
.tg-ev.is-clash {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--hbd-color-coral-rgb), 0.18) 6px 12px);
  box-shadow: inset 3px 0 0 var(--hbd-color-coral-deep), inset 0 0 0 1px var(--hbd-color-coral);
}

/*---- 13.3 Kanban ----*/
.hbd-board {
  display: grid;
  grid-auto-columns: minmax(196px, 1fr);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.board-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  box-shadow: inset 0 3px 0 var(--bc, var(--hbd-line-2));
}
.board-head b {
  font-family: var(--hbd-ff-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hbd-heading);
}
.board-head .board-n {
  min-width: 24px;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface);
}
.board-col.is-coral { --bc: var(--hbd-color-coral); }
.board-col.is-iris { --bc: var(--hbd-color-iris); }
.board-col.is-jade { --bc: var(--hbd-color-jade); }
.board-col.is-amber { --bc: var(--hbd-color-amber); }
.board-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  padding: 4px 12px 14px;
}
.board-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring), 0 1px 2px rgba(var(--hbd-color-ink-rgb), 0.05);
  cursor: grab;
}
.board-card:active {
  cursor: grabbing;
}
.board-card .bc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.board-card .bc-sub {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.board-card .bc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--hbd-muted);
}

/*---- 13.4 Timeline ----*/
.hbd-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 26px;
}
.hbd-timeline::before {
  position: absolute;
  content: "";
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background-color: var(--hbd-line-2);
}
.tl-item {
  position: relative;
  font-size: 13.5px;
}
.tl-item::before {
  position: absolute;
  content: "";
  left: -26px;
  top: 5px;
  width: 11px;
  height: 11px;
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 2px var(--tc, var(--hbd-line-2));
}
.tl-item.is-coral { --tc: var(--hbd-color-coral); }
.tl-item.is-iris { --tc: var(--hbd-color-iris); }
.tl-item.is-jade { --tc: var(--hbd-color-jade); }
.tl-item.is-amber { --tc: var(--hbd-color-amber); }
.tl-item.is-filled::before {
  background-color: var(--tc);
}
.tl-item b {
  font-weight: 600;
  color: var(--hbd-heading);
}
.tl-item .tl-time {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--hbd-muted);
}
.tl-item .tl-note {
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 13px;
  background-color: var(--hbd-surface-2);
}

/*---- 13.5 Wizard Steps ----*/
.hbd-steps {
  display: flex;
  gap: 8px;
  counter-reset: step;
}
.hbd-step {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring), inset 0 -3px 0 var(--hbd-line);
}
.hbd-step .step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  font-family: var(--hbd-ff-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--hbd-muted);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.hbd-step .step-text {
  min-width: 0;
  line-height: 1.3;
}
.hbd-step .step-text b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hbd-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbd-step .step-text span {
  font-size: 12px;
  color: var(--hbd-muted);
}
/* four steps or more: the number sits above its name so each name reads in full */
.hbd-steps.is-many .hbd-step {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hbd-steps.is-many .hbd-step .step-text b {
  white-space: normal;
}
.hbd-step.is-done {
  box-shadow: var(--hbd-card-ring), inset 0 -3px 0 var(--hbd-color-jade);
}
.hbd-step.is-done .step-n {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-jade);
  box-shadow: none;
}
.hbd-step.is-current {
  box-shadow: var(--hbd-card-ring), inset 0 -3px 0 var(--hbd-color-coral);
}
.hbd-step.is-current .step-n {
  color: var(--hbd-coral-text);
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral);
}
.hbd-step.is-error {
  box-shadow: var(--hbd-card-ring), inset 0 -3px 0 var(--hbd-color-coral-deep);
}
.hbd-step.is-error .step-n {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 4px rgba(var(--hbd-color-coral-rgb), 0.18);
}
.hbd-wizard-panel {
  display: none;
}
.hbd-wizard-panel.is-active {
  display: block;
}
.hbd-wizard-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 20px;
  margin-top: 24px;
  border-top: 1px solid var(--hbd-line);
}

/*======================
14. Auth, State Pages, Portal & Print
========================*/
/*---- 14.1 Auth ----*/
/* split: the form on the theme ground, an ink panel with the maze and the pillar light */
.hbd-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 100vh;
}
.auth-side {
  display: flex;
  flex-direction: column;
  padding: 36px clamp(24px, 5vw, 72px);
}
.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.auth-logo img {
  display: block;
  width: 190px;
  height: auto;
}
.logo-on-dark {
  display: none !important;
}
[data-theme="dark"] .logo-on-light {
  display: none !important;
}
[data-theme="dark"] .logo-on-dark {
  display: block !important;
}
.auth-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 48px 0;
}
.auth-body.is-wide {
  max-width: 720px;
}
.auth-body .hbd-eyebrow {
  margin-bottom: 14px;
}
.auth-body h1 {
  font-size: clamp(30px, 2.8vw, 40px);
}
.auth-body .hbd-lead {
  margin-top: 10px;
  margin-bottom: 28px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
.auth-row a {
  font-weight: 600;
  color: var(--hbd-coral-text);
}
.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--hbd-line);
}
.auth-social {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.auth-foot {
  margin-top: 22px;
  font-size: 14px;
  text-align: center;
  color: var(--hbd-muted);
}
.auth-foot a {
  font-weight: 600;
  color: var(--hbd-coral-text);
}
.auth-copy {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.auth-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 56px clamp(28px, 4vw, 64px);
  overflow: hidden;
  background-color: var(--hbd-color-ink);
  background-image: url("../img/bg/pattern-maze.png");
  background-size: cover;
  background-position: center;
  color: rgba(var(--hbd-color-white-rgb), 0.68);
}
.auth-art .gl-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.auth-art > * {
  position: relative;
}
.auth-art h2 {
  max-width: 14ch;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--hbd-color-white);
}
.auth-art h2 em {
  font-style: normal;
  color: var(--hbd-color-coral);
}
.auth-art .art-lead {
  max-width: 460px;
  margin-top: 18px;
  font-size: 16px;
}
.auth-art .art-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 520px;
}
.auth-art .hbd-kpi {
  background-color: var(--hbd-color-raised);
  box-shadow: inset 0 4px 0 var(--kc), inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.06);
}
.auth-art .hbd-kpi .kpi-value {
  color: var(--hbd-color-white);
}
.auth-art .hbd-kpi .kpi-label,
.auth-art .hbd-kpi .kpi-foot {
  color: rgba(var(--hbd-color-white-rgb), 0.55);
}
.auth-art .hbd-delta {
  color: var(--hbd-color-jade);
  background-color: rgba(var(--hbd-color-jade-rgb), 0.14);
}
.art-quote {
  display: flex;
  gap: 16px;
  max-width: 520px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--hbd-color-white-rgb), 0.1);
  font-size: 14.5px;
}
.art-quote img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex: none;
}
.art-quote b {
  display: block;
  margin-top: 8px;
  color: var(--hbd-color-white);
  font-weight: 600;
}
.art-acro {
  font-family: var(--hbd-ff-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.art-acro b:nth-of-type(1) { color: var(--hbd-color-coral); }
.art-acro b:nth-of-type(2) { color: var(--hbd-color-iris); }
.art-acro b:nth-of-type(3) { color: var(--hbd-color-jade); }
.art-acro b:nth-of-type(4) { color: var(--hbd-color-amber); }

/*---- 14.2 State Pages ----*/
/* ink in both themes: 403, 404, 419, 500, maintenance, not available, locked */
.hbd-state {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--hbd-color-ink);
  background-image: url("../img/bg/pattern-maze.png");
  background-size: cover;
  background-position: center;
  color: rgba(var(--hbd-color-white-rgb), 0.68);
}
.hbd-state .state-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px clamp(20px, 4vw, 56px);
}
.hbd-state .state-top img {
  width: 170px;
}
.hbd-state .state-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px 20px 80px;
  text-align: center;
}
.state-code {
  font-family: var(--hbd-ff-heading);
  font-size: clamp(110px, 16vw, 210px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  background-image: linear-gradient(100deg, var(--hbd-color-coral) 0%, var(--hbd-color-iris) 38%, var(--hbd-color-jade) 70%, var(--hbd-color-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 8px;
  font-size: 34px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}
.state-icon.is-amber {
  background-color: var(--hbd-color-amber);
}
.state-icon.is-iris {
  background-color: var(--hbd-color-iris);
  color: var(--hbd-color-white);
}
.hbd-state h1 {
  font-size: clamp(30px, 3vw, 44px);
  color: var(--hbd-color-white);
}
.hbd-state .state-text {
  max-width: 520px;
  font-size: 16px;
}
.hbd-state .hbd-btn-row {
  justify-content: center;
  margin-top: 12px;
}
.hbd-state .hbd-btn-outline {
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.3);
}
.hbd-state .hbd-btn-outline:hover {
  color: var(--hbd-color-ink);
}
.state-meta {
  font-family: var(--hbd-ff-mono);
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.4);
}
.state-countdown {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.state-countdown div {
  min-width: 82px;
  padding: 14px 10px;
  background-color: var(--hbd-color-raised);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
}
.state-countdown b {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 30px;
  font-weight: 800;
  color: var(--hbd-color-white);
}
.state-countdown span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*---- 14.3 Guest Portal ----*/
.hbd-portal-bar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(var(--hbd-color-ink-rgb), 0.95);
  background-image: url("../img/bg/pattern-maze-soft.png");
  background-size: 1440px auto;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(var(--hbd-color-white-rgb), 0.72);
}
.portal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  height: 72px;
  margin: 0 auto;
  padding: 0 var(--hbd-gutter);
}
.portal-top .portal-logo img {
  width: 116px;
}
.portal-top .tb-right .hbd-icon-btn {
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.16);
}
.portal-nav {
  display: flex;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--hbd-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.portal-nav::-webkit-scrollbar {
  display: none;
}
.portal-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 14px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(var(--hbd-color-white-rgb), 0.65);
}
.portal-nav a i {
  font-size: 12px;
}
.portal-nav a:hover {
  color: var(--hbd-color-white);
}
.portal-nav a.is-active {
  color: var(--hbd-color-white);
  box-shadow: inset 0 -3px 0 var(--hbd-color-coral);
}
.hbd-portal-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px var(--hbd-gutter) 60px;
}
.portal-foot {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px var(--hbd-gutter) 30px;
  border-top: 1px solid var(--hbd-line);
  font-size: 13px;
  color: var(--hbd-muted);
}

/*---- 14.4 Print ----*/
/* an A4 sheet on a grey desk; the toolbar never prints */
.hbd-print-body {
  background-color: #D9D5CC;
}
[data-theme="dark"] .hbd-print-body {
  background-color: #1B1F27;
}
.print-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background-color: var(--hbd-color-ink);
  color: rgba(var(--hbd-color-white-rgb), 0.72);
}
.print-toolbar .hbd-btn-outline {
  color: var(--hbd-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.25);
}
.print-toolbar .hbd-btn-outline:hover {
  color: var(--hbd-color-ink);
}
.print-sheet {
  width: 794px;
  max-width: calc(100vw - 24px);
  min-height: 1123px;
  margin: 32px auto 60px;
  padding: 56px 60px;
  background-color: #FFFFFF;
  color: #3B3F47;
  box-shadow: 0 30px 80px rgba(14, 16, 20, 0.2);
  font-size: 13px;
}
.print-sheet h1,
.print-sheet h2,
.print-sheet h3,
.print-sheet h4 {
  color: #0E1014;
}
.print-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 3px solid #0E1014;
}
.print-head img {
  width: 150px;
}
.print-head .doc-type {
  text-align: right;
}
.print-head .doc-type h1 {
  font-size: 30px;
}
.print-head .doc-type span {
  font-family: var(--hbd-ff-mono);
  font-size: 12.5px;
  color: #7C818B;
}
.print-pillars {
  display: flex;
  height: 4px;
  margin-top: 3px;
}
.print-pillars i {
  flex: 1;
}
.print-pillars i:nth-child(1) { background-color: #FF6B4A; }
.print-pillars i:nth-child(2) { background-color: #5B7CFF; }
.print-pillars i:nth-child(3) { background-color: #22B07D; }
.print-pillars i:nth-child(4) { background-color: #FFB547; }
.print-parties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0;
}
.print-parties .pp-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7C818B;
}
.print-parties b {
  color: #0E1014;
}
.print-table {
  width: 100%;
  border-collapse: collapse;
}
.print-table th {
  padding: 10px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: #7C818B;
  border-bottom: 1px solid #D3CDBF;
}
.print-table td {
  padding: 11px 8px;
  border-bottom: 1px solid #ECE8DF;
  vertical-align: top;
}
.print-table .num {
  text-align: right;
  white-space: nowrap;
}
.print-table td small {
  display: block;
  color: #7C818B;
}
.print-totals {
  width: 300px;
  margin: 18px 0 0 auto;
}
.print-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #ECE8DF;
}
.print-totals .is-total {
  padding-top: 12px;
  border-bottom: 0;
  font-family: var(--hbd-ff-heading);
  font-size: 18px;
  font-weight: 800;
  color: #0E1014;
}
.print-note {
  margin-top: 30px;
  padding: 14px 16px;
  background-color: #F4F2ED;
  font-size: 12.5px;
}
.print-foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #D3CDBF;
  font-size: 11.5px;
  color: #7C818B;
}
.print-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  font-size: 110px;
  color: #0E1014;
  box-shadow: inset 0 0 0 1px #D3CDBF;
}
@media print {
  .print-toolbar {
    display: none !important;
  }
  .hbd-print-body {
    background-color: #FFFFFF;
  }
  .print-sheet {
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}

/*======================
15. Page Specifics
========================*/
/*---- 15.1 UI Kit ----*/
.kit-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.kit-nav {
  position: sticky;
  top: calc(var(--hbd-topbar) + 24px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring);
}
.kit-nav a {
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hbd-text);
}
.kit-nav a:hover {
  color: var(--hbd-heading);
  background-color: var(--hbd-hover);
}
.kit-section {
  scroll-margin-top: calc(var(--hbd-topbar) + 20px);
}
.kit-section + .kit-section {
  margin-top: 56px;
}
.kit-head {
  margin-bottom: 18px;
}
.kit-head .hbd-eyebrow {
  margin-bottom: 8px;
}
.kit-head p {
  margin-top: 6px;
  font-size: 14px;
  color: var(--hbd-muted);
}
.kit-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.kit-swatch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  font-size: 12.5px;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring);
}
.kit-swatch b {
  padding: 10px 12px 0;
  font-size: 13.5px;
  color: var(--hbd-heading);
}
.kit-swatch code,
.kit-swatch > span {
  padding: 0 12px;
  font-size: 11.5px;
  color: var(--hbd-muted);
}
.kit-chip {
  display: block;
  height: 64px;
  box-shadow: inset 0 -1px 0 var(--hbd-line);
}
.kc-ink { background-color: var(--hbd-color-ink); }
.kc-raised { background-color: var(--hbd-color-raised); }
.kc-paper { background-color: var(--hbd-color-paper); }
.kc-white { background-color: var(--hbd-color-white); }
.kc-coral { background-color: var(--hbd-color-coral); }
.kc-iris { background-color: var(--hbd-color-iris); }
.kc-jade { background-color: var(--hbd-color-jade); }
.kc-amber { background-color: var(--hbd-color-amber); }
.kc-coral-deep { background-color: var(--hbd-color-coral-deep); }
.kc-iris-deep { background-color: var(--hbd-color-iris-deep); }
.kc-jade-deep { background-color: var(--hbd-color-jade-deep); }
.kc-amber-deep { background-color: var(--hbd-color-amber-deep); }
.kit-type {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.kit-row + .kit-row {
  margin-top: 16px;
}
.kit-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*======================
16. Bookings
========================*/
/*---- 16.1 Policy Stages ----*/
.hbd-policy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.pol-stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 3px 0 var(--hbd-line-2);
}
.pol-stage b {
  font-family: var(--hbd-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--hbd-heading);
}
.pol-stage span {
  font-size: 13px;
  color: var(--hbd-muted);
}
.pol-stage.is-current {
  box-shadow: inset 0 3px 0 var(--hbd-color-jade);
}

/*---- 16.2 Message Thread ----*/
.hbd-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hbd-thread .msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 82%;
}
.hbd-thread .msg > div {
  padding: 12px 16px;
  background-color: var(--hbd-surface-2);
}
.hbd-thread .msg b {
  display: block;
  font-size: 13.5px;
  color: var(--hbd-heading);
}
.hbd-thread .msg p {
  margin: 4px 0 6px;
  font-size: 14px;
}
.hbd-thread .msg > div > span {
  font-size: 12px;
  color: var(--hbd-muted);
}
.hbd-thread .msg.is-out {
  flex-direction: row-reverse;
  margin-left: auto;
}
.hbd-thread .msg.is-out > div {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.1);
}

/*---- 16.3 Enquiry Inbox ----*/
.hbd-inbox {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 560px;
  border-top: 1px solid var(--hbd-line);
}
.inbox-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hbd-line);
}
.inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hbd-line);
  color: var(--hbd-text);
  transition: background-color 0.2s ease;
}
.inbox-item:hover {
  background-color: var(--hbd-hover);
}
.inbox-item.is-active {
  background-color: var(--hbd-surface-2);
  box-shadow: inset 3px 0 0 var(--hbd-color-coral);
}
.ii-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ii-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.ii-top b {
  font-size: 14px;
  color: var(--hbd-heading);
}
.ii-top span {
  font-size: 12px;
  color: var(--hbd-muted);
  white-space: nowrap;
}
.ii-topic {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hbd-coral-text);
}
.ii-text {
  overflow: hidden;
  font-size: 13px;
  color: var(--hbd-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inbox-read {
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
}
.ir-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ir-head .hbd-btn-row {
  align-items: flex-end;
}
.ir-head .hbd-field {
  min-width: 190px;
}
.ir-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  margin-top: 16px;
  border-top: 1px solid var(--hbd-line);
}
.ir-body {
  flex: 1;
  max-width: 680px;
  padding-bottom: 20px;
  font-size: 15px;
  line-height: 1.7;
}
.ir-reply {
  padding-top: 18px;
  border-top: 1px solid var(--hbd-line);
}

/*---- 16.4 Trip Itinerary ----*/
.trip-day + .trip-day {
  margin-top: 22px;
}
.trip-day h5 {
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hbd-coral-text);
}
.trip-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hbd-line);
}
.tl-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.tl-main b {
  font-size: 14.5px;
  color: var(--hbd-heading);
}
.tl-main span {
  font-size: 13px;
  color: var(--hbd-muted);
}
.tl-price {
  min-width: 84px;
  font-weight: 600;
  text-align: right;
  color: var(--hbd-heading);
}

/*---- 16.5 Table Inputs ----*/
.hbd-table .qb-qty {
  width: 72px;
  height: 36px;
  padding: 0 10px;
}
.hbd-table .td-select {
  width: 128px;
  height: 36px;
  padding: 0 10px;
  font-size: 13.5px;
}

/*======================
17. Overview & Network
========================*/
/*---- 17.1 Intelligent Overview ----*/
.ai-card {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(420px 260px at 92% -10%, rgba(var(--hbd-color-iris-rgb), 0.28), transparent 70%),
    radial-gradient(360px 240px at 70% 120%, rgba(var(--hbd-color-coral-rgb), 0.22), transparent 70%),
    radial-gradient(300px 200px at 0% 110%, rgba(var(--hbd-color-jade-rgb), 0.16), transparent 70%);
}
.ai-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ai-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ai-head .hbd-caps {
  color: rgba(var(--hbd-color-white-rgb), 0.55);
}
.ai-head h3 {
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1.25;
  color: var(--hbd-color-white);
}
.ai-head h3 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--hbd-color-coral), var(--hbd-color-amber), var(--hbd-color-jade));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-lead {
  max-width: 820px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(var(--hbd-color-white-rgb), 0.72);
}
.ai-card .hbd-facts .fact b {
  color: var(--hbd-color-white);
}
.ai-card .hbd-facts .fact span {
  color: rgba(var(--hbd-color-white-rgb), 0.55);
}
.ai-prompts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ai-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  text-align: left;
  color: rgba(var(--hbd-color-white-rgb), 0.85);
  background-color: rgba(var(--hbd-color-white-rgb), 0.05);
  border: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ai-prompt i {
  font-size: 11px;
  color: var(--hbd-color-coral);
}
.ai-prompt:hover {
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.1);
}
.ai-recs {
  display: flex;
  flex-direction: column;
}
.ai-rec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 110px 190px auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hbd-line);
}
.ai-rec:last-child {
  border-bottom: 0;
}
.ai-rec .ar-main b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.ai-rec .ar-main span,
.ai-rec .ar-impact span {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.ai-rec .ar-impact {
  text-align: right;
}
.ai-rec .ar-impact b {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 17px;
  color: var(--hbd-jade-text);
}
.ai-rec .ar-conf .hbd-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-rec .ar-conf .hbd-progress {
  order: 1;
  flex: 1;
}
.ai-rec .ar-conf .meter-top {
  order: 2;
  margin: 0;
  font-size: 13px;
}
.ai-rec .ar-conf .meter-top span:empty {
  display: none;
}
.ai-heat {
  display: grid;
  grid-template-columns: 170px repeat(14, minmax(0, 1fr));
  gap: 3px;
}
.hm-corner,
.hm-day,
.hm-name {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--hbd-muted);
}
.hm-day {
  flex-direction: column;
  justify-content: center;
  padding-bottom: 4px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hm-day b {
  font-family: var(--hbd-ff-heading);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--hbd-heading);
}
.hm-day.is-weekend b {
  color: var(--hbd-coral-text);
}
.hm-name {
  padding-right: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.hm-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hbd-heading);
}
.hm-1 { background-color: rgba(var(--hbd-color-coral-rgb), 0.08); }
.hm-2 { background-color: rgba(var(--hbd-color-coral-rgb), 0.22); }
.hm-3 { background-color: rgba(var(--hbd-color-coral-rgb), 0.45); }
.hm-4,
.hm-5 {
  background-color: var(--hbd-color-coral);
  color: var(--hbd-color-ink);
}
.hm-legend {
  margin-top: 14px;
}
.hm-legend i {
  width: 12px;
  height: 12px;
}


/*---- 17.2 Setup Checklist ----*/
.hbd-hero-figure.is-sm {
  margin-top: 4px;
  font-size: 34px;
}
.setup-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 32px;
  padding-bottom: 22px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hbd-line);
}
.setup-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hbd-line);
}
.setup-step:last-child {
  border-bottom: 0;
}
.ss-n {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hbd-muted);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.ss-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 17px;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
}
.ss-main {
  flex: 1;
  min-width: 0;
}
.ss-main h5 {
  margin-bottom: 3px;
  font-size: 15.5px;
}
.ss-main p {
  margin: 0;
  font-size: 13.5px;
  color: var(--hbd-muted);
}
.ss-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}
.setup-step.is-done .ss-n {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-jade);
  box-shadow: none;
}
.setup-step.is-done .ss-ic {
  color: var(--hbd-jade-text);
}
.setup-step.is-done .ss-main h5 {
  color: var(--hbd-muted);
}
.setup-step.is-current {
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 -16px;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 3px 0 0 var(--hbd-color-coral);
}
.setup-step.is-current .ss-n {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-coral-deep);
  box-shadow: none;
}
.setup-step.is-current .ss-ic {
  color: var(--hbd-coral-text);
  background-color: var(--hbd-surface);
}

/*---- 17.3 Property Pages ----*/
.hbd-tile-ic.is-sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.hbd-media-card .mc-title h5 a {
  color: inherit;
}
/* badges laid over a photo take a solid ground */
.mc-flags .hbd-role,
.mc-flags .hbd-badge {
  background-color: var(--hbd-surface);
  box-shadow: none;
}
.prop-hero {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.prh-img {
  position: relative;
  flex: 1;
  min-height: 260px;
  overflow: hidden;
}
.prh-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prh-img .mc-flags,
.lh-img .mc-flags {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
}
.prop-hero .hbd-facts {
  padding: 18px 22px;
}
.amen-group + .amen-group {
  margin-top: 18px;
}
.amen-group h6 {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}
.amen-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px 18px;
}
.amen-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--hbd-heading);
}
.amen-item i {
  font-size: 11px;
  color: var(--hbd-jade-text);
}

/*---- 17.4 Opening Hours ----*/
.hrs-table td {
  white-space: nowrap;
}
.hrs-dash {
  margin: 0 8px;
  color: var(--hbd-muted);
}
.hrs-table .hrs-time {
  width: 106px;
  height: 36px;
  padding: 0 8px;
  font-size: 13.5px;
}
.hrs-table .hrs-time:disabled {
  opacity: 0.45;
}

/*---- 17.5 Pre-Opening ----*/
.launch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  height: 100%;
  background-color: var(--hbd-color-ink);
  color: rgba(var(--hbd-color-white-rgb), 0.72);
}
.lh-img {
  position: relative;
  min-height: 300px;
}
.lh-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lh-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 32px;
}
.lh-body h3 {
  font-size: 34px;
  color: var(--hbd-color-white);
}
.lh-body p {
  margin: 0;
}
.lh-count {
  display: flex;
  gap: 28px;
  padding: 16px 0;
  border-top: 1px solid rgba(var(--hbd-color-white-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--hbd-color-white-rgb), 0.12);
}
.lh-count b {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--hbd-color-amber);
}
.lh-count span {
  font-size: 12.5px;
}

/*---- 17.6 Regions & Rate Push ----*/
.region-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.region-top h4 {
  font-size: 17px;
}
.region-glyphs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0;
}
.push-targets {
  display: flex;
  flex-direction: column;
}
.push-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hbd-line);
}
.push-target:last-child {
  border-bottom: 0;
}

/*======================
18. Catalogue
========================*/
/*---- 18.1 Units ----*/
.unit-code {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 34px;
  font-family: var(--hbd-ff-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 -2px 0 var(--hbd-color-coral);
}

/*---- 18.2 Unit Editor ----*/
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.gal-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--hbd-surface-3);
}
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-item.is-cover {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.gal-cover {
  position: absolute;
  left: 10px;
  top: 10px;
}
.complete-ring {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.complete-ring b {
  font-family: var(--hbd-ff-heading);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--hbd-heading);
}
.complete-ring span {
  font-size: 13px;
  color: var(--hbd-muted);
}

/*---- 18.3 Allotment Grid ----*/
.hbd-allot {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}
.hbd-allot th,
.hbd-allot td {
  border-bottom: 1px solid var(--hbd-line);
}
.hbd-allot .al-type {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 176px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface);
}
.hbd-allot thead .al-type {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}
.hbd-allot .al-type span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--hbd-muted);
}
.al-day {
  padding: 10px 4px;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  color: var(--hbd-muted);
}
.al-day b {
  display: block;
  font-size: 15px;
  color: var(--hbd-heading);
}
.al-day.is-weekend,
.al-cell.is-weekend {
  background-color: var(--hbd-surface-2);
}
.al-cell {
  padding: 10px 4px;
  text-align: center;
  border-left: 1px solid var(--hbd-line);
  background-color: rgba(var(--hbd-color-jade-rgb), 0.08);
}
.al-cell b {
  display: block;
  font-size: 15px;
  color: var(--hbd-jade-text);
}
.al-cell span {
  font-size: 11px;
  color: var(--hbd-muted);
}
.al-cell i {
  font-size: 10px;
  color: var(--hbd-iris-text);
}
.al-cell.is-low {
  background-color: rgba(var(--hbd-color-amber-rgb), 0.16);
}
.al-cell.is-low b {
  color: var(--hbd-amber-text);
}
.al-cell.is-out {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.12);
}
.al-cell.is-out b {
  color: var(--hbd-coral-text);
}
.al-legend {
  padding: 14px 22px;
}
.al-key {
  background-color: rgba(var(--hbd-color-jade-rgb), 0.3);
}
.al-key.is-low {
  background-color: var(--hbd-color-amber);
}
.al-key.is-out {
  background-color: var(--hbd-color-coral);
}

/*---- 18.4 Vertical Tabs ----*/
.hbd-tabs.is-vertical {
  flex-direction: column;
  gap: 2px;
  border-bottom: 0;
}
.hbd-tabs.is-vertical .hbd-tab {
  gap: 12px;
  padding: 8px 10px;
  font-size: 14px;
}
.hbd-tabs.is-vertical .hbd-tab::after {
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 3px;
  height: auto;
  transform: scaleY(0);
}
.hbd-tabs.is-vertical .hbd-tab:hover,
.hbd-tabs.is-vertical .hbd-tab.is-active {
  background-color: var(--hbd-hover);
}
.hbd-tabs.is-vertical .hbd-tab.is-active::after {
  transform: none;
}

/*======================
19. Availability & Rates
========================*/
/*---- 19.1 Tape Legend & Days ----*/
.tape-legend {
  padding: 14px 22px;
  border-top: 1px solid var(--hbd-line);
}
.hbd-legend .lg-request {
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2), inset 3px 0 0 var(--hbd-color-amber);
}
.hbd-legend .lg-block {
  background-color: var(--hbd-surface-3);
  background-image: repeating-linear-gradient(135deg, transparent 0 2px, rgba(var(--hbd-color-ink-rgb), 0.25) 2px 4px);
}
.fill-line {
  background-color: var(--hbd-surface-3);
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(var(--hbd-color-ink-rgb), 0.07) 4px 8px);
}
.dow {
  display: inline-flex;
  gap: 3px;
}
.dow b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
}
.dow b.is-on {
  color: var(--hbd-iris-text);
  background-color: rgba(var(--hbd-color-iris-rgb), 0.16);
}

/*---- 19.2 Seasons ----*/
.season-head,
.season-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.season-row {
  padding: 12px 0;
  border-top: 1px solid var(--hbd-line);
}
.season-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}
.hbd-stackbar.is-season {
  height: 26px;
  gap: 2px;
  background-color: transparent;
}

/*---- 19.3 Rate Grid ----*/
.hbd-allot.is-rates .rc-cell {
  padding: 12px 4px;
  text-align: center;
  border-left: 1px solid var(--hbd-line);
}
.rc-cell b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.rc-cell em {
  display: block;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rc-cell.is-up {
  background-color: rgba(var(--hbd-color-amber-rgb), 0.12);
}
.rc-cell.is-cta {
  background-color: rgba(var(--hbd-color-iris-rgb), 0.1);
}
.rc-cell.is-cta em {
  color: var(--hbd-iris-text);
}
.rc-cell.is-stop {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.12);
}
.rc-cell.is-stop b {
  color: var(--hbd-muted);
  text-decoration: line-through;
}
.rc-cell.is-stop em {
  color: var(--hbd-coral-text);
}
.rc-key {
  background-color: var(--hbd-surface-3);
}
.rc-key.is-up {
  background-color: var(--hbd-color-amber);
}
.rc-key.is-cta {
  background-color: var(--hbd-color-iris);
}
.rc-key.is-stop {
  background-color: var(--hbd-color-coral);
}

/*======================
20. Policies
========================*/
/*---- 20.1 Payment Schedules ----*/
.ps-line {
  display: flex;
  position: relative;
  padding-top: 6px;
}
.ps-line::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
  background-color: var(--hbd-line-2);
}
.ps-step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
}
.ps-dot {
  width: 12px;
  height: 12px;
  margin-bottom: 10px;
  background-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 3px var(--hbd-surface);
}
.ps-step b {
  font-size: 13.5px;
  color: var(--hbd-heading);
}
.ps-step span:last-child {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.ps-step.is-end {
  flex: none;
  align-items: flex-end;
  padding-right: 0;
  text-align: right;
}
.ps-step.is-end .ps-dot {
  background-color: var(--hbd-heading);
}
.sched-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}
.sched-row .hbd-icon-btn {
  margin-bottom: 6px;
}

/*---- 20.2 Cancellation Tiers ----*/
.hbd-stackbar.is-policy {
  height: 38px;
  gap: 2px;
  background-color: transparent;
}
.hbd-stackbar.is-policy span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  overflow: hidden;
}
.hbd-stackbar.is-policy b {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hbd-color-ink);
}
.hbd-stackbar.is-policy .fill-iris b {
  color: var(--hbd-color-white);
}
.pol-scale {
  display: flex;
  gap: 2px;
  margin-top: 8px;
}
.pol-scale span {
  flex: none;
  padding-right: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--hbd-muted);
}

/*---- 20.3 Revenue Components ----*/
.comp-key {
  flex: none;
  width: 14px;
  height: 34px;
}
.comp-matrix td.num,
.comp-matrix th.num {
  text-align: center;
}

/*======================
21. Guests
========================*/
/*---- 21.1 Guest Profile ----*/
.guest-head .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.gh-main {
  display: flex;
  align-items: center;
  gap: 20px;
}
.gh-main h3 {
  font-size: 26px;
}
.gh-main p {
  margin: 4px 0 10px;
  font-size: 14px;
  color: var(--hbd-muted);
}
.gh-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.guest-head .hbd-facts {
  flex: 0 1 560px;
}

/*---- 21.2 Documents ----*/
.doc-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 4 / 3;
  font-size: 13px;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
.doc-preview i {
  font-size: 54px;
  color: var(--hbd-line-2);
}

/*======================
22. Money
========================*/
/*---- 22.1 Methods & Ledger ----*/
.pay-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pay-method i {
  font-size: 18px;
  color: var(--hbd-heading);
}
.led-acc {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
}
.led-acc::before {
  content: "Dr";
  flex: none;
  margin-top: 1px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--hbd-iris-text);
  background-color: rgba(var(--hbd-color-iris-rgb), 0.12);
}
.led-acc.is-cr::before {
  content: "Cr";
  color: var(--hbd-amber-text);
  background-color: rgba(var(--hbd-color-amber-rgb), 0.16);
}

/*---- 22.2 Invoice Document ----*/
.hbd-card.is-doc .card-body {
  padding: 40px 44px;
}
.inv-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--hbd-heading);
}
.inv-logo {
  width: 170px;
  height: auto;
  margin-bottom: 14px;
}
[data-theme="dark"] .inv-logo {
  filter: brightness(0) invert(1);
}
.inv-top p,
.inv-to p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hbd-muted);
}
.inv-meta {
  min-width: 260px;
}
.inv-meta h3 {
  margin-bottom: 8px;
  font-size: 30px;
}
.inv-to {
  padding: 24px 0;
}
.inv-to b {
  display: block;
  margin: 6px 0 2px;
  font-size: 16px;
  color: var(--hbd-heading);
}
.inv-lines {
  width: 100%;
  border-collapse: collapse;
}
.inv-lines th {
  padding: 10px 0;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  color: var(--hbd-muted);
  border-bottom: 1px solid var(--hbd-line-2);
}
.inv-lines td {
  padding: 14px 0;
  font-size: 14.5px;
  color: var(--hbd-heading);
  border-bottom: 1px solid var(--hbd-line);
}
.inv-lines .num {
  text-align: right;
}
.inv-sum {
  max-width: 340px;
  margin: 18px 0 0 auto;
}

/*======================
23. Operations
========================*/
/*---- 23.1 Live Status ----*/
.live-dot {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background-color: var(--hbd-color-jade);
}
.live-dot.is-hold {
  background-color: var(--hbd-color-amber);
}
.live-dot.is-closed {
  background-color: var(--hbd-color-coral);
}
.live-dot.is-open::after {
  position: absolute;
  content: "";
  inset: -4px;
  border: 1px solid var(--hbd-color-jade);
  opacity: 0;
  animation: hbd-ping 2.4s ease-out infinite;
}
@keyframes hbd-ping {
  0% { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.live-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.live-end small {
  font-size: 11.5px;
  color: var(--hbd-muted);
  white-space: nowrap;
}

/*---- 23.2 Rota ----*/
.hbd-allot.is-rota .al-day.is-today b {
  color: var(--hbd-coral-text);
}
.rota-cell {
  padding: 8px 4px;
  text-align: center;
  border-left: 1px solid var(--hbd-line);
}
.shift {
  display: block;
  padding: 7px 4px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.shift.is-am,
.shift-key.is-am {
  color: var(--hbd-iris-text);
  background-color: rgba(var(--hbd-color-iris-rgb), 0.14);
}
.hbd-legend .shift-key.is-am { background-color: var(--hbd-color-iris); }
.hbd-legend .shift-key.is-pm { background-color: var(--hbd-color-amber); }
.hbd-legend .shift-key.is-leave { background-color: var(--hbd-color-jade); }
.shift.is-pm,
.shift-key.is-pm {
  color: var(--hbd-amber-text);
  background-color: rgba(var(--hbd-color-amber-rgb), 0.2);
}
.shift.is-night,
.shift-key.is-night {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-ink);
}
[data-theme="dark"] .shift.is-night,
[data-theme="dark"] .shift-key.is-night {
  background-color: var(--hbd-surface-3);
}
.shift.is-off {
  color: var(--hbd-muted);
  font-weight: 500;
}
.shift.is-leave,
.shift-key.is-leave {
  color: var(--hbd-jade-text);
  background-color: rgba(var(--hbd-color-jade-rgb), 0.12);
}
.shift.is-gap,
.shift-key.is-gap {
  color: var(--hbd-coral-text);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral);
}
.rota-hrs {
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  color: var(--hbd-heading);
  border-bottom: 1px solid var(--hbd-line);
}
th.rota-hrs {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}

/*======================
24. Guest Services
========================*/
/*---- 24.1 Gate ----*/
.hbd-card.is-ink .card-title p {
  color: rgba(var(--hbd-color-white-rgb), 0.55);
}
.hbd-card.is-ink .hbd-seg {
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.12);
}
.hbd-card.is-ink .hbd-seg button {
  color: rgba(var(--hbd-color-white-rgb), 0.6);
}
.hbd-card.is-ink .hbd-seg button.is-active {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-white);
}
.gate-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 10px 0 24px;
  text-align: center;
}
.gs-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 190px;
  overflow: hidden;
  font-size: 92px;
  color: rgba(var(--hbd-color-white-rgb), 0.16);
  background:
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) left top / 28px 3px no-repeat,
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) left top / 3px 28px no-repeat,
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) right top / 28px 3px no-repeat,
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) right top / 3px 28px no-repeat,
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) left bottom / 28px 3px no-repeat,
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) left bottom / 3px 28px no-repeat,
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) right bottom / 28px 3px no-repeat,
    linear-gradient(var(--hbd-color-coral), var(--hbd-color-coral)) right bottom / 3px 28px no-repeat;
}
.gs-line {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 20%;
  height: 2px;
  background-color: var(--hbd-color-coral);
  box-shadow: 0 0 14px 2px rgba(var(--hbd-color-coral-rgb), 0.6);
  animation: hbd-scan 2.6s ease-in-out infinite alternate;
}
@keyframes hbd-scan {
  from { top: 18%; }
  to { top: 80%; }
}
.gate-scan p {
  margin: 0;
  font-size: 14px;
}
.gs-input {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.gs-input .hbd-input {
  flex: 1;
  color: var(--hbd-color-white);
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
  border-color: rgba(var(--hbd-color-white-rgb), 0.16);
}
.gate-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background-color: rgba(var(--hbd-color-jade-rgb), 0.14);
  box-shadow: inset 3px 0 0 var(--hbd-color-jade);
}
.gate-result h4 {
  font-size: 17px;
}
.gate-result p {
  margin: 2px 0 0;
  font-size: 13px;
}
.gr-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  font-size: 18px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-jade);
}

/*---- 24.2 Menus ----*/
.menu-sec + .menu-sec {
  margin-top: 26px;
}
.ms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ms-head h5 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hbd-coral-text);
}

/*---- 24.3 Floor Plan ----*/
.floor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.fl-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 76px;
  font-size: 11px;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}
.fl-table b {
  font-size: 13px;
  color: var(--hbd-heading);
}
.fl-table.is-wide {
  grid-column: span 2;
}
.fl-table.is-booked,
.fl-key.is-booked {
  background-color: rgba(var(--hbd-color-amber-rgb), 0.2);
  box-shadow: inset 0 0 0 1px var(--hbd-color-amber);
}
.fl-table.is-seated,
.fl-key.is-seated {
  background-color: rgba(var(--hbd-color-iris-rgb), 0.16);
  box-shadow: inset 0 0 0 1px var(--hbd-color-iris);
}
.fl-key.is-free {
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2);
}

/*======================
25. Retail
========================*/
/*---- 25.1 Product Images ----*/
.hbd-thumb.is-tall {
  width: 40px;
  height: 50px;
}
.hbd-media-card.is-tall .mc-img {
  aspect-ratio: 4 / 5;
}
.gal-grid.is-tall .gal-item {
  aspect-ratio: 4 / 5;
}
.gal-grid.is-tall .gal-item.is-cover {
  aspect-ratio: auto;
}

/*---- 25.2 Fulfilment & Transfers ----*/
.shelf-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  font-family: var(--hbd-ff-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}
.tr-route {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.tr-route i {
  color: var(--hbd-coral-text);
}

/*======================
26. Promotions & Places
========================*/
/*---- 26.1 Offer Preview ----*/
.offer-prev .op-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.offer-prev .op-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.op-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  font-family: var(--hbd-ff-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}
.op-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 22px 22px;
}
.op-body h4 {
  font-size: 20px;
}
.op-body p {
  margin: 0 0 6px;
  font-size: 14px;
}

/*---- 26.2 Tier Table ----*/
/* package lines: the service, how many, remove */
.pk-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 110px auto;
  align-items: center;
  gap: 10px;
}
/* the offer preview's button shows what guests see; it does nothing here */
.hbd-btn.is-preview {
  pointer-events: none;
}
.tier-table.is-edit td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.tier-table.is-edit .hbd-input {
  width: 100%;
  min-width: 120px;
}
.tier-table th.num,
.tier-table td.num {
  text-align: center;
}
.tier-table th small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hbd-muted);
}
.tier-head {
  display: inline-block;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-3);
}
.tier-head.is-amber {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-amber);
}
.tier-head.is-iris {
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-ink);
  box-shadow: inset 0 -3px 0 var(--hbd-color-iris);
}
[data-theme="dark"] .tier-head.is-iris {
  background-color: var(--hbd-surface-3);
}

/*---- 26.3 Destinations ----*/
.sea-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--hbd-line);
}
.sea-row.is-head {
  padding-top: 0;
  border-top: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hbd-muted);
}
.sea-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
}
.sea-row.is-head .sea-grid span {
  text-align: center;
}
.sea-grid i,
.hbd-legend i.sea-0,
.hbd-legend i.sea-1,
.hbd-legend i.sea-2,
.hbd-legend i.sea-3 {
  display: block;
  height: 26px;
}
.hbd-legend i.sea-0,
.hbd-legend i.sea-1,
.hbd-legend i.sea-2,
.hbd-legend i.sea-3 {
  height: 9px;
}
.sea-0 {
  background-color: var(--hbd-surface-3);
}
.sea-1 {
  background-color: rgba(var(--hbd-color-jade-rgb), 0.22);
}
.sea-2 {
  background-color: rgba(var(--hbd-color-jade-rgb), 0.55);
}
.sea-3 {
  background-color: var(--hbd-color-jade);
}
.sea-end {
  text-align: right;
}

/*======================
27. Product Modules
========================*/
/*---- 27.1 Ski ----*/
.mod-photo {
  margin: -4px 0 16px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.mod-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mod-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  overflow: hidden;
  background-color: var(--hbd-color-ink);
}
.mod-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.mod-banner > div {
  position: relative;
  padding: 28px 32px;
  color: rgba(var(--hbd-color-white-rgb), 0.82);
  background-image: linear-gradient(90deg, rgba(var(--hbd-color-ink-rgb), 0.85), rgba(var(--hbd-color-ink-rgb), 0));
}
.mod-banner .hbd-caps {
  color: var(--hbd-color-amber);
}
.mod-banner h3 {
  margin: 6px 0 4px;
  font-size: 30px;
  color: var(--hbd-color-white);
}
.mod-banner p {
  margin: 0;
}
.run-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: 0;
}
.run-dot.is-green { background-color: var(--hbd-color-jade); }
.run-dot.is-blue { background-color: var(--hbd-color-iris); }
.run-dot.is-red { background-color: var(--hbd-color-coral); }
.run-dot.is-black { background-color: var(--hbd-heading); }
.wx-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.wx-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  font-size: 12px;
  text-align: center;
  background-color: var(--hbd-surface-2);
}
.wx-day i {
  font-size: 20px;
  color: var(--hbd-iris-text);
}
.wx-day b {
  font-size: 15px;
  color: var(--hbd-heading);
}
.wx-day small {
  font-size: 11px;
  color: var(--hbd-muted);
}

/*---- 27.2 Water Park ----*/
.thrill {
  display: inline-flex;
  gap: 3px;
}
.thrill i {
  width: 14px;
  height: 6px;
  background-color: var(--hbd-surface-3);
}
.thrill i.is-on {
  background-color: var(--hbd-color-coral);
}

/*---- 27.3 Kids Club ----*/
.room-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.room-grid > div > .hbd-media-card {
  height: 100%;
}
.km-grid {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.km-grid th {
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--hbd-muted);
  border-bottom: 1px solid var(--hbd-line-2);
}
.km-grid .km-meal {
  padding-left: 22px;
  color: var(--hbd-coral-text);
  border-bottom: 1px solid var(--hbd-line);
}
.km-grid td {
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--hbd-line);
  border-left: 1px solid var(--hbd-line);
}
.km-grid td b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.km-grid td small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--hbd-coral-text);
}

/*---- 27.4 Jet Charter ----*/
.was {
  font-size: 12.5px;
  color: var(--hbd-muted);
  text-decoration: line-through;
}
.jc-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hbd-line);
}
.jc-price b {
  font-family: var(--hbd-ff-heading);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--hbd-heading);
}
.jc-price small {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.ops-card .hbd-table th {
  color: rgba(var(--hbd-color-white-rgb), 0.45);
  background-color: rgba(var(--hbd-color-white-rgb), 0.03);
  border-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.ops-card .hbd-table td {
  color: rgba(var(--hbd-color-white-rgb), 0.75);
  border-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.ops-card .cell-main .cm-title {
  color: var(--hbd-color-white);
}
.ops-card .cell-main .cm-sub {
  color: rgba(var(--hbd-color-white-rgb), 0.5);
}
.ops-route {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hbd-ff-mono);
  font-size: 15px;
  color: var(--hbd-color-white);
}
.ops-route i {
  font-size: 12px;
  color: var(--hbd-color-amber);
}
.ops-time {
  font-family: var(--hbd-ff-mono);
  font-size: 15px;
  color: var(--hbd-color-amber);
}
.ops-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--hbd-ff-mono);
  font-size: 18px;
  color: var(--hbd-color-amber);
  background-color: rgba(var(--hbd-color-white-rgb), 0.06);
}
.stand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  font-family: var(--hbd-ff-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--hbd-color-white);
  background-color: var(--hbd-color-ink);
}
[data-theme="dark"] .stand {
  background-color: var(--hbd-surface-3);
}

/*======================
28. Partners & SaaS
========================*/
/*---- 28.1 Territories & Links ----*/
.terr-map {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
  background-image: url("../img/bg/pattern-maze-soft.png");
  background-size: 700px auto;
}
.terr-map i {
  font-size: 26px;
  color: var(--hbd-iris-text);
}
.link-out {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hbd-line);
}
.lo-row {
  display: flex;
  gap: 10px;
}
.lo-row .hbd-input {
  flex: 1;
  font-family: var(--hbd-ff-mono);
  font-size: 13.5px;
}
.link-qr {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
}
.link-qr > i {
  font-size: 84px;
  color: var(--hbd-heading);
}
.link-qr b {
  display: block;
  color: var(--hbd-heading);
}
.link-qr span {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--hbd-muted);
}

/*---- 28.2 Plans & Billing ----*/
.plan-card.is-featured {
  box-shadow: var(--hbd-card-ring), inset 0 3px 0 var(--hbd-color-coral);
}
.plan-price b {
  font-family: var(--hbd-ff-heading);
  font-size: 34px;
  font-weight: 800;
  color: var(--hbd-heading);
}
.plan-price small {
  margin-left: 4px;
  font-size: 13px;
  color: var(--hbd-muted);
}
.plan-lim {
  margin: 4px 0 12px;
  font-size: 13.5px;
  color: var(--hbd-muted);
}
.plan-card .hbd-btn-row {
  align-items: center;
  justify-content: space-between;
}
.bill-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.bill-plan h3 {
  margin: 4px 0;
  font-size: 30px;
}
.bill-plan p {
  margin: 0;
  color: var(--hbd-muted);
}

/*======================
29. Insight
========================*/
/*---- 29.1 Reports ----*/
.rep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hbd-line);
}
.rep-row:first-child {
  padding-top: 0;
}
.rep-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.rep-row b {
  display: block;
  font-size: 14.5px;
  color: var(--hbd-heading);
}
.rep-row span {
  font-size: 13px;
  color: var(--hbd-muted);
}
.rep-acts {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

/*---- 29.2 Profit & Loss ----*/
.pnl-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.pnl-table th,
.pnl-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hbd-line);
}
.pnl-table thead th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
}
.pnl-table .num {
  text-align: right;
  white-space: nowrap;
}
.pnl-table tbody th {
  font-weight: 500;
  text-align: left;
  color: var(--hbd-text);
}
.pnl-table .pnl-sec th {
  padding-top: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hbd-coral-text);
}
.pnl-table .is-sub th,
.pnl-table .is-sub td {
  font-weight: 600;
  color: var(--hbd-heading);
}
.pnl-table .is-total th,
.pnl-table .is-total td {
  font-family: var(--hbd-ff-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--hbd-heading);
  background-color: rgba(var(--hbd-color-jade-rgb), 0.1);
}
.pnl-table .pnl-margin th,
.pnl-table .pnl-margin td {
  color: var(--hbd-jade-text);
  border-bottom: 0;
}

/*---- 29.3 Reviews ----*/
.review-list {
  display: flex;
  flex-direction: column;
}
.review-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-top: 1px solid var(--hbd-line);
}
.ri-main {
  flex: 1;
  min-width: 0;
}
.ri-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.ri-top b {
  color: var(--hbd-heading);
}
.ri-top span {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.ri-main p {
  margin: 8px 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
}
.ri-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-quote {
  margin: 0 0 18px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-style: italic;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 3px 0 0 var(--hbd-color-amber);
}
.src-rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.src-rate b {
  color: var(--hbd-heading);
}

/*---- 29.4 Search ----*/
.search-page-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring);
}
.search-page-bar i {
  color: var(--hbd-coral-text);
}
.search-page-bar input {
  flex: 1;
  min-width: 0;
  height: 44px;
  font-size: 17px;
  color: var(--hbd-heading);
  background: transparent;
  border: 0;
  outline: 0;
}
mark {
  padding: 0 2px;
  color: inherit;
  background-color: rgba(var(--hbd-color-amber-rgb), 0.35);
}

/*======================
30. Website & Marketing
========================*/
/*---- 30.1 Home Sections ----*/
.sec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sec-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
.sec-item.is-off {
  opacity: 0.55;
}
.sec-drag {
  color: var(--hbd-faint);
  cursor: grab;
}
.sec-n {
  font-family: var(--hbd-ff-mono);
  font-size: 12px;
  color: var(--hbd-coral-text);
}
.sec-main {
  flex: 1;
  min-width: 0;
}
.sec-main b {
  display: block;
  font-size: 14.5px;
  color: var(--hbd-heading);
}
.sec-main span {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.slide-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hbd-line);
}
.slide-item:last-child {
  border-bottom: 0;
}
.slide-item img {
  flex: none;
  width: 96px;
  height: 60px;
  object-fit: cover;
}
.slide-item b {
  display: block;
  font-size: 14px;
  color: var(--hbd-heading);
}
.slide-item span {
  font-size: 12.5px;
  color: var(--hbd-muted);
}

/*---- 30.2 Post Editor ----*/
.ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--hbd-line-2);
  border-bottom: 0;
  background-color: var(--hbd-surface-2);
}
.ed-toolbar .ql-active {
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-coral);
}

/*---- 30.3 Gallery ----*/
.gal-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.gal-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--hbd-surface-3);
}
.gal-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--hbd-ease);
}
.gal-tile:hover img {
  transform: scale(1.05);
}
.gal-tile figcaption {
  padding: 10px 12px;
  background-color: var(--hbd-surface);
}
.gal-tile figcaption b {
  display: block;
  font-size: 13px;
  color: var(--hbd-heading);
}
.gal-tile figcaption span {
  font-size: 12px;
  color: var(--hbd-muted);
}
.gal-sel {
  position: absolute;
  right: 10px;
  top: 10px;
}

/*---- 30.4 FAQs ----*/
.faq-item {
  position: relative;
  padding-left: 26px;
  border-bottom: 1px solid var(--hbd-line);
}
.faq-item > .drag-handle {
  position: absolute;
  left: 0;
  top: 13px;
}
.faq-item:last-child {
  border-bottom: 0;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--hbd-heading);
  background: transparent;
  border: 0;
}
.faq-q i {
  flex: none;
  font-size: 12px;
  color: var(--hbd-coral-text);
  transform: rotate(45deg);
  transition: transform 0.3s var(--hbd-ease);
}
.faq-q.collapsed i {
  transform: none;
}
.faq-a {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
}

/*======================
31. Team & Settings
========================*/
/*---- 31.1 Settings Hub ----*/
.set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.set-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  color: var(--hbd-text);
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.set-tile:hover {
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2), 0 10px 26px rgba(var(--hbd-color-ink-rgb), 0.08);
}
.st-main {
  flex: 1;
  min-width: 0;
}
.st-main b {
  display: block;
  font-size: 14.5px;
  color: var(--hbd-heading);
}
.st-main span {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.st-go {
  font-size: 12px;
  color: var(--hbd-faint);
  transition: transform 0.25s ease, color 0.25s ease;
}
.set-tile:hover .st-go {
  color: var(--hbd-coral-text);
  transform: translateX(3px);
}

/*---- 31.2 Business Model & Permissions ----*/
.bm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bm-text {
  margin: 14px 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.perm-table th,
.perm-table td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--hbd-line);
}
.perm-table thead th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--hbd-muted);
  background-color: var(--hbd-surface-2);
}
.perm-table tbody th {
  font-weight: 500;
  text-align: left;
  color: var(--hbd-heading);
}
.perm-table .num {
  text-align: center;
}
.perm-table .num .hbd-check {
  justify-content: center;
}
.perm-table .perm-sec th {
  padding-top: 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hbd-coral-text);
}

/*---- 31.3 Brand ----*/
.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  margin-bottom: 12px;
  background-color: var(--hbd-color-paper);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
.logo-box.is-dark {
  background-color: var(--hbd-color-ink);
}
.logo-box img {
  max-width: 70%;
  max-height: 64px;
}
.swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}
.sw-coral { background-color: var(--hbd-color-coral); }
.sw-iris { background-color: var(--hbd-color-iris); }
.sw-jade { background-color: var(--hbd-color-jade); }
.sw-amber { background-color: var(--hbd-color-amber); }
.sw-ink { background-color: var(--hbd-color-ink); }
.sw-paper { background-color: var(--hbd-color-paper); box-shadow: inset 0 0 0 1px var(--hbd-line-2); }
.type-prev {
  margin-top: 18px;
  padding: 20px;
  background-color: var(--hbd-surface-2);
}
.type-prev b {
  display: block;
  font-family: var(--hbd-ff-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hbd-heading);
}
.type-prev p {
  margin: 6px 0 0;
}

/*---- 31.4 Notifications & Templates ----*/
.note-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 22px;
  color: var(--hbd-text);
  border-bottom: 1px solid var(--hbd-line);
}
.note-row:hover {
  background-color: var(--hbd-hover);
}
.note-row.is-unread {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.05);
}
.nr-main {
  flex: 1;
  font-size: 14px;
}
.nr-main b {
  color: var(--hbd-heading);
}
.nr-main small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--hbd-muted);
}
.nr-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background-color: var(--hbd-color-coral);
}
.tpl-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/*---- 31.5 Form Builder & Profile ----*/
.fb-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fb-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hbd-heading);
  background-color: var(--hbd-surface-2);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--hbd-line);
  transition: box-shadow 0.25s ease;
}
.fb-tool i {
  font-size: 18px;
  color: var(--hbd-coral-text);
}
.fb-tool:hover {
  box-shadow: inset 0 0 0 1px var(--hbd-color-coral);
}
.sec-item.is-active {
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral);
}
.prof-photo {
  display: flex;
  align-items: center;
  gap: 20px;
}
.prof-photo img {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.prof-photo .hbd-drop {
  flex: 1;
}
.hbd-thread .msg.is-note > div {
  background-color: rgba(var(--hbd-color-amber-rgb), 0.16);
  box-shadow: inset 3px 0 0 var(--hbd-color-amber);
}



/*---- 31.6 Permission Cards ----*/
/* a card per module: what this role (or property role) can do there, one switch each */
.perm-group + .perm-group {
  margin-top: 26px;
}
.perm-group h6 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hbd-coral-text);
}
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.perm-card {
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
.perm-card .pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hbd-line);
}
.perm-card .pc-head b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.perm-card .pc-count {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hbd-heading);
  background-color: var(--hbd-tonal);
}
.perm-card .pc-acts {
  padding: 6px 16px 8px;
}
.perm-card .pc-act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  font-size: 13.5px;
  color: var(--hbd-text);
}
.perm-card .pc-act + .pc-act {
  border-top: 1px dashed var(--hbd-line);
}
.perm-card .pc-act > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.perm-card .pc-act > span > i {
  width: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--hbd-muted);
}

/*======================
32. Auth Extras
========================*/
/*---- 32.1 Sign-In Flows ----*/
.auth-otp {
  display: flex;
  justify-content: center;
}
.auth-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.auth-note p {
  margin: 0;
  font-size: 15px;
}
.lock-user,
.invite-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 22px;
  background-color: var(--hbd-surface-2);
  box-shadow: inset 0 0 0 1px var(--hbd-line);
}
.lock-user img,
.invite-card img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
}
.lock-user b {
  display: block;
  font-size: 16px;
  color: var(--hbd-heading);
}
.lock-user span {
  font-size: 13px;
  color: var(--hbd-muted);
}
.invite-card {
  font-size: 14.5px;
  line-height: 1.6;
}
.invite-card b {
  color: var(--hbd-heading);
}
.sched-row.is-2 {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

/*======================
33. Portal & Print Extras
========================*/
/*---- 33.1 Consent And Signature ----*/
.consent-text {
  max-height: 180px;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 13.5px;
  background-color: var(--hbd-surface-2);
}
.consent-text p:last-child {
  margin-bottom: 0;
}
.sp-box {
  display: flex;
  align-items: flex-end;
  height: 110px;
  padding: 0 18px 14px;
  background-color: var(--hbd-input-bg);
  box-shadow: inset 0 0 0 1px var(--hbd-line-2), inset 0 -34px 0 -33px var(--hbd-line-2);
}
.sp-box span {
  font-family: "Brush Script MT", cursive;
  font-size: 30px;
  line-height: 1;
  color: var(--hbd-heading);
}
/* recovery codes */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.rc-grid .hbd-code {
  justify-content: center;
  padding: 8px 6px;
  font-size: 13px;
  text-align: center;
}

/*---- 33.2 Guest Portal ----*/
.trip-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--hbd-surface);
  box-shadow: var(--hbd-card-ring);
}
.trip-card .hbd-media-card {
  flex: 1;
  box-shadow: none;
}
.trip-card .tc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--hbd-line);
}
.acc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 250px;
  overflow: hidden;
  background-color: var(--hbd-color-ink);
}
.acc-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.acc-hero > div {
  position: relative;
  width: 100%;
  padding: 26px 28px;
  color: rgba(var(--hbd-color-white-rgb), 0.8);
  background-image: linear-gradient(0deg, rgba(var(--hbd-color-ink-rgb), 0.85), rgba(var(--hbd-color-ink-rgb), 0));
}
.acc-hero .hbd-caps {
  color: var(--hbd-color-amber);
}
.acc-hero h3 {
  margin: 4px 0;
  font-size: 30px;
  color: var(--hbd-color-white);
}
.acc-hero p {
  margin: 0;
}
.acc-hero + .hbd-facts {
  padding: 18px 22px;
}
.pass-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px;
  color: rgba(var(--hbd-color-white-rgb), 0.75);
  background-color: var(--hbd-color-ink);
  background-image: url("../img/bg/pattern-maze.png");
  background-size: 900px auto;
  box-shadow: inset 0 4px 0 var(--hbd-color-coral);
}
.pass-card.is-iris { box-shadow: inset 0 4px 0 var(--hbd-color-iris); }
.pass-card.is-jade { box-shadow: inset 0 4px 0 var(--hbd-color-jade); }
.pass-card .pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.pass-card .pc-top i {
  font-size: 22px;
  color: var(--hbd-color-amber);
}
.pass-card h4 {
  margin-top: 8px;
  font-size: 20px;
  color: var(--hbd-color-white);
}
.pass-card p {
  margin: 0;
  font-size: 13.5px;
}
.pc-code {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin: 10px 0 8px;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-white);
}
.pc-code > i {
  font-size: 64px;
}
.pc-code b {
  display: block;
  font-family: var(--hbd-ff-mono);
  font-size: 15px;
}
.pc-code span {
  font-size: 12px;
  color: #7C818B;
}
.member-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  aspect-ratio: 8 / 5;
  padding: 26px;
  color: rgba(var(--hbd-color-white-rgb), 0.7);
  background-color: var(--hbd-color-ink);
  background-image: linear-gradient(135deg, rgba(var(--hbd-color-amber-rgb), 0.35), rgba(var(--hbd-color-coral-rgb), 0.1) 55%, rgba(var(--hbd-color-ink-rgb), 0)), url("../img/bg/pattern-maze.png");
  background-size: auto, 900px auto;
  box-shadow: 0 24px 50px rgba(var(--hbd-color-ink-rgb), 0.25);
}
.member-card .mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}
.member-card img {
  width: 120px;
}
.member-card .mc-row span:last-child {
  font-family: var(--hbd-ff-mono);
}
.member-card .mc-row:first-child span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hbd-color-amber);
}
.member-card b {
  font-family: var(--hbd-ff-heading);
  font-size: 24px;
  color: var(--hbd-color-white);
}

/*---- 33.3 Print Extras ----*/
.print-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 26px;
}
.print-hero img {
  flex: none;
  width: 190px;
  height: 120px;
  object-fit: cover;
}
.print-hero h2 {
  margin: 2px 0 6px;
  font-size: 26px;
}
.print-hero p {
  margin: 0;
}
.print-hero .pp-label,
.print-pass .pp-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7C818B;
}
.print-pass {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 28px 0;
}
.print-pass h2 {
  margin: 4px 0 8px;
  font-size: 28px;
}
.print-pass p {
  margin: 0 0 6px;
}
.print-bar {
  display: inline-block;
  width: 90px;
  height: 6px;
  margin-right: 10px;
  vertical-align: 1px;
  background-color: #ECE8DF;
}
.print-bar i {
  display: block;
  height: 100%;
  background-color: #5B7CFF;
}

/*======================
34. Vendor Themes
========================*/
/*---- 34.1 Shared ----*/
/* every plugin is dressed in the house look: square corners, caps labels, Onest, coral focus, ink popovers */

/*---- 34.2 Date Picker ----*/
/* flatpickr as an ink popover, like every menu */
.flatpickr-calendar {
  border-radius: 0;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
  font-family: var(--hbd-ff-body);
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none;
}
.flatpickr-months {
  padding: 6px 4px 2px;
}
.flatpickr-months .flatpickr-month {
  height: 40px;
  color: var(--hbd-color-white);
  fill: var(--hbd-color-white);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.55);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--hbd-color-coral);
}
.flatpickr-current-month {
  padding-top: 9px;
  font-family: var(--hbd-ff-heading);
  font-size: 15px;
}
.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
  font-weight: 700;
  color: var(--hbd-color-white);
}
.flatpickr-current-month span.cur-month:hover,
.flatpickr-current-month .numInputWrapper:hover {
  background-color: transparent;
}
.numInputWrapper span.arrowUp::after {
  border-bottom-color: rgba(var(--hbd-color-white-rgb), 0.6);
}
.numInputWrapper span.arrowDown::after {
  border-top-color: rgba(var(--hbd-color-white-rgb), 0.6);
}
.flatpickr-weekdays {
  height: 30px;
}
span.flatpickr-weekday {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--hbd-color-white-rgb), 0.42);
}
.flatpickr-day {
  border-radius: 50%;
  font-size: 13.5px;
  color: rgba(var(--hbd-color-white-rgb), 0.82);
}
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  border-color: transparent;
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
  color: var(--hbd-color-white);
}
.flatpickr-day.today {
  border-color: rgba(var(--hbd-color-coral-rgb), 0.75);
}
.flatpickr-day.today:hover {
  border-color: var(--hbd-color-coral);
  background-color: rgba(var(--hbd-color-coral-rgb), 0.16);
  color: var(--hbd-color-white);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(var(--hbd-color-white-rgb), 0.24);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(var(--hbd-color-white-rgb), 0.16);
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
  border-color: transparent;
  border-radius: 0;
  background-color: rgba(var(--hbd-color-coral-rgb), 0.16);
  box-shadow: none;
  color: var(--hbd-color-white);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus {
  border-color: var(--hbd-color-coral);
  border-radius: 50%;
  background-color: var(--hbd-color-coral);
  box-shadow: none;
  color: var(--hbd-color-ink);
  font-weight: 600;
}
.flatpickr-time {
  border-top: 1px solid rgba(var(--hbd-color-white-rgb), 0.08);
}
.flatpickr-calendar.noCalendar .flatpickr-time {
  border-top: 0;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  font-family: var(--hbd-ff-heading);
  font-size: 16px;
  color: var(--hbd-color-white);
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .numInputWrapper:hover {
  background-color: rgba(var(--hbd-color-white-rgb), 0.07);
}
/* the visible field reads like any other; only real read-only fields grey out */
.hbd-control input.flatpickr-alt[readonly],
.hbd-control input.flatpickr-input[readonly] {
  color: var(--hbd-heading);
  background-color: var(--hbd-input-bg);
  cursor: pointer;
}
.hbd-control input.flatpickr-alt.active,
.hbd-control input.flatpickr-input.active {
  border-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.16);
}

/*---- 34.3 Searchable Selects ----*/
.hbd-control.is-choices {
  display: block;
}
.hbd-control.is-choices > .ctl-ic {
  top: 23px;
}
.choices {
  margin-bottom: 0;
  font-size: 14.5px;
}
.choices__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 46px;
  padding: 6px 12px 2px;
  border: 1px solid var(--hbd-line-2);
  border-radius: 0;
  background-color: var(--hbd-input-bg);
  font-size: 14.5px;
}
.hbd-control > .ctl-ic ~ .choices .choices__inner {
  padding-left: 40px;
}
.choices:hover .choices__inner {
  border-color: var(--hbd-muted);
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--hbd-color-coral);
  border-radius: 0;
  box-shadow: 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.16);
}
.choices[data-type*="select-one"] .choices__inner {
  padding-bottom: 6px;
}
.choices[data-type*="select-one"]::after {
  right: 16px;
  border-color: var(--hbd-muted) transparent transparent;
}
.choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--hbd-muted);
}
.choices__list--single {
  display: flex;
  align-items: center;
  padding: 2px 22px 2px 2px;
}
.choices__list--single .choices__item {
  display: flex;
  align-items: center;
  color: var(--hbd-heading);
}
.choices__placeholder {
  opacity: 1;
  color: var(--hbd-faint);
}
.choices__list--multiple .choices__item,
.choices__list--multiple .choices__item.is-highlighted {
  margin: 0 5px 4px 0;
  padding: 5px 4px 5px 10px;
  border: 0;
  border-radius: 999px;
  background-color: var(--hbd-heading);
  color: var(--hbd-bg);
  font-size: 12.5px;
  font-weight: 500;
}
.choices[data-type*="select-multiple"] .choices__button {
  margin: 0 0 0 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(var(--hbd-color-white-rgb), 0.25);
  background-size: 7px;
  opacity: 0.8;
}
[data-theme="dark"] .choices[data-type*="select-multiple"] .choices__button {
  border-left-color: rgba(var(--hbd-color-ink-rgb), 0.25);
  filter: invert(1);
}
.hbd-control .choices input.choices__input,
.hbd-control .choices input.choices__input:hover,
.hbd-control .choices input.choices__input:focus {
  width: auto;
  height: auto;
  border: 0;
  box-shadow: none;
}
.choices__input {
  margin-bottom: 4px;
  padding: 4px 2px;
  background-color: transparent;
  color: var(--hbd-heading);
  font-size: 14px;
}
.choices__input::placeholder {
  color: var(--hbd-faint);
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  z-index: 60;
  margin-top: 6px;
  border: 0;
  border-radius: 0;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
  color: rgba(var(--hbd-color-white-rgb), 0.8);
}
.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
  border-color: transparent;
}
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  max-height: 280px;
  padding: 6px;
}
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(var(--hbd-color-white-rgb), 0.08);
  background-color: rgba(var(--hbd-color-white-rgb), 0.04);
  color: var(--hbd-color-white);
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  font-size: 14px;
}
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
  padding-right: 12px;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
  color: var(--hbd-color-white);
}
.choices__list--dropdown .choices__placeholder,
.choices__list--dropdown .choices__item[data-value=""] {
  display: none;
}
.hbd-control .choices__list--dropdown input.choices__input {
  width: 100%;
  padding: 11px 14px;
  background-color: rgba(var(--hbd-color-white-rgb), 0.04);
  box-shadow: inset 0 -1px 0 rgba(var(--hbd-color-white-rgb), 0.08);
  color: var(--hbd-color-white);
}
.choices__list--dropdown .has-no-results,
.choices__list--dropdown .has-no-choices {
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.ch-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  object-fit: cover;
  font-size: 10px;
  font-weight: 700;
  color: var(--hbd-color-ink);
  background-color: var(--hbd-color-iris);
}
.choices__list--single .ch-av {
  width: 24px;
  height: 24px;
}
.ch-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.ch-text b {
  font-weight: 600;
  color: var(--hbd-color-white);
}
.ch-text small {
  font-size: 12px;
  color: rgba(var(--hbd-color-white-rgb), 0.45);
}
.hbd-field.is-invalid .choices__inner {
  border-color: var(--hbd-color-coral);
}

/*---- 34.4 Range Sliders ----*/
.hbd-range-slider.noUi-target {
  height: 4px;
  margin: 18px 9px 14px;
  border: 0;
  border-radius: 999px;
  background-color: var(--hbd-line-2);
  box-shadow: none;
}
.hbd-range-slider .noUi-connect {
  background-color: var(--hbd-color-coral);
}
.hbd-range-slider .noUi-handle {
  top: -7px;
  right: -9px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background-color: var(--hbd-surface);
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral), 0 4px 10px rgba(0, 0, 0, 0.18);
  cursor: grab;
}
.hbd-range-slider .noUi-handle::before,
.hbd-range-slider .noUi-handle::after {
  display: none;
}
.hbd-range-slider .noUi-handle:focus-visible {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
.rs-out {
  font-family: var(--hbd-ff-heading);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hbd-heading);
}

/*---- 34.5 Colour Picker ----*/
button.swatch {
  padding: 0;
  border: 0;
  cursor: pointer;
}
button.swatch:focus-visible {
  outline: 2px solid var(--hbd-color-coral);
  outline-offset: 2px;
}
.pcr-app {
  z-index: 2000;
  border-radius: 0;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--hbd-color-white-rgb), 0.08);
  font-family: var(--hbd-ff-body);
}
.pcr-app .pcr-selection .pcr-color-palette,
.pcr-app .pcr-selection .pcr-color-preview,
.pcr-app .pcr-interaction input {
  border-radius: 0;
}
.pcr-app .pcr-swatches > button,
.pcr-app .pcr-swatches > button::before,
.pcr-app .pcr-swatches > button::after {
  border-radius: 50%;
}
.pcr-app .pcr-interaction .pcr-result {
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
  color: var(--hbd-color-white);
}
.pcr-app .pcr-interaction .pcr-save {
  background-color: var(--hbd-color-coral);
  color: var(--hbd-color-ink);
  font-weight: 600;
}
.pcr-app .pcr-interaction input:focus {
  box-shadow: 0 0 0 2px var(--hbd-color-coral);
}

/*---- 34.6 Editors ----*/
.hbd-editor .ql-container {
  height: auto;
  border: 1px solid var(--hbd-line-2);
  background-color: var(--hbd-input-bg);
  font-family: var(--hbd-ff-body);
  font-size: 15px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.hbd-editor .ql-container:focus-within {
  border-color: var(--hbd-color-coral);
  box-shadow: 0 0 0 3px rgba(var(--hbd-color-coral-rgb), 0.16);
}
.hbd-editor .ql-editor {
  min-height: 150px;
  padding: 14px 16px;
  line-height: 1.7;
  color: var(--hbd-heading);
}
.hbd-editor.is-tall .ql-editor {
  min-height: 320px;
}
.hbd-editor .ql-editor.ql-blank::before {
  left: 16px;
  font-style: normal;
  color: var(--hbd-faint);
}
.hbd-editor .ql-editor h2 {
  margin: 1em 0 0.4em;
  font-size: 22px;
}
.hbd-editor .ql-editor blockquote {
  margin: 1em 0;
  padding-left: 16px;
  box-shadow: inset 3px 0 0 var(--hbd-color-coral);
  color: var(--hbd-text);
}
.hbd-editor .ql-editor a {
  color: var(--hbd-coral-text);
  text-decoration: underline;
}
.hbd-editor .ql-editor img {
  margin: 0.6em 0;
}
.hbd-editor .ql-editor .ql-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0.6em 0;
}

/*---- 34.7 Uploads ----*/
.hbd-drop.is-pond {
  display: block;
  padding: 0;
  border: 0;
  background-color: transparent;
}
/* one dashed edge on the whole zone (FilePond's panel is drawn in three strips; an edge on it doubles at the joins) */
.hbd-drop.is-pond .filepond--root {
  margin-bottom: 0;
  font-family: var(--hbd-ff-body);
  border: 1px dashed var(--hbd-line-2);
  border-radius: var(--hbd-r-card);
  background-color: var(--hbd-surface-2);
}
.hbd-drop.is-pond .filepond--panel-root {
  border-radius: var(--hbd-r-card);
  background-color: transparent;
  box-shadow: none;
}
.hbd-drop.is-pond .filepond--root[data-hopper-state="drag-over"] {
  border-color: var(--hbd-color-coral);
  background-color: rgba(var(--hbd-color-coral-rgb), 0.06);
}
.hbd-drop.is-pond .filepond--drop-label {
  min-height: 150px;
  color: var(--hbd-muted);
}
.hbd-drop.is-pond .filepond--drop-label label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 20px;
  font-size: 13.5px;
  cursor: pointer;
}
.hbd-drop.is-pond .filepond--drop-label b {
  color: var(--hbd-heading);
  font-weight: 600;
}
.hbd-drop.is-pond .filepond--drop-label .drop-note {
  font-size: 12.5px;
  color: var(--hbd-muted);
}
.hbd-drop.is-pond .filepond--item-panel,
.hbd-drop.is-pond .filepond--drip,
.hbd-drop.is-pond .filepond--image-preview-wrapper,
.hbd-drop.is-pond .filepond--image-preview {
  border-radius: 0;
}
.hbd-drop.is-pond .filepond--item-panel {
  background-color: var(--hbd-color-raised);
}
.hbd-drop.is-pond [data-filepond-item-state="processing-complete"] .filepond--item-panel {
  background-color: var(--hbd-color-jade-deep);
}
.hbd-drop.is-pond [data-filepond-item-state*="error"] .filepond--item-panel,
.hbd-drop.is-pond [data-filepond-item-state*="invalid"] .filepond--item-panel {
  background-color: var(--hbd-color-coral-deep);
}
.hbd-drop.is-pond .filepond--file {
  color: var(--hbd-color-white);
  font-size: 13px;
}
.hbd-drop.is-pond .filepond--file-action-button {
  background-color: rgba(var(--hbd-color-ink-rgb), 0.55);
}
.hbd-drop.is-pond .filepond--file-action-button:hover,
.hbd-drop.is-pond .filepond--file-action-button:focus {
  box-shadow: 0 0 0 2px rgba(var(--hbd-color-white-rgb), 0.8);
}
.hbd-drop.is-pond .filepond--image-preview {
  background-color: var(--hbd-color-ink);
}

/*---- 34.8 Month Calendars ----*/
.hbd-fcal {
  --fc-border-color: var(--hbd-line);
  --fc-page-bg-color: var(--hbd-surface);
  --fc-neutral-bg-color: var(--hbd-surface-2);
  --fc-today-bg-color: rgba(var(--hbd-color-coral-rgb), 0.05);
  --fc-event-border-color: transparent;
  font-family: var(--hbd-ff-body);
}
.hbd-fcal .fc-scrollgrid {
  border-left: 0;
  border-right: 0;
}
.hbd-fcal .fc-col-header-cell {
  padding: 10px 0;
  background-color: var(--hbd-surface-2);
}
.hbd-fcal .fc-col-header-cell-cushion {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hbd-muted);
}
.hbd-fcal .fc-daygrid-day-frame {
  display: flex;
  flex-direction: column;
  min-height: 104px;
  padding: 4px 6px 6px;
}
.hbd-fcal .fc-daygrid-day-top {
  flex-direction: row;
}
.hbd-fcal .fc-daygrid-day-number {
  padding: 4px 2px;
  font-family: var(--hbd-ff-heading);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  color: var(--hbd-heading);
}
.hbd-fcal .fc-day-other {
  background-color: var(--hbd-surface-2);
}
.hbd-fcal .fc-day-other .fc-daygrid-day-top {
  opacity: 1;
}
.hbd-fcal .fc-day-other .fc-daygrid-day-number {
  color: var(--hbd-faint);
}
.hbd-fcal .fc-day-today .fc-daygrid-day-frame {
  box-shadow: inset 0 3px 0 var(--hbd-color-coral);
}
.hbd-fcal .fc-day-today .fc-daygrid-day-number {
  color: var(--hbd-coral-text);
}
.hbd-fcal .fc-daygrid-day.is-closed {
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(var(--hbd-color-ink-rgb), 0.05) 7px 14px);
}
.hbd-fcal .fc-h-event {
  margin: 1px 0 2px;
  padding: 2px 6px;
  border: 0;
  border-radius: 0;
  background-color: var(--hbd-surface-3);
  box-shadow: inset 2px 0 0 var(--hbd-color-coral);
  font-size: 11.5px;
  font-weight: 600;
  cursor: grab;
}
.hbd-fcal .fc-h-event .fc-event-main {
  color: var(--hbd-heading);
}
.hbd-fcal .fc-h-event.is-iris { box-shadow: inset 2px 0 0 var(--hbd-color-iris); }
.hbd-fcal .fc-h-event.is-jade { box-shadow: inset 2px 0 0 var(--hbd-color-jade); }
.hbd-fcal .fc-h-event.is-amber { box-shadow: inset 2px 0 0 var(--hbd-color-amber); }
.hbd-fcal .fc-event-mirror {
  box-shadow: inset 2px 0 0 var(--hbd-color-coral), 0 12px 26px rgba(var(--hbd-color-ink-rgb), 0.2);
}
.hbd-fcal .fc-price {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hbd-text);
}
.hbd-fcal .fc-price.is-peak {
  color: var(--hbd-coral-text);
}
.hbd-fcal .fc-price.is-low {
  color: var(--hbd-jade-text);
}
.hbd-fcal .fc-price.is-closed {
  color: var(--hbd-muted);
}
.hbd-fcal .fc-daygrid-more-link {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hbd-coral-text);
}
.hbd-fcal .fc-popover {
  border: 0;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
}
.hbd-fcal .fc-popover-header {
  padding: 8px 10px;
  background-color: transparent;
  color: var(--hbd-color-white);
}
.hbd-fcal .fc-highlight {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.1);
}
.fc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fc-bar b {
  font-family: var(--hbd-ff-heading);
  font-size: 17px;
  color: var(--hbd-heading);
}

/*---- 34.9 Drag And Drop ----*/
.gu-mirror {
  position: fixed !important;
  z-index: 9999 !important;
  margin: 0 !important;
  opacity: 0.94;
  pointer-events: none;
  box-shadow: 0 26px 50px rgba(var(--hbd-color-ink-rgb), 0.24);
  transform: rotate(1deg);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  user-select: none !important;
}
.gu-transit {
  opacity: 0.35;
  outline: 1px dashed var(--hbd-color-coral);
  outline-offset: -1px;
}
tr.gu-mirror {
  background-color: var(--hbd-surface);
}
.drag-handle {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 2px 4px;
  font-size: 13px;
  color: var(--hbd-faint);
  cursor: grab;
}
.drag-handle:hover,
.sec-drag:hover {
  color: var(--hbd-coral-text);
}
.order-n {
  margin-left: 6px;
}
.rota-cell .shift:not(.is-gap) {
  cursor: grab;
}
.tape-bar,
.tg-ev {
  touch-action: none;
  cursor: grab;
}
.tape-bar.is-dragging,
.tg-ev.is-dragging {
  z-index: 5;
  opacity: 0.92;
  pointer-events: none;
  cursor: grabbing;
  box-shadow: inset 0 0 0 2px var(--hbd-color-coral), 0 16px 32px rgba(var(--hbd-color-ink-rgb), 0.26);
}

/*---- 34.10 Maps ----*/
.hbd-worldmap {
  position: relative;
  height: 440px;
  background-color: var(--hbd-surface-2);
}
.map-legend {
  margin-top: 14px;
}
.jvm-zoom-btn {
  left: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--hbd-color-raised);
  color: var(--hbd-color-white);
  font-size: 16px;
  line-height: 28px;
  text-align: center;
}
.jvm-zoom-btn.jvm-zoomin {
  top: 12px;
}
.jvm-zoom-btn.jvm-zoomout {
  top: 44px;
}
.jvm-tooltip {
  padding: 6px 10px;
  border-radius: 0;
  background-color: var(--hbd-color-raised);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  font-family: var(--hbd-ff-body);
  font-size: 13px;
  font-weight: 600;
}
.hbd-geo {
  position: relative;
  height: 200px;
  margin-bottom: 14px;
  background-color: var(--hbd-surface-2);
}
.hbd-geo iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.hbd-geo.is-tall {
  height: 460px;
  margin-bottom: 0;
}
.geo-split {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
}
.geo-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 460px;
  overflow-y: auto;
}
.geo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  text-align: left;
  background-color: transparent;
  border: 0;
}
.geo-item:hover {
  background-color: var(--hbd-hover);
}
.geo-item.is-active {
  background-color: rgba(var(--hbd-color-coral-rgb), 0.08);
  box-shadow: inset 3px 0 0 var(--hbd-color-coral);
}
.geo-item .gi-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.geo-item b {
  font-size: 14px;
  font-weight: 600;
  color: var(--hbd-heading);
}
.geo-item small {
  font-size: 12px;
  color: var(--hbd-muted);
}



/*---- 34.11 Lightbox & Carousels ----*/
.gal-open {
  display: block;
  cursor: zoom-in;
}
.gal-item .gal-open {
  width: 100%;
  height: 100%;
}
.goverlay {
  background: rgba(var(--hbd-color-ink-rgb), 0.94);
}
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  border-radius: 50%;
  background-color: rgba(var(--hbd-color-white-rgb), 0.08);
}
.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background-color: var(--hbd-color-coral);
}
/* Swiper's own auto side margins stop the card's column from stretching it: the carousel would then size to its
   slides, which size to the carousel, and grow without end. A set width breaks the loop. */
.hbd-media-card .mc-img.swiper {
  width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 16 / 10;
}
/* each slide clips its own hover zoom, so the next slide's photo never grows into view */
.hbd-media-card .mc-img .swiper-slide {
  display: block;
  height: 100%;
  overflow: hidden;
}
.hbd-media-card .mc-img .swiper-pagination-bullets {
  bottom: 10px;
}
.hbd-media-card .mc-img .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border-radius: 50%;
  background-color: var(--hbd-color-white);
  opacity: 0.55;
}
.hbd-media-card .mc-img .swiper-pagination-bullet-active {
  background-color: var(--hbd-color-coral);
  opacity: 1;
}
.hbd-media-card .mc-img .mc-flags {
  z-index: 2;
}

/*======================
35. Shape System
========================*/
/* Structure takes a soft corner: cards and panels 10px, dialogs and menus 12px, fields and text buttons 8px, small
   tiles and thumbnails 6px. People, signals and single-point controls are round: avatars, status dots and badges,
   counts, chips and filters, switches and radios, steps, progress, icon buttons, pagination and category icons.
   Checkboxes keep a small corner (a square is "several"; a circle is "one"). Change the look of the whole product here. */
/*---- 35.1 People ----*/
.hbd-avatar,
.hbd-avatar-stack .stack-more,
.tb-user img,
.menu-user img,
.prof-photo img,
.lock-user img,
.invite-card img,
.art-quote img,
.ch-av {
  border-radius: 50%;
}

/*---- 35.2 Signals & Counts ----*/
.hbd-badge,
.hbd-role,
.hbd-chip,
.hbd-chip-check span,
.hbd-pill,
.hbd-pill .pill-n,
.tab-n,
.sb-count,
.board-n,
.shift {
  border-radius: 999px;
}
.hbd-badge.is-dot::before,
.hbd-role b,
.tb-dot,
.live-dot,
.hbd-legend i,
.shift-key,
.tl-item::before,
.tape-unit .hk,
.tb-tally .sep,
.sb-tag,
.role-mark,
.swatch {
  border-radius: 50%;
}
/* the role mark on a card that names the role */
.role-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  font-family: var(--hbd-ff-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--hbd-color-ink);
}
.role-mark.is-owned { background-color: var(--hbd-color-iris); color: var(--hbd-color-white); }
.role-mark.is-franchised { background-color: var(--hbd-color-amber); }
.role-mark.is-partner { background-color: var(--hbd-color-coral); }

/*---- 35.3 Point Controls ----*/
.hbd-icon-btn,
.hbd-control .ctl-btn,
.hbd-pages a,
.hbd-pages span,
.hbd-radio-card .rc-mark,
.step-n,
.ss-n {
  border-radius: 50%;
}
.hbd-seg,
.hbd-seg button {
  border-radius: 999px;
}
.hbd-switch .track,
.hbd-switch .track::after {
  border-radius: 999px;
}

/*---- 35.4 Category Icons ----*/
.hbd-tile-ic,
.kpi-ic,
.notify-item .n-ic,
.hbd-confirm .confirm-ic,
.empty-art,
.drop-ic,
.gr-ic,
.ss-ic,
.hbd-file .file-ic,
.doc-stamp {
  border-radius: 50%;
}

/*---- 35.5 Progress ----*/
.hbd-progress,
.hbd-progress span,
.hbd-stackbar,
.hbd-strength i {
  border-radius: 999px;
}
.hbd-stackbar {
  overflow: hidden;
}

/*---- 35.6 Structure ----*/
.hbd-card,
.hbd-kpi,
.hbd-media-card,
.rec-card,
.show-card,
.perm-card,
.plan-card,
.trip-card,
.sp-box,
.kit-nav,
.kit-swatch,
.set-tile,
.search-page-bar,
.sb-org,
.sb-help,
.hbd-radio-card .rc-body,
.hbd-drop,
.hbd-imgup:not(.is-circle) .iu-frame,
.hbd-alert,
.hbd-savebar,
.hbd-bulk,
.hbd-geo,
.hbd-worldmap,
.shot-frame,
.board-card,
.hbd-step,
.hbd-toast {
  border-radius: var(--hbd-r-card);
}
.hbd-modal .modal-content,
.hbd-menu.dropdown-menu,
.hbd-select-list,
.hbd-iconpick-menu.dropdown-menu,
.hbd-scope.dropdown-menu,
.hbd-notify.dropdown-menu,
.flatpickr-calendar,
.choices__list--dropdown,
.choices__list[aria-expanded],
.pcr-app,
.hbd-fcal .fc-popover {
  border-radius: var(--hbd-r-panel);
}
.hbd-select-btn,
.tool-search input,
.hbd-iconpick .ip-btn,
.choices__inner,
.hbd-otp input,
.hbd-input,
.hbd-file,
.hbd-editor .ql-toolbar,
.ai-ask,
.state-countdown div {
  border-radius: var(--hbd-r-field);
}
.hbd-editor .ql-toolbar {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.hbd-editor .ql-container {
  border-radius: 0 0 var(--hbd-r-field) var(--hbd-r-field);
}
.hbd-thumb,
.sc-stats > div,
.hbd-tile-sq,
.kit-swatch .ks-color,
.tooltip-inner,
.jvm-tooltip,
.logo-box {
  border-radius: var(--hbd-r-sm);
}
.hbd-check .box {
  border-radius: 4px;
}
/* a field with a unit box: one rounded group */
.hbd-control.has-addon > .ctl-addon:first-child {
  border-radius: var(--hbd-r-field) 0 0 var(--hbd-r-field);
}
.hbd-control.has-addon > .ctl-addon:last-child {
  border-radius: 0 var(--hbd-r-field) var(--hbd-r-field) 0;
}
.hbd-control.has-addon > .ctl-addon:first-child + input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.hbd-control.has-addon > input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* a photo at the top of a card follows the card's corner */
.hbd-media-card .mc-img,
.show-card .sc-cover {
  border-radius: var(--hbd-r-card) var(--hbd-r-card) 0 0;
}
/* a table that starts a card: its header row follows the corner */
.hbd-card > .card-body.is-flush:first-child .hbd-table-wrap:first-child thead th:first-child {
  border-top-left-radius: var(--hbd-r-card);
}
.hbd-card > .card-body.is-flush:first-child .hbd-table-wrap:first-child thead th:last-child {
  border-top-right-radius: var(--hbd-r-card);
}
/* cards lift a little more on hover where they are clickable */
.hbd-card.is-ring:hover,
.hbd-media-card:hover {
  box-shadow: var(--hbd-lift);
}