/* ==========================================================================
   MEMBERS  —  hr-members.css   (needs hr-core.css + hr-archive.css)
   ----------------------------------------------------------------------------
   The page borrows the boats archive's chrome wholesale — head, toolbar, chips,
   chart table, table view all come from hr-archive.css, so the two archives
   cannot drift apart. Only what is specific to a PERSON lives here: the member
   card, its PRIVATE variant, the privacy note and the table's member cell.
   Every rule sits inside #site (see the ARMOUR note in hr-core.css).
   ========================================================================== */

#site {
  /* ---------- the member card ----------
     Portrait-first: the photo is the largest thing on the card, because the crew
     list is people, not records. Members without a photo get a monogram plate in
     the same frame, so a mixed grid still reads as one grid. */
  .mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:26px;
      padding:26px 40px 56px;margin:-8px -40px -56px}
  .mb-card{position:relative;display:block;background:#fff;border:1px solid rgba(11,42,63,.1);
      border-radius:18px;overflow:hidden;text-decoration:none;
      box-shadow:0 12px 28px rgba(11,42,63,.12);transition:transform .3s,box-shadow .3s}
  .mb-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(11,42,63,.2)}
  /* a private card is a record, not a door: no lift, no hover colour, a plain cursor */
  .mb-card.is-private{cursor:default}
  .mb-card.is-private:hover{transform:none;box-shadow:0 12px 28px rgba(11,42,63,.12)}
  .mb-photo{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,#16466a,#071E2E);
      background-size:cover;background-position:center top}
  .mb-photo .stripe{position:absolute;inset:0;
      background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 12px,transparent 12px 24px)}
  /* the monogram: a serif initial, large, low contrast — a plate, not a face */
  .mb-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      font-family:ui-serif,Georgia,serif;font-weight:600;font-size:64px;line-height:1;
      color:rgba(255,179,71,.55)}
  /* ---------- the private plate ----------
     Same frame, same deep ground, same stripe — but where the monogram would be
     there is a thin ring (a portrait's outline, empty) and one word. It is a
     statement about the member's choice, not a lock on the card. */
  .mb-photo.is-private{background:linear-gradient(160deg,#123a58,#071E2E)}
  .mb-private{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:14px}
  .mb-private-ring{width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(245,242,236,.28);
      box-shadow:inset 0 0 0 6px rgba(7,30,46,.6),inset 0 0 0 7.5px rgba(245,242,236,.14)}
  .mb-private-l{font:600 10px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;
      color:rgba(245,242,236,.55)}
  .mb-name.is-private{display:flex;flex-direction:column;gap:5px;color:rgba(11,42,63,.55);font-weight:500}
  .mb-name-login{font:600 11px/1 system-ui,sans-serif;letter-spacing:.02em;color:var(--rust);
      text-decoration:none;border-bottom:1px solid rgba(194,112,63,.35);align-self:flex-start;padding-bottom:2px}
  .mb-name-login:hover{border-bottom-color:var(--rust)}
  .mb-flag{position:absolute;bottom:12px;left:13px;width:20px;height:13px;border-radius:2px;
      box-shadow:0 0 0 1px rgba(255,255,255,.35)}
  /* Same status-tag language as the boat page: rust means "note this", amber means
     "press this". So a listing reads as a fact about the member, not a button. */
  .mb-tag{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:6px;
      font:700 9px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
      color:#F7F1E6;background:var(--rust);padding:6px 9px;border-radius:5px;
      box-shadow:0 6px 16px rgba(4,14,23,.4)}
  .mb-tag::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}
  .mb-body{padding:17px 18px 19px}
  .mb-name{font-family:ui-serif,Georgia,serif;font-weight:600;font-size:21px;line-height:1.1;color:var(--ink)}
  .mb-card:hover .mb-name{color:var(--rust)}
  .mb-role{margin-top:6px;font:600 10px/1 system-ui,sans-serif;letter-spacing:.14em;
      text-transform:uppercase;color:var(--rust)}
  .mb-sep{height:1px;background:rgba(11,42,63,.1);margin:14px 0 12px}
  /* the club-tenure line, the thing the crew list is scanned for */
  .mb-since{display:flex;align-items:baseline;gap:7px}
  .mb-years{font:700 15px/1 system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
  .mb-since-note{font:400 11px/1.3 system-ui,sans-serif;color:rgba(11,42,63,.55)}
  .mb-boats{margin-top:9px;font:400 12px/1.45 system-ui,sans-serif;color:rgba(11,42,63,.62)}
  .mb-boats.is-none{color:rgba(11,42,63,.4);font-style:italic}
  .mb-loc{margin-top:9px;display:flex;align-items:center;gap:8px;
      font:400 12px/1 system-ui,sans-serif;color:rgba(11,42,63,.6)}

  /* A year in a row of counts gets read as a count. The prefix makes it a date. */
  .ar-stat-pre{margin-right:6px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;
      text-transform:uppercase;color:rgba(245,242,236,.55)}
  .ar-stat-n.is-year{font-variant-numeric:tabular-nums}

  /* ---------- table view: the member cell ---------- */
  .mb-td-name{display:inline-flex;align-items:center;gap:11px;font:600 15px/1.2 system-ui,sans-serif;color:var(--ink)}
  .ar-tr:hover .mb-td-name{color:var(--rust)}
  .mb-td-av{width:30px;height:30px;border-radius:50%;flex:none;background:var(--ink);
      background-size:cover;background-position:center;
      color:var(--accent);font:700 12px/30px system-ui,sans-serif;text-align:center}
  .mb-td-boats{font:400 13px/1.4 system-ui,sans-serif;color:rgba(11,42,63,.7)}
  .mb-td-years{font-variant-numeric:tabular-nums}
  .mb-td-name.is-private{color:rgba(11,42,63,.55);font-weight:500}
  .mb-td-av.is-private{background:var(--deep);box-shadow:inset 0 0 0 3px var(--deep),inset 0 0 0 4px rgba(245,242,236,.3)}
  .mb-td-login{font:600 11px/1 system-ui,sans-serif;color:var(--rust);text-decoration:none;
      border-bottom:1px solid rgba(194,112,63,.35);padding-bottom:1px}
  .ar-tr.is-private{cursor:default}

  /* ---------- the privacy note ----------
     One line above the results, rendered only when the list holds redacted members
     (never for a logged-in viewer). It explains the plates once, in the club's
     voice, and offers the one action that changes the view. */
  .mb-notice{display:flex;align-items:flex-start;gap:14px;margin:clamp(20px,3vw,32px) 0 6px;
      padding:16px 20px;border-radius:14px;background:rgba(11,42,63,.05);border:1px solid rgba(11,42,63,.1)}
  .mb-notice-ring{flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;background:var(--deep);
      box-shadow:inset 0 0 0 3px var(--deep),inset 0 0 0 4px rgba(245,242,236,.35)}
  .mb-notice p{margin:0;font:400 14px/1.55 system-ui,sans-serif;color:rgba(11,42,63,.78);text-wrap:pretty}
  .mb-notice a{color:var(--rust);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(194,112,63,.35)}
  .mb-notice a:hover{border-bottom-color:var(--rust)}
}

@media(max-width:680px) {
  #site {
    .mb-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:20px 24px 44px;margin:-8px -24px -44px}
    .mb-body{padding:13px 13px 15px}
    .mb-name{font-size:17px}
    .mb-mono{font-size:46px}
    .mb-boats, .mb-loc{font-size:11px}
    .mb-private-ring{width:48px;height:48px}
    .mb-notice{padding:14px 16px;gap:11px}
    .mb-notice p{font-size:13px}
  }
}

@media(max-width:420px) {
  #site {
    .mb-grid{grid-template-columns:1fr}
  }
}