/*
 * Hotel Collab Platform, front end.
 *
 * Uses the theme's design tokens where they exist and falls back to the brand
 * values, so the journey looks right in the Hotel Collab theme and acceptable
 * under any other.
 */

/*
 * The public detail panel renders on a theme template rather than inside the
 * plugin's own wrapper, so it needs the tokens declared on it too. Without
 * this every var(--p-...) in that panel is an undefined variable, which makes
 * the whole declaration invalid and quietly falls back to inherited type.
 */
.hcp,
.hcp-public {
  --p-oat:   var(--hc-oat, #FFFCF4);
  --p-white: var(--hc-white, #FFFFFF);
  --p-ink:   var(--hc-ink, #1D1D1D);
  --p-green: var(--hc-green, #33825D);
  --p-mint:  var(--hc-mint, #CAF6E2);
  --p-terra: var(--hc-terra, #924A24);
  --p-blue:  var(--hc-blue, #BCD7EA);
  --p-sand:  var(--hc-sand, #EFE9DA);

  --p-rule:  rgba(29, 29, 29, .1);
  --p-rule2: rgba(29, 29, 29, .14);
  --p-muted: rgba(29, 29, 29, .6);
  --p-body:  rgba(29, 29, 29, .78);

  --p-serif:   var(--hc-serif, Georgia, serif);
  --p-display: var(--hc-display, 'Gothic A1', sans-serif);
  --p-text:    var(--hc-body, 'Lato', Helvetica, sans-serif);
  --p-mono:    var(--hc-mono, 'Plus Jakarta Sans', sans-serif);

  font-family: var(--p-text);
  color: var(--p-ink);
}

.hcp *, .hcp *::before, .hcp *::after { box-sizing: border-box; }

/*
 * The journey and the login page render inside the theme's plain content
 * wrapper, which underlines prose links. Buttons and back links are already
 * obviously interactive, so keep them clean. A link inside a sentence keeps
 * its underline, which is what the theme intends.
 */
.hcp a.hcp-btn,
.hcp a.hcp-back,
.hcp a.hcp-textlink,
.hcp a.hcp-list__title,
.hcp a.hcp-summary-bar__title,
.hcp .hcp-subhead a,
.hcp .hcp-steps-plain a,
.hcp .hcp-join__lines a,
.hcp .hcp-manage__back a,
.hcp .hcp-tile a,
.hcp .hcp-dash__foot a,
.hcp .hcp-summary-bar__counts a,
.hcp .hcp-return__link { text-decoration: none; }

/* Alerts */
.hcp-alert {
  margin: 0 0 24px;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.6;
  border-left: 3px solid var(--p-green);
  background: var(--p-mint);
  color: var(--p-ink);
}
.hcp-alert--problem { background: var(--p-blue); border-left-color: var(--p-terra); }

/* Progress */
.hcp-progress { margin: 0 0 32px; }
.hcp-progress__label {
  display: block;
  margin-bottom: 10px;
  font: 800 10px var(--p-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}
.hcp-progress__track {
  display: block;
  height: 2px;
  background: var(--p-rule2);
}
.hcp-progress__fill {
  display: block;
  height: 2px;
  background: var(--p-green);
  transition: width .4s ease;
}

/* The journey */
.hcp-journey {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--p-rule);
}

.hcp-step { border-bottom: 1px solid var(--p-rule); }

.hcp-step__bar {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 22px 0;
}

.hcp-step__num {
  font-family: var(--p-serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: var(--p-muted);
}
.hcp-step--current .hcp-step__num,
.hcp-step--waiting .hcp-step__num { color: var(--p-green); }
.hcp-step--done .hcp-step__num { color: var(--p-green); }
.hcp-step--blocked .hcp-step__num { color: var(--p-terra); }

.hcp-step__title {
  margin: 0 0 6px;
  font: 500 18px var(--p-display);
  color: var(--p-ink);
}
.hcp-step__title a { color: inherit; text-decoration: none; }
.hcp-step__title a:hover { color: var(--p-green); }

.hcp-step__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(29, 29, 29, .66);
}

.hcp-step--locked .hcp-step__title,
.hcp-step--locked .hcp-step__body { opacity: .5; }

/*
 * The panel fills the container, the way a management screen does, so lists
 * and tables inside a step line up with the page. Fields keep the measure they
 * had, because a text input the width of the page is unusable.
 */
.hcp-step__panel { padding: 4px 0 34px 56px; }

.hcp-journey .hcp-field { max-width: 664px; }
.hcp-journey .hcp-field--gallery,
.hcp-journey .hcp-field--repeater { max-width: 100%; }

/*
 * Prose keeps the same measure the fields do. Lists and tables are the reason
 * the panel widened, so they fill it; a box carrying a sentence or two does
 * not, because stretched across the page it reads as a band rather than a box.
 */
.hcp-step__panel > p,
.hcp-step__panel .hcp-note { max-width: 664px; }
.hcp-step__panel .hcp-callout,
.hcp-step__panel .hcp-agreement { max-width: 712px; }

/* Tags */
.hcp-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font: 800 9px var(--p-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--p-sand);
  color: var(--p-muted);
}
.hcp-tag--done,
.hcp-tag--accepted,
.hcp-tag--active,
.hcp-tag--complete { background: var(--p-mint); color: var(--p-green); }
.hcp-tag--current,
.hcp-tag--sent,
.hcp-tag--drafted { background: var(--p-green); color: var(--p-oat); }
.hcp-tag--waiting { background: var(--p-blue); color: var(--p-terra); }
.hcp-tag--skipped { background: var(--p-sand); color: var(--p-muted); }
.hcp-tag--blocked,
.hcp-tag--declined,
.hcp-tag--withdrawn,
.hcp-tag--cancelled { background: var(--p-terra); color: var(--p-oat); }

/* A step put off deliberately reads quieter, not broken */
.hcp-step--skipped .hcp-step__num { color: var(--p-muted); }

/* ==========================================================================
   The management screens
   ========================================================================== */

/*
 * These fill the container, so lists and tables line up with the header above
 * them, exactly as the dashboard does. Form fields keep a readable measure
 * inside that, because a text input the width of the page is unusable.
 */
.hcp-manage { max-width: 100%; }

.hcp-manage__back {
  margin: 0 0 24px;
  font: 400 14px var(--p-display);
}
.hcp-manage__back a { color: var(--p-muted); text-decoration: none; }
.hcp-manage__back a:hover { color: var(--p-green); }

.hcp-manage__lead {
  margin: 0 0 30px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--p-body);
  max-width: 620px;
}

/* Spacing between the blocks on a management screen */
.hcp-manage .hcp-subhead {
  margin: 44px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p-rule);
}
.hcp-manage .hcp-minihead { margin: 26px 0 12px; }
.hcp-manage .hcp-actions { margin: 26px 0 0; }
.hcp-manage .hcp-note { margin: 0 0 20px; }
.hcp-manage .hcp-list { margin: 0 0 8px; border-top: 0; }
.hcp-manage .hcp-status { margin: 0 0 30px; }
.hcp-manage .hcp-callout { margin: 0 0 28px; }
.hcp-manage .hcp-summary { margin: 0 0 8px; }
.hcp-manage .hcp-agreement { margin: 0 0 32px; }
.hcp-manage .hcp-agreement .hcp-subhead {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Forms keep a readable measure, lists and galleries use the full width */
.hcp-manage .hcp-field { max-width: 620px; }
.hcp-manage .hcp-field--gallery,
.hcp-manage .hcp-field--repeater { max-width: 100%; }

/* ==========================================================================
   The host dashboard
   ========================================================================== */

/*
 * The dashboard fills the theme's container, so its right edge lines up with
 * the header actions above it. The container is what caps the width, at
 * 1360px, so nothing runs away on a wide screen.
 */
.hcp-dash { max-width: 100%; }

/*
 * The theme holds prose to a readable measure, which suits the application but
 * squeezes a dashboard. Widen it only there, which the body class marks.
 */
.hcp-has-dashboard .hc-plain__content { max-width: 100%; }

/* A management screen fills the container too, so everything lines up. */
.hcp-has-manage .hc-plain__content { max-width: 100%; }

/* So does the application, so the form sits under the full width of the title. */
.hcp-has-journey .hc-plain__content { max-width: 100%; }

/*
 * A white panel for a form that stands on its own, rather than sitting loose
 * on the page ground. Same treatment as a dashboard block, with more room
 * inside because a form needs it.
 */
.hcp-panel {
  padding: 34px 36px 32px;
  background: var(--p-white);
  border: 1px solid var(--p-rule);
  border-radius: 16px;
}
.hcp-panel > .hcp-form { margin: 0; }

/*
 * Two columns for a form of short answers. Anything that needs room to write,
 * a set of rows, or the buttons, takes the full width. Keyed off the field
 * type so the schema decides, not the template.
 */
.hcp-form--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* No row gap: the fields carry their own bottom margin already. */
  gap: 0 28px;
  align-items: start;
}
.hcp-form--split > .hcp-field--textarea,
.hcp-form--split > .hcp-field--repeater,
.hcp-form--split > .hcp-field--gallery,
.hcp-form--split > .hcp-field--checkboxes,
.hcp-form--split > .hcp-field--checkbox,
.hcp-form--split > .hcp-field--image,
.hcp-form--split > .hcp-actions,
.hcp-form--split > .hcp-help,
.hcp-form--split > .hcp-subhead,
.hcp-form--split > .hcp-minihead,
.hcp-form--split > .hcp-note,
.hcp-form--split > .hcp-callout { grid-column: 1 / -1; }

/* The track sets the width here, so a measure meant for one column fights it. */
.hcp-form--split .hcp-field { max-width: none; }
.hcp-form--split .hcp-input,
.hcp-form--split .hcp-textarea,
.hcp-form--split .hcp-select { width: 100%; min-width: 0; max-width: 100%; }

/* One column is the only sensible reading of a narrow screen. */
@media (max-width: 720px) {
  .hcp-form--split { grid-template-columns: minmax(0, 1fr); }
  .hcp-panel { padding: 26px 22px 24px; }
}

/*
 * What you missed. Read before anything else on the page, so it carries the
 * terra edge the rest of the platform uses for a problem, and names the fields
 * rather than counting them.
 */
.hcp-missing {
  margin: 0 0 24px;
  padding: 20px 24px 18px;
  background: var(--p-white);
  border: 1px solid var(--p-rule);
  border-left: 4px solid var(--p-terra);
  border-radius: 12px;
}
.hcp-missing__title {
  margin: 0 0 10px;
  font: 500 17px var(--p-display);
  color: var(--p-ink);
}
.hcp-missing__list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.hcp-missing__list li {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--p-body);
}
.hcp-missing__list li::marker { color: var(--p-terra); }
.hcp-missing__list a {
  font-weight: 600;
  color: var(--p-ink);
  text-decoration: underline;
}
.hcp-missing__list a:hover { color: var(--p-green); }
.hcp-missing__why { color: var(--p-muted); }

/* Something needing attention */
.hcp-attention {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 18px 22px;
  background: var(--p-blue);
}
.hcp-attention p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--p-ink);
  max-width: 620px;
}

/* Number tiles */
/*
 * Separate cards rather than one ruled grid. Rounded to match the buttons,
 * though not to their full pill, which on a box this size reads as a lozenge
 * rather than as a card.
 */
.hcp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}

.hcp-tile {
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--p-rule);
  border-radius: 16px;
}
.hcp-tile a { display: block; text-decoration: none; }

.hcp-tile__value {
  display: block;
  font-family: var(--p-serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--p-green);
}
.hcp-tile__label {
  display: block;
  margin-top: 12px;
  font: 500 15px var(--p-display);
  color: var(--p-ink);
}
.hcp-tile__note {
  display: block;
  margin-top: 4px;
  font: 800 9px var(--p-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}
.hcp-tile a:hover .hcp-tile__value { color: var(--p-ink); }

/* Dashboard blocks */
.hcp-dash__block {
  margin: 0 0 24px;
  padding: 26px 28px 28px;
  background: #fff;
  border: 1px solid var(--p-rule);
  border-radius: 16px;
}

/* Inside a card the first list needs no rule of its own above it. */
.hcp-dash__block > .hcp-list:first-of-type { border-top: 0; }

.hcp-dash__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.hcp-dash__head .hcp-subhead { margin: 0; }

.hcp-dash__foot {
  margin: 8px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--p-rule);
  font-size: 14px;
  color: var(--p-muted);
}
.hcp-dash__foot a { color: var(--p-green); }

@media (max-width: 600px) {
  .hcp-tiles { grid-template-columns: repeat(2, 1fr); }
  .hcp-tile { padding: 18px 16px 20px; }
  .hcp-tile__value { font-size: 34px; }
  .hcp-attention { justify-content: flex-start; }
}

/* The live listing summary, so a host can manage things after the journey */
.hcp-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 0 0 32px;
  padding: 18px 22px;
  background: var(--p-white);
  border: 1px solid var(--p-rule2);
}

.hcp-summary-bar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hcp-summary-bar__label {
  font: 800 9px var(--p-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}
.hcp-summary-bar__title {
  font: 500 16px var(--p-display);
  color: var(--p-ink);
  text-decoration: none;
}
.hcp-summary-bar__title:hover { color: var(--p-green); }

.hcp-summary-bar__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: auto;
}
.hcp-summary-bar__counts a {
  font-size: 14px;
  color: var(--p-muted);
  text-decoration: none;
  white-space: nowrap;
}
.hcp-summary-bar__counts a:hover { color: var(--p-green); }
.hcp-summary-bar__counts strong {
  font-family: var(--p-serif);
  font-weight: 300;
  font-size: 20px;
  color: var(--p-ink);
  margin-right: 4px;
}

@media (max-width: 720px) {
  .hcp-summary-bar__counts { margin-left: 0; gap: 16px; }
}

/* Headings inside a panel */
.hcp-subhead {
  margin: 28px 0 12px;
  font: 500 17px var(--p-display);
  color: var(--p-ink);
}
.hcp-minihead {
  margin: 24px 0 10px;
  font: 800 10px var(--p-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}
.hcp-step__panel > p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--p-body); }
.hcp-note { color: var(--p-muted); font-style: italic; }

/* Forms */
.hcp-form { margin: 0; }

.hcp-field { margin: 0 0 20px; }
.hcp-field--checkbox { margin-bottom: 14px; }

.hcp-label {
  display: block;
  margin-bottom: 6px;
  font: 400 15px var(--p-display);
  color: var(--p-ink);
}
.hcp-req { color: var(--p-terra); }

.hcp-input {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(29, 29, 29, .2);
  border-radius: 0;
  background: var(--p-white);
  font: 400 16px var(--p-text);
  color: var(--p-ink);
}
.hcp-input:focus {
  outline: none;
  border-color: var(--p-green);
  box-shadow: inset 0 0 0 1px var(--p-green);
}
.hcp-input--short { width: 160px; max-width: 100%; }
.hcp-select { width: auto; min-width: 260px; max-width: 100%; }
textarea.hcp-input { line-height: 1.6; resize: vertical; }

.hcp-help {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-muted);
}
.hcp-error {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-terra);
}
.hcp-field--error .hcp-input { border-color: var(--p-terra); }

.hcp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--p-body);
  cursor: pointer;
}
.hcp-check input { margin-top: 4px; flex: none; }
.hcp-checkgroup { display: flex; flex-direction: column; gap: 12px; }

.hcp-file { display: block; margin-top: 8px; font-size: 14px; }

/* The bot trap, off screen but not hidden from the browser */
.hcp-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Buttons */
.hcp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--p-green);
  color: var(--p-oat);
  font: 400 15px var(--p-display);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
}
.hcp-btn:hover { background: var(--p-ink); color: var(--p-oat); }

.hcp-btn--quiet {
  background: transparent;
  color: var(--p-ink);
  border: 1px solid rgba(29, 29, 29, .28);
}
.hcp-btn--quiet:hover { background: var(--p-mint); color: var(--p-ink); border-color: var(--p-ink); }

.hcp-btn--small { padding: 9px 18px; font-size: 14px; min-height: 40px; }

.hcp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 26px 0 0;
}
/*
 * An actions row usually ends a screen, so it only has a top margin. One that
 * leads a screen has content under it and needs a gap below as well.
 *
 * Two classes deep on purpose: the management screens set their own margin on
 * .hcp-manage .hcp-actions, and a single class would lose to it.
 */
.hcp .hcp-actions--lead { margin-bottom: 40px; }

.hcp-back {
  font: 400 14px var(--p-display);
  color: var(--p-muted);
  text-decoration: none;
}
.hcp-back:hover { color: var(--p-green); }

.hcp-inline-form { display: inline-block; margin: 0; }

/* Repeater */
.hcp-repeater {
  padding: 16px;
  background: var(--p-oat);
  border: 1px solid var(--p-rule);
}
.hcp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--p-rule);
}
.hcp-row:first-child { border-top: 0; padding-top: 0; }
.hcp-row__fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hcp-row__fields .hcp-field { margin: 0; }
.hcp-row__remove {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--p-muted);
  cursor: pointer;
  padding: 6px 8px;
  min-height: 44px;
}
.hcp-row__remove:hover { color: var(--p-terra); }
.hcp-repeater__add { margin: 14px 0 0; }

/* Summary rows */
.hcp-summary {
  margin: 0 0 24px;
  border-top: 1px solid var(--p-rule);
}
.hcp-summary__row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--p-rule);
}
.hcp-summary dt {
  margin: 0;
  font-size: 14px;
  color: var(--p-muted);
}
.hcp-summary dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--p-ink);
}

/* Status line */
.hcp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  padding: 16px 0;
  border-top: 1px solid var(--p-rule);
  border-bottom: 1px solid var(--p-rule);
}
.hcp-status__label {
  font: 800 9px var(--p-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}
.hcp-status strong { font: 500 17px var(--p-display); }

.hcp-skip {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--p-rule);
}
.hcp-skip form { margin: 0 0 10px; }

/* Callouts and terms */
.hcp-callout {
  margin: 0 0 24px;
  padding: 20px 24px;
  background: var(--p-mint);
}
.hcp-callout--closed { background: var(--p-blue); }
.hcp-callout h4 {
  margin: 0 0 8px;
  font: 500 16px var(--p-display);
}
.hcp-callout p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.hcp-callout p:last-child { margin-bottom: 0; }

.hcp-terms {
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid var(--p-rule2);
}
.hcp-terms h4 { margin: 0 0 12px; font: 500 17px var(--p-display); }
.hcp-terms ul { margin: 0 0 12px; padding-left: 20px; }
.hcp-terms li { margin-bottom: 8px; font-size: 15px; line-height: 1.6; color: var(--p-body); }

/* Lists of shortlist rows, invitations and deliverables */
.hcp-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--p-rule);
}
.hcp-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--p-rule);
}
.hcp-list__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hcp-list__title {
  font: 500 16px var(--p-display);
  color: var(--p-ink);
  text-decoration: none;
}
a.hcp-list__title:hover { color: var(--p-green); }
.hcp-list__meta { font-size: 14px; color: var(--p-muted); }
.hcp-list__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hcp-list__actions form { margin: 0; }

/* Agreements */
.hcp-agreement {
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--p-rule2);
  background: var(--p-white);
}
.hcp-agreement__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.hcp-agreement__head .hcp-subhead { margin: 0; }

.hcp-signatures { margin: 0 0 20px; padding: 0; list-style: none; }
.hcp-signatures li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--p-rule);
}

/* File pickers, styled as site buttons rather than the browser default */
.hcp-filepick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.hcp-filepick label { cursor: pointer; }

/*
 * The native control is taken out of the layout but stays focusable and
 * clickable through its label, so the keyboard still works.
 */
.hcp-filepick .hcp-file,
.hcp-upload .hcp-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.hcp-filepick .hcp-file:focus-visible + .hcp-filepick__names,
.hcp-filepick .hcp-file:focus-visible ~ .hcp-filepick__names { outline: none; }
.hcp-filepick:focus-within label {
  border-color: var(--p-green);
  box-shadow: 0 0 0 2px var(--p-mint);
}

.hcp-filepick__names {
  font-size: 14px;
  line-height: 1.5;
  color: var(--p-muted);
  min-width: 0;
  word-break: break-word;
}
.hcp-filepick__names.is-chosen { color: var(--p-ink); }

.hcp-filepick__drop {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--p-muted);
  cursor: pointer;
  padding: 6px 8px;
  min-height: 44px;
}
.hcp-filepick__drop:hover { color: var(--p-terra); }

.hcp-gallery__pickers { display: flex; flex-direction: column; gap: 4px; }
.hcp-gallery__add { margin: 14px 0 0; }

.hcp-upload__preview {
  display: block;
  max-width: 220px;
  height: auto;
  margin-bottom: 10px;
  border: 1px solid var(--p-rule);
}
.hcp-gallery__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.hcp-gallery__item img { display: block; width: 100%; height: auto; border: 1px solid var(--p-rule); }
.hcp-gallery__remove { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--p-muted); }

/* The login page */
.hcp-auth { max-width: 520px; }

.hcp-auth__card {
  padding: 44px 44px 40px;
  background: var(--p-white);
  border: 1px solid var(--p-rule2);
}

.hcp-auth__title {
  margin: 0 0 14px;
  font-family: var(--p-serif);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--p-ink);
}

.hcp-auth__lead {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--p-body);
}

/* When the card heading is dropped as a repeat, the lead leads the card. */
.hcp-auth__card > .hcp-auth__lead:first-child { margin-top: 0; }

.hcp-auth__foot {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--p-rule);
  font-size: 15px;
  color: var(--p-muted);
}
.hcp-auth__foot a { color: var(--p-green); }

@media (max-width: 600px) {
  .hcp-auth__card { padding: 28px 24px 26px; }
  .hcp-auth__title { font-size: 32px; }
}

/* Back to your application, while browsing creators */
.hcp-return {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 4px;
  background: var(--hc-ink, #1D1D1D);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(29, 29, 29, .18);
  max-width: calc(100vw - 32px);
}
.hcp-return[hidden] { display: none; }

.hcp-return__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: 999px;
  font: 400 15px var(--hc-display, 'Gothic A1', sans-serif);
  color: var(--hc-oat, #FFFCF4);
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
}
.hcp-return__link:hover { color: var(--hc-mint, #CAF6E2); }
.hcp-return__arrow { font-size: 16px; line-height: 1; }
.hcp-return__label { overflow: hidden; text-overflow: ellipsis; }

.hcp-return__count {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--hc-mint, #CAF6E2);
  color: var(--hc-green, #33825D);
  font: 800 9px var(--hc-mono, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hcp-return__close {
  flex: none;
  border: 0;
  background: none;
  color: rgba(255, 252, 244, .5);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 12px 0 4px;
  min-height: 44px;
}
.hcp-return__close:hover { color: var(--hc-oat, #FFFCF4); }

@media (max-width: 600px) {
  .hcp-return { bottom: 12px; }
  .hcp-return__link { padding: 10px 14px; font-size: 14px; gap: 8px; }
  .hcp-return__count { display: none; }
}

/* A field that only applies to a chosen collaboration type */
.hcp-field[data-hcp-shows][hidden] { display: none; }

@media (max-width: 720px) {
  .hcp-step__bar { grid-template-columns: 28px 1fr; }
  .hcp-step__bar .hcp-tag { grid-column: 2; justify-self: start; }
  .hcp-step__panel { padding-left: 0; }
  .hcp-summary__row { grid-template-columns: 1fr; gap: 4px; }
  .hcp-select { min-width: 0; width: 100%; }
  .hcp-list__row { align-items: flex-start; }
}

/* ==========================================================================
   The creator journey
   ========================================================================== */

/* The creator side of the platform reads terra, the way the design does. */
.hcp-accent-terra .hcp-progress__fill { background: var(--p-terra); }
.hcp-accent-terra .hcp-step--current .hcp-step__num,
.hcp-accent-terra .hcp-step--waiting .hcp-step__num,
.hcp-accent-terra .hcp-step--done .hcp-step__num { color: var(--p-terra); }
.hcp-accent-terra .hcp-tag--current { background: var(--p-terra); color: var(--p-oat); }
.hcp-accent-terra .hcp-tag--done { background: var(--p-blue); color: var(--p-terra); }

/* ==========================================================================
   Step four, and the creator management screens
   ========================================================================== */

/*
 * A repeater row that carries a photograph. The row grid is narrow, so the
 * preview is smaller than a top level one and the picker sits under it.
 */
.hcp-upload--row { position: relative; }
.hcp-upload--row .hcp-upload__preview {
  max-width: 120px;
  margin-bottom: 8px;
}
.hcp-upload--row .hcp-filepick { margin-top: 0; gap: 8px; }
.hcp-row__fields .hcp-field--image { grid-column: 1 / -1; }

@media (min-width: 700px) {
  /* Side by side once there is room, photograph first. */
  .hcp-row__fields .hcp-field--image { grid-column: auto; }
}

/* A step heading that carries its own state pill. */
.hcp-subhead .hcp-tag { margin-left: 10px; vertical-align: middle; }
.hcp-subhead a { color: inherit; }
.hcp-subhead a:hover { color: var(--p-green); }
.hcp-accent-terra .hcp-subhead a:hover { color: var(--p-terra); }

/* The two buttons on an invitation sit apart, accept then decline. */
.hcp-form--respond .hcp-actions { margin-top: 22px; }

/* The creator dashboard reads terra, the way the design does. */
.hcp-accent-terra .hcp-tile__value { color: var(--p-terra); }
.hcp-accent-terra .hcp-attention { box-shadow: inset 3px 0 0 var(--p-terra); }

/* ==========================================================================
   The sample agreement
   ========================================================================== */

.hcp-sample > p { margin: 0 0 24px; font-size: 17px; line-height: 1.7; color: var(--p-body); }
.hcp-sample .hcp-alert { margin-bottom: 28px; }

/*
 * The specimen is set apart from the prose around it, so it reads as the
 * document rather than as more of the page.
 */
.hcp-sample .hcp-agreement {
  margin: 0 0 40px;
  padding: 30px 32px;
  border: 1px solid var(--p-rule);
  background: #fff;
}
.hcp-sample .hcp-agreement > .hcp-help:first-of-type { margin: 0 0 26px; }
.hcp-sample .hcp-agreement__head { margin-bottom: 6px; }
.hcp-sample .hcp-agreement .hcp-subhead { margin: 0; font-size: 20px; }
.hcp-sample .hcp-summary { margin: 0 0 8px; }
.hcp-sample .hcp-list { margin: 0 0 8px; border-top: 0; }
.hcp-sample .hcp-signatures { margin-bottom: 12px; }

.hcp-steps-plain {
  margin: 0 0 36px;
  padding-left: 22px;
  color: var(--p-body);
}
.hcp-steps-plain li {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.65;
  padding-left: 6px;
}
.hcp-steps-plain li::marker { color: var(--p-green); font-family: var(--p-mono); font-size: 13px; }

@media (max-width: 600px) {
  .hcp-sample .hcp-agreement { padding: 22px 20px; }
}

/* ==========================================================================
   The terms
   ========================================================================== */

/* Legal prose wants a tighter measure than the embed's own 820px. */
.hcp-legal { max-width: 680px; }

.hcp-legal__meta {
  margin: 0 0 28px;
  font: 800 10px var(--p-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}

.hcp-legal__lead {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--p-ink);
}

/* Numbered so a clause can be pointed at in an email. */
.hcp-legal__head {
  margin: 44px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--p-rule);
  font: 500 19px var(--p-display);
  color: var(--p-ink);
}

.hcp-legal__sub {
  margin: 26px 0 10px;
  font: 800 10px var(--p-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}

.hcp-legal > p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--p-body);
}

.hcp-legal__list {
  margin: 0 0 20px;
  padding-left: 20px;
  list-style: disc;
}
.hcp-legal__list li {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--p-body);
  padding-left: 4px;
}
.hcp-legal__list li::marker { color: var(--p-green); }

.hcp-legal .hcp-terms { margin-top: 44px; }
.hcp-legal .hcp-alert ul { margin: 10px 0 10px 18px; padding: 0; list-style: disc; }
.hcp-legal .hcp-alert li { margin-bottom: 8px; font-size: 15px; line-height: 1.6; }
.hcp-legal .hcp-alert p { margin: 0 0 10px; }
.hcp-legal .hcp-alert p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Plans, and the join page
   ========================================================================== */

.hcp-plans {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0 0 24px;
}

.hcp-plan {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  border: 1px solid var(--p-rule);
  background: #fff;
}
.hcp-plan--premium { border-color: var(--p-terra); }
.hcp-plan--current { box-shadow: inset 0 0 0 1px var(--p-green); }
.hcp-plan--premium.hcp-plan--current { box-shadow: inset 0 0 0 1px var(--p-terra); }

.hcp-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hcp-plan__name {
  font: 800 10px var(--p-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .5);
}
.hcp-plan__price {
  margin: 0;
  font-family: var(--p-serif);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--p-ink);
}
.hcp-plan--premium .hcp-plan__price { color: var(--p-terra); }
.hcp-plan__note {
  margin: 6px 0 18px;
  font-size: 14px;
  color: var(--p-muted);
}
.hcp-plan__lines { margin: 0 0 22px; padding-left: 18px; list-style: disc; }
.hcp-plan__lines li {
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--p-body);
}
.hcp-plan__lines li::marker { color: var(--p-green); }
.hcp-plan--premium .hcp-plan__lines li::marker { color: var(--p-terra); }
.hcp-plan__foot { margin-top: auto; }
.hcp-plan__foot .hcp-help { margin: 0; }
.hcp-plan__foot form { margin: 0; }

.hcp-btn--terra { background: var(--p-terra); color: var(--p-oat); }
.hcp-btn--terra:hover { background: var(--p-ink); color: var(--p-oat); }

/* The join page, which is the first thing a visitor sees of either journey. */
.hcp-join__lead {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--p-ink);
  max-width: 620px;
}

/*
 * The page takes the full container, so the two sides are half of it each.
 * Two named columns rather than auto-fit, because a choice between two things
 * should read as a straight half and half, not as whatever happens to fit.
 */
.hcp-has-join .hc-plain__content { max-width: 100%; }

.hcp-join__sides {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 28px;
}

/* Side by side stops working long before this, so they stack. */
@media (max-width: 760px) {
  .hcp-join__sides { grid-template-columns: minmax(0, 1fr); }
}

.hcp-join__side {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 28px;
  border: 1px solid var(--p-rule);
  background: #fff;
}
.hcp-join__side--green { border-top: 3px solid var(--p-green); }
.hcp-join__side--terra { border-top: 3px solid var(--p-terra); }

.hcp-join__eyebrow {
  display: block;
  font: 800 10px var(--p-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .5);
}
.hcp-join__side--green .hcp-join__eyebrow { color: var(--p-green); }
.hcp-join__side--terra .hcp-join__eyebrow { color: var(--p-terra); }

.hcp-join__title {
  margin: 14px 0 16px;
  font-family: var(--p-serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--p-ink);
}
.hcp-join__price {
  margin: 0;
  font: 500 20px var(--p-display);
  color: var(--p-ink);
}
.hcp-join__note { margin: 4px 0 18px; font-size: 14px; color: var(--p-muted); }
.hcp-join__body { margin: 0 0 18px; font-size: 16px; line-height: 1.7; color: var(--p-body); }
.hcp-join__lines { margin: 0 0 26px; padding-left: 18px; list-style: disc; }
.hcp-join__lines li { margin-bottom: 9px; font-size: 15px; line-height: 1.6; color: var(--p-body); }
.hcp-join__side--green .hcp-join__lines li::marker { color: var(--p-green); }
.hcp-join__side--terra .hcp-join__lines li::marker { color: var(--p-terra); }
.hcp-join__foot { margin-top: auto; }
.hcp-join__foot-note { font-size: 15px; color: var(--p-muted); }
.hcp-join__foot-note a { margin: 0 4px; }

/* ==========================================================================
   Dashboard sections, and the tiles that point at them
   ========================================================================== */

/*
 * A note sitting directly on the rule above a list reads as though it belongs
 * to the list rather than to the heading. Give it room, but only where it is
 * followed by something ruled, so a trailing note keeps its tight spacing.
 */
.hcp-help + .hcp-list,
.hcp-help + .hcp-summary,
.hcp-help + .hcp-plans,
.hcp-help + .hcp-signatures,
.hcp-note + .hcp-list,
.hcp-dash__block > p + .hcp-list { margin-top: 20px; }

/*
 * A tile jumps to its section. The header is sticky, so the heading has to
 * clear it or the section arrives hidden underneath.
 */
.hcp-dash__block { scroll-margin-top: calc(var(--hc-nav-height, 72px) + 24px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The jumped to section is worth a moment of emphasis. */
.hcp-dash__block:target .hcp-subhead { color: var(--p-terra); }

/* ==========================================================================
   The detail card on a public profile
   ========================================================================== */

/*
 * White on the oat ground, so everything somebody told us reads as one
 * enclosed thing rather than more page. Sits inside the theme's own block
 * rhythm, so it needs no vertical margin of its own.
 */
.hcp-public { padding-top: 0; }

/*
 * Three separate boxes across a row, not one box divided by rules. Each is
 * built like the theme's own white panel next to it, the Open to box: white
 * ground, a hairline border, the same generous padding.
 *
 * auto-fit sets the column count from how many boxes there are, so the creator
 * panel's three sit in three and the stay panel's two fill the row as two,
 * rather than leaving a third of it empty. At the container's 1264px the
 * 320px floor caps it at three across, which is the intent.
 */
.hcp-card {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.hcp-card__part {
  padding: 42px 40px;
  background: var(--hc-white, #fff);
  border: 1px solid var(--hc-ink-10, rgba(29, 29, 29, .1));
}

@media (max-width: 600px) {
  .hcp-card { gap: 16px; }
  .hcp-card__part { padding: 30px 26px; }
}

/*
 * The box heading carries the theme's own hc-eyebrow class, which is what the
 * Open to panel beside it uses, so the two cannot drift apart. All that is
 * left to set here is the space under it.
 */
.hcp-card__head { margin: 0 0 26px; }
.hcp-card__sub {
  margin: 22px 0 10px;
  font: 500 15px var(--p-display);
  color: var(--p-ink);
}
.hcp-card__prose {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--p-body);
}
.hcp-card__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--p-muted);
}

.hcp-card__rows { margin: 0; }
.hcp-card__rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 18px 0;
  border-top: 1px solid var(--hc-ink-10, var(--p-rule));
}
.hcp-card__rows dt {
  font: 400 16px var(--hc-display, var(--p-display));
  color: var(--hc-ink, var(--p-ink));
}
.hcp-card__rows dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hc-ink-62, var(--p-muted));
  text-align: right;
}

/* Somebody else's links, so they are obviously links and obviously leaving. */
.hcp-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.hcp-links--stacked { flex-direction: column; gap: 8px; }
.hcp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(29, 29, 29, .2);
  border-radius: 999px;
  font: 400 14px var(--p-display);
  color: var(--p-ink);
  text-decoration: none;
}
.hcp-link:hover { background: var(--p-mint); border-color: var(--p-ink); color: var(--p-ink); }
.hcp-link__out { font-size: 12px; color: var(--p-muted); }
.hcp-links--stacked .hcp-link { justify-content: space-between; }

.hcp-rates { margin: 0; padding: 0; list-style: none; }
.hcp-rates__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 12px 0;
  border-top: 1px solid var(--p-rule);
}
.hcp-rates__row:first-child { border-top: 0; padding-top: 0; }
.hcp-rates__item { display: block; font-size: 15px; line-height: 1.5; color: var(--p-ink); }
.hcp-rates__note { display: block; margin-top: 3px; font-size: 13px; color: var(--p-muted); }
.hcp-rates__price {
  font: 500 15px var(--p-display);
  color: var(--p-green);
  white-space: nowrap;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.hcp-thread { margin: 0 0 28px; padding: 0; list-style: none; }

.hcp-thread__item {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--p-rule);
  max-width: 620px;
}

/* Your own messages sit to the right and read warmer, so a glance is enough. */
.hcp-thread__item--mine {
  margin-left: auto;
  background: var(--p-mint);
  border-color: transparent;
}

.hcp-thread__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.hcp-thread__who {
  font: 500 14px var(--p-display);
  color: var(--p-ink);
}
.hcp-thread__when {
  font: 800 9px var(--p-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}
.hcp-thread__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--p-body);
  overflow-wrap: anywhere;
}

.hcp-list__actions .hcp-tag { margin-left: 6px; }

/*
 * A field that opens a form under something else needs air above it. Text
 * landing straight onto the element above reads as though it belongs to it.
 */
.hcp-form--respond,
.hcp-form--reply { margin-top: 28px; }
.hcp-form--respond .hcp-field:first-child,
.hcp-form--reply .hcp-field:first-child { margin-top: 0; }
.hcp-form--respond .hcp-field,
.hcp-form--reply .hcp-field { margin-bottom: 4px; }

/* The thread and the form under it are one thing, so keep them close. */
.hcp-thread + .hcp-form--reply { margin-top: 20px; }
.hcp-summary + .hcp-form--respond { margin-top: 32px; }

/* ==========================================================================
   Nothing sits on a rule
   ========================================================================== */

/*
 * Several components draw a line across their top edge. Whatever precedes one
 * lands on that line unless something puts air between them, and the result
 * reads as though the two belong together when they do not. Patching each
 * place it happened kept missing the next one, so this covers the whole class.
 *
 * The sibling selector means it applies wherever one of these follows anything
 * at all, whatever that is. Adjacent margins collapse, so where the thing above
 * already provides room this takes the larger of the two rather than stacking:
 * it sets a floor, not an addition.
 */
/*
 * The class is named twice on purpose. Some of these already carry a margin
 * from a more specific rule elsewhere, and a single class would lose to it.
 * Repeating the class raises the weight without changing what it matches, and
 * without needing an ancestor these components do not all share.
 */
* + .hcp-summary.hcp-summary,
* + .hcp-list.hcp-list,
* + .hcp-journey.hcp-journey,
* + .hcp-status.hcp-status,
* + .hcp-skip.hcp-skip,
* + .hcp-signatures.hcp-signatures,
* + .hcp-thread.hcp-thread,
* + .hcp-tiles.hcp-tiles,
* + .hcp-plans.hcp-plans,
* + .hcp-rates.hcp-rates,
* + .hcp-card.hcp-card,
* + .hcp-panel.hcp-panel,
* + .hcp-missing.hcp-missing,
* + .hcp-dash__block.hcp-dash__block,
* + .hcp-dash__foot.hcp-dash__foot,
* + .hcp-auth__foot.hcp-auth__foot { margin-top: 28px; }

/*
 * A form ending in a row of buttons is the usual thing to land on one, so it
 * gets a little more room than the floor.
 */
.hcp-form + .hcp-summary.hcp-summary,
.hcp-form + .hcp-list.hcp-list,
.hcp-form + .hcp-status.hcp-status,
.hcp-actions + .hcp-summary.hcp-summary,
.hcp-actions + .hcp-list.hcp-list,
.hcp-actions + .hcp-status.hcp-status { margin-top: 36px; }

/* ==========================================================================
   Filtering a list by status
   ========================================================================== */

.hcp-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
}

.hcp-filter__label {
  margin-right: 4px;
  font: 800 9px var(--p-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
}

.hcp-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(29, 29, 29, .18);
  border-radius: 999px;
  font: 400 14px var(--p-display);
  color: var(--p-body);
  text-decoration: none;
  white-space: nowrap;
}
.hcp-filter__pill:hover { border-color: var(--p-ink); color: var(--p-ink); }
.hcp-filter__pill.is-on {
  background: var(--p-ink);
  border-color: var(--p-ink);
  color: var(--p-oat);
}

.hcp-filter__count {
  font-family: var(--p-mono);
  font-size: 11px;
  color: var(--p-muted);
}
.hcp-filter__pill.is-on .hcp-filter__count { color: rgba(255, 252, 244, .7); }

.hcp .hcp-filter__pill { text-decoration: none; }

/* ==========================================================================
   The business view
   ========================================================================== */

.hcp-boardroom .hcp-subhead { margin: 40px 0 16px; }
.hcp-boardroom .hcp-subhead:first-of-type { margin-top: 24px; }

/* Wide by nature, so it scrolls inside itself rather than the page. */
.hcp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--p-rule);
  background: #fff;
}

.hcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.hcp-table th,
.hcp-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--p-rule);
  white-space: nowrap;
}
.hcp-table thead th {
  border-top: 0;
  font: 800 9px var(--p-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, .45);
  background: var(--p-sand);
}
.hcp-table__num { text-align: right; }
.hcp-table td .hcp-tag { white-space: nowrap; }
.hcp-table tbody tr:hover { background: rgba(29, 29, 29, .02); }

/* ==========================================================================
   The business view, laid out
   ========================================================================== */

/* Tables of contact details do not belong in a measure meant for prose. */
.hcp-has-boardroom .hc-plain__content { max-width: 100%; }

.hcp-boardroom .hcp-tile__value { font-size: 38px; }

/*
 * Both dashboards carry seven tiles. Left to fit as many as will go, that
 * lands six on one line and one stranded underneath. Four then three reads as
 * a decision rather than an accident.
 */
@media (min-width: 1000px) {
  .hcp-dash .hcp-tiles { grid-template-columns: repeat(4, 1fr); }
}

/* Seven across where the room allows, rather than an awkward orphan row. */
@media (min-width: 1180px) {
  .hcp-tiles--seven { grid-template-columns: repeat(7, 1fr); }
  .hcp-tiles--seven .hcp-tile { padding: 20px 16px 22px; }
  .hcp-tiles--seven .hcp-tile__value { font-size: 32px; }
}

/* Tabs */
.hcp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}
.hcp-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid rgba(29, 29, 29, .18);
  border-radius: 999px;
  background: #fff;
  font: 400 15px var(--p-display);
  color: var(--p-body);
  text-decoration: none;
  cursor: pointer;
}
.hcp-tabs__tab:hover { border-color: var(--p-ink); color: var(--p-ink); }
.hcp-tabs__tab.is-on {
  background: var(--p-ink);
  border-color: var(--p-ink);
  color: var(--p-oat);
}
.hcp-tabs__count {
  font-family: var(--p-mono);
  font-size: 11px;
  color: var(--p-muted);
}
.hcp-tabs__tab.is-on .hcp-tabs__count { color: rgba(255, 252, 244, .7); }

.hcp .hcp-tabs__tab { text-decoration: none; }
.hcp-tabs__panel[hidden] { display: none; }