/* A2 Warm shared primitives. Load after the page's existing stylesheet.
 * Values come from deliverables/hapnex-ui-a2-20261004/hapnex-a2.css.
 * Fonts are local OFL assets; the existing CSP is kept intact. */
@font-face {
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('./fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('./fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
}

:root {
  --bg:#FAF7F1;--sand:#F3EEE5;--sand2:#EBE4D8;--card:#FFFFFF;
  --ink:#1D1B17;--ink2:#3A362F;--muted:#6F695E;--faint:#A39C8F;
  --line:rgba(64,48,24,.10);--green:#1F5C3E;--green2:#2C7A52;
  --green-soft:#E6EEE3;--warm:#B4561F;
  --sh1:0 1px 2px rgba(64,48,24,.05),0 10px 28px -14px rgba(64,48,24,.18);
  --sh2:0 1px 2px rgba(64,48,24,.05),0 26px 60px -28px rgba(64,48,24,.34);
  --ring:inset 0 0 0 1px rgba(64,48,24,.10);
  --hf:'Bricolage Grotesque','Plus Jakarta Sans','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --bf:'Plus Jakarta Sans','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hf-w:700;--hf-ls:-.02em;--hf-acc:var(--hf);--hf-acc-style:normal;--hf-acc-w:700;
  --accent:var(--green);--surface:var(--card);--soft:var(--sand);--radius:24px;
  color:var(--ink);background:var(--bg);font-family:var(--bf);font-optical-sizing:auto;font-synthesis:none;
}
body {
  background:var(--bg);color:var(--ink);font-family:var(--bf);font-size:16px;
  line-height:1.5;word-spacing:.06em;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
.hx {
  --accent:var(--green);--accent-ink:var(--green);--accent-soft:var(--green-soft);
  --ink:#1D1B17;--muted:#6F695E;--line:rgba(64,48,24,.10);--line2:rgba(64,48,24,.10);
  --field:rgba(64,48,24,.10);--panel:var(--sand);
  background:var(--bg);color:var(--ink);font-family:var(--bf);font-size:16px;line-height:1.5;word-spacing:.06em;
}
:where(button,input,textarea,select) {font-family:inherit;font-optical-sizing:auto;}
button {word-spacing:inherit;letter-spacing:inherit;}
:where(a) {color:var(--green);}
:where(h1,h2,h3,h4,.w-h,.hx-h1,.hx-display,.hx-h2,.hx-pv-name,.hx-svc-name,.hx-cat-h strong,.candidate-name,.plan-title,.plan-price strong,.plan-total strong) {
  font-family:var(--hf);font-weight:700;letter-spacing:-.012em;word-spacing:.03em;font-optical-sizing:auto;
}
.hx-h1,.hx-display {font-family:var(--hf);font-weight:700;letter-spacing:-.02em;word-spacing:.03em;}
.hx-h2,.hx-pv-name,.hx-svc-name,.hx-cat-h strong {
  font-family:var(--hf);font-weight:700;letter-spacing:-.012em;word-spacing:.03em;
}
.hx-display span {color:var(--ink);}
.hx-earn,.hx-pv-price,.w-price,.w-tot b {font-family:var(--hf);font-weight:700;font-variant-numeric:tabular-nums;}

/* Primary and secondary buttons use the same capsules in both flows. */
.hx-btn,button.primary-cta,.w-cta {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:58px;min-height:58px;padding:0 26px;border:0;border-radius:999px;
  background:var(--ink);color:var(--card);font-family:var(--bf);font-size:16.5px;font-weight:700;
  word-spacing:inherit;letter-spacing:inherit;box-shadow:0 14px 30px -14px rgba(29,27,23,.7);
}
.hx-btn.lg {height:58px;min-height:58px;border-radius:999px;font-size:16.5px;}
.hx-btn:hover,button.primary-cta:hover,.w-cta:hover {background:var(--ink);box-shadow:0 14px 30px -14px rgba(29,27,23,.7);}
.hx-btn.sec,button.secondary,button.quiet,.w-pill {
  border:0;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:var(--ring);
}
.hx-btn.sec:hover,button.secondary:hover,button.quiet:hover {background:var(--sand);border-color:transparent;}
.hx-btn.sm,.w-ghost {
  height:36px;min-height:36px;padding:0 14px 0 12px;border:0;border-radius:999px;
  background:var(--sand);color:var(--ink2);font-size:14px;font-weight:700;box-shadow:none;
}
.hx-btn.sm.sec {background:var(--card);color:var(--ink);box-shadow:var(--ring);}
.w-ghost.sel {background:var(--ink);color:var(--card);}
.hx-btn:disabled {background:var(--ink);color:var(--card);opacity:.42;box-shadow:none;}
.w-round {display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--card);box-shadow:var(--ring);color:var(--ink);}

/* Full form fields are 54px; compact fields retain their explicit small width. */
.hx-input,.hx-select,.w-input {
  height:54px;min-height:54px;padding:0 16px;border:0;border-radius:16px;
  background-color:var(--card);color:var(--ink);box-shadow:var(--ring);font-size:16px;font-weight:500;
}
.hx-input:hover,.hx-select:hover {border-color:transparent;}
.hx-select {appearance:auto;-webkit-appearance:auto;background-image:none;}
.hx-mini-input,.hx-mini-select {
  height:36px;min-height:36px;padding:0 12px;border:0;border-radius:16px;
  background-color:var(--card);color:var(--ink);box-shadow:var(--ring);font-size:14px;font-weight:500;
}
.hx-mini-select {appearance:auto;-webkit-appearance:auto;background-image:none;}
.hx-price {height:54px;border:0;border-radius:16px;background:var(--card);box-shadow:var(--ring);}
.hx-price input {font-family:var(--hf);font-weight:700;}
.hx-input:focus,.hx-select:focus,.hx-mini-input:focus,.hx-mini-select:focus,.hx-price:focus-within,.w-input:focus {
  outline:none;border-color:transparent;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 5px rgba(29,27,23,.07);
}
.w-sub2 .w-input,.hx-card :is(.hx-input,.hx-select,.hx-mini-input,.hx-mini-select),.hx-list :is(.hx-mini-input,.hx-mini-select,.hx-price) {
  background-color:var(--bg);box-shadow:none;
}
.w-sub2 .w-input:focus,.hx-card :is(.hx-input,.hx-select,.hx-mini-input,.hx-mini-select):focus,
.hx-list :is(.hx-mini-input,.hx-mini-select):focus,.hx-list .hx-price:focus-within {
  box-shadow:inset 0 0 0 2px var(--ink),0 0 0 5px rgba(29,27,23,.07);
}

/* Chips on the canvas are white; chips inside cards use the page background. */
.hx-chip,.hx-inc,.hx-day,.choice-chip,.w-chip,.w-opt {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;min-height:42px;padding:0 16px;border:0;border-radius:999px;
  background:var(--card);box-shadow:var(--ring);color:var(--ink2);font-size:14.5px;font-weight:600;
}
.w-chip {height:38px;min-height:38px;padding:0 14px 0 12px;}
.hx-card :is(.hx-chip,.hx-inc,.hx-day),.hx-list .hx-inc,.w-opt {background:var(--bg);box-shadow:none;}
.hx-chip.on,.hx-inc.on,.hx-day.on,.choice-chip[aria-pressed=true],.w-opt.sel {
  background:var(--ink);border-color:transparent;color:var(--card);box-shadow:none;
}
.hx-inc:has(input[type=checkbox]:checked) {
  background:var(--ink);border-color:transparent;color:var(--card);box-shadow:none;
}
.hx-chip.more {border-style:none;color:var(--green);}
.hx-inc {text-decoration:none;}
.hx-inc svg {opacity:0;}
.hx-inc.on svg {opacity:1;}

/* An excluded item is selected as an exclusion, not as promised work. */
.hx .hx-inc.ex.on,.hx .hx-inc.ex:has(input[type=checkbox]:checked) {
  background:var(--sand);color:var(--ink2);box-shadow:var(--ring);
}
.hx .hx-inc.ex:has(input[type=checkbox]:checked)::before {content:'−';}

/* State labels keep their words as well as different colors. */
:is(.hx-setup-state,.provider-setup-state)[data-state-kind=complete] {color:var(--green);}
:is(.hx-setup-state,.provider-setup-state)[data-state-kind=action] {color:var(--warm);}
:is(.hx-setup-state,.provider-setup-state)[data-state-kind=pending] {color:var(--muted);}
:is(.hx-setup-state,.provider-setup-state)[data-state-kind=blocked] {color:var(--ink);}

/* Keep native input semantics and give bare checkboxes the shared A2 surface. */
input[type=checkbox],.hx-cb input {
  appearance:none;display:inline-block;width:24px;height:24px;min-height:24px;flex:none;
  padding:0;border:0;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1.5px rgba(64,48,24,.25);
  accent-color:var(--green);vertical-align:middle;
}
input[type=checkbox]:checked {
  background:var(--green);box-shadow:none;
}
input[type=checkbox]:checked::after {
  content:'';display:block;width:12px;height:7px;margin:7px 6px;
  border-left:2.2px solid var(--card);border-bottom:2.2px solid var(--card);
  transform:rotate(-45deg);
}
input[type=checkbox]:focus-visible {
  outline:2px solid var(--ink);outline-offset:3px;
}
.hx-cb {border:0;border-radius:0;padding:0;gap:12px;font-size:15px;line-height:1.45;color:var(--ink2);}
.hx-cb.on {background:transparent;}
.hx-box,.w-box {
  display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:-1px;border:0;border-radius:8px;
  background:var(--card);box-shadow:inset 0 0 0 1.5px rgba(64,48,24,.25);color:transparent;
}
.hx-dcheck.on .hx-box,.w-box.on {background:var(--green);color:var(--card);box-shadow:none;}

/* Card geometry only: each page owns card placement and content spacing. */
.hx-card,.hx-list,.hx-next,.w-type,.w-leg,.w-term,.w-sub2 {
  border:0;border-radius:24px;background:var(--card);box-shadow:var(--sh1);
}
.w-sum {border:0;border-radius:28px;background:var(--card);box-shadow:var(--sh2);}

/* Progress labels remain real page content; the shared skin only styles states. */
.hx-segs{counter-reset:a2-join-step;}
.hx-segs,.w-steps {
  display:flex;align-items:center;gap:4px;margin:0;padding:5px;border-radius:999px;
  background:var(--card);box-shadow:var(--ring);list-style:none;
}
.hx-seg {
  counter-increment:a2-join-step;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:34px;padding:0;border:0;border-radius:999px;background:var(--sand);color:var(--muted);
  transition:none;
}
.hx-seg::before{content:counter(a2-join-step);font-size:12px;font-weight:800;}
.hx-seg.done::before{content:'✓';font-size:14px;}
.hx-seg.done {background:var(--green);color:var(--card);}
.hx-seg.now {width:38px;background:var(--ink);color:var(--card);}
.w-steps li {
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 9px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--muted);
}
.w-steps li i {display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sand);font-style:normal;font-size:12px;font-weight:800;}
.w-steps li.done i {background:var(--green);color:var(--card);}
.w-steps li.now {background:var(--ink);color:var(--card);}
.w-steps li.now i {background:var(--card);color:var(--ink);}

:where(button,a,input,select,textarea):focus-visible {outline:2px solid var(--ink);outline-offset:3px;}
@media (prefers-reduced-motion:reduce) {
  :where(.hx-btn,.hx-chip,.hx-inc,.hx-day) {transition:none;}
}

/* Structured service details: shared, optional sections on both sides. */
.offering-fields {margin-block:20px;min-width:0}
.offering-fields details,.hx-offering-price {padding:14px 0;border:0;border-top:1px solid var(--line)}
.offering-fields summary,.hx-offering-price summary {font-weight:600;cursor:pointer}
.offering-fields label:not(.check):not(.hx-cb),.hx-offering-price label {display:flex;flex-direction:column;gap:6px;margin-block:12px;min-width:0}
.offering-fields input:not([type=checkbox]),.offering-fields select,.offering-fields textarea,.hx-offering-price input,.hx-offering-price select {box-sizing:border-box;max-width:100%;width:100%;min-width:0;padding:10px 12px;border:0;border-radius:10px;background:var(--card);box-shadow:var(--ring);font:inherit;color:var(--ink)}
.offering-fields textarea {min-height:88px;resize:vertical}
.offering-fields fieldset {display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0;border:0;padding:0;min-width:0}
.offering-fields legend {margin-bottom:8px;font-weight:600}
.offering-fields .check {display:flex;gap:8px;align-items:flex-start;max-width:100%}
.offering-fields .form-row,.hx-offering-price .form-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.offering-fields input[type=file] {font-size:13px}
.offering-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-block:14px}
.offering-gallery a {min-width:0;overflow-wrap:anywhere}
.offering-gallery img {width:100%;height:140px;object-fit:cover;border-radius:12px;display:block}
.offering-preview {overflow-wrap:anywhere;min-width:0}
.offering-preview dl>div {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:8px 0}
.offering-preview dd {margin:0}
@media(max-width:600px){.offering-fields .form-row,.hx-offering-price .form-row{grid-template-columns:1fr}.offering-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.offering-gallery img{height:110px}}

/* Keep multi-room setup to one editable card at a time. */
.hx-service-editor>summary {font-weight:600;cursor:pointer;padding-block:14px}
.hx-cancellation-note>summary {cursor:pointer;font-size:13px}
.vd-service-editor [data-service-row]>summary {cursor:pointer;font-weight:600;padding-block:14px}

.hx-service-editor>.hx-label {display:block;margin-block:14px}
.hx-service-editor>.hx-label input {display:block;width:100%;margin-top:8px;box-sizing:border-box}