/* RSNC member portal, laid out like WSTR's Member Services: black top bar, silver title
   band, then a white "Member Links" box beside the page content. White page. Mobile first. */
:root {
  --p-fg: #0f1012; --p-ink-2: #33363b; --p-muted: #65696f; --p-line: #dfe2e6; --p-soft: #fafbfc; --p-silver-line: #c8ccd2;
  --p-black: #0b0a09; --p-gold: #d5a950; --p-gold-hover: #e3c37f; --p-gold-text: #7a5a14;
  --p-red: #9d0001; --p-red-dark: #7a0001; --p-ok: #2f6b3a;
  /* Same honeycomb silver as the RSNC admin header band */
  --p-honeycomb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.07' height='15.72' viewBox='0 0 9.07 15.72'%3E%3Cpath d='M4.54 -0.27 L8.17 1.83 L8.17 6.03 L4.54 8.13 L0.90 6.03 L0.90 1.83Z M4.54 15.45 L8.17 17.55 L8.17 21.75 L4.54 23.85 L0.90 21.75 L0.90 17.55Z M4.54 -15.99 L8.17 -13.89 L8.17 -9.69 L4.54 -7.59 L0.90 -9.69 L0.90 -13.89Z M0.00 7.59 L3.64 9.69 L3.64 13.89 L0.00 15.99 L-3.64 13.89 L-3.64 9.69Z M9.07 7.59 L12.71 9.69 L12.71 13.89 L9.07 15.99 L5.44 13.89 L5.44 9.69Z M0.00 -8.13 L3.64 -6.03 L3.64 -1.83 L0.00 0.27 L-3.64 -1.83 L-3.64 -6.03Z M9.07 -8.13 L12.71 -6.03 L12.71 -1.83 L9.07 0.27 L5.44 -1.83 L5.44 -6.03Z' fill='%230f1012' fill-opacity='0.055' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='0.6'/%3E%3C/svg%3E");
  --p-wide: 'Big Shoulders Display', 'Bebas Neue', sans-serif;
  --p-cond: 'Bebas Neue', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
body.portal { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #fff; color: var(--p-fg); font: 400 16px/1.5 'Barlow', system-ui, sans-serif; }
.portal a { color: inherit; }
.portal-main a:not(.portal-btn) { color: var(--p-fg); text-decoration-color: var(--p-red); text-underline-offset: 3px; }
.portal-main a:not(.portal-btn):hover { color: var(--p-red); }
.portal-wrap { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }

/* Top bar */
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--p-black); color: #fff; border-bottom: 3px solid var(--p-gold); }
.portal-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff !important; }
.portal-brand img { height: 40px; width: auto; }
.portal-brand span { font-family: var(--p-cond); font-size: 26px; letter-spacing: .04em; line-height: 1; }
.portal-who { min-width: 0; font-size: 14px; color: #cfcfcf; }
.portal-who span { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Header band: the same honeycomb silver band, gold eyebrow and gold rule as the RSNC admin */
.portal-band { position: relative; isolation: isolate; background: linear-gradient(180deg, #f8f9fa 0%, #e8eaee 50%, #d3d7dd 100%); border-bottom: 1px solid var(--p-silver-line); }
.portal-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--p-honeycomb); background-size: 9.07px 15.72px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 35%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 35%, transparent 92%); }
.portal-band .portal-wrap { padding-top: 22px; padding-bottom: 20px; }
.portal-band .portal-eyebrow { font-family: var(--p-cond); font-size: 15px; letter-spacing: .26em; color: var(--p-gold-text); margin-bottom: 4px; text-transform: uppercase; }
.portal-band h1 { margin: 0; font-family: 'Big Shoulders Display', 'Bebas Neue', sans-serif; font-weight: 900; font-size: clamp(34px, 9vw, 64px); line-height: .92; letter-spacing: .005em; text-transform: uppercase; color: var(--p-fg); }
.portal-band h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; background: linear-gradient(90deg, var(--p-gold), rgba(213,169,80,0)); }

/* Shell: Member Links box + content */
.portal-shell { flex: 1; display: flex; flex-direction: column; gap: 20px; padding-top: 20px; padding-bottom: 40px; }
.portal-main { flex: 1; min-width: 0; }
body.portal > .portal-main { padding-top: 24px; padding-bottom: 40px; }
.portal-side { align-self: stretch; background: #fff; border: 1px solid var(--p-line); border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.05); padding: 16px; }
.portal-side h2 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 3px solid var(--p-line); font-family: var(--p-wide); font-weight: 900; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
.portal-side nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0 0 14px; }
.portal-side nav a { display: flex; align-items: center; min-height: 44px; padding: 2px 0 0 14px; border-left: 3px solid var(--p-line); font-family: var(--p-cond); font-size: 20px; letter-spacing: .04em; line-height: 1.05; text-decoration: none; color: var(--p-fg) !important; }
.portal-side nav a:hover { border-left-color: var(--p-gold); }
.portal-side nav a[aria-current="page"] { border-left-color: var(--p-gold); color: var(--p-gold-text) !important; }

/* Headings inside the content */
.portal h1, .portal h2 { margin: 0; line-height: 1; }
.portal-head { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--p-line); position: relative; }
.portal-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: linear-gradient(90deg, var(--p-gold), rgba(213,169,80,0)); }
.portal-head h1 { font-family: var(--p-wide); font-weight: 900; font-size: 22px; letter-spacing: .01em; text-transform: uppercase; }
.portal-h2 { margin: 28px 0 12px !important; font-family: var(--p-wide); font-weight: 900; font-size: 18px; text-transform: uppercase; }
.portal-panel h1, .portal-panel h2, .portal-board h2, .portal-show h2 { font-family: var(--p-cond); font-weight: 400; letter-spacing: .03em; }
.portal-small { font-size: 14px; color: var(--p-muted); }

/* Buttons */
.portal-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 2px solid var(--p-gold); border-radius: 2px; background: var(--p-gold); color: #000 !important; font: 400 22px/1 var(--p-cond); letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.portal-btn:hover { background: var(--p-gold-hover); border-color: var(--p-gold-hover); }
.portal-btn-ghost { background: #fff; border-color: var(--p-black); min-height: 44px; font-size: 19px; }
.portal-btn-ghost:hover { background: var(--p-black); border-color: var(--p-black); color: #fff !important; }
.portal-btn-dark { min-height: 46px; padding: 0 18px; background: var(--p-black); border-color: var(--p-black); color: #fff !important; font-size: 21px; }
.portal-btn-dark:hover { background: #2a2b2f; border-color: #2a2b2f; }

/* Signed out */
.portal-hero { max-width: 640px; padding: 8px 0 24px; }
.portal-hero h1 { font-family: var(--p-wide); font-weight: 900; font-size: 26px; text-transform: uppercase; margin: 0 0 12px; }
.portal-hero p { margin: 0 0 18px; }
.portal-eyebrow { font-family: var(--p-cond); font-size: 17px; letter-spacing: .2em; color: var(--p-gold-text); margin-bottom: 6px; }

.portal-panel { background: #fff; border: 1px solid var(--p-line); border-radius: 4px; padding: 18px 16px; margin: 0 0 18px; }
.portal-panel h1, .portal-panel h2 { font-size: 28px; margin-bottom: 10px; }
.portal-notice { margin: 0 0 18px; padding: 10px 14px; border-left: 4px solid var(--p-gold); border-radius: 2px; background: #fbf3df; font-size: 14px; }
.portal-flash { padding: 10px 14px; border-radius: 3px; background: #e6f0e7; color: var(--p-ok); font-weight: 600; }
.portal-error { padding: 10px 14px; border-radius: 3px; background: #fbe6e6; color: var(--p-red); font-weight: 600; }

/* Overview: cards with their details underneath */
.portal-members { display: grid; gap: 28px; }
.portal-member { min-width: 0; }
.portal-card { margin: 0 0 14px; }
.portal-card .mcard { box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.portal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0 0 14px; }
.portal-facts div { min-width: 0; }
.portal-facts dt { font-family: var(--p-cond); font-size: 17px; letter-spacing: .08em; color: var(--p-fg); }
.portal-facts dd { margin: 0; font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.portal-ok { color: var(--p-ok); font-weight: 700; }
.portal-bad { color: var(--p-red); font-weight: 700; }

/* Forms */
.portal-form { display: grid; gap: 14px; max-width: 420px; }
.portal-form label { display: grid; gap: 4px; font-weight: 600; font-size: 15px; }
.portal-form input { width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid #8d939b; border-radius: 3px; font: inherit; font-size: 16px; background: #fff; }
.portal-form input:focus, .portal-filter select:focus { outline: 3px solid var(--p-gold); border-color: var(--p-fg); }
.portal-form .portal-btn { justify-self: start; }

/* Family switcher, season filter */
.portal-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.portal-picker a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--p-line); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 600; }
.portal-picker a[aria-current="page"] { background: var(--p-black); border-color: var(--p-black); color: #fff !important; }
.portal-filter { margin: 0 0 18px; }
.portal-filter label { display: inline-grid; gap: 4px; font-weight: 600; font-size: 14px; }
.portal-filter.portal-filter-wide label { display: grid; width: 100%; font-size: 16px; font-weight: 700; }
.portal-filter.portal-filter-wide select { width: 100%; min-height: 52px; font-size: 18px; }
.portal-filter select { min-height: 44px; min-width: 200px; padding: 0 12px; border: 1px solid #8d939b; border-radius: 3px; font: inherit; font-size: 16px; background: #fff; }

/* Totals */
.portal-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.portal-stats div { background: #fff; border: 1px solid var(--p-line); border-bottom: 3px solid var(--p-gold); border-radius: 3px; padding: 12px 14px; }
.portal-stats b { display: block; font-family: var(--p-cond); font-weight: 400; font-size: 34px; line-height: 1; }
.portal-stats span { font-size: 13px; color: var(--p-muted); letter-spacing: .04em; }

/* Standings: National / State rank tiles, which also switch the table below */
.portal-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.portal-ranks a { display: grid; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--p-line); border-bottom: 3px solid var(--p-line); border-radius: 3px; text-decoration: none !important; color: var(--p-fg) !important; }
.portal-ranks a[aria-current="page"] { border-color: var(--p-black); border-bottom-color: var(--p-gold); box-shadow: 0 3px 10px -5px rgba(15,16,18,.25); }
.portal-ranks span { font-family: var(--p-cond); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
.portal-ranks b { font-family: 'Big Shoulders Display', 'Bebas Neue', sans-serif; font-weight: 900; font-size: 44px; line-height: .95; }
.portal-ranks small { font-size: 13px; color: var(--p-muted); }

/* Results by show, standings boards */
.portal-show, .portal-board { background: #fff; border: 1px solid var(--p-line); border-radius: 4px; margin: 0 0 16px; overflow: hidden; }
.portal-show > header, .portal-board > header { padding: 12px 16px; border-bottom: 1px solid var(--p-line); background: var(--p-soft); }
.portal-show time { font-family: var(--p-cond); font-size: 16px; letter-spacing: .1em; color: var(--p-gold-text); }
.portal-show h2, .portal-board h2 { font-size: 24px; }
.portal-show header p, .portal-board header p { margin: 2px 0 0; font-size: 14px; color: var(--p-muted); }
.portal-board header p b { font-family: var(--p-cond); font-weight: 400; font-size: 26px; color: var(--p-fg); }

.portal-table-wrap { width: 100%; }
.portal-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.portal-table th { text-align: left; font-family: var(--p-cond); font-weight: 400; font-size: 16px; letter-spacing: .08em; color: var(--p-muted); padding: 8px 12px; border-bottom: 2px solid var(--p-line); white-space: nowrap; }
.portal-table td { padding: 9px 12px; border-bottom: 1px solid #efeeeb; vertical-align: top; }
.portal-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.portal-table td small { display: block; font-size: 12px; color: var(--p-muted); }
.portal-table tr.is-paid td { background: #fbf5e6; }
.portal-table tr.is-me td { background: #f8ecd0; font-weight: 700; }
.portal-table tr.is-current td { background: var(--p-soft); }
.portal-table tfoot td { padding: 14px 12px; font-weight: 700; font-size: 16px; background: var(--p-soft); border-top: 2px solid var(--p-line); }
.portal-table small.portal-inline { display: inline; font-size: 14px; }
.portal-gap td { text-align: center; color: var(--p-muted); padding: 2px; }
.portal-you { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--p-gold); color: #000; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }

.portal-foot { padding: 18px 16px; background: var(--p-black); color: #a9a9a9; font-size: 13px; text-align: center; }

/* Phones: each table row becomes a small card with labels */
@media (max-width: 599px) {
  .portal-table thead { display: none; }
  .portal-table, .portal-table tbody, .portal-table tr, .portal-table td { display: block; }
  .portal-table tr { padding: 8px 14px; border-bottom: 1px solid #efeeeb; }
  .portal-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .portal-table td::before { content: attr(data-label); font-family: var(--p-cond); font-size: 15px; letter-spacing: .08em; color: var(--p-muted); text-align: left; flex: 0 0 auto; }
  .portal-table td[data-label="Class"], .portal-table td[data-label="Member"], .portal-table td[data-label="Season"], .portal-table td[data-label="Show"] { text-align: left; font-size: 16px; }
  .portal-table td[data-label="Class"]::before, .portal-table td[data-label="Member"]::before, .portal-table td[data-label="Season"]::before, .portal-table td[data-label="Show"]::before { display: none; }
  .portal-table td small { display: inline; margin-left: 6px; }
  .portal-gap { display: none !important; }
  .portal-board .portal-table tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  .portal-board .portal-table td { display: block; padding: 2px 0; text-align: left; }
  .portal-board .portal-table td::before { display: none; }
  .portal-board .portal-table td[data-label="State"], .portal-board .portal-table td[data-label="Show days"], .portal-board .portal-table td[data-label="Rating"] { display: none; }
  .portal-board .portal-table td[data-label="Rank"] { font-family: 'Big Shoulders Display', 'Bebas Neue', sans-serif; font-weight: 900; font-size: 22px; }
  .portal-board .portal-table td[data-label="Points"] { text-align: right; font-size: 17px; }
  .portal-table tfoot, .portal-table tfoot tr { display: block; }
  .portal-table tfoot td:first-child { display: none; }
  .portal-table tfoot td:last-child::before { content: "Season total"; font-family: var(--p-cond); color: var(--p-fg); }
  .portal-table td[data-label="Event"] { flex-direction: column; text-align: left; }
  .portal-table td[data-label="Event"]::before { display: none; }
}

@media (min-width: 700px) {
  .portal-wrap { padding-left: 24px; padding-right: 24px; }
  .portal-who span { display: inline; }
  .portal-band .portal-wrap { padding-top: 34px; padding-bottom: 26px; }
  .portal-band .portal-eyebrow { font-size: 17px; margin-bottom: 6px; }
  .portal-head h1 { font-size: 30px; }
  .portal-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal-panel { padding: 24px; }
  .portal-members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
}

@media (min-width: 1000px) {
  .portal-wrap { padding-left: 40px; padding-right: 40px; }
  .portal-shell { flex-direction: row; align-items: flex-start; gap: 40px; padding-top: 40px; padding-bottom: 64px; }
  .portal-side { flex: 0 0 300px; align-self: flex-start; padding: 22px 22px 24px; }
  .portal-side nav { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .portal-head h1 { font-size: 36px; }
}