/* Calendar additions on the Rails site: the "no upcoming events" note and the past-events gallery */
.no-upcoming-events { padding: 2rem 0 5rem; }
.no-upcoming-events .h1-style { margin-bottom: 1.25rem; }

.past-events { padding-bottom: 4rem; }
.past-events-title { text-align: center; margin: 0 0 2.5rem; }
.item.events-item.past-event { margin-bottom: 3rem; }
.past-event img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; }
.past-event-title { margin-bottom: 0.25rem; }
.past-event .event-date { color: #FF00C8; font-weight: 600; font-size: 0.8125rem; }
/* Saved message on a card page: same line as "Back to Directory", right-aligned, white on the card colour */
.card-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.card-saved { margin: 0; color: #000; /* N56: white was ~3:1 on orange, coral and magenta; black clears 5:1 on all four card colours */ text-align: right; }

/* A plain line of news above the directory (e.g. "Your login isn't linked to a directory card yet.") */
.directory-notice { text-align: center; color: #FF00C8; margin: 0 auto; padding: 1.5rem 1rem 0; }

/* Filter lists: a closed list is out of the Tab order, not just out of sight */
.btn-filter-toggle + .btn-cluster { visibility: hidden; }
.btn-filter-toggle.open + .btn-cluster { visibility: visible; }

/* Gallery note, small desktops: the pink note sits in a gap one row high; with the full padding its text wrapped to five lines and ran into the next row */
@media (min-width: 64em) and (max-width: 80em) {
  .gallery-grid .callout-box { padding: 1.5rem 4.5rem 1.5rem 1.75rem; }
  .gallery-grid .callout-box:after { right: 1.25rem; }
}

/* Footer logo on very narrow phones: 326px fixed made every page scroll sideways at 320 */
.site-footer .site-title { max-width: 100%; }
/* A long unbroken name or place ("Chaloemtiarana") on a half-width card at 320 pushed the page sideways; it may now break */
.people-item .item-content-wrapper, .books-item .item-content-wrapper { overflow-wrap: anywhere; }

/* Calendar tabs on a phone: side by side each label wrapped to two lines beside its dot; one tab per line, each a 44px-high target */
@media (max-width: 47.9375em) {
  .faux-radio-filter, .faux-radio-filter:last-child { float: none; display: block; width: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* Phone tap targets (ruling R1-7): every link and button a thumb has to hit is at least 44px tall, by padding alone.
   Inline links: vertical padding never moves a line. Block links: padding with equal negative margin keeps every pixel where it was. */
@media (max-width: 47.9375em) {
  .site-footer .logout-link a, .exchange-tags a, .people-item .h2-style a,
  .books-item .h1-style a, .books-item .h2-style a, .people-content-box p a, .update-link a,
  .callout-box a, .item-content-wrapper .label-sm, .no-upcoming-events a { padding-block: 12px; }
  /* the footer links carry their own underline, which padding would move: an invisible extension of the link does the job */
  .site-footer .footer-navigation ul li a { position: relative; }
  .site-footer .footer-navigation ul li a::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -13px; }
  .primary-menu li a, #logout-primary a { padding-block: 9.5px; margin-block: -9.5px; }
  .back-link { padding-block: 12px; margin-block: -12px; }
  .menu-toggle, .menu-close, .menu-close:hover, .menu-toggle:hover { box-sizing: content-box; padding: 6.5px 0 6.5px 2px; background-origin: content-box; margin-top: -6.5px; }
}

/* K4: clickable things that aren't links still show the pointing hand */
.menu-toggle, .menu-close, .btn-filter-toggle, .btn-filter, .view-filter, .faux-radio-filter, button { cursor: pointer; }

/* L59: an uploaded event photo that is not square fills the circle (cropped) instead of squashing into an oval */
.item.events-item img { aspect-ratio: 1; object-fit: cover; }

/* L80: the "where" line reads as part of the description (regular, same size), not a second heading */
.item.events-item .venue { margin: 0 0 0.25rem; }

/* N04: alum and Support photos are always a centred square, so the circle is a circle whatever was uploaded */
.item.people-item img, .single-people .people-content-box img, .page-item .page-thumbnail img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* N09: a list in a centred zone keeps its bullet beside its text, not at the far left of the column */
.page-overview ul, .page-overview ol, .content-block-text ul, .content-block-text ol { list-style-position: inside; margin-left: 0; }
.page-overview li > p:first-child, .content-block-text li > p:first-child { display: inline; }

/* N11: the closed menu is off screen; its links must not be Tab stops until it opens (the delay lets the close animation finish) */
header .open-menu-containing-column { visibility: hidden; transition: width 0.3s ease-in-out, height 0.3s ease-in-out, visibility 0s linear 0.3s; }
header .open-menu-containing-column.open { visibility: visible; transition-delay: 0s; }
/* The pink opens first, then its contents fade in, so nothing reflows in view. Closing fades them out first, then folds the pink away. */
header .open-menu-containing-column { transition: width 0.3s ease-in-out 0.12s, height 0.3s ease-in-out 0.12s, visibility 0s linear 0.42s; }
header .open-menu-containing-column.open { transition: width 0.3s ease-in-out, height 0.3s ease-in-out, visibility 0s; }
header .open-menu-containing-column > .container-fluid { opacity: 0; transition: opacity 0.12s ease-out; }
header .open-menu-containing-column.open > .container-fluid { opacity: 1; transition: opacity 0.25s ease-in 0.3s; }
@media (prefers-reduced-motion: reduce) {
  header .open-menu-containing-column, header .open-menu-containing-column.open, header .open-menu-containing-column > .container-fluid { transition: none; }
}

/* N29: the rest of the phone tap targets (R1-7). An invisible extension of each control reaches 44px; nothing visible moves. */
@media (max-width: 47.9375em) {
  .btn-filter-toggle, .view-filter.order-by-icon, .site-footer .site-title a, .post-navigation .nav-links a { position: relative; }
  .btn-filter-toggle::after, .view-filter.order-by-icon::after, .site-footer .site-title a::after, .post-navigation .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
  .view-filter.order-by-icon::after { left: -3px; right: -3px; top: -3px; bottom: -3px; }
  .site-footer .site-title a::after { top: -14px; bottom: -14px; }
}

/* T04: a title with no spaces in it (a pasted address) breaks at the edge instead of widening the page and pushing the Edit pill off screen */
.events-item .item-content-wrapper, .events-item h2, .events-item h3, .past-event-title, .past-event .event-date { overflow-wrap: anywhere; min-width: 0; }
.events-item .col { min-width: 0; }

/* T22: "Back to Directory" stays on one line at 320; the arrow is placed against the left edge, so a wrapped second line ran under it. Tighter tracking and a shorter arrow below 360px. */
.label-sm.back-link { white-space: nowrap; }
@media (max-width: 22.5em) {
  .label-sm.back-link { letter-spacing: 2px; padding-left: 60px; }
  .label-sm.back-link:before { width: 44px; background-size: 44px auto; }
}

/* T49: the photo page Previous/Next sat inside a nav that clips overflow, so the invisible 44px extension (N29) never reached a thumb; the welcome video dot gets one too. Nothing visible moves. */
@media (max-width: 47.9375em) {
  .single-photos .post-navigation { overflow: visible; }
  .surprise-dot a.block-link { top: -12px; bottom: -12px; left: -12px; right: -12px; }
}

/* T64: a sentence ("Editing your own profile is switched off...") reads as a sentence: its own line under "Back to ...", left-aligned, plain case and tracking. The short "Profile updated" stays a tracked label on the right. */
.card-saved.card-saved--note { flex: 1 0 100%; text-align: left; text-transform: none; letter-spacing: 0.02em; font-size: 1.0625rem; line-height: 1.5; font-weight: 400; margin-top: 0.5rem; }

/* T71: on a page with the plain logo (a profile) at tablet width the wordmark is 640px wide and its last letters sat 8px under the menu icon; other pages leave about 50px. Drop it below the icon. */
@media (min-width: 48em) and (max-width: 63.9375em) {
  #closed-container .site-title { margin-top: 3.25rem; }
}

/* Sign-in sent: its own step under the big white heading, with a quiet way back to the form */
.page.page-login p.login-sent { margin: 1.5rem auto 0; max-width: 32rem; }
.page.page-login p.login-sent a { color: #fff; text-decoration: underline; }
.page.page-login p.login-change { text-align: center; margin: 3.75rem 0 0; }
/* Resend, on that step. Every button on the site is a brand-pink circle, and this page's
   background is that same pink — the sign-in button only shows because #loginform inverts
   it to white. This form is not #loginform, so it needs the inversion too, scoped here
   rather than borrowing the form rule, which also absolutely-positions the button for the
   sign-in layout. (Neal, Oct 9) */
.page.page-login .login-resend { margin: 3rem 0 0; }
.page.page-login .login-resend input[type=submit] { background-color: #fff !important; color: #000 !important; }
.page.page-login .login-resend input[type=submit]:hover { background-color: #000 !important; color: #fff !important; }
/* iPhone Safari zooms into any field under 16px when tapped; the sign-in field is 15px in the original */
@media (max-width: 63.9375em) { #loginform input[type=email] { font-size: 16px; } }

/* The line that says what a year means in the directory. Not .label-sm: that uppercases with wide
   tracking, which is right for a one-word filter button and shouts over two lines of explanation.
   (army round 2, R-1) */
.cohort-note { text-transform: none; letter-spacing: 0; font-size: 0.95rem; line-height: 1.5;
  color: #555; margin: 0 0 1.5rem; max-width: 46rem; }

/* THE DIRECTORY'S SEARCH BOX (round 3, S2).
   Dressed as the filter toggles beside it: full width of its column, the same
   pink 3px rule underneath, the same padding. A magnifying glass on the right
   where those carry their chevron, so the row reads as four controls of one
   kind rather than a form that wandered in.
   16px on the type because iPhone Safari zooms into any field under that when
   it is tapped, which on this page would throw the grid off screen. */
.people-search { position: relative; }
.people-search input[type=search] {
  width: 100%;
  border: 0;
  border-bottom: 3px solid #FF00C8;
  border-radius: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FF00C8' stroke-width='3'><circle cx='11' cy='11' r='6'/><path d='M16 16l5 5'/></svg>") no-repeat right center;
  padding: 0.35rem 28px 0.35rem 0;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}
.people-search input[type=search]::placeholder { color: #000; opacity: 1; }
/* Focus is the rule under it going black and twice as thick, drawn with a
   box-shadow so the extra weight sits outside the border rather than moving
   the text.
   A 2px outline box around the whole field was heavier than anything else on
   the row and read as an error state. A colour change on its own was the
   opposite problem: a keyboard pass found this was the only control on the
   page with no perceptible focus state, which is the sort of thing you only
   notice if you put the mouse down. */
.people-search input[type=search]:focus { outline: 0; border-bottom-color: #000; }
.people-search input[type=search]:focus-visible {
  outline: 0;
  border-bottom-color: #000;
  box-shadow: 0 3px 0 0 #000;
}
/* Safari draws its own clear button over ours */
.people-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The filter columns stack on a phone and this one needs the same air under it */
@media (max-width: 47.9375em) { .people-search { margin-bottom: 1.5rem; } }

/* THE NAME, BEFORE THE MEGABYTE (round 3, S1 and S4).
   The front page's wordmark is drawn by a runtime that is 125KB of script plus
   an 850KB wasm, and until those land the landing page is a tagline over white
   space. The plain SVG is 5KB. It sits over the canvas and goes when Rive says
   it has drawn.
   Absolutely positioned inside the box the canvas already reserves, so the
   swap moves nothing: there is no layout shift, only a change of picture. */
.rive-stage { position: relative; }
.rive-standin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(78%, 1100px);
  height: auto;
  opacity: 1;
  transition: opacity 0.25s ease-out;
}
.rive-stage.rive-ready .rive-standin { opacity: 0; }
/* Nothing to fade to if the animation never arrives, so it simply stays. */
@media (prefers-reduced-motion: reduce) { .rive-standin { transition: none; } }