/* Admin: the same system, tuned for density and speed. */
.ad { position: absolute; inset: 0; display: grid; grid-template-columns: 244px minmax(0, 1fr); background: var(--bg-2); }
.ad-side { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) var(--s-3); background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; }
.ad-brand { display: flex; align-items: center; gap: var(--s-2); padding: 4px var(--s-2) var(--s-5); }
.ad-brand .logo svg { height: 26px; }
.ad-brand span { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-left: 1px solid var(--border); padding-left: var(--s-2); }
:is(.ad-side, .ad-drawer) .nav-i { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); text-align: left; width: 100%; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
:is(.ad-side, .ad-drawer) .nav-i .i { width: 18px; height: 18px; }
:is(.ad-side, .ad-drawer) .nav-i:hover { background: var(--bg-2); color: var(--text); }
:is(.ad-side, .ad-drawer) .nav-i[aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: var(--fw-semibold); }
:is(.ad-side, .ad-drawer) .nav-i .badge { margin-left: auto; height: 18px; font-size: 10px; }
/* Menu headings: the website's pages, then the business. */
:is(.ad-side, .ad-drawer) .nav-g { margin: var(--s-4) 0 4px; padding: 0 var(--s-3); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ad-side .foot-link, .ad-drawer .foot-link { margin-top: auto; padding: var(--s-3); display: grid; justify-items: start; gap: var(--s-2); }
.foot-link .btn-link { display: inline-flex; align-items: center; gap: 6px; }
.ad-main { min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The header's contents line up with the page's, which sit centered on a wide screen. */
.ad-main { --ad-w: 1320px; --ad-pad: var(--s-6); }
.ad-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-3); height: 60px; padding: 0 max(var(--ad-pad), calc((100% - var(--ad-w)) / 2 + var(--ad-pad))); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border); }
.ad-search { position: relative; width: min(360px, 100%); }
.ad-search .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); }
.ad-search .input { padding-left: 36px; min-height: 38px; border-radius: var(--r-pill); background: var(--bg-2); border-color: transparent; font-size: var(--fs-sm); }
.ad-top-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.ad-menu-btn { display: none; }
/* One column that never grows past the screen: a long row of filters scrolls inside it instead. */
.ad-body { padding: var(--s-6) var(--ad-pad) var(--s-10); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); max-width: var(--ad-w); margin-inline: auto; }
.ad-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-4); flex-wrap: wrap; min-height: 56px; }
.ad-ph > div:first-child { flex: 1 1 320px; min-width: 0; max-width: 72ch; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 6px; }
.crumbs button { color: var(--text-2); border-radius: var(--r-xs); }
.crumbs button:hover { color: var(--accent); }
.crumbs .i { width: 12px; height: 12px; }
.ad-ph h1 { font-family: var(--font-display); font-size: 24px; font-weight: var(--fw-bold); letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ad-ph p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }
.ad-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.dirty { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.ad-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ad-toolbar .select { width: auto; min-height: 38px; font-size: var(--fs-sm); }
.ad-toolbar .ad-search { width: 240px; }
.ad-toolbar .ad-search .input { background: var(--surface); border-color: var(--border-strong); }
.card-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }

/* Services table */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 900px; }
.tbl th { text-align: left; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background-color var(--t-fast) var(--ease); }
.tbl tbody tr:hover { background: var(--n-25); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.is-muted .svc-cell b { color: var(--text-3); }
.svc-cell { display: flex; align-items: center; gap: var(--s-3); text-align: left; border-radius: var(--r-sm); }
.svc-thumb { width: 60px; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; flex: none; background: var(--bg-2); border: 1px solid var(--border); }
.svc-cell b { display: block; font-weight: var(--fw-semibold); color: var(--text); }
.svc-cell small { display: block; font-size: var(--fs-cap); color: var(--text-3); }
.svc-cell:hover b { color: var(--accent); }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.row-actions .btn-icon { width: 32px; min-height: 32px; color: var(--text-2); }
.row-actions .btn-icon .i { width: 16px; height: 16px; }
.ad-cards { display: none; gap: var(--s-3); }
.ad-card { padding: var(--s-4); display: grid; gap: var(--s-3); }
.ad-card-top { display: flex; align-items: center; gap: var(--s-3); }
.ad-card-meta { display: flex; flex-wrap: wrap; gap: 6px var(--s-3); align-items: center; font-size: var(--fs-xs); color: var(--text-2); }

/* Editor */
.tabs { display: flex; gap: 2px; padding: 3px; background: var(--bg-3); border-radius: var(--r-md); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs button { position: relative; flex: none; min-height: 36px; padding: 0 var(--s-4); border-radius: 9px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(14, 26, 43, 0.12); }
.tabs button .err-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.ed { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-5); align-items: start; }
.ed-main { display: grid; gap: var(--s-4); min-width: 0; }
/* The service's sections, in the order providers meet them; the bar jumps to one. */
.ed-jump { position: sticky; top: 60px; z-index: 5; display: flex; gap: 4px; padding: 6px; margin: 0 calc(-1 * var(--s-1)); background: var(--bg-2); overflow-x: auto; scrollbar-width: none; }
.ed-jump button { position: relative; flex: none; min-height: 34px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); }
.ed-jump button:hover { color: var(--accent); border-color: var(--accent-tint-2); }
.ed-jump .err-dot { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.ed-panel { scroll-margin-top: 116px; }
.ed-panel-h { display: grid; gap: 4px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.ed-panel-h h2 { font-size: var(--fs-h3); }
.ed-panel-h p { font-size: var(--fs-sm); color: var(--text-2); }
.row-in { display: flex; gap: 6px; align-items: center; }
.row-in > .input { flex: 1; min-width: 0; }
.rec-foot { display: flex; justify-content: space-between; align-items: center; }
.rec-foot .row-switch { padding: 0; gap: 10px; }
.input.is-static { display: flex; align-items: center; color: var(--text-3); background: var(--bg-2); }
.ed-panel { padding: var(--s-6); display: grid; gap: var(--s-5); animation: om-enter var(--t-base) var(--ease); }
.ed-panel.no-anim { animation: none; }
.ed-panel > h2 { font-size: var(--fs-h3); }
.ed-sub { display: grid; gap: var(--s-3); }
.ed-sub > h3 { font-size: var(--fs-cap); font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.row-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; }
.row-switch b { display: block; font-size: var(--fs-sm); }
.row-switch small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.err-sum { display: grid; gap: 6px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--danger-tint); color: var(--danger); font-size: var(--fs-sm); border: 1px solid #F5C2BD; }
.err-sum b { display: flex; align-items: center; gap: var(--s-2); }
.err-sum ul { display: grid; gap: 2px; padding-left: 28px; list-style: disc; }
.err-sum button { color: var(--danger); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--fw-semibold); border-radius: var(--r-xs); }

/* Pricing editor */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.pm { position: relative; display: grid; gap: 4px; align-content: start; padding: var(--s-3); border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--surface); text-align: left; min-height: 86px; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.pm:hover { border-color: var(--border-strong); }
.pm .i { color: var(--text-2); width: 18px; height: 18px; }
.pm b { font-size: var(--fs-sm); }
.pm small { font-size: 11.5px; color: var(--text-3); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm[aria-checked="true"] { border-color: var(--accent-bright); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-bright); }
.pm[aria-checked="true"] .i { color: var(--accent); }
.pm[aria-checked="true"]::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat; }
.qo { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.qo-row { display: grid; grid-template-columns: 22px minmax(0, 1.5fr) 84px 124px minmax(0, 1fr) 40px 60px 72px 36px; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); background: var(--surface); }
.qo-row.h > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qo-row.h > span:nth-child(6), .qo-row.h > span:nth-child(7) { text-align: center; }
.qo-row:first-child { border-top: 0; }
.qo-row.h { background: var(--bg-2); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); min-height: 36px; }
.qo-row.is-rec { background: var(--accent-tint); }
.qo-row .grip { color: var(--n-400); display: flex; }
.qo-row .grip .i { width: 16px; height: 16px; }
.qo-row .input, .qo-row .select { min-height: 38px; font-size: var(--fs-sm); }
.qo-row .per { font-size: var(--fs-cap); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qo-row .star { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--n-400); }
.qo-row .star:hover { background: var(--bg-3); color: var(--text-2); }
.qo-row .star[aria-pressed="true"] { color: var(--accent); }
.qo-row .star[aria-pressed="true"] .i { fill: currentColor; }
.qo-row .def { display: flex; justify-content: center; }
.qo-row .def input { width: 18px; height: 18px; accent-color: var(--accent); }
.qo-row .mv { display: flex; gap: 2px; }
.qo-row .mv button, .qo-row .del { width: 34px; height: 34px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.qo-row .mv button:hover:not(:disabled), .qo-row .del:hover:not(:disabled) { background: var(--bg-3); color: var(--text); }
.qo-row .mv button:disabled, .qo-row .del:disabled { opacity: 0.3; }
.qo-row .mv .i, .qo-row .del .i { width: 15px; height: 15px; }
.qo-row .quote-lbl { font-size: var(--fs-xs); color: var(--text-2); font-style: italic; }
.qo-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.ex-row { display: grid; grid-template-columns: 72px 170px minmax(0, 1fr) minmax(0, 1fr) 72px 36px; gap: var(--s-2); align-items: center; }
.ex-thumb { width: 72px; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s-4); }
.status-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.ed-side { position: sticky; top: 76px; display: grid; gap: var(--s-4); }
/* The price chooser, narrow in the preview: the option's price under its name. */
.ed-side .choice { flex-wrap: wrap; row-gap: 4px; }
.ed-side .choice-main { flex-basis: calc(100% - 40px); }
.ed-side .choice-price { flex-basis: 100%; text-align: left; padding-left: 34px; }
.ed-side .card-panel { padding: var(--s-4); display: grid; gap: var(--s-3); }
.ed-side .scard { pointer-events: none; }
.ed-side .choices { pointer-events: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-4); font-size: var(--fs-xs); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; color: var(--text); font-weight: var(--fw-medium); }
.ph-page { padding: var(--s-7); display: grid; justify-items: center; text-align: center; gap: var(--s-2); }
.ph-page .state-ico { width: 56px; height: 56px; }
.ph-page p { color: var(--text-2); max-width: 46ch; font-size: var(--fs-sm); }
.ph-page .ents { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--s-2); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.dash-card { padding: var(--s-5); display: grid; gap: var(--s-2); text-align: left; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.dash-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.dash-card .i { color: var(--accent); }
.dash-card b { font-size: var(--fs-body); display: flex; align-items: center; gap: var(--s-2); }
.dash-card p { font-size: var(--fs-xs); color: var(--text-2); }
.confirm { width: min(420px, calc(100% - 32px)); padding: var(--s-6); display: grid; gap: var(--s-3); }
.confirm h2 { font-size: var(--fs-h3); }
.confirm p { font-size: var(--fs-sm); color: var(--text-2); }
.confirm .ad-actions { justify-content: flex-end; margin-top: var(--s-3); }
.ad-drawer { padding: var(--s-4) var(--s-3); gap: 2px; }

@container dev (max-width: 1100px) {
  .ad { grid-template-columns: 200px minmax(0, 1fr); }
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qo-row { grid-template-columns: 18px minmax(0, 1.4fr) 70px 110px 40px 40px 72px 34px; }
  .qo-row .per, .qo-row.h .h-per { display: none; }
  .ex-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 72px 36px; }
  .ex-row .select { display: none; }
}
@container dev (max-width: 700px) {
  .ad { grid-template-columns: minmax(0, 1fr); }
  .ad-side { display: none; }
  .ad-menu-btn { display: inline-flex; }
  .ad-top { padding: 0 var(--s-3); }
  .ad-top .ad-search { display: none; }
  .ad-body { padding: var(--s-4) var(--s-3) var(--s-10); }
  .ad-ph h1 { font-size: 20px; }
  .tbl-wrap { display: none; }
  .ad-cards { display: grid; }
  .ad-toolbar .ad-search { width: 100%; }
  .ed-panel { padding: var(--s-4); }
  .ed-side { grid-template-columns: minmax(0, 1fr); }
  .grid2, .grid3, .checks, .status-choices { grid-template-columns: minmax(0, 1fr); }
  .qo-row { grid-template-columns: minmax(0, 1fr) 64px 100px 34px; grid-template-areas: none; row-gap: 6px; }
  .qo-row .grip, .qo-row .per, .qo-row .def, .qo-row.h .h-hide { display: none; }
  .qo-row .star { order: 5; }
  .qo-row .mv { order: 6; }
  .qo-row.h .h-mv, .qo-row.h .h-star { display: none; }
  .ex-row { grid-template-columns: 56px minmax(0, 1fr) 36px; }
  .ex-row .ex-cap, .ex-row .mv { display: none; }
}

/* ---------- Plan builder: the builder as providers see it, with the admin's tools ---------- */
.pb { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.pb-cats { position: sticky; top: 76px; display: grid; gap: 2px; padding: var(--s-3); }
.pb-cats .eyebrow { padding: 4px var(--s-2) var(--s-2); }
.pb-cats .help { padding: var(--s-2) var(--s-2) 0; font-size: var(--fs-cap); }
/* Each category: its button, then the switch that shows or hides it. */
.pb-cat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding-right: 8px; border-radius: var(--r-md); }
.pb-cat.is-on { background: var(--accent-tint); }
.pb-cat-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: 6px var(--s-2); border-radius: var(--r-md); text-align: left; }
.pb-cat:not(.is-on) .pb-cat-btn:hover { background: var(--bg-2); }
.pb-cat-btn .cnav-ico { width: 32px; height: 32px; }
.pb-cat.is-on .cnav-ico { background: var(--surface); color: var(--accent); }
.pb-cat.is-off .pb-cat-t b { color: var(--text-3); }
.pb-cat-t { display: grid; gap: 2px; min-width: 0; }
.pb-cat-t b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-cat-btn .n { font-size: var(--fs-cap); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pb-cat.is-off .cnav-ico { opacity: 0.55; }
.pb-order { display: inline-flex; gap: 2px; }
.pb-hidden { align-items: center; }
.pb-hidden > span { flex: 1; }
.pb-cats .ad-search { width: 100%; margin-bottom: var(--s-2); }
.pb-cats .ad-search .input { background: var(--bg-2); }
.pb-cat-add { justify-self: start; margin-top: var(--s-1); }
.pb-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-3); font-weight: var(--fw-medium); white-space: nowrap; }
.pb-flag .i { width: 13px; height: 13px; }
.pb-flag.is-home { color: var(--accent); }
.pb-flag.is-off { color: #9A5B00; }
.pb-main { display: grid; gap: var(--s-4); min-width: 0; align-content: start; }
.pb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.pb-title { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.pb-title h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.pb-title p { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.pb-ico { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: var(--accent); display: grid; place-items: center; flex: none; }
.pb-ico .i { width: 22px; height: 22px; }
.pb-head-tools { display: flex; align-items: center; gap: var(--s-3); }
.pb-filters { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pb-filters-l { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-right: var(--s-2); }
.pb-chip { display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); }
.pb-chip > button:first-child { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.pb-chip .n { font-size: var(--fs-cap); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pb-chip.is-on { background: var(--accent-tint); border-color: var(--accent-bright); }
.pb-chip.is-on > button:first-child { color: var(--accent); font-weight: var(--fw-semibold); }
.pb-chip-edit { width: 30px; height: 30px; margin-right: 3px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
.pb-chip-edit:hover { background: var(--bg-3); color: var(--accent); }
.pb-cards { align-items: stretch; }
.pb-card { position: relative; display: grid; grid-template-rows: 1fr auto; border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--border); transition: box-shadow var(--t-fast) var(--ease); }
.pb-card:hover { box-shadow: 0 0 0 2px var(--accent-bright), var(--sh-2); }
.pb-view { display: grid; min-width: 0; }
.pb-view .scard { border: 0; box-shadow: none; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.pb-card.is-off .pb-view { opacity: 0.55; filter: saturate(0.4); }
.pb-hit { position: absolute; inset: 0 0 52px; z-index: 1; border-radius: var(--r-xl) var(--r-xl) 0 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: var(--s-3); }
.pb-hit-lbl { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); box-shadow: var(--sh-2); opacity: 0; transform: translateY(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.pb-hit:hover .pb-hit-lbl, .pb-hit:focus-visible .pb-hit-lbl { opacity: 1; transform: none; }
.pb-hit:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-bright); }
.pb-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 52px; padding: 6px var(--s-2) 6px var(--s-4); border-top: 1px solid var(--border); background: var(--n-25); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.pb-state { display: grid; gap: 1px; min-width: 0; }
.pb-state small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.pb-tools .btn-icon { width: 30px; min-height: 30px; color: var(--text-2); }
.pb-tools .switch { margin-left: 6px; }
.pb-add { display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 280px; padding: var(--s-5); border-radius: var(--r-xl); border: 1.5px dashed var(--border-strong); color: var(--text-2); text-align: center; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.pb-add:hover { border-color: var(--accent-bright); background: var(--accent-tint); color: var(--accent); }
.pb-add-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; margin-bottom: var(--s-2); }
.pb-add b { font-size: var(--fs-sm); color: var(--text); }
.pb-add small { font-size: var(--fs-xs); }
.pb-foot { display: flex; justify-content: center; }


/* ---------- Drawers: the category editor and the home page editor ---------- */
.ad-drawer-r { width: min(460px, 94%); display: flex; flex-direction: column; }
.dr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--border); }
.dr-head h2 { font-size: var(--fs-h3); margin-top: 2px; }
.dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.dr-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--n-25); }
.dr-foot .dirty { margin-right: auto; }
.cd-preview { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-2); }
.cd-tile { width: min(260px, 100%); justify-self: center; pointer-events: none; }
.ico-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.ico-pick button { height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); background: var(--surface); }
.ico-pick button:hover { border-color: var(--border-strong); color: var(--text); }
.ico-pick button[aria-checked="true"] { border-color: var(--accent-bright); background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-bright); }
.cd-sec { display: grid; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cd-pic { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cd-thumb { width: 72px; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); }
.cd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-danger { padding-top: var(--s-2); }
.t-danger { color: var(--danger); }
.t-danger:hover { background: var(--danger-tint); }

/* ---------- Home page editor: the page itself, in a browser frame ---------- */
.hp-stage { display: flex; justify-content: center; transition: margin-right var(--t-slow) var(--ease); }
/* While a part is being edited, the page moves over so the panel never covers it. */
#device:has(.hp-drawer) .hp-stage { margin-right: min(460px, 40%); }
.hp-frame { width: 100%; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px var(--border), var(--sh-2); overflow: hidden; }
.hp-stage.is-phone .hp-frame { width: 390px; border-radius: 34px; box-shadow: 0 0 0 10px #0E1A2B, 0 0 0 11px var(--border), var(--sh-3); margin-block: var(--s-3); }
.hp-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--s-4); background: var(--bg-3); border-bottom: 1px solid var(--border); }
.hp-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-300); }
.hp-bar span { margin-left: var(--s-3); padding: 2px var(--s-3); border-radius: var(--r-pill); background: var(--surface); font-size: 11.5px; color: var(--text-3); }
.hp-stage.is-phone .hp-bar { justify-content: center; }
.hp-stage.is-phone .hp-bar i { display: none; }
.hp-page { container: dev / inline-size; position: relative; background: var(--bg); }
.hp-page .nav { position: relative; }
.hp-page [data-part] { position: relative; }
.hp-page [data-part]::after { content: ""; position: absolute; inset: -8px; border: 2px dashed transparent; border-radius: 14px; pointer-events: none; transition: border-color var(--t-fast) var(--ease); }
.hp-page:not(.is-ro) [data-part]:hover::after { border-color: var(--accent-tint-2); }
.hp-page .nav[data-part]::after { inset: 2px; }
.hp-page[data-editing="nav"] [data-part="nav"]::after, .hp-page[data-editing="hero"] [data-part="hero"]::after, .hp-page[data-editing="examples"] [data-part="examples"]::after,
.hp-page[data-editing="offer"] [data-part="offer"]::after, .hp-page[data-editing="how"] [data-part="how"]::after, .hp-page[data-editing="cta"] [data-part="cta"]::after,
.hp-page[data-editing="footer"] [data-part="footer"]::after { border-color: var(--accent-bright); border-style: solid; }
/* Each part's Edit button sits on its top-left corner, like a label; the menu's sits on its bottom
   edge, and the footer's at the end of its row. */
.hp-edit { position: absolute; z-index: 25; top: -16px; left: -6px; width: max-content; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--s-3) 0 10px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0; box-shadow: 0 2px 8px rgba(11, 111, 201, 0.35); white-space: nowrap; }
.hp-edit:hover { background: var(--accent-hover); }
.hp-edit .i { width: 14px; height: 14px; }
.hp-page .nav .hp-edit { top: auto; bottom: -15px; left: auto; right: var(--s-4); }
.hp-page [data-part="hero"] > .hp-edit { top: -42px; }
.ad-ph .seg button { display: inline-flex; align-items: center; gap: 6px; }
.hp-page .foot .hp-edit { position: static; margin-left: auto; }
.hp-page.is-ro .hp-edit { display: none; }
.hp-page .rail-go .i { width: 14px; height: 14px; }
.hp-empty { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); border: 1.5px dashed var(--border-strong); color: var(--text-2); font-size: var(--fs-sm); }
.hp-drawer { box-shadow: var(--sh-3); }
.hx-card { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.hx-top { display: flex; align-items: center; gap: var(--s-3); }
.hx-top b { font-size: var(--fs-sm); }
.hx-thumb { position: relative; width: 64px; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); flex: none; }
.hx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(14, 26, 43, 0.3); }
.hx-tools { margin-left: auto; display: flex; gap: 2px; }
.hx-n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: var(--fw-bold); font-size: var(--fs-sm); display: grid; place-items: center; flex: none; overflow: hidden; }
.hx-n .inj-logo { width: 28px; height: 28px; }
.hp-tiles { display: grid; gap: 6px; padding-top: var(--s-2); border-top: 1px solid var(--border); }
.hp-tiles .help { margin-bottom: var(--s-2); }
.hp-tile-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); border: 1px solid var(--border); }
.hp-tile-row.is-off { background: var(--bg-2); }
.hp-tile-row .cnav-ico { width: 30px; height: 30px; flex: none; }
.hp-tile-t { display: grid; min-width: 0; flex: 1; }
.hp-tile-t b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-tile-t small { font-size: 11.5px; color: var(--text-3); }
.hp-tile-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.hp-tile-tools .switch { margin: 0 6px; }

@container dev (max-width: 1100px) {
  .pb { grid-template-columns: 210px minmax(0, 1fr); }
  #device:has(.hp-drawer) .hp-stage { margin-right: 0; }
}
@container dev (max-width: 900px) {
  .pb { grid-template-columns: minmax(0, 1fr); }
  .pb-cats { position: static; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pb-cats .eyebrow, .pb-cats .help { grid-column: 1 / -1; }
  .ed-jump { top: 60px; }
}
@container dev (max-width: 700px) {
  .ed-jump { margin: 0; }
  .pb-cats { grid-template-columns: minmax(0, 1fr); }
  .pb-head-tools { width: 100%; justify-content: space-between; }
  .hp-stage.is-phone .hp-frame { width: 100%; box-shadow: 0 0 0 1px var(--border), var(--sh-2); border-radius: var(--r-xl); }
  .ad-drawer-r { width: 100%; border-radius: 0; }
}