/* The one portal's design language (Jira JPI-124; the Blazers One Portal
   canvas): the same words on every site - a pill for an area, a kicker for
   a group, a card with a head, a list with a dot a line, a count, a side
   list - over the tokens the four apps already share (style.css: --primary,
   --gold, --bg, --card, --border, --muted). This file is the one copy in
   the one repository; each app serves it as /portal.css and links it from
   its header, so a change here is a change everywhere. */

/* The menu (portal/menu.js): the Admin area opens to its eight groups in
   two columns, each headed; a wide menu near the right edge opens leftwards
   and never wider than the window. */
header.topbar .nav-menu-items.portal-admin { min-width: 560px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
header.topbar .portal-group { display: flex; flex-direction: column; gap: 8px; }
/* An item with no heading - To do atop Admin, My payments under Money's three (JPI-271) - takes the whole row of Admin's two columns. */
header.topbar .nav-menu-items.portal-admin .portal-group.is-plain { grid-column: 1 / -1; }
header.topbar .nav-menu-items.portal-grouped:not(.portal-admin) { gap: 10px; }
header.topbar .portal-group-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
header.topbar .portal-area-admin .nav-menu-items, header.topbar .portal-area-help .nav-menu-items, header.topbar .portal-area-helpdesk .nav-menu-items { left: auto; right: 0; }
@media (max-width: 760px) { header.topbar .nav-menu-items.portal-admin { grid-template-columns: 1fr; min-width: 0; } }
@media (max-width: 640px) { header.topbar .nav-menu-items.portal-admin { display: flex; } }

/* A menu never runs off the bottom of the window (Jira JPI-292): Admin's
   eight groups are taller than a laptop's, and its last items were cut off
   while the wheel scrolled the page behind. Every open menu in the bar - and,
   on a phone, the hamburger's panel - is capped at the room below where it
   starts and scrolls inside itself, the wheel staying in it at either end.
   /menu-room.js measures that room as it opens (--menu-room); the fallback
   holds until it does. An item reached with Tab is scrolled into view by the
   browser, clear of the edge (scroll-padding). */
@media (min-width: 641px) {
  header.topbar .nav-menu-items {
    max-height: calc(100vh - 7rem); max-height: var(--menu-room, calc(100dvh - 7rem));
    overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px;
  }
}
@media (max-width: 640px) {
  header.topbar nav {
    max-height: calc(100vh - 4rem); max-height: var(--menu-room, calc(100dvh - 4rem));
    overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px;
  }
}

/* One bar, drawn one way (JPI-165). Each site's own stylesheet draws a
   menu's heading a little differently - a glyph or a drawn triangle for
   the arrow, an underline or nothing for the lit one, 16 or 18 pixels
   between items - which nobody saw while each bar was its own. With the
   one menu the same items sit side by side on all four, and at 1024
   pixels one site's bar held a row where another's wrapped. Club
   Volunteers' is the one kept. Scoped to the portal's own areas, so with
   the switch off nothing here applies. */
header.topbar details.portal-area > summary { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
header.topbar nav:has(> .portal-area) > details.nav-menu > summary::after,
header.topbar nav:has(> .portal-area) > details.nav-menu[open] > summary::after { content: '\25be'; font-size: 0.8em; width: auto; height: auto; margin: 0; border: 0; transform: none; }
header.topbar details.portal-area > summary.active,
header.topbar nav:has(> .portal-area) > a.active { opacity: 1; font-weight: inherit; text-decoration: underline; }
/* And it wraps one way: where there is no room beside the name the links
   go onto a row of their own, and wrap among themselves below that. Two of
   the four wrapped them beside the name instead. */
@media (min-width: 641px) {
  header.topbar:has(nav > .portal-area) { flex-wrap: wrap; gap: 8px 20px; }
  header.topbar nav:has(> .portal-area) { margin-left: auto; max-width: 100%; min-width: auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
}

/* My week, named on the page (Club's views/me.ejs): with the one menu the
   bar's link to it reads Home, so the page is headed My week and whose it
   is sits on one line with the season under the heading. */
.week-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 0 18px; }
.week-who-name { font-weight: 600; font-size: 1.05rem; }
.week-who .season-picker { margin: 0; }

/* The words. */
.kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.portal-pill { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); background: #fdeeed; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.portal-pill.is-gold { color: #7a5a12; background: #fff6e6; }
.portal-pill.is-muted { color: var(--muted); background: #eef1f6; }
.portal-count { font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--primary); border-radius: 999px; padding: 2px 9px; }
.portal-n { font-weight: 700; color: var(--muted); }
.portal-dot, .admin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #f7941d); flex: none; position: relative; top: -1px; display: inline-block; }
.portal-dot.is-one, .admin-dot-one { background: var(--primary); }

/* A card with a head: the title, a count, the area at the right. */
.card-head, .portal-card h2, .admin-hub-card-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.card-head h2, .admin-hub-card-head h2 { margin: 0; font-size: 1.05rem; }
.portal-card h2 { font-size: 1.05rem; }
.portal-card h2 a, .admin-hub-list a, .card-head h2 a { text-decoration: none; color: var(--primary); }
.portal-card h2 a:hover, .admin-hub-list a:hover { text-decoration: underline; }
.card-head .portal-pill, .portal-card h2 .portal-pill { margin-left: auto; }

/* A list with a dot a line. */
.portal-list, .admin-hub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.93rem; }
.portal-list li, .admin-hub-list li { display: flex; gap: 8px; align-items: baseline; }
.portal-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold, #f7941d); flex: none; position: relative; top: -2px; }
.admin-hub-list a { font-weight: 600; }

/* A grid of cards: Home, and the Admin section. */
.portal-home { margin-bottom: 24px; }
.portal-home .portal-card { margin: 0; min-width: 0; }
.admin-hub { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-hub-side, .portal-side { position: sticky; top: calc(var(--top-h, 0px) + 16px); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 0; }
.admin-hub-kicker { padding: 0 18px 10px; }
.admin-hub-side nav, .portal-side nav { display: flex; flex-direction: column; }
.admin-hub-side nav a, .portal-side nav a { display: flex; justify-content: space-between; align-items: center; padding: 9px 18px; text-decoration: none; color: inherit; border-left: 3px solid transparent; font-weight: 600; font-size: 0.95rem; }
.admin-hub-side nav a.active, .admin-hub-side nav a:hover, .portal-side nav a.active, .portal-side nav a:hover { color: var(--primary); border-left-color: var(--primary); background: #fdeeed; }
.admin-hub-n { color: #a0a8b4; font-weight: 400; font-size: 0.8rem; }
.admin-hub-head h1 { margin: 0 0 4px; }
.admin-hub-head .subtitle { margin: 0 0 18px; }
.admin-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-hub-card { margin: 0; min-width: 0; }
.admin-hub-legend { display: flex; gap: 18px; margin-top: 14px; color: var(--muted); }
.admin-hub-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .admin-hub-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .admin-hub { grid-template-columns: 1fr; } .admin-hub-side, .portal-side { position: static; } .admin-hub-side nav, .portal-side nav { flex-direction: row; flex-wrap: wrap; } }

/* A strip that says who this is for, as the canvas's "what this person can open". */
.portal-strip { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--gold, #f7941d); border-radius: 10px; padding: 12px 18px; margin: 16px 0; }
.portal-strip .kicker { margin-bottom: 4px; }

/* People and access: one person's grid. */
.logins-grid td, .logins-grid th { vertical-align: top; }
.logins-tick { display: inline-block; margin: 0 14px 6px 0; white-space: nowrap; }

/* One rounded picker, on all four sites (the president, 11 October 2026:
   "find them all and fix them"). Club's season picker (JPI-181) as the
   design language: the word and the choice in one rounded control, still the
   native select so a phone gets its own wheel. `label.season-pill` so it wins
   over a site's own `.season-picker label`; `.pick-row` lays a form of them
   out on one line, wrapping. */
.pick-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 10px 0 18px; }
.filters-scope label.season-pill { margin: 0; }
label.season-pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0 4px 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 0.9rem; font-weight: 400; cursor: pointer; }
label.season-pill:hover { border-color: #c7cdd6; }
label.season-pill:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(156, 28, 23, 0.15); }
.season-pill-label { color: var(--muted); white-space: nowrap; }
label.season-pill select { appearance: none; -webkit-appearance: none; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 7px 30px 7px 2px; border: 0; border-radius: 999px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/help-desk/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 0.9rem; font-weight: 600; color: var(--text); cursor: pointer; text-overflow: ellipsis; box-shadow: none; }
label.season-pill select:focus { outline: none; box-shadow: none; }
@media (max-width: 640px) {
  .pick-row label.season-pill { flex: 1 1 100%; }
  .pick-row label.season-pill select { flex: 1; }
}

/* One Admin's one banner (Jira JPI-123): the club's banner, drawn on all
   four sites while the One Admin switch is on - the rules Club Volunteers
   and Team Sheets had in their own stylesheets, here so Venue Hire and Help
   Desk draw it the same. */
.site-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff8e6;
  border: 1px solid #f0dfa8;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 24px;
}
.site-banner[hidden] { display: none; }
.site-banner-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-banner-headline { font-size: 1.05rem; }
.site-banner-line { font-size: 0.95rem; }
.site-banner-link { font-weight: 600; }
/* A quiet button, but drawn as a bare x: scoped to the banner so it
   outweighs button.quiet's underline and inherited font. */
.site-banner .site-banner-close {
  display: none;
  background: none;
  border: 0;
  padding: 0 4px;
  margin: -4px -6px 0 0;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
}
.site-banner.has-script .site-banner-close { display: block; }
.site-banner .site-banner-close:hover { color: var(--text); opacity: 1; }
.site-banner-preview { margin-top: 4px; }

/* The hat that is on (Jira JPI-212, profiles): a bar under the top bar on
   all four sites, worded as a hat rather than as looking at somebody - so
   drawn apart from Log in as's gold bar. */
.hat-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 24px; font-size: 0.9rem; font-weight: 600; background: #fff6e6; color: #7a5a12; border-bottom: 2px solid var(--gold, #f7941d); }
.hat-banner form { margin: 0; }
.hat-banner button.quiet { color: inherit; }

/* One look for an open menu on every site (Jira JPI-229; the president, 11
   October 2026: "why is menu sometimes white and sometimes red?" - Club's own
   stylesheet drew it red, the other three white, and on white the group
   headings, white themselves, vanished). White, as three of the four drew
   it, over the shared tokens so dark mode follows; the page you are on
   shaded. On a phone the menu opens in place in the bar, as before. */
@media (min-width: 641px) {
  header.topbar .nav-menu-items {
    background: var(--card, #fff); color: var(--text, #1f2937);
    border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); padding: 6px; gap: 0;
  }
  header.topbar .nav-menu-items.portal-admin { padding: 10px; gap: 10px 18px; }
  header.topbar .portal-group { gap: 0; }
  header.topbar .nav-menu-items a, header.topbar .nav-menu-items button.quiet {
    color: var(--text, #1f2937); opacity: 1; padding: 8px 10px; border-radius: 6px; font-size: 0.92rem; text-decoration: none;
  }
  header.topbar .nav-menu-items a:hover, header.topbar .nav-menu-items button.quiet:hover { background: rgba(127, 127, 127, 0.12); text-decoration: none; }
  header.topbar .nav-menu-items a.active { color: var(--primary, #9c1c17); background: rgba(156, 28, 23, 0.08); text-decoration: none; }
  header.topbar .portal-group-name { color: var(--muted, #6b7280); opacity: 1; padding: 8px 10px 4px; }
  header.topbar .nav-menu-items form { border-top-color: var(--border, #e5e7eb); }
  header.topbar .nav-menu-items .nav-menu-email { color: var(--muted, #6b7280); }
}
@media (min-width: 641px) {
  header.topbar .nav-account .nav-menu-items form { border-top-color: var(--border, #e5e7eb); }
}