/* ==========================================================================
   merciChef — Scoped Component Kit (fragments/components.css)
   Canonical implementation of shared cards, buttons, fields, notes, badges,
   FAQ, tables, dialogs, toasts, and interface icons across merciChef.
   Scope rules:
   - Functional controls are scoped beneath .pm-ui, .pm-page, or body.my.
   - Detached overlays (.pm-dialog, .pm-toast) are self-contained at body level.
   - Editorial controls use .mc-editorial and .me-* namespaces.
   - Global important overrides are bridged via scoped selectors.
   ========================================================================== */

/* ---------- 1. Scope, Hidden Precedence & Base Rules ---------- */
.pm-ui [hidden],
.pm-page [hidden],
.payment-page [hidden],
.groups-page [hidden],
.routines-page [hidden],
.holidays-page [hidden],
.rewards-page [hidden],
.voting-page [hidden],
.checkout-page [hidden],
.pm-dialog [hidden] {
  display: none !important;
}

/* Uppercase family name presentation without mutating data */
input[name="lastname"], input[name="last_name"], input[name$="_lastname"],
input[name$="_last_name"], input[name*="lastname"], input[name*="last_name"],
input[id="lastname"], input[id="last_name"], input[id*="lastname"],
input[id*="last_name"], input[autocomplete*="family-name"],
input[autocapitalize="characters"] {
  text-transform: uppercase;
}
input[name="lastname"]::placeholder, input[name="last_name"]::placeholder,
input[name$="_lastname"]::placeholder, input[name$="_last_name"]::placeholder,
input[name*="lastname"]::placeholder, input[name*="last_name"]::placeholder,
input[id="lastname"]::placeholder, input[id="last_name"]::placeholder,
input[id*="lastname"]::placeholder, input[id*="last_name"]::placeholder,
input[autocomplete*="family-name"]::placeholder,
input[autocapitalize="characters"]::placeholder {
  text-transform: none;
}

/* ---------- 2. Shared Cards & Panels ---------- */
/* Financial values in the account use the same readable type as their context.
   Keep Price's cents and sign markup; the editorial handwritten recipe is public-only. */
body.my .price {
  font-family: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  margin-top: 0;
}
body.my .price > i {padding:0;font-style:normal;margin-right:0}
body.my .price > sup {position:static;vertical-align:baseline;font-size:inherit;padding:0}
body.my .price > .inset + sup {font-weight:inherit}


.pm-card,
.payment-card,
.groups-card {
  background: var(--pm-surface, #ffffff);
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: var(--pm-radius-card, 14px);
  box-shadow: var(--pm-shadow-card, 0 10px 35px -18px rgba(0, 0, 0, 0.25));
  padding: var(--pm-card-padding, 24px);
  margin-bottom: var(--pm-space-5, 20px);
  box-sizing: border-box;
}

.pm-card--flat {
  box-shadow: var(--pm-shadow-flat, none) !important;
}

.pm-card--flush {
  padding: 0 !important;
}

.pm-card h2, .payment-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.25;
  color: var(--pm-ink, #1a1a1a);
}

.pm-card h3, .payment-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.3;
  color: var(--pm-ink, #1a1a1a);
}

.pm-card h4, .payment-card h4 {
  margin: 16px 0 6px;
  font-size: 15px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.25;
  color: var(--pm-ink, #1a1a1a);
}

.pm-card form, .payment-card form {
  margin: 0;
  padding: 0;
}

.pm-section-header, .payment-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pm-section-header h2, .pm-section-header h3 {
  margin-bottom: 0;
}

.pm-sub, .section-note {
  color: var(--pm-muted, #6f6a62);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 12px;
}

.pm-section-title, .section-title {
  display: block;
  margin: 0 0 6px;
  font-weight: var(--pm-weight-strong, 600);
  font-size: 14px;
  line-height: 1.25;
  color: var(--pm-ink, #1a1a1a);
}

.pm-row, .holiday-row {
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: var(--pm-radius-control, 10px);
  background: var(--pm-surface-warm, #fbf7f1);
  padding: 16px;
  margin: 0 0 12px;
  box-sizing: border-box;
}
.pm-row h4, .holiday-row h4 {
  margin: 0 0 4px;
  font-weight: var(--pm-weight-strong, 600);
  font-size: 16px;
  color: var(--pm-ink, #1a1a1a);
}

/* ---------- 3. Shared Buttons & CTAs ---------- */
/* Base button recipe */
.pm-btn:not(.custom),
.pm-ui .pm-btn,
.pm-ui .button-primary,
.pm-ui .gp-btn,
.pm-ui .votebtn,
.pm-page .pm-btn,
.pm-page .button-primary,
.pm-page .gp-btn,
.pm-page .cta,
.pm-page .votebtn,
.pm-dialog .pm-btn,
.signin-card .signin-submit,
.checkout-page .pm-btn,
.checkout-page .button-primary,
.checkout-page .gp-btn,
.checkout-page .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent !important;
  background: var(--pm-primary, #c6522d);
  color: #ffffff !important;
  padding: 10px 20px;
  border-radius: var(--pm-radius-control, 10px);
  font-weight: var(--pm-weight-strong, 600);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  min-width: 0;
  font-family: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  box-shadow: none;
  transition: background-color var(--pm-transition, .15s ease),
              border-color var(--pm-transition, .15s ease),
              color var(--pm-transition, .15s ease),
              transform .1s ease;
}

/* Functional Hover */
.pm-btn > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.pm-btn:hover:not(:disabled),
.pm-ui .button-primary:hover:not(:disabled),
.pm-ui .gp-btn:hover:not(:disabled),
.pm-ui .votebtn:hover:not(:disabled),
.pm-page .pm-btn:hover:not(:disabled),
.pm-page .button-primary:hover:not(:disabled),
.pm-page .gp-btn:hover:not(:disabled),
.pm-page .cta:hover:not(:disabled),
.pm-page .votebtn:hover:not(:disabled),
.pm-dialog .pm-btn:hover:not(:disabled),
.signin-card .signin-submit:hover:not(:disabled),
.checkout-page .pm-btn:hover:not(:disabled),
.checkout-page .button-primary:hover:not(:disabled),
.checkout-page .gp-btn:hover:not(:disabled),
.checkout-page .cta:hover:not(:disabled) {
  background: var(--pm-primary-dark, #a84324) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  text-decoration: none;
}

/* Sizes: Large (marketing default) & Compact */
.pm-btn.pm-btn--lg,
.mc-editorial .button.primary:not(.custom) {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 17px;
}

.pm-btn--sm,
.pm-ui .pm-btn.pm-btn--sm,
.pm-btn.small,
.pm-ui .pm-btn.small,
.pm-ui .gp-btn.small,
.pm-page .pm-btn.pm-btn--sm,
.pm-page .pm-btn.small,
.pm-page .gp-btn.small,
.pm-dialog .pm-btn.pm-btn--sm,
.checkout-page .pm-btn.pm-btn--sm,
.checkout-page .pm-btn.small {
  padding: 8px 12px;
  font-size: 14px;
  min-height: 40px;
  border-radius: var(--pm-radius-control, 10px);
}

/* Secondary / Plain / Outline */
.pm-btn.plain,
.pm-btn--outline,
.pm-ui .pm-btn.plain,
.pm-ui .gp-btn.plain,
.pm-page .pm-btn.plain,
.pm-page .gp-btn.plain,
.pm-dialog .pm-btn.plain,
.checkout-page .pm-btn.plain {
  background: var(--pm-surface, #ffffff) !important;
  color: var(--pm-ink, #1a1a1a) !important;
  border-color: var(--pm-border, #e7dcce) !important;
}

.pm-btn.plain:hover:not(:disabled),
.pm-btn--outline:hover:not(:disabled),
.pm-ui .pm-btn.plain:hover:not(:disabled),
.pm-ui .gp-btn.plain:hover:not(:disabled),
.pm-page .pm-btn.plain:hover:not(:disabled),
.pm-page .gp-btn.plain:hover:not(:disabled),
.pm-dialog .pm-btn.plain:hover:not(:disabled),
.checkout-page .pm-btn.plain:hover:not(:disabled) {
  background: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-ink, #1a1a1a) !important;
  border-color: var(--pm-border, #e7dcce) !important;
}

/* Danger Button (Standard & Strong) */
.pm-btn.danger,
.pm-ui .pm-btn.danger,
.pm-ui .gp-btn.danger,
.pm-page .pm-btn.danger,
.pm-page .gp-btn.danger,
.pm-dialog .pm-btn.danger {
  background: var(--pm-surface, #ffffff) !important;
  color: var(--pm-danger, #b71c1c) !important;
  border-color: var(--pm-danger, #b71c1c) !important;
}

.pm-btn.danger:hover:not(:disabled),
.pm-ui .pm-btn.danger:hover:not(:disabled),
.pm-ui .gp-btn.danger:hover:not(:disabled),
.pm-page .pm-btn.danger:hover:not(:disabled),
.pm-page .gp-btn.danger:hover:not(:disabled),
.pm-dialog .pm-btn.danger:hover:not(:disabled) {
  background: var(--pm-danger-soft, #fdecea) !important;
  color: var(--pm-danger, #b71c1c) !important;
  border-color: var(--pm-danger, #b71c1c) !important;
}

.pm-btn.danger-strong,
.pm-ui .pm-btn.danger-strong,
.pm-ui .gp-btn.danger-strong,
.pm-page .pm-btn.danger-strong,
.pm-page .gp-btn.danger-strong,
.pm-dialog .pm-btn.danger-strong {
  background: var(--pm-danger, #b71c1c) !important;
  color: #ffffff !important;
  border-color: var(--pm-danger, #b71c1c) !important;
}

.pm-btn.danger-strong:hover:not(:disabled),
.pm-ui .pm-btn.danger-strong:hover:not(:disabled),
.pm-ui .gp-btn.danger-strong:hover:not(:disabled),
.pm-page .pm-btn.danger-strong:hover:not(:disabled),
.pm-page .gp-btn.danger-strong:hover:not(:disabled),
.pm-dialog .pm-btn.danger-strong:hover:not(:disabled) {
  background: var(--pm-danger-dark, #8f1616) !important;
  color: #ffffff !important;
  border-color: var(--pm-danger-dark, #8f1616) !important;
}

/* Disabled & Pending States */
.pm-btn:disabled,
.pm-ui .pm-btn:disabled,
.pm-ui .gp-btn:disabled,
.pm-page .pm-btn:disabled,
.pm-page .gp-btn:disabled,
.pm-dialog .pm-btn:disabled,
.signin-card .signin-submit:disabled,
.checkout-page .pm-btn:disabled {
  opacity: 0.5 !important;
  cursor: default !important;
  pointer-events: none;
}

button.pm-saving,
input[type=submit].pm-saving,
.button.pm-saving,
.pm-btn.pm-saving {
  opacity: 0.58 !important;
  cursor: wait !important;
  pointer-events: none;
  filter: saturate(.55);
}

button.pm-saving::after,
input[type=submit].pm-saving::after,
.button.pm-saving::after,
.pm-btn.pm-saving::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pm-saving-spin .7s linear infinite;
  margin-left: 6px;
}

@keyframes pm-saving-spin {
  to { transform: rotate(360deg); }
}

/* Navigation Arrow Discipline: Suppress arrows on forms, submits, dialogs, tabs */
.pm-btn:not(.pm-nav-action)::after,
.signin-submit::after,
.pm-dialog button::after,
.pm-no-arrow::after,
.pm-no-arrow::before {
  content: none !important;
}

/* Explicit account navigation CTAs; local actions and navigation menus stay arrow-free.
   The arrow occupies its own space, outside the text-link underline. */
a.pm-nav-link {
  display: inline-block;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 1.1em 8px 0;
  min-height: 44px;
  color: var(--pm-forest, #2c3e2f);
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.4;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left calc(100% - 7px);
  background-repeat: no-repeat;
  background-size: calc(100% - 1.1em) 1px;
}
a.pm-nav-link:hover {color: var(--pm-accent-text, #a84324)}
a.pm-nav-link:focus-visible {
  outline: 2px solid var(--pm-focus, #a84324);
  outline-offset: 2px;
}
a.pm-nav-link:not(.pm-no-arrow)::after,
a.pm-nav-action:not(.pm-saving):not(.pm-no-arrow)::after {
  content: "▸";
  content: "▸" / "";
  display: inline-block;
  text-decoration: none;
}
a.pm-nav-link::after {position:absolute;right:0;top:50%;transform:translateY(-50%)}
a.pm-nav-action::after {flex:0 0 auto}

/* Focus Indicator */
.pm-btn:focus-visible,
.pm-ui .pm-btn:focus-visible,
.pm-ui .gp-btn:focus-visible,
.pm-page .pm-btn:focus-visible,
.pm-page .gp-btn:focus-visible,
.pm-dialog .pm-btn:focus-visible,
.signin-card .signin-submit:focus-visible,
.checkout-page .pm-btn:focus-visible {
  outline: 2px solid var(--pm-focus, #a84324);
  outline-offset: 2px;
}

/* ---------- 4. Canonical Editorial Links ---------- */
.me-link {
  color: var(--pm-forest, #2c3e2f);
  text-decoration: none;
  font-weight: var(--pm-weight-strong, 600);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left calc(100% - 7px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: color var(--pm-transition, .15s ease);
}
.me-link:hover {
  color: var(--pm-accent-text, #a84324);
}
.me-forest .me-link,
.me-dark .me-link {
  color: #ffffff;
}
.me-forest .me-link:hover,
.me-dark .me-link:hover {
  color: var(--pm-rose, #e8916b);
}

/* Account and discovery actions inside the terracotta site header. */
/* Logo and navigation share one centered measure on every customer page.
   Use the header's content width, not 100vw (which includes the scrollbar). */
@media (min-width:1200px) {
  header#menu > nav.container-lg {
    width: min(var(--pm-wrap-marketing, 1200px), calc(100% - 2 * var(--pm-gutter, 24px)));
    max-width: var(--pm-wrap-marketing, 1200px);
    margin-inline: auto;
    padding-left: 200px !important;
    padding-right: 0 !important;
    height: var(--header) !important;
    box-sizing: border-box;
  }
  header#menu #logo > img {
    left: max(var(--pm-gutter, 24px), calc((100% - var(--pm-wrap-marketing, 1200px)) / 2));
    top: 8px;
    height: 32px;
  }
}
body.pm-auth main {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  width: auto;
}
@media (display-mode:standalone) and (min-width:1200px) {
  header#menu #logo > img {top:calc(8px + env(safe-area-inset-top, 0px))}
}
header#menu .headerExtraButtons {
  align-items: center !important;
  gap: 10px !important;
}
header#menu #account.button:not(.pm-nav-cta),
:is(header#menu, #mobile-actions) .pm-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: none;
  font: 600 16px/1.4 Manrope, sans-serif !important;
  white-space: nowrap;
  box-sizing: border-box;
}
header#menu #account.button:not(.pm-nav-cta) {
  border: 1px solid rgba(255,255,255,.85) !important;
  background: transparent !important;
  color: #fff !important;
}
header#menu #account.button:not(.pm-nav-cta):hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
:is(header#menu, #mobile-actions) .pm-nav-cta {
  border: 1px solid var(--pm-surface, #fff) !important;
  background: var(--pm-surface, #fff) !important;
  color: var(--pm-forest, #2c3e2f) !important;
}
:is(header#menu, #mobile-actions) .pm-nav-cta::after {
  content: " ▸";
  display: inline-block;
  margin-left: .45em;
  line-height: inherit;
}
:is(header#menu, #mobile-actions) .pm-nav-cta:hover {
  border-color: var(--pm-forest, #2c3e2f) !important;
  background: var(--pm-forest, #2c3e2f) !important;
  color: #fff !important;
}
:is(header#menu, #mobile-actions) .pm-nav-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (min-width:1200px) {
  header#menu #right { display:flex; align-items:center; height:var(--header); min-height:0; }
  header#menu .headerExtraButtons { height:100%; padding-block:0; }
  /* Keep the hover area continuous from the globe into the language choices. */
  header#menu #language > .menuitems { top:100%; }
  header#menu #account, header#menu #wizard { margin-block:0; }
  header#menu #account.pm-nav-cta { min-height:36px; padding-block:6px; }
}
@media (max-width:1199px) {
  header#menu .headerExtraButtons { left:20px; right:20px; width:calc(100% - 40px); }
  header#menu #account, header#menu #wizard {
    flex:1 1 auto;
    margin:0;
    padding:8px 14px;
  }
  /* Anonymous actions belong to the scrollable menu, above the browsing links.
     Reserve their actual height rather than relying on standalone top padding. */
  header#menu > nav:not(.layout2) {
    display:inline-flex;
    flex-direction:column;
    padding-top:calc(var(--header) + 20px + env(safe-area-inset-top, 0px)) !important;
  }
  header#menu > nav:not(.layout2) > #right {
    order:-1;
    flex:none;
    margin:0 0 20px;
    padding:0 20px 0 0;
  }
  header#menu > nav:not(.layout2) > #mainNavItems,
  header#menu > nav:not(.layout2) > .pm-app-help-open {flex:none}
  header#menu > nav:not(.layout2) .headerExtraButtons {
    position:static;
    width:100%;
    flex-wrap:wrap;
  }
}

body.my:not(.pm-auth) header#menu #account.button { display:none; }

/* Direct access to sign-in/account beside the mobile burger; the menu keeps its own button. */
header#menu > #mobile-account {display:none}
@media (max-width:1199px) {
  header#menu > #mobile-account {
    display:inline-flex;
    position:absolute;
    top:calc(2px + env(safe-area-inset-top, 0px));
    right:calc(64px + env(safe-area-inset-right, 0px));
    z-index:910;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
  }
  header#menu > #mobile-account svg {display:block;width:26px;height:26px}
  header#menu > #mobile-account:hover {color:#fff;background:rgb(255 255 255 / 12%)}
  header#menu > #mobile-account:focus-visible {outline:2px solid #fff;outline-offset:-3px}
}
@media (max-width:359px) {
  header#menu #logo > img {left:calc(16px + env(safe-area-inset-left, 0px));top:calc(10px + env(safe-area-inset-top, 0px));height:28px}
  header#menu > #language > li > .arrow {display:none}
}

/* Keep the primary header action within reach when the mobile menu is closed. */
#mobile-actions {display:none}
#mobile-actions[hidden] {display:none}
@media (max-width:1199px) {
  body.pm-mobile-actions {padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px))}
  #mobile-actions {
    display:flex;
    position:fixed;
    inset:auto 0 0;
    z-index:299;
    justify-content:center;
    padding:10px max(20px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    background:var(--terracotta, #c6522d);
    box-shadow:0 -2px 12px rgb(0 0 0 / 10%);
  }
  #mobile-actions a.pm-nav-cta {width:100%;max-width:480px;min-height:48px;white-space:normal}
  body.navopen #mobile-actions {visibility:hidden}
  /* in-page buttons repeating the bar's action give their room back to the content */
  body.pm-mobile-actions .pm-start-cta {display:none!important}
}

/* ---------- 5. Forms, Fields & Selects ---------- */
/* Legacy fixed input/select heights cannot accommodate the account forms' padding. Include the whole
   account body and detached overlays: requirement fields are not necessarily inside .pm-page. Let the
   content determine height, including larger text; individual components retain their minimum sizes. */
body.my input:where(:not([type]),[type=text],[type=number],[type=tel],[type=password],[type=email],[type=search],[type=url]),
.pm-page input:where(:not([type]),[type=text],[type=number],[type=tel],[type=password],[type=email],[type=search],[type=url]),
.address_editor_host input:where(:not([type]),[type=text],[type=number],[type=tel],[type=password],[type=email],[type=search],[type=url]),
.delivery_picker_host input:where(:not([type]),[type=text],[type=number],[type=tel],[type=password],[type=email],[type=search],[type=url]),
.pm-dialog input:where(:not([type]),[type=text],[type=number],[type=tel],[type=password],[type=email],[type=search],[type=url]) {height:auto;line-height:1.3}
body.my select,.pm-page select,.payment-page select,.checkout-page select,
.address_editor_host select,.delivery_picker_host select,.pm-dialog select {height:auto;min-height:40px;line-height:1.3}

.pm-form-grid, .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px 12px;
  min-width: 0;
}

.pm-field, .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-2, 8px);
  box-sizing: border-box;
}

.pm-field label, .form-field label, .signin-label {
  font-weight: var(--pm-weight-strong, 600);
  font-size: 14px;
  color: var(--pm-ink, #1a1a1a);
  line-height: 1.3;
}

.pm-field input:not([type=checkbox]):not([type=radio]),
.pm-field select,
.pm-field textarea,
.form-field input:not([type=checkbox]):not([type=radio]),
.form-field select,
.form-field textarea,
.signin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  height: auto;
  min-height: 44px;
  border: 1px solid var(--pm-border-control, #6f6a62);
  border-radius: var(--pm-radius-control, 10px);
  font-size: 16px;
  font-family: inherit;
  color: var(--pm-ink, #1a1a1a);
  background-color: #ffffff;
  transition: border-color var(--pm-transition, .15s ease), box-shadow var(--pm-transition, .15s ease);
}

/* Safari's native date appearance otherwise adds padding outside field width. */
.pm-field input[type=date],
.form-field input[type=date] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
}

.pm-field input:focus,
.pm-field select:focus,
.pm-field textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.signin-input:focus {
  outline: none;
  border-color: var(--pm-primary, #c6522d);
  box-shadow: 0 0 0 3px rgba(198, 82, 45, 0.15);
}

.pm-field input:focus-visible,
.pm-field select:focus-visible,
.pm-field textarea:focus-visible,
.signin-input:focus-visible {
  outline: 2px solid var(--pm-focus, #a84324);
  outline-offset: 1px;
}

.pm-field input.invalid,
.form-field input.invalid,
.signin-input.invalid {
  border-color: var(--pm-danger, #b71c1c);
  color: var(--pm-danger, #b71c1c);
}

.pm-field input[readonly],
.form-field input[readonly] {
  background-color: #f7f1e9;
  color: var(--pm-muted, #6f6a62);
}

.pm-field textarea,
.form-field textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.45;
}

/* Custom Dropdown Chevron */
.pm-field select,
.form-field select,
.pm-select select,
.rt-select select {
  height: auto;
  min-height: 44px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%236f6a62' d='M1.41 0 6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  line-height: 1.3;
}

/* Account dropdowns use the Routine schedule controls' typography, spacing and arrow.
   Scope detached account dialogs too, and outrank page-local background shorthands. */
body.my.pm-ui {
  --pm-account-select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
body.my.pm-ui select:where(:not([multiple]):not([size]), :not([multiple])[size="1"]),
body.my.pm-ui #subscribe-choice-lightbox select:where(:not([multiple]):not([size]), :not([multiple])[size="1"]) {
  height: auto;
  min-height: 40px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--brand, #c6522d) !important;
  border-radius: var(--pm-radius-control, 10px);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pm-ink, #1a1a1a);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: var(--pm-account-select-arrow);
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: .65rem auto;
}
body.my.pm-ui .iti__arrow {
  width: .65rem;
  height: .65rem;
  border: 0;
  background: var(--pm-account-select-arrow) no-repeat center / contain;
}
body.my.pm-ui .iti__arrow--up {transform:rotate(180deg)}

/* The compiled skin strips every select border with !important; an editorial form keeps the field boundary. */
.mc-editorial .pm-field select {
  border: 1px solid var(--pm-border-control, #6f6a62) !important;
}
.mc-editorial .pm-field select:focus {
  border-color: var(--pm-primary, #c6522d) !important;
}

/* Compact field variant for dense desktop rows */
.pm-field--compact input,
.pm-field--compact select {
  min-height: 40px;
  height: auto;
  padding: 8px 12px;
  font-size: 14px;
}

.pm-form-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pm-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.pm-check-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
/* A label that runs over several lines stays beside its box instead of wrapping under it. */
.pm-check-row > span {
  flex: 1 1 0;
  min-width: 0;
}

/* Helper text under a control, or under a check row's label, sits on its wrapper's own spacing. */
.pm-field > .pm-sub,
.pm-check-row .pm-sub {
  display: block;
  margin: 0;
}

/* ---------- 6. Notes, Alerts & Feedback ---------- */
.pm-note,
.signin-alert,
.pm-page .note,
.payment-page .note,
.checkout-page .note {
  border-radius: var(--pm-radius-control, 10px);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid var(--pm-border-soft, #f0e9dd);
  border-left: 4px solid var(--pm-primary, #c6522d);
  background: var(--pm-surface-warm, #fbf7f1);
  color: var(--pm-ink, #1a1a1a);
  margin-bottom: 16px;
  box-sizing: border-box;
}

.pm-note--success,
.pm-note.good,
.signin-alert.success,
.pm-page .note.good,
.payment-page .note.good,
.checkout-page .note.good {
  background: var(--pm-success-soft, #e9f6ec);
  border-color: #cdebd4;
  border-left-color: var(--pm-success, #2c8a43);
  color: var(--pm-success-ink, #1d5c33);
}

.pm-note--warn,
.pm-note.warn,
.pm-page .note.warn,
.payment-page .note.warn,
.checkout-page .note.warn {
  background: var(--pm-warn-soft, #fdf3e3);
  border-color: #f3ddbd;
  border-left-color: var(--pm-warn, #b45309);
  color: var(--pm-warn-ink, #8a4a0b);
}

.pm-note--danger,
.pm-note.danger,
.signin-alert.error,
.pm-page .note.danger,
.payment-page .note.danger,
.checkout-page .note.danger {
  background: var(--pm-danger-soft, #fdecea);
  border-color: #f8d7da;
  border-left-color: var(--pm-danger, #b71c1c);
  color: var(--pm-danger-ink, #b71c1c);
}

.pm-note--info,
.pm-note.info,
.pm-page .note.info,
.payment-page .note.info {
  background: var(--pm-info-soft, #eef6ff);
  border-color: #d0e2ff;
  border-left-color: var(--pm-info, #1b4a7a);
  color: var(--pm-info-ink, #1b4a7a);
}

/* ---------- 7. Badges & Inset Pills ---------- */
.pm-badge,
.gp-badge,
.holiday-badge {
  display: inline-block;
  border-radius: var(--pm-radius-pill, 999px);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--pm-weight-strong, 600);
  vertical-align: middle;
  background: #eee;
  color: var(--pm-ink, #1a1a1a);
  white-space: nowrap;
}

.pm-badge.admin, .pm-badge.active, .gp-badge.admin, .gp-badge.active {
  background: var(--pm-forest, #2c3e2f);
  color: #ffffff;
}

.pm-badge.default, .pm-badge.brand, .gp-badge.default {
  background: var(--pm-primary, #c6522d);
  color: #ffffff;
}

.pm-badge.beta, .gp-badge.beta {
  background: var(--pm-primary, #c6522d);
  color: #ffffff;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pm-badge.member, .gp-badge.member {
  background: #eeeeee;
  color: var(--pm-ink, #1a1a1a);
}

.pm-pill, .holiday-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--pm-surface-selected, #efe6db);
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: 14px;
  padding: 10px 14px 8px;
  font-weight: var(--pm-weight-strong, 600);
  color: var(--pm-ink, #1a1a1a);
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- 8. Native FAQ Component (.pm-faq) ---------- */
.pm-faq,
.mc-editorial .pm-faq {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pm-faq details,
.mc-editorial .pm-faq details {
  border-top: 1px solid var(--pm-border, #e7dcce);
  padding: 18px 0;
  box-sizing: border-box;
}

.pm-faq details:last-of-type,
.mc-editorial .pm-faq details:last-of-type {
  border-bottom: 1px solid var(--pm-border, #e7dcce);
}

.pm-faq summary,
.mc-editorial .pm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 18px;
  font-weight: var(--pm-weight-strong, 600);
  color: var(--pm-ink, #1a1a1a);
  list-style: none;
  user-select: none;
}

.pm-faq summary::-webkit-details-marker,
.mc-editorial .pm-faq summary::-webkit-details-marker {
  display: none;
}

.pm-faq summary::after,
.mc-editorial .pm-faq summary::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pm-primary, #c6522d);
  border-bottom: 2px solid var(--pm-primary, #c6522d);
  transform: rotate(45deg);
  transition: transform var(--pm-transition, .15s ease);
  margin-left: 12px;
  flex: 0 0 auto;
}

.pm-faq details[open] summary::after,
.mc-editorial .pm-faq details[open] summary::after {
  transform: rotate(-135deg);
}

/* A question keeps the heading rank its section outline requires; the disclosure owns its typography,
   so an editorial or Bootstrap heading scale cannot resize the question. */
.pm-faq summary :is(h2, h3, h4),
.mc-editorial .pm-faq summary :is(h2, h3, h4) {
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  text-wrap: initial;
}

/* The smaller question size of the public pages' FAQs */
.pm-faq--compact summary,
.mc-editorial .pm-faq--compact summary {
  font-size: 16px;
  line-height: 1.45;
}

.pm-faq-answer,
.pm-faq details p,
.mc-editorial .pm-faq details p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm-forest, #2c3e2f);
}

/* ---------- 9. Tables ---------- */
.pm-table, .gp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 6px 0;
}

.pm-table th, .gp-table th {
  text-align: left;
  border-bottom: 2px solid var(--pm-border, #e7dcce);
  padding: 8px 10px 10px;
  font-size: 12px;
  color: var(--pm-muted, #6f6a62);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--pm-weight-strong, 600);
}

.pm-table td, .gp-table td {
  border-bottom: 1px solid var(--pm-border-soft, #f0e9dd);
  padding: 10px;
  vertical-align: middle;
}

.pm-table td.num, .gp-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pm-table tr.total td, .gp-table tr.total td {
  border-top: 2px solid var(--pm-border, #e7dcce);
  border-bottom: 0;
  font-weight: var(--pm-weight-strong, 600);
}

.pm-table tr:hover td, .gp-table tr:hover td {
  background: var(--pm-surface-warm, #fbf7f1);
}

.pm-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The sports planner (sport-planner.js): the body fields, the activities with their length and how often they come,
   then the week as columns of hours, the sessions as blocks and the meals as tags at their times, and a panel for
   what is selected (beside the week when it is wide, below it otherwise). Training is terracotta, merciChef's food forest
   and the person's own rose, as in the coverage meters. Every button carries .custom to leave the global skin, whose
   borders and desktop hover are !important, so these keep their own with !important; the skin also strips every
   select's border. */
.pm-planner-fields select,
.pm-train select,
.pm-week-panel select {
  border: 1px solid var(--pm-border-control, #6f6a62) !important;
}
.pm-planner-fields select:focus,
.pm-train select:focus,
.pm-week-panel select:focus {
  border-color: var(--pm-primary, #c6522d) !important;
}
.pm-train-body {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.pm-train-diet {
  grid-template-columns: minmax(0, 20rem);
}
/* The activities read as one table: a header, a row for each kind of session, then the row that adds one, all on
   the same four tracks so their fields line up; once the list has an activity, the adding row waits behind a button.
   Under 640px of the planner's own width (a phone, or a narrow panel of the routine editor) the header goes, each
   row stacks and the adding row shows its labels again. */
.pm-train {
  container-type: inline-size;
}
.pm-train-card {
  --pm-train-tracks: minmax(0, 1fr) 8.5rem 14.5rem 7.5rem;
  overflow: hidden;
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: var(--pm-radius-card, 12px);
  background: var(--pm-surface, #ffffff);
}
.pm-train-head,
li.pm-train-row,
.pm-train-add {
  display: grid;
  grid-template-columns: var(--pm-train-tracks);
  align-items: center;
  gap: 10px 12px;
  padding: 12px 16px;
}
.pm-train-head {
  padding-top: 14px;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.3;
  color: var(--pm-ink, #1a1a1a);
}
ul.pm-train-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
li.pm-train-row {
  margin: 0;
}
li.pm-train-row + li.pm-train-row {
  border-top: 1px solid var(--pm-border-soft, #f0e9dd);
}
.pm-train .pm-field {
  min-width: 0;
  margin: 0;
}
/* one field height and a 16px text in every row, which also keeps iOS from zooming in on a select */
.pm-train .pm-field select {
  min-height: 44px;
  padding: 10px 36px 10px 12px;
  font-size: 16px;
}
.pm-train-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-train-count {
  min-width: 8.5em;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
  text-align: center;
}
button.pm-train-step,
button.pm-train-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pm-border-control, #6f6a62) !important;
  border-radius: 999px;
  background: var(--pm-surface, #ffffff);
  color: var(--pm-ink, #1a1a1a);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
button.pm-train-remove {
  justify-self: end;
  border-color: transparent !important;
  background: none;
  color: var(--pm-muted, #6f6a62);
}
button.pm-train-remove svg {
  width: 18px;
  height: 18px;
}
button.pm-train-step:hover:not(:disabled),
button.pm-train-remove:hover:not(:disabled) {
  background-color: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-ink, #1a1a1a);
}
button.pm-train-step:disabled {
  opacity: .4;
  cursor: default;
}
.pm-train-add {
  align-items: end;
  border-top: 1px solid var(--pm-border, #e7dcce);
  background: var(--pm-surface-warm, #fbf7f1);
}
/* the header names the adding row's fields; their labels stay for screen readers */
.pm-train-add label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pm-train-add button.pm-train-add-button {
  gap: 6px;
  width: 100%;
}
.pm-train-add button.pm-train-add-button > span {
  font-size: 18px;
  line-height: 1;
}
/* under the adding button, where the rows keep their remove buttons */
button.pm-train-add-cancel {
  grid-column: 4;
  justify-self: center;
  margin: -4px 0 0;
  padding: 2px 8px;
  border: 0 !important;
  background: none;
  color: var(--pm-muted, #6f6a62);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
button.pm-train-add-cancel:hover:not(:disabled) {
  background: none !important;
  color: var(--pm-ink, #1a1a1a);
}
.pm-train-more {
  border-top: 1px solid var(--pm-border, #e7dcce);
}
button.pm-train-open {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border: 0 !important;
  border-radius: 0;
  background: var(--pm-surface-warm, #fbf7f1);
  color: var(--pm-forest, #2c3e2f);
  font: inherit;
  font-size: 15px;
  font-weight: var(--pm-weight-strong, 600);
  text-align: left;
  cursor: pointer;
}
button.pm-train-open > span {
  font-size: 20px;
  line-height: 1;
}
button.pm-train-open:hover:not(:disabled) {
  background-color: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-forest, #2c3e2f);
}
button.pm-train-open:disabled {
  opacity: .45;
  cursor: default;
}
button.pm-train-open:focus-visible,
button.pm-train-add-cancel:focus-visible {
  outline: 2px solid var(--pm-primary, #c6522d);
  outline-offset: -2px;
}
.pm-train-total {
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
}
/* below the table, also where an editorial page takes every paragraph's top margin away (.mc-editorial p) */
.pm-train-card + .pm-train-total {
  margin: 16px 0 0;
}
p.pm-sub.pm-train-total {
  font-weight: normal;
}
@container (max-width: 639px) {
  .pm-train-head {
    display: none;
  }
  /* the activity takes the first line beside its remove button, the length and the count share the second */
  li.pm-train-row {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    column-gap: 8px;
    padding: 12px;
  }
  li.pm-train-row .pm-train-activity {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  li.pm-train-row button.pm-train-remove {
    grid-column: 3;
    grid-row: 1;
  }
  li.pm-train-row .pm-train-minutes {
    grid-column: 1;
    grid-row: 2;
  }
  .pm-train-stepper {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
  }
  /* the count wraps onto two lines, so the length keeps room for "1 h 30" in the account's narrower panel */
  .pm-train-count {
    min-width: 0;
    max-width: 6.5em;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.2;
  }
  /* the count takes the width of its longest choice, the length the rest */
  .pm-train-add {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
  }
  .pm-train-add .pm-train-add-activity,
  .pm-train-add button.pm-train-add-button,
  button.pm-train-add-cancel {
    grid-column: 1 / -1;
  }
  .pm-train-add label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}
button.pm-week-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--pm-border-control, #6f6a62) !important;
  border-radius: 999px;
  background: var(--pm-surface, #ffffff);
  color: var(--pm-ink, #1a1a1a);
  font: inherit;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  cursor: pointer;
}
.pm-train-add button.pm-week-btn {
  min-height: 44px;
}
button.pm-week-btn:hover:not(:disabled) {
  background-color: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-ink, #1a1a1a);
}
button.pm-week-btn--primary,
button.pm-week-btn--primary:hover:not(:disabled) {
  background: var(--pm-forest, #2c3e2f) !important;
  border-color: var(--pm-forest, #2c3e2f) !important;
  color: #fff;
}
button.pm-week-btn--quiet {
  border-color: transparent !important;
  background: none;
  color: var(--pm-danger, #b71c1c);
  text-decoration: underline;
}
button.pm-week-btn--quiet:hover:not(:disabled) {
  color: var(--pm-danger, #b71c1c);
}
button.pm-week-btn--chip {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}
button.pm-week-btn:disabled {
  opacity: .45;
  cursor: default;
}
button.pm-week-btn:focus-visible,
button.pm-train-step:focus-visible,
button.pm-train-remove:focus-visible,
button.pm-week-head:focus-visible,
button.pm-week-close:focus-visible {
  outline: 2px solid var(--pm-primary, #c6522d);
  outline-offset: 2px;
}

.pm-week-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 8px 0 20px;
}
.pm-week-wrap--wide {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
}
.pm-week-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pm-muted, #6f6a62);
}
.pm-week-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
i.pm-week-key {
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
i.pm-week-key[data-key="session"] {
  background: var(--pm-session, #a84324);
}
i.pm-week-key[data-key="merci"] {
  background: var(--pm-forest, #2c3e2f);
}
i.pm-week-key[data-key="own"] {
  background: #fbe4d9;
  border: 1px solid var(--pm-rose, #e8916b);
}
.pm-week-main {
  position: relative;
}
/* the frame drawn with the mouse to select several (sport-planner.js) */
.pm-week-lasso {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  border: 1px solid var(--pm-primary, #c6522d);
  border-radius: 2px;
  background: rgba(198, 82, 45, .12);
  pointer-events: none;
}
.pm-week {
  display: grid;
  grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  column-gap: 3px;
  -webkit-user-select: none;
  user-select: none;
}
.pm-week-wrap--narrow .pm-week {
  grid-template-columns: 20px repeat(7, minmax(0, 1fr));
  column-gap: 2px;
}
button.pm-week-head {
  min-width: 0;
  min-height: 36px;
  margin: 0 0 4px;
  padding: 4px 2px;
  border: 1px solid var(--pm-border, #e7dcce) !important;
  border-radius: var(--pm-radius-media, 8px);
  background: var(--pm-surface, #ffffff);
  color: var(--pm-ink, #1a1a1a);
  font: inherit;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
  cursor: pointer;
}
button.pm-week-head:hover:not(:disabled) {
  background-color: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-ink, #1a1a1a);
}
button.pm-week-head[aria-pressed="true"] {
  border-color: var(--pm-primary, #c6522d) !important;
  box-shadow: inset 0 0 0 1px var(--pm-primary, #c6522d);
}
.pm-week-hours {
  position: relative;
  font-size: 11px;
  color: var(--pm-muted, #6f6a62);
}
.pm-week-hours span {
  position: absolute;
  right: 4px;
  line-height: 1;
  transform: translateY(-50%);
}
.pm-week-wrap--narrow .pm-week-hours span {
  right: 2px;
  font-size: 10px;
}
.pm-week-col {
  position: relative;
  min-width: 0;
  border-radius: 6px;
  background-color: var(--pm-surface-warm, #fbf7f1);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pm-week-hour, 36px) - 1px),
    var(--pm-border, #e7dcce) calc(var(--pm-week-hour, 36px) - 1px), var(--pm-border, #e7dcce) var(--pm-week-hour, 36px));
}
button.pm-week-item {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: manipulation;
}
/* a long touch selects several (sport-planner.js): no callout or text selection on top of it */
button.pm-week-item,
button.pm-week-head {
  -webkit-touch-callout: none;
}
button.pm-week-session {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 5px;
  border: 1px solid var(--pm-session, #a84324) !important;
  border-radius: 6px;
  background: var(--pm-session, #a84324);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
}
/* neither shrinks, so that a name and time too tall for their block overflow it where sport-planner.js measures */
button.pm-week-session b {
  flex-shrink: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.pm-week-session .pm-week-time {
  flex-shrink: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.pm-week-session:hover:not(:disabled) {
  background-color: #8e3519 !important;
  color: #fff;
}
i.pm-week-fuel {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  color: var(--linen, #f5ebe0);
}
i.pm-week-fuel svg {
  display: block;
  width: 100%;
  height: 100%;
}
button.pm-week-meal {
  z-index: 2;
  left: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--pm-forest, #2c3e2f) !important;
  border-radius: 999px;
  background: var(--pm-forest, #2c3e2f);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
button.pm-week-meal:hover:not(:disabled) {
  background-color: #1d2a1f !important;
  color: #fff;
}
button.pm-week-meal[data-own="true"] {
  border-color: var(--pm-rose, #e8916b) !important;
  background: #fbe4d9;
  color: #8f3f1d;
}
button.pm-week-meal[data-own="true"]:hover:not(:disabled) {
  background-color: #f7d2c0 !important;
  color: #8f3f1d;
}
button.pm-week-meal[data-during="true"] {
  left: 30%;
  box-shadow: 0 0 0 2px #fff;
}
.pm-week-meal .pm-week-time {
  font-weight: 700;
}
.pm-week-meal .pm-week-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* where a name needs the room, its time gives way (sport-planner.js fitNames) */
button.pm-week-item.is-untimed .pm-week-time {
  display: none;
}
/* a session's name cut on one line takes two where its block has them */
button.pm-week-session.is-wrapped b {
  white-space: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
  line-height: 1.1;
}
button.pm-week-item.is-selected {
  z-index: 3;
  outline: 3px solid var(--pm-primary, #c6522d);
  outline-offset: 1px;
}
button.pm-week-item:focus-visible {
  z-index: 3;
  outline: 3px solid var(--pm-focus, #a84324);
  outline-offset: 1px;
}
button.pm-week-item.is-dragging {
  z-index: 4;
  opacity: .9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
  cursor: grabbing;
}
.pm-week-wrap--narrow button.pm-week-head {
  padding: 4px 0;
  font-size: 12px;
}
.pm-week-wrap--narrow button.pm-week-session {
  padding: 2px;
  font-size: 9.5px;
  line-height: 1.15;
}
/* a day column is about 40px wide on a phone: a name breaks between syllables, and inside a word only when no
   syllable break fits */
.pm-week-wrap--narrow button.pm-week-session b {
  white-space: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.pm-week-wrap--narrow button.pm-week-session .pm-week-time,
.pm-week-wrap--narrow button.pm-week-meal .pm-week-time {
  display: none;
}
.pm-week-wrap--narrow button.pm-week-meal {
  left: 1px;
  right: 1px;
  padding: 0 3px;
  font-size: 10px;
}
.pm-week-panel {
  box-sizing: border-box;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--pm-border, #e7dcce);
  border-radius: var(--pm-radius-card, 12px);
  background: var(--pm-surface, #ffffff);
}
.pm-week-wrap--wide .pm-week-panel {
  position: sticky;
  top: 16px;
}
.pm-week-panel[data-empty="true"] {
  background: var(--pm-surface-warm, #fbf7f1);
}
/* while several are being selected by touch, the panel stays in sight at the bottom of the screen as the week scrolls */
.pm-week-wrap.is-selecting:not(.pm-week-wrap--wide) .pm-week-panel {
  position: sticky;
  bottom: 8px;
  z-index: 5;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.pm-week-panel h5 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.3;
}
.pm-week-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
button.pm-week-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px;
  background: none;
  color: var(--pm-muted, #6f6a62);
  cursor: pointer;
}
button.pm-week-close svg {
  width: 18px;
  height: 18px;
}
button.pm-week-close:hover:not(:disabled) {
  background-color: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-ink, #1a1a1a);
}
.pm-week-panel .pm-field {
  margin: 0 0 12px;
}
.pm-week-panel .pm-sub {
  margin: 0 0 10px;
  font-size: 13px;
}
.pm-week-fields,
.pm-week-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}
fieldset.pm-week-fieldset {
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
fieldset.pm-week-fieldset legend {
  margin: 0 0 4px;
  padding: 0;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
}
.pm-week-choice {
  margin: 6px 0;
}
.pm-week-choice input[type=radio] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--pm-forest, #2c3e2f);
}
/* what can be done with a selection: labelled groups of buttons, then a footer with what removes it and the
   button that closes the panel */
.pm-week-section {
  margin: 14px 0 0;
}
.pm-week-panel p.pm-week-label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
}
.pm-week-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pm-week-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pm-week-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--pm-border-soft, #f0e9dd);
}
.pm-week-removals {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.pm-week-removals button.pm-week-btn--quiet {
  min-height: 32px;
  padding: 4px 0;
  text-align: left;
}
.pm-week-footer > button.pm-week-btn--primary {
  flex: 0 0 auto;
  min-width: 64px;
}
.pm-week-warning {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff4e5;
  color: #7a4a00;
  font-size: 13px;
}
.pm-week-notice {
  margin: 12px 0 0;
  color: var(--pm-forest, #2c3e2f);
  font-size: 13px;
  font-weight: var(--pm-weight-strong, 600);
}
ul.pm-week-help {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.45;
}
ul.pm-week-help li {
  margin: 0 0 6px;
}
/* The day plan (sport-planner.js): a day at a time, its needs against what merciChef and the person's own meals
   bring, each food time and session in time order with what it holds and what training asks of it. */
.pm-day-plan-title {
  margin: 20px 0 6px;
}
.pm-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}
button.pm-day-tab {
  min-width: 52px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--pm-border, #e7dcce) !important;
  border-radius: 999px;
  background: var(--pm-surface, #ffffff);
  color: var(--pm-ink, #1a1a1a);
  font: inherit;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
  cursor: pointer;
}
button.pm-day-tab:hover:not(:disabled) {
  background-color: var(--pm-surface-hover, #f6efe6) !important;
  border-color: var(--pm-forest, #2c3e2f) !important;
  color: var(--pm-ink, #1a1a1a);
}
button.pm-day-tab[aria-pressed="true"],
button.pm-day-tab[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--pm-forest, #2c3e2f) !important;
  border-color: var(--pm-forest, #2c3e2f) !important;
  color: #fff;
}
.pm-day-tab:focus-visible {
  outline: 2px solid var(--pm-primary, #c6522d);
  outline-offset: 2px;
}
ul.pm-day-times {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pm-border-soft, #f0e9dd);
}
li.pm-day-time {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid var(--pm-border-soft, #f0e9dd);
  border-left: 4px solid var(--pm-surface-selected, #efe6db);
}
li.pm-day-time[data-state="m"] {
  border-left-color: var(--pm-forest, #2c3e2f);
}
li.pm-day-time[data-state="o"] {
  border-left-color: var(--pm-rose, #e8916b);
}
li.pm-day-time[data-state="session"] {
  border-left-color: var(--pm-session, #a84324);
  background: #fbf1ec;
}
li.pm-day-time > div > b {
  margin-right: 8px;
  font-size: 15px;
  line-height: 1.4;
}
.pm-day-at {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--pm-muted, #6f6a62);
}
.pm-day-who {
  font-size: 12px;
  color: var(--pm-muted, #6f6a62);
}
.pm-day-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0 !important;
}
.pm-day-hint {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pm-surface-selected, #efe6db);
  font-size: 12px;
  line-height: 1.5;
}
.pm-day-hint[data-hint="met"] {
  background: #e3f1e5;
  color: #1d5b2a;
}
.pm-day-hint[data-hint="open"] {
  background: #fff4e5;
  color: #7a4a00;
}
.pm-day-hint[data-hint="warning"] {
  background: #fde8e8;
  color: #8a1c1c;
}
.pm-day-need {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
}
.pm-day-meters {
  margin: 0 0 12px;
}
.pm-day-meters .pm-meter-row {
  margin: 8px 0;
}
li.pm-day-time ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li.pm-day-time li {
  margin: 0 0 6px;
  line-height: 1.4;
}
li.pm-day-time li:last-child,
li.pm-day-time p {
  margin: 0;
}
li.pm-day-time .pm-sub {
  display: block;
  margin: 0;
  font-size: 13px;
}
.pm-day-total {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.45;
}
@media (max-width: 560px) {
  li.pm-day-time {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 8px;
  }
}

/* Coverage meters: the share of a need each source covers, keyed by a legend. */
.pm-meter-row {
  margin: 12px 0;
}
.pm-meter-label {
  margin-bottom: 5px;
  line-height: 1.4;
}
.pm-meter {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--pm-surface-selected, #efe6db);
}
.pm-meter-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pm-muted, #6f6a62);
}
.pm-meter-legend span {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 10px;
  border-radius: 3px;
}
.pm-meter-legend span:first-child {
  margin-left: 0;
}
.pm-meter .ours, .pm-meter-legend .ours {
  background: var(--pm-forest, #2c3e2f);
}
.pm-meter .other, .pm-meter-legend .other {
  background: var(--pm-rose, #e8916b);
}
.pm-meter-legend .gap {
  background: var(--pm-surface-selected, #efe6db);
}

/* ---------- 10. Dialogs & Toasts (Detached Body Overlays) ---------- */
.pm-dialog-host.invisible {
  display: none !important;
}

.pm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--pm-overlay, rgba(0, 0, 0, 0.35));
}

.pm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 701;
  width: calc(100% - 32px);
  max-width: 420px;
  background: var(--pm-surface, #ffffff);
  border-radius: var(--pm-radius-dialog, 16px);
  padding: 28px 24px;
  box-shadow: var(--pm-shadow-dialog, 0 20px 80px rgba(0, 0, 0, 0.18));
  box-sizing: border-box;
}

.pm-dialog h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: var(--pm-weight-strong, 600);
  color: var(--pm-ink, #1a1a1a);
}

.pm-dialog p {
  margin: 0 0 20px;
  color: var(--pm-muted, #6f6a62);
  font-size: 15px;
  line-height: 1.45;
  max-width: none;
}

.pm-dialog h3,.pm-dialog .pm-dialog-text {padding-right:32px}

.pm-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Shared close control: quiet muted cross, with a full touch target. */
button.pm-close, .pm-dialog .pm-dialog-close, .pm-toast .pm-toast-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: var(--pm-radius-control, 10px);
  background: transparent !important;
  color: var(--pm-muted, #6f6a62) !important;
  font: 400 24px/1 Manrope, sans-serif;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}
button.pm-close:hover, .pm-dialog .pm-dialog-close:hover, .pm-toast .pm-toast-close:hover {
  color: var(--pm-ink, #1a1a1a) !important;
}
button.pm-close:focus-visible, .pm-dialog .pm-dialog-close:focus-visible, .pm-toast .pm-toast-close:focus-visible {
  outline: 2px solid var(--pm-focus, #a84324);
  outline-offset: 1px;
}
button.pm-close::after, .pm-dialog .pm-dialog-close::after, .pm-toast .pm-toast-close::after {content: none !important}

/* Existing editors retain their position, stack and width; this owns their chrome. */
.pm-dialog-panel {
  box-sizing: border-box;
  background: var(--pm-surface, #fff);
  color: var(--pm-ink, #1a1a1a);
  border-radius: var(--pm-radius-dialog, 16px);
  padding: 24px;
  box-shadow: var(--pm-shadow-dialog, 0 20px 80px rgb(0 0 0 / 18%));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  font-size: 16px;
  line-height: 1.5;
}
.pm-dialog-panel > :is(h2,h3,h4), .pm-dialog-panel > .offer > :is(h2,h3,h4) {
  margin: 0 40px 12px 0;
  font-size: 22px;
  font-weight: var(--pm-weight-strong, 600);
  line-height: 1.25;
  color: var(--pm-ink, #1a1a1a);
}
.pm-dialog-panel > p {font-size:16px;line-height:1.5;color:var(--pm-muted,#6f6a62)}
.pm-dialog-panel .pm-btn {max-width:100%;white-space:normal}
@media (max-width:520px) {
  .pm-dialog-panel {padding:24px 20px}
  .pm-dialog-actions {flex-direction:column}
  .pm-dialog-actions .pm-btn {width:100%}
}

/* Toast */
.pm-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pm-surface, #ffffff);
  color: var(--pm-ink, #1a1a1a);
  border: 1px solid var(--pm-border, #e7dcce);
  border-left: 4px solid var(--pm-primary, #c6522d);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: var(--pm-shadow-toast, 0 18px 50px -10px rgba(0, 0, 0, 0.28));
  font-weight: var(--pm-weight-strong, 600);
  font-size: 15px;
  line-height: 1.3;
  max-width: calc(100vw - 32px);
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  box-sizing: border-box;
}

.pm-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pm-toast.dismissing {
  opacity: 0;
  transform: translateX(-50%) translateY(-24px);
}

.pm-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pm-primary, #c6522d);
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.pm-toast-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.pm-toast-icon .pm-dim {
  fill: currentColor;
}

.pm-toast-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pm-toast .pm-toast-close {position:static;flex:0 0 44px;margin:0 -8px 0 0}

/* ---------- 11. Interface Icons & Tools ---------- */
.pm-pencil,
button.pm-pencil,
.pm-page .rt-pencil,
.pm-page .rt-tab-rename {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--pm-border, #e7dcce) !important;
  border-radius: var(--pm-radius-control, 10px);
  background: #ffffff;
  color: var(--pm-primary, #c6522d);
  cursor: pointer;
  box-shadow: none;
  min-width: 0;
  flex: 0 0 auto;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--pm-transition, .15s ease), color var(--pm-transition, .15s ease);
}

.pm-pencil:hover,
button.pm-pencil:hover,
.pm-page .rt-pencil:hover,
.pm-page .rt-tab-rename:hover {
  background: var(--pm-surface-hover, #f6efe6) !important;
  color: var(--pm-primary, #c6522d);
}

.pm-pencil svg,
.pm-page .rt-pencil svg,
.pm-page .rt-tab-rename svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.pm-tooltip, .tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  transform: translateY(4px);
}
.pm-tooltip .pm-info-icon, .tooltip .info-icon {
  width: 22px;
  height: 22px;
  color: var(--pm-primary, #c6522d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.pm-tooltip .pm-info-icon svg, .tooltip .info-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pm-tooltip .pm-info-icon .pm-dim, .tooltip .info-icon .pm-dim {
  fill: currentColor;
}

/* ---------- 12. Checkout & Wizard Geometry Preservation ---------- */
.checkout-page select,
.wizard select {
  height: auto;
  min-height: 40px;
}