/* ============================================================================
   Members portal. Loads after the Society's main.css and inherits every custom
   property from it: the same crimson, gold, cream, Charis SIL headings, Open Sans
   body. Nothing here invents a colour or a typeface, so the portal cannot drift
   away from the public site without someone editing this file on purpose.

   The header, its brand lockup and its dropdowns come from main.css unchanged.
   What lives here is only what the public site has no use for: the account menu
   inside the nav, the forms, the directory list and the administration tables.
   ========================================================================= */

/* ---------- page ---------- */
/* A short page still has to fill the window, or the white footer ends ten pixels above the
   bottom and a cream strip under it reads as unfinished. */
body.portal{min-height:100vh;display:flex;flex-direction:column}
/* main.css already gives <main> its max-width, auto margins and gutter. With no sidebar
   beside it that rule is correct, so the portal does not override it. */
body.portal main#main{flex:1 0 auto;width:100%}
body.portal footer.site{margin-top:auto;border-top-width:4px}

/* iOS Safari paints a native button face behind anything it reads as a button, which is the
   blue-grey that appeared behind Sign out on a phone and not on a desktop. The nav's buttons
   are meant to look like links, so the native face is turned off rather than recoloured. */
button{appearance:none;-webkit-appearance:none;background:none}

/* ---------- the account menu inside the nav ---------- */
/* main.css styles dropdown LINKS. Signing out has to be a POST, so it is a form with a
   button, and that button has to be indistinguishable from the links above it. */
.dropdown .nav-form{margin:0}
.dropdown button.nav-link{
  display:block;width:100%;text-align:left;padding:.45rem .9rem;
  font:inherit;font-size:.92rem;font-weight:400;color:var(--ink);
  border:0;border-radius:0;cursor:pointer;white-space:nowrap;
}
.dropdown button.nav-link:hover{background:var(--crimson-100);color:var(--crimson-900)}

/* On a phone main.css hides dropdowns, because every page on the public site lists its own
   children. In the portal the dropdown IS the navigation, so its children are shown inline:
   the open menu is one scrollable panel and nothing becomes unreachable. */
@media (max-width:60rem){
  nav.main .dropdown{
    display:block;position:static;min-width:0;border:0;box-shadow:none;background:none;
    padding:0;border-radius:0;
  }
  nav.main .dropdown ul{padding:0 0 .4rem}
  nav.main .dropdown a,
  nav.main .dropdown button.nav-link{
    padding:.6rem .5rem .6rem 1.2rem;font-size:.95rem;white-space:normal;
    border-bottom:1px solid var(--rule);text-align:left;
  }
  nav.main .nav-item > a{font-weight:700}
  nav.main .nav-item .caret{display:none}
  nav.main .nav-form{border-bottom:1px solid var(--rule)}
  nav.main .nav-form button.nav-link{border-bottom:0}
}

/* ---------- flashes ---------- */
.flashes{margin:0 0 1.4rem}
.flash{
  padding:.7rem .95rem;border-radius:var(--radius);margin:0 0 .5rem;max-width:none;
  border-left:4px solid var(--crimson-600);background:var(--crimson-100);color:var(--crimson-900);
  font-size:.95rem;
}
.flash-ok{border-left-color:#1F6B3A;background:#E7F2EB;color:#154D29}
.flash-error{border-left-color:var(--crimson-600);background:#FBE9E7;color:var(--crimson-900)}

/* ---------- sign in, first visit, set a password, change password ---------- */
.auth-card{
  background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--gold-500);
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.4rem);
  max-width:30rem;margin:2.4rem auto 4rem;
}
.auth-card .page-head{border-bottom:0;margin-bottom:1.2rem;padding-bottom:0}
.auth-card p,.auth-card ul{max-width:none}
.auth-alt{margin-top:1.4rem;font-size:.92rem;color:var(--ink-muted)}

/* ---------- forms ---------- */
.stack{display:flex;flex-direction:column;gap:.45rem;max-width:26rem}
.form-grid{display:flex;flex-direction:column;gap:1.4rem;max-width:52rem}
fieldset{border:1px solid var(--rule);border-radius:var(--radius);padding:1.1rem 1.2rem 1.3rem;
  background:var(--paper);margin:0}
legend{font-family:var(--font-head);font-weight:700;color:var(--crimson-900);
  font-size:1.05rem;padding:0 .45rem}
label{display:block;font-size:.85rem;font-weight:600;color:var(--ink-muted);margin:.7rem 0 .25rem}
fieldset label:first-of-type{margin-top:0}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],
input:not([type]),select,textarea{
  width:100%;padding:.55rem .65rem;font:inherit;font-size:.97rem;color:var(--ink);
  background:var(--paper);border:1px solid #C9BFA8;border-radius:var(--radius);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--crimson-600);outline-offset:1px;border-color:var(--crimson-600);
}
input::placeholder{color:#9A938A}
.row{display:flex;flex-wrap:wrap;gap:.9rem}
.row > div{flex:1 1 12rem}
.row > div.narrow{flex:0 1 8rem}
.narrow-field{max-width:12rem;margin-bottom:.2rem}
.hint{font-size:.83rem;color:var(--ink-muted);margin:.35rem 0 0;max-width:46ch}
.form-actions{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  border-top:1px solid var(--rule);padding-top:1.2rem}
.form-actions .btn{margin-top:.4rem}
button.btn{cursor:pointer;font-family:var(--font-body)}
.link-button{background:none;border:0;padding:0;font:inherit;color:var(--crimson-600);
  text-decoration:underline;cursor:pointer}
.inline-form{display:inline;margin:0}
.panel{border-top:1px solid var(--rule);margin-top:2.4rem;padding-top:1.2rem}
.panel h2{font-size:var(--step1);border-bottom:0;padding-bottom:0;margin-bottom:.8rem}

/* ---------- directory ---------- */
.directory-page{max-width:62rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:0 0 .5rem}
.toolbar form{display:contents}
.search-box{flex:1 1 18rem;min-width:10rem}
.chapter-box{flex:0 1 15rem}
.result-count{font-size:.85rem;color:var(--ink-muted);margin:0 0 .8rem;max-width:none}
.member-list{list-style:none;margin:0;padding:0;max-width:none}
.member{padding:.6rem 0;border-bottom:1px solid var(--rule)}
.member[hidden]{display:none}
.member-name{
  font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:var(--crimson-900);
  text-decoration:none;
}
.member-name:hover{color:var(--crimson-600);text-decoration:underline}
.member-meta{margin:.15rem 0 0;font-size:.9rem;color:var(--ink-muted);max-width:none;
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:baseline}
.member-meta a{color:var(--crimson-600);text-decoration:none}
.member-meta a:hover{text-decoration:underline}
.chip{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--crimson-900);background:var(--gold-100);border-radius:100px;padding:.15rem .55rem;
}
.empty-note{padding:2rem 0;color:var(--ink-muted)}
.letter-group{margin:0}
.letter-group[hidden]{display:none}
.letter-head{
  font-family:var(--font-head);font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--crimson-600);border:0;padding:0;margin:1.4rem 0 .1rem;
}
.letter-group:first-child .letter-head{margin-top:.1rem}

/* A phone cannot afford a heading, two stacked controls and a count line before the first
   result: the reader types, the list moves below the fold and nothing appears to happen.
   The heading shrinks, the two controls share one row, and the count becomes a small line
   the eye can skip. */
@media (max-width:48rem){
  .directory-page .page-head{margin-bottom:.8rem;padding-bottom:.4rem}
  .directory-page .page-head .kicker{display:none}
  .directory-page .page-head h1{font-size:1.45rem}
  .toolbar{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem;gap:.5rem;margin-bottom:.3rem}
  .search-box,.chapter-box{min-width:0}
  .toolbar input,.toolbar select{padding:.45rem .5rem;font-size:.95rem}
  .result-count{font-size:.8rem;margin:0 0 .4rem}
  .member{padding:.5rem 0}
  .member-name{font-size:1.02rem}
  .member-meta{font-size:.85rem}
  .letter-head{margin:.9rem 0 0;font-size:.8rem}
}

/* ---------- member card ---------- */
.back{margin:0 0 1rem;font-size:.92rem}
.back a{color:var(--ink-muted);text-decoration:none}
.back a:hover{color:var(--crimson-700)}
.member-card{display:flex;gap:1.6rem;align-items:flex-start;margin-top:.4rem;max-width:52rem}
.portrait{
  width:120px;height:120px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid var(--gold-500);
}
.portrait-initials{
  display:flex;align-items:center;justify-content:center;
  background:var(--crimson-100);color:var(--crimson-900);
  font-family:var(--font-head);font-weight:700;font-size:2.1rem;
}
.member-body{flex:1 1 auto;min-width:0}
.member-body .page-head{margin-bottom:1.2rem}
.facts{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.45rem 1rem;margin:0 0 1.4rem}
.facts dt{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);padding-top:.22rem}
.facts dd{margin:0;line-height:1.55}
.facts a{color:var(--crimson-600)}
.facts dd .small{display:inline-block;margin-top:.45rem}
.small{font-size:.85rem}
.muted{color:var(--ink-muted)}
.socials{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;max-width:none}
.socials a{
  display:inline-block;padding:.3rem .7rem;border:1px solid var(--rule);border-radius:100px;
  font-size:.85rem;color:var(--crimson-700);text-decoration:none;background:var(--paper);
}
.socials a:hover{background:var(--gold-100)}
@media (max-width:40rem){
  .member-card{flex-direction:column}
  .facts{grid-template-columns:1fr;gap:.1rem}
  .facts dd{margin-bottom:.7rem}
}

/* ---------- tables and administration ---------- */
/* A six-column table cannot fit a phone, and a long email address cannot fit a narrow column
   on a desktop either. It scrolls inside its own box instead of pushing the page sideways. */
.table-wrap{overflow-x:auto;max-width:100%;margin:0 0 1.3rem;-webkit-overflow-scrolling:touch}
.table-wrap table.data{margin:0;min-width:32rem}
table.data{font-size:.93rem}
table.data th{white-space:nowrap;border-bottom:2px solid var(--gold-500)}
table.data td{padding:.55rem .7rem .55rem 0}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.pill{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:100px;background:var(--gold-100);color:var(--crimson-900)}
.pill-active{background:#E7F2EB;color:#154D29}
.pill-disabled{background:#EDE9E2;color:#6B635A}
.pill-no-address{background:#FBE9E7;color:var(--crimson-900)}
td.actions{white-space:nowrap;text-align:right}
.stat-row{display:flex;flex-wrap:wrap;gap:1rem;margin:0 0 1.6rem}
.stat{flex:1 1 8rem;background:var(--paper);border:1px solid var(--rule);
  border-top:3px solid var(--gold-500);border-radius:var(--radius);padding:.9rem 1rem}
.stat-n{display:block;font-family:var(--font-head);font-weight:700;font-size:1.9rem;
  color:var(--crimson-900);line-height:1.1}
.stat-l{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.toolbar-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.8rem;max-width:none}
.plain-list{columns:2;column-gap:2rem;max-width:none}
@media (max-width:40rem){.plain-list{columns:1}}
.mail{border:1px solid var(--rule);border-radius:var(--radius);padding:.7rem .9rem;
  margin:0 0 .6rem;background:var(--paper)}
.mail summary{cursor:pointer;font-weight:600;font-size:.93rem}
.mail pre{white-space:pre-wrap;font-size:.86rem;background:var(--cream);padding:.8rem;
  border-radius:var(--radius);margin:.7rem 0 0;max-height:22rem;overflow:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}