/*
 * Brand tokens, copied from the storefront theme so the Plus service looks like munchterm
 * rather than like a generic SaaS dashboard. Sources, so these can be re-synced by hand:
 *
 *   colours   config/settings_data.json -> current.color_schemes (scheme-1 is the default
 *             light scheme; #ff6363 is the brand primary, confirmed by the email token set at
 *             _apps/munchterm/.../blocks-engine/theme.json).
 *   type      current.type_heading_font = inter_n7, type_body_font = nunito_sans_n4,
 *             and the type_size_* scale.
 *   radius    every *_border_radius / *_corner_radius setting is 0. That is a deliberate part
 *             of the look, not an oversight — do not round things here.
 *
 * Mobile-first: the scale below is the phone scale, and the one media query at the bottom is
 * the only place it grows. Most of this traffic is a customer on their phone checking whether
 * their membership renewed.
 *
 * NO ALL CAPS anywhere. The storefront sets type_case_h1/h2/h3 to "none" and _brand/ says the
 * voice is lowercase; text-transform: uppercase must not appear in this app's CSS.
 */

:root {
  /* --- colour ------------------------------------------------------------ */
  --plus-accent: #ff6363;
  --plus-accent-hover: #e65959;
  --plus-accent-deep: #b34545;
  --plus-on-accent: #ffffff;

  --plus-bg: #fafafa;
  --plus-surface: #ffffff;
  --plus-surface-alt: #f1f1f1;
  --plus-ink: #000000;
  /* The theme's body colour is #000000cf — 81% black, softer than the headings. */
  --plus-ink-body: rgba(0, 0, 0, 0.81);
  --plus-ink-muted: rgba(0, 0, 0, 0.55);
  --plus-border: rgba(0, 0, 0, 0.12);
  --plus-dark: #2d2d2d;
  --plus-on-dark: rgba(255, 255, 255, 0.93);

  /* Status colours. Plus states are money states, so they need to read clearly: past due and
     cancelled must not look like decoration. */
  --plus-positive: #2e7d32;
  --plus-warning: #b26a00;
  --plus-critical: #c62828;

  /* --- type -------------------------------------------------------------- */
  --plus-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --plus-font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --plus-weight-heading: 700;
  --plus-weight-body: 400;

  --plus-size-h1: 2rem;
  --plus-size-h2: 1.5rem;
  --plus-size-h3: 1.25rem;
  --plus-size-body: 1rem;
  --plus-size-small: 0.875rem;
  --plus-line-heading: 1.15;
  --plus-line-body: 1.6;

  /* --- space and shape --------------------------------------------------- */
  --plus-space-1: 4px;
  --plus-space-2: 8px;
  --plus-space-3: 12px;
  --plus-space-4: 16px;
  --plus-space-5: 24px;
  --plus-space-6: 32px;
  --plus-space-7: 48px;

  --plus-radius: 0;
  --plus-border-width: 1px;
  --plus-page-margin: 16px;
  --plus-content-width: 640px;
  /* Anything tappable clears the 44px minimum. This is a phone-first app. */
  --plus-tap-target: 44px;
}

/* --- reset, kept to what this app actually needs ------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--plus-bg);
  color: var(--plus-ink-body);
  font-family: var(--plus-font-body);
  font-size: var(--plus-size-body);
  font-weight: var(--plus-weight-body);
  line-height: var(--plus-line-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0 0 var(--plus-space-3);
  color: var(--plus-ink);
  font-family: var(--plus-font-heading);
  font-weight: var(--plus-weight-heading);
  line-height: var(--plus-line-heading);
}

h1 { font-size: var(--plus-size-h1); }
h2 { font-size: var(--plus-size-h2); }
h3 { font-size: var(--plus-size-h3); }

p {
  margin: 0 0 var(--plus-space-4);
}

a {
  color: var(--plus-accent-deep);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--plus-accent-hover);
}

/* A visible focus ring is not optional — this app handles someone's money. */
:focus-visible {
  outline: 2px solid var(--plus-accent);
  outline-offset: 2px;
}

/* --- the one layout primitive the shell needs ---------------------------- */
.plus-page {
  max-width: var(--plus-content-width);
  margin: 0 auto;
  padding: var(--plus-space-6) var(--plus-page-margin) var(--plus-space-7);
}

.plus-card {
  background: var(--plus-surface);
  border: var(--plus-border-width) solid var(--plus-border);
  border-radius: var(--plus-radius);
  padding: var(--plus-space-5);
}

.plus-muted {
  color: var(--plus-ink-muted);
  font-size: var(--plus-size-small);
}

/* --- the components the join flow needs -------------------------------- */

.plus-lede {
  font-size: 1.125rem;
  color: var(--plus-ink-body);
}

.plus-section {
  margin-block-start: var(--plus-space-7);
}

.plus-card + .plus-card,
.plus-card + .plus-form {
  margin-block-start: var(--plus-space-5);
}

.plus-card--notice {
  border-color: var(--plus-accent);
}

.plus-price {
  margin: 0 0 var(--plus-space-3);
  font-family: var(--plus-font-heading);
  font-size: var(--plus-size-h1);
  font-weight: var(--plus-weight-heading);
  line-height: 1;
  color: var(--plus-ink);
}

.plus-price__period {
  font-family: var(--plus-font-body);
  font-size: var(--plus-size-body);
  font-weight: var(--plus-weight-body);
  color: var(--plus-ink-muted);
}

.plus-benefits {
  margin: 0 0 var(--plus-space-4);
  padding-inline-start: var(--plus-space-5);
}

.plus-benefits li {
  margin-block-end: var(--plus-space-2);
}

/* Square, like everything else. Sized to clear the 44px tap target on a phone. */
.plus-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--plus-tap-target);
  padding: var(--plus-space-3) var(--plus-space-5);
  border: var(--plus-border-width) solid var(--plus-accent);
  border-radius: var(--plus-radius);
  background: var(--plus-accent);
  color: var(--plus-on-accent);
  font-family: var(--plus-font-heading);
  font-size: var(--plus-size-body);
  font-weight: var(--plus-weight-heading);
  text-decoration: none;
  cursor: pointer;
}

.plus-button:hover {
  background: var(--plus-accent-hover);
  border-color: var(--plus-accent-hover);
  color: var(--plus-on-accent);
}

.plus-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Full width on a phone: a payment button should be the easiest thing to hit on the page. */
@media (max-width: 540px) {
  .plus-button {
    display: flex;
    width: 100%;
  }
}

.plus-form {
  margin-block-start: var(--plus-space-5);
  display: grid;
  gap: var(--plus-space-5);
}

.plus-fieldset {
  margin: 0;
  padding: var(--plus-space-4);
  border: var(--plus-border-width) solid var(--plus-border);
  border-radius: var(--plus-radius);
}

.plus-fieldset legend {
  padding-inline: var(--plus-space-2);
  font-family: var(--plus-font-heading);
  font-weight: var(--plus-weight-heading);
  color: var(--plus-ink);
}

/* The whole row is the target, not just the 16px control. */
.plus-choice {
  display: flex;
  gap: var(--plus-space-3);
  align-items: flex-start;
  min-height: var(--plus-tap-target);
  padding-block: var(--plus-space-2);
  cursor: pointer;
}

.plus-choice input {
  margin-block-start: 0.2em;
  /* Bigger than the browser default, which is under the tap-target minimum on a phone. */
  inline-size: 20px;
  block-size: 20px;
  accent-color: var(--plus-accent);
  flex: none;
}

.plus-choice--consent {
  padding: var(--plus-space-4);
  border: var(--plus-border-width) solid var(--plus-border);
  background: var(--plus-surface);
}

.plus-error {
  margin: 0;
  padding: var(--plus-space-3) var(--plus-space-4);
  border: var(--plus-border-width) solid var(--plus-critical);
  color: var(--plus-critical);
}

.plus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--plus-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plus-tile {
  display: grid;
  gap: var(--plus-space-2);
  padding: var(--plus-space-3);
  border: var(--plus-border-width) solid var(--plus-border);
  background: var(--plus-surface);
}

.plus-tile img,
.plus-tile__placeholder {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--plus-surface-alt);
}

.plus-tile__title {
  font-size: var(--plus-size-small);
}

.plus-tag {
  justify-self: start;
  padding: 2px var(--plus-space-2);
  background: var(--plus-surface-alt);
  color: var(--plus-ink-muted);
  font-size: var(--plus-size-small);
}

.plus-faq {
  margin: 0;
}

.plus-faq dt {
  margin-block-start: var(--plus-space-4);
  font-family: var(--plus-font-heading);
  font-weight: var(--plus-weight-heading);
  color: var(--plus-ink);
}

.plus-faq dd {
  margin: var(--plus-space-1) 0 0;
}

.plus-inline-form {
  display: inline;
}

/* A button that reads as a link, for "log out" in a sentence. */
.plus-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--plus-accent-deep);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Long-form legal text. Narrower than the app pages: a wall of terms at full width is unreadable. */
.plus-prose {
  max-width: 62ch;
}

.plus-prose h2 {
  margin-block-start: var(--plus-space-6);
}

.plus-prose blockquote {
  margin: var(--plus-space-4) 0;
  padding: var(--plus-space-3) var(--plus-space-4);
  border-inline-start: 3px solid var(--plus-accent);
  background: var(--plus-surface-alt);
}

.plus-prose ul,
.plus-prose ol {
  padding-inline-start: var(--plus-space-5);
}

.plus-prose li {
  margin-block-end: var(--plus-space-2);
}

.plus-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--plus-space-4);
}

.plus-prose th,
.plus-prose td {
  padding: var(--plus-space-2);
  border: var(--plus-border-width) solid var(--plus-border);
  text-align: start;
}

/* --- account page ------------------------------------------------------- */

.plus-card--warn { border-color: var(--plus-warning); }
.plus-card--end { border-color: var(--plus-ink-muted); }

.plus-facts {
  margin: 0 0 var(--plus-space-4);
}

.plus-facts > div {
  display: flex;
  gap: var(--plus-space-3);
  justify-content: space-between;
  padding-block: var(--plus-space-2);
  border-block-end: var(--plus-border-width) solid var(--plus-border);
}

.plus-facts dt {
  color: var(--plus-ink-muted);
}

.plus-facts dd {
  margin: 0;
  text-align: end;
}

.plus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plus-space-3);
}

/* The secondary action: same size and tap target, visibly not the primary one. Cancelling must
   be easy to find, so this is never smaller or fainter than the button beside it. */
.plus-button--quiet {
  background: var(--plus-surface);
  border-color: var(--plus-border);
  color: var(--plus-ink);
}

.plus-button--quiet:hover {
  background: var(--plus-surface-alt);
  border-color: var(--plus-ink-muted);
  color: var(--plus-ink);
}

.plus-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plus-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plus-space-3);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--plus-space-3);
  border-block-end: var(--plus-border-width) solid var(--plus-border);
}

/* --- receipt ------------------------------------------------------------- */

.plus-receipt {
  max-width: 54ch;
}

.plus-receipt__totals {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--plus-space-5);
}

.plus-receipt__totals th,
.plus-receipt__totals td {
  padding: var(--plus-space-2) 0;
  border-block-end: var(--plus-border-width) solid var(--plus-border);
  text-align: start;
}

.plus-receipt__totals td {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.plus-receipt__total th,
.plus-receipt__total td {
  font-family: var(--plus-font-heading);
  font-weight: var(--plus-weight-heading);
  color: var(--plus-ink);
}

.plus-receipt__seller p {
  margin: 0;
  color: var(--plus-ink-muted);
  font-size: var(--plus-size-small);
}

@media print {
  /* A printed receipt is a document, not a web page. */
  .plus-no-print { display: none; }
  .plus-page { padding: 0; max-width: none; }
  body { background: #ffffff; }
}

@media (min-width: 700px) {
  :root {
    --plus-size-h1: 2.75rem;
    --plus-size-h2: 2rem;
    --plus-size-h3: 1.5rem;
    --plus-page-margin: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}