/* ============================================================================
   HRC+ : the member application.

   One frame, two themes. Every value below resolves to a token that already
   exists in the design system - the app layer adds no colour of its own, it
   only names which brand token plays which role on each surface, so the same
   stylesheet reads correctly on ink and on paper.

        role            dark                 light
        --app-bg        --ink                --paper-hover
        --app-panel     --ink-panel          --paper
        --app-raised    --ink-rail           --paper-hover
        --app-line      --line-ink           --line
        --app-ink       --paper              --ink
        --app-ink-2     --grey-on-ink        --grey
        --app-accent    --orange             --orange
        --app-type-on   --orange-on-ink      --orange-type-aa
        --app-danger    --error-on-ink       --error
        --app-danger-tint  error at 14%      --error-tint
   ========================================================================= */

body.hrc-plusapp, body.hrc-plus-public {
  --plus-rail: 264px;
  --plus-pad: 40px;
  --app-bg: var(--ink);
  --app-panel: var(--ink-panel);
  --app-raised: var(--ink-rail);
  --app-line: var(--line-ink);
  --app-ink: var(--paper);
  --app-ink-2: var(--grey-on-ink);
  --app-accent: var(--orange);
  --app-accent-press: var(--orange-press);
  --app-type-on: var(--orange-on-ink);
  --app-on-accent: var(--paper);
  --app-danger: var(--error-on-ink);
  --app-danger-tint: rgba(239, 95, 91, .14);
  --app-tint: rgba(252, 75, 31, .12);
  --app-tint-line: rgba(252, 75, 31, .34);
  --app-hover-line: rgba(252, 75, 31, .45);
  --app-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  --app-scrim: rgba(11, 11, 12, .66);
  --app-mark-invert: 1;
}

html[data-hrc-theme="light"] body.hrc-plusapp,
html[data-hrc-theme="light"] body.hrc-plus-public {
  --app-bg: var(--paper-hover);
  --app-panel: var(--paper);
  --app-raised: var(--paper-hover);
  --app-line: var(--line);
  --app-ink: var(--ink);
  --app-ink-2: var(--grey);
  --app-type-on: var(--orange-type-aa);
  --app-danger: var(--error);
  --app-danger-tint: var(--error-tint);
  --app-tint: var(--orange-tint);
  --app-tint-line: var(--orange-ghost-line);
  --app-hover-line: rgba(252, 75, 31, .55);
  --app-shadow: 0 14px 34px rgba(11, 11, 12, .12);
  --app-scrim: rgba(11, 11, 12, .42);
  --app-mark-invert: 0;
}

body.hrc-plusapp { background: var(--app-bg); }
body.hrc-plusapp .hrc-main { background: var(--app-bg); min-height: 100vh; }

.plusapp {
  position: relative;
  display: grid; grid-template-columns: var(--plus-rail) minmax(0, 1fr);
  min-height: 100vh; background: var(--app-bg); color: var(--app-ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
}
/* the rail column is painted by the frame, so the panel runs the full height
   of the page while the rail itself stays with the scroll */
.plusapp::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--plus-rail);
  background: var(--app-panel); border-right: 1px solid var(--app-line); pointer-events: none;
}

/* ── the rail ─────────────────────────────────────────────────────────── */
.plusapp__rail {
  position: sticky; top: 0; align-self: start; z-index: 2;
  display: flex; flex-direction: column; height: 100vh; max-height: 100vh;
  overflow-y: auto; scrollbar-width: none;
  padding: 26px 16px 22px; background: transparent;
}
.plusapp__rail::-webkit-scrollbar { display: none; }
.plusapp__brand { display: flex; align-items: center; padding: 0 10px 26px; text-decoration: none; }
.plusapp__logo { width: 128px; height: auto; display: block; flex: none; }
.plusapp__logo.is-light { display: none; }
html[data-hrc-theme="light"] .plusapp__logo.is-dark { display: none; }
html[data-hrc-theme="light"] .plusapp__logo.is-light { display: block; }
.plusapp__nav { flex: 1 1 auto; min-height: 0; }
.plusapp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.plusapp__link {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px;
  border-radius: var(--radius-action); text-decoration: none;
  color: var(--app-ink-2); font: var(--w-ui, 500) 15px/1 var(--font-sans);
  transition: color var(--dur-action) var(--ease-action), background-color var(--dur-action) var(--ease-action);
}
.plusapp__ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.plusapp__ico svg { width: 20px; height: 20px; }
.plusapp__link:hover, .plusapp__link.is-on { color: var(--app-ink); background: var(--app-raised); }
.plusapp__link.is-on .plusapp__ico { color: var(--app-accent); }

.plusapp__foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--app-line); display: grid; gap: 4px; }
.plusapp__theme, .plusapp__back, .plusapp__out {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: var(--radius-action); text-decoration: none;
  color: var(--app-ink-2); font: var(--w-ui, 500) 14px/1 var(--font-sans);
  transition: color var(--dur-action) var(--ease-action), background-color var(--dur-action) var(--ease-action);
}
.plusapp__theme svg, .plusapp__back svg, .plusapp__out svg { width: 20px; height: 20px; flex: none; }
.plusapp__theme:hover, .plusapp__back:hover, .plusapp__out:hover { color: var(--app-ink); background: var(--app-raised); }
.plusapp__theme span, .plusapp__back span, .plusapp__out span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plusapp__theme { justify-content: flex-start; }
.plusapp__themeico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.plusapp__themeico svg { width: 20px; height: 20px; display: block; }
.plusapp__themeico .in-light { display: none; }
.plusapp__themeico .in-dark { display: inline-flex; }
html[data-hrc-theme="light"] .plusapp__themeico .in-dark { display: none; }
html[data-hrc-theme="light"] .plusapp__themeico .in-light { display: inline-flex; }
.plusapp__themetext { flex: 1 1 auto; min-width: 0; text-align: left; }
.plusapp__switch {
  flex: none; position: relative; width: 38px; height: 22px; border-radius: var(--radius-dot);
  background: var(--app-line); transition: background-color var(--dur-action) var(--ease-action);
}
.plusapp__switch i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-dot);
  background: var(--app-panel); box-shadow: 0 1px 3px rgba(11, 11, 12, .35);
  transition: transform var(--dur-action) var(--ease-action), background-color var(--dur-action) var(--ease-action);
}
.plusapp__theme[aria-checked="true"] .plusapp__switch { background: var(--app-accent); }
.plusapp__theme[aria-checked="true"] .plusapp__switch i { transform: translateX(16px); background: var(--paper); }

.plusapp__me { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-action); text-decoration: none; transition: background-color var(--dur-action) var(--ease-action); }
.plusapp__me:hover { background: var(--app-raised); }
.plusapp__avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; overflow: hidden;
  border-radius: var(--radius-dot); background: var(--app-accent); color: var(--app-on-accent);
  font: var(--w-title, 700) 14px/1 var(--font-sans);
}
.plusapp__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plusapp__avatar.has-photo { background: var(--app-raised); }
.plusapp__who { display: grid; min-width: 0; }
.plusapp__whoname { font: var(--w-ui, 500) 14px/1.3 var(--font-sans); color: var(--app-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plusapp__whotier { font: 400 12px/1.3 var(--font-sans); color: var(--app-ink-2); }

/* ── the content column ───────────────────────────────────────────────── */
.plusapp__main { min-width: 0; padding: 34px var(--plus-pad) 72px; }

.plus-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--stack-group, 44px); }
.plus-eyebrow { margin: 0 0 10px; font: var(--w-ui, 500) 13px/1.4 var(--font-sans); letter-spacing: .02em; color: var(--app-type-on); }
.plus-title { margin: 0; font: var(--w-heading, 700) clamp(30px, 3.2vw, 44px)/1.08 var(--font-sans); letter-spacing: -.02em; color: var(--app-ink); }
.plus-sub { margin: 12px 0 0; max-width: 62ch; font: 400 17px/1.55 var(--font-sans); color: var(--app-ink-2); }
.plus-head__act { flex: none; display: flex; gap: 10px; }

.plus-sec { margin-top: var(--stack-major, 72px); }
.plus-sec:first-child { margin-top: 0; }
.plus-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: var(--stack-block, 24px); }
.plus-h2 { margin: 0; font: var(--w-title, 700) 22px/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--app-ink); }
.plus-note { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--app-ink-2); }
a.plus-note { text-decoration: none; }
a.plus-note:hover { color: var(--app-type-on); }
.plus-empty { margin: 0; padding: 32px 0; font: 400 16px/1.6 var(--font-sans); color: var(--app-ink-2); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.plus-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-action);
  font: var(--w-ui, 500) 15px/1 var(--font-sans); text-decoration: none;
  transition: background-color var(--dur-action) var(--ease-action), border-color var(--dur-action) var(--ease-action), color var(--dur-action) var(--ease-action);
}
.plus-btn svg { width: 18px; height: 18px; }
.plus-btn.is-primary { background: var(--app-accent); color: var(--app-on-accent); }
.plus-btn.is-primary:hover { background: var(--app-accent-press); color: var(--app-on-accent); }
.plus-btn.is-ghost { border-color: var(--app-line); color: var(--app-ink); background: transparent; }
.plus-btn.is-ghost:hover { border-color: var(--app-hover-line); background: var(--app-raised); color: var(--app-ink); }
.plus-btn.is-quiet { color: var(--app-ink-2); background: transparent; }
.plus-btn.is-quiet:hover { color: var(--app-ink); background: var(--app-raised); }

/* ── panels and cards ─────────────────────────────────────────────────── */
.plus-card {
  background: var(--app-panel); border: 1px solid var(--app-line);
  border-radius: var(--radius-card); padding: var(--pad-card, 26px);
}
.plus-grid { display: grid; gap: 18px; }
.plus-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plus-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plus-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.plus-stat { display: grid; gap: 6px; }
.plus-stat__k { font: var(--w-ui, 500) 13.5px/1 var(--font-sans); color: var(--app-ink-2); }
.plus-stat__v { font: var(--w-heading, 700) 34px/1.05 var(--font-sans); letter-spacing: -.02em; color: var(--app-ink); }
.plus-stat__s { font: 400 13.5px/1.45 var(--font-sans); color: var(--app-ink-2); }
.plus-next { display: grid; gap: 14px; }
.plus-next__t { margin: 0; font: var(--w-title, 700) 21px/1.25 var(--font-sans); color: var(--app-ink); }
.plus-next__m { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--app-ink-2); }
.plus-next__act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plus-tile { display: grid; gap: 8px; text-decoration: none; transition: transform var(--dur-card) var(--ease-card), border-color var(--dur-card) var(--ease-card), box-shadow var(--dur-card) var(--ease-card); }
.plus-tile:hover { transform: translateY(-4px); border-color: var(--app-hover-line); box-shadow: var(--app-shadow); }
.plus-tile__i { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: var(--radius-action); background: var(--app-raised); border: 1px solid var(--app-line); color: var(--app-type-on); }
.plus-tile__i svg { width: 20px; height: 20px; }
.plus-tile__t { font: var(--w-title, 700) 17px/1.25 var(--font-sans); color: var(--app-ink); }
.plus-tile__s { font: 400 14.5px/1.5 var(--font-sans); color: var(--app-ink-2); }

/* ── a perk ───────────────────────────────────────────────────────────── */
.plus-perk {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--app-panel); border: 1px solid var(--app-line);
  border-radius: var(--radius-card); text-decoration: none; color: var(--app-ink);
  transition: transform var(--dur-card) var(--ease-card), border-color var(--dur-card) var(--ease-card), box-shadow var(--dur-card) var(--ease-card);
}
.plus-perk:hover {
  transform: translateY(-4px); border-color: var(--app-accent);
  box-shadow: 0 0 0 1px var(--app-accent), var(--app-shadow);
}
.plus-perk__pic { display: block; aspect-ratio: 16 / 10; background: var(--app-raised) center/cover no-repeat; }
.plus-perk__body { display: grid; gap: 5px; align-content: start; padding: 16px 18px 18px; }
.plus-perk__cat { font: var(--w-ui, 500) 12.5px/1.25 var(--font-sans); letter-spacing: .02em; color: var(--app-type-on); }
.plus-perk__name { font: var(--w-title, 700) 17px/1.25 var(--font-sans); color: var(--app-ink); }
/* what the member actually gets, in the record's own words */
.plus-perk__offer {
  justify-self: start; margin-top: 5px; padding: 6px 11px;
  border-radius: var(--radius-chip, 4px); background: var(--app-tint); border: 1px solid var(--app-tint-line);
  font: var(--w-ui, 500) 13.5px/1.35 var(--font-sans); color: var(--app-ink);
}
/* a perk with no offer line says what it is instead, clamped to two lines */
.plus-perk__line {
  margin-top: 2px; font: 400 13.5px/1.5 var(--font-sans); color: var(--app-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.plus-perk.is-lg .plus-perk__pic { aspect-ratio: 16 / 9; }
.plus-perk.is-lg .plus-perk__name { font-size: 20px; }
.plus-perk.is-sm .plus-perk__pic { aspect-ratio: 3 / 2; }
.plus-perk.is-sm .plus-perk__body { padding: 13px 14px 15px; gap: 4px; }
.plus-perk.is-sm .plus-perk__cat { font-size: 11.5px; }
.plus-perk.is-sm .plus-perk__name { font-size: 15.5px; }
.plus-perk.is-sm .plus-perk__offer { font-size: 12.5px; padding: 5px 9px; margin-top: 4px; }
.plus-perk.is-sm .plus-perk__line { font-size: 12.5px; }

/* ── search and category buttons ──────────────────────────────────────── */
.plus-find { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--stack-block, 24px); }
.plus-search { position: relative; flex: 1 1 320px; min-width: 240px; }
.plus-search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--app-ink-2); pointer-events: none; }
.plus-search input {
  width: 100%; height: 46px; padding: 0 16px 0 44px; color: var(--app-ink);
  background: var(--app-panel); border: 1px solid var(--app-line); border-radius: var(--radius-action);
  font: 400 15px/1 var(--font-sans); transition: border-color var(--dur-action) var(--ease-action);
}
.plus-search input::placeholder { color: var(--app-ink-2); }
.plus-search input:focus { outline: none; border-color: var(--app-hover-line); }
.plus-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.plus-pills::-webkit-scrollbar { display: none; }
.plus-pill {
  flex: none; height: 38px; padding: 0 16px; cursor: pointer; white-space: nowrap;
  background: var(--app-panel); border: 1px solid var(--app-line); border-radius: var(--radius-action);
  color: var(--app-ink-2); font: var(--w-ui, 500) 14px/1 var(--font-sans);
  transition: color var(--dur-action) var(--ease-action), background-color var(--dur-action) var(--ease-action), border-color var(--dur-action) var(--ease-action);
}
.plus-pill:hover { color: var(--app-ink); background: var(--app-raised); }
.plus-pill.is-on { color: var(--app-on-accent); background: var(--app-accent); border-color: var(--app-accent); }

/* ── the catalogue ────────────────────────────────────────────────────── */
.plus-cat { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 40px; align-items: start; }
.plus-cat__rail { position: sticky; top: 24px; display: grid; gap: 10px; }
.plus-railrow { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--radius-action); text-decoration: none; transition: background-color var(--dur-action) var(--ease-action); }
.plus-railrow:hover { background: var(--app-panel); }
.plus-railrow__pic { width: 56px; height: 56px; flex: none; border-radius: var(--radius-action); background: var(--app-raised) center/cover no-repeat; }
.plus-railrow__t { display: grid; gap: 3px; min-width: 0; }
.plus-railrow__n { font: var(--w-ui, 500) 15px/1.25 var(--font-sans); color: var(--app-ink); }
.plus-railrow__s { font: 400 13px/1.35 var(--font-sans); color: var(--app-ink-2); }

.plus-reel { display: grid; grid-auto-flow: column; grid-auto-columns: calc(52% - 9px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.plus-reel::-webkit-scrollbar { display: none; }
.plus-reel > * { scroll-snap-align: start; }
.plus-reel.plus-row__scroll { grid-auto-columns: calc(50% - 9px); }
.plus-hero {
  position: relative; display: flex; align-items: flex-end; min-height: 300px; overflow: hidden;
  border-radius: var(--radius-card); background: var(--app-raised) center/cover no-repeat;
  text-decoration: none; color: var(--paper); border: 1px solid var(--app-line);
  transition: transform var(--dur-card) var(--ease-card), box-shadow var(--dur-card) var(--ease-card);
}
.plus-hero:hover { transform: translateY(-4px); box-shadow: var(--app-shadow); }
.plus-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .55) 42%, rgba(11, 11, 12, .1) 100%); }
.plus-hero__in { position: relative; padding: 26px; display: grid; gap: 8px; }
.plus-hero__tag { font: var(--w-ui, 500) 13px/1 var(--font-sans); color: var(--orange-on-ink); }
.plus-hero__n { margin: 0; font: var(--w-heading, 700) 26px/1.15 var(--font-sans); letter-spacing: -.01em; color: var(--paper); }
.plus-hero__s { margin: 0; font: 400 15.5px/1.5 var(--font-sans); color: rgba(255, 255, 255, .84); }

.plus-row__scroll { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4); gap: 18px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding-bottom: 4px; }
.plus-row__scroll::-webkit-scrollbar { display: none; }
.plus-nav { display: flex; gap: 8px; }
.plus-arrow { display: inline-grid; place-items: center; width: 34px; height: 34px; cursor: pointer; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: var(--radius-dot); color: var(--app-ink); transition: background-color var(--dur-action) var(--ease-action), border-color var(--dur-action) var(--ease-action); }
.plus-arrow:hover { background: var(--app-raised); border-color: var(--app-hover-line); }
.plus-arrow svg { width: 16px; height: 16px; }
.plus-arrow[disabled] { opacity: .35; cursor: default; }

/* ── the perk sheet ───────────────────────────────────────────────────── */
.plus-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--app-scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-leave) var(--ease-action); }
.plus-scrim.is-on { opacity: 1; pointer-events: auto; }
.plus-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-dialog); width: min(468px, 100%);
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--app-panel); border-left: 1px solid var(--app-line); color: var(--app-ink);
  transform: translateX(100%); transition: transform var(--dur-panel) var(--ease-nav);
}
.plus-sheet.is-on { transform: none; }
.plus-sheet h3 { margin: 0 0 14px; font: var(--w-title, 700) 18px/1.25 var(--font-sans); color: var(--app-ink); }
.plus-sheet__close { position: absolute; right: 16px; top: 16px; z-index: 2; display: inline-grid; place-items: center; width: 34px; height: 34px; cursor: pointer; border: 0; border-radius: var(--radius-dot); background: rgba(11, 11, 12, .6); color: var(--paper); font: 400 18px/1 var(--font-sans); }
.plus-sheet__close:hover { background: rgba(11, 11, 12, .85); }
.plus-sheet__pic { aspect-ratio: 16 / 10; background: var(--app-raised) center/cover no-repeat; flex: none; }
.plus-sheet__in { padding: 26px 26px 34px; display: grid; gap: var(--stack-block, 24px); }
.plus-sheet__head { display: grid; gap: 10px; }
.plus-sheet__mark { height: 26px; }
.plus-sheet__mark img { height: 100%; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(var(--app-mark-invert)); }
.plus-sheet__n { margin: 0; font: var(--w-heading, 700) 26px/1.15 var(--font-sans); letter-spacing: -.01em; color: var(--app-ink); }
.plus-sheet__cat { margin: 0; font: var(--w-ui, 500) 13.5px/1 var(--font-sans); color: var(--app-type-on); }
.plus-sheet__offer { margin: 0; padding: 14px 16px; border-radius: var(--radius-action); background: var(--app-tint); border: 1px solid var(--app-tint-line); font: var(--w-title, 700) 17px/1.3 var(--font-sans); color: var(--app-ink); }
.plus-sheet__body { margin: 0; font: 400 15.5px/1.6 var(--font-sans); color: var(--app-ink-2); }
.plus-sheet__facts { margin: 0; display: grid; }
.plus-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--app-line); }
.plus-fact:last-child { border-bottom: 1px solid var(--app-line); }
.plus-fact__k { font: 400 14px/1.4 var(--font-sans); color: var(--app-ink-2); }
.plus-fact__v { font: var(--w-ui, 500) 14.5px/1.4 var(--font-sans); color: var(--app-ink); text-align: right; }
.plus-code { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--app-tint-line); border-radius: var(--radius-action); background: var(--app-tint); font: var(--w-title, 700) 14.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--app-ink); cursor: pointer; }
.plus-code svg { width: 16px; height: 16px; color: var(--app-type-on); }
.plus-code.is-done { border-style: solid; border-color: var(--success); }
.plus-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: s; }
.plus-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; font: 400 15px/1.5 var(--font-sans); color: var(--app-ink-2); }
.plus-steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-dot); background: var(--app-raised); border: 1px solid var(--app-line); color: var(--app-ink); font: var(--w-title, 700) 13px/1 var(--font-sans); }
.plus-sheet__act { display: grid; gap: 10px; }
body.plus-locked { overflow: hidden; }

/* [hidden] has to beat the display the component sets, or nothing hides */
.plus-grid[hidden], .plus-perk[hidden], .plus-reel[hidden], .plus-sec[hidden],
.plus-empty[hidden], .plus-nav[hidden], .plus-find[hidden], .plus-btn[hidden] { display: none; }

/* ============================================================================
   Surfaces the frame inherits: sections composed from the site's own
   components, and the third-party forms. They are re-pointed at the app roles
   so they follow the theme with everything else.
   ========================================================================= */
.plusapp .v6-band-paper, .plusapp .v6-band-ink {
  --surface: var(--app-panel); --surface-hover: var(--app-raised);
  --on-surface: var(--app-ink); --on-surface-2: var(--app-ink-2);
  --rule: var(--app-line); --accent: var(--app-accent); --accent-tint: var(--app-tint);
  background: transparent; color: var(--app-ink);
}
.plusapp .v6-sec, .plusapp .v6-page-sec { padding-inline: 0; padding-block: 0; }
.plusapp .v6-page-sec + .v6-page-sec { margin-top: var(--stack-major, 72px); }
.plusapp .v6-wrap { width: 100%; max-width: none; padding-inline: 0; margin-inline: 0; }
.plusapp :is(.v6-h1, .v6-h2, .v6-h3, .v6-display, h1, h2, h3):not([class*="plus-"]) { color: var(--app-ink); }
.plusapp :is(.v6-lead, .v6-prose, .v6-small, p, li):not([class*="plus-"]) { color: var(--app-ink-2); }
.plusapp .v6-sechead .qual { color: var(--app-ink-2); }
.plusapp .v6-card { background: var(--app-line); border-color: var(--app-line); }
.plusapp .v6-card__inner { background: var(--app-panel); color: var(--app-ink); }
.plusapp .v6-card__title { color: var(--app-ink); }
.plusapp .v6-tile { background: var(--app-raised); border-color: var(--app-line); color: var(--app-type-on); }
.plusapp .v6-membernav, .plusapp .v6-member__headsec { display: none; }
.plusapp .v6-sec-listing, .plusapp .v6-member__body { padding-block: 0; }

/* A bare section heading owns its clearance on both sides. The bottom rule
   must not set a shorthand, or it also wins the top. This is h2 only: h3 is
   what the components use for their own titles, and a card title does not
   want a section's worth of air above it. */
.plusapp .v6-page-sec h2:not([class*="plus-"]):not(:last-child) { margin-bottom: var(--stack-head, 20px); }
.plusapp .v6-page-sec h2:not([class*="plus-"]):not(:first-child) { margin-top: var(--stack-major, 72px); }
.plusapp .v6-page-sec h2:not([class*="plus-"]) + * { margin-top: 0; }
.plusapp .hrc-run-card h3 { margin: 2px 0 10px; font: var(--w-title, 700) 19px/1.3 var(--font-sans); }
.plusapp .hrc-run-type { margin: 0; }

/* buttons that arrive from the site's own component set */
.plusapp .v6-btn.is-ghost { background: transparent; border-color: var(--app-line); color: var(--app-ink); }
.plusapp .v6-btn.is-ghost:hover { border-color: var(--app-hover-line); background: var(--app-raised); color: var(--app-ink); }
.plusapp .v6-btn.is-primary { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-on-accent); }
.plusapp .v6-btn.is-light { background: var(--app-ink); border-color: var(--app-ink); color: var(--app-bg); }
.plusapp .v6-quiet { color: var(--app-ink-2); }
.plusapp .v6-quiet:hover { color: var(--app-ink); }

/* tabs */
.plusapp .v6-tabs { margin-top: 0; }
.plusapp .v6-tabs__bar { border-bottom: 1px solid var(--app-line); margin-bottom: 0; }
.plusapp .v6-tabs__tab { color: var(--app-ink-2); }
.plusapp .v6-tabs__tab[aria-selected="true"] { color: var(--app-ink); }

/* ── the question list ────────────────────────────────────────────────── */
/* One table: a rule between rows, a fill on hover, and a chevron that stays
   a chevron. The base component cross-fades the chevron into an arrow and
   hides the chevron on hover, which is the swap that had to go. The row
   opens by growing a 0fr grid track, so nothing here may give a closed row
   any vertical padding - that is what made every answer show at once. */
.plusapp .v6-page-sec.is-faq .v6-acc, .plusapp .v6-acc {
  max-width: none; border: 1px solid var(--app-line); border-top: 1px solid var(--app-line);
  border-radius: var(--radius-card); background: var(--app-panel); overflow: hidden;
}
.plusapp .v6-acc__item { border: 0; background: transparent; }
.plusapp .v6-acc__item + .v6-acc__item { border-top: 1px solid var(--app-line); }
.plusapp .v6-acc__q {
  width: 100%; margin: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px var(--pad-card, 26px); background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--app-ink); font: var(--w-ui, 500) 16.5px/1.4 var(--font-sans);
  transition: background-color var(--dur-action) var(--ease-action), color var(--dur-action) var(--ease-action);
}
.plusapp .v6-acc__q:hover { background: var(--app-raised); color: var(--app-ink); }
.plusapp .v6-acc__glyph {
  position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-dot); border: 1px solid var(--app-line); color: var(--app-ink-2);
  transition: transform var(--dur-action) var(--ease-action), color var(--dur-action) var(--ease-action),
              border-color var(--dur-action) var(--ease-action), background-color var(--dur-action) var(--ease-action);
}
.plusapp .v6-acc__glyph svg { position: static; inset: auto; width: 16px; height: 16px; }
.plusapp .v6-acc__q:hover .v6-acc__glyph { color: var(--app-ink); border-color: var(--app-hover-line); }
.plusapp .v6-acc__item.is-open .v6-acc__glyph {
  transform: rotate(-90deg); color: var(--app-type-on);
  border-color: var(--app-tint-line); background: var(--app-tint);
}
/* the answer: horizontal room always, height only when it is open */
.plusapp .v6-acc__body { padding: 0 var(--pad-card, 26px); max-width: none; }
.plusapp .v6-acc__item.is-open .v6-acc__body { padding-bottom: 22px; }
.plusapp .v6-acc__a p, .plusapp .v6-acc__body .v6-prose p { color: var(--app-ink-2); margin: 0; padding: 0; max-width: 68ch; }
.plusapp .v6-acc__body .v6-prose p + p { margin-top: 14px; }

/* ── the run list ─────────────────────────────────────────────────────── */
.plusapp .hrc-run-card-list, .plusapp .hrc-run-card { margin-left: 0; margin-right: 0; }
.plusapp .hrc-run-card-list { display: grid; gap: 14px; }
.plusapp .hrc-run-card {
  background: var(--app-panel); border: 1px solid var(--app-line);
  border-radius: var(--radius-card); padding: var(--pad-card, 26px); margin: 0;
}
.plusapp .hrc-run-card h3 { color: var(--app-ink); }
.plusapp .hrc-run-type { color: var(--app-type-on); }
.plusapp .hrc-run-number { color: var(--app-ink-2); }
.plusapp .hrc-run-meta, .plusapp .hrc-run-meta span { color: var(--app-ink-2); }
.plusapp .hrc-run-meta strong { color: var(--app-ink); font-weight: 500; }
.plusapp .hrc-register-message { color: var(--app-ink-2); }
.plusapp .hrc-runs-empty {
  background: var(--app-raised); color: var(--app-ink-2);
  border: 1px solid var(--app-line); border-radius: var(--radius-card);
}

/* ── the account and profile forms ────────────────────────────────────── */
.plusapp .v6-member__panel {
  background: var(--app-panel); border: 1px solid var(--app-line);
  border-radius: var(--radius-card); padding: var(--pad-card, 26px);
}
.plusapp .um, .plusapp .um-form { background: transparent; }
.plusapp .um :is(h1, h2, h3, h4) { color: var(--app-ink); }
.plusapp table { color: var(--app-ink-2); border-color: var(--app-line); }
.plusapp table :is(th, td) { border-color: var(--app-line); color: inherit; }
.plusapp table th { color: var(--app-ink); }

/* ── the orders surface ───────────────────────────────────────────────── */
.plusapp .enventor-account-title { color: var(--app-ink); }
.plusapp .enventor-account-header { border-bottom: 1px solid var(--app-line); padding-bottom: 16px; margin-bottom: var(--stack-block, 24px); }
.plusapp .enventor-account-empty { display: grid; gap: 16px; justify-items: start; }
.plusapp .enventor-account-lede, .plusapp .enventor-account-empty p { color: var(--app-ink-2); margin: 0; }
.plusapp .enventor-account-actions { margin: 0; }
.plusapp .enventor-account-button { background: var(--app-accent); color: var(--app-on-accent); border-radius: var(--radius-action); }
.plusapp .enventor-account-button:hover { background: var(--app-accent-press); color: var(--app-on-accent); }
.plusapp :is(.enventor-account-card, .enventor-order, .enventor-order-card, .woocommerce-order, .woocommerce-MyAccount-content) {
  background: var(--app-raised); border: 1px solid var(--app-line); border-radius: var(--radius-card); color: var(--app-ink-2);
}
/* the order itself: names and figures in ink, meta in ink-2, rules and the
   totals sheet on the app roles, statuses as chips that carry no colour the
   system does not have (active takes the accent tint, cancelled steps back) */
.plusapp :is(.enventor-order-item-name, .enventor-order-card-number, .enventor-order-card-total, .enventor-order-total-row dd, .enventor-order-fulfilment h2, .enventor-order-address h2, .enventor-order-address address) { color: var(--app-ink); }
.plusapp :is(.enventor-order-item-variation, .enventor-order-item-quantity, .enventor-order-card-date, .enventor-order-card-items, .enventor-order-total-row dt, .enventor-order-total-note, .enventor-order-note, .enventor-account-support) { color: var(--app-ink-2); }
.plusapp :is(.enventor-order-items, .enventor-order-item, .enventor-account-support) { border-color: var(--app-line); }
.plusapp .enventor-order-totals { background: var(--app-raised); border: 1px solid var(--app-line); border-radius: var(--radius-card); }
.plusapp .enventor-order-item-media { flex: none; width: 72px; }
.plusapp .enventor-order-item-media img { display: block; width: 72px; height: 90px; object-fit: cover; border-radius: var(--radius-action); background: var(--app-raised); }
.plusapp .enventor-account-breadcrumb a { color: var(--app-type-on); }
.plusapp .enventor-order-status {
  height: 26px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 999px;
  background: var(--app-raised); color: var(--app-ink);
  font: var(--w-ui, 500) 12px/1 var(--font-sans); letter-spacing: .04em;
}
.plusapp .enventor-order-status-active { background: var(--app-tint); color: var(--app-type-on); border-color: var(--app-tint-line); }
.plusapp .enventor-order-status-complete { background: rgba(30, 142, 79, .12); color: var(--success); border-color: rgba(30, 142, 79, .34); }
.plusapp .enventor-order-status-closed { background: transparent; color: var(--app-ink-2); border-color: var(--app-line); }

/* ── the public page, on the same canvas ──────────────────────────────── */
body.hrc-plus-public { background: var(--app-bg); }
body.hrc-plus-public .hrc-main { background: var(--app-bg); }
body.hrc-plus-public .v6-band-paper {
  --surface: var(--app-panel); --surface-hover: var(--app-raised);
  --on-surface: var(--app-ink); --on-surface-2: var(--app-ink-2);
  --rule: var(--app-line); --accent: var(--app-accent); --accent-tint: var(--app-tint);
  background: var(--app-bg); color: var(--app-ink);
}
body.hrc-plus-public :is(.v6-h1, .v6-h2, .v6-h3, .v6-display) { color: var(--app-ink); }
body.hrc-plus-public :is(.v6-lead, .v6-prose, .v6-small) { color: var(--app-ink-2); }
body.hrc-plus-public .v6-sechead .qual { color: var(--app-ink-2); }
body.hrc-plus-public .v6-card { background: var(--app-line); border-color: var(--app-line); }
body.hrc-plus-public .v6-card__inner { background: var(--app-panel); color: var(--app-ink); }
body.hrc-plus-public .v6-card__title { color: var(--app-ink); }
body.hrc-plus-public .v6-tile { background: var(--app-raised); border-color: var(--app-line); color: var(--app-type-on); }
body.hrc-plus-public .v6-btn.is-ghost { background: transparent; border-color: var(--app-line); color: var(--app-ink); }
body.hrc-plus-public .v6-perk__list li { color: var(--app-ink-2); }
body.hrc-plus-public .v6-eyebrow { color: var(--app-type-on); }
body.hrc-plus-public .v6-shot { background: var(--app-panel); border: 1px solid var(--app-line); border-radius: var(--radius-card); overflow: hidden; }
body.hrc-plus-public .plus-lockup { display: block; width: 272px; height: auto; margin: 0 0 26px; }
body.hrc-plus-public .plus-lockup.is-sm { width: 168px; margin-bottom: 20px; }
body.hrc-plus-public .plus-lockup.is-light { display: none; }
html[data-hrc-theme="light"] body.hrc-plus-public .plus-lockup.is-dark { display: none; }
html[data-hrc-theme="light"] body.hrc-plus-public .plus-lockup.is-light { display: block; }

/* ── narrower ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .plus-cat { grid-template-columns: minmax(0, 1fr); gap: var(--stack-group, 44px); }
  .plus-cat__rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plus-row__scroll { grid-auto-columns: calc((100% - 36px) / 3); }
  .plus-reel, .plus-reel.plus-row__scroll { grid-auto-columns: 74%; }
  body.hrc-plus-public .plus-grid.is-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 861px) { .plus-pills { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 1080px) {
  body.hrc-plusapp { --plus-pad: 24px; }
  .plusapp { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .plusapp::before { display: none; }
  .plusapp__rail {
    position: static; height: auto; max-height: none; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 14px; row-gap: 6px; padding: 12px 16px;
    background: var(--app-panel); border-bottom: 1px solid var(--app-line);
  }
  .plusapp__brand { padding: 0; }
  .plusapp__logo { width: 112px; }
  .plusapp__nav { flex: 1 0 100%; order: 3; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; }
  .plusapp__nav::-webkit-scrollbar { display: none; }
  .plusapp__list { grid-auto-flow: column; gap: 4px; padding-inline: 4px; }
  .plusapp__link { height: 38px; }
  .plusapp__foot {
    display: flex; align-items: center; gap: 4px; flex: none; margin: 0 0 0 auto;
    padding: 0; border-top: 0;
  }
  .plusapp__back span, .plusapp__out span, .plusapp__who { display: none; }
  .plusapp__themeico, .plusapp__themetext { display: none; }
  .plusapp__theme { width: 44px; }
  .plusapp__switch { width: 34px; height: 20px; }
  .plusapp__switch i { width: 14px; height: 14px; }
  .plusapp__theme[aria-checked="true"] .plusapp__switch i { transform: translateX(14px); }
  .plusapp__theme, .plusapp__back, .plusapp__out { width: 38px; padding: 0; justify-content: center; gap: 0; }
  .plusapp__me { padding: 4px; }
  .plusapp__main { padding-top: 26px; }
}
@media (max-width: 860px) {
  .plus-grid.is-4, .plus-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plus-row__scroll { grid-auto-columns: calc((100% - 18px) / 2); }
  .plus-reel, .plus-reel.plus-row__scroll { grid-auto-columns: 86%; }
  .plus-head { flex-direction: column; align-items: flex-start; }
  .plus-cat__rail { grid-template-columns: minmax(0, 1fr); }
  body.hrc-plus-public .plus-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hrc-plus-public .plus-lockup { width: 208px; }
  body.hrc-plus-public .plus-lockup.is-sm { width: 140px; }
  .plusapp .v6-acc__q { padding-inline: 18px; font-size: 15.5px; }
  .plusapp .v6-acc__body { padding-inline: 18px; }
}
@media (max-width: 560px) {
  .plusapp__label { display: none; }
  .plusapp__link { width: 42px; padding: 0; justify-content: center; }
  .plusapp__list { gap: 4px; }
  .plus-grid.is-4, .plus-grid.is-3, .plus-grid.is-2 { grid-template-columns: minmax(0, 1fr); }
  .plus-grid.is-3[data-plusfiltered] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [data-plusfiltered] .plus-perk__body { padding: 13px 13px 15px; }
  [data-plusfiltered] .plus-perk__name { font-size: 15px; }
  [data-plusfiltered] .plus-perk__line { font-size: 13px; }
  .plus-row__scroll { grid-auto-columns: 78%; }
  .plus-reel, .plus-reel.plus-row__scroll { grid-auto-columns: 92%; }
  .plus-sheet { width: 100%; }
  body.hrc-plus-public .plus-grid.is-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .plusapp__logo { width: 96px; } }

/* ============================================================================
   The last word.
   The inline Customizer sheet is served after every stylesheet we own, and
   Ultimate Member ships its own on top of that, so the declarations below
   carry weight. They are scoped to the application frame and to components
   the design system does not own. Each still resolves to an app role, so they
   follow the theme like everything else.
   ========================================================================= */
html body.hrc-coded .plusapp .hrc-run-card { border: 1px solid var(--app-line) !important; border-radius: var(--radius-card) !important; margin: 0 !important; }
html body.hrc-coded .plusapp .hrc-run-card-list { border: 0 !important; margin: 0 !important; }
html body.hrc-coded .plusapp .hrc-run-card .hrc-run-card-btn {
  color: var(--app-ink) !important; background: transparent !important;
  border: 1px solid var(--app-line) !important; border-radius: var(--radius-action) !important;
}
html body.hrc-coded .plusapp .hrc-run-card .hrc-run-card-btn:hover { border-color: var(--app-hover-line) !important; background: var(--app-raised) !important; }
/* register, and its registered state, which the old sheet drew as ink on ink */
html body.hrc-coded .plusapp .hrc-register-btn {
  background: var(--app-accent) !important; color: var(--app-on-accent) !important;
  border: 1px solid var(--app-accent) !important; border-radius: var(--radius-action) !important;
}
html body.hrc-coded .plusapp .hrc-register-btn:hover { background: var(--app-accent-press) !important; border-color: var(--app-accent-press) !important; }
html body.hrc-coded .plusapp .hrc-register-btn:is(.is-registered, .registered, [data-action="unregister"]),
html body.hrc-coded .plusapp .hrc-run-card.is-registered .hrc-register-btn {
  background: transparent !important; color: var(--app-ink) !important; border-color: var(--app-line) !important;
}
html body.hrc-coded .plusapp .hrc-register-btn:is(.is-registered, .registered, [data-action="unregister"]):hover,
html body.hrc-coded .plusapp .hrc-run-card.is-registered .hrc-register-btn:hover {
  border-color: var(--app-hover-line) !important; background: var(--app-raised) !important; color: var(--app-ink) !important;
}
html body.hrc-coded .plusapp .hrc-runs-empty {
  background: var(--app-raised) !important; color: var(--app-ink-2) !important;
  border: 1px solid var(--app-line) !important; border-radius: var(--radius-card) !important;
}

html body.hrc-coded .plusapp .um .um-account-side li { background: transparent !important; }
html body.hrc-coded .plusapp .um .um-account-side li a,
html body.hrc-coded .plusapp .um .um-account-side li a.current {
  background: var(--app-raised) !important; color: var(--app-ink-2) !important;
  border: 1px solid var(--app-line) !important;
}
html body.hrc-coded .plusapp .um .um-account-side li a.current { color: var(--app-ink) !important; border-color: var(--app-hover-line) !important; }
html body.hrc-coded .plusapp .um .um-account-side li a span,
html body.hrc-coded .plusapp .um .um-account-side li a div { color: inherit !important; }
html body.hrc-coded .plusapp .um .um-account-side li a i,
html body.hrc-coded .plusapp .um .um-account-side li a .um-account-icon { color: var(--app-type-on) !important; }
html body.hrc-coded .plusapp .um .um-account-heading,
html body.hrc-coded .plusapp .um .um-account-heading div,
html body.hrc-coded .plusapp .um .um-account-heading i,
html body.hrc-coded .plusapp .um .um-account-name a,
html body.hrc-coded .plusapp .um .um-name a,
html body.hrc-coded .plusapp .um .um-header .um-name a { color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um,
html body.hrc-coded .plusapp .um .um-profile-note,
html body.hrc-coded .plusapp .um .um-meta,
html body.hrc-coded .plusapp .um .um-field-area,
html body.hrc-coded .plusapp .um .um-field-value { color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .um .um-field-label,
html body.hrc-coded .plusapp .um .um-item-link,
html body.hrc-coded .plusapp .um .um-item-name a { color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um :is(.um-header, .um-profile-body, .um-profile-nav, .um-cover) { background: transparent !important; }
html body.hrc-coded .plusapp .um .um-profile-nav-item a { color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .um .um-profile-nav-item.active a { color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um .um-form label { color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .um .um-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea) {
  background: var(--app-raised) !important; border: 1px solid var(--app-line) !important;
  color: var(--app-ink) !important; border-radius: var(--radius-action) !important;
}
html body.hrc-coded .plusapp .um .um-form input::placeholder { color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .um .um-form :is(input:disabled, input[readonly]) { background: var(--app-panel) !important; color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .um :is(.um-button, input[type="submit"].um-button) {
  background: var(--app-accent) !important; color: var(--app-on-accent) !important; border-radius: var(--radius-action) !important;
}
html body.hrc-coded .plusapp .um .um-button:hover { background: var(--app-accent-press) !important; }
/* the profile edit control, which ships as a light square */
html body.hrc-coded .plusapp .um :is(.um-profile-edit, .um-profile-edit-a, .um-profile-headericon a) {
  background: var(--app-raised) !important; color: var(--app-ink) !important;
  border: 1px solid var(--app-line) !important; border-radius: var(--radius-action) !important;
}
html body.hrc-coded .plusapp .enventor-account-lede,
html body.hrc-coded .plusapp .enventor-account-empty p { color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .enventor-account-button { background: var(--app-accent) !important; color: var(--app-on-accent) !important; }

/* the question list has to outrank the accordion's own sheet too */
html body.hrc-coded .plusapp .v6-acc__item { border: 0 !important; background: transparent !important; }
html body.hrc-coded .plusapp .v6-acc__item + .v6-acc__item { border-top: 1px solid var(--app-line) !important; }
html body.hrc-coded .plusapp .v6-acc__glyph .arr { display: none !important; opacity: 0 !important; }
/* the chevron never fades out and never turns into anything else */
html body.hrc-coded .plusapp .v6-acc__glyph .chev,
html body.hrc-coded .plusapp .v6-acc__item.is-open .v6-acc__glyph .chev,
html body.hrc-coded .plusapp .v6-acc__q:hover .v6-acc__glyph .chev {
  opacity: 1 !important; transform: none !important; position: static !important;
}

/* ── a feature card ──────────────────────────────────────────────────── */
/* One card in a two-up grid is a feature panel, not a mistake: the
   photograph in a fixed column, the copy beside it, and the actions hard
   right on the same line, centred against the copy. The :has() test is what
   keeps this off every other card grid - an earlier version matched any
   .v6-cards in a tabs panel and flattened the previous-events grid with it. */
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) > .v6-card {
  background: var(--app-line); border: 0; border-radius: var(--radius-card); overflow: hidden;
}
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__inner {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: stretch;
  background: var(--app-panel); border-radius: var(--radius-inner); overflow: hidden;
}
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__figure { margin: 0; height: 100%; background: var(--app-raised); }
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__figure img {
  width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block;
}
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__pad {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--stack-tight, 12px) var(--stack-group, 44px); padding: var(--pad-card, 26px);
}
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__pad > .v6-card__top { flex: 1 0 100%; margin: 0; }
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__pad > .v6-prose { flex: 1 1 320px; margin: 0; }
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__title {
  font: var(--w-title, 700) 21px/1.25 var(--font-sans); color: var(--app-ink);
}
.plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__pad > .v6-card__actions { flex: 0 0 auto; margin: 0 0 0 auto; }
@media (max-width: 1080px) {
  .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__inner { grid-template-columns: 200px minmax(0, 1fr); }
  .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__pad { gap: var(--stack-tight, 12px) var(--stack-block, 24px); }
}
@media (max-width: 860px) {
  .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__inner { grid-template-columns: minmax(0, 1fr); }
  .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__figure img { min-height: 0; aspect-ratio: 16 / 9; }
  .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__pad > .v6-card__actions { margin-left: 0; }
}

/* ── the sheet scrolls under the cursor ───────────────────────────────── */
/* The site runs a smooth-scroll library that takes the wheel globally and
   drives the document with it, so a wheel over the sheet moved the page
   behind instead. The sheet opts out the same way the bag drawer does, with
   data-lenis-prevent, and contains its own overscroll so reaching the end
   does not hand the gesture back to the page. */
.plus-sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ── a perk that has ended, or entries that have closed ───────────────── */
.plus-perk__pic { position: relative; }
.plus-perk__state {
  position: absolute; right: 10px; top: 10px; z-index: 1;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--radius-chip, 4px); backdrop-filter: blur(6px);
  background: rgba(11, 11, 12, .72); color: var(--paper);
  font: var(--w-ui, 500) 12px/1 var(--font-sans); letter-spacing: .01em;
}
.plus-perk__state.is-soon { background: rgba(252, 75, 31, .88); }
.plus-perk.is-over .plus-perk__pic { filter: grayscale(1); opacity: .55; }
.plus-perk.is-over .plus-perk__offer { opacity: .6; }

.plus-state {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 13px 16px; border-radius: var(--radius-action);
  background: var(--app-raised); border: 1px solid var(--app-line);
  font: var(--w-ui, 500) 14.5px/1.4 var(--font-sans); color: var(--app-ink);
}
.plus-state__dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: var(--radius-dot); background: var(--app-ink-2); }
.plus-state.is-soon { background: var(--app-tint); border-color: var(--app-tint-line); }
.plus-state.is-soon .plus-state__dot { background: var(--app-accent); }
.plus-state__t { display: grid; gap: 3px; }
.plus-state__n { font: 400 13.5px/1.45 var(--font-sans); color: var(--app-ink-2); }
.plus-sheet__offer.is-over { opacity: .55; }
.plus-fact__v.is-over { color: var(--app-ink-2); font-family: var(--font-mono); letter-spacing: .06em; }
.plus-btn.is-off {
  background: var(--app-raised); border-color: var(--app-line); color: var(--app-ink-2); cursor: default;
}
.plus-btn.is-off:hover { background: var(--app-raised); border-color: var(--app-line); color: var(--app-ink-2); }
.plus-sheet__pic.is-over { filter: grayscale(1); opacity: .6; }

/* ============================================================================
   Hover, everywhere the frame inherits a component.
   The components below ship their own :hover with a light fill, which on ink
   turns a card into an unreadable white slab. The resting colours were
   re-pointed long ago; these are the states that were missed.
   ========================================================================= */
html body.hrc-coded .plusapp :is(.hrc-run-card, .hrc-run-registration, .hrc-run-card-list > *):hover {
  background: var(--app-raised) !important;
  border-color: var(--app-hover-line) !important;
}
html body.hrc-coded .plusapp .hrc-run-card:hover :is(h3, .hrc-run-meta, .hrc-run-meta span, .hrc-run-meta strong, .hrc-run-number) {
  color: inherit !important;
}
html body.hrc-coded .plusapp .hrc-run-card:hover h3,
html body.hrc-coded .plusapp .hrc-run-card:hover .hrc-run-meta strong { color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .hrc-run-card:hover :is(.hrc-run-meta, .hrc-run-meta span) { color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .hrc-run-card:hover .hrc-run-type { color: var(--app-type-on) !important; }
html body.hrc-coded .plusapp :is(.um-account-side li a, .um-item, .um-profile-nav-item a):hover {
  background: var(--app-raised) !important; color: var(--app-ink) !important;
}
html body.hrc-coded .plusapp :is(.enventor-account-card, .enventor-order, .enventor-order-card):hover {
  background: var(--app-raised) !important; color: var(--app-ink-2) !important;
}

/* ── the run card on the spacing scale ────────────────────────────────── */
html body.hrc-coded .plusapp .hrc-run-card { padding: var(--pad-card, 26px) !important; }
html body.hrc-coded .plusapp .hrc-run-card-actions { gap: var(--stack-tight, 12px) !important; align-items: center !important; }

/* ── the rail rows stop clipping their descenders ─────────────────────── */
/* font: …/1 gave the line box the height of a cap inside a 38px row, so the
   g in "Sign out" had nowhere to go. */
.plusapp__link, .plusapp__theme, .plusapp__back, .plusapp__out { line-height: 1.25; }
.plusapp__link { font: var(--w-ui, 500) 15px/1.25 var(--font-sans); }
.plusapp__theme, .plusapp__back, .plusapp__out { font: var(--w-ui, 500) 14px/1.25 var(--font-sans); }
.plusapp__theme span, .plusapp__back span, .plusapp__out span { line-height: 1.25; padding-block: 1px; }

/* ── the settings menu reads like the rail ────────────────────────────── */
html body.hrc-coded .plusapp .um .um-account-side li { margin: 0 0 2px !important; }
html body.hrc-coded .plusapp .um .um-account-side li a,
html body.hrc-coded .plusapp .um .um-account-side li a.current {
  display: flex !important; align-items: center !important; gap: 12px !important;
  height: 42px !important; padding: 0 12px !important; line-height: 1.25 !important;
  border: 0 !important; border-radius: var(--radius-action) !important;
  background: transparent !important; color: var(--app-ink-2) !important;
  font: var(--w-ui, 500) 15px/1.25 var(--font-sans) !important;
}
html body.hrc-coded .plusapp .um .um-account-side li a:hover { background: var(--app-raised) !important; color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um .um-account-side li a.current { background: var(--app-raised) !important; color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um .um-account-side li a .um-account-icon {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 20px !important; height: 20px !important; flex: none !important;
  border: 0 !important; border-right: 0 !important; padding: 0 !important; margin: 0 !important;
}
html body.hrc-coded .plusapp .um .um-account-side li a .um-account-icon i { font-size: 16px !important; color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .um .um-account-side li a.current .um-account-icon i { color: var(--app-accent) !important; }
html body.hrc-coded .plusapp .um .um-account-side li a .um-account-title { flex: 1 1 auto !important; padding: 0 !important; }
/* the duplicate mobile-only icon, and the chevron, are not part of the rail */
html body.hrc-coded .plusapp .um .um-account-side li a .um-account-icontip { display: none !important; }
html body.hrc-coded .plusapp .um .um-account-side li a::after,
html body.hrc-coded .plusapp .um .um-account-side li a::before,
html body.hrc-coded .plusapp .um .um-account-side li a .um-account-arrow { display: none !important; content: none !important; }

/* ── an ink band stays an ink band ────────────────────────────────────── */
/* On the public page the hero, the photo reel and the closing band are ink
   by design, in either theme. Only the type inside them was following the
   theme, which turned the headline black on black in light mode. */
body.hrc-plus-public .v6-band-ink { background: var(--ink); color: var(--paper); }
body.hrc-plus-public .v6-band-ink :is(.v6-h1, .v6-h2, .v6-h3, .v6-display, h1, h2, h3) { color: var(--paper); }
body.hrc-plus-public .v6-band-ink :is(.v6-lead, .v6-prose, .v6-small, p, li) { color: var(--grey-on-ink); }
body.hrc-plus-public .v6-band-ink .v6-eyebrow { color: var(--orange-on-ink); }
body.hrc-plus-public .v6-band-ink .v6-btn.is-ghost { border-color: var(--line-ink); color: var(--paper); }
body.hrc-plus-public .v6-band-ink .v6-btn.is-light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
body.hrc-plus-public .v6-band-ink .plus-lockup.is-light { display: none; }
html[data-hrc-theme="light"] body.hrc-plus-public .v6-band-ink .plus-lockup.is-dark { display: block; }

/* a ghost button inside the frame is a line, never a translucent white fill */
html body.hrc-coded .plusapp .v6-btn.is-ghost {
  background: transparent !important; border: 1px solid var(--app-line) !important; color: var(--app-ink) !important;
}
html body.hrc-coded .plusapp .v6-btn.is-ghost:hover {
  border-color: var(--app-hover-line) !important; background: var(--app-raised) !important; color: var(--app-ink) !important;
}
html body.hrc-coded .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__actions > .v6-btn:first-child {
  background: var(--app-accent) !important; border-color: var(--app-accent) !important; color: var(--app-on-accent) !important;
}
html body.hrc-coded .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__actions > .v6-btn:first-child .v6-chev { display: none !important; }
html body.hrc-coded .plusapp .v6-cards.is-2:has(> .v6-card:only-child) .v6-card__actions > .v6-btn:first-child:hover {
  background: var(--app-accent-press) !important; border-color: var(--app-accent-press) !important;
}

/* The registered state, written out rather than grouped: the old sheet draws
   it as an outline with ink text, which on ink is an invisible button. */
html body.hrc-coded .plusapp .hrc-register-btn.registered,
html body.hrc-coded .plusapp .hrc-register-btn.is-registered,
html body.hrc-coded .plusapp .hrc-register-btn[data-action="unregister"] {
  background: transparent !important;
  color: var(--app-ink) !important;
  border: 1px solid var(--app-line) !important;
}
html body.hrc-coded .plusapp .hrc-register-btn.registered:hover,
html body.hrc-coded .plusapp .hrc-register-btn.is-registered:hover,
html body.hrc-coded .plusapp .hrc-register-btn[data-action="unregister"]:hover {
  background: var(--app-raised) !important;
  border-color: var(--app-hover-line) !important;
  color: var(--app-ink) !important;
}

/* ── a lifted card needs room inside its scroller ─────────────────────── */
/* overflow-x: auto makes overflow-y compute to auto, so the row clips
   anything that leaves the box - and a hovered perk leaves it by 4px of lift
   plus its 1px ring, with the shadow below. The padding gives that room
   inside the clip box; the negative margin gives it back to the layout, so
   the cards sit exactly where they did. */
.plus-row__scroll, .plus-reel {
  padding-block: 10px 20px;
  margin-block: -10px -16px;
}


/* ============================================================================
   23.8  The system applied: sizes, the destructive role, the inherited forms
   ========================================================================= */

/* Every action inside a card is the small action: 40px, 18px sides, 14px/500.
   Register and Learn more were 44 and 40 beside each other. */
html body.hrc-coded .plusapp .hrc-register-btn,
html body.hrc-coded .plusapp .hrc-run-card .hrc-run-card-btn {
  box-sizing: border-box !important; height: 40px !important; min-height: 0 !important;
  padding: 0 18px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font: var(--w-ui, 500) 14px/1 var(--font-sans) !important; line-height: 1 !important;
}

/* The registered state is an Unregister: a destructive action, so it takes the
   danger role in the tinted style - never a filled red, never the primary. */
html body.hrc-coded .plusapp .hrc-register-btn.registered,
html body.hrc-coded .plusapp .hrc-register-btn.is-registered,
html body.hrc-coded .plusapp .hrc-register-btn[data-action="unregister"],
html body.hrc-coded .plusapp .hrc-run-card.is-registered .hrc-register-btn {
  background: var(--app-danger-tint) !important; color: var(--app-danger) !important; border: 1px solid transparent !important;
}
html body.hrc-coded .plusapp .hrc-register-btn.registered:hover,
html body.hrc-coded .plusapp .hrc-register-btn.is-registered:hover,
html body.hrc-coded .plusapp .hrc-register-btn[data-action="unregister"]:hover,
html body.hrc-coded .plusapp .hrc-run-card.is-registered .hrc-register-btn:hover {
  background: var(--app-danger-tint) !important; color: var(--app-danger) !important; border-color: var(--app-danger) !important;
}

/* Sign out carries the danger role in type and glyph; its hover is the tint. */
.plusapp__out { color: var(--app-danger); }
.plusapp__out:hover, .plusapp__out:focus-visible { color: var(--app-danger); background: var(--app-danger-tint); }

/* UM privacy: the request buttons ship blue with orange text. They are small
   ghosts; the erase is destructive. */
html body.hrc-coded .plusapp .um .um-request-button {
  box-sizing: border-box !important; display: inline-flex !important; align-items: center !important;
  height: 40px !important; padding: 0 18px !important; margin: var(--stack-tight, 12px) 0 0 !important;
  background: transparent !important; color: var(--app-ink) !important; border: 1px solid var(--app-line) !important;
  border-radius: var(--radius-action) !important; box-shadow: none !important; text-decoration: none !important;
  font: var(--w-ui, 500) 14px/1 var(--font-sans) !important; text-transform: none !important;
}
html body.hrc-coded .plusapp .um .um-request-button:hover { border-color: var(--app-hover-line) !important; background: var(--app-raised) !important; color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um .um-erase-data-button { color: var(--app-danger) !important; }
html body.hrc-coded .plusapp .um .um-erase-data-button:hover { color: var(--app-danger) !important; border-color: var(--app-danger) !important; background: var(--app-danger-tint) !important; }

/* UM radios and checkboxes are font glyphs; they take the accent when on. */
html body.hrc-coded .plusapp .um .um-field-radio-state i,
html body.hrc-coded .plusapp .um .um-field-checkbox-state i { color: var(--app-ink-2) !important; font-size: 18px !important; }
html body.hrc-coded .plusapp .um .um-field-radio.active .um-field-radio-state i,
html body.hrc-coded .plusapp .um .um-field-checkbox.active .um-field-checkbox-state i { color: var(--app-accent) !important; }
html body.hrc-coded .plusapp .um .um-field-radio-option,
html body.hrc-coded .plusapp .um .um-field-checkbox-option { color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um :is(input[type="radio"], input[type="checkbox"]) { accent-color: var(--app-accent) !important; }

/* Selects, native and select2, sit on the raised surface like every input. */
html body.hrc-coded .plusapp .um select,
html body.hrc-coded .plusapp .um .select2-container .select2-selection--single,
html body.hrc-coded .plusapp .um .select2-container .select2-selection--multiple {
  height: 44px !important; background: var(--app-raised) !important; border: 1px solid var(--app-line) !important;
  border-radius: var(--radius-action) !important; color: var(--app-ink) !important;
}
html body.hrc-coded .plusapp .um .select2-container .select2-selection__rendered { color: var(--app-ink) !important; line-height: 42px !important; padding-left: 14px !important; }
html body.hrc-coded .plusapp .um .select2-container .select2-selection__arrow { height: 42px !important; }
html body.hrc-coded .plusapp .um .select2-container .select2-selection__arrow b { border-top-color: var(--app-ink-2) !important; }
html body.hrc-coded .plusapp .select2-dropdown { background: var(--app-panel) !important; border: 1px solid var(--app-line) !important; border-radius: var(--radius-action) !important; color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .select2-results__option { color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .select2-results__option--highlighted { background: var(--app-raised) !important; color: var(--app-ink) !important; }

/* The account heading: rule under it, --stack-tight above the rule and
   --stack-head below it, so the first label has its clearance. */
html body.hrc-coded .plusapp .um .um-account-heading {
  padding-bottom: var(--stack-tight, 12px) !important; margin-bottom: var(--stack-head, 20px) !important;
  border-bottom: 1px solid var(--app-line) !important;
}

/* The account portal (addresses, orders) reads the app roles through its own
   variable names, so the whole sheet follows the theme in one declaration. */
.plusapp .enventor-account {
  --enventor-orange: var(--app-accent);
  --enventor-action: var(--app-accent-press);
  --enventor-charcoal: var(--app-ink);
  --enventor-stage: var(--app-raised);
  --enventor-surface: var(--app-panel);
  --enventor-muted: var(--app-ink-2);
  --enventor-rule: var(--app-line);
  max-width: none; padding: 0;
}
.plusapp .enventor-address-card { padding: var(--pad-card, 26px); border-radius: var(--radius-card); }
.plusapp .enventor-address-card-title {
  margin: 0 0 var(--stack-tight, 12px); color: var(--app-ink-2); text-transform: uppercase; letter-spacing: .05em;
  font: var(--w-ui, 500) var(--fs-small, 13px)/1.2 var(--font-sans);
}
.plusapp .enventor-account-empty { border-radius: var(--radius-card); padding: var(--pad-card, 26px); }
.plusapp .enventor-account-link { color: var(--app-type-on); }

/* the HRC+ rail sits under the sticky site header and fills what is left of the window */
@media (min-width: 1081px) {
.plusapp__rail { top: var(--hdr-stick); height: calc(100vh - var(--hdr-stick)); max-height: calc(100vh - var(--hdr-stick)); }
.plus-cat__rail { top: calc(var(--hdr-stick) + 24px); }
}
/* 7.37.47 - on a phone the rail is a bar, so it keeps its own height */
/* 7.37.37 - HRC+ renders no site header, so the rail has nothing to sit under: it starts at the top of the window */
html body.hrc-plusapp { --hdr-stick: var(--adminbar, 0px); }
/* 7.37.46 - Registrations: Ultimate Member caps the profile body at 1000px; inside the frame it takes the column, as Events does */
html body.hrc-coded .plusapp .um-profile-body { max-width: none !important; width: 100% !important; }

/* 7.37.47 - nothing on HRC+ is set below the 12px label */
.plus-perk__cat { font-size: 12px !important; }

/* 7.37.50 - .plus-btn was 44px/15px, a size the system does not have; it is the small action.
   The public HRC+ page rests its ghost as the frame's line ghost but hovered as the paper ghost
   (a light tinted box flashing on ink); it now hovers as the frame does: raised ground, orange line. */
.plus-btn { height: 40px; padding: 0 18px; font-size: 14px; }
html body.hrc-plus-public .v6-btn.is-ghost:hover,
html body.hrc-plus-public :is(.v6-band-ink, .v6-page-hero, .v6-plus-hero) .v6-btn.is-ghost:hover,
html body.hrc-coded .plusapp .v6-btn.is-ghost:hover {
  background: var(--app-raised); border-color: var(--app-hover-line); color: var(--app-ink); }
html body.hrc-coded .plusapp .um .um-button:not(.um-alt):hover,
html body.hrc-coded .plusapp .um input[type=submit].um-button:not(.um-alt):hover {
  background: var(--app-accent-press) !important; border-color: var(--app-accent-press) !important; color: var(--app-on-accent) !important; }

/* 7.37.51 - the public page's light action hovers like every light action; UM's text link underlines like every quiet link without a chevron */
html body.hrc-plus-public .v6-band-ink .v6-btn.is-light:hover { background: var(--orange-tint); border-color: var(--orange-tint); color: var(--ink); }
html body.hrc-coded .um .um-link:hover, html body.hrc-coded a.um-link:hover { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* 7.37.52 - the phone pass inside HRC+ */
/* the public page's actions run full width on a phone */
@media (max-width: 560px) { html body.hrc-plus-public .v6-btn:not(.is-sm) { width: 100%; } }
/* the next-run card's actions: one row of equal widths on desktop, stacked full width on a phone */
.plus-next__act { display: flex; flex-wrap: wrap; gap: var(--stack-tight); align-items: stretch; }
.plus-next__act > * { flex: 1 1 0; min-width: 0; margin: 0; }
.plus-next__act .plus-btn, .plus-next__act .hrc-register-btn, .plus-next__act button, .plus-next__act a { width: 100%; justify-content: center; box-sizing: border-box; }
@media (max-width: 560px) { .plus-next__act { flex-direction: column; } }
/* Update Account and the other form actions run full width on a phone */
@media (max-width: 560px) { html body.hrc-coded .plusapp .um .um-button, html body.hrc-coded .plusapp .um input[type=submit].um-button { width: 100% !important; } }

/* the frame's header on a phone: the greeting opens a menu holding dark mode, back to the site, the account and sign out.
   Desktop keeps the rail exactly as it was. */
.plusapp__menu { display: none; }
@media (max-width: 1080px) {
  .plusapp__rail { position: relative; overflow: visible; }
  .plusapp__menu { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 40px; max-width: 68%; padding: 0 8px 0 4px; border: 0; border-radius: var(--radius-action); background: transparent; color: var(--app-ink); font: 400 14px/1.3 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .plusapp__menu:hover, .plusapp__rail.is-menu .plusapp__menu { background: var(--app-raised); }
  .plusapp__menu .plusapp__avatar { width: 28px; height: 28px; font-size: 12px; }
  .plusapp__hello { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 1px; }
  .plusapp__menuchev { width: 12px; height: 12px; flex: none; opacity: .7; transition: transform var(--dur-action) var(--ease-action); }
  .plusapp__rail.is-menu .plusapp__menuchev { transform: rotate(180deg); }
  .plusapp__foot { display: none; position: absolute; right: 16px; top: calc(100% + 6px); z-index: 40; width: min(292px, calc(100vw - 32px)); margin: 0; padding: 8px; grid-template-columns: minmax(0, 1fr); gap: 2px; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: var(--radius-card); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
  .plusapp__rail.is-menu .plusapp__foot { display: grid; }
  .plusapp__foot .plusapp__back span, .plusapp__foot .plusapp__out span, .plusapp__foot .plusapp__themetext { display: block; }
  .plusapp__foot .plusapp__themeico { display: inline-flex; }
  .plusapp__foot .plusapp__who { display: grid; }
  .plusapp__foot .plusapp__theme, .plusapp__foot .plusapp__back, .plusapp__foot .plusapp__out { width: 100%; padding: 10px; justify-content: flex-start; gap: 10px; }
  .plusapp__foot .plusapp__me { padding: 8px 10px; }
}

/* the profile header inside the frame: photo, name and meta in one row, the cog at the right;
   its menu is a panel, not UM's white box (the cog's button rule had been reaching its links) */
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown { position: absolute; left: auto !important; right: 0 !important; top: calc(100% + 8px) !important; width: 220px !important; padding: 6px !important; text-align: left !important; background: var(--app-panel) !important; border: 1px solid var(--app-line) !important; border-radius: var(--radius-card) !important; box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown-arr { display: none !important; }
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown ul { margin: 0; padding: 0; list-style: none; }
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown li { margin: 0; padding: 0; border: 0 !important; }
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown li a { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: var(--radius-action) !important; background: transparent !important; color: var(--app-ink) !important; font: var(--w-ui, 500) 14px/1.3 var(--font-sans) !important; text-align: left !important; text-decoration: none !important; }
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown li a:hover { background: var(--app-raised) !important; }
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown li:has(.um-dropdown-hide) { display: none; }
html body.hrc-coded .plusapp .um .um-profile-headericon { position: relative !important; }
html body.hrc-coded .plusapp .um .um-header .um-profile-status { display: none; }
@media (max-width: 860px) {
  html body.hrc-coded .plusapp .um .um-header { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; grid-template-areas: "photo meta edit"; column-gap: var(--stack-tight); align-items: center; text-align: left; padding: 0 0 var(--stack-block) !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-photo { grid-area: photo; width: 72px !important; height: 72px !important; margin: 0 !important; float: none !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-photo a, html body.hrc-coded .plusapp .um .um-header .um-profile-photo img { width: 72px !important; height: 72px !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-meta { grid-area: meta; margin: 0 !important; padding: 0 !important; text-align: left; }
  html body.hrc-coded .plusapp .um .um-header .um-main-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  html body.hrc-coded .plusapp .um .um-header .um-name { margin: 0 !important; font: var(--w-ui, 500) 18px/1.25 var(--font-sans) !important; text-align: left; }
  html body.hrc-coded .plusapp .um .um-header .um-meta { margin: 0 !important; text-align: left; font: 400 14px/1.4 var(--font-sans) !important; color: var(--app-ink-2) !important; }
  html body.hrc-coded .plusapp .um .um-header .um-meta span { display: inline; padding: 0 !important; border: 0 !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-connect { display: flex; justify-content: flex-start; margin: 2px 0 0 !important; padding: 0; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-connect a { width: 28px !important; height: 28px !important; margin: 0 6px 0 0 !important; font-size: 14px !important; line-height: 28px !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-edit { grid-area: edit; align-self: start; margin: 0 !important; width: 40px !important; height: 40px !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-edit-a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
  html body.hrc-coded .plusapp .um .um-header .um-clear { display: none; }
}
/* the settings page's profile strip: photo, name and the profile link in one row */
html body.hrc-coded .plusapp .um .um-account-meta { display: flex !important; align-items: center; gap: var(--stack-tight); text-align: left !important; margin: 0 0 var(--stack-block) !important; padding: 0 0 var(--stack-block) !important; border-bottom: 1px solid var(--app-line); }
html body.hrc-coded .plusapp .um .um-account-meta-img { flex: none; width: 56px !important; height: 56px !important; margin: 0 !important; }
html body.hrc-coded .plusapp .um .um-account-meta-img a, html body.hrc-coded .plusapp .um .um-account-meta-img img { display: block; width: 56px !important; height: 56px !important; border-radius: 50%; object-fit: cover; }
html body.hrc-coded .plusapp .um .um-account-name { margin: 0 !important; padding: 0 !important; text-align: left !important; min-width: 0; }
html body.hrc-coded .plusapp .um .um-account-name > a { display: block; font: var(--w-ui, 500) 16px/1.3 var(--font-sans) !important; color: var(--app-ink) !important; text-decoration: none; }
html body.hrc-coded .plusapp .um .um-account-profile-link { margin: 2px 0 0 !important; }
html body.hrc-coded .plusapp .um .um-account-profile-link a { font: 400 13px/1.3 var(--font-sans) !important; color: var(--app-ink-2) !important; }

/* 7.37.53 - UM's list inside the cog menu carried its own white; the account form's half columns run full width on a phone */
html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown ul, html body.hrc-coded .plusapp .um .um-profile-headericon .um-dropdown-b { background: transparent !important; box-shadow: none !important; border: 0 !important; }
@media (max-width: 560px) {
  html body.hrc-coded .plusapp .um .um-col-alt .um-left, html body.hrc-coded .plusapp .um .um-col-alt .um-right { width: 100% !important; float: none !important; margin: 0 !important; text-align: left; }
}

/* 7.37.54 - the profile header on a phone: photo and cog on the first row, name / Instagram / role full width beneath */
@media (max-width: 860px) {
  html body.hrc-coded .plusapp .um .um-header { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "photo edit" "meta meta"; row-gap: var(--stack-tight); align-items: start; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-photo { width: 64px !important; height: 64px !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-photo a, html body.hrc-coded .plusapp .um .um-header .um-profile-photo img { width: 64px !important; height: 64px !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-meta { grid-area: meta; width: 100% !important; max-width: none !important; }
  html body.hrc-coded .plusapp .um .um-header .um-name { font-size: 20px !important; line-height: 1.2 !important; }
  html body.hrc-coded .plusapp .um .um-header .um-name a { white-space: normal !important; }
  html body.hrc-coded .plusapp .um .um-header .um-meta { text-align: left !important; padding: 0 !important; margin: 6px 0 0 !important; max-width: none !important; }
  html body.hrc-coded .plusapp .um .um-header .um-meta span, html body.hrc-coded .plusapp .um .um-header .um-meta a { display: inline !important; text-align: left !important; }
  html body.hrc-coded .plusapp .um .um-header .um-profile-connect { margin: 6px 0 0 !important; }
}

/* 7.37.60 - editing the profile inside the frame. Every UM dropdown (the photo's menu included) is a panel on
   the app ground; Update profile and Cancel sit together on the left, primary then the frame's line ghost. */
html body.hrc-coded .plusapp .um .um-dropdown { padding: 6px !important; text-align: left !important; background: var(--app-panel) !important; border: 1px solid var(--app-line) !important; border-radius: var(--radius-card) !important; box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
html body.hrc-coded .plusapp .um .um-dropdown-arr { display: none !important; }
html body.hrc-coded .plusapp .um .um-dropdown ul, html body.hrc-coded .plusapp .um .um-dropdown-b { margin: 0; padding: 0; list-style: none; background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body.hrc-coded .plusapp .um .um-dropdown li { margin: 0; padding: 0; border: 0 !important; }
html body.hrc-coded .plusapp .um .um-dropdown li a { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: var(--radius-action) !important; background: transparent !important; color: var(--app-ink) !important; font: var(--w-ui, 500) 14px/1.3 var(--font-sans) !important; text-align: left !important; text-decoration: none !important; }
html body.hrc-coded .plusapp .um .um-dropdown li a:hover { background: var(--app-raised) !important; }
html body.hrc-coded .plusapp .um .um-dropdown li:has(.um-dropdown-hide) { display: none; }
html body.hrc-coded .plusapp .um .um-profile-photo .um-dropdown { left: 0 !important; right: auto !important; top: calc(100% + 8px) !important; width: 200px !important; }
html body.hrc-coded .plusapp .um .um-profile-body .um-col-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stack-tight); margin: var(--stack-block) 0 0 !important; padding: 0 !important; }
html body.hrc-coded .plusapp .um .um-profile-body .um-col-alt .um-left, html body.hrc-coded .plusapp .um .um-profile-body .um-col-alt .um-right { width: auto !important; float: none !important; margin: 0 !important; text-align: left !important; }
html body.hrc-coded .plusapp .um .um-profile-body .um-col-alt .um-right { margin-left: 0 !important; }
html body.hrc-coded .plusapp .um .um-button.um-alt, html body.hrc-coded .plusapp .um input[type=submit].um-button.um-alt { background: transparent !important; border: 1px solid var(--app-line) !important; color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um .um-button.um-alt:hover, html body.hrc-coded .plusapp .um input[type=submit].um-button.um-alt:hover { background: var(--app-raised) !important; border-color: var(--app-hover-line) !important; color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um .um-profile-meta textarea { background: var(--app-raised) !important; border: 1px solid var(--app-line) !important; border-radius: var(--radius-action) !important; color: var(--app-ink) !important; font: 400 16px/1.5 var(--font-sans) !important; padding: 12px 14px !important; }
html body.hrc-coded .plusapp .um .um-profile-meta textarea:focus { border-color: var(--app-accent) !important; box-shadow: 0 0 0 3px var(--orange-tint) !important; outline: 0; }
@media (max-width: 560px) {
  html body.hrc-coded .plusapp .um .um-profile-body .um-col-alt { flex-direction: column; align-items: stretch; }
  html body.hrc-coded .plusapp .um .um-profile-body .um-col-alt .um-left, html body.hrc-coded .plusapp .um .um-profile-body .um-col-alt .um-right { width: 100% !important; }
}

/* 7.37.60b - the Cancel link is a.um-button.um-alt; the frame's button rule (an :is() with an attribute) outranked the ghost */
html body.hrc-coded .plusapp .um a.um-button.um-alt, html body.hrc-coded .plusapp .um input[type=submit].um-button.um-alt { background: transparent !important; border: 1px solid var(--app-line) !important; color: var(--app-ink) !important; }
html body.hrc-coded .plusapp .um a.um-button.um-alt:hover, html body.hrc-coded .plusapp .um input[type=submit].um-button.um-alt:hover { background: var(--app-raised) !important; border-color: var(--app-hover-line) !important; color: var(--app-ink) !important; }