/* Member account pages (signup.php, verify.php, resend.php, forgot.php,
   reset.php) and the member dashboards. Builds on portal.css. */
.member-auth-shell { max-width: 560px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 16px; }
.member-card { padding: clamp(22px, 4vw, 34px); }
.member-card-title { max-width: none; font-family: var(--serif, "Source Serif 4", Georgia, serif); font-weight: 500;
  font-size: clamp(22px, 3vw, 28px); margin: 0; line-height: 1.2; }
.member-card-body p { color: var(--muted); line-height: 1.65; margin: 0 0 14px; }
.member-card-body p strong { color: var(--ink); }
.member-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.member-card-actions .button { min-height: 44px; }
.member-small { font-size: 13.5px; color: var(--muted); }
.member-small a, .member-card-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.member-form .field { margin-bottom: 16px; }
.member-form select { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 14px; background: #fff; font: inherit; color: var(--ink); }
.member-field-error { display: block; color: #9b2c1f; font-size: 13px; margin-top: 6px; }
.member-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.5; }
.member-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.member-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.member-notice { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
  background: #fbf3e4; border: 1px solid #ead9b8; color: #5b4520; }
.member-offer { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.member-offer h2 { font-size: 15px; margin: 0 0 6px; }
.member-offer p { font-size: 14px; }

/* Member dashboards. */
.member-trial { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 24px; align-items: center;
  background: linear-gradient(180deg, #112f46, #0c2234); color: #fffdf7; border-radius: 16px;
  padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 30px); margin: 8px 0 26px; }
.member-trial-count { display: flex; flex-direction: column; gap: 2px; }
.member-trial-n { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; }
.member-trial-sub { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 253, 247, .7); }
.member-trial p { margin: 0; color: rgba(255, 253, 247, .82); font-size: 14.5px; line-height: 1.55; }
.member-trial .button.primary { background: #c7a268; color: #0c2234; border-color: transparent; min-height: 44px; white-space: nowrap; }
@media (max-width: 760px) { .member-trial { grid-template-columns: 1fr; } .member-trial .button { justify-self: start; } }
.member-section-h { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 30px 0 4px; }
.member-chip-paid { background: #e8f1ea; color: #1f5130; border-color: #c8dfcd; }
.member-ended { max-width: 640px; }

/* Checkout. */
.member-checkout { max-width: 720px; }
.member-price { font-size: 16px; margin: 8px 0 18px; }
.member-subjects { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 6px; margin: 0 0 16px; }
.member-subjects legend { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 0 6px; }
.member-subject { padding: 10px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.member-subject:last-child { border-bottom: 0; }
.member-subject .member-small { display: block; margin-top: 2px; }
.member-total { display: flex; gap: 12px; align-items: baseline; font-size: 18px; margin: 18px 0 14px; }

/* Checkbox rows read as sentences, not as the portal's small field labels. */
.member-app .member-check, .member-auth .member-check,
.member-app .member-check *, .member-auth .member-check * {
  font-family: Inter, system-ui, sans-serif; text-transform: none; letter-spacing: normal; }
.member-check { font-size: 14.5px; color: var(--muted); }
.member-subject strong { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.member-subject .member-small { font-size: 13px; }
.member-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.member-section-h { max-width: none; }
.member-card-actions .button, .member-card-actions button { min-height: 46px; padding: 0 22px; }
.member-app label.member-check, .member-auth label.member-check { font-size: 14.5px; color: var(--muted); font-weight: 400; line-height: 1.5; }
.member-checkout .button.primary { margin-top: 6px; }
.member-checkout > p.member-small { margin-top: 12px; }
.member-notice-strong { background: #fff4df; border-color: #e3c78f; color: #4a3612; font-size: 14.5px; line-height: 1.55; }

/* Audit, 10 Oct: bigger, clearer controls on member pages, at every size. */
.member-app .portal-signout { font-size: 12px; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; }
.member-app .button, .member-app .file-btn, .member-auth .button, .member-auth .student-login-button {
  font-size: 13px; letter-spacing: .06em; min-height: 46px; }
.member-app .ws-file { min-height: 44px; font-size: 12px; }
.member-app .ws-read-acts .file-btn { min-height: 46px; }
.member-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.member-actions .button { min-width: 160px; justify-content: center; }
.member-trial-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  margin: 4px 0 22px; padding: 12px 16px; border-radius: 12px; background: #eef3f6; border: 1px solid #d3dfe7;
  font-size: 14.5px; color: var(--ink); max-width: none; }
.member-trial-line a { font-weight: 600; color: #112f46; text-decoration: underline; text-underline-offset: 3px;
  min-height: 40px; display: inline-flex; align-items: center; }
/* On a phone the course rows' arrow fell onto a line of its own. The whole
   row is the link, so the arrow is decoration and goes. */
@media (max-width: 760px) {
  .member-app .ws-course-row .ws-caret { display: none; }
  .member-actions .button { flex: 1; }
}
.member-app details.member-more { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 16px; background: transparent; }
.member-app details.member-more > summary { cursor: pointer; padding: 14px 16px; min-height: 48px; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; align-items: center; }
.member-app details.member-more > summary::-webkit-details-marker { display: none; }
.member-app details.member-more > summary::after { content: "Show"; font-weight: 500; font-size: 13px; color: var(--muted); }
.member-app details.member-more[open] > summary::after { content: "Hide"; }
.member-app details.member-more .member-subjects { border: 0; margin: 0; padding-top: 0; }
.member-checkout .member-pay { width: 100%; max-width: 420px; justify-content: center; }
.member-actions .button { width: auto; flex: 0 1 auto; }
@media (max-width: 760px) { .member-actions .button { flex: 1 1 0; } }

/* Study tools: the calculator and the formula sheets, on the dashboard. */
.member-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; }
.member-tool { appearance: none; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  min-height: 72px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(251,248,241,.95)); color: var(--ink); text-decoration: none;
  font: inherit; transition: border-color .2s, box-shadow .2s; }
.member-tool:hover, .member-tool:focus-visible, .member-tool.is-active { border-color: #112f46; box-shadow: 0 8px 24px -14px rgba(17,47,70,.5); }
.member-tool svg { width: 30px; height: 30px; flex: none; color: #112f46; }
.member-tool span { display: flex; flex-direction: column; gap: 2px; }
.member-tool strong { font-size: 15.5px; font-weight: 600; }
.member-tool small { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .member-tools { grid-template-columns: 1fr; } }

/* The calculator stays available on phones, as a sheet from the bottom of the
   screen below 900px, where there is no room beside the content (the
   mentorship library hides it below 768px). */
@media (max-width: 899px) {
  .member-app .calculator-trigger { display: flex !important; }
  .member-app .student-calculator-panel:not([hidden]) { display: block !important; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 60; max-height: 82vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 16px 16px 22px;
    box-shadow: 0 -18px 48px rgba(17,47,70,.28); background: #fbf8f1; }
}
.member-app .calculator-close { min-width: 44px; min-height: 44px; font-size: 26px; line-height: 1; }
.member-app .calculator-keys button { min-height: 46px; font-size: 16px; }

/* Formula sheets. */
.member-formulas { list-style: none; margin: 8px 0 18px; padding: 0; }
.member-formula { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center;
  padding: 14px 4px; border-bottom: 1px solid var(--line); }
.member-formula-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.member-formula-name strong { font-size: 15.5px; }
.member-formula .file-btn { min-height: 44px; white-space: nowrap; }
.member-formula-src, .member-formula-none { grid-column: 1 / -1; }
@media (max-width: 560px) { .member-formula { grid-template-columns: 1fr; } .member-formula .file-btn { justify-self: start; } }
.member-app .calculator-mode-row button { min-height: 44px; min-width: 56px; }
.member-formula-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 560px) { .member-formula-acts { justify-content: flex-start; } }
.member-formula-acts { min-width: 0; }
.member-formula-acts .file-btn { white-space: normal; text-align: left; height: auto; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; max-width: 100%; }
@media (max-width: 560px) { .member-formula-acts { flex-direction: column; align-items: stretch; } }

/* ===== Scientific calculator (assets/calculator.js), 11 Oct ===== */
.member-app .cpcalc { padding: 16px; }
.cpcalc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.cpcalc-head .library-section-label { margin: 0; }
.cpcalc-mode { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: #fff; margin-left: auto; }
.cpcalc-mode button { min-height: 36px; min-width: 50px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; color: var(--muted); }
.cpcalc-mode button.is-active { background: #112f46; color: #fffdf7; }
.cpcalc .calculator-close { border: 1px solid var(--line); background: #fff; border-radius: 50%; width: 40px; height: 40px;
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; color: var(--ink); }

.cpcalc-screen { background: linear-gradient(180deg, #16384f, #0f2a3e); color: #fffdf7; border-radius: 16px;
  padding: 12px 16px 14px; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-end; gap: 4px; text-align: right; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cpcalc-history { font: 13px/1.3 "IBM Plex Mono", ui-monospace, monospace; color: rgba(255,253,247,.62); min-height: 17px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpcalc-expr { font: 500 34px/1.15 "IBM Plex Mono", ui-monospace, monospace; max-width: 100%; overflow-wrap: anywhere; }
/* The sum drawn as maths (KaTeX); a long one scrolls, showing its end. */
.cpcalc-expr .katex, .cpcalc-history .katex { font-size: 1em; }
.cpcalc-expr:has(.katex) { overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; padding-bottom: 2px; }
.cpcalc-expr:has(.katex)::-webkit-scrollbar { display: none; }
.cpcalc-expr.is-long { font-size: 26px; }
.cpcalc-expr.is-very-long { font-size: 19px; }
.cpcalc-expr.is-placeholder { color: rgba(255,253,247,.4); }
.cpcalc-expr.is-answer { font-weight: 600; color: #fff; }
.cpcalc-result { font: 16px/1.3 "IBM Plex Mono", ui-monospace, monospace; color: #e2c48c; min-height: 21px; }
.cpcalc-result.is-error { color: #ffb4a8; }

.cpcalc-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.cpcalc-key { min-height: 50px; padding: 0 2px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: 500 17px/1 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background .12s, transform .06s, box-shadow .12s; box-shadow: 0 1px 0 rgba(23,23,19,.06); }
.cpcalc-key sup { font-size: .62em; line-height: 0; position: relative; top: -.55em; }
.cpcalc-num { font-size: 21px; background: #fff; }
.cpcalc-fn { font-size: 15px; background: #f4f0e7; color: #112f46; }
.cpcalc-op { font-size: 23px; background: #e6eef4; color: #112f46; }
.cpcalc-ctrl { font-size: 13px; font-weight: 600; letter-spacing: .04em; background: #f4f0e7; }
.cpcalc-ac { background: #fbe9e5; color: #9b2c1f; border-color: #f0cfc8; }
.cpcalc-eq { grid-column: 4 / span 2; grid-row: span 2; font-size: 28px; font-weight: 600; background: #c7a268; color: #0c2234; border-color: #b8925a; }
.cpcalc-key:hover { filter: brightness(.97); }
.cpcalc-key:active, .cpcalc-key.is-pressed { transform: scale(.96); filter: brightness(.92); }
.cpcalc-key:focus-visible, .cpcalc-mode button:focus-visible, .cpcalc .calculator-close:focus-visible { outline: 2px solid #976817; outline-offset: 2px; }
.cpcalc.is-shift [data-k="2nd"] { background: #976817; color: #fff; border-color: #976817; }
.cpcalc.is-shift [data-l2] { background: #fff4df; border-color: #e3c78f; color: #5b4520; }
.cpcalc-tip { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
@media (hover: none) { .cpcalc-tip { display: none; } }
@media (max-width: 899px) {
  .cpcalc-key { min-height: 52px; }
  .cpcalc-screen { min-height: 104px; }
}

/* ===== Dashboard and formula sheets, 12 Oct: one clear order on every page =====
   Page head (eyebrow, title, one line) with the two study tools as small
   buttons beside it; then sections, each a quiet title over a grid of cards.
   One spacing scale: 8 / 16 / 24 / 40 px. */
.member-app .md-page-head { margin: 8px 0 24px; max-width: none; }
.md-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.md-page-head-row > div:first-child { min-width: 0; flex: 1 1 360px; }
.md-eyebrow { font: 600 11.5px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
  color: #976817; margin: 0 0 8px; max-width: none; }
.member-app .md-page-head h1 { font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: clamp(30px, 4.2vw, 42px);
  line-height: 1.1; letter-spacing: -.01em; margin: 0; color: var(--ink); max-width: none; }
.member-app .md-page-head h1.md-h1-sm { font-size: clamp(26px, 3.4vw, 34px); }
.md-lead { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 60ch; }
.md-head-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid transparent; font: 600 14px/1 Inter, system-ui, sans-serif; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.md-btn-primary { background: #112f46; color: #fffdf7; }
.md-btn-primary:hover { background: #0c2234; }
.md-btn-ghost { background: transparent; color: #112f46; border-color: var(--line); }
.md-btn-ghost:hover, .md-btn-ghost.is-active { border-color: #112f46; }
.md-btn-gold { background: #c7a268; color: #0c2234; }
.md-btn-gold:hover { background: #d4b27c; }

/* Study tools: two small pill buttons, not cards. */
.md-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.md-tool { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #112f46; font: 600 14px/1 Inter, system-ui, sans-serif;
  text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.md-tool svg { width: 20px; height: 20px; flex: none; }
.md-tool:hover { border-color: #112f46; }
.md-tool.is-active { background: #112f46; border-color: #112f46; color: #fffdf7; }
.md-tool:focus { outline: none; }
.md-tool:focus-visible, .md-btn:focus-visible, .md-card:focus-visible, .md-chip:focus-visible,
.fs-tab:focus-visible, .fs-open:focus-visible { outline: 2px solid #976817; outline-offset: 2px; }

/* Trial banner: one slim band. */
.md-trial { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 40px; padding: 16px 16px 16px 24px;
  border-radius: 16px; background: #112f46; color: #fffdf7; }
.md-trial-count { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.md-trial-count strong { font: 500 24px/1.1 "Source Serif 4", Georgia, serif; }
.md-trial-count span { font-size: 14px; color: rgba(255,253,247,.75); }
.md-trial p { flex: 1 1 260px; margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,253,247,.82); }

/* Sections. */
.md-section { margin: 0 0 40px; }
.md-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.member-app .md-section-title { font: 500 22px/1.2 "Source Serif 4", Georgia, serif; margin: 0; color: var(--ink); max-width: none;
  letter-spacing: 0; text-transform: none; }
.md-section-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.md-note { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 70ch; }

/* Subject cards. */
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.md-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 20px 48px 20px 20px;
  border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
a.md-card:hover { border-color: #112f46; box-shadow: 0 10px 28px -18px rgba(17,47,70,.55); transform: translateY(-1px); }
.md-card-kicker { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.md-card-title { font: 500 21px/1.2 "Source Serif 4", Georgia, serif; color: var(--ink); }
.md-card-meta { margin-top: auto; font-size: 13.5px; line-height: 1.4; color: #2f5b3c; }
.md-card.is-ending .md-card-meta { color: #9b2c1f; font-weight: 600; }
.md-card-go { position: absolute; top: 20px; right: 18px; font-size: 18px; color: #976817; transition: transform .15s; }
a.md-card:hover .md-card-go { transform: translateX(3px); }
.md-card.is-soon { background: transparent; border-style: dashed; }
.md-card.is-soon .md-card-title { color: var(--muted); }
.md-card.is-soon .md-card-meta { color: var(--muted); }
.md-grid .md-card:not(.is-ending):not(.is-soon) .md-card-meta { color: var(--muted); }
.md-section[aria-labelledby="md-mine"] .md-card:not(.is-ending) .md-card-meta { color: #2f5b3c; }

/* Other programmes: compact pills. */
.md-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.md-chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.2; }
.md-chip strong { font-weight: 600; }
.md-chip span { font-size: 13px; color: var(--muted); }
.md-chip:hover { border-color: #112f46; }

/* Formula sheets: programme tabs, then board groups of cards. */
.fs-tabs { display: flex; gap: 4px; margin: 0 0 32px; padding: 4px; border-radius: 999px; background: #efeadf;
  width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fs-tabs::-webkit-scrollbar { display: none; }
.fs-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  font: 600 14px/1 Inter, system-ui, sans-serif; color: var(--muted); text-decoration: none; }
.fs-tab:hover { color: var(--ink); }
.fs-tab.is-active { background: #fff; color: #112f46; box-shadow: 0 2px 8px -4px rgba(17,47,70,.35); }
.fs-tabs-sm { margin: 0 0 24px; }
.fs-group { margin: 0 0 40px; }
.fs-group .md-section-title { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.fs-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.fs-card.is-mine { border-color: #c7a268; box-shadow: inset 0 3px 0 #c7a268; }
.fs-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.member-app .fs-card h3 { font: 500 20px/1.2 "Source Serif 4", Georgia, serif; margin: 0; color: var(--ink); max-width: none; }
.fs-mine { flex: none; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; padding: 6px 8px; border-radius: 999px;
  background: #fbf3e4; color: #6b4d18; }
.fs-card-sub { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.fs-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.fs-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: #112f46; color: #fffdf7; font: 600 14px/1.2 Inter, system-ui, sans-serif; text-decoration: none; max-width: 100%; }
.fs-open:hover { background: #0c2234; }
.fs-ext, .fs-secondary { background: #fff; color: #112f46; border: 1px solid var(--line); }
.fs-ext:hover, .fs-secondary:hover { background: #fff; border-color: #112f46; }
.member-app .student-library-pane > .fs-tabs-sm + * { margin-top: 0; }

@media (max-width: 600px) {
  .md-page-head-row { align-items: flex-start; }
  .md-tools, .md-head-acts { width: 100%; }
  .md-tool, .md-head-acts .md-btn { flex: 1 1 0; justify-content: center; }
  .md-section { margin-bottom: 32px; }
  .md-trial { padding: 16px; margin-bottom: 32px; }
  .md-trial .md-btn { width: 100%; }
  .md-grid, .fs-grid { grid-template-columns: 1fr; gap: 12px; }
  .md-card { min-height: 0; }
  .fs-tabs { width: 100%; }
  .fs-tab { flex: 1 0 auto; justify-content: center; padding: 0 14px; }
}
@media (max-width: 600px) {
  .fs-tabs { flex-wrap: wrap; border-radius: 16px; overflow: visible; }
  .fs-tab { flex: 1 1 auto; }
}

/* ===== Calculator chooser and panel, 12 Oct =====
   The Calculator button opens a popup of every calculator; the one chosen
   opens in the panel. The suite's tools need more room, so the panel widens
   for them (.is-suite) and fills the height beside the content. */
.cpcalc-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.cpcalc-head .library-section-label { margin: 0 auto 0 0; font-size: 12px; }
.cpcalc-change { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: 600 13px/1 Inter, system-ui, sans-serif; color: #112f46; cursor: pointer; }
.cpcalc-change:hover { border-color: #112f46; }
.cpcalc-expand { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #112f46;
  display: inline-flex; align-items: center; justify-content: center; }
.cpcalc-expand[hidden] { display: none; }
.cpcalc-expand svg { width: 18px; height: 18px; }
.cpcalc-expand:hover { border-color: #112f46; }
.cpcalc-change:focus-visible, .cpcalc-expand:focus-visible, .cpcalc-choice:focus-visible { outline: 2px solid #976817; outline-offset: 2px; }
.cpcalc-view[hidden] { display: none !important; }
#cpcalc-sci > .cpcalc-mode { display: flex; width: max-content; margin: 0 0 12px auto; }
.cpcalc-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fbf8f1; }
.cpcalc-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
  .member-app .student-workspace.is-calculator-open.is-suite { grid-template-columns: minmax(0, 1fr) minmax(400px, 44%); }
  .member-app .student-workspace.is-suite .student-calculator-panel { display: flex; flex-direction: column; height: calc(100vh - 110px); }
  .member-app .student-workspace.is-suite .cpcalc-frame { flex: 1; min-height: 0; }
}
@media (max-width: 899px) {
  .member-app .student-workspace.is-suite .student-calculator-panel:not([hidden]) { display: flex !important; flex-direction: column;
    height: 88vh; max-height: 88vh; overflow: hidden; }
  .member-app .student-workspace.is-suite .cpcalc-frame { flex: 1; min-height: 0; }
}

.cpcalc-chooser { width: min(720px, calc(100vw - 32px)); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: 20px;
  background: #fbf8f1; color: var(--ink); box-shadow: 0 30px 80px -20px rgba(12,34,52,.55); overflow: hidden; }
.cpcalc-chooser[open] { display: flex; flex-direction: column; }
.cpcalc-chooser::backdrop { background: rgba(12,34,52,.45); }
.cpcalc-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; }
.member-app .cpcalc-chooser h2 { font: 500 24px/1.2 "Source Serif 4", Georgia, serif; margin: 0; max-width: none; }
.cpcalc-chooser .calculator-close { border: 1px solid var(--line); background: #fff; border-radius: 50%; width: 44px; height: 44px;
  font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.cpcalc-chooser-body { overflow-y: auto; padding: 0 24px 24px; }
.member-app .cpcalc-chooser h3 { font: 600 11.5px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: #976817; margin: 16px 0 8px; max-width: none; }
.cpcalc-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cpcalc-choice { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 12px 14px; min-height: 64px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.cpcalc-choice:hover { border-color: #112f46; box-shadow: 0 8px 22px -16px rgba(17,47,70,.6); }
.cpcalc-choice.is-current { border-color: #c7a268; box-shadow: inset 0 0 0 1px #c7a268; }
.cpcalc-glyph { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #e6eef4; color: #112f46;
  display: inline-grid; place-items: center; font: 500 16px/1 "IBM Plex Mono", ui-monospace, monospace; }
.cpcalc-choice.is-current .cpcalc-glyph { background: #112f46; color: #fffdf7; }
.cpcalc-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpcalc-choice-text strong { font-size: 15px; font-weight: 600; }
.cpcalc-choice-text small { font-size: 13px; line-height: 1.35; color: var(--muted); }
@media (max-width: 600px) {
  .cpcalc-chooser { width: 100vw; max-width: 100vw; max-height: 90vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .cpcalc-chooser-head { padding: 16px 16px 8px; }
  .cpcalc-chooser-body { padding: 0 16px 20px; }
  .cpcalc-choices { grid-template-columns: 1fr; }
}
.cpcalc-chooser { margin: auto; inset: 0; }
@media (max-width: 600px) { .cpcalc-chooser { margin: auto 0 0; } }
.cpcalc-frame { border: 0; border-radius: 12px; }

/* ===== Top bar on every member page, and the calculator docked beside the
   page, 13 Oct =====
   Brand left, the study tools in the middle, who is signed in and Sign out on
   the right. The bar stays at the top while a worksheet scrolls, so the tools
   are always one tap away. */
.member-app .member-top .portal-top-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
.member-top .brand { justify-self: start; }
.member-top .member-tools-nav { justify-self: center; flex-wrap: nowrap; }
.member-top .member-id { justify-self: end; gap: 14px; }
.member-top .md-tool { min-height: 44px; background: rgba(255,255,255,.75); }
.member-top .md-tool[aria-current="page"] { border-color: #112f46; }
@media (max-width: 760px) {
  .member-app .member-top .portal-top-inner { grid-template-columns: auto 1fr auto; gap: 8px; }
  .member-top .member-id .who { display: none; }
  .member-top .md-tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .member-top .md-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .member-top .portal-signout { padding: 10px 12px; }
}
@media (max-width: 420px) { .member-top .wordmark { display: none; } }

/* The calculator: docked at the right edge beside the page on wide screens,
   the page making room for it; a sheet from the bottom below that. */
@media (min-width: 1024px) {
  .member-app .student-calculator-panel:not([hidden]) { position: fixed; top: 84px; right: 16px; bottom: 16px; width: 400px;
    z-index: 25; overflow-y: auto; margin: 0; box-shadow: 0 18px 48px -18px rgba(17,47,70,.35); }
  html.cp-calc-suite .member-app .student-calculator-panel:not([hidden]) { width: min(520px, 42vw); display: flex; flex-direction: column; overflow: hidden; }
  html.cp-calc-suite .member-app .cpcalc-frame { flex: 1; min-height: 0; }
  html.cp-calc-open .member-app > main { padding-right: 416px; transition: padding-right .2s; }
  html.cp-calc-open.cp-calc-suite .member-app > main { padding-right: calc(min(520px, 42vw) + 16px); }
}
@media (max-width: 1023px) {
  .member-app .calculator-trigger { display: inline-flex !important; }
  .member-app .student-calculator-panel:not([hidden]) { display: block !important; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 60; max-height: 82vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 16px 16px 22px;
    box-shadow: 0 -18px 48px rgba(17,47,70,.28); background: #fbf8f1; }
  html.cp-calc-suite .member-app .student-calculator-panel:not([hidden]) { display: flex !important; flex-direction: column;
    height: 88vh; max-height: 88vh; overflow: hidden; }
  html.cp-calc-suite .member-app .cpcalc-frame { flex: 1; min-height: 0; }
}
.member-top .md-tool.is-active { background: #112f46; border-color: #112f46; color: #fffdf7; }
.member-top .member-tools-nav { width: auto; }
.member-top .md-tool { flex: none; }
/* The mentorship header keeps a second row on phones for its clock; the
   member bar has no clock, so it stays one row. */
@media (max-width: 640px) {
  .portal-app .member-top { min-height: 0; }
  .portal-app .member-top .portal-top-inner { min-height: 64px; grid-template-columns: auto 1fr auto; grid-template-rows: auto;
    padding-top: 8px; padding-bottom: 8px; }
  .member-top .member-tools-nav { grid-column: 2; grid-row: 1; }
  .member-top .member-id { grid-column: 3; grid-row: 1; }
}
.member-top .brand { min-height: 44px; }

/* Formula sheets open as the board's PDF: each booklet has Open PDF (new tab)
   and Download; a course with two booklets names each one above its buttons. */
.fs-booklets { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 8px; }
.fs-booklet { display: flex; flex-direction: column; gap: 6px; }
.fs-booklet + .fs-booklet { padding-top: 12px; border-top: 1px solid var(--line); }
.fs-booklet-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fs-booklets .fs-card-acts { margin-top: 0; padding-top: 0; }
