/* The Home Concierge - Day Builder
   Ported from the approved prototype. All rules are scoped under .hc-db so
   nothing leaks into Elementor, Astra or the XPro header/footer.
   Design tokens mirror the active "Concierge Navy" design system. */

.hc-db {
  --navy: #18304C;
  --navy-dark: #0F1F33;
  --gold: #A37830;
  --gold-light: #FBCAA2;
  --light1: #E8EDF2;
  --light2: #F3F5F7;
  --green: #2E7D32;
  --red: #B23A3A;
  --border: #D7DDE3;
  color: #1E2830;
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
}
.hc-db h1, .hc-db h2, .hc-db h3, .hc-db h4 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
}
.hc-db p { margin: 0; }
.hc-db button { font-family: inherit; }
.hc-db .hc-db-page { max-width: 1080px; margin: 0 auto; }
.hc-db .hidden { display: none !important; }
.hc-db-modal-open { overflow: hidden; }
.hc-db .hc-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  border-radius: 50%; animation: hc-spin 0.7s linear infinite; vertical-align: -2px;
}
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hc-db * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
.hc-db .hc-skeleton {
  background: linear-gradient(90deg, #E8EDF2 25%, #F3F5F7 37%, #E8EDF2 63%);
  border-radius: 10px; min-height: 54px;
}

.hc-db {
    --navy: #18304C;
    --navy-dark: #0f1f33;
    --gold: #A37830;
    --gold-light: #FBCAA2;
    --light1: #E8EDF2;
    --light2: #F3F5F7;
    --green: #2E7D32;
    --red: #B23A3A;
    --border: #d7dde3;
  }
.hc-db * { box-sizing: border-box; }
.hc-db .page { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }
.hc-db /* HEADER */
  .top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 0; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
.hc-db .pill-btn {
    font-size: 12.5px; color: #6B7784; background: #fff; border: 1px solid var(--border);
    padding: 8px 14px; border-radius: 20px; cursor: pointer; font-weight: 600;
  }
.hc-db h1, .hc-db h2, .hc-db h3, .hc-db p { margin: 0; }
.hc-db /* LAYOUT */
  .builder-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 780px) {

.hc-db .builder-layout { grid-template-columns: 1fr; }
.hc-db .ticket-col { order: -1; }
  
}

.hc-db .panel {
    background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px;
    box-shadow: 0 6px 24px rgba(24,48,76,0.06);
  }
.hc-db .panel h2 { font-size: 21px; color: var(--navy); margin-bottom: 6px; }
.hc-db .panel .hint { font-size: 13px; color: #6B7784; margin-bottom: 18px; }
.hc-db /* CAPACITY METER */
  .capacity { margin-bottom: 16px; }
.hc-db .capacity-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 6px; }
.hc-db .capacity-label { font-size: 12.5px; color: #fff; font-weight: 700; }
.hc-db .capacity-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 10px; border-radius: 12px; font-weight: 800; }
.hc-db .capacity-tag.open { background: rgba(255,255,255,0.12); color: #9ed6a0; }
.hc-db .capacity-tag.nearly { background: rgba(255,255,255,0.12); color: var(--gold-light); }
.hc-db .capacity-tag.complete { background: rgba(255,255,255,0.12); color: #9ed6a0; }
.hc-db .capacity-tag.wow { background: rgba(255,255,255,0.12); color: var(--gold-light); }
.hc-db .capacity-tag.over { background: rgba(255,255,255,0.12); color: #f0a3a3; }
.hc-db .capacity-track { height: 9px; border-radius: 6px; background: rgba(255,255,255,0.14); overflow: hidden; }
.hc-db .capacity-fill { height: 100%; border-radius: 6px; transition: width 0.25s ease; background: #9ed6a0; }
.hc-db .capacity-fill.nearly { background: var(--gold-light); }
.hc-db .capacity-fill.over { background: #f0a3a3; }
.hc-db /* CATEGORY RAIL */
  .cat-rail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hc-db .cat-chip {
    display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); background: #fff;
    border-radius: 20px; padding: 8px 14px; cursor: pointer; font-size: 12.5px; color: var(--navy-dark); font-weight: 600;
  }
.hc-db .cat-chip:hover { border-color: var(--gold); }
.hc-db .cat-chip.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.hc-db .cat-count {
    background: var(--gold); color: #fff; border-radius: 10px; font-size: 10.5px; padding: 1px 7px; font-weight: 800;
  }
.hc-db .cat-chip.active .cat-count { background: var(--gold-light); color: var(--navy-dark); }
.hc-db /* OPTIONS */
  .option-panel { background: var(--light2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 18px; max-height: 520px; overflow-y: auto; }
.hc-db .option-title { font-size: 12px; color: #6B7784; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; font-weight: 700; position: sticky; top: 0; background: var(--light2); padding-bottom: 4px; }
.hc-db .option-note { font-size: 12px; color: #6B7784; margin: -4px 0 12px; line-height: 1.4; }
.hc-db .option-row {
    padding: 12px 4px; border-bottom: 1px solid var(--border); font-size: 14px;
  }
.hc-db .option-row:last-child { border-bottom: none; }
.hc-db .option-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-db .option-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hc-db .option-credits { font-size: 11.5px; color: #6B7784; font-weight: 700; }
.hc-db .option-details { font-size: 12px; color: #6B7784; line-height: 1.45; margin-top: 5px; padding-right: 90px; }
.hc-db .option-supplies { font-size: 11.5px; color: var(--navy-dark); margin-top: 5px; }
.hc-db .option-supplies .supplies-label { color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; margin-right: 4px; }
.hc-db /* STEPPER */
  .stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hc-db .stepper-btn {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border); background: #fff; color: var(--navy); cursor: pointer; font-size: 15px; font-weight: 700;
  }
.hc-db .stepper-btn:hover { border-color: var(--gold); }
.hc-db .stepper-btn.add { background: var(--navy); border-color: var(--navy); color: #fff; }
.hc-db .stepper-qty { font-size: 13px; min-width: 16px; text-align: center; font-weight: 800; color: var(--navy); }
.hc-db /* CUSTOM TASK */
  .custom-row { display: flex; gap: 8px; }
.hc-db .custom-row input {
    flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px;
  }
.hc-db .custom-row button {
    border: none; background: var(--navy); color: #fff; border-radius: 8px; padding: 0 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  }
.hc-db .custom-row button:disabled { opacity: 0.4; cursor: not-allowed; }
.hc-db textarea.notes-field {
    width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; font-family: inherit; font-size: 14px; background: var(--light2); resize: vertical;
  }
.hc-db textarea.notes-field:focus, .hc-db .field-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.hc-db .actions-row { display: flex; justify-content: space-between; margin-top: 22px; }
.hc-db .btn { font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 24px; padding: 12px 24px; cursor: pointer; border: none; }
.hc-db .btn-primary { background: var(--navy); color: #fff; }
.hc-db .btn-primary:disabled { background: #9AA5B1; cursor: not-allowed; }
.hc-db .unlock-hint { font-size: 12px; color: #6B7784; align-self: center; }
.hc-db .btn-ghost { background: transparent; color: #6B7784; border: 1.5px solid var(--border); }
.hc-db .error-box { background: #faeceb; border: 1px solid var(--red); color: #8a2e2e; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.hc-db /* WEEK NAV / DAY GRID */
  .week-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hc-db .week-nav button { background: var(--light2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; color: var(--navy); font-weight: 700; }
.hc-db .week-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.hc-db .week-label { font-size: 13px; color: #6B7784; font-weight: 600; }
.hc-db .day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 560px) {

.hc-db .day-grid { grid-template-columns: repeat(4, 1fr); } 
}

.hc-db .day-cell { border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 10px 4px; text-align: center; cursor: pointer; font-size: 12px; }
.hc-db .day-cell .dow { color: #6B7784; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.hc-db .day-cell .num { font-size: 19px; font-weight: 800; margin: 2px 0; color: var(--navy); }
.hc-db .day-cell.selected { border-color: var(--gold); background: var(--light2); box-shadow: 0 0 0 1px var(--gold) inset; }
.hc-db .day-cell.taken { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.hc-db .day-cell:not(.taken):hover { border-color: var(--gold); }
.hc-db /* CONTACT FORM */
  .field { margin-bottom: 14px; }
.hc-db .field label { display: block; font-size: 12px; color: #6B7784; margin-bottom: 5px; font-weight: 700; }
.hc-db .field-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.hc-db .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {

.hc-db .row-2 { grid-template-columns: 1fr; } 
}

.hc-db .coffee-hint { font-size: 11px; color: #6B7784; margin-top: 5px; font-style: italic; }
.hc-db /* TICKET */
  .ticket-col { position: sticky; top: 20px; }
.hc-db .ticket {
    background: var(--navy); color: #fff; border-radius: 14px; padding: 22px 22px 26px; position: relative; overflow: hidden;
    box-shadow: 0 14px 34px rgba(15,31,51,0.35);
  }
.hc-db .ticket::before { content: ""; position: absolute; left: 0; right: 0; bottom: 78px; height: 0; border-bottom: 1px dashed rgba(255,255,255,0.25); }
.hc-db .ticket-eyebrow { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px; font-weight: 700; }
.hc-db .ticket-row { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.hc-db .ticket-row .k { color: rgba(255,255,255,0.55); }
.hc-db .ticket-row .v { text-align: right; max-width: 60%; }
.hc-db .ticket-list { margin-top: 10px; max-height: 320px; overflow-y: auto; }
.hc-db .ticket-item-row {
    font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
  }
.hc-db .ticket-item-main { min-width: 0; }
.hc-db .ticket-item-main .cat { color: rgba(255,255,255,0.5); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 2px; }
.hc-db .ticket-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hc-db .ticket-item-credits { font-size: 11px; color: rgba(255,255,255,0.6); white-space: nowrap; font-weight: 700; }
.hc-db .t-stepper { display: flex; align-items: center; gap: 5px; }
.hc-db .t-stepper-btn {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.35); background: transparent; color: #fff; cursor: pointer; font-size: 13px; font-weight: 700;
  }
.hc-db .t-stepper-btn.add { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-dark); }
.hc-db .t-stepper-qty { font-size: 12px; min-width: 14px; text-align: center; font-weight: 800; color: #fff; }
.hc-db .t-remove-btn {
    border: none; background: rgba(255,255,255,0.12); border-radius: 50%; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; flex-shrink: 0; font-size: 11px;
  }
.hc-db .ticket-empty-note { font-size: 12.5px; color: rgba(255,255,255,0.45); font-style: italic; margin: 4px 0 0; }
.hc-db /* CONFIRMATION */
  .confirm-wrap { text-align: center; padding: 10px 0 4px; }
.hc-db .confirm-wrap h2 { font-size: 26px; margin: 14px 0 8px; color: var(--navy); }
.hc-db .confirm-wrap p { color: #6B7784; max-width: 420px; margin: 0 auto 20px; font-size: 14px; line-height: 1.55; }
.hc-db .confirm-icon {
    width: 54px; height: 54px; border-radius: 50%; background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 26px;
  }
.hc-db .confirm-price { font-size: 20px; font-weight: 800; color: var(--gold); margin-bottom: 10px; }
.hc-db /* MODAL */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(15,31,51,0.55); display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; z-index: 50; overflow-y: auto;
  }
.hc-db .modal-overlay.center { align-items: center; }
.hc-db .modal { background: #fff; border-radius: 14px; max-width: 780px; width: 100%; padding: 24px; border: 1px solid var(--border); }
.hc-db .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.hc-db .modal-head h3 { font-size: 19px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.hc-db .modal-note { font-size: 12px; color: #6B7784; margin: -8px 0 16px; }
.hc-db .ledger-row { display: grid; grid-template-columns: 90px 1fr 90px 90px 100px; gap: 10px; font-size: 12.5px; padding: 10px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 680px) {

.hc-db .ledger-row { grid-template-columns: 1fr; gap: 2px; } 
}

.hc-db .ledger-coffee { display: block; color: var(--gold); font-size: 11.5px; margin-top: 3px; }
.hc-db /* CONFIRM MODAL (small) */
  .confirm-modal { max-width: 460px; text-align: center; padding: 32px 28px; }
.hc-db .confirm-modal-icon {
    width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #fff;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 20px;
  }
.hc-db .confirm-modal-title { font-size: 19px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.hc-db .confirm-modal-body { color: var(--navy-dark); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.hc-db .confirm-modal-actions { display: flex; justify-content: center; gap: 10px; }
.hc-db .hidden { display: none !important; }
.hc-db /* LOOKUP */
  .lookup-modal { max-width: 420px; }
.hc-db .lookup-hint { font-size: 12.5px; color: #6B7784; margin-bottom: 12px; }
.hc-db .lookup-empty { font-size: 13px; color: #6B7784; margin-top: 14px; }
.hc-db .lookup-result { margin-top: 18px; padding: 18px; border-radius: 12px; background: var(--light2); border: 1px solid var(--border); }
.hc-db .lookup-result-number { font-size: 17px; font-weight: 800; color: var(--gold); margin-bottom: 12px; }


/* =========================================================================
   MULTI-DAY: the plan panel, the over-a-day notice, and picked days
   ========================================================================= */

.multiday-notice {
  border: 1.5px solid var(--gold);
  background: var(--light2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
}

#hcDayPlan { margin: 0 0 18px; }

.plan-head h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}
.plan-head p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #4A5560;
  line-height: 1.5;
}

.plan-day {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.plan-day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.plan-day-head strong { color: var(--navy); font-size: 14px; }
.plan-trades {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold);
  font-weight: 700;
}
.plan-credits { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--navy); }
.plan-date { font-size: 12px; color: #6B7784; margin: 2px 0 8px; }

.plan-tasks { list-style: none; margin: 0; padding: 0; }
.plan-tasks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.plan-task-label { flex: 1; color: #1E2830; }
.plan-task-cr { color: #6B7784; font-size: 12px; white-space: nowrap; }
.plan-move {
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
.plan-room { margin-top: 8px; font-size: 12px; color: var(--green); }
.plan-total {
  text-align: right;
  font-size: 13px;
  color: var(--navy);
  padding-top: 4px;
}

/* A picked day reads as picked at a glance, and says which day it is. */
.day-cell { position: relative; }
.day-cell.selected {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.day-cell.selected .num,
.day-cell.selected .dow { color: #fff; }
.day-cell.selected div { color: rgba(255,255,255,0.85) !important; }
.day-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
/* =========================================================================
   MULTI-DAY REVISIONS, 14 Aug
   ========================================================================= */

/* The calendar step shows the calendar. The ticket is not repeated there. */
#step-day .ticket-col { display: none; }
#step-day .builder-layout { grid-template-columns: 1fr; }

/* The over-a-day message and the prioritize caveat are sentences, not pills,
   so they get room to breathe instead of being squeezed into a tiny uppercase
   tag next to the credit count. */
.capacity-tag.over,
.capacity-tag.wow {
  flex: 1 1 100%;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 10px;
}
.capacity-tag.over {
  background: rgba(163,120,48,0.22);
  color: var(--gold-light);
}
.capacity-tag.wow {
  background: rgba(255,255,255,0.10);
  color: var(--gold-light);
}

/* The day plan now sits under the calendar rather than above it. */
#hcDayPlan { margin: 18px 0 0; }

/* Two weeks at a time. Keep the rows reading as weeks on wider screens. */
.day-grid { row-gap: 10px; }
/* The details step does not repeat the ticket either. */
#step-details .ticket-col { display: none; }
#step-details .builder-layout { grid-template-columns: 1fr; }

/* =========================================================================
   PROBLEM LAYER: search, problem cards, and the one-question-at-a-time modal
   ========================================================================= */

.hc-search-wrap { position: relative; margin-bottom: 6px; }
.hc-search {
  width: 100%; font-family: inherit; font-size: 16px; padding: 15px 16px;
  border: 1.5px solid var(--border); border-radius: 999px; outline: none;
  color: #1E2830; background: #fff;
}
.hc-search:focus { border-color: var(--gold); }
.hc-results {
  position: absolute; left: 0; right: 0; top: 58px; background: #fff;
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 6px 24px rgba(24,48,76,0.12); z-index: 30; overflow: hidden;
}
.hc-result { padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--light2); }
.hc-result:last-child { border-bottom: none; }
.hc-result:hover { background: var(--light2); }
.hc-result b { display: block; font-size: 14.5px; color: var(--navy); }
.hc-result span { font-size: 12px; color: #6B7784; }

.hc-sec-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: #6B7784; font-weight: 700; margin: 22px 0 10px;
}
.hc-pcats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .hc-pcats { grid-template-columns: repeat(2, 1fr); } }
.hc-pcat {
  border: 1.5px solid var(--border); background: #fff; border-radius: 14px;
  padding: 13px 12px; cursor: pointer; text-align: left; font-family: inherit;
}
.hc-pcat:hover { border-color: var(--gold); }
.hc-pcat b { display: block; font-size: 13.5px; color: var(--navy); }
.hc-pcat span { font-size: 11.5px; color: #6B7784; }

.hc-crumb { font-size: 12.5px; color: #6B7784; cursor: pointer; display: inline-block; margin: 4px 0 8px; }
.hc-crumb:hover { color: var(--gold); }
.hc-pcat-title { font-size: 17px; color: var(--navy); margin: 0 0 4px; }
.hc-plist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hc-pitem {
  border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px;
  cursor: pointer; background: #fff;
}
.hc-pitem:hover { border-color: var(--gold); }
.hc-pitem b { font-size: 14.5px; color: var(--navy); }
.hc-pitem span { display: block; font-size: 12px; color: #6B7784; margin-top: 2px; }

.hc-decline {
  border: 1.5px solid var(--gold); background: #FFF9F0; border-radius: 14px;
  padding: 13px 15px; margin: 10px 0 0;
}
.hc-decline.safety { border-color: #B23A3A; background: #FFF3F3; }
.hc-decline b { display: block; margin-bottom: 3px; color: var(--navy); }
.hc-decline.safety b { color: #B23A3A; }
.hc-decline p { margin: 0; font-size: 13.5px; color: #4A5560; }

.hc-all-services { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 14px; }
.hc-all-services > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--navy);
  list-style: none; padding: 6px 0;
}
.hc-all-services > summary::-webkit-details-marker { display: none; }
.hc-all-services > summary::before { content: "+ "; color: var(--gold); font-weight: 800; }
.hc-all-services[open] > summary::before { content: "- "; }

/* one question at a time */
.hc-overlay {
  position: fixed; inset: 0; background: rgba(15,31,51,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.hc-modal {
  background: #fff; border-radius: 20px; max-width: 580px; width: 100%;
  padding: 26px 26px 22px; box-shadow: 0 18px 50px rgba(15,31,51,.28);
  max-height: 88vh; overflow: auto;
}
.hc-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.hc-dot { width: 22px; height: 4px; border-radius: 999px; background: var(--light2); }
.hc-dot.done { background: var(--gold); }
.hc-dot.now { background: var(--navy); }
.hc-modal h3 { font-size: 21px; line-height: 1.32; color: var(--navy); margin: 0; }
.hc-help { font-size: 13.5px; color: #6B7784; margin-top: 7px; }

.hc-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.hc-opt {
  border: 2px solid var(--border); border-radius: 14px; padding: 15px 17px;
  cursor: pointer; background: #fff; display: flex; gap: 12px; align-items: center;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.hc-opt:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(24,48,76,.12); }
.hc-opt:active { transform: translateY(0); }
.hc-lab { font-weight: 700; font-size: 15.5px; color: var(--navy); display: block; }
.hc-hint { font-size: 12.5px; color: #6B7784; display: block; font-weight: 500; margin-top: 2px; }
.hc-arrow { margin-left: auto; color: var(--border); font-size: 20px; line-height: 1; }
.hc-opt:hover .hc-arrow { color: var(--gold); }

.hc-modal-foot { display: flex; gap: 10px; margin-top: 20px; align-items: center; flex-wrap: wrap; }
.hc-spacer { margin-left: auto; }
.hc-note {
  margin-top: 14px; font-size: 13.5px; background: var(--light2);
  border-left: 3px solid var(--gold); padding: 11px 13px; border-radius: 0 8px 8px 0; color: #4A5560;
}
.hc-note.stop { border-left-color: #B23A3A; }
.hc-lines { margin-top: 16px; }
.hc-rline { display: flex; gap: 10px; font-size: 14px; padding: 7px 0; align-items: baseline; border-bottom: 1px solid var(--light2); }
.hc-rline:last-of-type { border-bottom: none; }
.hc-cr { margin-left: auto; color: #6B7784; white-space: nowrap; }
.hc-rtotal { display: flex; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--light2); font-weight: 800; color: var(--navy); font-size: 15.5px; }
.hc-rtotal .hc-cr { margin-left: auto; color: var(--navy); }

/* =========================================================================
   BUILD STEP, restructured 14 Aug: brand line, big search, full-width credit
   bar, celebration, then the day building up at the foot of the page.
   ========================================================================= */

.hc-head { margin-bottom: 16px; }
.hc-brand {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--gold); font-weight: 800;
}
.hc-day-title { font-size: 30px; line-height: 1.15; color: var(--navy); margin: 4px 0 0; font-weight: 800; }
@media (max-width: 600px) { .hc-day-title { font-size: 24px; } }

/* the search box is the primary thing on the page */
.hc-search { font-size: 17px; padding: 17px 20px; border-width: 2px; box-shadow: 0 6px 20px rgba(24,48,76,.06); }
.hc-search-wrap { margin-bottom: 0; }

/* the credit bar runs the full width */
#hcCapacity {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  border-radius: 16px; padding: 16px 20px; margin: 18px 0 0;
  box-shadow: 0 10px 26px rgba(15,31,51,.22);
}
#hcCapacity:empty { display: none; }

/* finishing a day should feel like finishing something */
.hc-celebrate {
  display: flex; gap: 14px; align-items: center;
  background: linear-gradient(135deg, #EAF6EA, #F7FBF7);
  border: 1.5px solid var(--green); border-radius: 16px;
  padding: 16px 18px; margin-top: 12px;
  animation: hcPop .42s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes hcPop {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.hc-celebrate-mark {
  width: 44px; height: 44px; border-radius: 999px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hc-celebrate-body b { display: block; font-size: 17px; color: var(--navy); font-weight: 800; }
.hc-celebrate-count { display: block; font-size: 13px; color: var(--green); font-weight: 700; margin-top: 1px; }
.hc-celebrate-body p { margin: 3px 0 0; font-size: 13.5px; color: #4A5560; }

/* categories are secondary: same size every one, icon on top */
.hc-sec-title { margin-top: 26px; }
.hc-pcats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .hc-pcats { grid-template-columns: repeat(2, 1fr); } }
.hc-pcat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 98px; padding: 14px 10px; text-align: center;
  border: 1px solid var(--border); background: #fff; border-radius: 14px;
  cursor: pointer; font-family: inherit;
  transition: border-color .12s, background .12s;
}
.hc-pcat:hover { border-color: var(--gold); background: #FFFDF9; }
.hc-pcat-icon { color: var(--gold); display: flex; align-items: center; justify-content: center; }
.hc-pcat-icon svg { width: 22px; height: 22px; }
.hc-pcat-label { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.hc-pcat-count { font-size: 11px; color: #6B7784; }

/* the day builds up at the foot of the page, on a light card */
.hc-day-list {
  margin-top: 26px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px; box-shadow: 0 6px 24px rgba(24,48,76,.06);
}
.hc-day-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.hc-day-eyebrow { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.hc-day-count { font-size: 12px; color: #6B7784; }
.hc-day-empty {
  margin-top: 26px; text-align: center; color: #6B7784; font-size: 13.5px;
  background: #fff; border: 1px dashed var(--border); border-radius: 16px; padding: 28px 20px;
}

/* those rows were written for the navy ticket; they are on white now */
.hc-day-list .ticket-list { max-height: none; margin-top: 6px; overflow: visible; }
.hc-day-list .ticket-item-row { border-bottom: 1px solid var(--light2); font-size: 13.5px; padding: 11px 0; }
.hc-day-list .ticket-item-row:last-child { border-bottom: none; }
.hc-day-list .ticket-item-main { color: #1E2830; }
.hc-day-list .ticket-item-main .cat { color: #6B7784; }
.hc-day-list .ticket-item-credits { color: #6B7784; }
.hc-day-list .t-stepper-btn,
.hc-day-list .t-remove-btn { color: var(--navy); border-color: var(--border); background: #fff; }
.hc-day-list .t-stepper-qty { color: var(--navy); }


.hc-day-sub { margin: 6px 0 0; font-size: 14px; color: #4A5560; }

/* HC UTILITY ROW FOOT */
.hc-db .hc-db-utility { display: flex; gap: 10px; }
.hc-db .hc-db-utility-foot {
  justify-content: center; flex-wrap: wrap; margin: 46px auto 0;
  padding-top: 22px; border-top: 1px solid var(--border); max-width: 720px;
}
.hc-db .hc-db-utility-foot .pill-btn { font-size: 12px; padding: 7px 15px; }

/* HC CREDIT BAR AND CATEGORY BUTTONS */
/* The credit bar is information, not a banner. No card, no navy slab. */
#hcCapacity {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 20px 0 0 !important;
}
.hc-db .capacity-label { color: var(--navy) !important; font-size: 13px; }
.hc-db .capacity-track { background: var(--light1) !important; height: 8px; }
.hc-db .capacity-fill { background: var(--green) !important; }
.hc-db .capacity-fill.nearly { background: var(--gold) !important; }
.hc-db .capacity-fill.over { background: var(--red) !important; }

/* Tags read on white now, so the translucent-on-navy tints are replaced. */
.hc-db .capacity-tag.open,
.hc-db .capacity-tag.complete { background: #E9F4EA !important; color: #2E7D32 !important; }
.hc-db .capacity-tag.nearly,
.hc-db .capacity-tag.wow { background: #FBF2E4 !important; color: #8A5A2B !important; }
.hc-db .capacity-tag.over { background: #FAECEC !important; color: #A03535 !important; }

/* Category buttons: outlined in navy, never filled. Astra styles every bare
   <button> navy, which is what was filling these in, so the resets are explicit. */
.hc-db .hc-pcat,
.hc-db button.hc-pcat {
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 14px !important;
  color: var(--navy) !important;
  box-shadow: none !important;
  padding: 14px 10px !important;
  text-shadow: none !important;
}
.hc-db .hc-pcat:hover,
.hc-db button.hc-pcat:hover {
  background: #F4F7FB !important;
  border-color: var(--navy-dark) !important;
  color: var(--navy) !important;
}
.hc-db .hc-pcat .hc-pcat-label { color: var(--navy) !important; }
.hc-db .hc-pcat .hc-pcat-count { color: #6B7784 !important; }
.hc-db .hc-pcat .hc-pcat-icon { color: var(--gold) !important; }

/* HC COMPACT BUILD STEP */
/* Search, credit bar and the task list have to be on screen together, so every
   band above the task list is tightened. */
.hc-db .hc-head { margin-bottom: 12px !important; }
.hc-db .hc-day-title { font-size: 26px !important; margin: 0 !important; }
.hc-db .hc-day-sub { margin: 4px 0 0 !important; font-size: 13.5px !important; }

/* The search box is the loudest thing on the page. */
.hc-db .hc-search-wrap { position: relative; margin-bottom: 0 !important; }
.hc-db .hc-search-wrap::before {
  content: ""; position: absolute; left: 20px; top: 28px;
  transform: translateY(-50%); width: 19px; height: 19px; z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318304C' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") no-repeat center / contain;
}
.hc-db .hc-search {
  font-size: 17px !important;
  padding: 15px 20px 15px 50px !important;
  border: 2px solid var(--navy) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(24,48,76,.12) !important;
}
.hc-db .hc-search::placeholder { color: #7B8794; opacity: 1; }
.hc-db .hc-search:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(163,120,48,.20) !important;
}

/* Credit bar sits close under the search. */
#hcCapacity { margin: 14px 0 0 !important; }
.hc-db .capacity-top { margin-bottom: 5px !important; }

/* Category tiles: shorter, so two rows cost roughly 150px instead of 210px. */
.hc-db #hcProblemBrowse { margin-top: 14px !important; }
.hc-db .hc-sec-title { margin: 0 0 8px !important; font-size: 12px !important; }
.hc-db .hc-pcats { gap: 8px !important; }
.hc-db .hc-pcat,
.hc-db button.hc-pcat {
  min-height: 0 !important;
  padding: 10px 8px !important;
  gap: 4px !important;
  border-radius: 12px !important;
}
.hc-db .hc-pcat .hc-pcat-icon svg { width: 19px !important; height: 19px !important; }
.hc-db .hc-pcat .hc-pcat-label { font-size: 12px !important; }
.hc-db .hc-pcat .hc-pcat-count { font-size: 10.5px !important; }

/* Task list pulled up under the categories. */
.hc-db .hc-day-list { margin-top: 14px !important; padding: 14px 18px !important; }
.hc-db .hc-day-empty { margin-top: 14px !important; padding: 18px 20px !important; }
.hc-db .hc-day-list .ticket-item-row { padding: 8px 0 !important; font-size: 13px !important; }
.hc-db .hc-all-services { margin-top: 12px !important; }
.hc-db .hc-all-services summary { font-size: 12.5px !important; }
.hc-db .actions-row { margin-top: 12px !important; }
.hc-db .hc-celebrate { padding: 12px 16px !important; margin-top: 10px !important; }
.hc-db .hc-celebrate-mark { width: 38px !important; height: 38px !important; }

/* HC HERO BOX */
/* The build step opens with the same navy panel the rest of the site uses.
   Title, one line of instruction, and the credit bar all live inside it. */
.hc-db .hc-hero {
  background: linear-gradient(180deg, #18304C 0%, #0F1F33 100%);
  border-radius: 20px;
  padding: 34px 40px 26px;
  text-align: center;
  margin: 0 0 18px;
}
.hc-db .hc-hero-title {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 38px; font-weight: 800; line-height: 1.06;
  letter-spacing: -1px; color: #fff; margin: 0;
}
.hc-db .hc-hero-sub {
  margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: #DBE3EC;
}

/* The credit bar reads on navy again, so the light-background colors from the
   previous pass are re-inverted, but only inside the hero. */
.hc-db .hc-hero #hcCapacity { margin: 20px 0 0 !important; }
.hc-db .hc-hero .capacity-top { justify-content: center; }
.hc-db .hc-hero .capacity-label { color: #fff !important; }
.hc-db .hc-hero .capacity-track { background: rgba(255,255,255,0.16) !important; }
.hc-db .hc-hero .capacity-tag.open,
.hc-db .hc-hero .capacity-tag.complete {
  background: rgba(255,255,255,0.12) !important; color: #9ED6A0 !important;
}
.hc-db .hc-hero .capacity-tag.nearly,
.hc-db .hc-hero .capacity-tag.wow {
  background: rgba(255,255,255,0.12) !important; color: var(--gold-light) !important;
}
.hc-db .hc-hero .capacity-tag.over {
  background: rgba(163,120,48,0.24) !important; color: var(--gold-light) !important;
}

/* Category browsing is parked for now, and the counts are gone for good. */
.hc-db #hcProblemBrowse { display: none !important; }
.hc-db .hc-pcat .hc-pcat-count { display: none !important; }

@media (max-width: 700px) {
  .hc-db .hc-hero { padding: 26px 20px 22px; border-radius: 16px; }
  .hc-db .hc-hero-title { font-size: 29px; }
  .hc-db .hc-hero-sub { font-size: 14.5px; }
}

/* HC SEARCH RESULT ROWS */
/* Each result is a thing you can click, so the rows are separated properly
   instead of running together as one block of text. */
.hc-db .hc-results {
  top: 62px !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(24,48,76,.18) !important;
  max-height: 340px; overflow-y: auto;
  padding: 5px !important;
}
.hc-db .hc-result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 14px !important;
  border: 1px solid var(--light1) !important;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 5px;
  transition: background .1s, border-color .1s;
}
.hc-db .hc-result:last-child { margin-bottom: 0; border-bottom: 1px solid var(--light1) !important; }
.hc-db .hc-result b { font-size: 15px !important; font-weight: 700; color: var(--navy) !important; }

/* A plus on every row makes it obvious each line is its own choice. */
.hc-db .hc-result::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px; height: 24px; line-height: 22px; text-align: center;
  border: 1.5px solid var(--navy); border-radius: 999px;
  font-size: 16px; font-weight: 700; color: var(--navy);
}
.hc-db .hc-result:hover {
  background: #EEF3F9 !important;
  border-color: var(--navy) !important;
}
.hc-db .hc-result:hover::after { background: var(--navy); color: #fff; }

/* HC CTA POSITION */
/* Choose a day sits right under the search, not at the foot of the list. */
.hc-db #step-build .actions-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; flex-wrap: wrap;
  margin: 14px 0 0 !important;
}
.hc-db #step-build .unlock-hint { font-size: 12.5px; color: #6B7784; }
.hc-db #step-build .actions-row .btn-primary { white-space: nowrap; }
.hc-db #step-build .actions-row .btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* HC STACKED ROWS AND DAY BOXES */
/* Page one adopts option 2's day presentation. The grouping logic is unchanged
   (still splitIntoDays, still by trade) - only how it is drawn. */

/* #ticketPanel carries .hc-day-list, which used to be the card. The day boxes
   are the cards now, so the wrapper stops drawing one. */
.hc-db .hc-day-list {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin-top: 18px !important;
}

.hc-db .hc-day {
  border: 1.5px solid var(--navy); border-radius: 16px; overflow: hidden;
  background: #fff; margin-bottom: 14px;
}
.hc-db .hc-day-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--navy); padding: 13px 20px;
}
.hc-db .hc-day-bar h4 {
  margin: 0; font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: #fff;
}
.hc-db .hc-day-bar-cr { font-size: 12.5px; font-weight: 700; color: var(--gold-light); }

.hc-db .hc-drow,
.hc-db .hc-srow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 20px; border-bottom: 1px solid #EDF1F5;
}
.hc-db .hc-drow:last-child, .hc-db .hc-srow:last-of-type { border-bottom: none; }
.hc-db .hc-srow { padding: 13px 0; }
.hc-db .hc-drow-main { min-width: 0; }

/* The service name is the first row now, so it starts flush. */
.hc-db .hc-dname {
  font-size: 15px; font-weight: 700; color: var(--navy);
  margin: 0 0 4px; line-height: 1.35;
}
.hc-db .hc-sup { font-size: 13px; color: #5A6672; }
.hc-db .hc-sup.inc { color: #1F6B24; font-weight: 700; }
.hc-db .hc-dcr { font-size: 12.5px; font-weight: 700; color: #5A6672; white-space: nowrap; }

.hc-db .hc-drow-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* the flow summary, inside the question modal */
.hc-db .hc-sum { margin-top: 4px; }
.hc-db .hc-stotal {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--navy);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800; color: var(--navy); font-size: 15px;
}

@media (max-width: 700px) {
  .hc-db .hc-drow { flex-direction: column; gap: 10px; }
  .hc-db .hc-drow-side { align-self: flex-end; }
}

/* whole-house upsell ------------------------------------------------- */
.hc-upsell h3{margin:0 0 .5rem}
.hc-upsell-kicker{margin:.85rem 0 0;font-size:1.05rem;line-height:1.45;font-weight:600}
.hc-upsell-math{margin:1.1rem 0 .25rem;border-top:1px solid rgba(0,0,0,.10)}
.hc-upsell-math>div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(0,0,0,.06)}
.hc-upsell-math>div>span:first-child{opacity:.75}
.hc-upsell-math>div>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-upsell-delta{font-weight:700;border-bottom:0!important}
.hc-upsell-delta>span:first-child{opacity:1!important}

/* trade grouping + shared-setup discount ------------------------------ */
.hc-trade{margin:0 0 2px}
.hc-trade-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 0 2px}
.hc-trade-name{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hc-trade-tag{font-size:.68rem;font-weight:700;color:#2f6b45;background:#e6f1ea;border-radius:99px;padding:2px 9px;white-space:nowrap}
.hc-was{text-decoration:line-through;opacity:.5;margin-right:6px;font-size:.85em}
.hc-dcr.cut{color:#2f6b45}
.hc-why{font-size:.7rem;color:#2f6b45;margin:-2px 0 4px}

.option-credits .cut,.hc-dcr .cut{color:#2f6b45}
.option-credits s.hc-was,.hc-dcr s.hc-was{text-decoration:line-through;opacity:.5;margin-right:6px;font-weight:400}
.hc-saved{color:#2f6b45;font-size:.8rem;font-weight:700;margin:6px 0 0}

/* milestone popup + neutral notice ------------------------------------ */
.hc-say{max-width:30rem;text-align:left}
.hc-say h3{margin:0 0 .5rem;font-size:1.35rem}
#hcNoteHost .hc-overlay{z-index:9999}

/* ---- suggestion rows -----------------------------------------------------
   Used by the "help me fill my day" panel and by the nearly-full prompt. The
   panel is wider than a plain message because it carries a list, so hc-say
   gets a wide variant rather than every message box growing. */
.hc-say-wide{max-width:38rem}

/* ---- calendar note -------------------------------------------------------
   Shown when the visible fortnight has nothing bookable in it. Amber rather
   than red: a busy calendar is not an error. */
#hcDayNote:empty{display:none}

/* ---- what you are committing to ------------------------------------------
   Sits above the details form, not below it. Somebody deciding whether to hand
   over their home address needs this before they type, not after. Quiet blue
   rather than a warning colour: it is reassurance, not a caution. */
.commit-note{margin:0 0 18px;padding:13px 15px;border-radius:12px;
  background:#F3F7FC;border:1px solid #DCE7F2}
.commit-note p{margin:0;font-size:13.5px;line-height:1.55;color:#41505F}
.commit-note .commit-lead{font-weight:700;color:var(--navy);margin-bottom:4px}
.hc-day-none{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:0 0 14px;padding:12px 14px;border-radius:12px;
  background:#FFF8EC;border:1px solid #F0DDBA;
  font-size:13.5px;line-height:1.5;color:var(--navy)}
.hc-day-none strong{white-space:nowrap}
.hc-day-jump{margin-left:auto;padding:7px 14px;font-size:13px;white-space:nowrap}
@media (max-width:520px){
  .hc-day-jump{margin-left:0;width:100%}
}
.hc-sug{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.hc-sug-row{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--border);border-radius:12px;background:#fff}
.hc-sug-txt{flex:1 1 auto;min-width:0}
.hc-sug-name{font-size:14.5px;line-height:1.35;color:var(--navy);font-weight:600}
.hc-sug-cat{font-size:12px;color:#8A94A0;margin-top:2px}
.hc-sug-cr{flex:0 0 auto;font-size:12.5px;color:#6B7784;white-space:nowrap}
.hc-sug-add{flex:0 0 auto;padding:7px 15px;font-size:13.5px}
.hc-sug-add.is-added{opacity:.6;pointer-events:none}
/* On a phone the credits and the button sit under the name rather than
   squeezing it to two words per line. */
@media (max-width:520px){
  .hc-sug-row{flex-wrap:wrap;gap:6px 12px}
  .hc-sug-txt{flex:1 1 100%}
  .hc-sug-cr{margin-right:auto}
}
.hc-info{background:#eef4ff;border:1px solid #cfe0ff;color:#22406e;border-radius:9px;padding:9px 12px;font-size:.86rem;margin:8px 0}

.hc-addon{font-size:.74rem;color:#a97722;margin:1px 0 2px;font-weight:600}
.hc-addon b{font-weight:800}


/* ---- search results: direct task matches --------------------------------
   Several catalog categories have no problem flow yet, so the search offers
   their tasks directly rather than dead-ending. These sit below the guided
   problem results and read as a quieter, secondary option. */
.hc-result-head {
  padding: 9px 14px 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9AA5B1;
  border-top: 1px solid #E8EDF2;
  margin-top: 4px;
}
.hc-results > .hc-result-head:first-child { border-top: 0; margin-top: 0; }

.hc-result-task {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.hc-result-task b {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
}
.hc-result-cat {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #A37830;
  white-space: nowrap;
}

/* A job carried across two days labels which half of it this is. */
.plan-slice{font-style:normal;font-weight:700;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#A37830;margin-left:6px;}

/* What is still free on a day that is not full. A day that runs short is not
   a mistake to hide: it is room the customer can still fill. */
.plan-left{font-style:normal;font-weight:600;font-size:11.5px;color:#2E7D32;margin-left:8px;white-space:nowrap;}


/* ---- quick picks: four common jobs, one row under the search box -------
   They share the row evenly on a wide screen and never shrink below their own
   wording; on a narrow phone the row scrolls sideways rather than stacking,
   so it stays one row everywhere. */
.hc-db .hc-quick { margin: 16px 0 0; }
.hc-db .hc-quick-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: #6B7784; font-weight: 700; margin: 0 0 9px;
}
.hc-db .hc-quick-row {
  display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.hc-db .hc-quick-row::-webkit-scrollbar { display: none; }
.hc-db .hc-chip {
  flex: 1 1 0; min-width: max-content; white-space: nowrap;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #1E2830;
  background: #fff; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 11px 18px; cursor: pointer; text-align: center;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* No tasks yet means no panel at all, rather than an empty white card. */
.hc-db .hc-day-list:empty { display: none; padding: 0; border: 0; box-shadow: none; }

@media (max-width: 620px) {
  .hc-db .hc-chip { font-size: 13px; padding: 10px 15px; }
  .hc-db .hc-quick { margin-top: 14px; }
}


/* ---- tick lists --------------------------------------------------------
   Used where a problem offers a menu of jobs rather than a single choice. */
.hc-db .hc-multi-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 14px 0 -6px;
}
.hc-db .hc-linkbtn {
  background: none; border: 0; padding: 0; font-family: inherit; font-size: 13px;
  font-weight: 700; color: var(--navy); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.hc-db .hc-multi-count { font-size: 12.5px; color: #6B7784; }
.hc-db .hc-checks .hc-opt { align-items: flex-start; }
.hc-db .hc-box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 1.5px solid var(--border); background: #fff; position: relative;
}
.hc-db .hc-check.on { border-color: var(--gold); }
.hc-db .hc-check.on .hc-box { background: var(--navy); border-color: var(--navy); }
.hc-db .hc-check.on .hc-box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hc-db .hc-check:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hc-db .hc-modal-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }


/* ---- BUTTON STATES THE THEME TRIES TO REPAINT -------------------------
   The Elementor kit paints every button in the page navy on hover AND focus:
     .elementor-kit-574 button:hover, .elementor-kit-574 button:focus
       { background-color:#0F1F33; color:#FFFFFF; }
   Our own hover rules out-specify it on colour but said nothing about
   background, so the kit's navy fill landed underneath our navy text and the
   words disappeared. Every state below therefore declares BOTH. If you add a
   button here later, declare its background on :hover and :focus or it will
   turn into a navy block. */

.hc-db .hc-chip:hover,
.hc-db .hc-chip:focus,
.hc-db .hc-chip:focus-visible,
.hc-db .hc-chip:active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(24, 48, 76, .18);
}

.hc-db .btn-ghost:hover,
.hc-db .btn-ghost:focus,
.hc-db .btn-ghost:focus-visible {
  background: transparent;
  color: var(--navy);
  border-color: var(--gold);
}

.hc-db .hc-linkbtn:hover,
.hc-db .hc-linkbtn:focus,
.hc-db .hc-linkbtn:focus-visible {
  background: none;
  color: var(--gold);
}

.hc-db .pill-btn:hover,
.hc-db .pill-btn:focus,
.hc-db .pill-btn:focus-visible {
  background: #fff;
  color: var(--navy);
  border-color: var(--gold);
}

/* the keyboard ring stays on top of all of it */
.hc-db .hc-chip:focus-visible,
.hc-db .btn-ghost:focus-visible,
.hc-db .hc-linkbtn:focus-visible,
.hc-db .pill-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* ============================================================
   FULL DAY, STILL ONE DAY (20-22 credits)
   Same sentence layout as .wow, because it carries the same long message,
   but tinted green to match the bar. .wow keeps gold for 23+, where the
   list has grown past a single day.
   ============================================================ */
.capacity-tag.fullday {
  flex: 1 1 100%;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 10px;
}
.hc-db .capacity-tag.fullday { background: #E9F4EA !important; color: #2E7D32 !important; }
.hc-db .hc-hero .capacity-tag.fullday { background: rgba(255,255,255,0.12) !important; color: #9ED6A0 !important; }


/* ============================================================
   YOUR LIST: CATEGORY HEADINGS

   The headings sat at padding-left 0 while every task row is inset 20px, so
   they hung off the left edge instead of sitting above the tasks they label.
   Match the row inset (and the panel header's, which is also 20px) and give
   them enough weight and colour to actually divide the list.
   ============================================================ */
.hc-db .hc-trade-head {
  padding: 20px 20px 6px;
}
.hc-db .hc-trade:first-child .hc-trade-head {
  padding-top: 15px;
}
.hc-db .hc-trade-name {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--navy);
}


/* ============================================================
   YOUR LIST: TASK INDENT

   The category heading and its tasks were both flush at 20px, so nothing in
   the layout said the tasks belonged to the heading. Step the tasks in so the
   grouping is visible rather than implied. Only the left edge moves - the
   credits, stepper and remove button stay anchored to the right.
   ============================================================ */
.hc-db .hc-trade .hc-drow,
.hc-db .hc-trade .hc-srow {
  padding-left: 52px;
}
@media (max-width: 700px) {
  .hc-db .hc-trade .hc-drow,
  .hc-db .hc-trade .hc-srow {
    padding-left: 40px;
  }
}


/* ============================================================
   TASK EXAMPLE PHOTOS

   Shown once a task has been identified, so people can see what the thing
   actually is. Fixed box with object-fit so wildly different source crops
   still line up down the column.
   ============================================================ */
.hc-db .hc-timg {
  flex: 0 0 auto;
  width: 76px;
  height: 57px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #E3E9EF;
  background: #F3F5F7;
  margin-right: 14px;
  display: block;
}
@media (max-width: 700px) {
  .hc-db .hc-timg { width: 60px; height: 45px; margin-right: 10px; }
}


/* ---- step 0 as two columns ----------------------------------------------
   Steps 1 and 2 already used .builder-layout with a ticket rail; step 0 was
   the odd one out, stacking everything and putting the day list below the
   whole catalogue. Same shell, so the three steps now agree.

   .hc-db collapses .builder-layout to one column under 780px, and pulls
   .ticket-col to the top with order:-1. That is right for the calendar step
   but wrong here: on a phone the day list belongs under the thing you are
   picking from, not above it. Hence the order reset. */
#step-build .builder-layout{grid-template-columns:1.5fr 1fr;align-items:start}
#step-build .ticket-col{display:block;position:sticky;top:20px}
#step-build .hc-build-main{min-width:0}
/* The rail is a card again. The bare .hc-day-list rule strips the card with
   !important because in the stacked layout the day boxes were the cards;
   in a narrow rail it needs its own edge or it floats loose. */
#step-build .ticket-col .hc-day-list{background:#fff !important;border:1px solid var(--border) !important;
  border-radius:14px !important;padding:16px 18px !important;margin-top:0 !important;
  box-shadow:0 6px 24px rgba(24,48,76,.06) !important}
/* Empty rail still shows the card, so the column does not appear and vanish. */
#step-build .ticket-col .hc-day-list:empty{display:block;padding:16px 18px !important}
#step-build .ticket-col .hc-day-list:empty::before{content:"Nothing on your day yet.";
  display:block;color:#6B7784;font-size:13.5px}
#step-build .ticket-col .actions-row{margin-top:14px;display:flex;flex-direction:column;
  align-items:stretch;gap:8px}
#step-build .ticket-col .actions-row .btn{width:100%}
#step-build .ticket-col .unlock-hint{text-align:center}
@media (max-width:780px){
  #step-build .builder-layout{grid-template-columns:1fr}
  #step-build .ticket-col{order:0;position:static}
}


/* ---- search inside the navy hero -----------------------------------------
   The box moved out of the left column and into the hero, under the
   headline. Two things follow from the navy background: the 2px navy
   border is invisible on it, and the hero centres its text while the
   results list underneath has to read left. */
#step-build .hc-hero .hc-search-wrap{max-width:620px;margin:18px auto 0 !important;text-align:left}
#step-build .hc-hero .hc-search{border-color:transparent !important;
  box-shadow:0 10px 26px rgba(9,20,34,.30) !important}
#step-build .hc-hero .hc-search:focus{border-color:var(--gold) !important}
/* The dropdown has to paint over the columns below, and the hero is not a
   positioned ancestor, so it needs to sit above later content itself. */
#step-build .hc-hero{position:relative;z-index:20}
#step-build .hc-hero #hcProblemResults{text-align:left}


/* ---- full-bleed hero -----------------------------------------------------
   The Elementor container is now content_width:full with no side padding,
   so .hc-db spans the viewport. The 1080 cap moved down onto the sections
   themselves, which lets the hero fill the width without escaping its
   parent.

   Deliberately no 100vw and no negative margins: 100vw counts the
   scrollbar, so the usual full-bleed trick overflows by ~15px and gives the
   page a sideways scroll. Percentages of a full-width parent do not. */
.hc-db .hc-db-page{max-width:none;margin:0;padding:0}
.hc-db #errorBox,
.hc-db #step-build > .builder-layout,
.hc-db #step-build > #hcProblemFlow,
.hc-db #step-build > #hcModalHost,
.hc-db > .hc-db-page > #step-day,
.hc-db > .hc-db-page > #step-details,
.hc-db > .hc-db-page > #step-confirmed,
.hc-db > .hc-db-page > .hc-db-utility{max-width:1080px;margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px}
/* Square corners: a rounded band that touches both edges reads as a mistake. */
.hc-db #step-build > .hc-hero{border-radius:0 !important;margin:0 0 26px !important;
  padding-top:52px !important;padding-bottom:40px !important;
  padding-left:max(20px, calc(50% - 540px)) !important;
  padding-right:max(20px, calc(50% - 540px)) !important}
@media (max-width:780px){
  .hc-db #step-build > .hc-hero{padding-top:32px !important;padding-bottom:26px !important;
    padding-left:20px !important;padding-right:20px !important}
  .hc-db #errorBox,
  .hc-db #step-build > .builder-layout,
  .hc-db > .hc-db-page > #step-day,
  .hc-db > .hc-db-page > #step-details,
  .hc-db > .hc-db-page > #step-confirmed{padding-left:16px;padding-right:16px}
}


/* The browse-everything disclosure is gone from the page. Its render targets
   remain in the DOM only because the two renderers assume they exist. */
.hc-db .hc-browse-off{display:none !important}


/* Ten chips instead of four. The row was a nowrap horizontal scroller whose
   chips used flex:1 1 0 to stretch across one line; with ten that becomes a
   long sideways strip. Wrap instead, each chip sized to its own text. */
.hc-db .hc-quick-row{flex-wrap:wrap !important;overflow-x:visible !important}
.hc-db .hc-quick-row > .hc-chip{flex:0 0 auto !important}


/* The upgrade offer says what it is, and that saying no costs nothing. */
.hc-db .hc-upsell-eyebrow{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--gold)}
.hc-db .hc-upsell-safe{margin:12px 0 0;font-size:13px;color:#6B7784;font-style:italic}


/* Day cells are <button> now. The theme paints bare buttons grey with white
   text, so the browser and theme defaults have to be reset explicitly - the
   same trap that turned the category buttons blue. */
.hc-db .day-cell{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;
  width:100%;display:block;margin:0;line-height:1.3}
.hc-db .day-cell:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through;
  background:#fff;border-color:var(--border)}
.hc-db .day-cell:focus-visible{outline:3px solid var(--gold);outline-offset:2px}


/* The discount as a sentence, under the sum rather than inside it. */
.hc-db .hc-upsell-saving{margin:10px 0 0;font-size:12.5px;color:#6B7784;font-style:italic}


/* ------------------------------------------------------------------
   Day-list rows, matched to the V2 rail.
   The name is clamped to two lines instead of wrapping to four or five,
   the row centres on that name, and the side column reads stepper then
   credits then remove. Full name stays reachable on the title attribute.
   Scoped to .hc-drow so the flow summary, which shares .hc-dname and
   .hc-sup, is not clamped along with it.
   ------------------------------------------------------------------ */

.hc-db .hc-drow {
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
}

.hc-db .hc-drow .hc-drow-main { flex: 1 1 auto; min-width: 0; }

.hc-db .hc-drow .hc-dname {
  font-size: 14.5px;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.hc-db .hc-drow .hc-sup { font-size: 12px; line-height: 1.3; margin-top: 3px; }
.hc-db .hc-drow .hc-addon,
.hc-db .hc-drow .hc-why { font-size: 11.5px; margin: 2px 0 0; }

.hc-db .hc-drow .hc-drow-side { gap: 12px; }
.hc-db .hc-drow .hc-dcr {
  font-size: 13.5px;
  min-width: 44px;
  text-align: right;
}

/* The stepper sits on white here, not on the navy panel, so the buttons need
   their own border and colour rather than the translucent white ones. */
.hc-db .hc-drow .t-stepper-btn {
  border-color: #C9D4DF;
  color: var(--navy);
}

@media (max-width: 700px) {
  .hc-db .hc-drow { flex-direction: row; align-items: center; }
  .hc-db .hc-drow .hc-drow-side { align-self: center; }
  .hc-db .hc-drow .hc-dname { font-size: 14px; }
}


/* ------------------------------------------------------------------
   More room for the service name in the day list.

   The name was living in roughly 160px: the ticket column is 1fr of a
   1.5fr 1fr grid, then 26px of panel padding each side, then 20px of row
   padding each side, then a side column of about 158px. Four changes,
   none of which alter the row shape:
     1. the ticket column gets wider (1.5fr 1fr -> 1.28fr 1fr)
     2. the ticket panel loses some of its 26px padding
     3. the row loses some of its 20px horizontal padding
     4. the side column tightens up its gaps and its credit width
   Together that roughly doubles the space the name has.
   ------------------------------------------------------------------ */

.hc-db .builder-layout { grid-template-columns: 1.28fr 1fr; gap: 20px; }

.hc-db .ticket-col .panel { padding: 20px 16px; }

.hc-db .hc-drow { padding: 11px 12px; gap: 10px; }

.hc-db .hc-drow .hc-drow-side { gap: 8px; }

.hc-db .hc-drow .hc-dcr {
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
}

/* The stepper was sized for the navy panel it used to sit on. On white, at
   this width, every pixel it gives back goes to the name. */
.hc-db .hc-drow .t-stepper { gap: 3px; }
.hc-db .hc-drow .t-stepper-btn { width: 20px; height: 20px; font-size: 12px; }
.hc-db .hc-drow .t-stepper-qty { min-width: 12px; color: var(--navy); }
.hc-db .hc-drow .t-remove-btn {
  width: 18px; height: 18px; font-size: 10px;
  background: #EDF1F5; color: #5A6672;
}

/* Breaking mid-word is only worth it for a word that genuinely cannot fit.
   With the extra room, normal wrapping reads better. */
.hc-db .hc-drow .hc-dname { overflow-wrap: break-word; }

@media (max-width: 780px) {
  /* Single column here, so the rail is full width and none of the squeeze
     above applies. Give the padding back. */
  .hc-db .ticket-col .panel { padding: 22px 20px; }
  .hc-db .hc-drow { padding: 12px 16px; }
}


/* ==========================================================================
   MOBILE DAY LIST
   Two problems, both only visible on a phone.

   1. ALIGNMENT. The list sat inside three nested paddings: 16px of page
      gutter, then 18px of rail card, then 16px of row. The service name
      started 50px in while everything else on the page started at 16px, so
      the list read as belonging to something else. In one column the rail
      card is redundant anyway - the bordered day box is already the card -
      so the rail stops drawing one and the box lines up with the page.

   2. DENSITY. Four things earn their place in a phone row: what the job is,
      what the customer supplies, what it costs, and how many. The word
      "credits" becomes "cr", the remove button goes because minus already
      removes at one, and the discount explanation goes because the struck-
      through figure beside it says the same thing without a line of its own.
   ========================================================================== */

@media (max-width: 780px) {
  /* Let the day box sit on the page margin, not inside a second card. */
  #step-build .ticket-col .hc-day-list {
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important;
  }
  /* The empty state has no box of its own, so it keeps its inset. */
  #step-build .ticket-col .hc-day-list:empty { padding: 16px 18px !important; }
}

@media (max-width: 560px) {
  /* One horizontal inset for the whole card, so the day title, the trade
     heading and every service name share a single left edge. */
  .hc-db .hc-day { margin-bottom: 12px; }
  .hc-db .hc-day-bar { padding: 10px 14px; }
  .hc-db .hc-day-bar h4 { font-size: 16px; }
  .hc-db .hc-trade .hc-drow,
  .hc-db .hc-drow { padding: 9px 14px !important; gap: 10px; }
  .hc-db .hc-trade-head { padding: 8px 14px 2px; }

  /* Name and supplies left, credits then quantity right. */
  .hc-db .hc-drow .hc-dname {
    font-size: 13.5px; line-height: 1.25; margin: 0;
    -webkit-line-clamp: 2; line-clamp: 2;
  }
  .hc-db .hc-drow .hc-sup {
    font-size: 11.5px; line-height: 1.25; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .hc-db .hc-drow .hc-addon { font-size: 11px; margin: 2px 0 0; }

  /* The struck-through number already says the setup was shared. */
  .hc-db .hc-drow .hc-why { display: none; }

  /* Minus removes the row at one, so a separate remove button is a third
     control doing a job two already do. */
  .hc-db .hc-drow .t-remove-btn { display: none; }

  /* Credits before quantity, matching how the row reads aloud. */
  .hc-db .hc-drow .hc-drow-side { gap: 8px; }
  .hc-db .hc-drow .hc-dcr { order: -1; font-size: 12.5px; }
  .hc-db .hc-drow .hc-was { order: -2; margin-right: 2px; font-size: .8em; }
  .hc-db .hc-drow .hc-cr-word { display: none; }
  .hc-db .hc-drow .hc-dcr::after {
    content: " cr"; font-weight: 600; opacity: .6; font-size: .85em;
  }

  .hc-db .hc-drow .t-stepper { gap: 2px; }
  .hc-db .hc-drow .t-stepper-btn { width: 24px; height: 24px; font-size: 13px; }
  .hc-db .hc-drow .t-stepper-qty { min-width: 11px; font-size: 12.5px; }
}


/* ---- tick bullet + shorter supplies line ---------------------------------
   A tick reads as "this is on your day", which is what the list is. Hanging
   indent so a name that runs to a second line starts under the first letter
   rather than under the tick.

   The tick is decorative: a screen reader already reads the row as a task
   with a quantity and a remove control, so it is marked aria-hidden through
   content alone and adds nothing to the spoken row. */
.hc-db .hc-drow .hc-dname {
  padding-left: 18px;
  text-indent: -18px;
}
.hc-db .hc-drow .hc-dname::before {
  content: "\2713";
  display: inline-block;
  width: 18px;
  text-indent: 0;
  color: var(--gold);
  font-weight: 800;
}

/* On a phone the promise is "Material included". The qualifier is true but it
   is a second line of a two-line row, and the flat rate is stated elsewhere
   on the page more than once. */
@media (max-width: 560px) {
  .hc-db .hc-drow .hc-sup-tail { display: none; }
  .hc-db .hc-drow .hc-dname { padding-left: 16px; text-indent: -16px; }
  .hc-db .hc-drow .hc-dname::before { width: 16px; }
}


/* ============================================================
   YOUR LIST: CATEGORY DIVIDERS

   The rule was on the row (border-bottom on .hc-drow, cleared by
   :last-child). Because rows are grouped inside .hc-trade, that drew a line
   between the first and second plumbing task and then cleared the line at
   the exact point plumbing ended and the next trade began - the opposite of
   what a divider is for.

   The line belongs to the group, not the row. Adjacent-sibling so the first
   group gets none: the navy day bar is already its top edge.
   ============================================================ */
.hc-db .hc-trade .hc-drow { border-bottom: none; }
.hc-db .hc-trade + .hc-trade { border-top: 1px solid #DCE4EC; }


/* ============================================================
   YOUR LIST: ADD-ON LINE SPACING

   .hc-addon and .hc-why never set a line-height, so they inherited the
   theme body value. The name and the supplies line each set their own, which
   is why only this line looked airy: a three-line add-on label was spending
   roughly 20px a line instead of 14px.

   Margins tightened too. The label sits under the supplies line as a
   qualifier on the same task, not as a separate block.
   ============================================================ */
.hc-db .hc-drow .hc-addon,
.hc-db .hc-drow .hc-why {
  line-height: 1.25;
  margin: 2px 0 0;
}
@media (max-width: 560px) {
  .hc-db .hc-drow .hc-addon { line-height: 1.22; margin: 1px 0 0; }
}


/* ============================================================
   YOUR LIST: SUPPLIES LINE INDENT

   The name hangs its tick into an 18px gutter, so the name TEXT starts at
   18px while the supplies line underneath started at 0 - lined up with the
   tick rather than with the words it belongs to. Push it into the same
   column so the left edge of the text is one straight line.
   ============================================================ */
.hc-db .hc-drow .hc-sup { padding-left: 18px; }
@media (max-width: 560px) {
  .hc-db .hc-drow .hc-sup { padding-left: 16px; }
}


/* ============================================================
   REVIEW DOCUMENT

   The summary arrives as a self-contained, inline-styled table because the
   same markup has to survive an email client and Dompdf. Almost nothing is
   styled here on purpose - the rules below only give it room and let it
   scroll. Restyling it in the page would be the drift this design exists
   to prevent.
   ============================================================ */
.hc-db .confirm-modal-review{max-width:940px;width:calc(100vw - 32px);text-align:left}
.hc-db .confirm-modal-review .confirm-modal-icon,
.hc-db .confirm-modal-review .confirm-modal-title{text-align:center}
.hc-db .hc-review-doc{
  margin:6px 0 18px;padding:18px;
  border:1px solid var(--border);border-radius:10px;background:#fff;
  max-height:52vh;overflow:auto;-webkit-overflow-scrolling:touch}
.hc-db .hc-review-doc:empty{display:none}
.hc-db .hc-review-loading{margin:0;font-size:13px;color:#6B7784;font-style:italic}

/* A seven-column table cannot shrink to a phone. Rather than fold it into
   something unreadable, let it scroll sideways inside its own box while the
   page itself stays put. */
@media (max-width:760px){
  .hc-db .hc-review-doc{padding:12px;max-height:46vh}
  .hc-db .hc-review-doc > table{min-width:660px}
}


/* ==========================================================================
   DESKTOP DAY LIST: THE TASK GETS ITS OWN ROW - 2.29.0

   John: "on the desktop version there is not enough space for the task. I need
   the task listed and then next row would be if the customer or the concierge
   supplies anything. The credit and quantity need less room."

   Measured before the change, on a 1440px viewport: the rail is 490px, the row
   loses 52px to the trade indent and 12px to padding, and the side column was
   taking 262px of what was left. The service name was living in 113px and
   clamping to two lines, which is why every task read "Install motorized...".

   THE CAUSE OF THE 262px. Not this stylesheet. Elementor's kit styles every
   <button> on the site at padding 14px 28px. With box-sizing: border-box that
   padding is a floor, so the width: 20px / height: 20px set above did nothing:
   each stepper button computed to 58px wide and the remove button to 56px.
   Three controls at that size ate 170px of a 490px rail. Resetting the padding
   is most of the fix and it is worth doing wherever these controls appear, not
   only in the rail.

   THE SHAPE. Above 780px the row becomes a two-row grid:

       [ task name, full width           ]
       [ who supplies it     ][ qty  cr x ]

   so the name has the whole width and never clamps, and the controls sit on
   the second line beside the supplies text instead of stealing a column from
   the name. Below 780px the layout is already one column and the phone rules
   further down are tuned for it, so none of this applies there.

   The credit figure drops the word "credits" for " cr" here, the same trade the
   phone row already makes, which is another ~40px back to the name.
   ========================================================================== */

/* 1. Undo the theme's button padding on the two controls in a task row. */
.hc-db .t-stepper-btn,
.hc-db .t-remove-btn {
  padding: 0 !important;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  letter-spacing: 0;
}

/* Sizes are per-breakpoint. With the padding gone these controls finally take
   the width they are given, and a phone wants a bigger target than a rail. */
@media (min-width: 781px) {
  .hc-db .hc-drow .t-stepper-btn { width: 22px; height: 22px; font-size: 13px; }
  .hc-db .hc-drow .t-remove-btn  { width: 20px; height: 20px; font-size: 11px; }
}
@media (max-width: 780px) {
  .hc-db .hc-drow .t-stepper-btn { width: 26px; height: 26px; font-size: 14px; }
  .hc-db .hc-drow .t-remove-btn  { width: 24px; height: 24px; font-size: 12px; }
}

/* 2. Name on its own row, supplies and controls on the next. */
@media (min-width: 781px) {
  .hc-db .hc-drow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name name"
      "sup  side";
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
  }

  /* The name and the supplies line are siblings inside .hc-drow-main. They
     need to be grid items of the row itself to sit on two different rows, and
     display: contents is what lifts them out without touching the markup. */
  .hc-db .hc-drow .hc-drow-main { display: contents; }

  .hc-db .hc-drow .hc-dname {
    grid-area: name;
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
  }
  .hc-db .hc-drow .hc-sup { grid-area: sup; margin-top: 0; }
  .hc-db .hc-drow .hc-drow-side { grid-area: side; justify-self: end; gap: 8px; }

  /* The trade indent was set when the name had a column of its own to lose.
     52px of a 490px rail is a lot to spend on alignment. */
  .hc-db .hc-trade .hc-drow,
  .hc-db .hc-trade .hc-srow { padding-left: 30px; }

  /* Credit and quantity, tightened. */
  .hc-db .hc-drow .t-stepper { gap: 4px; }
  .hc-db .hc-drow .hc-dcr { font-size: 12.5px; }
  .hc-db .hc-drow .hc-cr-word { display: none; }
  .hc-db .hc-drow .hc-dcr::after {
    content: " cr"; font-weight: 600; opacity: .6; font-size: .85em;
  }
}