/* ============================================================
   Mustard Seed — Family Portal styles
   Layered on top of css/style.css. Reuses the brand tokens
   (--green, --gold, --cream, etc.) defined there.
   ============================================================ */

/* ---------- Alerts ---------- */
.portal-alert {
  border-radius: var(--radius-sm);
  padding: .9rem 1.15rem;
  font-size: .95rem;
  font-weight: 500;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--charcoal);
}
.portal-alert--ok {
  background: #eef7f0;
  border-color: #bfe0cb;
  color: #22603c;
}
.portal-alert--error {
  background: #fdeeea;
  border-color: #f0c3b6;
  color: #9a3418;
}

.portal-muted { color: var(--muted); }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--green-dark); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover { color: var(--gold-dark); }

/* ---------- Destructive actions ----------
   Deliberately the only red in the portal, and reachable only inside the member edit modal.
   Reuses the alert-error palette above so "this one is different" reads the same everywhere. */
.btn-danger { background: #9a3418; color: #fff; box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: #7d2a13; box-shadow: var(--shadow); }
.member-remove__rule { border: 0; border-top: 1px solid var(--line, #e6e0d4); margin: 1.1rem 0 .9rem; }
.member-remove__link { color: #9a3418; }
.member-remove__link:hover { color: #7d2a13; }
.member-remove__q { font-weight: 600; }
/* Removed-members list: deliberately quiet. It is a recovery tool, not a second member list. */
.member-archived { margin-top: 1.1rem; font-size: .9rem; }
.member-archived__h { font-size: .98rem; margin: 0 0 .15rem; }
.member-archived__lead { margin: 0 0 .5rem; font-size: .85rem; }
.member-archived ul { list-style: none; margin: 0; padding: 0; }
.member-archived__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
  padding: .5rem 0; border-top: 1px solid var(--line, #e6e0d4);
}
.member-archived__name { font-weight: 600; }
.member-archived__kept { color: var(--muted); font-size: .84rem; }
.member-archived__acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: .9rem; }
.member-archived__blocked { font-size: .82rem; font-style: italic; }
.member-archived__purge { color: #9a3418; }
.member-archived__purge:hover { color: #7d2a13; }
/* The purge dialog is the one place a red heading is warranted. */
#purge-modal .portal-modal__box { border-top: 4px solid #9a3418; }
#purge-modal #purge-modal-title { font-size: 1.12rem; color: #9a3418; }

@media (max-width: 560px) {
  .member-archived__acts { margin-left: 0; width: 100%; }
  .member-archived__acts .linklike { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Login card ---------- */
.portal-auth-card { max-width: 520px; margin: 0 auto; }
.portal-auth-card .form { max-width: none; }

/* ---------- Panels ---------- */
.portal-panel { border-top: 4px solid var(--gold); }
.portal-panel--warn { border-top-color: var(--gold-dark); background: #fffaf0; }
.portal-panel .form { max-width: none; }

.portal-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.portal-section-head h2 { margin: 0; }

.portal-empty {
  background: var(--white);
  color: var(--muted);
  text-align: center;
}

/* ---------- Policy checkboxes ---------- */
.policy-checks { display: grid; gap: .7rem; margin: .6rem 0 0; }
.policy-check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .95rem; line-height: 1.5; cursor: pointer;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
}
.policy-check input { margin-top: .28rem; width: 18px; height: 18px; flex: none; accent-color: var(--green); }

/* ---------- Pills (extend base .pill) ---------- */
.pill--seats    { background: var(--gold-soft); color: var(--gold-dark); }
.pill--full     { background: #fdeeea; color: #9a3418; }
.pill--semester { background: #e7eef0; color: var(--green-dark); }
.pill--dropin   { background: var(--gold-soft); color: var(--gold-dark); }
.pill--trial    { background: #eef7f0; color: #22603c; }
.pill--enrolled { background: #eef7f0; color: #22603c; }
.pill--credit   { background: var(--gold-soft); color: var(--gold-dark); }

/* ---------- Member cards ---------- */
.member-card .member-notes { font-size: .92rem; color: var(--muted); margin: .4rem 0 .6rem; }
.member-card .member-meta { margin: .35rem 0 0; font-size: .92rem; }

/* ---------- Class cards ---------- */
.class-card { display: flex; flex-direction: column; }
.class-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.class-card h3 { margin: .1rem 0 .3rem; }
.class-meta { font-size: .88rem; margin-bottom: .8rem; }
.class-prices { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1rem; }
.class-price { display: flex; align-items: baseline; gap: .4rem; }
.class-price .price-amt { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--green-dark); }
.class-price .price-per { font-size: .82rem; color: var(--muted); }

.enroll-block { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line-soft); }
.enroll-select { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.enroll-select select {
  font-family: var(--sans); font-size: 1rem; padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--charcoal);
}
.enroll-select select:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); }
.enroll-members { display: flex; flex-direction: column; gap: .35rem; margin: .2rem 0 .7rem; }
.enroll-members__label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.member-check-row { display: flex; align-items: center; gap: .55rem; font-size: .95rem; font-weight: 500; color: var(--charcoal); cursor: pointer; }
.member-check-row input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--green); }
.enroll-buttons { gap: .5rem; }
.enroll-buttons .btn { flex: 1 1 auto; padding: .6rem 1rem; font-size: .92rem; }
.trial-note { font-size: .82rem; margin: .5rem 0 0; }
.enroll-total { margin: .5rem 0 0; font-size: .95rem; }

button.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Modal ---------- */
.portal-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; }
.portal-modal[hidden] { display: none; }
.portal-modal__backdrop { position: absolute; inset: 0; background: rgba(30,30,27,.55); backdrop-filter: blur(2px); }
.portal-modal__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 540px;
  /* dvh floor: 90vh alone can exceed the visible screen on phones with the URL bar shown. */
  max-height: min(90vh, calc(100dvh - 2rem)); overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-lg);
}
/* Long modal titles must never push "Close" onto its own line below the heading. */
.portal-modal__box .portal-section-head { flex-wrap: nowrap; align-items: flex-start; gap: .8rem; }
.portal-modal__box .portal-section-head .linklike { flex: none; }
.portal-modal__box .form { max-width: none; }
.portal-modal__box h3 { margin-top: 1rem; }

/* Per-student onboarding: card button + modal sizing */
.member-card__ob { margin-top: .7rem; width: 100%; padding: .55rem .9rem; font-size: .92rem; }
#onboarding-modal .portal-modal__box { max-width: 620px; }
#onboarding-modal .policy-check { align-items: flex-start; margin: .4rem 0; }

/* ---------- Account summary + settings ---------- */
.anchor { display: block; height: 0; visibility: hidden; }
.btn-sm { padding: .5rem 1rem; font-size: .86rem; }

.account-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  flex-wrap: wrap;
}
.account-summary__id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.account-summary__name { margin: 0 0 .15rem; font-size: 1.4rem; }
.account-summary__pills { margin-top: .55rem; }
.account-summary__pills .pill { margin-bottom: 0; }
.account-summary__links { display: flex; gap: .6rem; flex-wrap: wrap; }

.account-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
}
.account-avatar svg { width: 27px; height: 27px; fill: currentColor; }
.account-avatar--lg { width: 60px; height: 60px; }
.account-avatar--lg svg { width: 34px; height: 34px; }

.settings-card { margin-bottom: 1.2rem; }
.settings-card:last-child { margin-bottom: 0; }
.settings-card h3 { margin-top: 0; }
.field-hint { margin: .3rem 0 0; font-size: .85rem; }

@media (max-width: 560px) {
  .account-summary { flex-direction: column; align-items: flex-start; }
  .account-summary__links { width: 100%; }
  .account-summary__links .btn { flex: 1; text-align: center; }
}

/* ---- Cart (multi-class checkout) ---- */
.cart-panel { border: 2px solid var(--green); margin: 0 0 1.6rem; }
.cart-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.cart-row:last-child { border-bottom: 0; }
.cart-row__amt { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.cart-row__amt .linklike { display: block; font-size: .82rem; margin-top: .15rem; }
.cart-summary { margin-top: .4rem; }
.cart-summary .cart-row { border-bottom: 0; padding: .3rem 0; }
.cart-summary .cart-total { border-top: 2px solid rgba(0,0,0,.12); margin-top: .2rem; padding-top: .6rem; font-size: 1.1rem; }
.reg-note { margin: .5rem 0 0; font-size: .85rem; }
.reg-note--incart { color: var(--green); font-weight: 600; }

/* ---- one-time student forms: indicators + non-blocking reminder ---- */
.forms-flag { display:inline-block; font-size:.75rem; font-weight:600; color:#8a5a00; background:#fff3d6; border:1px solid #e6c46a; border-radius:999px; padding:.05rem .5rem; margin-left:.35rem; }
.forms-ok { display:inline-block; font-size:.75rem; font-weight:600; color:var(--green); margin-left:.35rem; }
.cart-forms-note { background:#fff8e6; border:1px dashed var(--gold-dark); color:#6a5210; border-radius:8px; padding:.7rem .9rem; margin:.2rem 0 .8rem; font-size:.9rem; }
/* Required Music Together LLC data-sharing notice (class card + cart). Quiet, but it is
   licence text — never collapse, truncate, or hide it behind a toggle. */
.mt-privacy-note { line-height:1.6; }
p.mt-privacy-note { font-size:.82rem; margin-top:.35rem; }
.cart-forms-note.mt-privacy-note { background:#fff; border:1px solid var(--line,#e6e1d6); border-left:4px solid var(--gold,#E1A92E); color:inherit; }
.mt-privacy-note a { color:inherit; text-decoration:underline; }
.cart-forms-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }

/* Onboarding form: highlight a field the parent still needs to fix */
.field-error, .field-error:focus { border-color: #d64545 !important; box-shadow: 0 0 0 3px rgba(214,69,69,.18) !important; outline: none; }
label.policy-check .field-error { outline: 2px solid #d64545; }

/* Deep-linked class from the public "Enroll" button — draw the eye to it */
.class-card--highlight { outline: 3px solid var(--green); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(58,107,76,.12); animation: cardpulse 1.4s ease-out 1; }
@keyframes cardpulse { 0% { box-shadow: 0 0 0 0 rgba(58,107,76,.35); } 100% { box-shadow: 0 0 0 6px rgba(58,107,76,.12); } }
@media (prefers-reduced-motion: reduce) { .class-card--highlight { animation: none; } }

/* ============================================================
   MOBILE PASS — portal-specific small-screen + touch behaviour.
   Layered on the site-wide foundation in css/style.css
   (coarse-pointer 44px targets, table-cards, safe areas, …).
   ============================================================ */

/* ---- Cart rows: long class names shrink, amounts never get pushed off ---- */
.cart-row > div:first-child { min-width: 0; }

/* ---- Class browser filter/sort: real, finger-sized controls ---- */
.class-controls label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .85rem; font-weight: 600; color: var(--muted);
  flex: 1 1 150px; max-width: 240px;
}
.class-controls select {
  font-family: var(--sans); font-size: 1rem; font-weight: 400;
  color: var(--charcoal); width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
}
.class-controls select:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); }
@media (max-width: 560px) { .class-controls label { max-width: none; } }

/* ---- One-word-answer textareas don't need 140px of blank ---- */
#onboarding-modal .field textarea { min-height: 76px; }
#member-modal .field textarea, #onboarding-form .field textarea { min-height: 96px; }

/* ---- Sign-in: the OTP code reads like a code ---- */
#login-code { font-size: 1.35rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Touch targets (mirrors the site-wide coarse-pointer pass) ---- */
@media (pointer: coarse) {
  .linklike,
  #boot-msg a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .cart-row__amt .linklike { display: flex; justify-content: flex-end; margin-top: 0; }
  .portal-modal__box .portal-section-head .linklike { padding-inline: .5rem; margin-right: -.5rem; }
  .class-controls select { min-height: 46px; }
  .member-check-row input { width: 22px; height: 22px; }
  .policy-check input { width: 22px; height: 22px; margin-top: .2rem; }
  /* The whole student row is the tap target, not the 22px box inside it. */
  .member-check-row {
    min-height: 44px; padding: .3rem .6rem;
    background: var(--cream); border: 1px solid var(--line-soft); border-radius: 9px;
  }
  .enroll-members { gap: .45rem; }
}

/* ---- Sign-in card: mobile ergonomics ---- */
@media (max-width: 560px) {
  .portal-auth-card .btn-primary { width: 100%; }
  /* Reserve the height of the tallest step so the email -> code swap doesn't jump. */
  .portal-auth-card { min-height: 34rem; }
}

/* ---- Modals become bottom sheets on phones ---- */
@media (max-width: 560px) {
  .portal-modal { padding: 0; place-items: end stretch; }
  .portal-modal__box {
    max-width: none;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: calc(100dvh - 2.2rem);
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom));
  }
}

/* ---- Sticky cart summary bar (mobile only; #cart-bar lives in dashboard.html) ---- */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem max(1.1rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(1.1rem, env(safe-area-inset-left));
  background: var(--green-deep); color: #fff;
  box-shadow: 0 -10px 26px -14px rgba(30, 30, 27, .55);
}
.cart-bar__info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.cart-bar__info strong { font-family: var(--serif); font-size: 1.15rem; letter-spacing: -.01em; }
.cart-bar__label { font-size: .8rem; color: #cfe0d4; white-space: nowrap; }
.cart-bar .btn { flex: none; }
@media (max-width: 760px) {
  .cart-bar:not([hidden]) { display: flex; }
  /* Nothing may hide behind the fixed bar — give the page matching breathing room. */
  body:has(.cart-bar:not([hidden])) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---- Account summary: three jump buttons share the row cleanly ---- */
@media (max-width: 560px) {
  .account-summary__links .btn { flex: 1 1 40%; }
}

/* ================= Family day view (#schedule-section) =================
   A parent with more than one child cannot answer "where do we need to be"
   from an enrollment list. This is the day, in clock order, with every row
   naming the child — and overlapping classes called out, because that is the
   one thing a list can never show you. Rendered by renderFamilyDay() in
   portal.js from /api/family/schedule. */
.fday-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 .6rem; }
.fday-nav { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.fday-nav .btn { padding:.45rem .85rem; font-size:.9rem; min-width:44px; }
.fday-pick { font:inherit; font-size:.9rem; padding:.42rem .55rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:inherit; }

/* Child legend. Colour + initials give a parent something to scan for. */
.fday-kids { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .9rem; }
.fday-kid { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; padding:.25rem .6rem .25rem .3rem; border:1px solid var(--line); border-radius:999px; background:var(--white); }
.fday-kid--off { opacity:.5; }
.fday-dot { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.02em; }

.week-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; margin:0 0 1.25rem; }
.wk-day { border:1px solid var(--line); background:var(--white); border-radius:var(--radius-sm); padding:.45rem .2rem .5rem; text-align:center; cursor:pointer; font:inherit; line-height:1.25; }
.wk-day:hover { border-color:var(--green); }
.wk-day .wd { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.wk-day .dm { display:block; font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--green-dark); }
.wk-day .ct { display:block; font-size:.68rem; color:var(--muted); min-height:1em; }
.wk-day--today { box-shadow:inset 0 0 0 2px rgba(225,169,46,.6); }
.wk-day--selected { background:var(--green); border-color:var(--green); }
.wk-day--selected .wd, .wk-day--selected .dm, .wk-day--selected .ct { color:#fff; }
.wk-day--empty .dm { color:var(--muted); font-weight:600; }

.fday-list { display:flex; flex-direction:column; gap:.55rem; margin:0 0 1.25rem; }
.fday-row { display:grid; grid-template-columns:7rem 1fr; gap:.9rem; border:1px solid var(--line); border-left:4px solid var(--green); background:var(--white); border-radius:var(--radius-sm); padding:.85rem 1rem; }
.fday-row__time { border-right:1px solid var(--line-soft); padding-right:.9rem; }
.fday-start { display:block; font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--green-dark); }
.fday-dur { display:block; font-size:.78rem; color:var(--muted); margin-top:.1rem; }
.fday-who { display:flex; align-items:center; gap:.45rem; margin:0 0 .25rem; font-weight:700; }
.fday-class { display:block; font-size:1rem; margin:0 0 .2rem; }
.fday-meta { display:block; font-size:.85rem; color:var(--muted); }
/* A clash is the headline of the row, not a footnote — it changes the parent's morning. */
.fday-row--clash { border-left-color:#B4442E; background:#FDF6F4; }
.fday-clash { display:block; margin-top:.45rem; font-size:.85rem; font-weight:600; color:#8C3520; }
.fday-banner { border:1px solid #F0C3B6; border-left:4px solid #B4442E; background:#FDEEEA; color:#7C2D18; border-radius:var(--radius-sm); padding:.8rem 1rem; margin:0 0 1rem; font-size:.92rem; font-weight:600; }
.fday-empty { border:1px dashed var(--line); border-radius:var(--radius-sm); padding:1.5rem 1.2rem; text-align:center; color:var(--muted); background:var(--white); }
.fday-all { margin-top:.5rem; border-top:1px solid var(--line); padding-top:.9rem; }
.fday-all > summary { cursor:pointer; font-weight:600; color:var(--green-dark); padding:.4rem 0; min-height:44px; display:flex; align-items:center; }

@media (max-width:560px) {
  .fday-head { flex-direction:column; align-items:stretch; gap:.6rem; }
  .fday-nav { justify-content:space-between; }
  .fday-nav .btn { min-height:44px; }
  .fday-row { grid-template-columns:1fr; gap:.25rem; padding:.8rem .9rem; }
  .fday-row__time { border-right:0; border-bottom:1px solid var(--line-soft); padding:0 0 .4rem; display:flex; align-items:baseline; gap:.5rem; }
  .fday-dur { margin-top:0; }
}
/* Seven columns cannot each clear 44px inside 320px with gutters, so below 400 the strip
   joins into a full-bleed grid and reclaims the gutter — same treatment the instructor
   dashboard's calendar uses. */
@media (max-width:400px) {
  /* -12px, not -8px: the portal's container gutter is wider than the instructor
     dashboard's, and at -8px the seven cells land on 43px — one pixel short. */
  .week-strip { gap:0; margin-inline:-12px; }
  .wk-day { padding:.4rem .1rem .45rem; min-height:52px; border-radius:0; }
  .wk-day .dm { font-size:1.05rem; }
  .wk-day .wd, .wk-day .ct { font-size:.62rem; }
  .wk-day--today { box-shadow:inset 0 0 0 2px rgba(225,169,46,.6); }
}