/* ServicesPanel (services-panel.js): the Services page and the form editor's Services step.
   Theme tokens only (portal.css defines them for light and dark), so nothing here carries a
   colour of its own. The panel lays itself out by its own width (a container query), not the
   window's, so the same rows read well full width on the page and in the editor's column:
   one line per service when there is room, two lines in between, stacked cards on a phone. */

.sp { --sp-grip: 28px; --sp-icon: 28px; container: sp / inline-size; display: grid; gap: 28px; min-width: 0; max-width: 1240px; }
.sp-form { gap: 20px; max-width: none; }
.sp > .page-heading { margin-bottom: -8px; }
.sp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sp-section { display: grid; gap: 12px; min-width: 0; }
.sp-title { font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.sp-form .sp-title { font-size: 13px; }
.sp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sp-add { gap: 6px; min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; }
.sp-empty { margin: 0; color: var(--ink-3); font-size: 13px; }
.sp-section > .sp-empty {
  padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--radius-card);
  text-align: center; background: var(--surface);
}
.sp-problem { margin: 0; color: var(--rust); font-size: 13px; line-height: 1.45; }
.sp-problem:empty { display: none; }

/* Icons are drawn with the text colour. */
.sp-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
.sp-add .sp-icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ controls */
.sp input:not([type=checkbox]), .sp textarea { width: 100%; min-width: 0; min-height: 32px; font-size: 13px; }
.sp input:not([type=checkbox]) { height: 32px; padding-top: 0; padding-bottom: 0; padding-left: 10px; padding-right: 10px; }
.sp textarea.sp-description, .sp textarea.sp-pkg-description {
  min-height: 32px; max-height: 136px; padding: 6px 10px; resize: none; field-sizing: content;
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
/* A description reads as quiet text until it is pointed at (a hairline on the surface) or typed in
   (the normal field focus: brand border and ring). */
.sp textarea.sp-description, .sp textarea.sp-pkg-description {
  border-color: transparent; background: transparent; box-shadow: none;
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.sp textarea.sp-description::placeholder, .sp textarea.sp-pkg-description::placeholder { color: var(--ink-3); }
.sp textarea.sp-description:hover, .sp textarea.sp-pkg-description:hover { border-color: var(--line-2); background: var(--surface); }
.sp textarea.sp-description:focus, .sp textarea.sp-pkg-description:focus {
  outline: none; border-color: var(--brand); background: var(--surface); color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring);
}
.sp [aria-invalid="true"] { border-color: var(--rust); }
.sp .cs { width: 100%; min-width: 0; }

.sp-cell { display: grid; gap: 6px; min-width: 0; align-content: start; }
.sp-cell-label { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ink-3); }
.sp-cell-name { gap: 8px; }
.sp .sp-name, .sp .sp-pkg-name { font-weight: 500; }

.sp-money { position: relative; display: block; min-width: 0; }
.sp-money-sign {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 13px; pointer-events: none;
}
.sp input.sp-money-input { padding-left: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-price-group { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(108px, 1.15fr); gap: 8px; min-width: 0; }
/* Size tiers: the unit alone in the price cell; the brackets sit under the row. */
.sp-price-group.is-tiered { grid-template-columns: minmax(0, 1fr); }
.sp-money[hidden] { display: none; }
.sp-price-group:has(> .sp-money[hidden]) { grid-template-columns: minmax(0, 1fr); }
.sp-soon { color: var(--ink-3); font-size: 12px; line-height: 1.4; }

.sp-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.sp-toggles > .sp-switch { flex: 0 0 auto; width: auto; }
.sp .sp-switch { gap: 8px; min-height: 32px; font-size: 13px; color: var(--ink-2); }
.sp .sp-switch .switch-text { flex: 0 1 auto; white-space: nowrap; }

/* The six dots. Pointer events drive the drag, so the browser must not scroll from here. */
.sp-handle {
  grid-area: handle; display: grid; place-items: center; width: var(--sp-grip); min-width: 0; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink-3);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.sp-handle .sp-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.sp-handle:hover { color: var(--ink); background: var(--surface-3); }
.sp-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; color: var(--ink); }
.sp-list.is-dragging, .sp-list.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

.sp-icon-button {
  display: grid; place-items: center; flex: none; width: var(--sp-icon); height: var(--sp-icon); padding: 0; border: 0;
  border-radius: var(--radius-control); background: transparent; color: var(--ink-3);
  transition: color var(--motion-fast), background var(--motion-fast);
}
.sp-icon-button:hover { background: var(--surface-3); color: var(--ink); }
.sp-icon-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sp-delete { grid-area: delete; }
.sp-delete:hover { background: var(--rust-soft); color: var(--rust); }
.sp-more .sp-icon { transition: transform var(--motion-base); }
.sp-more[aria-expanded="true"] .sp-icon { transform: rotate(180deg); }
.sp-more[aria-expanded="true"] { color: var(--ink); background: var(--surface-3); }

/* "Offer on this form": the 22px brand checkbox the editor's other choices use. */
.sp-offer { grid-area: offer; position: relative; display: grid; place-items: center; width: var(--sp-grip); height: 32px; cursor: pointer; }
.sp input.sp-offer-input {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.sp input.sp-offer-input::before, .sp input.sp-offer-input::after { content: none; display: none; }
.sp-offer-box {
  display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--line-strong);
  border-radius: 4px; background: var(--surface); pointer-events: none;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.sp-offer-box .sp-icon { width: 12px; height: 12px; stroke: var(--on-brand); stroke-width: 2.25; opacity: 0; }
.sp-offer-input:checked + .sp-offer-box { background: var(--brand); border-color: var(--brand); }
.sp-offer-input:checked + .sp-offer-box .sp-icon { opacity: 1; }
.sp-offer-input:focus-visible + .sp-offer-box { outline: 2px solid var(--focus); outline-offset: 2px; }

.sp-id-line:empty { display: none; }
.sp-id-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.sp-id-label { font-size: 12px; font-weight: 550; color: var(--ink-3); }
.sp-id-value {
  min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
}
.sp-id {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 2px 10px;
  border: 1px solid var(--line-2); border-radius: var(--radius-control); background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: 12px; font-weight: 600;
}
.sp-id:hover { background: var(--surface-2); color: var(--ink); }
.sp-id.is-copied { color: var(--positive-ink); border-color: var(--positive-line); background: var(--positive-soft); }
/* A 44px square of finger around a small button. */
.sp-id::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }

/* ------------------------------------------------------------------ the service list */
.sp-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.sp-service-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.sp-service-list:not(:has(.sp-row)) { display: none; }
.sp-row {
  position: relative; display: grid; align-items: start; column-gap: 14px; min-width: 0;
  padding: 10px 12px 10px 4px; border-top: 1px solid var(--line); background: var(--surface);
  transition: box-shadow var(--motion-fast), background var(--motion-fast);
}
.sp-row:first-of-type { border-top: 0; border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); }
.sp-row:last-of-type { border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
.sp-row.is-off .sp-name, .sp-row.is-off .sp-money-input, .sp-row.is-off .cs-value { color: var(--ink-3); }
.sp-row > .sp-cell-name { grid-area: name; }
.sp-row > .sp-cell-about { grid-area: about; display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.sp-cell-about > .sp-description { flex: 1 1 auto; min-width: 0; }
.sp-cell-about > .sp-more { flex: none; }
.sp-row > .sp-cell-price { grid-area: price; }
.sp-row > .sp-cell-source { grid-area: source; }
.sp-row > .sp-cell-minimum { grid-area: minimum; }
.sp-row > .sp-cell-toggles { grid-area: toggles; }
.sp-row > .sp-problem { grid-area: problem; margin-top: 8px; }
.sp-row > .sp-confirm { grid-area: confirm; }
.sp-row > .sp-more { grid-area: more; }
.sp-row > .sp-details { grid-area: details; }
.sp-row > .sp-tiers { grid-area: tiers; }

/* Lifted while dragging: it follows the finger, the other rows slide aside, and a dashed slot
   shows where it will land. */
.sp-row.is-lifted, .sp-pkg.is-lifted {
  z-index: 3; box-shadow: var(--shadow-pop); background: var(--surface); border-radius: var(--radius-card);
  outline: 1px solid var(--line-2); transition: none;
}
.sp-list.is-dragging > .sp-row:not(.is-lifted), .sp-list.is-dragging > .sp-pkg:not(.is-lifted) {
  transition: transform var(--motion-base);
}
.sp-list.is-settling > * { transition: none !important; }
.sp-drop {
  position: absolute; left: 6px; right: 6px; z-index: 1; border: 1.5px dashed var(--brand);
  border-radius: var(--radius-card); background: var(--brand-soft); pointer-events: none;
}
.sp-package-list > .sp-drop { left: 0; right: 0; border-radius: var(--radius-card); }

/* Page: stacked on a phone. Labels sit over their controls. */
.sp-page .sp-row {
  grid-template-columns: var(--sp-grip) minmax(0, 1fr) var(--sp-icon);
  grid-template-areas:
    "handle name delete"
    ". about about"
    ". details details"
    ". price price"
    ". tiers tiers"
    ". source source"
    ". minimum minimum"
    ". toggles toggles"
    ". problem problem"
    ". confirm confirm";
}
.sp-page .sp-row > .sp-cell:not(.sp-cell-name):not(.sp-cell-about) { margin-top: 10px; }
.sp-page .sp-row > .sp-cell.sp-cell-toggles { margin-top: 6px; }
.sp-heads { display: none; }
/* The one-line summary exists for the phone layout only (below). */
.sp-summary { display: none; }

/* Page, middling width: name on top, the numbers on one line under it. */
@container sp (min-width: 700px) {
  .sp-page .sp-row {
    grid-template-columns: var(--sp-grip) repeat(3, minmax(0, 1fr)) var(--sp-icon);
    grid-template-areas:
      "handle name name name delete"
      ". about about about ."
      ". details details details ."
      ". price source minimum ."
      ". tiers tiers tiers ."
      ". toggles toggles toggles ."
      ". problem problem problem ."
      ". confirm confirm confirm .";
  }
}

/* Page, wide: one line per service under column heads. */
@container sp (min-width: 1040px) {
  .sp-page .sp-row, .sp-heads {
    grid-template-columns: var(--sp-grip) minmax(220px, 1.7fr) minmax(200px, 1.2fr) minmax(160px, 1fr) minmax(104px, .6fr) 64px 64px var(--sp-icon);
    grid-template-areas:
      "handle name price source minimum toggles toggles delete"
      ". tiers tiers tiers tiers . . ."
      ". about about about about . . ."
      ". details details details details . . ."
      ". problem problem problem problem problem problem ."
      ". confirm confirm confirm confirm confirm confirm .";
  }
  .sp-page .sp-row > .sp-cell:not(.sp-cell-name):not(.sp-cell-about), .sp-page .sp-row > .sp-cell.sp-cell-toggles { margin-top: 0; }
  .sp-page .sp-cell-label { display: none; }
  .sp-page .sp-toggles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; justify-items: center; }
  .sp-page .sp-toggles .sp-switch-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .sp-heads {
    display: grid; column-gap: 14px; padding: 0 12px 0 4px; grid-template-areas: none;
    font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ink-3);
  }
  .sp-heads > span { min-width: 0; white-space: nowrap; }
  .sp-head-forms, .sp-head-active { text-align: center; }
}

/* Form: offer box, name, price and unit; the rest behind "More". */
.sp-form .sp-row {
  grid-template-columns: var(--sp-grip) var(--sp-grip) minmax(0, 1fr) var(--sp-icon) var(--sp-icon);
  grid-template-areas:
    "handle offer name more delete"
    ". . price price price"
    ". . tiers tiers tiers"
    ". . details details details"
    ". . problem problem problem"
    ". . confirm confirm confirm";
}
.sp-form .sp-row > .sp-cell-price { margin-top: 10px; }
.sp-form .sp-row > .sp-cell-price .sp-cell-label { display: none; }
.sp-form .sp-row.is-offered { background: var(--surface); }
/* Form, in a phone-width editor: tighter gutters so the name keeps its room; targets stay 44px. */
@container sp (max-width: 479px) {
  .sp-form .sp-row {
    grid-template-columns: var(--sp-grip) var(--sp-grip) minmax(0, 1fr) var(--sp-icon); column-gap: 6px; padding-right: 8px;
    grid-template-areas:
      "handle offer name delete"
      ". price price more"
      ". tiers tiers tiers"
      ". details details details"
      ". problem problem problem"
      ". confirm confirm confirm";
  }
  .sp-form .sp-pkg { column-gap: 6px; padding-right: 14px; }
  .sp-form .sp-price-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .sp-form .sp-price-group:has(> .sp-money[hidden]), .sp-form .sp-price-group.is-tiered { grid-template-columns: minmax(0, 1fr); }
  .sp-form .sp-row > .sp-more { margin-top: 10px; }
}
@container sp (min-width: 640px) {
  .sp-form .sp-row {
    grid-template-columns: var(--sp-grip) var(--sp-grip) minmax(160px, 1fr) minmax(196px, 240px) var(--sp-icon) var(--sp-icon);
    grid-template-areas:
      "handle offer name price more delete"
      ". . tiers tiers tiers tiers"
      ". . details details details details"
      ". . problem problem problem problem"
      ". . confirm confirm confirm confirm";
  }
  .sp-form .sp-row > .sp-cell-price { margin-top: 0; }
}
.sp-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; margin-top: 8px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2);
}
.sp-details > .sp-cell-description, .sp-details > .sp-id-line { grid-column: 1 / -1; }
.sp-details .sp-cell-toggles { align-self: end; }
.sp-details .sp-soon { margin: 0; }

/* Size tiers: a compact bracket table, "0 to [2,000] sq ft   $[45]", one row per tier, with the
   add button, the cap switch and a live preview under it. Hairlines and the quiet surface, like
   the details drawer, so it reads as part of its row. */
.sp-tiers {
  display: grid; gap: 8px; min-width: 0; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2);
}
.sp-tiers[hidden] { display: none; }
.sp-tiers.is-invalid { border-color: var(--rust-line); }
.sp-tier-table { display: grid; gap: 6px; min-width: 0; }
.sp-tiers { justify-self: start; width: 100%; max-width: 560px; }
.sp-tier {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, 120px) var(--sp-icon); align-items: center;
  gap: 8px 12px; min-width: 0;
}
.sp-tier-range { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.sp-tier-from {
  flex: none; min-width: 48px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums;
}
.sp-tier-dash, .sp-tier-word { flex: none; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.sp input.sp-tier-upto { flex: 0 1 104px; width: 104px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-tier-remove:disabled { opacity: .4; pointer-events: none; }
.sp-tier-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 2px; }
.sp-tier-add {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border: 0;
  border-radius: var(--radius-control); background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 500;
}
.sp-tier-add:hover { background: var(--surface-3); color: var(--ink); }
.sp-tier-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sp-tier-add:disabled { opacity: .5; pointer-events: none; }
.sp .sp-tier-cap { min-height: 28px; font-size: 12px; }
.sp-tier-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding-top: 8px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2);
}
.sp input.sp-tier-sample { width: 88px; height: 28px; min-height: 28px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-tier-answer { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-tier-answer.is-over { font-weight: 500; color: var(--rust); }

/* Deleting asks once, inline. */
.sp-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px;
  padding: 8px 8px 8px 12px; border: 1px solid var(--rust-line); border-radius: var(--radius-control);
  background: var(--rust-soft); color: var(--ink); font-size: 13px; line-height: 1.45;
}
.sp-confirm-words { flex: 1 1 220px; min-width: 0; }
.sp .sp-confirm-yes { background: var(--rust); border-color: var(--rust); color: var(--surface); }
.sp .sp-confirm-yes:hover { filter: brightness(.94); }

/* ------------------------------------------------------------------ packages */
.sp-package-list { gap: 8px; }
.sp-pkg {
  position: relative; display: grid; grid-template-columns: var(--sp-grip) minmax(0, 1fr); align-items: start; column-gap: 10px;
  min-width: 0; padding: 12px 14px 14px 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: box-shadow var(--motion-fast), background var(--motion-fast);
}
.sp-form .sp-pkg { grid-template-columns: var(--sp-grip) var(--sp-grip) minmax(0, 1fr); }
.sp-pkg .sp-handle, .sp-pkg .sp-offer { grid-area: auto; }
.sp-pkg-body { display: grid; gap: 10px; min-width: 0; }
.sp-pkg-top { display: flex; align-items: center; gap: 10px 14px; min-width: 0; }
.sp-pkg-top .sp-pkg-name { flex: 1 1 auto; }
.sp-pkg-top .sp-switch { flex: none; }
.sp-pkg.is-off { background: var(--surface-2); }
.sp-pkg.is-off textarea.sp-pkg-description:hover, .sp-pkg.is-off textarea.sp-pkg-description:focus { background: var(--surface); }
/* On a phone the card's fields use its full width; only the name sits beside the handle. */
@container sp (max-width: 519px) {
  .sp-pkg { padding-left: 12px; padding-right: 14px; }
  .sp-pkg > .sp-pkg-body { display: contents; }
  /* Everything starts at the name box's left edge, beside the handle, so the card has one indent. */
  .sp-pkg > .sp-pkg-body > * { grid-column: 2 / -1; margin-top: 14px; }
  .sp-pkg > .sp-pkg-body > .sp-pkg-top { margin-top: 0; flex-wrap: wrap; }
  .sp-form .sp-pkg > .sp-pkg-body > * { grid-column: 3 / -1; }
  .sp-pkg-top .sp-pkg-name { flex: 1 1 100%; }
  .sp-pkg-top .sp-delete { margin-left: auto; }
}
.sp-pkg.is-off .sp-pkg-name { color: var(--ink-3); }
.sp-pkg > .sp-pkg-body > .sp-confirm { margin-top: 0; }

/* The services in a package: a 32px dropdown with a summary ("Mowing, Fertilizer round" or
   "3 services") that opens a small checkbox list, searchable once it is long. */
.sp-pick { position: relative; display: grid; gap: 6px; min-width: 0; max-width: 420px; }
.sp-pick-label { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.sp-pick-button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; height: 32px;
  padding: 0 8px 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius-control); background: var(--surface);
  color: var(--ink); font-size: 13px; text-align: left; cursor: pointer;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.sp-pick-button:hover { border-color: var(--line-strong); }
.sp-pick-button:focus-visible, .sp-pick-button[aria-expanded="true"] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.sp-pick-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pick-summary.is-empty { color: var(--ink-3); }
.sp-pick-button .sp-icon { color: var(--ink-3); transition: transform var(--motion-base); }
.sp-pick-button[aria-expanded="true"] .sp-icon { transform: rotate(180deg); }
.sp-pick-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; display: grid; gap: 2px;
  width: min(320px, 100%); min-width: min(240px, 100%); max-height: 320px; padding: 6px; overflow: auto;
  border: 1px solid var(--line-2); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-pop);
}
.sp-pick-pop[hidden] { display: none; }
.sp-pkg.is-picking { z-index: 4; }
.sp-pick-search { position: relative; display: flex; align-items: center; margin-bottom: 4px; }
.sp-pick-search[hidden] { display: none; }
.sp-pick-search .sp-icon { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }
.sp input.sp-pick-filter { height: 28px; min-height: 28px; padding-left: 28px; font-size: 12px; }
.sp-pick-list { display: grid; gap: 1px; min-width: 0; }
.sp-pick-option {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px;
  border-radius: var(--radius-control); color: var(--ink-2); font-size: 13px; cursor: pointer;
}
.sp-pick-option[hidden] { display: none; }
.sp-pick-option:hover { background: var(--surface-2); color: var(--ink); }
.sp input.sp-pick-input {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.sp input.sp-pick-input::before, .sp input.sp-pick-input::after { content: none; display: none; }
.sp-pick-tick {
  display: grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line-strong);
  border-radius: 4px; background: var(--surface); pointer-events: none;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.sp-pick-tick .sp-icon { width: 12px; height: 12px; stroke: var(--on-brand); stroke-width: 2.25; opacity: 0; }
.sp-pick-option.is-on { color: var(--ink); }
.sp-pick-option.is-on .sp-pick-tick { background: var(--brand); border-color: var(--brand); }
.sp-pick-option.is-on .sp-pick-tick .sp-icon { opacity: 1; }
.sp-pick-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.sp-pick-option:has(.sp-pick-input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.sp-pick-pop .sp-empty { padding: 6px 8px; font-size: 12px; }
.sp-pick-pop .sp-empty[hidden] { display: none; }
.sp-pick-foot { display: flex; justify-content: flex-end; padding-top: 4px; margin-top: 2px; border-top: 1px solid var(--line); }

.sp-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-width: 0; }
.sp-discount { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.sp-discount-box { position: relative; display: inline-flex; align-items: center; }
.sp input.sp-discount-input { width: 76px; padding-right: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-discount-sign { position: absolute; right: 10px; color: var(--ink-3); font-size: 13px; pointer-events: none; }
.sp-example {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0;
  font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.sp-example-lawn { color: var(--ink-3); }
.sp-was, .sp-now { display: inline-flex; align-items: baseline; gap: 6px; }
.sp-example-word { font-size: 12px; color: var(--ink-3); }
.sp-was s { color: var(--ink-3); }
.sp-now strong { font-size: 14px; font-weight: 600; color: var(--positive-ink); }

/* ------------------------------------------------------------------ quiet states */
.sp-fail {
  position: sticky; bottom: 16px; z-index: 5; justify-self: start; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; max-width: 100%; padding: 6px 6px 6px 16px; border: 1px solid var(--rust-line); border-radius: 22px;
  background: var(--rust-soft); color: var(--rust); font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-float);
}
.sp-fail-text { min-width: 0; }
.sp-fail-retry {
  min-height: 32px; padding: 4px 14px; border: 1px solid var(--rust-line); border-radius: 999px;
  background: var(--surface); color: var(--rust); font-size: 13px; font-weight: 600;
}
.sp-fail-retry:hover { background: var(--rust-soft); }
.sp-load-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }

.sp-skeleton {
  display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--line);
}
.sp-skeleton-row { position: relative; height: 56px; background: var(--surface); }
.sp-skeleton-row::before, .sp-skeleton-row::after {
  content: ''; position: absolute; top: 20px; height: 16px; border-radius: 4px; background: var(--surface-3);
  animation: sp-pulse 1.4s ease-in-out infinite;
}
.sp-skeleton-row::before { left: 32px; width: 28px; }
.sp-skeleton-row::after { left: 72px; width: min(46%, 420px); }
@keyframes sp-pulse { 50% { opacity: .45; } }

/* Fingers get a 44 x 44 target on every control (handle, offer box, delete, More, switches, the
   package dropdown and its options, the tier buttons,
   Add, Retry, the confirm buttons, the ID), and 16px text so a phone never zooms into a field.
   The same holds whenever the panel itself is phone-narrow, whatever the pointer. A mouse on a
   wide screen keeps the slimmer 36px handle column. */
@media (pointer: coarse) {
  .sp { --sp-grip: 44px; --sp-icon: 44px; }
  .sp .sp-handle, .sp .sp-offer { height: 44px; }
  .sp .sp-switch { min-height: 44px; }
  .sp .sp-icon-button { width: 44px; height: 44px; }
  .sp input:not([type=checkbox]), .sp textarea { font-size: 16px; }
  .sp .sp-pick-option { min-height: 44px; }
  .sp .sp-pick-button, .sp .sp-tier-add, .sp .sp-pick-done { min-height: 44px; }
  .sp input.sp-tier-sample, .sp input.sp-pick-filter { min-height: 44px; }
  .sp .sp-confirm .button, .sp .sp-fail-retry, .sp .sp-load-retry, .sp .sp-add { min-height: 44px; min-width: 44px; }
  .sp .sp-id { min-height: 44px; min-width: 44px; }
  .sp textarea.sp-description, .sp textarea.sp-pkg-description { min-height: 44px; }
}
@container sp (max-width: 519px) {
  .sp-section, .sp-fail { --sp-grip: 44px; --sp-icon: 44px; }
  .sp .sp-handle, .sp .sp-offer { height: 44px; }
  .sp .sp-pick-option { min-height: 44px; }
  .sp .sp-pick-button, .sp .sp-tier-add, .sp .sp-pick-done { min-height: 44px; }
  .sp input.sp-tier-sample, .sp input.sp-pick-filter { min-height: 44px; }
  .sp .sp-confirm .button, .sp .sp-fail-retry, .sp .sp-load-retry, .sp .sp-add { min-height: 44px; min-width: 44px; }
  .sp .sp-id { min-height: 44px; min-width: 44px; }
  .sp textarea.sp-description, .sp textarea.sp-pkg-description { min-height: 44px; }
  .sp-pick { max-width: none; }
  .sp-pick-pop { width: 100%; }
  .sp input:not([type=checkbox]), .sp textarea { font-size: 16px; }

  /* Page, phone: each service is one line (name, price summary, on or off) that opens into the
     full editor. Open, the line stays on top as the row's header and the fields follow it. */
  .sp-page .sp-row {
    grid-template-columns: var(--sp-grip) minmax(0, 1fr) auto; column-gap: 8px; padding: 6px 10px 6px 0;
    grid-template-areas: "handle summary toggles" ". problem problem";
  }
  .sp-page .sp-row > .sp-summary {
    grid-area: summary; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0;
    border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  }
  .sp-summary-words { display: grid; flex: 1 1 auto; min-width: 0; }
  .sp-summary-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
  .sp-summary-price {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .sp-summary .sp-icon { flex: none; color: var(--ink-3); transition: transform var(--motion-base); }
  .sp-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-control); }
  .sp-page .sp-row.is-off .sp-summary-name { color: var(--ink-3); }
  .sp-page .sp-row:not(.is-expanded) > :is(.sp-cell-name, .sp-cell-about, .sp-details, .sp-cell-price, .sp-tiers,
    .sp-cell-source, .sp-cell-minimum, .sp-delete, .sp-confirm) { display: none; }
  .sp-page .sp-row:not(.is-expanded) > .sp-cell.sp-cell-toggles { align-self: center; margin-top: 0; }
  .sp-page .sp-row:not(.is-expanded) .sp-on-forms { display: none; }
  .sp-page .sp-row:not(.is-expanded) .sp-active .sp-switch-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .sp-page .sp-row.is-expanded {
    grid-template-columns: var(--sp-grip) minmax(0, 1fr) var(--sp-icon);
    grid-template-areas:
      "handle summary delete"
      ". name name"
      ". about about"
      ". details details"
      ". price price"
      ". tiers tiers"
      ". source source"
      ". minimum minimum"
      ". toggles toggles"
      ". problem problem"
      ". confirm confirm";
    padding-bottom: 14px; background: var(--surface);
  }
  .sp-page .sp-row.is-expanded > .sp-summary .sp-icon { transform: rotate(180deg); }
  .sp-page .sp-row.is-expanded > .sp-cell-name { margin-top: 4px; }
  /* A tier's sizes on one line, its price and remove under them. */
  .sp-tier { grid-template-columns: minmax(0, 1fr) var(--sp-icon); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .sp-tier:last-child { padding-bottom: 0; border-bottom: 0; }
  .sp-tier-range { grid-column: 1 / -1; }
  .sp-tier-from { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after { transition: none !important; animation: none !important; }
}