/* Hiraya Cove demo — the `hd-` layer.
 *
 * Loaded on every page (one stylesheet request, cached) but REACHABLE only from
 * the demo property's views: every selector is `hd-`-prefixed or scoped under
 * `#view-hd-*`/`#hd-rail`, and nothing here restyles an existing class. The
 * tokens come from ely-home.css's :root — same page, same design system.
 *
 * Colour law, held throughout: orange (#F5610A / --orange-ink for small text)
 * appears ONLY on money, wins and Ely-attributed figures. Performance metrics
 * are blue/steel. Numerals, dates, tags and kickers are JetBrains Mono —
 * mono is evidence. Charts sit on opaque white cards, never on glass.
 *
 * The resort's own brand (lagoon/coral/sand, Marcellus/Figtree) exists ONLY
 * inside `.hd-artefact` frames — rendered collateral, ad creatives, social
 * imagery, the site preview — never in Ely chrome.
 */

/* The resort brand faces — used exclusively inside .hd-artefact scopes. */
@font-face {
  font-family: 'HD Marcellus';
  src: url(/assets/ely/hd/marcellus.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'HD Figtree';
  src: url(/assets/ely/hd/figtree.woff2) format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* Chart palette — validated (dataviz six checks, light surface):
     orange = direct·via Ely (money/Ely meaning), blue = direct·other,
     teal = OTA, violet = other. */
  --hd-c-ely: #F5610A;
  --hd-c-direct: #1F4BFF;
  --hd-c-ota: #0D9488;
  --hd-c-other: #7C3AED;
  /* The Hiraya artefact palette (fallbacks; live values come from the API). */
  --hd-lagoon: #0E4C46;
  --hd-lagoon-deep: #07332E;
  --hd-lagoon-mist: #D8E5E1;
  --hd-sand: #F4EEE4;
  --hd-linen: #FBF8F3;
  --hd-shell: #E7DECF;
  --hd-ink: #1E1B16;
  --hd-ink-soft: #6B6257;
  --hd-coral: #E4633F;
  --hd-coral-deep: #B8431F;
}

/* ————————————————— picker + chrome ————————————————— */
.chip.hd-glass-demo {
  background: #FFFFFF1F;
  border: 1px dashed #FFFFFFA3;
  color: #fff;
}
.hd-chrome-tag {
  color: #DCEEF9;
  border: 1px dashed #FFFFFF52;
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hd-chrome-tag { display: none }
}

/* ————————————————— the opening theatre ————————————————— */
.hd-open {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 14px;
  background: linear-gradient(178deg, #06263BF5 0%, #0D4162EB 62%, #0D4162DE 100%);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 1; transition: opacity .6s ease;
}
.hd-open.leaving { opacity: 0; pointer-events: none }
.hd-open-panel {
  width: min(460px, calc(100vw - 28px)); border-radius: 20px; padding: 34px 36px 26px;
  background: #FFFFFF14; border: 1px solid #FFFFFF2E;
  backdrop-filter: blur(22px) saturate(118%); -webkit-backdrop-filter: blur(22px) saturate(118%);
  color: #fff; position: relative;
}
.hd-open-mark img { width: 46px; height: 46px; display: block; border-radius: 10px; box-shadow: 0 8px 24px #00000052 }
.hd-open-panel h2 { font-family: var(--disp); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 18px }
.hd-open-sub { color: #DCEEF9; font-size: 13.5px; margin-top: 9px; max-width: 40ch }
.hd-open-lines { list-style: none; display: grid; gap: 11px; margin-top: 22px; padding: 0 }
.hd-open-lines li {
  display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #A8CCE4;
  opacity: .45; transition: opacity .45s ease, color .45s ease;
}
.hd-open-lines li.on { opacity: 1; color: #fff }
.hd-open-lines .tick {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid #FFFFFF3D;
  display: grid; place-items: center; flex-shrink: 0; transition: background .45s, border-color .45s;
}
.hd-open-lines .tick svg { width: 11px; height: 11px; stroke: #fff; opacity: 0; transition: opacity .45s }
.hd-open-lines li.on .tick { background: var(--blue); border-color: var(--blue) }
.hd-open-lines li.on .tick svg { opacity: 1 }
.hd-open-bar { height: 4px; border-radius: 999px; background: #FFFFFF24; margin-top: 24px; overflow: hidden }
.hd-open-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #fff; transition: width 14.4s linear }
.hd-open-skip {
  position: absolute; top: 18px; right: 20px; color: #DCEEF9; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; background: #FFFFFF1F; transition: background .2s;
}
.hd-open-skip:hover { background: #FFFFFF38 }
.hd-open-foot { font-size: 9px; letter-spacing: .16em; color: #A8CCE4; margin-top: 16px }
@media (max-width: 640px) {
  .hd-open-panel { padding: 26px 24px 20px }
  .hd-open-panel h2 { font-size: 22px }
}

/* ————————————————— shared scaffolding ————————————————— */
.hd-view-inner { max-width: 1160px }
.hd-body { display: grid; gap: 18px; margin-top: 26px }
/* Grid items must never widen their track to min-content: wide tables and
   two-column strips scroll inside their own cards instead of pushing the page. */
.hd-body > *, .hd-duo > *, .hd-website-grid > *, .hd-chat-layout > *, .hd-mtd > * { min-width: 0 }
.hd-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
}
.hd-kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}
.hd-kicker.hd-kicker-orange { color: var(--orange-ink) }
.hd-kicker.hd-kicker-orange::before { background: var(--orange) }

.hd-foot {
  margin-top: 8px; padding: 4px 2px 0;
  color: var(--faint); font-size: 12.5px; max-width: 78ch;
}
.hd-foot .mono { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: 8px }

/* EST. — the estimated-figure tag. Sits after a numeral, never colours it. */
.hd-est {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--faint); vertical-align: super;
  margin: 0 5px 0 3px;
}
/* On the glass tiles the tag reads in the horizon's on-glass ink, not grey. */
.tile .hd-est { color: #DCEEF9 }
.hd-sec-est { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--faint); white-space: nowrap }

/* Stat tiles on white cards. Numerals are mono — evidence, not display. */
.hd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px }
.hd-tile .klabel { color: var(--faint) }
.hd-tile-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 25px; font-weight: 600; letter-spacing: -.01em; margin-top: 7px;
}
.hd-tile-v small { font-size: 14px; font-weight: 600; color: var(--mut) }
.hd-tile-sub { color: var(--mut); font-size: 12.5px; margin-top: 5px; max-width: 26ch }
.hd-tile-v.hd-money { color: var(--orange-ink) }

.hd-chart-note { color: var(--mut); font-size: 13px; margin-top: 12px; max-width: 76ch }
.hd-chart-note b { color: var(--ink); font-weight: 600 }
.hd-window-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); white-space: nowrap }

.hd-svg { width: 100%; height: auto; display: block }
.hd-tip {
  position: absolute; top: -6px; transform: translateX(-50%);
  background: var(--ink); color: var(--card); font-family: var(--mono); font-size: 12px;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  box-shadow: var(--sh-card);
}
.hd-chart-wrap { position: relative }
.hd-chart-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px }

.hd-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px }
.hd-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mut) }
.hd-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0 }
.hd-legend i.hatch {
  background: repeating-linear-gradient(45deg, #B9C4CE 0 2px, transparent 2px 4px);
  border: 1px solid #B9C4CE;
}

/* Loading / error cards */
.hd-state { background: var(--line-soft); box-shadow: none }
.hd-state h3 { font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -.01em }
.hd-state p { color: var(--mut); font-size: 13.5px; margin-top: 7px; max-width: 64ch }
.hd-state .mini-btn { margin-top: 14px }

/* ————————————————— overview ————————————————— */
.hd-mtd { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 14px }
.hd-mtd-money {
  background: var(--orange-tint); border-radius: var(--r-lg); padding: 22px;
}
.hd-mtd-money .hd-kicker { color: var(--orange-ink) }
.hd-mtd-money .hd-kicker::before { background: var(--orange) }
.hd-mtd-big {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 34px; font-weight: 600; letter-spacing: -.01em;
  color: var(--orange-ink); margin-top: 12px;
}
.hd-mtd-sub { color: #7A4423; font-size: 13px; margin-top: 6px; max-width: 40ch }
.hd-mtd-split { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #F5610A2E }
.hd-mtd-split .klabel { color: #9A5A2E }
.hd-mtd-split .v { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--orange-ink); margin-top: 4px }
.hd-mtd-plain .hd-mtd-big { color: var(--ink) }
.hd-mtd-plain .hd-mtd-sub { color: var(--mut) }
.hd-mtd-plain .hd-mtd-split { border-top-color: var(--line-soft) }
.hd-mtd-plain .hd-mtd-split .klabel { color: var(--faint) }
.hd-mtd-plain .hd-mtd-split .v { color: var(--ink) }

.hd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }

/* Activity feed */
.hd-sig {
  background: var(--orange-tint); border-radius: var(--r-md);
  padding: 22px; display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap;
}
.hd-sig-time {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 46px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
  color: var(--orange-ink);
}
.hd-sig-date { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: #9A5A2E; text-transform: uppercase; margin-top: 8px }
.hd-sig-main { flex: 1; min-width: 240px }
.hd-sig-h { font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -.015em }
.hd-sig-row { display: flex; align-items: center; gap: 12px; margin-top: 9px; flex-wrap: wrap }
.hd-sig-amt { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--orange-ink) }
.hd-sig-meta { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: #9A5A2E; text-transform: uppercase }
.hd-sig-note { color: #7A4423; font-size: 13px; margin-top: 10px; max-width: 62ch }
.hd-sig-note b { font-weight: 600 }

.hd-act { display: grid; margin-top: 6px }
.hd-act-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center;
  padding: 13px 2px; border-top: 1px solid var(--line-soft);
}
.hd-act-row:first-child { border-top: 0 }
.hd-act-when { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink) }
.hd-act-when small { display: block; font-size: 10px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px }
.hd-act-h { font-size: 14px; font-weight: 600 }
.hd-act-meta { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; margin-top: 3px }
.hd-act-right { display: flex; align-items: center; gap: 12px }
.hd-amount { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; color: var(--orange-ink) }
.chip.hd-booked { background: var(--orange-ink); color: #fff }
.chip.hd-handed { background: #EBEFF3; color: #59626F }
.chip.hd-lead { background: var(--blue-tint); color: var(--blue-dark) }

/* Conversations strip (overview) */
.hd-conv { display: grid; grid-template-columns: auto 1fr auto auto; gap: 32px; align-items: start }
.hd-conv-chan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px }
.hd-chan-row { min-width: 150px }
.hd-chan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px }
.hd-chan-top b { font-weight: 600 }
.hd-chan-top .mono { color: var(--mut); font-size: 12px }
.hd-chan-bar { height: 5px; border-radius: 999px; background: var(--line-soft); margin-top: 6px; overflow: hidden }
.hd-chan-bar i { display: block; height: 100%; border-radius: 999px; background: var(--steel-mid) }

@media (max-width: 1020px) {
  .hd-mtd, .hd-duo { grid-template-columns: 1fr }
  .hd-conv { grid-template-columns: 1fr 1fr; gap: 20px }
}

/* ————————————————— chat ————————————————— */
.hd-chat-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start }
.hd-threads { display: grid; gap: 8px; max-height: 640px; overflow-y: auto; padding: 2px }
.hd-thread {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 15px; transition: border-color .18s, background .18s;
  display: block; width: 100%;
}
.hd-thread:hover { border-color: #C9D2DB }
.hd-thread[aria-current="true"] { border-color: var(--blue); background: #FAFBFF }
.hd-thread-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.hd-thread-id { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--steel); min-width: 0; overflow-wrap: anywhere }
.hd-thread-when { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint) }
.hd-thread-line { font-size: 13px; font-weight: 600; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.hd-thread-tags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap }

.hd-chat-pane { display: flex; flex-direction: column }
.hd-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap }
.hd-chat-head h3 { font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -.01em }
.hd-chat-head .mono { font-size: 10.5px; color: var(--faint); min-width: 0; overflow-wrap: anywhere }
.hd-msgs { flex: 1; overflow-y: auto; display: grid; gap: 10px; padding: 18px 2px; align-content: start; max-height: 480px }
.hd-msg { max-width: 78%; border-radius: var(--r-md); padding: 11px 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere }
.hd-msg b { font-weight: 600 }
.hd-msg.guest { justify-self: end; background: var(--blue-tint); color: var(--blue-dark); border-bottom-right-radius: 5px }
.hd-msg.ely { justify-self: start; background: var(--canvas); color: var(--ink); border-bottom-left-radius: 5px }
.hd-msg-meta { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 0 6px }
.hd-msg-meta.guest { justify-self: end }
.hd-typing { justify-self: start; display: inline-flex; gap: 4px; padding: 12px 16px; background: var(--canvas); border-radius: var(--r-md); border-bottom-left-radius: 5px }
.hd-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--steel-mid); animation: hd-bounce 1.2s ease-in-out infinite }
.hd-typing i:nth-child(2) { animation-delay: .15s }
.hd-typing i:nth-child(3) { animation-delay: .3s }
@keyframes hd-bounce { 0%, 60%, 100% { opacity: .35; transform: none } 30% { opacity: 1; transform: translateY(-3px) } }

.hd-chat-suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 }
.hd-chat-form { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft) }
.hd-chat-form input {
  flex: 1; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 18px; min-width: 0;
  transition: border-color .2s, background .2s;
}
.hd-chat-form input:focus { background: var(--card); border-color: var(--blue); outline: none }
.hd-chat-form button { flex-shrink: 0 }
.hd-chat-note { font-size: 12px; color: var(--faint); margin-top: 9px }
.hd-chat-note b { color: var(--mut); font-weight: 600 }
/* the closed-thread ending — a handover record, never a dangling composer */
.hd-end-rule {
  display: flex; align-items: center; gap: 12px; margin-top: 4px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.hd-end-rule::before, .hd-end-rule::after { content: ""; height: 1px; background: var(--line); flex: 1 }
.hd-end-panel {
  background: var(--canvas); border-radius: var(--r-md); padding: 18px 20px;
  margin-top: 14px; display: flex; gap: 14px; align-items: flex-start;
}
.hd-end-badge {
  width: 36px; height: 36px; border-radius: 50%; background: var(--deep);
  display: grid; place-items: center; flex-shrink: 0;
}
.hd-end-badge svg { width: 16px; height: 16px; stroke: #fff }
.hd-end-main { flex: 1; min-width: 0 }
.hd-end-main h4 { font-family: var(--disp); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em }
.hd-end-sub { color: var(--mut); font-size: 13px; margin-top: 5px; max-width: 54ch }
.hd-end-facts { display: flex; gap: 26px; margin-top: 13px; flex-wrap: wrap }
.hd-end-facts .klabel { color: var(--faint) }
.hd-end-facts .v { font-size: 13px; font-weight: 600; margin-top: 4px }
.hd-end-facts .v.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.hd-end-lead { margin-top: 13px }
.hd-end-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap }

.chip.hd-src-kb { background: #EBEFF3; color: #59626F }
.chip.hd-src-ai { background: var(--blue-tint); color: var(--blue-dark) }

@media (max-width: 1020px) {
  .hd-chat-layout { grid-template-columns: 1fr }
  .hd-threads { max-height: 300px }
}

/* ————————————————— voice ————————————————— */
.hd-worth { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 }
.hd-worth > div { padding: 0 26px; border-left: 1px solid var(--line-soft) }
.hd-worth > div:first-child { padding-left: 0; border-left: 0 }
.hd-worth .klabel { color: var(--faint) }
.hd-worth-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; color: var(--orange-ink); margin-top: 8px }
.hd-worth-sub { color: var(--mut); font-size: 12.5px; margin-top: 7px; max-width: 34ch }
@media (max-width: 1020px) {
  .hd-worth { grid-template-columns: 1fr }
  .hd-worth > div { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line-soft) }
  .hd-worth > div:first-child { padding-top: 0; border-top: 0 }
}

/* the call card — the one dark object on the page */
.hd-call { background: var(--deep); border-radius: var(--r-lg); box-shadow: var(--sh-float); color: #fff; display: grid; grid-template-columns: 1fr 1.3fr; overflow: hidden }
.hd-call-side { padding: 28px }
.hd-call-side h3 { font-family: var(--disp); font-size: 24px; font-weight: 700; letter-spacing: -.02em }
.hd-call-lede { color: #A8CCE4; font-size: 13.5px; margin-top: 10px; max-width: 34ch }
.hd-call-mode { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap }
.chip.hd-live { background: var(--blue); color: #fff }
.chip.hd-scripted { background: #FFFFFF24; color: #DCEEF9 }
.hd-call-number { font-family: var(--mono); font-size: 12px; color: #A8CCE4; letter-spacing: .08em }
.hd-call-state { display: flex; align-items: center; gap: 14px; margin-top: 26px }
.hd-call-orb {
  width: 58px; height: 58px; border-radius: 50%; background: #FFFFFF14; border: 1px solid #FFFFFF2E;
  display: grid; place-items: center; flex-shrink: 0;
}
.hd-call-orb svg { width: 22px; height: 22px; stroke: #fff }
.hd-call-orb.ringing { animation: hd-ring 1.2s ease-in-out infinite }
.hd-call-orb.talking { border-color: var(--blue); box-shadow: 0 0 0 0 #1F4BFF66; animation: hd-talk 1.8s ease-out infinite }
@keyframes hd-ring { 0%, 100% { transform: none } 10% { transform: rotate(-9deg) } 20% { transform: rotate(8deg) } 30% { transform: rotate(-6deg) } 40% { transform: none } }
@keyframes hd-talk { 0% { box-shadow: 0 0 0 0 #1F4BFF59 } 100% { box-shadow: 0 0 0 16px #1F4BFF00 } }
.hd-call-status .klabel { color: #A8CCE4 }
.hd-call-timer { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; margin-top: 4px }
.hd-call-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap }
.hd-btn-call { background: var(--blue); color: #fff; box-shadow: 0 4px 14px #1F4BFF3D }
.hd-btn-call:hover { background: var(--blue-dark); transform: translateY(-1px) }
.hd-btn-call .ico { stroke: #fff }
.hd-btn-dark { background: #FFFFFF1F; border: 1px solid #FFFFFF2E; color: #fff }
.hd-btn-dark:hover { background: #FFFFFF33 }
.hd-btn-dark .ico { stroke: #fff }
.hd-btn-hang { background: #C0261B; color: #fff }
.hd-btn-hang:hover { background: #A82015 }
.hd-btn-hang .ico { stroke: #fff }
.hd-call-reason { color: #A8CCE4; font-size: 12.5px; margin-top: 16px; max-width: 38ch }

.hd-call-transcript { background: #04202F; padding: 24px 28px; display: flex; flex-direction: column; min-height: 380px }
.hd-call-transcript .klabel { color: #6E9DBC }
.hd-ct-scroll { flex: 1; overflow-y: auto; display: grid; gap: 10px; align-content: start; margin-top: 14px; max-height: 380px; scrollbar-color: #2E5470 transparent }
.hd-ct-empty { color: #6E9DBC; font-size: 13.5px; max-width: 44ch; margin-top: 12px }
.hd-ct-turn { font-size: 13.5px; line-height: 1.55; max-width: 92% }
.hd-ct-turn .who { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 3px }
.hd-ct-turn.concierge { color: #E9F4FB } .hd-ct-turn.concierge .who { color: #7FB2D4 }
.hd-ct-turn.caller { color: #BFD9EA; justify-self: end; text-align: right } .hd-ct-turn.caller .who { color: #5E88A6 }
@media (max-width: 1020px) {
  .hd-call { grid-template-columns: 1fr }
  .hd-call-transcript { min-height: 240px }
}

/* hour histogram */
.hd-hour-note { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--mut) }
.hd-hour-note .mono { font-weight: 600; color: var(--ink) }

/* split bar (where a call ends up) */
.hd-split { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin-top: 16px }
.hd-split i { display: block; height: 100% }
.hd-split .a { background: var(--blue) }
.hd-split .b { background: #B9C4CE }
.hd-split-legend { display: grid; gap: 8px; margin-top: 14px }
.hd-split-row { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px }
.hd-split-row i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; align-self: center }
.hd-split-row .n { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 600 }

/* ranked share rows (languages, intents) */
.hd-rank { display: grid; gap: 13px; margin-top: 16px }
.hd-rank-row .top { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px }
.hd-rank-row .top b { font-weight: 600 }
.hd-rank-row .top .n { margin-left: auto; font-family: var(--mono); font-size: 12.5px; font-weight: 600 }
.hd-rank-row .top .s { font-family: var(--mono); font-size: 11px; color: var(--faint); width: 5ch; text-align: right }
.hd-rank-bar { height: 6px; border-radius: 999px; background: var(--line-soft); margin-top: 6px; overflow: hidden }
.hd-rank-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue) }

/* ————————————————— bookings ————————————————— */
.hd-book-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.hd-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 16px }
.hd-int-card {
  border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--card);
  padding: 15px 17px; display: flex; flex-direction: column; gap: 6px;
}
.hd-int-top { display: flex; align-items: center; gap: 10px }
.hd-int-top .chip { margin-left: auto }
.hd-int-mark { font-family: var(--disp); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em }
.hd-int-sub { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint) }
.hd-int-act { margin-top: 8px }
.hd-int-card .hd-chat-note { margin-top: 6px }
.hd-switch {
  width: 40px; height: 24px; border-radius: 999px; background: #C6CFD8;
  position: relative; transition: background .2s; flex-shrink: 0;
}
.hd-switch i {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .2s; box-shadow: 0 1px 2px #0A0E1429;
}
.hd-switch[aria-checked="true"] { background: var(--blue) }
.hd-switch[aria-checked="true"] i { transform: translateX(16px) }
.hd-select.hd-set-select { width: auto; min-width: 232px; max-width: 320px; padding: 8px 11px; font-size: 13px }
@media (max-width: 640px) {
  .hd-select.hd-set-select { min-width: 0; max-width: 52vw }
}

.hd-month-nav { display: flex; align-items: center; gap: 6px }
.hd-month-nav .hd-month { font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -.01em; min-width: 170px; text-align: center }
.hd-month-btn {
  width: 34px; height: 34px; border-radius: 50%; background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; transition: background .2s;
}
.hd-month-btn:hover { background: var(--canvas) }
.hd-month-btn svg { width: 15px; height: 15px; stroke: var(--steel) }
.hd-month-btn[disabled] { opacity: .4; cursor: default }

.hd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px }
.hd-cal-dow { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; color: var(--faint); text-align: left; padding: 0 4px 4px; text-transform: uppercase }
.hd-day {
  text-align: left; background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 9px 10px 10px; min-height: 74px; position: relative; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, background .15s; cursor: pointer;
}
.hd-day:hover { border-color: #C9D2DB }
.hd-day.wknd { background: #F8FAFC }
.hd-day.out { background: transparent; border-color: transparent; cursor: default }
.hd-day[aria-pressed="true"] { border-color: var(--blue); background: #FAFBFF }
.hd-day.today .hd-day-n { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px }
.hd-day-top { display: flex; align-items: baseline; gap: 5px }
.hd-day-n { font-family: var(--mono); font-size: 12px; font-weight: 600 }
.hd-day-hol { width: 5px; height: 5px; border-radius: 50%; background: var(--hd-c-other); flex-shrink: 0; align-self: center }
.hd-day-pick { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--faint) }
.hd-day-bar { height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: auto }
.hd-day-bar i { display: block; height: 100%; background: var(--blue) }
.hd-day-bar i.fc { background: repeating-linear-gradient(45deg, #9FB2FF 0 2px, transparent 2px 4px) }
.hd-day-bar { display: flex }
.hd-day-figs { display: flex; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: 9.8px; font-weight: 600; color: var(--mut) }

.hd-daycard { background: var(--canvas); border-radius: var(--r-md); padding: 17px 20px; margin-top: 14px }
.hd-daycard-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.hd-daycard-hd h4 { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -.01em }
.hd-daycard-figs { display: flex; gap: 28px; margin-top: 13px; flex-wrap: wrap }
.hd-daycard-figs .klabel { color: var(--faint) }
.hd-daycard-figs .v { font-family: var(--mono); font-size: 15px; font-weight: 600; margin-top: 4px }
.hd-daycard-figs .v.hd-money { color: var(--orange-ink) }

.hd-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.hd-pill {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mut);
  background: var(--card); border: 1px solid var(--line); transition: background .18s, color .18s, border-color .18s;
}
.hd-pill:hover { color: var(--ink); background: var(--canvas) }
.hd-pill[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff }
.hd-search {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; min-width: 210px;
}
.hd-search:focus { border-color: var(--blue); outline: none }

.hd-table-wrap { overflow-x: auto; margin-top: 14px }
.hd-table { width: 100%; border-collapse: collapse; min-width: 760px }
.hd-table th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; color: var(--faint);
  text-transform: uppercase; text-align: left; padding: 0 12px 9px 2px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.hd-table th.r, .hd-table td.r { text-align: right; padding-right: 2px }
.hd-table td { padding: 11px 12px 11px 2px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: top }
.hd-table td .sub { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px }
.hd-table td b { font-weight: 600 }
.hd-table td.mono, .hd-table .mono { font-variant-numeric: tabular-nums }
.hd-table .hd-amount { font-size: 13px }
.chip.hd-via-ely { background: var(--orange-tint); color: var(--orange-deep) }
.chip.hd-chan { background: #EBEFF3; color: #59626F }
.chip.hd-chan-direct { background: var(--blue-tint); color: var(--blue-dark) }
.hd-more { display: flex; justify-content: center; margin-top: 16px }

/* ————————————————— website ————————————————— */
.hd-site-frame { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--canvas) }
.hd-site-frame iframe { display: block; width: 100%; height: 560px; border: 0; background: #fff }
.hd-site-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap }
.hd-site-bar .mono { font-size: 11px; color: var(--steel) }
.hd-site-bar .spacer { flex: 1 }
.hd-website-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: start }
.hd-hero-form { display: grid; gap: 14px; margin-top: 16px }
.hd-hero-form .field-lbl { display: flex; justify-content: space-between; align-items: baseline }
.hd-hero-form .count { font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: .06em }
.hd-hero-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.hd-staged {
  background: var(--blue-tint); border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; color: var(--blue-dark);
}
.hd-staged b { font-weight: 600 }
.hd-staged .mono { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; color: var(--blue-dark); opacity: .75 }
.hd-edit-form { display: flex; gap: 10px; margin-top: 16px; align-items: flex-start }
.hd-edit-form textarea {
  flex: 1; font: inherit; font-size: 14px; color: var(--ink); resize: vertical;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 14px; min-width: 0; min-height: 44px;
  transition: border-color .2s, background .2s;
}
.hd-edit-form textarea:focus { background: var(--card); border-color: var(--blue); outline: none }
.hd-edit-form button { flex-shrink: 0 }
.hd-agent-run { margin-top: 14px }
.hd-agent-line { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--mut) }
.hd-agent-orb {
  width: 9px; height: 9px; border-radius: 50%; background: var(--blue);
  flex-shrink: 0; animation: hd-agent-pulse 1.1s ease-in-out infinite;
}
@keyframes hd-agent-pulse { 0%, 100% { opacity: .35; transform: none } 50% { opacity: 1; transform: scale(1.25) } }
.hd-staged .hd-agent-open { color: var(--blue-dark); font-weight: 600; text-decoration: underline; text-decoration-color: #1233C840 }
.hd-staged .hd-agent-open:hover { text-decoration-color: currentColor }
.hd-edit-card + * { margin-top: 0 }
@media (max-width: 640px) { .hd-edit-form { flex-direction: column } .hd-edit-form button { align-self: flex-end } }

@media (max-width: 1020px) {
  .hd-website-grid { grid-template-columns: 1fr }
  .hd-site-frame iframe { height: 420px }
}

/* ————————————————— brand ————————————————— */
.hd-brand-cols { columns: 2; column-gap: 14px }
.hd-brand-cols > * { break-inside: avoid; margin-bottom: 14px }
@media (max-width: 1020px) { .hd-brand-cols { columns: 1 } }

.hd-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 16px }
.hd-swatch { border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden }
.hd-swatch .well { height: 52px; border-bottom: 1px solid #0A0E1414 }
.hd-swatch .meta { padding: 9px 11px }
.hd-swatch .name { font-family: var(--mono); font-size: 11.5px; font-weight: 600 }
.hd-swatch .hex { font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-left: 7px }
.hd-swatch .role { font-size: 11.5px; color: var(--mut); margin-top: 3px }
.hd-swatch .usage { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); float: right }

.hd-lockups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px }
.hd-lockup-wrap .cap { font-size: 12px; color: var(--mut); margin-top: 8px }
.hd-lockup { border-radius: var(--r-sm); border: 1px solid var(--line-soft); min-height: 130px; display: grid; place-items: center; padding: 20px }

.hd-do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 8px }
.hd-rule { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px }
.hd-rule .ico-sm { flex-shrink: 0; margin-top: 3px }
.hd-rule.do .ico-sm { stroke: var(--blue-dark) }
.hd-rule.dont { color: var(--mut) } .hd-rule.dont .ico-sm { stroke: var(--faint) }
@media (max-width: 1020px) { .hd-do-dont { grid-template-columns: 1fr } }

.hd-voice-words { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px }

/* the one-piece generator chooser */
.hd-make-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 16px }
.hd-make-type {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 15px; display: grid; gap: 4px;
  transition: border-color .18s, background .18s;
}
.hd-make-type:hover { border-color: #C9D2DB; background: var(--canvas) }
.hd-make-type[aria-pressed="true"] { border-color: var(--blue); background: #FAFBFF }
.hd-make-type b { font-size: 13.5px; font-weight: 600 }
.hd-make-type .mono { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint) }
.hd-make-one { max-width: 360px; margin-top: 16px }
.hd-make-one + .hd-chart-note { margin-top: 10px }
.hd-agent-line + .hd-agent-line { margin-top: 6px }
.card .hd-agent-line { margin-top: 14px }

/* The artefact frame: Ely chrome outside, Hiraya Cove inside. */
.hd-artefacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-top: 16px }
.hd-artefact-wrap { background: var(--canvas); border-radius: var(--r-md); padding: 18px 18px 14px }
.hd-artefact-cap { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; flex-wrap: wrap }
.hd-artefact-cap b { font-size: 13px; font-weight: 600 }
.hd-artefact-cap .mono { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint) }
.hd-artefact { border-radius: 6px; box-shadow: var(--sh-card); overflow: hidden; font-family: 'HD Figtree', 'Instrument Sans', sans-serif }
.hd-artefact .af-pad { padding: 26px 24px }
.hd-artefact .af-mark {
  display: inline-grid; place-items: center; border: 1px solid currentColor; padding: 4px 7px;
  font-family: 'HD Marcellus', serif; font-size: 12px; letter-spacing: .1em;
}
.hd-artefact .af-eyebrow { font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; opacity: .75 }
.hd-artefact .af-display { font-family: 'HD Marcellus', serif; font-weight: 400; line-height: 1.14; letter-spacing: .01em }
.hd-artefact .af-body { font-size: 11.5px; line-height: 1.6 }
.hd-artefact .af-rule { border: 0; border-top: 1px solid currentColor; opacity: .28; margin: 14px 0 }
.hd-artefact .af-line { font-family: 'HD Marcellus', serif; font-size: 13.5px; text-align: center; padding: 9px 0; line-height: 1.45 }
.hd-artefact .af-line + .af-line { border-top: 1px solid #0000001F }
.hd-artefact img { width: 100%; height: 150px; object-fit: cover; display: block }
.hd-artefact .af-foot { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .7 }

.hd-specimen { border-radius: var(--r-sm); border: 1px solid var(--line-soft); padding: 22px 24px; margin-top: 12px; background: var(--hd-linen); color: var(--hd-lagoon) }
.hd-specimen .sample-display { font-family: 'HD Marcellus', serif; font-size: clamp(28px, 4vw, 44px); line-height: 1.15 }
.hd-specimen .sample-body { font-family: 'HD Figtree', sans-serif; font-size: 15px; line-height: 1.65; color: var(--hd-ink); max-width: 58ch }
.hd-specimen-cap { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; flex-wrap: wrap }
.hd-specimen-cap b { font-size: 13px; font-weight: 600 }
.hd-specimen-cap .mono { font-size: 10px; color: var(--faint); letter-spacing: .08em }

/* ————————————————— social ————————————————— */
.hd-soc-summary { overflow-x: auto }
.hd-soc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px }
.hd-soc-day { background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px; min-height: 96px; padding: 8px; display: flex; flex-direction: column; gap: 7px }
.hd-soc-day.out { background: transparent; border-color: transparent }
.hd-soc-day.today { border-color: var(--blue) }
.hd-soc-post { border-radius: 7px; overflow: hidden; border: 1px solid var(--line-soft); text-align: left; padding: 0; display: block; background: var(--card) }
.hd-soc-post img { width: 100%; height: 58px; object-fit: cover; display: block }
.hd-soc-post .cap { padding: 7px 8px }
.hd-soc-post .cap p { font-size: 10.5px; line-height: 1.45; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px }
.hd-soc-tags { display: flex; align-items: center; gap: 5px }
.chip.hd-posted { background: var(--blue-tint); color: var(--blue-dark) }
.chip.hd-scheduled { background: #EBEFF3; color: #59626F }
.chip.hd-draft { background: var(--card); color: var(--mut); border: 1px dashed var(--line) }
.hd-plat { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .08em; background: var(--deep); color: #fff; border-radius: 4px; padding: 2px 4px }
.hd-soc-eng { display: flex; gap: 9px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); padding: 0 8px 7px }
.hd-drafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 16px }
.hd-draft-card { border: 1px dashed var(--line); border-radius: var(--r-sm); overflow: hidden }
.hd-draft-card img { width: 100%; height: 110px; object-fit: cover; display: block }
.hd-draft-card .cap { padding: 10px 12px }
.hd-draft-card .cap .when { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--steel); text-transform: uppercase }
.hd-draft-card .cap p { font-size: 12px; color: var(--mut); line-height: 1.5; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
@media (max-width: 640px) {
  .hd-soc-cal { grid-template-columns: repeat(2, 1fr) }
  .hd-soc-cal .hd-cal-dow, .hd-soc-day.out { display: none }
}

/* ————————————————— ads ————————————————— */
.hd-funnel { display: grid; margin-top: 8px }
.hd-funnel-stage { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 15px 0; border-top: 1px solid var(--line-soft); align-items: baseline }
.hd-funnel-stage:first-child { border-top: 0 }
.hd-funnel-stage h4 { font-size: 14.5px; font-weight: 600 }
.hd-funnel-stage .sub { font-size: 12.5px; color: var(--mut); margin-top: 2px }
.hd-funnel-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 600 }
.hd-funnel-conv { grid-column: 1 / -1; margin-top: 8px }
.hd-funnel-conv .lbl { font-size: 12.5px; color: var(--mut) }
.hd-funnel-conv .lbl .mono { font-weight: 600; color: var(--ink); font-size: 12.5px }
.hd-funnel-conv .bar { height: 6px; border-radius: 999px; background: var(--line-soft); margin-top: 6px; overflow: hidden }
.hd-funnel-conv .bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue) }

.hd-roas { background: var(--deep); border-radius: var(--r-lg); box-shadow: var(--sh-float); color: #fff; padding: 26px 28px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap }
.hd-roas .hd-kicker { color: #FDBA8C } .hd-roas .hd-kicker::before { background: var(--orange) }
.hd-roas-big { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(30px, 4.5vw, 44px); font-weight: 600; letter-spacing: -.01em; color: #FF8B4A; margin-top: 8px }
.hd-roas-sub { color: #A8CCE4; font-size: 13px; margin-top: 8px; max-width: 44ch }
.hd-roas-pill { margin-left: auto; text-align: right }
.hd-roas-x { background: #FFFFFF14; border: 1px solid #FFFFFF24; border-radius: var(--r-md); padding: 14px 18px; font-family: var(--mono) }
.hd-roas-x b { font-size: 22px; font-weight: 600; color: #FF8B4A }
.hd-roas-x span { font-size: 11px; color: #A8CCE4; display: block; margin-top: 3px }

.hd-contain { display: grid; gap: 14px; margin-top: 14px }
.hd-contain-row .top { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px }
.hd-contain-row .top .n { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 600 }
.hd-contain-row .bar { height: 9px; border-radius: 999px; background: var(--line-soft); margin-top: 6px; overflow: hidden }
.hd-contain-row .bar i { display: block; height: 100%; border-radius: 999px }
.hd-contain-row.all .bar i { background: #B9C4CE }
.hd-contain-row.direct .bar i { background: var(--blue) }
.hd-contain-row.paid .bar i { background: var(--orange) }

.hd-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px }
.hd-account { display: flex; align-items: center; gap: 12px; background: var(--canvas); border-radius: var(--r-md); padding: 15px 17px }
.hd-account b { font-size: 14px; font-weight: 600 }
.hd-account .chip { margin-left: auto }
@media (max-width: 640px) { .hd-accounts { grid-template-columns: 1fr } }

.hd-camp-name b { font-size: 13.5px }
.hd-camp-exp { background: var(--canvas) }
.hd-camp-exp td { padding: 14px 12px }

.hd-creatives { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 16px }
.hd-creative { border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-card); background: var(--hd-linen); color: var(--hd-ink); font-family: 'HD Figtree', sans-serif }
.hd-creative img { width: 100%; height: 160px; object-fit: cover; display: block }
.hd-creative .cap { padding: 14px 16px }
.hd-creative .cap .kick { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--hd-ink-soft) }
.hd-creative .cap h4 { font-family: 'HD Marcellus', serif; font-weight: 400; font-size: 17px; margin-top: 6px; line-height: 1.25 }
.hd-creative .cap p { font-size: 11.5px; line-height: 1.55; color: var(--hd-ink-soft); margin-top: 6px }
.hd-creative .cta { display: inline-block; background: var(--hd-coral); color: #fff; border-radius: 999px; padding: 6px 13px; font-size: 11px; font-weight: 600; margin-top: 11px }
.hd-creative.story { position: relative; aspect-ratio: 9 / 14; color: #fff }
.hd-creative.story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hd-creative.story .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, #00000005 30%, #000000B8) }
.hd-creative.story .cap { position: absolute; left: 0; right: 0; bottom: 0 }
.hd-creative.story .cap .kick { color: #FFFFFFB8 }
.hd-creative.story .cap p { color: #FFFFFFDB }
.hd-creative-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 8px }

/* ————————————————— responsive floor ————————————————— */
@media (max-width: 640px) {
  /* The demo's mono figures run wider than the shell's display numerals; on a
     phone the four glass tiles need one step down to stay inside their cells.
     Scoped to body.hd-on, which exists only while the demo client is open. */
  body.hd-on .tile .v { font-size: 26px }
  body.hd-on .tile .v small { font-size: 14px }
  .hd-tile-v { font-size: 19px }
  .hd-mtd-big { font-size: 28px }
  .hd-sig { gap: 16px }
  .hd-sig-time { font-size: 38px }
  .hd-act-row { grid-template-columns: 72px 1fr; grid-auto-rows: auto }
  .hd-act-right { grid-column: 2; justify-content: flex-start }
  /* Five tabs do not fit a phone as equal fifths; the pill scrolls sideways. */
  #view-hd-chat .chat-top .tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
  #view-hd-chat .chat-top .tabs::-webkit-scrollbar { display: none }
  #view-hd-chat .chat-top .tabs button { flex: none }
  .hd-conv { grid-template-columns: 1fr }
  .hd-conv-chan { grid-template-columns: 1fr; gap: 12px }
  .hd-chan-row { min-width: 0 }
  .hd-cal { gap: 3px }
  .hd-day { min-height: 58px; padding: 6px 6px 7px }
  /* Seven honest cells at phone width: the bar and the percentage stay; the
     nightly ADR moves into the day detail card underneath. */
  .hd-day-figs { flex-direction: column; gap: 1px }
  .hd-day-figs span + span { display: none }
  .hd-day-pick { display: none }
  .hd-tiles { grid-template-columns: repeat(2, 1fr) }
  .hd-call-side, .hd-call-transcript { padding: 20px }
  .hd-worth-v { font-size: 21px }
  .hd-msgs { max-height: 380px }
  .hd-msg { max-width: 92% }
}

/* ————————————————— knowledge / guardrails / misc ————————————————— */
.hd-select {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px; appearance: auto;
}
.hd-select:focus { background: var(--card); border-color: var(--blue); outline: none }
.hd-kb-cat { color: var(--faint); margin-top: 10px }
.hd-kb-count { color: var(--steel) }
.hd-kb-items, section .hd-kb-items { display: grid; gap: 8px; margin-top: 10px }
.chip.hd-sev-low { background: #EBEFF3; color: #59626F }
.chip.hd-sev-medium { background: var(--blue-tint); color: var(--blue-dark) }
.chip.hd-sev-high { background: var(--orange-tint); color: var(--orange-deep) }
.chip.hd-sev-critical { background: #B42318; color: #fff }
.hd-brand-lbl { color: var(--faint); margin-top: 18px }
.hd-brand-copy { max-width: 60ch; margin-top: 10px; font-size: 13.5px; line-height: 1.65 }
.hd-lockup-in { text-align: center; display: grid; gap: 10px; justify-items: center }
.hd-lockup-word { font-size: 24px }
.hd-lockup-row { display: inline-flex; align-items: center; gap: 12px }
.hd-lockup-monogram { font-size: 40px; border-bottom: 1px solid currentColor; padding-bottom: 10px }
.hd-lockup-sub { margin-top: 2px }
.hd-soc-ico { width: 11px; height: 11px; stroke: currentColor; vertical-align: -1px; margin-right: 3px }
.hd-soc-eng span { display: inline-flex; align-items: center }
.hd-soc-hashtags { font-size: 9.5px; color: var(--steel); letter-spacing: .02em; margin-top: 6px; overflow-wrap: anywhere }
a.hd-site-url { text-decoration: underline; text-decoration-color: #1233C840 }
a.hd-site-url:hover { text-decoration-color: currentColor }
a.mini-btn { text-decoration: none; display: inline-flex; align-items: center }
.hd-state.card + .hd-state.card { margin-top: 0 }
.card .hd-state { box-shadow: none; border-radius: var(--r-md); padding: 16px 18px; margin: 14px 0 }

/* ————————————————— ask ely — the owner's line —————————————————
   A persistent pill on every demo view, bottom-right in deep glass — never
   orange, so it cannot compete with a view's one primary action — opening a
   right-hand sheet (a bottom sheet at the thumb on phones, riding above the
   docked rail). White on --deep glass holds ≥13:1. */
.hd-ask-fab {
  position: fixed; right: 26px; bottom: 24px; z-index: 55;
  display: none; align-items: center; gap: 9px;
  padding: 12px 19px 12px 15px; border-radius: 999px;
  background: rgba(6, 38, 59, .88); color: #fff;
  border: 1px solid #FFFFFF2E;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 26px #06263B47, 0 2px 6px #0A0E141F;
  transition: transform .22s var(--ease), background .22s, box-shadow .22s;
}
body.hd-on .hd-ask-fab { display: inline-flex }
.hd-ask-fab:hover {
  background: rgba(6, 38, 59, .97); transform: translateY(-2px);
  box-shadow: 0 14px 32px #06263B52, 0 3px 8px #0A0E1421;
}
.hd-ask-fab .ico { width: 16px; height: 16px; stroke: #9EC4FF; flex-shrink: 0 }

.hd-ask-scrim {
  position: fixed; inset: 0; background: rgba(6,38,59,.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 60;
}
.hd-ask-scrim.on { opacity: 1; pointer-events: auto }
.hd-ask-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 94vw);
  background: var(--card); box-shadow: var(--sh-float); z-index: 70;
  transform: translateX(105%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.hd-ask-sheet.on { transform: none }
.hd-ask-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 22px 22px 15px; border-bottom: 1px solid var(--line-soft);
}
.hd-ask-hd h3 { font-family: var(--disp); font-size: 21px; font-weight: 700; letter-spacing: -.02em }
.hd-ask-sub {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 5px;
}
.hd-ask-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: #F0F3F6; display: grid; place-items: center; flex-shrink: 0; transition: background .2s;
}
.hd-ask-close:hover { background: var(--line) }
.hd-ask-close svg { width: 15px; height: 15px; stroke: var(--mut) }
.hd-ask-msgs { max-height: none; padding: 18px 22px; overscroll-behavior: contain }
.hd-ask-foot { padding: 0 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft) }
.hd-ask-foot .hd-chat-suggest { padding: 12px 0 2px }
.hd-ask-foot .hd-chat-form { border-top: 0; padding-top: 12px }
.hd-ask-foot .hd-chat-form input:disabled { color: var(--faint); background: #EFF2F5 }

@media (max-width: 640px) {
  .hd-ask-fab { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)) }
  .hd-ask-sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 82vh; max-height: 88vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%);
  }
  .hd-ask-sheet.on { transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .hd-call-orb.ringing, .hd-call-orb.talking, .hd-typing i, .hd-agent-orb { animation: none }
}