:root {
    --graphite: #2c3033;
    --ink: #24272a;
    --ink-soft: #6b7075;
    --red: #d32100;
    --red-deep: #a81b08;
    --paper: #eef0f1;
    --card: #fff;
    --rule: rgba(36, 39, 42, 0.14);
    --ok: #1f7a4d;
    --warn: #d99b0a;
    --r: 8px;
    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.55; }

.topbar { background: var(--graphite); }
.topbar-in { max-width: 960px; margin: 0 auto; padding: 14px 22px; }
.wordmark { color: #f6f7f8; text-decoration: none; font-weight: 700; letter-spacing: .01em;
    font-size: 15px; display: inline-flex; align-items: center; gap: 9px; }
.wordmark img { width: 26px; height: auto; flex: none; }
.wordmark:hover .wm-t { text-decoration: underline; text-underline-offset: 3px; }
/* sits opposite the brand, at the right edge of the top bar */
.portal-tag { color: #b9bdc0; font-weight: 500; font-size: 15px; letter-spacing: .01em; }
@media (max-width: 560px) { .portal-tag { display: none; } }
.wordmark span { color: #b9bdc0; font-weight: 500; }

main { max-width: 960px; margin: 0 auto; padding: 46px 22px 80px; }

.auth-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
    max-width: 420px; margin: 0 auto; padding: 34px 32px 30px;
    box-shadow: 0 1px 2px rgba(20,25,30,.05), 0 16px 40px -28px rgba(20,25,30,.5);
}
.auth-card.wide { max-width: 620px; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -.01em; margin: 0 0 6px; color: var(--graphite); }
h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 0 0 6px; color: var(--graphite); }
.sub { color: var(--ink-soft); margin: 0 0 22px; font-size: 15px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }

form { display: flex; flex-direction: column; gap: 4px; }
label { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 12px; }
input[type=email], input[type=password] {
    font: inherit; font-size: 16px; padding: 11px 13px; border: 1.5px solid var(--rule);
    border-radius: 7px; background: #fff; color: var(--ink);
}
input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(211,33,0,.12); }
.cf-turnstile { margin: 16px 0 4px; }

/* One button size across the whole portal, matching the home-page actions.
   align-self stops the global `form { flex-direction: column }` from stretching
   a button to the full width of its form. */
.btn {
    margin-top: 14px; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
    padding: 7px 13px; border-radius: 6px; border: 1px solid var(--graphite);
    background: var(--graphite); color: #f6f7f8; text-decoration: none; text-align: center;
    align-self: flex-start; display: inline-block;
}
.btn:hover { background: #1f2325; }
.btn.ghost { background: #fff; color: var(--graphite); }
/* compact variant — the class was on the calendar buttons but never defined,
   so they were rendering at full .btn size */
.btn.sm { margin-top: 0; }
.btn.ghost:hover { background: var(--paper); }

.err { background: #fbeae8; border: 1px solid #e6b3ab; color: var(--red-deep); padding: 11px 14px; border-radius: 7px; font-size: 14.5px; margin: 0 0 6px; }
.ok { background: #e7f3ec; border: 1px solid #a9d6bd; color: var(--ok); padding: 11px 14px; border-radius: 7px; font-size: 14.5px; }
.foot { margin: 20px 0 0; font-size: 14px; }
.foot a, a { color: var(--red-deep); }

.acct-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.acct-top form { margin: 0; }
.panel h2 { margin-top: 0; }

/* ---------- profile edit form ---------- */
.auth-card.wide { max-width: 680px; }
input[type=text], input[type=url], input[type=tel], input[type=search], input:not([type]), textarea {
    font: inherit; font-size: 16px; padding: 11px 13px; border: 1.5px solid var(--rule);
    border-radius: 7px; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(211,33,0,.12); }
.profile-form { gap: 0; }
.profile-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.profile-form .grid2 > div { display: flex; flex-direction: column; }
@media (max-width: 560px) { .profile-form .grid2 { grid-template-columns: 1fr; } }
.hint { font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.form-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.form-actions .btn { margin-top: 0; }
.panel { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
.panel .form-actions { margin-top: 14px; }

/* ---------- image upload controls ---------- */
.sub-head {
    margin: 30px 0 12px; padding-top: 20px; border-top: 1px solid var(--rule);
    font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
}
input[type=file] {
    font: inherit; font-size: 14px; padding: 9px 11px; border: 1.5px dashed var(--rule);
    border-radius: 7px; background: #fff; width: 100%; box-sizing: border-box; cursor: pointer;
}
input[type=file]::file-selector-button {
    font: inherit; font-size: 13px; font-weight: 600; margin-right: 12px; cursor: pointer;
    padding: 7px 12px; border-radius: 5px; border: 1px solid var(--rule);
    background: var(--paper); color: var(--graphite);
}
.media-now {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--rule);
    border-radius: 7px; background: var(--paper);
}
.media-now img { max-height: 60px; max-width: 190px; width: auto; height: auto; object-fit: contain; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; margin-top: 0; cursor: pointer; }
.check input { width: auto; }
.spec { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.spec strong { color: var(--ink); font-weight: 600; }

/* ---------- meeting calendar ---------- */
.yearnav { margin: 0 0 18px; display: flex; gap: 8px; }
.yr {
    font-size: 13px; font-weight: 600; text-decoration: none; padding: 5px 12px;
    border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); background: #fff;
}
.yr.on { background: var(--graphite); border-color: var(--graphite); color: #f6f7f8; }
table.cal { width: 100%; border-collapse: collapse; }
table.cal th {
    text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-soft); padding: 0 0 8px; border-bottom: 1px solid var(--rule);
}
table.cal td { padding: 9px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.cal tr:last-child td { border-bottom: 0; }
table.cal td.d { white-space: nowrap; padding-right: 18px; }
.cal .dow { display: inline-block; width: 34px; color: var(--ink-soft); font-size: 13px; }
.cal .dt { font-weight: 600; }
.cal tr.past td { opacity: .55; }
.cal tr.today td { background: #fffbe9; }
.host.unset { color: var(--ink-soft); font-style: italic; }
.host.nohost { color: var(--red-deep); font-weight: 600; }
.hostpick {
    font: inherit; font-size: 14px; padding: 7px 10px; border: 1.5px solid var(--rule);
    border-radius: 7px; background: #fff; color: var(--ink); max-width: 100%; width: 340px;
}
.hostpick:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(211,33,0,.12); }

/* ---------- member month calendar ---------- */
.monthnav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 16px; }
.monthnav h2 { margin: 0; font-size: 20px; min-width: 210px; text-align: center; }
.mv {
    text-decoration: none; font-size: 18px; line-height: 1; padding: 6px 12px;
    border: 1px solid var(--rule); border-radius: 7px; color: var(--graphite); background: #fff;
}
.mv:hover { background: var(--paper); }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dow-h {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft); text-align: center; padding-bottom: 4px;
}
.day {
    min-height: 82px; border: 1px solid var(--rule); border-radius: 6px; background: #fff;
    padding: 5px 6px; display: flex; flex-direction: column; gap: 3px;
}
.day.blank { background: transparent; border-color: transparent; }
.day .num { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.day.is-today { border-color: var(--red); box-shadow: 0 0 0 2px rgba(211,33,0,.13); }
.day.is-today .num { color: var(--red-deep); }
.day.has-ev { background: #f7faf8; }
.ev { font-size: 11.5px; line-height: 1.3; border-left: 3px solid var(--graphite);
      padding-left: 5px; display: block; text-decoration: none; border-radius: 0 3px 3px 0; }
.ev:hover { background: #f3f5f6; }
.ev:hover .ev-t { text-decoration: underline; text-underline-offset: 2px; }
.ev-t { display: block; font-weight: 700; color: var(--graphite); }
.ev-h { display: block; color: var(--ink-soft); }
.ev.nohost { border-left-color: var(--red-deep); }
.ev.nohost .ev-h { color: var(--red-deep); font-weight: 600; }
.ev.unset .ev-h { font-style: italic; }
.ev.cancelled { border-left-color: var(--silver); text-decoration: line-through; }
.none { margin-top: 14px; text-align: center; }
@media (max-width: 620px) {
    .day { min-height: 62px; }
    .ev-t { display: none; }          /* on phones the host is what matters */
}
.hostpick.co { margin-top: 5px; width: 340px; font-size: 13px; color: var(--ink-soft); }
.check.big { margin-top: 10px; font-size: 14.5px; font-weight: 600; }

/* ---------- portal nav ---------- */
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
/* the nav takes its own line under the brand row, centred */
.pnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    flex: 1 0 100%; justify-content: center; margin-top: 10px; }
.pnav a, .navout {
    font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em;
    color: #cfd3d6; text-decoration: none; padding: 6px 10px; border-radius: 6px;
    background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.pnav a:hover, .navout:hover { background: rgba(255,255,255,.10); color: #fff; }
/* current tab: filled pill so the selected section is unmistakable */
.pnav a.on, .pnav a.on:hover {
    background: #fff; color: var(--graphite); box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.pnav form { display: inline; margin: 0; }
.navout { color: #f0b3a8; }

/* small actions sitting just above the calendar */
.cal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; align-items: center; }
.cal-actions form { flex-direction: row; align-items: center; margin: 0; }
.cal-actions .btn { margin-top: 0; }
@media (max-width: 700px) {
    .pnav { gap: 2px; }
    .pnav a, .navout { font-size: 12px; padding: 5px 7px; }
}

/* ---------- portal home: upcoming notice ---------- */
.callout { border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 18px; margin: 0 0 16px; background: #fff; }
.callout-h { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.callout.next { border-left: 4px solid var(--graphite); }
.callout.you { border-left: 4px solid var(--red); background: #fff8f6; }
.callout.you .callout-h { color: var(--red-deep); }
.callout-b { margin: 0; font-size: 15px; }
.nextdate { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.nextmeta { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.nextmeta .sep { opacity: .5; margin: 0 4px; }
.nexthost { margin: 8px 0 0; font-size: 15px; }
.when {
    display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
    border: 1px solid var(--rule); border-radius: 999px; padding: 2px 9px;
}
.callout.admin { font-size: 14px; background: #fffbe9; border-left: 4px solid #d8a800; }
.callout.admin a { margin-left: 6px; }
table.cal.upnext { margin-bottom: 18px; }
table.cal.upnext th { padding-top: 4px; }
.rost-c {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px;
}
.rost-hidden {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--red-deep); background: #fbeae8; border-radius: 999px; padding: 2px 8px;
}
.rost-addr { margin: 7px 0 0; font-size: 14px; color: var(--ink); line-height: 1.45; }

/* ---------- members-only contact list ---------- */
.sec-h {
    margin: 26px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--graphite);
    display: flex; align-items: center; gap: 9px;
}
.sec-h .sec-n {
    font-size: 10.5px; color: var(--ink-soft); background: var(--paper);
    border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; letter-spacing: .06em;
}
.sec-sub { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 10px; }
.ccard { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; background: #fff; }
.cgrid.legacy .ccard { background: var(--paper); }
.cc-name { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.cc-biz { margin: 2px 0 0; font-size: 14px; color: var(--ink-soft); }
.cc-tags { margin: 8px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.cc-rows {
    display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
    margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--rule);
    font-size: 14px; align-items: baseline;
}
.cc-rows dt {
    font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.cc-rows dd { margin: 0; word-break: break-word; }
.cc-rows dd a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); }
.cc-rows dd a:hover { border-bottom-color: var(--red); }
.cc-addr { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.cc-note { margin: 8px 0 0; font-size: 13px; font-style: italic; color: var(--ink-soft); }
.mtable td { vertical-align: middle; }
.mtable form { margin: 0; }
.mt-n { display: block; font-weight: 600; }
.mt-b { display: block; font-size: 13px; color: var(--ink-soft); }
.mt-nologin { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-soft); border: 1px dashed var(--rule); border-radius: 999px; padding: 1px 7px; }
.mt-dash { color: var(--ink-soft); }
.toggle {
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
    padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule);
    background: #fff; color: var(--ink-soft);
}
.toggle:hover:not([disabled]) { border-color: var(--graphite); color: var(--graphite); }
.toggle.on { background: var(--graphite); border-color: var(--graphite); color: #f6f7f8; }
.toggle.on.warn { background: var(--red-deep); border-color: var(--red-deep); }
.toggle.on.gold { background: #a37211; border-color: #a37211; color: #fffdf7; }
.toggle[disabled] { opacity: .5; cursor: default; }

/* ---------- suggested updates ---------- */
.sugg { border: 1px solid var(--rule); border-radius: var(--r); padding: 15px 17px; margin-bottom: 14px; background: #fff; }
.sugg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.diff { width: 100%; border-collapse: collapse; font-size: 14px; }
.diff th {
    text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft); padding-bottom: 5px; border-bottom: 1px solid var(--rule);
}
.diff td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; word-break: break-word; }
.diff tr:last-child td { border-bottom: 0; }
.diff td.f { font-weight: 600; white-space: nowrap; }
.diff td.was { color: var(--ink-soft); text-decoration: line-through; }
.diff td.now { color: var(--ok); font-weight: 600; }
.sugg-note { margin: 10px 0 0; font-size: 13.5px; font-style: italic; color: var(--ink-soft); }
.sugg .form-actions { margin-top: 14px; }
.sugg .form-actions form { margin: 0; }
.cc-sugg { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--rule); font-size: 12.5px; }
.cc-sugg a { color: var(--red-deep); text-decoration: none; border-bottom: 1px solid var(--rule); }
.cc-sugg a:hover { border-bottom-color: var(--red-deep); }
.retired-tag {
    display: inline-block; margin-right: 5px;
    font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--ink-soft);
    border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; vertical-align: 1px;
}

/* the contact list is a data page, not a form — give it room */
.auth-card.xl { max-width: 1400px; }
/* Calendar: a wider card lets the intro sit on fewer lines and gives the month
   grid room, so the whole month fits without scrolling. The actions ride up
   beside the heading rather than taking their own row. */
/* Members table: onboarding state at a glance */
/* small pill under the member name — deliberately smaller than the toggles */
.signin { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; color: var(--ink-soft); }
.signin.si-ok { color: var(--ok); border-color: #a9d6bd; background: #f2f9f5; }
.signin.si-warn { color: #a8620b; border-color: #e6cfa8; background: #fdf7ec; }
.signin.si-none { border-style: dashed; }
/* the members table needs the room — names were wrapping to three lines */
.auth-card.mwide { max-width: 920px; }
.mtable td, .mtable th { vertical-align: middle; }
/* "No login" rows are marked by muting the secondary text and softening the
   controls — the shared .cal tr.past blanket opacity (.55) washed out the
   member name and the status tag, which are the two things worth reading. */
.mtable tr.past td { opacity: 1; }
.mtable tr.past .mt-n { color: var(--ink-soft); font-weight: 600; }
.mtable tr.past .mt-b { color: #9aa0a5; }
.mtable tr.past .toggle, .mtable tr.past .btn { opacity: .8; }
/* Control columns: centre the header over its control. The global
   `form { display:flex; flex-direction:column }` stretches each button across
   its cell, so the header text never lined up with the button's label. */
.mtable th + th, .mtable td + td { text-align: center; }
.mtable td + td form { align-items: center; }
.mtable th, .mtable td { padding-left: 8px; padding-right: 8px; }
.mtable th:first-child, .mtable td:first-child { padding-left: 0; text-align: left; }
.mtable th:last-child, .mtable td:last-child { padding-right: 0; }

.auth-card.cal { max-width: 1000px; }
.cal-head { flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; }
.cal-head > div:first-child { flex: 1 1 420px; }
.cal-head .sub { margin-bottom: 0; max-width: 68ch; }
.cal-head .cal-actions { margin: 19px 0 0; flex: 0 0 auto; }
@media (max-width: 520px) {
    .cgrid { grid-template-columns: 1fr; }
}
/* Screen-reader-only text. Also defined in site.css; without it here the
   portal's hidden <label>s render as visible text inside the search bar. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* search box — these live in site.css for the public site; the portal loads
   only portal.css, so without them the icon's <circle> renders as a big black
   filled dot at default size. */
.finder {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--rule); background: #fff;
    border-radius: 7px; padding: 0 13px;
}
.finder:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(211,33,0,.12); }
.finder-icon {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round;
}
.finder input[type=search] {
    flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none;
    font: inherit; font-size: 15px; color: var(--ink); padding: 11px 0;
}
.finder input[type=search]:focus { outline: none; box-shadow: none; border: 0; }
.finder input[type=search]::-webkit-search-cancel-button { display: none; }
.finder-clear {
    border: 0; background: transparent; color: var(--ink-soft);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 2px;
}
.finder-clear:hover { color: var(--ink); }
.finder.cfind { margin: 4px 0 10px; max-width: 100%; }
.ccard[hidden], .cgrid[hidden], .sec-h[hidden], .sec-sub[hidden] { display: none !important; }
.no-hits { margin: 14px 0; color: var(--ink-soft); font-size: 14.5px; }
.sub.notice {
    background: #fffbe9; border: 1px solid #e6d9a8; border-left: 4px solid #d8a800;
    border-radius: var(--r); padding: 11px 14px; color: var(--ink); line-height: 1.5;
}
.cc-addr.home { border-top: 0; padding-top: 4px; margin-top: 4px; }
.addr-tag {
    display: inline-block; margin-right: 6px;
    font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--red-deep);
    border: 1px solid #e6b3ab; background: #fbeae8; border-radius: 999px; padding: 1px 6px;
}


/* ---------- dues ---------- */
.dues-sum { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.ds { flex: 1 1 120px; border: 1px solid var(--rule); border-radius: var(--r);
      padding: 12px 14px; background: #fff; }
.ds-n { display: block; font-size: 22px; font-weight: 700; color: var(--graphite);
        font-variant-numeric: tabular-nums; }
.ds-l { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
        text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.ds.bad { border-color: #e6b3ab; background: #fdf4f2; }
.ds.bad .ds-n { color: var(--red-deep); }

.dues-row { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.dues-t .di { font-size: 13px; padding: 5px 8px; width: auto; }
.dues-t .amt { width: 84px; }
.dues-t .note { width: 130px; }
.dues-t td { padding-top: 11px; padding-bottom: 11px; }

/* member home: unpaid dues notice */
.dues-alert { border: 1px solid #e6b3ab; border-left: 5px solid var(--red);
    background: #fdf4f2; border-radius: var(--r); padding: 16px 18px; margin: 0 0 18px; }
.dues-alert h2 { color: var(--red-deep); margin: 0 0 4px; font-size: 19px; }
.dues-alert p { margin: 0; font-size: 15px; color: var(--ink); }

.inline-form { display: inline-flex; margin-top: 10px; }

/* ---------- nav dropdown (admin) ---------- */
.pmenu { position: relative; display: inline-block; }
.pmenu-btn {
    font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em;
    color: #cfd3d6; padding: 6px 10px; border-radius: 6px; white-space: nowrap;
    background: none; border: 0; cursor: pointer;
}
.pmenu-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.pmenu-btn.on { background: #fff; color: var(--graphite); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.pmenu-btn .caret { font-size: 10px; margin-left: 2px; opacity: .8; }
.pmenu-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: max-content;
    background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 5px;
    box-shadow: 0 2px 4px rgba(20,25,30,.06), 0 18px 40px -22px rgba(20,25,30,.55);
}
.pmenu-pop a {
    display: block; padding: 8px 11px; border-radius: 5px; text-decoration: none;
    font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right;
}
.pmenu-pop a:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 700px) {
    .pmenu-btn { font-size: 12px; padding: 5px 7px; }
}

/* ---------- attendance ---------- */
.attn-t .bigcheck { width: 20px; height: 20px; accent-color: var(--graphite); cursor: pointer; }
.attn-t .bigcheck.na { accent-color: #a37211; }
.attn-t th + th, .attn-t td + td { text-align: center; }
.mtg-pick.later { opacity: .55; }

.attn-low { color: var(--red-deep); font-weight: 700; }

/* ---------- attendance leaderboard ---------- */
.board { border: 1px solid var(--rule); border-radius: var(--r); padding: 15px 18px; margin: 0 0 16px; background: #fff; }
.attn-mine { margin: 6px 0 4px; font-size: 15px; }
.attn-mine strong { font-size: 20px; margin-right: 8px; }
.attn-detail { color: var(--ink-soft); }
.lb-head { margin: 14px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft); }
.lb { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-star { color: #c9a227; margin-left: 5px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 7px; }
.lb-row.mine { background: #fff8f6; }
.lb-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
    background: var(--paper-2); color: var(--graphite); }
.lb-row.rk1 .lb-rank { background: #c9a227; color: #fff; }   /* gold */
.lb-row.rk2 .lb-rank { background: #9aa0a5; color: #fff; }   /* silver */
.lb-row.rk3 .lb-rank { background: #b07a3c; color: #fff; }   /* bronze */
.lb-name { flex: 1; font-weight: 600; color: var(--ink); }
.lb-n { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--graphite); }
.lb-u { font-weight: 500; font-size: 12.5px; color: var(--ink-soft); }

/* role/status dropdowns on the Members admin table */
.roleselect {
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
    padding: 5px 8px; border: 1.5px solid var(--rule); border-radius: 6px;
    background: #fff; cursor: pointer; max-width: 100%;
}
.roleselect:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(211,33,0,.12); }
.roleselect:disabled { opacity: .55; cursor: default; }
.roleselect.susp { border-color: #e6b3ab; background: #fdf4f2; color: var(--red-deep); }

/* ---------- RSVP on the portal home ---------- */
.nextloc { margin: 6px 0 0; font-size: 15px; }
.rsvp-mini { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.rsvp-tally { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.rt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      border-radius: 999px; padding: 2px 9px; border: 1px solid var(--rule); color: var(--ink-soft); }
.rt.yes { color: var(--ok); border-color: #a9d6bd; background: #f2f9f5; }
.rt.no { color: var(--red-deep); border-color: #e6b3ab; background: #fdf4f2; }
.rt.pending { border-style: dashed; }
.rsvp-names { margin: 3px 0; font-size: 14px; }
.rsvp-names.muted { color: var(--ink-soft); }
.rsvp-you { margin: 8px 0 0; font-size: 14px; font-weight: 600; }

/* admin-set notice at the top of the portal home — same shape as the other
   callouts (Next meeting / You're hosting), with its own accent */
/* Member Notice — deliberately the loudest box on the page so an announcement
   isn't missed: gold rule all round, tinted ground, amber heading. */
.callout.note {
    border: 1px solid #e3c98f; border-left: 6px solid #c9a227;
    background: #fffbef; box-shadow: 0 1px 0 rgba(160,120,20,.10);
}
.callout.note .callout-h { color: #8a6d1b; }
.note-body { white-space: pre-line; font-size: 15.5px; }

/* the invite button in the "You're hosting" box needs air under the date line */
.callout.you .callout-b .btn { margin-top: 10px; }

/* ---------- member home: two columns ---------------------------------------
   Full-width band across the top for anything needing the member's attention
   (notice, dues owed, you're hosting), then the schedule on the left and
   attendance on the right so neither pushes the other down the page. */
.auth-card.home { max-width: 1080px; }
.home-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
             gap: 16px; align-items: start; }
.home-grid > .span2 { grid-column: 1 / -1; }
.home-col { display: flex; flex-direction: column; gap: 16px; }
/* the boxes carry their own bottom margin for the stacked layout; inside the
   grid the gap owns spacing, so zero them or the rows drift apart */
.home-grid .callout, .home-grid .board,
.home-grid .dues-alert, .home-grid table.cal.upnext { margin-bottom: 0; }

/* "Also coming up" as a card like the rest, heading instead of a table header */
.board.upnext-card > table.cal.upnext { margin: 4px 0 0; width: 100%; }
.board.upnext-card td { border-bottom: none; }
.board.upnext-card tr + tr td { border-top: 1px solid var(--rule); }

/* One box style, two accents. This page had four different treatments doing
   the same job; now every box is the same card and the LEFT BAR carries the
   meaning: graphite = information, red = needs you. Scoped to .home-grid so
   the rest of the portal is untouched. */
.home-grid .callout,
.home-grid .board        { border-left: 4px solid var(--graphite); }
.home-grid .callout.you,
.home-grid .dues-alert   { border-left: 4px solid var(--red);
                           border-top: 1px solid var(--rule);
                           border-right: 1px solid var(--rule);
                           border-bottom: 1px solid var(--rule);
                           border-radius: var(--r); }

.acct-pw { margin-left: 10px; font-size: 12.5px; }

/* signed-in header: person first and largest, then company, then email */
.acct-top h1 { margin-bottom: 1px; }
.acct-org { margin: 0 0 3px; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.acct-top .sub { font-size: 13.5px; margin-bottom: 0; }

/* reply to the next meeting from inside the portal */
.rsvp-you.unanswered { color: var(--red-deep); font-weight: 600; }
.rsvp-pick { flex-direction: row; align-items: center; flex-wrap: wrap;
             gap: 7px; margin: 8px 0 0; }
.rsvp-pick .btn { margin-top: 0; }
.rsvp-pick-l { font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
               margin-right: 2px; }
/* The SELECTED reply carries its meaning in colour; the others stay outlined
   so only the current answer is emphasised. Amber takes dark text — white on
   yellow doesn't reach a readable contrast. */
.rsvp-pick .btn.rs-yes:not(.ghost)   { background: var(--ok);   border-color: var(--ok);   color: #fff; }
.rsvp-pick .btn.rs-no:not(.ghost)    { background: var(--red);  border-color: var(--red);  color: #fff; }
.rsvp-pick .btn.rs-maybe:not(.ghost) { background: var(--warn); border-color: var(--warn); color: var(--graphite); }
.rsvp-pick .btn.rs-yes:not(.ghost):hover   { background: #1a6a42; border-color: #1a6a42; }
.rsvp-pick .btn.rs-no:not(.ghost):hover    { background: var(--red-deep); border-color: var(--red-deep); }
.rsvp-pick .btn.rs-maybe:not(.ghost):hover { background: #c28908; border-color: #c28908; }
/* outlined state: a hint of the colour on hover so the choice reads before the click */
.rsvp-pick .btn.ghost.rs-yes:hover   { border-color: var(--ok);   color: var(--ok); }
.rsvp-pick .btn.ghost.rs-no:hover    { border-color: var(--red);  color: var(--red-deep); }
.rsvp-pick .btn.ghost.rs-maybe:hover { border-color: var(--warn); color: #8a6206; }

/* past meeting: RSVP against actual attendance */
.said { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        border-radius: 999px; padding: 2px 9px; border: 1px solid var(--rule); color: var(--ink-soft); }
.said-yes { color: var(--ok); border-color: #a9d6bd; background: #f2f9f5; }
.said-no { color: var(--red-deep); border-color: #e6b3ab; background: #fdf4f2; }
.said-maybe { color: #8a6206; border-color: #e8d3a0; background: #fdf8ec; }
.said-none { border-style: dashed; }
/* said they'd be there and weren't — the row worth noticing */
tr.brokeword td { background: #fdf4f2; }
tr.brokeword td:last-child { color: var(--red-deep); font-weight: 700; }
.ref-dot { color: var(--ok); font-weight: 700; }

/* SMS consent sits with the cell number it applies to */
.sms-consent { margin: 14px 0 4px; padding: 13px 15px; border: 1px solid var(--rule);
               border-left: 4px solid var(--graphite); border-radius: var(--r); background: #fff; }
.sms-consent .check { font-size: 14.5px; font-weight: 600; }
.sms-consent .spec { margin: 6px 0 0; }

@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }