/* /pulse/ — Buyer Pulse (Buyer Pulse PLAN P2, §2.36). On the marketing
   chrome, as /my/ is. */
.pulse { max-inline-size: 760px; margin-inline: auto; }

.pulse-hero { display: flex; flex-direction: column; gap: 14px; padding-block: 24px; }
.pulse-headline { font-size: calc(22px * var(--type-scale)); font-weight: 700; }

.pulse-panel { display: flex; flex-direction: column; gap: 16px; padding-block: 16px 40px; }

.pulse-form, .pulse-question, .pulse-week {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);

  & fieldset { border: 0; margin: 0; padding: 0; }
  & legend { font-weight: 700; margin-block-end: 8px; }
  & input:not([type=checkbox]):not([type=radio]), & textarea, & select {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
  }
  & label { display: flex; flex-direction: column; gap: 4px; font-size: calc(14px * var(--type-scale)); }
}
.pulse-form > .button { justify-content: center; }

.pulse-question.is-answered { border-color: var(--accent); }

/* P27: the week's three questions as one compact form, one Submit. */
.pulse-week { gap: 18px; }
.pulse-week label { flex-direction: row; align-items: center; gap: 8px; }
/* .pulse-week .pulse-q beats the form's own `fieldset { border: 0 }`. */
.pulse-week .pulse-q { display: grid; gap: 6px; padding-block-end: 14px; border-block-end: 1px solid var(--hairline); }
.pulse-q legend { margin-block-end: 6px; }
.pulse-q-n { color: var(--accent); }
.pulse-week .pulse-options { gap: 4px; }
.pulse-comment summary { color: var(--accent); font-size: calc(13px * var(--type-scale)); font-weight: 600; cursor: pointer; }
.pulse-comment textarea { inline-size: 100%; margin-block-start: 6px; }
.pulse-visibility { display: grid; gap: 4px; }
.pulse-week button[type=submit] { align-self: start; }

/* P27: the front page asks for a ZIP before it names a market. */
.pulse-zip { display: grid; gap: 8px; justify-items: start; }
.pulse-zip input {
  inline-size: 8em;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.pulse-options { display: grid; gap: 6px; }
.pulse-options label, .pulse-county label { flex-direction: row; align-items: center; gap: 8px; }
.pulse-county { display: grid; gap: 4px; margin-block-end: 10px; }
.pulse-cluster { padding-inline-start: 24px; }

.pulse-reminder, .pulse-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--notice-pending-bg);
  color: var(--notice-pending-fg);
  font-size: calc(13px * var(--type-scale));
}

.pulse-progress { font-weight: 600; }
.pulse-sense { margin: 0; font-weight: 600; color: var(--accent); }
.pulse-pickers { display: flex; flex-wrap: wrap; gap: 12px; }
.pulse-pickers label { display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--type-scale)); font-weight: 600; }
.pulse-pickers select {
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-veil);
  color: var(--text);
  font: inherit;
  font-size: calc(14px * var(--type-scale));
  font-weight: 400;
}

/* The dashboard's field dropdown (dash/app.css, `base-select`): a chevron
   that flips while open, and a white panel with the picked row tinted. A
   browser without base-select keeps its native list. */
@supports (appearance: base-select) {
  .pulse-pickers select, .pulse-pickers select::picker(select) { appearance: base-select; }
  .pulse-pickers select { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .pulse-pickers select:open { background: var(--surface-raised); }
  .pulse-pickers select::picker-icon {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    margin-inline: 12px 4px;
    border-block-end: 2px solid var(--text-muted);
    border-inline-end: 2px solid var(--text-muted);
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate .15s, translate .15s;
  }
  .pulse-pickers select:open::picker-icon { rotate: 225deg; translate: 0 2px; }
  .pulse-pickers select::picker(select) {
    margin-block-start: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-menu);
  }
  .pulse-pickers option {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: calc(15px * var(--type-scale));
    font-weight: 500;
    cursor: pointer;
  }
  .pulse-pickers option:is(:hover, :focus-visible) { outline: 0; background: var(--surface-sunken); }
  .pulse-pickers option:checked { background: var(--accent-tint); font-weight: 700; }
  .pulse-pickers option::checkmark { order: 1; margin-inline-start: auto; color: var(--accent); }
}

/* P27: a section with nothing real to show says why. */
.pulse-empty { padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius-md); }
.pulse-empty h2 { font-size: calc(17px * var(--type-scale)); margin-block-end: 6px; }

.pulse-result {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);

  & h2 { font-size: calc(17px * var(--type-scale)); margin-block-end: 4px; }
}

.pulse-bars, .pulse-comments { margin: 10px 0 0; padding: 0; list-style: none; }
.pulse-bars li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr 3rem;
  gap: 10px;
  align-items: center;
  max-inline-size: none;
  padding-block: 4px;
  font-size: calc(14px * var(--type-scale));
}
.pulse-bar {
  block-size: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, var(--accent) var(--share), var(--hairline) var(--share));
}
.pulse-comments li {
  max-inline-size: none;
  padding-block: 8px;
  border-block-start: 1px solid var(--hairline);

  & p { margin: 0; }
  & > p:first-child { margin-block-end: 6px; }
}

.pulse-index {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-tint);

  & h2 { font-size: calc(17px * var(--type-scale)); }
  & p { margin: 0; }
}
.pulse-meaning {
  padding: 16px;
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-raised);

  & h2 { font-size: calc(16px * var(--type-scale)); margin-block-end: 6px; }
  & p { margin: 0 0 6px; }
}
.pulse-share {
  margin-block-start: 10px;
  padding: 12px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);

  & code { display: block; overflow-wrap: anywhere; font-size: calc(12.5px * var(--type-scale)); }
}
.pulse-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-weight: 600;
}
.pulse-comments .pulse-comment-actions { display: flex; gap: 6px; margin: 8px 0 0 -8px; }

/* Helpful and Report: icon + label, quiet until hovered. */
.pulse-action {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: calc(12.5px * var(--type-scale));
  font-weight: 600;
  cursor: pointer;

  &:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
  &:disabled { color: var(--accent); cursor: default; }
}
.pulse-action svg, .pulse-share-button svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pulse-share-button { align-self: flex-start; }
.pulse-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.pulse-index-value { font-size: calc(44px * var(--type-scale)); font-weight: 700; line-height: 1; }

.pulse-compare { inline-size: 100%; border-collapse: collapse; font-size: calc(14px * var(--type-scale)); }
.pulse-compare :is(th, td) { padding: 8px; border-block-end: 1px solid var(--hairline); text-align: start; }
.pulse-compare td.num, .pulse-compare th.num { text-align: end; }
.pulse-change { color: var(--text-muted); font-size: calc(12px * var(--type-scale)); }
.pulse-prompt { font-weight: 600; }
.pulse-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 6px; border: 0; padding: 0; }
.pulse-choose legend { font-weight: 600; margin-block-end: 6px; }
.pulse-choose label { display: flex; gap: 8px; align-items: center; }

@media (max-width: 42rem) {
  .pulse-bars li { grid-template-columns: minmax(0, 9rem) 1fr 2.5rem; }
}

/* Colour, after the dashboard: white cards on a warm ground, an ink band for
   the front page's hero and the results CTA, teal for whatever is chosen. */
body { background: var(--surface-warm); }
.pulse { accent-color: var(--accent); }

.pulse-hero {
  margin-block-start: 16px;
  padding: clamp(20px, 5vw, 28px);
  border-radius: var(--radius-lg);
  background: var(--text);
  color: var(--on-dark);

  & h1 { color: var(--on-dark); }
  & .kicker, & summary { color: var(--accent-warm); }
  & :is(.lede, .muted) { color: var(--on-dark-muted); }
  & .button--dark { border-color: var(--accent-warm); background: var(--accent-warm); color: var(--text); }
  & .button--dark:hover { color: var(--text); }
  & .button--quiet { border-color: var(--on-dark-muted); background: transparent; color: var(--on-dark); }
  & .button--quiet:hover { color: var(--on-dark); }
}

.pulse-form, .pulse-question, .pulse-week, .pulse-result {
  border-color: var(--card-border);
  border-block-start: 4px solid var(--accent);
  background: var(--surface-raised);
}

.pulse-q-n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.6em;
  block-size: 1.6em;
  margin-inline-end: 4px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .85em;
}

/* A chosen answer or market reads as chosen, as the dashboard's pickers do. */
.pulse-options label, .pulse-form .pulse-county label, .pulse-visibility label {
  flex-direction: row;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
:is(.pulse-options, .pulse-county, .pulse-visibility) label:has(:checked) {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.pulse-county { padding: 8px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.pulse-county > label:first-child { font-weight: 600; }

.pulse-cta { background: var(--text); color: var(--on-dark); }

/* Pulse First Impression F2, F4 and Pulse Answer First A2: the progress
   toward minSample, the week's questions a step at a time, what you get. */
.pulse-meter { inline-size: min(100%, 20rem); block-size: 10px; }
.pulse-steps, .pulse-get { display: grid; gap: 12px; margin-block-start: 24px; }
.pulse-steps .kicker { color: var(--accent); }
.pulse-get { margin-block-end: 32px; }
.pulse-get ul { display: grid; gap: 8px; margin: 0; padding-inline-start: 1.2em; }