/* ——— Member-area extras: Billing, Membership, Events ——— */

/* Shared section header on member sub-pages */
.member-section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.member-section-head .lhs h2 { font-family: var(--serif); font-weight: 300; font-size: 28px; margin: 0; color: var(--ink-900); }
.member-section-head .lhs h2 em { font-style: italic; color: var(--phase-1); }
.member-section-head .lhs .sub { font-family: var(--serif); font-size: 15px; color: var(--ink-500); margin-top: 4px; max-width: 50ch; line-height: 1.5; }
.member-section-head .rhs { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; border: 1px solid var(--ink-900); border-radius: 999px; background: transparent; color: var(--ink-900); cursor: pointer; transition: background 250ms, color 250ms; }
.btn-pill:hover { background: var(--ink-900); color: var(--sand-50); }
.btn-pill.filled { background: var(--phase-1); border-color: var(--phase-1); color: var(--sand-50); }
.btn-pill.filled:hover { background: var(--ink-900); border-color: var(--ink-900); }
.btn-pill.ghost { border-color: var(--sand-400); color: var(--ink-700); }
.btn-pill.ghost:hover { background: var(--sand-200); color: var(--ink-900); }
.btn-pill.danger { border-color: var(--phase-2); color: var(--phase-2); }
.btn-pill.danger:hover { background: var(--phase-2); color: var(--sand-50); }

/* ——— BILLING ——— */
.bill-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-bottom: 26px; }
.bill-hero {
  position: relative; overflow: hidden;
  background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 8px;
  padding: 36px 38px;
}
.bill-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 10%, var(--phase-1-lo), transparent 55%); pointer-events: none; }
.bill-hero > * { position: relative; }
.bill-hero .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--phase-1); }
.bill-hero .amount { font-family: var(--serif); font-weight: 300; font-size: clamp(54px, 6vw, 84px); line-height: 1; letter-spacing: -0.02em; margin: 14px 0 6px; color: var(--ink-900); }
.bill-hero .amount em { font-style: italic; color: var(--phase-1); }
.bill-hero .amount .cents { font-size: 38%; vertical-align: 12px; color: var(--ink-500); }
.bill-hero .due { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-700); }
.bill-hero .due strong { font-style: normal; font-weight: 400; color: var(--ink-900); }
.bill-hero .actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.bill-hero .breakdown { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sand-300); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.bill-hero .breakdown .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.bill-hero .breakdown .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); }
.bill-hero .breakdown .v { font-family: var(--serif); font-size: 16px; color: var(--ink-900); }

.bill-side { display: flex; flex-direction: column; gap: 16px; }
.bill-card { background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 8px; padding: 22px 24px; }
.bill-card h3 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 14px; }
.bill-card h3 em { font-style: normal; color: var(--phase-1); }

.method-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 14px 12px; border: 1px solid var(--sand-300); border-radius: 6px; background: var(--sand-100); margin-bottom: 8px; cursor: pointer; transition: border-color 200ms, background 200ms; }
.method-row:hover { border-color: var(--phase-1); }
.method-row.primary { border-color: var(--phase-1); background: color-mix(in oklab, var(--phase-1), transparent 95%); }
.method-row .brand { width: 44px; height: 28px; border-radius: 3px; background: var(--ink-900); color: var(--sand-50); display: grid; place-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; }
.method-row .brand.visa { background: #1a1f71; }
.method-row .brand.mc   { background: #eb001b; }
.method-row .brand.amex { background: #2e77bb; }
.method-row .brand.bank { background: var(--phase-3); }
.method-row .brand.hsa  { background: var(--phase-1); }
.method-row .label { font-family: var(--serif); font-size: 16px; color: var(--ink-900); }
.method-row .label .meta { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink-500); text-transform: uppercase; margin-top: 2px; }
.method-row .badge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--phase-1); color: var(--sand-50); }

.coverage-bar { height: 8px; background: var(--sand-300); border-radius: 4px; overflow: hidden; display: flex; }
.coverage-bar .seg { height: 100%; }
.coverage-bar .ins { background: var(--phase-3); }
.coverage-bar .hsa { background: var(--phase-1); }
.coverage-bar .ootp { background: var(--phase-2); }
.coverage-key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); }
.coverage-key .k { display: inline-flex; align-items: center; gap: 6px; }
.coverage-key .k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink-300)); }

.invoice-table { width: 100%; border-collapse: collapse; }
.invoice-table th { text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-500); font-weight: 500; padding: 12px 14px; border-bottom: 1px solid var(--sand-300); background: var(--sand-100); }
.invoice-table td { padding: 16px 14px; border-bottom: 1px solid var(--sand-300); font-size: 14px; color: var(--ink-900); }
.invoice-table tr:hover td { background: var(--sand-100); }
.invoice-table .pillar-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); }
.invoice-table .pillar-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--phase-1)); }
.invoice-table .amt { font-family: var(--serif); font-size: 16px; text-align: right; }
.invoice-table .status { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.invoice-table .status.paid { background: color-mix(in oklab, var(--phase-1), transparent 88%); color: var(--phase-1); }
.invoice-table .status.due  { background: color-mix(in oklab, var(--phase-2), transparent 85%); color: var(--phase-2); }
.invoice-table .status.proc { background: var(--sand-200); color: var(--ink-500); }

.summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.summary-card { padding: 22px 22px; background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 6px; }
.summary-card .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); }
.summary-card .v { font-family: var(--serif); font-weight: 300; font-size: 30px; color: var(--ink-900); margin-top: 6px; line-height: 1.1; }
.summary-card .v em { font-style: italic; color: var(--phase-1); }
.summary-card .delta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--phase-1); margin-top: 4px; text-transform: uppercase; }
.summary-card .delta.minus { color: var(--phase-2); }

/* Pay modal */
.modal-shade { position: fixed; inset: 0; background: rgba(26,26,26,0.42); backdrop-filter: blur(6px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 28px; }
.modal-shade.open { display: flex; animation: fadeIn 250ms ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 8px; padding: 36px 38px; max-width: 480px; width: 100%; position: relative; box-shadow: 0 40px 100px -30px rgba(26,26,26,0.4); }
.modal h3 { font-family: var(--serif); font-weight: 300; font-size: 30px; margin: 0 0 8px; color: var(--ink-900); }
.modal h3 em { font-style: italic; color: var(--phase-1); }
.modal p { font-family: var(--serif); font-size: 16px; color: var(--ink-500); margin: 0 0 22px; line-height: 1.5; }
.modal .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-500); }
.modal input { font: inherit; font-size: 15px; padding: 12px 14px; background: var(--sand-100); border: 1px solid var(--sand-300); border-radius: 4px; outline: none; transition: border-color 200ms; }
.modal input:focus { border-color: var(--phase-1); background: #fff; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.modal .close { position: absolute; top: 18px; right: 22px; background: transparent; border: 0; font-size: 22px; color: var(--ink-500); cursor: pointer; }
.modal .close:hover { color: var(--ink-900); }
.modal .total { padding: 16px 18px; background: var(--sand-100); border-radius: 6px; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.modal .total .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-500); }
.modal .total .v { font-family: var(--serif); font-size: 28px; color: var(--ink-900); }

/* ——— MEMBERSHIP ——— */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.tier-card {
  position: relative; overflow: hidden;
  background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 8px;
  padding: 32px 30px 28px;
  cursor: pointer;
  transition: transform 350ms, border-color 250ms, box-shadow 350ms;
  display: flex; flex-direction: column;
}
.tier-card::before { content: ''; position: absolute; inset: 0; background: var(--lo, transparent); opacity: 0.5; pointer-events: none; }
.tier-card > * { position: relative; }
.tier-card:hover { transform: translateY(-3px); border-color: var(--c); }
.tier-card.current { border: 1.5px solid var(--c); box-shadow: 0 22px 50px -25px color-mix(in oklab, var(--c), transparent 60%); }
.tier-card .badge-curr { position: absolute; top: 18px; right: 22px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c); display: flex; align-items: center; gap: 6px; }
.tier-card .badge-curr::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: pulseMarker 2.4s ease-in-out infinite; }
.tier-card .roman { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--c); }
.tier-card h3 { font-family: var(--serif); font-weight: 300; font-size: 28px; margin: 4px 0 8px; color: var(--ink-900); }
.tier-card .tag { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-500); margin-bottom: 18px; }
.tier-card .price { font-family: var(--serif); font-weight: 300; font-size: 44px; color: var(--ink-900); line-height: 1; }
.tier-card .price em { font-style: italic; color: var(--c); }
.tier-card .price .per { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); margin-left: 6px; }
.tier-card ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.tier-card ul li { font-size: 14px; color: var(--ink-700); line-height: 1.5; padding-left: 22px; position: relative; }
.tier-card ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 1px; background: var(--c); }

/* Switch-to / Your-plan button.
   `margin-top: auto` pins it to the bottom so the buttons line up across cards
   of unequal height — but auto collapses to ZERO the moment the feature list
   fills the card, which is why it sat welded to the last bullet. The ul's
   bottom margin is the floor: it can't collapse, so there's always air above
   the button whether or not `auto` has any slack to give. */
.tier-card ul { margin-bottom: 24px; }
.tier-card .cta { margin-top: auto; }

/* ── The Wellness Network ──────────────────────────────────────────────────
   Layout was inline in membership/page.tsx (incl. a hardcoded 1.5fr 1fr grid),
   so no media query could reach it — it stayed 2-up at 390px and clipped.
   ───────────────────────────────────────────────────────────────────────── */
.wnet-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: stretch; }
.wnet-hero { position: relative; overflow: hidden; border-radius: 6px; border: 1px solid var(--sand-300); background: var(--sand-50); padding: 30px 32px; }
.wnet-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 90% 10%, var(--phase-2-lo), transparent 60%); }
.wnet-hero-in { position: relative; }
.wnet-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--phase-2); }
.wnet-h { font-family: var(--serif); font-weight: 300; font-size: 30px; color: var(--ink-900); margin: 10px 0; }
.wnet-h em { font-style: italic; color: var(--phase-2); }
.wnet-p { font-family: var(--serif); font-size: 15px; color: var(--ink-500); line-height: 1.6; max-width: 48ch; margin: 0 0 22px; }
.wnet-stats { display: flex; gap: 34px; margin-bottom: 24px; }
.wnet-stat .n { font-family: var(--serif); font-size: 30px; color: var(--ink-900); }
.wnet-stat .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); margin-top: 2px; }
.wnet-cta { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.wnet-cards { display: flex; flex-direction: column; gap: 12px; }
.wnet-card { flex: 1; border-radius: 6px; border: 1px solid var(--sand-300); background: var(--sand-50); padding: 18px 20px; }
.wnet-card .tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.wnet-card .title { font-family: var(--serif); font-size: 18px; color: var(--ink-900); margin-top: 5px; }
.wnet-card .sub { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-500); margin-top: 5px; }

.billing-cycle { display: inline-flex; padding: 4px; background: var(--sand-200); border-radius: 999px; gap: 2px; }
.billing-cycle button { padding: 8px 18px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; border: 0; background: transparent; color: var(--ink-500); border-radius: 999px; cursor: pointer; transition: background 200ms, color 200ms; }
.billing-cycle button.on { background: var(--ink-900); color: var(--sand-50); }
.billing-cycle .save { font-family: var(--mono); font-size: 8.5px; padding: 2px 6px; margin-left: 4px; background: var(--phase-1); color: var(--sand-50); border-radius: 999px; }

.add-ons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.add-on { padding: 18px 20px; background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 6px; cursor: pointer; transition: border-color 200ms, background 200ms; position: relative; }
.add-on.on { border-color: var(--phase-1); background: color-mix(in oklab, var(--phase-1), transparent 95%); }
.add-on .toggle { position: absolute; top: 16px; right: 16px; width: 32px; height: 18px; border-radius: 999px; background: var(--sand-300); transition: background 250ms; }
.add-on .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--sand-50); transition: left 250ms; }
.add-on.on .toggle { background: var(--phase-1); }
.add-on.on .toggle::after { left: 16px; }
.add-on .label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); }
.add-on h4 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin: 4px 0 6px; color: var(--ink-900); padding-right: 40px; }
.add-on p { font-size: 13px; color: var(--ink-500); margin: 0 0 12px; line-height: 1.5; }
.add-on .price { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--phase-1); }

.benefit-track { background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 8px; padding: 26px 30px; }
.benefit-row { display: grid; grid-template-columns: 200px 1fr 80px; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--sand-200); }
.benefit-row:last-child { border-bottom: 0; }
.benefit-row .k { font-family: var(--serif); font-size: 16px; color: var(--ink-900); }
.benefit-row .k .sub { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); margin-top: 2px; }
.benefit-row .bar { height: 6px; background: var(--sand-200); border-radius: 3px; overflow: hidden; }
.benefit-row .bar > span { display: block; height: 100%; background: var(--phase-1); border-radius: 3px; }
.benefit-row .v { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-700); text-align: right; }
.benefit-row .v em { font-style: normal; color: var(--phase-1); }

.danger-zone { margin-top: 28px; padding: 22px 26px; border: 1px dashed var(--phase-2); border-radius: 8px; background: color-mix(in oklab, var(--phase-2), transparent 96%); display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.danger-zone h4 { font-family: var(--serif); font-size: 18px; margin: 0 0 4px; color: var(--ink-900); }
.danger-zone p { font-size: 13.5px; color: var(--ink-500); margin: 0; max-width: 60ch; line-height: 1.5; }

/* ——— EVENTS ——— */
.events-toolbar { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 8px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid var(--sand-400); border-radius: 999px; background: transparent; color: var(--ink-500); cursor: pointer; transition: all 200ms; }
.chip:hover { color: var(--ink-900); border-color: var(--ink-700); }
.chip.on { background: var(--ink-900); color: var(--sand-50); border-color: var(--ink-900); }
.chip.recovery.on { background: var(--phase-1); border-color: var(--phase-1); }
.chip.network.on  { background: var(--phase-3); border-color: var(--phase-3); }
.chip.class.on    { background: var(--phase-2); border-color: var(--phase-2); }
.chip.alumni.on   { background: var(--phase-4); border-color: var(--phase-4); }

/* View-range dropdown — replaces the 3-button pill toggle. Native
   <select> styled to match the rest of the Atlas chrome (sand pill,
   mono uppercase). A small SVG chevron is overlaid via padding-right
   + background-image so the affordance is visible across browsers. */
.view-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--sand-50);
  border: 1px solid var(--sand-300);
  padding: 10px 38px 10px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color 180ms, background-color 180ms;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'><path d='M1 1l5 5 5-5' stroke='%231b2a38' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}
.view-select:hover { border-color: var(--ink-700); background-color: var(--sand-100); }
.view-select:focus { outline: 0; border-color: var(--ink-900); }

.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 26px; }
.day-pill { padding: 14px 8px; text-align: center; background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 6px; cursor: pointer; transition: all 200ms; position: relative; }
.day-pill:hover { border-color: var(--phase-1); }
.day-pill.on { background: var(--ink-900); border-color: var(--ink-900); color: var(--sand-50); }
.day-pill.today::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--phase-1); }
.day-pill.on.today::after { background: var(--sand-50); }
.day-pill .dow { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); }
.day-pill.on .dow { color: var(--sand-300); }
.day-pill .num { font-family: var(--serif); font-size: 22px; margin-top: 4px; font-weight: 300; }
.day-pill .dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--phase-2); margin: 6px auto 0; opacity: 0; }
.day-pill.has .dot { opacity: 1; }

.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-card {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 22px;
  padding: 20px 24px; background: var(--sand-50); border: 1px solid var(--sand-300); border-radius: 8px;
  position: relative; overflow: hidden;
  transition: transform 350ms, border-color 250ms;
}
.event-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.event-card:hover { transform: translateX(2px); border-color: var(--c); }
.event-card.full { opacity: 0.62; }
.event-card .when { padding-left: 8px; }
.event-card .when .time { font-family: var(--serif); font-size: 22px; color: var(--ink-900); line-height: 1; }
.event-card .when .dur { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); margin-top: 6px; }
.event-card .body .kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c); margin-bottom: 4px; }
.event-card .body h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 6px; color: var(--ink-900); }
.event-card .body p { font-size: 14px; color: var(--ink-500); margin: 0 0 10px; line-height: 1.5; max-width: 64ch; }
.event-card .body .meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); }
.event-card .body .meta .who { color: var(--ink-700); }
.event-card .body .meta .loc::before { content: '· '; color: var(--ink-300); }
.event-card .body .meta .seats::before { content: '· '; color: var(--ink-300); }
.event-card .rhs { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 130px; }
.event-card .rhs .seats-bar { width: 110px; height: 4px; background: var(--sand-300); border-radius: 2px; overflow: hidden; }
.event-card .rhs .seats-bar > span { display: block; height: 100%; background: var(--c); border-radius: 2px; }
.event-card .rhs .rsvp { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--c); background: transparent; color: var(--c); cursor: pointer; transition: all 200ms; }
.event-card .rhs .rsvp:hover { background: var(--c); color: var(--sand-50); }
.event-card .rhs .rsvp.on { background: var(--c); color: var(--sand-50); }
.event-card .rhs .rsvp.full { background: var(--sand-300); border-color: var(--sand-300); color: var(--ink-500); cursor: not-allowed; }

.event-card .ribbon-tag { position: absolute; top: 12px; right: 16px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in oklab, var(--c), transparent 88%); color: var(--c); }
/* When the card has an Arc-aligned ribbon, push the RSVP column down so the
   button doesn't collide with the absolutely-positioned ribbon. */
.event-card:has(.ribbon-tag) .rhs { padding-top: 26px; }

.empty-day { padding: 60px 30px; text-align: center; background: var(--sand-50); border: 1px dashed var(--sand-400); border-radius: 8px; }
.empty-day .glyph { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--sand-400); display: inline-grid; place-items: center; font-family: var(--serif); font-size: 22px; color: var(--ink-500); margin-bottom: 16px; }

/* ──────────────────────────────────────────────────────────────────
   Responsive: Billing / Membership / Events member-area pages.
   The original layouts assumed desktop; collapse to 1-col + tighten
   chrome at tablet and phone widths. The inline padding on the .page
   section in each HTML file is overridden via !important.
   ─────────────────────────────────────────────────────────────────── */

/* Tablet portrait (≤900px) — page gutter + multi-col grids start to
   collapse. Sidebar narrows to 180px from the global portal.css
   ≤900px block, so main-column width is roughly 540px on iPad
   portrait — too narrow for the 1.4fr/1fr billing split or the
   3-col event-card grid. */
@media (max-width: 900px) {
  .page[style] { padding: 24px 22px 60px !important; }
  .bill-grid { grid-template-columns: 1fr; gap: 16px; }
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .member-section-head { gap: 14px; margin-bottom: 22px; }
  .member-section-head .lhs h2 { font-size: 24px; }
  .bill-hero { padding: 28px 26px; }
  .bill-hero .breakdown { grid-template-columns: 1fr 1fr; gap: 10px 22px; }

  /* Event cards: the desktop grid (92px when + 1fr body + auto rhs)
     squeezes the body to ~230px on iPad portrait. Stack instead:
     row 1 = when + body (2-col), row 2 = rhs (full-width).
     The ribbon-tag goes inline at the top so it doesn't collide. */
  .event-card { grid-template-columns: 92px 1fr; gap: 14px 22px; padding: 22px 24px; }
  .event-card .rhs {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: space-between;
    min-width: 0; padding-top: 10px; margin-top: 4px;
    border-top: 1px solid var(--sand-300);
  }
  .event-card .rhs .seats-bar { width: 110px; }
  .event-card:has(.ribbon-tag) .rhs { padding-top: 10px; }
  .event-card .ribbon-tag { top: 16px; right: 20px; }
}

/* Phone (≤500px) — everything is single column; tap targets stay
   ≥40px; invoice table gets a horizontal scroll wrapper since
   collapsing tabular rows to cards would lose the columnar reading. */
@media (max-width: 500px) {
  .page[style] { padding: 20px 14px 56px !important; }

  /* Billing */
  .bill-hero { padding: 22px 18px; border-radius: 6px; }
  .bill-hero .amount { font-size: clamp(40px, 14vw, 56px); margin: 10px 0 6px; }
  .bill-hero .due { font-size: 15px; }
  .bill-hero .actions { gap: 8px; margin-top: 18px; }
  .bill-hero .actions .btn-pill { padding: 9px 14px; font-size: 9.5px; letter-spacing: 0.2em; }
  .bill-hero .breakdown { grid-template-columns: 1fr; gap: 6px 0; margin-top: 22px; padding-top: 18px; }
  .bill-hero .breakdown .row { padding: 6px 0; }
  .bill-hero .breakdown .v { font-size: 15px; }

  /* breakdown: one line per row.
     The rows were rendering two-up in a 1fr 1fr grid, so "Member responsibility"
     and its figure were fighting over ~170px and wrapping. Single column, and
     neither the label nor the figure is allowed to wrap: the label shrinks (and
     ellipsises if it must), the figure never does — it's the number you actually
     came to read. */
  .bill-hero .breakdown .row { flex-wrap: nowrap; align-items: baseline; }
  .bill-hero .breakdown .k {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
  }
  .bill-hero .breakdown .v {
    white-space: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .bill-card { padding: 18px 16px; border-radius: 6px; }
  .method-row { padding: 12px 10px; gap: 10px; grid-template-columns: 40px 1fr auto; }
  .method-row .brand { width: 40px; height: 26px; font-size: 8.5px; }
  .method-row .label { font-size: 15px; }
  .method-row .label .meta { font-size: 9px; }
  .method-row .badge { font-size: 8.5px; padding: 3px 7px; letter-spacing: 0.16em; }
  .coverage-key { gap: 10px 14px; font-size: 9px; }

  /* Summary cards (YTD totals) — 2-col was still cramped, go single. */
  .summary-cards { grid-template-columns: 1fr; gap: 8px; }
  .summary-card { padding: 16px 18px; }
  .summary-card .v { font-size: 24px; }

  /* Invoice ledger — collapse the table into stacked row-cards so it
     reads naturally on phone. Each row becomes a 2-col grid:
       row 1: date (left)        · status pill (right)
       row 2: service title (full width)
       row 3: pillar tag (left)  · amount (right)
     The Provider column is hidden — secondary info that doesn't fit
     the 380px-wide form factor and is recoverable on tap-through. */
  .invoice-table-wrap { overflow: visible; padding: 0 6px 6px; }

  /* The ledger sits directly inside .bill-card, which ActivityTable sets to
     padding:0 INLINE (so CSS can't pad the card itself — inline wins). Pad the
     table instead. Deliberately on the <table>, not the <tbody>: table-section
     elements ignore padding in some engines even when you flip their display,
     whereas the table is already forced to display:block here, so padding on it
     is reliable. border-box so the 100% width doesn't overflow the card. */
  .invoice-table {
    min-width: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px 16px;
  }
  .invoice-table thead { display: none; }
  .invoice-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .invoice-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 6px;
    padding: 14px 16px;
    background: var(--sand-100);
    border: 1px solid var(--sand-300);
    border-radius: 6px;
  }
  .invoice-table tr:hover td { background: transparent; }
  .invoice-table td { display: block; padding: 0; border: 0; font-size: 14px; }
  .invoice-table td:nth-child(1) {
    grid-column: 1; grid-row: 1;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500);
    align-self: center;
  }
  .invoice-table td:nth-child(2) { grid-column: 1; grid-row: 3; align-self: center; }
  .invoice-table td:nth-child(3) {
    grid-column: 1 / -1; grid-row: 2;
    font-family: var(--serif); font-size: 16px; color: var(--ink-900);
  }
  .invoice-table td:nth-child(4) { display: none; }
  .invoice-table td.amt {
    grid-column: 2; grid-row: 3;
    text-align: right; font-size: 15px; align-self: center;
  }
  .invoice-table td:nth-child(6) { grid-column: 2; grid-row: 1; text-align: right; align-self: center; }

  /* The Wellness Network — stack it, and stop the stats row from clipping.
     Three stats at 30px with 34px gaps do not fit 390px. Spread them edge to
     edge, shrink the figures, and let the labels shrink rather than push the
     row wider than the card. */
  .wnet-grid { grid-template-columns: 1fr; gap: 12px; }
  .wnet-hero { padding: 22px 20px; }
  .wnet-h { font-size: 25px; margin: 8px 0; }
  .wnet-p { font-size: 14px; margin-bottom: 18px; max-width: none; }
  .wnet-stats {
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .wnet-stat { min-width: 0; flex: 1; }
  .wnet-stat .n { font-size: 24px; line-height: 1.1; }
  .wnet-stat .k { font-size: 8px; letter-spacing: 0.12em; }
  .wnet-cta { width: 100%; justify-content: center; }
  .wnet-card { padding: 14px 16px; }
  .wnet-card .title { font-size: 16px; }

  /* Section head */
  .member-section-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .member-section-head .lhs h2 { font-size: 22px; }
  .member-section-head .lhs .sub { font-size: 14px; }
  .member-section-head .rhs { width: 100%; }
  .member-section-head .rhs .btn-pill { flex: 1; padding: 10px 12px; font-size: 9.5px; letter-spacing: 0.18em; justify-content: center; }

  /* Events: day strip wraps horizontally + scrolls. */
  .day-strip { grid-template-columns: repeat(7, minmax(48px, 1fr)); gap: 4px; overflow-x: auto; }
  .day-pill { padding: 10px 4px; }
  .day-pill .num { font-size: 18px; }

  /* Filter chips */
  .events-toolbar { flex-wrap: wrap; gap: 10px; }
  .filter-chips { gap: 6px; }
  .chip { padding: 7px 12px; font-size: 9px; letter-spacing: 0.18em; }

  /* Event cards: stack the when/body/rhs columns. */
  .event-card { grid-template-columns: 1fr; gap: 12px; padding: 16px 16px; border-radius: 6px; }
  .event-card .when { padding-left: 0; display: flex; align-items: baseline; gap: 12px; }
  .event-card .when .time { font-size: 18px; }
  .event-card .when .dur { margin-top: 0; }
  .event-card .body h3 { font-size: 19px; }
  .event-card .rhs { flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; gap: 14px; }
  .event-card .rhs .seats-bar { width: 88px; }
  .event-card .rhs .rsvp { padding: 8px 14px; font-size: 9.5px; }
  .event-card:has(.ribbon-tag) .rhs { padding-top: 0; }
  .event-card .ribbon-tag { position: static; align-self: flex-start; margin-bottom: 6px; }
}
.empty-day h4 { font-family: var(--serif); font-weight: 300; font-size: 24px; margin: 0 0 6px; color: var(--ink-900); }
.empty-day p { font-family: var(--serif); font-style: italic; color: var(--ink-500); margin: 0; }

.day-section { margin-bottom: 32px; }
.day-section h3 { font-family: var(--serif); font-weight: 300; font-size: 26px; margin: 0 0 14px; color: var(--ink-900); display: flex; align-items: baseline; gap: 14px; }
.day-section h3 em { font-style: italic; color: var(--phase-1); }
.day-section h3 .count { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-400); }

/* iPad landscape (≤1100px). At 1024px we still have room for
   2-col tier/add-on layouts; jumping straight to 1-col was wasteful.
   The bill 1.4fr/1fr split does collapse since the right column is
   too narrow for the payment-method + coverage cards. */
@media (max-width: 1100px) {
  .bill-grid { grid-template-columns: 1fr; }
  .summary-cards { grid-template-columns: 1fr 1fr; }
  .tier-grid { grid-template-columns: 1fr 1fr; }
  .add-ons { grid-template-columns: 1fr 1fr; }
  .benefit-row { grid-template-columns: 1fr; gap: 8px; }
}
/* iPad portrait + below: tier + add-on collapse to single column. */
@media (max-width: 820px) {
  .tier-grid { grid-template-columns: 1fr; }
  .add-ons { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .summary-cards { grid-template-columns: 1fr; }
  .day-strip { grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .day-pill { padding: 8px 4px; }
  .day-pill .num { font-size: 16px; }
  .event-card { grid-template-columns: 1fr; gap: 12px; }
  .event-card .rhs { flex-direction: row; justify-content: space-between; align-items: center; }
}


/* ── Carried over from the retired public/portal-extras.css lineage ─────────
   These three rules existed ONLY in the copy the Next app was loading. Ported
   here when that duplicate was deleted so nothing regressed.
   ───────────────────────────────────────────────────────────────────────── */
.view-toggle { display: inline-flex; padding: 3px; background: var(--sand-200); border-radius: 999px; gap: 2px; }
.view-toggle button { padding: 7px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; border: 0; background: transparent; color: var(--ink-500); border-radius: 999px; cursor: pointer; }
.view-toggle button.on { background: var(--ink-900); color: var(--sand-50); }