/* ============================================================
   File:        member-details.css
   Project:     StudioFlow (Grace Aerobics & Fitness Center)
   Developer:   Janvi Vakhariya — V Techno Labs
   Created:     2026-09-07
   Purpose:     Design system for Member Details — the busiest screen. Hierarchy:
                identity → membership → MONEY (pending is the hero number) →
                actions → collapsed history.
   Copyright:   © 2026 V Techno Labs. All rights reserved.
                Proprietary software developed by V Techno Labs.
   ============================================================

   Prefix: sf-mdet-, and nothing else. Never sf-member- / sf-memact- / sf-dash-
   / sf-idash- / sf-plan- / sf-batch- / sf-user- / sf-dev-. The only
   non-prefixed selector is the .sf-app shell override — see note 2.

   ROLES — render only what the role may see:
   · Owner: Renew, Add payment, Add weight, Edit, Freeze/Resume (2×2 grid) +
     Deactivate (quiet red, full width) + audit notes (.sf-mdet-audit) inside
     sections + the Corrections section.
   · Instructor: Renew + a single row of three (.sf-mdet-grid--3: Payment,
     Weight, Edit). The view OMITS .sf-mdet-danger and every .sf-mdet-audit —
     they are not in the response at all — and this sheet makes both layouts
     look complete.

   STATUS — hero and money react to one modifier on the root card:
   .sf-mdet-hero--active / --soon / --expired / --frozen colours the status
   chip and the Expires tile. Pending money: .sf-mdet-pend--due (red) vs
   .sf-mdet-pend--clear (green ₹0).

   SECTIONS — native <details>. Each <summary> carries a one-line answer
   (.sf-mdet-sum-note) so most visits never open anything. The health note is
   ALSO flagged on the hero (.sf-mdet-flag) so an instructor sees it before
   class.

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

   1. IT PAINTS NO BACKGROUND INSIDE THE SHELL. The design gave .sf-mdet its
      own striped ground. site.css paints ONE background on .sf-frame for
      every signed-in page — the same /img/stripes.jpeg, already at
      background-size: cover / no-repeat / center — so a second copy here
      would double the wash, and a second copy tiling would be the bug a
      previous page shipped with. The variable and the cover rule are kept
      for a standalone render; .sf-app .sf-mdet turns the ground off.

   2. The bar variables are bound to the shell's real fixed bars (--appbar-h
      56px, --tabbar-h 64px, from site.css :root) and then zeroed inside
      .sf-app, which already pads the body past both. The bottom bar carries
      five tabs for the owner and four for an instructor; its HEIGHT is the
      same either way, so one variable is right for both roles.

   3. max-width is 640px, not the design's 480px, so this screen sits in the
      same column as every other page in the app rather than narrower than
      the list it was opened from.

   4. The chevron turns 180°, not 90°. The design assumed a right-pointing
      mark; this app's one chevron (_FoldChevron) points DOWN at rest, and a
      down mark turned 90° points sideways. 180° is "up", which is what an
      open section wants.

   5. .sf-mdet-sum-note--empty and .sf-mdet-flag--blocked are additions: a
      section with nothing in it still shows its header, faded, so the five
      sections always sit in the same order; and a Freeze the server would
      refuse is drawn as a dead button with its reason in the title rather
      than as a gap in the 2×2 grid.

   6. .sf-mdet-actform lets the two POST buttons (Deactivate, Remove weigh-in)
      sit in the layout: they are forms carrying the antiforgery token, not
      bare buttons, and a form must not add a box of its own.

   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-mdet-foot-tag / -credit rules are left out.

   Icons: every .sf-mdet-ico is a slot for an SVG that EXISTS in wwwroot/icons
   — the three activity tiles at 18×18 in the chips, and icon-payments.svg at
   18×18 on Add payment. The design also asked for phone, health, rupee,
   scale, edit, freeze, alert and chevron glyphs, which this app does not
   have; those slots are left out and the text stands on its own.
   ============================================================ */

.sf-mdet {
  /* 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-mdet-wing: linear-gradient(90deg,#43a047,#d4b91e,#f57c00,#e53957,#c2185b,#7e57c2,#5c6f91);

  /* The wash alone now. It was a wash over a photo, with its own cover /
     no-repeat / centre / fixed sizing underneath -- a second full-page image
     with a second scrim over it, drawn on top of the shared one. */
  --sf-mdet-ground:
    linear-gradient(178deg, rgba(255,250,250,.5) 0%, rgba(255,246,240,.42) 40%, rgba(250,244,252,.48) 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-mdet-ink: #2b2a1f; --sf-mdet-muted: #615F4E;
  --sf-mdet-pink: #c2185b; --sf-mdet-pink-deep: #98123f;
  --sf-mdet-card: rgba(255,255,255,.88); --sf-mdet-edge: rgba(255,255,255,.92);
  --sf-mdet-line: rgba(43,42,31,.12);
  --sf-mdet-good: #1d7a3f; --sf-mdet-good-tint: #e3f3e8;
  --sf-mdet-warn: #9a5b00; --sf-mdet-warn-tint: #fdf0d7;
  --sf-mdet-bad: #b3261e; --sf-mdet-bad-deep: #8c1d17; --sf-mdet-bad-tint: #fdecea;
  --sf-mdet-ice: #46587e; --sf-mdet-ice-tint: #e7ecf5;
  --sf-mdet-aer: #0f766e; --sf-mdet-aer-tint: #dff1ef;
  --sf-mdet-yog: #c96a00; --sf-mdet-yog-tint: #fdeedd;
  --sf-mdet-dan: #6d28d9; --sf-mdet-dan-tint: #efe8fa;
  --sf-mdet-radius: 20px; --sf-mdet-tap: 48px;

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

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

/* Inside the shell the layout has already done all of this: .sf-app pads the
   body past both fixed bars and .sf-frame paints the ground, and .sf-content
   supplies the gutter and caps the column at 640px. Repeating any of it would
   double it — the ground most visibly. */
.sf-app .sf-mdet {
  --sf-mdet-top-bar: 0px;
  --sf-mdet-bottom-bar: 0px;
  padding-left: 0; padding-right: 0;
  background: none;
}

.sf-mdet *, .sf-mdet *::before, .sf-mdet *::after { box-sizing: border-box; }
/* A real selector, not :where(): site.css's link colour has weight, and a
   zero-specificity rule loses to it — every member name and figure would go
   link-blue and underlined. Same lesson members.css learnt. */
.sf-mdet a { color: inherit; text-decoration: none; }
.sf-mdet :focus-visible { outline: 2px solid var(--sf-mdet-pink); outline-offset: 2px; }
.sf-mdet-ico { display: inline-block; width: 20px; height: 20px; flex: none; }
.sf-mdet-go { display: inline-block; width: 16px; height: 16px; flex: none; opacity: .7; }

.sf-mdet-back {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  min-height: 44px; margin: -6px 0 -12px; padding: 0 14px 0 10px;
  border-radius: 999px; background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1.5px solid var(--sf-mdet-edge);
  font-size: 14px; font-weight: 800; color: var(--sf-mdet-pink);
  box-shadow: 0 8px 18px -12px rgba(194,24,91,.6);
}
.sf-mdet-back .sf-mdet-go { transform: rotate(180deg); opacity: 1; }

/* shared card shell */
.sf-mdet-card {
  background: linear-gradient(165deg, rgba(255,255,255,.93), rgba(255,246,241,.87) 55%, rgba(252,243,251,.9));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1.5px solid var(--sf-mdet-edge);
  border-radius: var(--sf-mdet-radius);
  box-shadow: 0 16px 32px -16px rgba(194,24,91,.45);
}

/* ---------- HERO: who + membership ---------- */
.sf-mdet-hero { position: relative; overflow: hidden; padding: 19px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sf-mdet-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--sf-mdet-wing); }
.sf-mdet-hero::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240,138,29,.2), transparent 68%); }
.sf-mdet-head { display: flex; align-items: flex-start; gap: 10px; }
.sf-mdet-idty { flex: 1; min-width: 0; }
.sf-mdet-name { position: relative; z-index: 1; width: fit-content; margin: 0 0 0 -3px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; align-self: flex-start; padding: 0 3px; border-radius: 4px;
  background: linear-gradient(120deg, rgba(240,138,29,.24), rgba(194,24,91,.14)) 0 68% / 100% 40% no-repeat; }
.sf-mdet-tel { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 1px; font-size: 14px; font-weight: 600; color: var(--sf-mdet-muted); }
.sf-mdet-tel .sf-mdet-ico { width: 16px; height: 16px; }
.sf-mdet-tel:active { color: var(--sf-mdet-pink); }

.sf-mdet-status { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 11px; border-radius: 999px 4px 999px 4px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; transform: rotate(-1.25deg); }
.sf-mdet-hero--active .sf-mdet-status { background: linear-gradient(120deg,#43a047,#17a89a); color: #fff; box-shadow: 0 5px 12px -8px rgba(23,168,154,.7); }
.sf-mdet-hero--soon .sf-mdet-status { background: linear-gradient(120deg,#f08a1d,#d4b91e); color: #fff; box-shadow: 0 5px 12px -8px rgba(240,138,29,.7); }
.sf-mdet-hero--expired .sf-mdet-status { background: linear-gradient(120deg,#e53957,var(--sf-mdet-bad-deep)); color: #fff; box-shadow: 0 5px 12px -8px rgba(179,38,30,.7); }
.sf-mdet-hero--frozen .sf-mdet-status { background: linear-gradient(120deg,#5c6f91,var(--sf-mdet-ice)); color: #fff; box-shadow: 0 5px 12px -8px rgba(70,88,126,.7); }

/* health flag — surfaced here so it's never buried */
.sf-mdet-flag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; min-height: 30px; padding: 4px 12px; border-radius: 10px; background: var(--sf-mdet-warn-tint); border: 1.5px dashed rgba(154,91,0,.45); color: var(--sf-mdet-warn); font-size: 12.5px; font-weight: 800; }
.sf-mdet-flag .sf-mdet-ico { width: 14px; height: 14px; }

.sf-mdet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-mdet-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 11px; border-radius: 999px; background: rgba(43,42,31,.06); border: 1.5px solid rgba(43,42,31,.08); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.sf-mdet-chip .sf-mdet-ico { width: 18px; height: 18px; }
.sf-mdet-chip--aer { background: var(--sf-mdet-aer-tint); border-color: rgba(15,118,110,.25); color: var(--sf-mdet-aer); }
.sf-mdet-chip--yog { background: var(--sf-mdet-yog-tint); border-color: rgba(201,106,0,.25); color: var(--sf-mdet-yog); }
.sf-mdet-chip--dan { background: var(--sf-mdet-dan-tint); border-color: rgba(109,40,217,.22); color: var(--sf-mdet-dan); }

.sf-mdet-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.sf-mdet-date { border-radius: 16px 6px 16px 6px; background: var(--sf-mdet-aer-tint); padding: 9px 12px 8px; }
.sf-mdet-date--exp { background: var(--sf-mdet-yog-tint); }
.sf-mdet-date dt { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-mdet-muted); }
.sf-mdet-date dd { margin: 1px 0 0; font-size: 16px; font-weight: 800; }
.sf-mdet-date small { display: block; font-size: 12px; font-weight: 700; color: var(--sf-mdet-muted); }
.sf-mdet-hero--soon .sf-mdet-date--exp { background: var(--sf-mdet-warn-tint); } .sf-mdet-hero--soon .sf-mdet-date--exp dd, .sf-mdet-hero--soon .sf-mdet-date--exp small { color: var(--sf-mdet-warn); }
.sf-mdet-hero--expired .sf-mdet-date--exp { background: var(--sf-mdet-bad-tint); } .sf-mdet-hero--expired .sf-mdet-date--exp dd, .sf-mdet-hero--expired .sf-mdet-date--exp small { color: var(--sf-mdet-bad-deep); }
.sf-mdet-hero--frozen .sf-mdet-date--exp { background: var(--sf-mdet-ice-tint); } .sf-mdet-hero--frozen .sf-mdet-date--exp dd, .sf-mdet-hero--frozen .sf-mdet-date--exp small { color: var(--sf-mdet-ice); }

/* status strip inside hero (frozen since / expired ago) */
.sf-mdet-note { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 8px 12px; margin: 0; font-size: 13px; font-weight: 700; }
.sf-mdet-note--ice { background: var(--sf-mdet-ice-tint); color: var(--sf-mdet-ice); }
.sf-mdet-note--bad { background: var(--sf-mdet-bad-tint); color: var(--sf-mdet-bad-deep); }
.sf-mdet-note .sf-mdet-ico { width: 16px; height: 16px; }

/* ---------- MONEY: pending is the hero ---------- */
.sf-mdet-money { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.sf-mdet-money-head { display: flex; align-items: baseline; justify-content: space-between; }
.sf-mdet-money-head h2 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sf-mdet-money-head span { font-size: 12.5px; color: var(--sf-mdet-muted); }

.sf-mdet-pend { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 16px 6px 16px 6px; padding: 11px 14px; }
.sf-mdet-pend-label { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sf-mdet-pend-num { font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sf-mdet-pend small { display: block; font-size: 12px; font-weight: 700; opacity: .85; text-transform: none; letter-spacing: 0; }
.sf-mdet-pend--due { background: linear-gradient(120deg, var(--sf-mdet-bad-tint), #ffe3df); color: var(--sf-mdet-bad-deep); border: 1.5px dashed rgba(179,38,30,.5); }
.sf-mdet-pend--clear { background: linear-gradient(120deg, var(--sf-mdet-good-tint), #dcf5e9); color: var(--sf-mdet-good); border: 1.5px solid rgba(29,122,63,.25); }

.sf-mdet-rows { display: flex; flex-direction: column; margin: 0; }
.sf-mdet-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 34px; padding: 5px 2px; border-top: 1px solid var(--sf-mdet-line); font-size: 14px; }
.sf-mdet-kv:first-child { border-top: 0; }
.sf-mdet-kv dt { margin: 0; color: var(--sf-mdet-muted); font-weight: 600; }
.sf-mdet-kv dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.sf-mdet-kv--good dd { color: var(--sf-mdet-good); }
/* a hint under a money or section list — same tone as the item sub-lines */
.sf-mdet-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--sf-mdet-muted); text-wrap: pretty; }

/* ---------- ACTIONS ---------- */
.sf-mdet-actions { display: flex; flex-direction: column; gap: 8px; }
.sf-mdet-primary {
  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-mdet-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-mdet-primary:active { transform: translateY(1px); filter: brightness(.95); }
.sf-mdet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-mdet-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sf-mdet-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--sf-mdet-tap); padding: 6px 10px;
  border: 1.5px solid var(--sf-mdet-edge); border-radius: 14px; cursor: pointer;
  background: var(--sf-mdet-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px -14px rgba(194,24,91,.5);
  color: var(--sf-mdet-ink); font-family: inherit; font-size: 14px; font-weight: 800;
}
.sf-mdet-grid--3 .sf-mdet-btn { font-size: 13px; gap: 5px; }
.sf-mdet-btn:active { filter: brightness(.96); }
.sf-mdet-btn .sf-mdet-ico { width: 18px; height: 18px; color: var(--sf-mdet-pink); }
.sf-mdet-btn--ice { color: var(--sf-mdet-ice); } .sf-mdet-btn--ice .sf-mdet-ico { color: var(--sf-mdet-ice); }
/* Freeze the server would refuse: still in its grid slot, faded, the reason in
   its title, so the 2×2 block never has a hole in it (note 5). */
.sf-mdet-btn--blocked { opacity: .55; cursor: default; }
.sf-mdet-danger {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 46px; border: 1.5px solid rgba(179,38,30,.4); border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--sf-mdet-bad); font-family: inherit; font-size: 14px; font-weight: 800;
}
.sf-mdet-danger:active { background: var(--sf-mdet-bad-tint); }
/* a POST wrapped in a form adds no box of its own (note 6) */
.sf-mdet-actform { margin: 0; display: contents; }

/* ---------- COLLAPSED SECTIONS ---------- */
/* each section takes one wing colour on its left edge, in DOM order */
.sf-mdet-sec { overflow: hidden; --sf-mdet-sechue: #17a89a; border-left: 5px solid var(--sf-mdet-sechue); }
.sf-mdet-sec:nth-of-type(2) { --sf-mdet-sechue: #f08a1d; }
.sf-mdet-sec:nth-of-type(3) { --sf-mdet-sechue: #e53957; }
.sf-mdet-sec:nth-of-type(4) { --sf-mdet-sechue: #7e57c2; }
.sf-mdet-sec:nth-of-type(5) { --sf-mdet-sechue: #5c6f91; }
.sf-mdet-sec:nth-of-type(6) { --sf-mdet-sechue: #43a047; }
.sf-mdet-sec:nth-of-type(7) { --sf-mdet-sechue: #c2185b; }
.sf-mdet-sum { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 14px 8px 12px; cursor: pointer; list-style: none; }
.sf-mdet-sum::-webkit-details-marker { display: none; }
.sf-mdet-sum::marker { content: ""; }
.sf-mdet-sum:focus-visible { outline: 2px solid var(--sf-mdet-pink); outline-offset: -2px; }
.sf-mdet-sum-main { flex: 1; min-width: 0; }
.sf-mdet-sum-title { display: block; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--sf-mdet-sechue) 72%, var(--sf-mdet-ink)); }
.sf-mdet-sum-note { display: block; font-size: 13px; font-weight: 700; color: var(--sf-mdet-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-mdet-sum-note strong { color: var(--sf-mdet-ink); }
.sf-mdet-sum-note .is-due { color: var(--sf-mdet-bad); }
.sf-mdet-sum-note--empty { font-weight: 600; opacity: .8; }
.sf-mdet-sum .sf-mdet-go { transition: transform .15s; }
/* 180°, not the design's 90° — see note 4 */
.sf-mdet-sec[open] .sf-mdet-sum .sf-mdet-go { transform: rotate(180deg); }
.sf-mdet-sec[open] .sf-mdet-sum { border-bottom: 1px dashed color-mix(in srgb, var(--sf-mdet-sechue) 40%, transparent); background: color-mix(in srgb, var(--sf-mdet-sechue) 7%, transparent); }
.sf-mdet-body { padding: 4px 14px 12px; }
.sf-mdet-body > .sf-mdet-hint:first-child { margin-top: 6px; }

/* weight trio */
.sf-mdet-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 0 4px; margin: 0; }
.sf-mdet-stat { border-radius: 14px 5px 14px 5px; background: var(--sf-mdet-dan-tint); padding: 8px 10px 7px; }
.sf-mdet-stat:nth-child(2) { background: var(--sf-mdet-yog-tint); }
.sf-mdet-stat--drop { background: var(--sf-mdet-good-tint); }
.sf-mdet-stat--gain { background: var(--sf-mdet-warn-tint); }
.sf-mdet-stat dt { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-mdet-muted); }
.sf-mdet-stat dd { margin: 1px 0 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-mdet-stat--drop dd { color: var(--sf-mdet-good); }
.sf-mdet-stat--gain dd { color: var(--sf-mdet-warn); }

/* generic item rows inside bodies */
.sf-mdet-item { padding: 9px 0 8px; border-top: 1px solid var(--sf-mdet-line); }
.sf-mdet-item:first-child { border-top: 0; }
.sf-mdet-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sf-mdet-item-top strong { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-mdet-item-top span { font-size: 13px; font-weight: 700; color: var(--sf-mdet-muted); white-space: nowrap; }
.sf-mdet-item-sub { margin: 1px 0 0; font-size: 12.5px; color: var(--sf-mdet-muted); }
.sf-mdet-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; border-radius: 999px 3px 999px 3px; background: var(--sf-mdet-dan-tint); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sf-mdet-dan); vertical-align: 2px; margin-left: 6px; }
/* ---------- the attendance calendar under each membership period ----------

   SEVEN COLUMNS THAT CANNOT OVERFLOW. The grid is 7 fractions of whatever it is
   given, not seven fixed squares, so at 360px -- where the column is about
   300px inside the card -- each cell lands near 40px and the row still fits.
   A fixed width would have been 7 x 40 + gaps = 292px on a good day and a
   horizontal scrollbar on a narrow one.

   aspect-ratio keeps them square as they flex, so the colours stay large enough
   to tell apart rather than becoming thin bands.

   COLOUR IS NEVER THE ONLY SIGNAL. Every square carries its date and status in
   an aria-label and a title, and a tap prints the same sentence in the note
   below. These rules only decide what it looks like. */

.sf-mdet-cal { margin-top: 10px; }

/* the legend, above the grid so the colours are explained before they are met */
.sf-mdet-cal-key {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  list-style: none; margin: 0 0 8px; padding: 0;
  font-size: 11px; font-weight: 700; color: var(--sf-mdet-muted);
}
.sf-mdet-cal-key li { display: inline-flex; align-items: center; gap: 5px; }
.sf-mdet-cal-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.sf-mdet-cal-dot--in { background: var(--sf-mdet-good); }
.sf-mdet-cal-dot--out { background: var(--sf-mdet-bad); }
.sf-mdet-cal-dot--visit { background: var(--sf-mdet-pink); }
.sf-mdet-cal-dot--off { background: rgba(43,42,31,.16); }
.sf-mdet-cal-dot--none { background: #fff; border: 1.5px dashed rgba(43,42,31,.3); }

.sf-mdet-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.sf-mdet-cal-head {
  text-align: center; padding-bottom: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: var(--sf-mdet-muted);
}
/* Saturday and Sunday, quieter: no class ever runs on them. */
.sf-mdet-cal-head--end { opacity: .55; }

/* Padding before the period starts and after it ends. Occupies its column and
   draws nothing, which is what keeps the dates under the right weekdays. */
.sf-mdet-cal-pad { aspect-ratio: 1; }

.sf-mdet-cal-day {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; min-width: 0; padding: 0;
  border: 1.5px solid transparent; border-radius: 7px;
  font-family: inherit; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sf-mdet-cal-day:focus-visible { outline: 2px solid var(--sf-mdet-pink); outline-offset: 1px; }

/* Green: present in their own class. */
.sf-mdet-cal-day--in { background: var(--sf-mdet-good); border-color: var(--sf-mdet-good); color: #fff; }

/* Red: a class ran and they were not in it. */
.sf-mdet-cal-day--out { background: var(--sf-mdet-bad); border-color: var(--sf-mdet-bad); color: #fff; }

/* Pink: present, but in somebody else's class. */
.sf-mdet-cal-day--visit { background: var(--sf-mdet-pink); border-color: var(--sf-mdet-pink); color: #fff; }

/* Grey: a weekend, a cancelled class, or a frozen day. Nothing was missed. */
.sf-mdet-cal-day--off { background: rgba(43,42,31,.09); border-color: transparent; color: var(--sf-mdet-muted); }

/* Outlined: a future day, or a past one whose register was never saved. This
   is deliberately NOT red -- an unsaved register is the studio's paperwork,
   not the member's absence. */
.sf-mdet-cal-day--none { background: #fff; border-color: rgba(43,42,31,.22); border-style: dashed; color: var(--sf-mdet-muted); }

/* Where a tapped square says its piece. Empty until one is, and it keeps its
   height so the counts below do not jump when it fills. */
.sf-mdet-cal-note {
  min-height: 1.5em; margin: 8px 0 0;
  font-size: 12px; font-weight: 700; color: var(--sf-mdet-ink); text-wrap: pretty;
}
.sf-mdet-cal-note:empty::before { content: "Tap a day for its class."; color: var(--sf-mdet-muted); font-weight: 400; }

/* The counts, in the same colours and the same order as the legend. */
.sf-mdet-cal-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.sf-mdet-cal-count {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sf-mdet-cal-count--in { background: var(--sf-mdet-good-tint); color: var(--sf-mdet-good); }
.sf-mdet-cal-count--out { background: var(--sf-mdet-bad-tint); color: var(--sf-mdet-bad); }
.sf-mdet-cal-count--visit { background: #fce8f0; color: var(--sf-mdet-pink); }

.sf-mdet-cal-empty { margin: 6px 0 0; font-size: 12px; color: var(--sf-mdet-muted); }

/* the owner's Remove on a weigh-in — a quiet text control on the row */
.sf-mdet-remove { border: 0; background: transparent; padding: 0 2px; min-height: 32px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--sf-mdet-bad); }

/* audit lines — OWNER ONLY: the view omits these nodes for instructors */
.sf-mdet-audit { margin: 2px 0 0; font-size: 11.5px; color: var(--sf-mdet-muted); opacity: .85; }
/* the one audit line that lives outside a section, last on the page */
.sf-mdet-auditbox { text-align: center; padding: 2px 8px 0; }

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

@media (prefers-reduced-motion: reduce) {
  .sf-mdet-sum .sf-mdet-go { transition: none; }
}