/* ============================================================
   File:        plans.css
   Project:     StudioFlow (Grace Aerobics & Fitness Center)
   Developer:   Janvi Vakhariya — V Techno Labs
   Created:     2026-09-01  (updated 2026-09-07)
   Purpose:     Design system for Membership Plans — three screens, one family:
                1) Plans list  2) Add Plan  3) Edit Plan.
                ONE list pattern (.sf-plan-item grouped under activity bands)
                and ONE form pattern (.sf-plan-form-card / .sf-plan-field)
                shared by screens 2-3.
   Copyright:   © 2026 V Techno Labs. All rights reserved.
                Proprietary software developed by V Techno Labs.
   ============================================================

   Same funky "Sunset" language as the other final screens: multi-colour wash
   ground, white glass cards with soft pink shadows, 20px radius, Archivo,
   the wing gradient as a ribbon.

   THE CENTRAL PROBLEM — activity must be the loudest signal: plans are
   GROUPED under solid activity bands (teal/orange/violet), every row keeps a
   4px activity spine + tinted duration block, and activity filter chips sit
   on top. She finds "the Yoga plans" by colour, not by reading.

   Prefix: sf-plan-, and nothing else. Never sf-dash- / sf-idash- / sf-dev- /
   sf-user-. The only non-prefixed selectors are the .sf-app shell overrides
   and one hook for the class site.js puts on a quick-pick chip — see notes 5
   and 6.

   ============================================================
   IMPORTANT — three of these class names ALREADY EXIST in site.css, left
   over from the plans screens this file replaces. site.css loads first, so
   every property it sets on them is re-declared here and this file wins.
   Nothing else in the app still uses them (no view carries class="sf-plan",
   "sf-plan-title" or "sf-plan-retired" any more), so overriding them is safe:

     .sf-plan        site.css gives it border-left: 4px solid var(--accent).
                     That is a leftover plan-card rule, and this file's root
                     container would have worn it as a stripe down the whole
                     page. Cancelled with border: 0 below.
     .sf-plan-title  site.css gives it min-width: 0. Harmless on the <h1>, and
                     re-stated below so the heading cannot inherit a surprise.
     .sf-plan-pair   site.css sets align-items: flex-start and, under a narrow
                     media query, flex-direction: column and gap: 0. This file
                     makes it a two-column grid, so align-items and gap are
                     re-declared; flex-direction is inert on a grid.
   ============================================================

   Six things this file does differently from the supplied design, all of them
   because it now lives inside the StudioFlow app shell:

   1. THIS SHEET PAINTS NO PAGE BACKGROUND. It used to carry its own copy of
      the ball pit at a fixed 460px with background-repeat: repeat, blended
      over an activity gradient — so Plans showed the artwork as a grid of
      tiles while every other screen showed it once, covered and centred, and
      Manage Users showed nothing at all.

      The ball pit now lives in site.css as the one background for every
      signed-in page, at cover and no-repeat. Plans takes it like the rest of
      them. To change the ground, change that one line there — not this file.

   2. The bar variables are bound to the shell's real bar heights
      (--appbar-h 56px, --tabbar-h 64px, from site.css :root) and then zeroed
      inside .sf-app, which already pads the body past both fixed bars.

   3. The ground is the shell's, painted by site.css on a fixed, frame-width
      backdrop behind .sf-frame. It uses position: fixed rather than the
      design's background-attachment: fixed, because inside a phone-width
      column on a desktop the latter sizes the image to the whole VIEWPORT and
      shows a narrow slice of its middle through the frame.

   4. container-type: inline-size is not declared. The design set it, but no
      @container query in this file reads it, and containment would make
      .sf-plan the containing block for the fixed backdrop in note 3.

   5. .sf-plan-dur-chip answers to .sf-chip-on as well as .is-on. The duration
      shortcuts are driven by the shared quick-pick handler in site.js, which
      marks the chosen chip with .sf-chip-on. Matching both beats rewriting a
      script the plan form shares with other screens.

   6. .sf-plan-empty and .sf-plan-alert are additions. The list has an empty
      state and the forms have a validation summary; the design's three
      screens show neither, and a form that cannot report an error is not
      finished.

   The footer here is the rainbow rule only. The tagline and the credit under
   it come from the shared _SiteFooter partial the layout already renders, so
   the design's .sf-plan-foot-tag / -credit rules are left out — keeping them
   would say "Music on. Chaos off." twice on one screen.

   Icons: every .sf-plan-ico is a 20×20 slot for the app's own SVGs (24×24 in
   the activity picker, 16×16 chevrons via .sf-plan-go). The three activity
   marks are finished coloured tiles, so they are placed as <img> and never
   masked or recoloured. Archivo 400/600/700/800 is loaded once by _PwaHead.
   ============================================================ */

.sf-plan {
  /* NO PAGE BACKGROUND IMAGE HERE. site.css declares the one background the
     whole signed-in app uses, on .sf-frame. A second photo in this sheet is
     how the app ended up with a different ground on every screen. */
  --sf-plan-wing: linear-gradient(90deg,#43a047,#d4b91e,#f57c00,#e53957,#c2185b,#7e57c2,#5c6f91);

  /* THIS IS THE SHEET THAT TILED. It carried its own copy of the ball pit at
     a fixed 460px with background-repeat: repeat, multiplied over an activity
     gradient -- so Plans showed the same artwork as a grid of tiles while
     every other screen showed it once, covered and centred. The ball pit now
     lives in site.css, at cover and no-repeat, on every page including this
     one. What is left here is the wash alone. */
  --sf-plan-ground:
    linear-gradient(178deg, rgba(255,250,252,.8) 0%, rgba(255,248,242,.74) 40%, rgba(250,246,253,.78) 100%);
  /* Muted deepened from #6d6b58, which measured 4.05:1 against the darkest
     part of the shared ball-pit ground -- under the 4.5:1 minimum for any
     muted line that sits on the ground rather than inside a card. #615F4E
     measures 4.85:1 there and 6.45:1 on white. Deepening the ink was the fix,
     not a panel behind the text. */
  --sf-plan-ink: #2b2a1f; --sf-plan-muted: #615F4E;
  --sf-plan-pink: #c2185b; --sf-plan-pink-deep: #98123f;
  --sf-plan-card: #ffffff;   /* solid: the scrim is the only translucency */ --sf-plan-edge: rgba(255,255,255,.92);
  --sf-plan-line: rgba(43,42,31,.12);
  --sf-plan-good: #1d7a3f; --sf-plan-good-tint: #e3f3e8;
  --sf-plan-warn: #9a5b00; --sf-plan-warn-tint: #fdf0d7;
  --sf-plan-bad: #b3261e;  --sf-plan-bad-tint: #fdecea;

  /* activity trio — the strongest signal on every row */
  --sf-plan-aer: #0f766e; --sf-plan-aer-mid: #17a89a; --sf-plan-aer-tint: #dff1ef;
  --sf-plan-yog: #c96a00; --sf-plan-yog-mid: #f08a1d; --sf-plan-yog-tint: #fdeedd;
  --sf-plan-dan: #6d28d9; --sf-plan-dan-mid: #9d76e8; --sf-plan-dan-tint: #efe8fa;

  --sf-plan-radius: 20px; --sf-plan-tap: 48px;

  /* The shell's real fixed bars, read from site.css :root. The fallbacks are
     the same 56/64 the design shipped with, so a standalone use of .sf-plan
     outside the shell still clears them. Zeroed below — see note 2. */
  --sf-plan-top-bar: var(--appbar-h, 56px); --sf-plan-bottom-bar: var(--tabbar-h, 64px);

  box-sizing: border-box; max-width: 640px; margin: 0 auto;
  border: 0;                             /* cancels site.css's leftover stripe */
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(var(--sf-plan-top-bar) + 14px) 16px calc(var(--sf-plan-bottom-bar) + 26px + env(safe-area-inset-bottom, 0px));
  background: var(--sf-plan-ground);
  color: var(--sf-plan-ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* Inside the app shell the layout has already done the spacing: .sf-app pads
   the body past both fixed bars, and .sf-content supplies the 1rem side gutter
   and caps the column at 640px. Repeating either would double it. */
.sf-app .sf-plan {
  --sf-plan-top-bar: 0px;
  --sf-plan-bottom-bar: 0px;
  padding-left: 0; padding-right: 0;
  background: none;
}

/* The wash, painted across the whole viewport rather than behind the column
   (note 3). Fixed and out of flow, so it is not a flex item and does not
   scroll away on a long list. It carries the design's own layering verbatim
   and sits above the body's grey but below every card; the app bar and tab
   bar are fixed at z-index 20 with their own navy, so neither is touched. */
/* No page backdrop here any more. site.css paints ONE background on .sf-app for
   every signed-in page, so this sheet no longer paints its own: four stylesheets
   each drawing their own ground is exactly how Plans ended up tiled while Users
   ended up plain. The --sf-plan-ground variable above is kept for the standalone,
   outside-the-shell case documented at the top of this file. */

.sf-plan *, .sf-plan *::before, .sf-plan *::after { box-sizing: border-box; }
:where(.sf-plan a) { color: inherit; text-decoration: none; }
.sf-plan :focus-visible { outline: 2px solid var(--sf-plan-pink); outline-offset: 2px; }
.sf-plan-ico { display: inline-block; width: 20px; height: 20px; flex: none; }
.sf-plan-go { display: inline-block; width: 16px; height: 16px; flex: none; opacity: .7; }

/* ---------- shared: back link, intro ---------- */
.sf-plan-back {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  min-height: 44px; margin: -6px 0 -10px;
  font-size: 14px; font-weight: 800; color: var(--sf-plan-pink);
}
.sf-plan-back:active { text-decoration: underline; text-underline-offset: 3px; }
.sf-plan-back .sf-plan-go { transform: rotate(180deg); opacity: 1; }

.sf-plan-intro { margin: 0 2px; }
.sf-plan-title { min-width: 0; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.sf-plan-sub { margin: 2px 0 0; font-size: 14px; color: var(--sf-plan-muted); text-wrap: pretty; }
.sf-plan-sub strong { color: var(--sf-plan-ink); font-weight: 700; }

/* add plan — the list's one loud action */
.sf-plan-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(155deg, #e0447a, var(--sf-plan-pink-deep));
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 800;
  box-shadow: 0 12px 24px -12px rgba(194,24,91,.7);
}
.sf-plan-add:active { transform: translateY(1px); filter: brightness(.95); }

/* ---------- activity filter chips ---------- */
.sf-plan-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-plan-filter {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--sf-plan-edge);
  background: var(--sf-plan-card);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--sf-plan-ink); font-family: inherit; font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.sf-plan-filter small { font-weight: 700; color: var(--sf-plan-muted); }
.sf-plan-filter:active { filter: brightness(.95); }
/* the app marks the active chip with .is-on + activity modifier */
.sf-plan-filter.is-on { border-color: transparent; color: #fff; background: linear-gradient(155deg, #e0447a, var(--sf-plan-pink-deep)); }
.sf-plan-filter.is-on small { color: rgba(255,255,255,.8); }
.sf-plan-filter--aer.is-on { background: linear-gradient(155deg, var(--sf-plan-aer-mid), var(--sf-plan-aer)); }
.sf-plan-filter--yog.is-on { background: linear-gradient(155deg, var(--sf-plan-yog-mid), var(--sf-plan-yog)); }
.sf-plan-filter--dan.is-on { background: linear-gradient(155deg, var(--sf-plan-dan-mid), var(--sf-plan-dan)); }

/* ============================================================
   LIST PATTERN — activity groups
   A solid colour band names the activity; its plans hang from
   it in one glass card. The band is unmissable from arm's
   length — that's how she finds "the Yoga plans".
   ============================================================ */
.sf-plan-group { border-radius: var(--sf-plan-radius); overflow: hidden; box-shadow: 0 14px 30px -16px rgba(194,24,91,.4); }

.sf-plan-band {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 16px;
  color: #fff;
}
.sf-plan-band .sf-plan-ico { color: #fff; }
.sf-plan-band-name { flex: 1; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sf-plan-band-count { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.sf-plan-group--aer .sf-plan-band { background: linear-gradient(150deg, var(--sf-plan-aer-mid), var(--sf-plan-aer)); }
.sf-plan-group--yog .sf-plan-band { background: linear-gradient(150deg, var(--sf-plan-yog-mid), var(--sf-plan-yog)); }
.sf-plan-group--dan .sf-plan-band { background: linear-gradient(150deg, var(--sf-plan-dan-mid), var(--sf-plan-dan)); }

.sf-plan-group-body {
  background: var(--sf-plan-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1.5px solid var(--sf-plan-edge); border-top: 0;
  border-radius: 0 0 var(--sf-plan-radius) var(--sf-plan-radius);
  padding: 2px 14px;
}

/* one plan row */
.sf-plan-item {
  display: grid; grid-template-columns: 56px minmax(0,1fr) auto;
  align-items: center; column-gap: 12px;
  padding: 12px 0 12px 10px;
  border-top: 1px solid var(--sf-plan-line);
  position: relative;
}
.sf-plan-item:first-child { border-top: 0; }
/* the activity spine — colour even without the band in view */
.sf-plan-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 999px; background: var(--sf-plan-spine, var(--sf-plan-pink)); }
.sf-plan-group--aer .sf-plan-item { --sf-plan-spine: var(--sf-plan-aer-mid); }
.sf-plan-group--yog .sf-plan-item { --sf-plan-spine: var(--sf-plan-yog-mid); }
.sf-plan-group--dan .sf-plan-item { --sf-plan-spine: var(--sf-plan-dan-mid); }

/* duration block: big number, tinted in the activity colour */
.sf-plan-dur {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; min-height: 54px; border-radius: 14px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.sf-plan-dur-n { font-size: 22px; font-weight: 800; }
.sf-plan-dur-u { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.sf-plan-group--aer .sf-plan-dur { background: var(--sf-plan-aer-tint); color: var(--sf-plan-aer); }
.sf-plan-group--yog .sf-plan-dur { background: var(--sf-plan-yog-tint); color: var(--sf-plan-yog); }
.sf-plan-group--dan .sf-plan-dur { background: var(--sf-plan-dan-tint); color: var(--sf-plan-dan); }

.sf-plan-item-main { min-width: 0; }
.sf-plan-item-name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.sf-plan-item-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-plan-item-desc { margin: 1px 0 0; font-size: 12.5px; color: var(--sf-plan-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* price — the number she compares down the list: same column, tabular */
.sf-plan-price { text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-plan-price small { display: block; font-size: 11px; font-weight: 700; color: var(--sf-plan-muted); letter-spacing: .04em; }

/* row actions: quiet, ruled off */
.sf-plan-item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px 10px; }
.sf-plan-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--sf-plan-line); background: transparent;
  color: var(--sf-plan-ink); font-family: inherit; font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.sf-plan-act:active { background: rgba(43,42,31,.06); }
.sf-plan-act--retire { border-color: rgba(154,91,0,.4); color: var(--sf-plan-warn); }
.sf-plan-act--retire:active { background: var(--sf-plan-warn-tint); }
.sf-plan-act--restore { border-color: rgba(29,122,63,.4); color: var(--sf-plan-good); }
.sf-plan-act--restore:active { background: var(--sf-plan-good-tint); }
/* Retire/Reactivate is a POST, so its button arrives wrapped in a form that
   carries the antiforgery token. The form shrinks to the button inside it, so
   the action row still reads as equal targets. */
.sf-plan-actform { margin: 0; display: inline-flex; }

/* retired: visible but stood down — greyed, "Retired" tag, spine hollow */
.sf-plan-item--retired .sf-plan-dur { background: rgba(43,42,31,.07); color: var(--sf-plan-muted); }
.sf-plan-item--retired .sf-plan-item-name-text,
.sf-plan-item--retired .sf-plan-price { color: var(--sf-plan-muted); }
.sf-plan-item--retired::before { background: transparent; border: 1.5px dashed var(--sf-plan-spine, var(--sf-plan-muted)); width: 2.5px; }
.sf-plan-tag-retired {
  flex: none; display: inline-flex; align-items: center;
  min-height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--sf-plan-warn-tint); color: var(--sf-plan-warn);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.sf-plan-item--retired .sf-plan-item-desc { font-style: italic; }

/* Empty state (note 6): no plans at all, or none of the filtered activity. */
.sf-plan-empty {
  background: #ffffff;            /* solid over the shared background */
  border: 2px dashed rgba(43,42,31,.22); border-radius: var(--sf-plan-radius);
  padding: 28px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sf-plan-empty-title { margin: 0; font-size: 16px; font-weight: 800; }
.sf-plan-empty-sub { margin: 0; max-width: 32ch; font-size: 13.5px; color: var(--sf-plan-muted); text-wrap: pretty; }

/* ============================================================
   FORM PATTERN — screens 2 & 3 (visible siblings)
   Activity first as three big colour tiles; duration + price
   side by side (short values); wing ribbon on the card.
   ============================================================ */
.sf-plan-form-card {
  background: var(--sf-plan-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1.5px solid var(--sf-plan-edge);
  border-radius: var(--sf-plan-radius);
  box-shadow: 0 14px 30px -16px rgba(194,24,91,.4);
  padding: 16px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
}
.sf-plan-form-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--sf-plan-wing); }

.sf-plan-field { display: flex; flex-direction: column; gap: 6px; }
.sf-plan-label { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.sf-plan-label small { font-weight: 600; color: var(--sf-plan-muted); }

.sf-plan-input {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 1.5px solid rgba(43,42,31,.2); border-radius: 14px;
  background: #fff; color: var(--sf-plan-ink);
  font-family: inherit; font-size: 16px; font-weight: 600;
}
.sf-plan-input::placeholder { color: rgba(43,42,31,.35); font-weight: 400; }
.sf-plan-input:focus { border-color: var(--sf-plan-pink); outline: none; box-shadow: 0 0 0 3px rgba(194,24,91,.15); }
textarea.sf-plan-input { min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.45; }

.sf-plan-hint { margin: 0; font-size: 12.5px; color: var(--sf-plan-muted); text-wrap: pretty; }

/* activity picker: three radio tiles in the activity colours */
.sf-plan-activities { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.sf-plan-activity { position: relative; display: block; min-width: 0; }
.sf-plan-activity input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.sf-plan-activity-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px; padding: 8px 6px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(43,42,31,.18); background: #fff;
  font-size: 13px; font-weight: 800; text-align: center;
}
.sf-plan-activity-card .sf-plan-ico { width: 24px; height: 24px; }
.sf-plan-activity--aer .sf-plan-activity-card { color: var(--sf-plan-aer); }
.sf-plan-activity--yog .sf-plan-activity-card { color: var(--sf-plan-yog); }
.sf-plan-activity--dan .sf-plan-activity-card { color: var(--sf-plan-dan); }
.sf-plan-activity--aer input:checked + .sf-plan-activity-card { border-color: var(--sf-plan-aer); background: var(--sf-plan-aer-tint); box-shadow: 0 0 0 3px rgba(15,118,110,.18); }
.sf-plan-activity--yog input:checked + .sf-plan-activity-card { border-color: var(--sf-plan-yog); background: var(--sf-plan-yog-tint); box-shadow: 0 0 0 3px rgba(201,106,0,.18); }
.sf-plan-activity--dan input:checked + .sf-plan-activity-card { border-color: var(--sf-plan-dan); background: var(--sf-plan-dan-tint); box-shadow: 0 0 0 3px rgba(109,40,217,.18); }
.sf-plan-activity input:focus-visible + .sf-plan-activity-card { outline: 2px solid var(--sf-plan-pink); outline-offset: 2px; }

/* duration + price side by side; both short.
   align-items and gap are re-declared, not inherited: site.css still carries
   an older .sf-plan-pair flex rule — see the note at the top of this file. */
.sf-plan-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; align-items: start; }
.sf-plan-affix { position: relative; }
.sf-plan-affix .sf-plan-input { padding-right: 64px; }
.sf-plan-affix--pre .sf-plan-input { padding-left: 34px; padding-right: 14px; }
.sf-plan-affix-unit {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: var(--sf-plan-muted); pointer-events: none;
}
.sf-plan-affix .sf-plan-affix-unit { right: 14px; }
.sf-plan-affix--pre .sf-plan-affix-unit { left: 14px; right: auto; font-size: 15px; }

/* quick duration chips. .sf-chip-on is what site.js writes on the chosen chip
   (note 5); .is-on is the design's own name for the same state. */
.sf-plan-durs { display: flex; gap: 8px; margin-top: 8px; }
.sf-plan-dur-chip {
  min-width: 44px; min-height: 40px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(43,42,31,.2); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 800; color: var(--sf-plan-ink);
}
.sf-plan-dur-chip:active,
.sf-plan-dur-chip.is-on,
.sf-plan-dur-chip.sf-chip-on { border-color: var(--sf-plan-pink); background: #fce8f0; color: var(--sf-plan-pink); }

/* retire / reactivate block on Edit — with the reassurance line */
.sf-plan-retire {
  border: 1.5px solid rgba(154,91,0,.35); border-radius: 16px;
  background: var(--sf-plan-warn-tint); padding: 14px;
}
.sf-plan-retire--restore { border-color: rgba(29,122,63,.35); background: var(--sf-plan-good-tint); }
.sf-plan-retire-title { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--sf-plan-warn); }
.sf-plan-retire--restore .sf-plan-retire-title { color: var(--sf-plan-good); }
.sf-plan-retire-sub { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #6b4a00; text-wrap: pretty; }
.sf-plan-retire--restore .sf-plan-retire-sub { color: #1d5c33; }
.sf-plan-retire-form { margin: 0; }
.sf-plan-retire-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--sf-plan-tap); border-radius: 13px; cursor: pointer;
  border: 1.5px solid rgba(154,91,0,.5); background: #fff;
  color: var(--sf-plan-warn); font-family: inherit; font-size: 14.5px; font-weight: 800;
}
.sf-plan-retire-btn:active { filter: brightness(.95); }
.sf-plan-retire--restore .sf-plan-retire-btn { border-color: rgba(29,122,63,.5); color: var(--sf-plan-good); }

/* which plan is being edited — unmistakable */
.sf-plan-whom {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 16px;
  border: 1.5px solid rgba(43,42,31,.14);
}
.sf-plan-whom--aer { background: var(--sf-plan-aer-tint); border-color: rgba(15,118,110,.3); }
.sf-plan-whom--yog { background: var(--sf-plan-yog-tint); border-color: rgba(201,106,0,.3); }
.sf-plan-whom--dan { background: var(--sf-plan-dan-tint); border-color: rgba(109,40,217,.3); }
.sf-plan-whom .sf-plan-dur { background: #fff; }
.sf-plan-whom--aer .sf-plan-dur { color: var(--sf-plan-aer); }
.sf-plan-whom--yog .sf-plan-dur { color: var(--sf-plan-yog); }
.sf-plan-whom--dan .sf-plan-dur { color: var(--sf-plan-dan); }
.sf-plan-whom-name { margin: 0; font-size: 15px; font-weight: 800; }
.sf-plan-whom-sub { margin: 0; font-size: 13px; color: var(--sf-plan-muted); }

/* submit + cancel — same pair as Manage Users */
.sf-plan-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; margin-top: 2px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(155deg, #e0447a, var(--sf-plan-pink-deep));
  color: #fff; font-family: inherit; font-size: 16px; font-weight: 800;
  box-shadow: 0 12px 24px -12px rgba(194,24,91,.7);
}
.sf-plan-submit:active { transform: translateY(1px); filter: brightness(.95); }

.sf-plan-cancel {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--sf-plan-tap);
  border: 1.5px solid var(--sf-plan-edge); border-radius: 14px; cursor: pointer;
  background: var(--sf-plan-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--sf-plan-ink); font-family: inherit; font-size: 15px; font-weight: 700;
}
.sf-plan-cancel:active { filter: brightness(.96); }

/* ---------- validation (note 6) ----------
   The summary the view prints when the server rejects a post, and the
   per-field message the asp-validation-for span carries. The span keeps its
   own .sf-field-error class from site.css and wears .sf-plan-error as well,
   so the tag helper's markup is untouched and this file only recolours it.
   input-validation-error is jQuery Validate's own class, put on the input
   itself, so a wrong field looks wrong and not just its message. */
.sf-plan-alert {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 12px 14px; border-radius: 14px;
  background: var(--sf-plan-bad-tint); color: #8c1d17;
  border: 1.5px solid rgba(179,38,30,.3);
  font-size: 13.5px; font-weight: 600; text-wrap: pretty;
}
.sf-plan-error { font-size: 12.5px; font-weight: 700; color: var(--sf-plan-bad); }
.sf-plan-error:empty { display: none; }
.sf-plan-input.input-validation-error { border-color: var(--sf-plan-bad); background: #fffafa; }

/* ---------- footer ---------- */
.sf-plan-foot { text-align: center; padding: 2px 2px 0; }
.sf-plan-wingbar { height: 4px; border: 0; width: 132px; margin: 0 auto 12px; border-radius: 999px; background: var(--sf-plan-wing); }