/* polish: uses the tokens in /app.css. */

/* Admin members: masked email, reveal/copy, verified tick, "No email". */
.pe-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; }
.pe-cell .pe-ava { grid-row: 1 / 3; display: inline-flex; border-radius: 50%; }
.pe-cell .pe-name { align-self: end; min-width: 0; }
.pe-cell > .pe-row, .pe-cell > .pe-none { align-self: start; }
.pe-row { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; vertical-align: middle; }
.pe-email { min-width: 0; padding: 1px 6px; margin: 0 -6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 400 13px/1.45 Lato, sans-serif; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--dur-1), color var(--dur-1); }
.pe-email:not(.shown) { letter-spacing: .02em; }
.pe-email:hover { background: var(--sunken); color: var(--deep); }
.pe-email:focus-visible { outline: none; box-shadow: var(--focus); }
.pe-email.shown { color: var(--ink-2); }
.pe-verified { display: inline-grid; place-items: center; flex: none; margin-left: 4px; color: var(--blue); line-height: 0; }
.pe-none { color: var(--ink-4); font-size: 13px; line-height: 1.45; font-style: italic; }
.mb-email .pe-email, .mb-email .pe-none { font-size: 14px; }

/* Create menu: dividers between content, course and people items. */
.create-list { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.create-sep { height: 1px; margin: 6px 10px; background: var(--line); }

/* Event cards: who is going. */
.ev-going { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--ink-2); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ev-faces .avatar { width: 24px; height: 24px; font-size: 9px; letter-spacing: 0; overflow: hidden; }
.ev-faces > * { margin-left: -5px; }
.compact .ev-going, .rail-card .ev-going { margin-top: 2px; }

/* Mini month beside the events list (wide screens only). */
.ev-mini { padding: 14px 14px 12px; }
.mc-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; margin-bottom: 8px; }
.mc-title { margin: 0; text-align: center; font: 700 15px/1.4 Lato, sans-serif; color: var(--deep); letter-spacing: 0; }
.mc-nav { width: 30px; height: 30px; }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mc-wd { text-align: center; font: 700 11px/1.4 Lato, sans-serif; color: var(--muted); padding: 2px 0 4px; text-transform: uppercase; }
.mc-day { position: relative; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 13.5px/1 Lato, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.mc-day:hover { background: var(--sunken); }
.mc-day:focus-visible { outline: none; box-shadow: var(--focus); }
.mc-day.other { color: var(--ink-4); }
.mc-day.today { color: var(--blue); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.mc-day.has::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sky); }
.mc-day.picked { background: var(--deep); color: #fff; font-weight: 700; }
.mc-day.picked::after { background: #fff; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.mc-clear { border: 0; background: none; color: var(--blue); font: 600 13.5px/1.4 Lato, sans-serif; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.mc-clear:hover { background: var(--sunken); }
.ev-dayhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.ev-dayhead h2 { margin: 0; font-size: 19px; line-height: 1.35; }
.ev-page { display: block; }
.ev-page-rail { display: none; }
@media (min-width: 1200px) {
  .ev-page { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; max-width: 1140px; }
  .ev-page-rail { display: block; position: sticky; top: calc(var(--top) + 20px); }
}
@media (max-width: 1199px) { .rail .ev-mini { display: none; } }

/* Directory: Hosts and Top filters, ranks. */
.dir-tools .kind-tabs { overflow-x: auto; scrollbar-width: none; }
.dir-tools .kind-tabs::-webkit-scrollbar { display: none; }
.dir-period { margin-top: 10px; }
.dir-period button[aria-pressed="true"] { background: var(--card); color: var(--deep); box-shadow: var(--shadow-1); }
.dir-period button:focus-visible { outline: none; box-shadow: var(--focus); }
.dir-period[hidden] { display: none; }
.dir-score { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ink-2); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.dir-rank { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--tint); color: var(--deep); font: 700 11.5px/1 Lato, sans-serif; font-variant-numeric: tabular-nums; }
/* An open header menu sits above the sticky space tabs. */
.space-hero:has(.create-list:not([hidden])) { z-index: 8; }