/* ============================================================
   Superadmin console (central domain, platform.* views) — 2026-10.

   The console speaks the club console's language: the shared tokens
   (/css/tokens.css) and component layer (/css/design-system.css, .ui-*)
   do the work. This file holds only what the design system does not
   have, every rule scoped under body.pc and every new class pc-*:

     1. Shell        top bar, phone menu, account menu, subnav row, page frame
     2. Gaps         primitives the design system lacks (flagged in the
                     build report): table→card phone reflow, general
                     status pills, key/value list, log block, form grid
     3. Legacy shim  tokenised versions of the old layout classes that the
                     pages' own scripts still emit (health, club record)
     4. Pages        per-page rules, .pc-page-<name>

   Tokens only — no colour literal unless tokens.css has no equivalent.
   Phone breakpoint 760px, as in the design system.
   ============================================================ */

/* ---------- 1. Shell ---------- */
body.pc {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-size-adjust: 100%;
}
/* Native checkboxes, radios and scrollbars follow the theme (tokens.css
   does not set color-scheme; the club console has the same gap). */
[data-theme="dark"] body.pc { color-scheme: dark; }
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
:where(.pc) a { color: var(--burgundy-text); }
.pc :focus-visible { outline: 2px solid var(--burgundy-text); outline-offset: 2px; }

.pc-top { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.pc-top__inner {
  height: 68px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px;
}
.pc-brand {
  justify-self: start; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px;
  color: var(--ink); text-decoration: none; border-radius: var(--r-sm);
}
.pc .pc-brand { color: var(--ink); }
.pc-crest {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--burgundy); color: var(--on-fill); box-shadow: var(--crest-ring);
  font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1;
}
.pc-brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-brand__text b {
  font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-brand__text span {
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--gold-text); line-height: 1.2; white-space: nowrap;
}
.pc-top__here { display: none; }

.pc-top__nav { display: flex; align-items: center; gap: 4px; }
.pc .pc-top__link {
  display: inline-flex; align-items: center; height: 40px; padding: 0 13px; border-radius: 10px;
  font-weight: 600; font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.pc .pc-top__link:hover { background: var(--surface-2); color: var(--ink); }
.pc .pc-top__link.is-active { color: var(--burgundy-text); background: var(--burgundy-tint); }

.pc-top__actions { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Account menu: a <details>, so it opens without JS. */
.pc-account { position: relative; min-width: 0; }
.pc-account > summary { list-style: none; }
.pc-account > summary::-webkit-details-marker { display: none; }
.pc-account__btn {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 4px; max-width: 280px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  box-shadow: var(--shadow-sm); cursor: pointer; color: var(--ink);
}
.pc-account__btn:hover, .pc-account[open] .pc-account__btn { background: var(--surface-2); }
.pc-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--burgundy); color: var(--on-fill); box-shadow: var(--crest-ring);
  font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1;
}
.pc-account__email { min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-account__chev { color: var(--ink-2); }
.pc-account[open] .pc-account__chev { transform: rotate(180deg); }
.pc-account__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.pc-account__panel form { margin: 0; }
.pc-account__id { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.pc-account__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pc-account__who b { font-size: 14px; overflow-wrap: anywhere; }
.pc-account__who span { font-size: 12.5px; color: var(--ink-2); }
.pc-account__item {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; margin: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--burgundy-text);
}
.pc-account__item:hover { background: var(--surface-2); }

/* Phone menu: hidden until the bar runs out of room. */
.pc-drawer { display: none; }
.pc-drawer > summary { list-style: none; }
.pc-drawer > summary::-webkit-details-marker { display: none; }
.pc-drawer__btn {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid var(--dashed); background: var(--burgundy-wash); color: var(--burgundy-text);
}
.pc-drawer__panel {
  position: fixed; left: 0; right: 0; top: 62px; z-index: 55; max-height: calc(100vh - 62px); overflow-y: auto;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 8px 12px 12px;
}
.pc .pc-drawer__link {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.pc .pc-drawer__link .ui-icon { color: var(--ink-2); }
.pc .pc-drawer__link:hover { background: var(--surface-2); }
.pc .pc-drawer__link.is-active { background: var(--burgundy-tint); color: var(--burgundy-text); }
.pc .pc-drawer__link.is-active .ui-icon { color: var(--burgundy-text); }

/* Nine areas since Support (23 Oct 2026): the centred row is about 90px
   wider than the 534px of seven it was measured at plus Costs, so each of
   the three breakpoints below moved up by about that much (1180 -> 1260,
   1040 -> 1120, 900 -> 960), keeping the room it had on either side. */
@media (max-width: 1260px) {
  .pc-account__email { display: none; }
  .pc-account__btn { padding: 0 8px 0 4px; }
}
/* The centred areas start at (w - their width) / 2; the brand text ends at
   ~207px. Below ~1120px they would touch, so the brand shrinks to the crest
   (its name stays for screen readers) well before the bar runs out of room. */
@media (max-width: 1120px) {
  .pc-brand__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 960px) {
  .pc-top__inner { height: 62px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .pc-top__nav { display: none; }
  .pc-drawer { display: block; }
  .pc-top__here {
    display: block; position: absolute; left: 68px; right: 120px; min-width: 0; padding-left: 16px;
    font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pc-top__inner { position: relative; }
  .pc-account__chev { display: none; }
  .pc-account__btn { padding: 0 4px; width: 44px; justify-content: center; }
}
@media (max-width: 760px) {
  .pc-top__here { left: 56px; padding-left: 12px; }
}

/* The one subnav row. */
.pc-subnav-shell { background: var(--surface); border-bottom: 1px solid var(--line); }
.pc-subnav {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; justify-content: safe center; align-items: stretch; gap: 2px; height: 48px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.pc-subnav::-webkit-scrollbar { display: none; }
.pc .pc-subnav__item {
  display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; flex: 0 0 auto;
  border-bottom: 2px solid transparent;
  font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; text-decoration: none;
}
.pc .pc-subnav__item:hover { color: var(--ink); }
.pc .pc-subnav__item.is-on { color: var(--burgundy-text); border-bottom-color: var(--burgundy-text); }
.pc .pc-subnav__item .ui-icon { width: 16px; height: 16px; }
.pc-subnav__sep { width: 1px; height: 20px; align-self: center; margin: 0 8px; background: var(--line-strong); flex: 0 0 auto; }
.pc-subnav__label {
  align-self: center; flex: 0 0 auto; margin-right: 6px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2);
}
/* A row wider than the screen scrolls sideways; the fade says so. The
   shell script in _subnav sets .is-overflowing at any width; on phone the
   fade is always on (no-JS included). */
.pc-subnav.is-overflowing {
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
@media (max-width: 1100px) {
  .pc-subnav__label { display: none; }
}
@media (max-width: 760px) {
  .pc-subnav {
    justify-content: flex-start; padding: 0 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .pc .pc-subnav__item { padding: 0 12px; }
}

/* Page frame. */
.pc-main { max-width: var(--content-max); margin: 0 auto; padding: 28px var(--gutter) 72px; }
@media (max-width: 760px) { .pc-main { padding-top: 20px; padding-bottom: 96px; } }
.pc-stack { display: flex; flex-direction: column; gap: 24px; }
.pc-stack > * { min-width: 0; margin-top: 0; margin-bottom: 0; }
.pc-section { scroll-margin-top: 84px; min-width: 0; }
.pc-section-title {
  font-family: var(--serif); font-size: var(--fs-section); font-weight: 500; line-height: 1.25;
  color: var(--ink); margin: 0 0 12px;
}
.pc-flash { display: flex; flex-direction: column; gap: 12px; }
.pc .ui-head { margin-bottom: 0; }
.pc .ui-alert code, .pc .ui-alert strong { overflow-wrap: anywhere; }
.pc .pc-alert-list { display: block; margin: 4px 0 6px; padding-left: 18px; }
.pc-note { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.pc-note + .pc-note { margin-top: 6px; }
.pc .ui-panel-body > * + * { margin-top: 16px; }
.pc .ui-panel-body > .ui-alert + .ui-alert { margin-top: 10px; }
.pc .ui-panel-head .ui-meta { text-align: right; }

/* ---------- 2. Gaps the design system does not cover ---------- */

/* Inline code + log blocks. */
.pc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px;
  overflow-wrap: anywhere;
}
.pc-log {
  display: block; margin: 8px 0 0; padding: 10px 12px; max-height: 200px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}
.pc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }

/* General status pills (the .ui-pill--* kinds are money-specific). */
.pc .ui-pill.pc-pill--ok { background: var(--sage-bg); color: var(--sage-text); }
.pc .ui-pill.pc-pill--warn { background: var(--gold-tint); color: var(--gold-text); }
.pc .ui-pill.pc-pill--bad { background: var(--burgundy-tint-strong); color: var(--burgundy-text); }
.pc .ui-pill.pc-pill--unknown { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); }
.pc .ui-pill.pc-pill--wrap { height: auto; min-height: 24px; padding: 4px 10px; white-space: normal; line-height: 1.3; }

/* Key/value facts. */
.pc-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 24px; margin: 0; }
.pc-kv > div { min-width: 0; }
.pc-kv dt { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 3px; }
.pc-kv dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pc-kv dd .ui-pill { margin: 2px 4px 2px 0; }

/* Form layout. */
.pc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 20px; }
.pc .pc-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.pc form { margin: 0; }
@media (max-width: 760px) {
  .pc-form-actions > .ui-btn, .pc-form-actions > button { flex: 1 1 100%; }
}

/* Table → card reflow, one markup. Desktop: the .ui-tbl table. Phone:
   every row becomes a card; a td's data-label prints as its label. Forms
   inside cells are never duplicated. */
.pc-tbl-scroll { overflow-x: auto; }
.pc .pc-table th.pc-num, .pc .pc-table td.pc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc .pc-table td { overflow-wrap: anywhere; }
.pc .pc-table td.pc-nowrap { white-space: nowrap; }
.pc .pc-table tr.pc-total td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line-strong); }
.pc .pc-table tr.pc-total:hover { background: transparent; }
.pc .pc-table tr.pc-detail td { padding-top: 0; color: var(--ink-2); font-size: 13px; }
.pc .pc-table .ui-sub, .pc .pc-table .ui-meta { overflow-wrap: anywhere; }
.pc .pc-table td.pc-td-actions { text-align: right; white-space: nowrap; width: 1%; }
.pc-actions-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
@media (max-width: 760px) {
  .pc .pc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pc .pc-table, .pc .pc-table tbody, .pc .pc-table tr { display: block; width: 100%; }
  .pc .pc-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .pc .pc-table tbody tr:last-child { border-bottom: 0; }
  .pc .pc-table tbody tr:hover { background: transparent; }
  .pc .ui-tbl.pc-table td {
    display: block; overflow: hidden;
    padding: 4px 0; border: 0; text-align: right; white-space: normal; width: auto;
  }
  .pc .pc-table td[data-label]::before {
    content: attr(data-label); float: left; max-width: 48%; margin-right: 12px; text-align: left;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  }
  .pc .ui-tbl.pc-table td.pc-td-title { display: block; text-align: left; font-size: 15px; padding-bottom: 6px; }
  .pc .ui-tbl.pc-table td.pc-td-block { display: block; text-align: left; }
  .pc .ui-tbl.pc-table td.pc-td-block[data-label]::before { display: block; float: none; max-width: none; margin-bottom: 4px; }
  .pc .ui-tbl.pc-table td.pc-td-actions { display: block; padding-top: 10px; }
  .pc .pc-table td.pc-td-actions .pc-actions-row { justify-content: stretch; }
  .pc .pc-table td.pc-td-actions .pc-actions-row { flex-wrap: wrap; }
  .pc .pc-table td.pc-td-actions .pc-actions-row > * { flex: 1 1 0; min-width: 0; }
  .pc .pc-table td.pc-td-actions .pc-actions-row .ui-btn { width: 100%; }
  .pc .ui-tbl.pc-table td:empty { display: none; }
  .pc .pc-table tr.pc-total { background: var(--surface-2); }
  .pc .ui-tbl.pc-table tr.pc-total td { background: transparent; border: 0; }
  .pc .ui-tbl.pc-table tr.pc-detail td { display: block; text-align: left; padding: 0; }
  .pc .pc-table tr.pc-detail { padding-top: 0; }
}

/* Usage meter row (figure + bar). */
.pc-meter-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.pc-meter-head strong { color: var(--ink); }
.pc .ui-progress-fill.pc-fill--ok { background: var(--sage); }
.pc .ui-progress-fill.pc-fill--warn { background: var(--gold); }
.pc .ui-progress-fill.pc-fill--danger { background: var(--burgundy); }

/* ---------- 3. Legacy shim ----------
   The old layout's classes, tokenised. Only what markup built by the
   pages' untouched scripts still uses (club record admin panel, health
   resize/maintenance confirm screens). */
.pc .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; margin: 0;
  border-radius: var(--r-btn); border: 1px solid var(--line-input); background: var(--btn-secondary-bg); color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.pc .btn:hover { background: var(--surface-2); }
.pc .btn-primary { background: var(--burgundy); border-color: var(--burgundy); color: var(--on-fill); }
.pc .btn-primary:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); color: var(--on-fill); }
.pc .btn-ghost { color: var(--burgundy-text); }
.pc .btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.pc .btn[disabled], .pc .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
  .pc .btn { height: 48px; padding: 0 20px; font-size: 15px; border-radius: 14px; }
  .pc .btn-sm { height: 44px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
}
.pc .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm); }
.pc .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.pc .field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pc .input {
  height: 44px; width: 100%; padding: 0 14px; margin: 0; border-radius: var(--r-sm); border: 1px solid var(--line-input);
  background: var(--input-bg); color: var(--ink); font-family: inherit; font-size: 14.5px;
}
.pc .input:focus { outline: none; border-color: var(--burgundy-text); box-shadow: 0 0 0 3px var(--focus-ring); }
@media (max-width: 760px) { .pc .input { height: 48px; font-size: 16px; } }
.pc .muted { color: var(--ink-2); }
.pc .pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--ink-2);
}
.pc .pill.active { background: var(--sage-bg); color: var(--sage-text); }
.pc .pill.suspended { background: var(--burgundy-tint-strong); color: var(--burgundy-text); }
.pc .alert { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); font-size: 14px; line-height: 1.45; color: var(--ink); }
.pc .alert-error { background: var(--burgundy-wash); border-color: var(--error-border); }
.pc table:not(.ui-tbl) { width: 100%; border-collapse: collapse; }
.pc table:not(.ui-tbl) th {
  text-align: left; padding: 10px 12px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line);
}
.pc table:not(.ui-tbl) td { padding: 12px; border-bottom: 1px solid var(--line-2); font-size: 14px; vertical-align: middle; }
.pc table:not(.ui-tbl) td.num, .pc table:not(.ui-tbl) th.num { text-align: right; }

/* ---------- 4. Pages ---------- */

/* Sign in */
.pc-login { max-width: 420px; margin: 24px auto 0; }
.pc-login .ui-subtitle { margin-bottom: 20px; }
.pc-login .ui-alert { margin-bottom: 16px; }
.pc-login__form { display: flex; flex-direction: column; gap: 16px; }
.pc-login__form .ui-btn { margin-top: 4px; }

/* Clubs */
.pc .pc-usage-strip { max-width: 560px; }
.pc .pc-usage-strip .ui-kpi-strip-cell { padding: 12px 16px; }
.pc .pc-usage-strip .ui-kpi-strip-cell:hover { background: var(--surface-2); }
/* The cells link to Usage: a trailing chevron says so before hover. */
.pc .pc-usage-strip a.ui-kpi-strip-cell { position: relative; padding-right: 38px; text-decoration: none; }
.pc .pc-usage-strip a.ui-kpi-strip-cell::after {
  content: "\203A" / ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 24px; line-height: 1; color: var(--burgundy-text);
}
.pc .pc-usage-strip .ui-kpi-strip-value { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .pc .pc-usage-strip { grid-auto-flow: row; }
  .pc .pc-usage-strip .ui-kpi-strip-cell + .ui-kpi-strip-cell { border-left: 0; border-top: 1px solid var(--line); }
}

/* New club */
.pc-narrow { max-width: 760px; }
.pc-fields { display: flex; flex-direction: column; gap: 16px; }
.pc-submit { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  .pc-submit {
    position: sticky; bottom: 0; z-index: 40; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-save);
  }
  .pc-submit > * { flex: 1 1 0; }
}

/* Club record */
.pc-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pc-meta-line > span:not(.ui-pill) { overflow-wrap: anywhere; }
.pc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 900px) { .pc-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.pc-subblock { border-top: 1px solid var(--line-2); padding-top: 18px; }
.pc-subhead { font-family: var(--serif); font-size: 16px; font-weight: 500; margin: 0 0 8px; color: var(--ink); }
.pc-list { margin: 6px 0 0 18px; padding: 0; }
.pc-block { display: block; }
.pc-copy-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.pc-copy-row .ui-input { font-size: 12.5px; min-width: 0; }
.pc-copy-row .ui-btn { flex: 0 0 auto; }
.pc form > .ui-field + .ui-check, .pc form > .ui-check { margin-top: 8px; }
.pc-limits-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.pc-limits-form > .ui-btn { margin-top: 26px; }
.pc-domain-rows .ui-row { min-height: 60px; }
.pc-row-action { flex: 0 0 auto; }
.pc-inline-add { display: flex; gap: 12px; align-items: flex-end; }
.pc-inline-add .ui-field { flex: 1 1 auto; }
@media (max-width: 760px) {
  .pc-limits-form { grid-template-columns: minmax(0, 1fr); }
  .pc-limits-form > .ui-btn { margin-top: 0; }
  .pc-inline-add { flex-direction: column; align-items: stretch; }
}

/* The admin panel is built by the page's own script (frozen): style what
   it emits. Its inline styles are the script's; four rules need
   !important to beat them (panel background and heading font for dark
   mode, the phone action row and select width) — none touches display, so
   the script's show/hide still works. */
.pc #admin-access-panel { margin-bottom: 4px; }
/* "Enter club" in the page head is the one primary action. The script
   emits btn-primary for View as / Promote / Create admin / Save; here they
   read as secondary, so borrowing an admin's identity never looks like the
   default way in. */
.pc #admin-access-panel .btn-primary { background: var(--btn-secondary-bg); border-color: var(--line-input); color: var(--ink); box-shadow: var(--shadow-sm); }
.pc #admin-access-panel .btn-primary:hover { background: var(--surface-2); border-color: var(--line-input); color: var(--ink); }
.pc #admin-access-panel > .panel { background: var(--surface-2) !important; border-radius: var(--r-md); }
.pc #admin-access-panel h3 { font-family: var(--serif) !important; font-weight: 500; }
.pc #admin-access-panel td { overflow-wrap: anywhere; }
.pc #admin-access-panel select.input { max-width: 100%; }
@media (max-width: 760px) {
  .pc #admin-access-panel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pc #admin-access-panel table, .pc #admin-access-panel tbody, .pc #admin-access-panel tr { display: block; width: 100%; }
  .pc #admin-access-panel tr { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  .pc #admin-access-panel table:not(.ui-tbl) td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border: 0; text-align: right;
  }
  .pc #admin-access-panel td::before { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: left; flex: 0 0 auto; }
  .pc #admin-access-panel td:nth-child(2)::before { content: "Email"; }
  .pc #admin-access-panel td:nth-child(3)::before { content: "Role"; }
  .pc #admin-access-panel td:nth-child(4)::before { content: "Password set"; }
  .pc #admin-access-panel table:not(.ui-tbl) td:nth-child(1) { display: block; text-align: left; font-size: 15px; font-weight: 600; }
  .pc #admin-access-panel table:not(.ui-tbl) td:nth-child(5) { display: block; padding-top: 10px; }
  .pc #admin-access-panel td:nth-child(5) > div { justify-content: stretch !important; }
  .pc #admin-access-panel td:nth-child(5) > div > * { flex: 1 1 40%; }
  .pc #admin-access-panel td:nth-child(5) .btn { width: 100%; }
  .pc #admin-access-panel form[style*="flex-wrap"] > * { flex: 1 1 100%; }
  .pc #admin-access-panel select.input { min-width: 0 !important; }
}

/* Platform settings */
.pc-refresh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-tier-list { display: flex; flex-direction: column; gap: 18px; }
.pc-tier-list .ui-alert { margin-bottom: 2px; }
.pc-inset { margin: 0 -22px -22px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .pc-inset { margin: 0 -16px -16px; } }
.pc-page-settings .pc-submit, .pc-page-usage .pc-submit { justify-content: flex-end; }

/* Gen-Sec */
.pc .pc-fees-strip { margin-top: 12px; }
.pc .pc-gs-table th .ui-sub { display: inline; text-transform: none; letter-spacing: 0; font-size: 11px; }
.pc .pc-gs-table th, .pc .pc-gs-table td { padding-left: 10px; padding-right: 10px; }
.pc .pc-gs-table td { white-space: nowrap; }
.pc .pc-gs-table td.pc-td-title { white-space: normal; min-width: 160px; }
.pc-age { font-size: 12px; }
@media (max-width: 760px) {
  .pc .pc-gs-table td.pc-td-title { min-width: 0; }
}
.pc .pc-table td.ui-money--in, .pc .pc-table td .ui-money--in { color: var(--sage-text); }
.pc .pc-table td.ui-money--out, .pc .pc-table td .ui-money--out { color: var(--burgundy-text); }
@media (max-width: 760px) {
  .pc .ui-panel-link { min-height: 44px; }
  .pc .pc-table td .ui-sub { display: inline; margin-left: 4px; }
  .pc .pc-table td.pc-td-title .ui-sub { display: block; margin-left: 0; }
}

/* Gen-Sec fees */
.pc .ui-fy .ui-select { min-width: 150px; }
.pc .pc-gsf-table tr.pc-gsf-figures td { border-bottom: 0; }
.pc .pc-gsf-table tr.pc-detail:hover, .pc .pc-gsf-table tr.pc-gsf-figures:hover { background: transparent; }
.pc .pc-gsf-table tr.pc-gsf-actions td { padding-top: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pc .pc-gsf-how { padding-bottom: 4px; }
.pc-gsf-forms {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px;
  background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px;
}
.pc-gsf-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-gsf-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pc-gsf-inputs { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.pc-gsf-inputs .ui-input { flex: 1 1 110px; min-width: 0; width: auto; height: 36px; font-size: 13.5px; padding: 0 10px; }
.pc-gsf-inputs textarea.ui-input { height: auto; min-height: 60px; flex-basis: 100%; padding: 8px 10px; }
.pc-gsf-notes { grid-column: 3; grid-row: 1 / span 2; }
.pc-gsf-reminder { grid-column: 1 / 3; grid-row: 2; align-items: flex-start; }
@media (max-width: 900px) {
  .pc-gsf-forms { grid-template-columns: minmax(0, 1fr); }
  .pc-gsf-notes, .pc-gsf-reminder { grid-column: auto; grid-row: auto; }
}
@media (max-width: 760px) {
  .pc .ui-tbl.pc-gsf-table tr.pc-gsf-figures { border-bottom: 0; padding-bottom: 4px; }
  .pc .pc-gsf-table tr.pc-gsf-actions { padding-top: 4px; }
  .pc .ui-tbl.pc-gsf-table tr.pc-gsf-actions td { padding: 0; border: 0; }
  .pc-gsf-inputs .ui-input { height: 48px; font-size: 16px; flex: 1 1 100%; }
  .pc-gsf-inputs .ui-btn, .pc-gsf-reminder .ui-btn { width: 100%; }
  .pc-gsf-reminder { align-items: stretch; }
  .pc .ui-head-actions .ui-fy { flex: 1 1 100%; }
}

/* Usage */
.pc-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .pc-meters { grid-template-columns: minmax(0, 1fr); } }
.pc-meter-card { display: flex; flex-direction: column; gap: 10px; }
.pc-meter-card .ui-kpi-label { margin-top: 0; font-weight: 600; }
.pc-meter-figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pc-meter-figure .ui-kpi-value { margin-top: 0; }
.pc-meter-of { font-size: 14px; color: var(--ink-2); }
.pc-meter-card .ui-progress { margin-top: 0; height: 8px; }
.pc-meter-left { color: var(--ink); font-weight: 600; }
.pc-runway { border-radius: var(--r-sm); padding: 12px 14px; font-size: 13.5px; line-height: 1.45; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.pc-runway--upgrade { background: var(--burgundy-wash); border-color: var(--error-border); color: var(--burgundy-text); font-weight: 600; }
.pc-runway--unavailable { color: var(--ink-2); font-style: italic; }
.pc-empty-line { margin: 0; padding: 22px; font-size: 14px; color: var(--ink-2); }
.pc-panel-foot { padding: 14px 22px 18px; border-top: 1px solid var(--line-2); }
.pc-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .pc-form-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .pc-empty-line { padding: 16px; }
  .pc-panel-foot { padding: 12px 16px 16px; }
}
.pc .pc-recent-table td, .pc .pc-recent-table th { padding-left: 10px; padding-right: 10px; font-size: 13.5px; }

/* Traffic */
.pc-chart-box { position: relative; height: 220px; }
.pc-unavailable { color: var(--ink-2); font-style: italic; }
.pc-narrow-field { max-width: 520px; }
.pc .pc-stack > .pc-section-title { margin-bottom: -8px; }

/* Monitoring */
.pc-filter { display: flex; align-items: flex-end; gap: 16px; padding: 16px 22px; flex-wrap: wrap; }
.pc-filter .ui-field { flex: 0 1 260px; }
.pc-panel-intro { padding: 14px 22px 0; }
.pc .pc-mn-table td { font-size: 13.5px; vertical-align: top; }
.pc .pc-mn-table td .ui-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pc .pc-mn-table td.pc-mn-message { min-width: 220px; }
.pc .pc-mn-table .ui-cnt { margin-left: 4px; }
@media (max-width: 760px) {
  .pc-filter { padding: 16px; }
  .pc-filter .ui-field { flex: 1 1 100%; }
  .pc-filter .ui-btn { flex: 1 1 100%; }
  .pc-panel-intro { padding: 12px 16px 0; }
  .pc .pc-mn-table td.pc-mn-message { min-width: 0; }
}
.pc .pc-mn-table th, .pc .pc-mn-table td { padding-left: 12px; padding-right: 12px; }
.pc .pc-mn-table td.pc-mn-class { min-width: 170px; }
.pc .pc-mn-table td.pc-mn-class .pc-mono { overflow-wrap: normal; word-break: normal; }
.pc .pc-mn-table td.pc-mn-class .ui-sub { margin-top: 4px; }
.pc .pc-mn-table td .ui-pill { max-width: 180px; display: inline-block; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@media (min-width: 761px) { .pc .pc-mn-table td.pc-td-block .pc-mono { display: inline-block; min-width: 200px; } }
@media (max-width: 760px) {
  .pc .pc-mn-table td.pc-mn-class { min-width: 0; }
  .pc .pc-mn-table td.pc-mn-class .ui-sub { display: block; }
  .pc .pc-mn-table td .ui-pill { max-width: 60%; }
  .pc .pc-mn-table td.pc-td-title .ui-pill { max-width: 100%; }
}

/* Server health */
.pc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 13.5px; color: var(--ink-2); }
.pc-facts strong { color: var(--ink); font-weight: 600; }
.pc-lead { margin: 0; font-size: 14.5px; color: var(--ink); }
.pc .is-strong { font-weight: 600; }
.pc-unavailable { font-style: italic; }
.pc-inset-table { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pc-well-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.pc .ui-well > .pc-note { margin-top: 4px; }
.pc-chart-box--s { height: 190px; }
.pc .ui-kpi-value.pc-load { font-size: 24px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) { .pc .ui-kpi-value.pc-load { font-size: 19px; } }
.pc-form-actions--flush { margin-top: 0; }
.pc .pc-tasks-table td code { font-size: 12.5px; }
.pc .pc-tasks-table td .ui-pill { margin-left: 4px; }

/* Health scripts' markup (frozen scripts emit these classes). */
.pc .hs-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pc .hs-resize-message { font-size: 13.5px; min-height: 18px; }
.pc .hs-resize-message:empty { min-height: 0; }
.pc .hs-resize-message.error { color: var(--burgundy-text); font-weight: 600; }
.pc .hs-resize-message.warn { color: var(--gold-text); font-weight: 600; }
.pc .hs-size-list { display: flex; flex-direction: column; gap: 10px; }
.pc .hs-size-row {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.pc .hs-size-row:hover { border-color: var(--line-strong); }
.pc .hs-size-row:has(input:checked) { border-color: var(--burgundy-text); box-shadow: 0 0 0 3px var(--focus-ring); }
.pc .hs-size-row.is-current { border-color: var(--sage-border); background: var(--sage-bg); cursor: default; }
.pc .hs-size-row.is-invalid { opacity: .6; cursor: not-allowed; }
.pc .hs-size-row input[type=radio] { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--burgundy); }
.pc .hs-size-main { min-width: 0; flex: 1; }
.pc .hs-size-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc .hs-size-specs { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.pc .hs-size-note { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.pc .hs-size-reason { font-size: 12.5px; color: var(--burgundy-text); margin-top: 4px; }
.pc .hs-size-price { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.pc .hs-review { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; background: var(--surface-2); }
.pc .hs-review h4 { margin: 0 0 10px; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.pc .hs-review-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.pc .hs-review-row:last-child { border-bottom: 0; }
.pc .hs-review-row > span:last-child { text-align: right; overflow-wrap: anywhere; }
.pc .hs-grow-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--gold-border); background: var(--gold-tint); border-radius: var(--r-sm); }
.pc .hs-grow-box label { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; min-height: 44px; }
.pc .hs-grow-warning { font-size: 12.5px; color: var(--burgundy-text); margin: 6px 0 0 24px; }
.pc .hs-downtime-note { font-size: 13px; color: var(--ink-2); margin-top: 14px; line-height: 1.5; }
.pc .hs-confirm-row { margin-top: 16px; }
.pc .hs-confirm-row label { font-size: 13.5px; font-weight: 600; display: block; margin-bottom: 6px; }
.pc .hs-confirm-row input { max-width: 320px; }
@media (max-width: 760px) {
  .pc .hs-size-row { flex-wrap: wrap; }
  .pc .hs-size-price { flex-basis: 100%; padding-left: 30px; }
  .pc .hs-actions > .ui-btn, .pc .hs-actions > .btn { flex: 1 1 100%; }
  .pc .hs-review-row { flex-direction: column; gap: 2px; }
  .pc .hs-review-row > span:last-child { text-align: left; }
}

/* AI models. Eleven columns: on a desktop the table scrolls sideways inside
   its panel instead of squeezing a model's name onto five lines; on a phone
   each model is a card (the .pc-table reflow above). */
.pc .pc-aim-table { min-width: 1360px; }
.pc .pc-aim-table td { overflow-wrap: normal; }
.pc .pc-aim-table td.pc-td-title { min-width: 240px; }
.pc .pc-aim-table td.pc-td-title .pill { margin-left: 6px; }
.pc .pc-aim-table td.pc-td-title .ui-sub { display: block; margin-top: 4px; }
.pc .pc-aim-table td.pc-td-title code { white-space: nowrap; }
.pc .pc-aim-table td.pc-td-block { min-width: 190px; }
.pc .pc-aim-table .pc-aim-note { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 760px) {
  .pc .pc-aim-table { min-width: 0; }
  .pc .pc-aim-table td { overflow-wrap: anywhere; }
  .pc .pc-aim-table td.pc-td-title, .pc .pc-aim-table td.pc-td-block { min-width: 0; }
  .pc .pc-aim-table td.pc-td-title code { white-space: normal; }
}
/* The model's own page: its panels sit in the stack, so the stack sets the gaps. */
.pc .pc-stack > form#profile-form { display: flex; flex-direction: column; gap: 24px; }
.pc .pc-stack > form#profile-form > * { margin-top: 0; margin-bottom: 0; }
/* A sideways-scrolling table holds its own absolutely placed bits (the
   screen-reader-only "Actions" header): without this they sit on the PAGE at
   the table's far right and make the whole page scroll sideways. */
.pc-tbl-scroll { position: relative; }

/* ---------- Videos (the how-to library) ---------- */
.pc-vid { display: grid; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line-2); }
.pc-vid:first-of-type { border-top: 0; }
.pc-vid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.pc-vid-head b { font: 500 19px/1.25 var(--serif); min-width: 0; }
.pc-vid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.pc-vid-fields .is-wide { grid-column: 1 / -1; }
.pc-vid-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-vid-link input { flex: 1 1 280px; min-width: 0; }
.pc-vid-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
/* A video's poster: the still, a file field and its own button, on one row that wraps. */
.pc-vid-poster { display: flex; gap: 12px 14px; flex-wrap: wrap; align-items: flex-end; margin: 0; }
.pc-vid-poster img { width: 160px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-2); flex: 0 0 auto; }
.pc-vid-poster .ui-field { flex: 1 1 260px; min-width: 0; }
.pc-vid-remove { margin: 0; }
.pc-vid-none { margin: 0; }
.pc-vid-add { margin-top: 16px; }

/* Costs: the platform's invoices, one block each, as the videos are. */
.pc-cost { display: grid; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line-2); }
.pc-cost:first-of-type { border-top: 0; }
.pc-cost-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.pc-cost-head b { font: 500 19px/1.25 var(--serif); min-width: 0; overflow-wrap: anywhere; }
.pc-cost-head .ui-meta { min-width: 0; overflow-wrap: anywhere; }
.pc-cost-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: end; }
.pc-cost-fields .is-wide { grid-column: 1 / -1; }
.pc-cost-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pc-cost-actions form { margin: 0; }
.pc-cost-next, .pc-cost-payers, .pc-cost-add { display: grid; gap: 14px; }
.pc-cost-next p, .pc-cost-billed { margin: 0; }
.pc-cost-clubs { display: flex; gap: 4px 18px; flex-wrap: wrap; }

/* Gen-Sec > Messages: one message to the members of every club. */
.pc-gsm-fields { display: grid; gap: 16px; max-width: 760px; }
.pc .pc-gsm-body { min-height: 240px; height: auto; padding: 12px 14px; line-height: 1.55; resize: vertical; font-family: inherit; }
.pc-gsm-send { display: grid; gap: 14px; }
.pc-gsm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-gsm-sent { padding: 16px 20px; border-top: 1px solid var(--line); }
.pc-gsm-sent-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pc-gsm-sent-head b { min-width: 0; overflow-wrap: anywhere; }
.pc-gsm-clubs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.pc-gsm-clubs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
/* Gen-Sec › Messages › Newsletter: the composer beside its preview, stacked below 1100px */
.pc-nl-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pc-nl-offer .pc-note { flex: 1 1 320px; min-width: 0; }
.pc-nl-trial { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pc-nl-trial .ui-toggle-row { flex: 1 1 360px; min-width: 0; }
.pc-nl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) { .pc-nl-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 680px); } .pc-nl-preview { position: sticky; top: 16px; } }
.pc-nl-problems { margin: 0; padding-left: 18px; }
.pc-nl-blocks { display: grid; }
.pc-nl-block { padding: 16px 20px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; }
.pc-nl-block:first-child { border-top: 0; }
.pc-nl-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pc-nl-block-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-nl-tools { display: flex; gap: 4px; flex-shrink: 0; }
.pc-nl-field { display: grid; gap: 6px; min-width: 0; }
.pc .pc-nl-field textarea.ui-input { height: auto; min-height: 110px; padding: 10px 14px; line-height: 1.5; resize: vertical; font-family: inherit; }
.pc-nl-lead, .pc-nl-pic { display: grid; gap: 8px; min-width: 0; }
/* The masthead's issue number and month, side by side (one above the other on a phone). */
.pc-nl-issue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 760px) { .pc-nl-issue { grid-template-columns: minmax(0, 1fr); } }
.pc-nl-thumb { display: block; max-width: 240px; max-height: 160px; width: auto; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.pc .pc-nl-file { height: auto; padding: 8px 10px; }
.pc-nl-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line-2); }
.pc-nl-help { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
.pc-nl-width { display: flex; gap: 4px; }
.pc-nl-frame-wrap { margin-top: 12px; overflow-x: auto; background: #f2f2f2; border: 1px solid var(--line); border-radius: 8px; }
.pc-nl-frame { display: block; width: 640px; max-width: 100%; height: 1100px; margin: 0 auto; border: 0; background: #f2f2f2; }
.pc-nl-frame.is-phone { width: 375px; }
/* A "Test club" pill beside a club's name (the operator's view of the Gen-Sec pages). */
.pc .pc-td-title > .ui-pill { margin-left: 8px; vertical-align: middle; flex-shrink: 0; }

/* Console logins (Settings) and your own password. */
.pc-lgn { display: grid; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line-2); }
.pc-lgn-head { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.pc-lgn-head b { font: 500 19px/1.25 var(--serif); min-width: 0; overflow-wrap: anywhere; }
.pc-lgn-head .ui-pill { flex-shrink: 0; }
.pc-lgn-head .ui-meta { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
.pc-lgn-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: start; max-width: 760px; }
.pc-lgn-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pc-lgn-actions form { margin: 0; }
.pc-lgn-actions .pc-lgn-remove { margin-left: auto; }
.pc-lgn-add { margin-top: 16px; }
.pc-pw-form { display: grid; gap: 16px; max-width: 420px; }
.pc .pc-pw-form > * + * { margin-top: 0; }
/* The account menu's link (Change password) sits like its Sign out button. */
.pc a.pc-account__item { box-sizing: border-box; text-decoration: none; }

/* Gen-Sec > Regalia: the clubs' orders, the society's price list, badges due. */
.pc .pc-rg-tabs { align-self: flex-start; max-width: 100%; }
.pc-rg-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-rg-pages { text-align: right; }
.pc-rg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; align-items: start; }
.pc-rg-fields .is-wide { grid-column: 1 / -1; }
.pc .pc-rg-fields textarea.ui-input { height: auto; min-height: 88px; padding: 10px 14px; line-height: 1.5; resize: vertical; font-family: inherit; }
.pc-rg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-rg-facts { display: grid; gap: 12px; margin: 0; }
.pc-rg-facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 16px; }
.pc-rg-facts dt { font-size: 13px; color: var(--ink-2); }
.pc-rg-facts dd { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.pc-rg-pre { white-space: pre-line; }
.pc-rg-item { border-top: 1px solid var(--line-2); }
.pc-rg-item:first-of-type { border-top: 0; }
.pc-rg-item > summary {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-height: 56px; padding: 8px 20px;
  cursor: pointer; list-style: none;
}
.pc-rg-item > summary::-webkit-details-marker { display: none; }
.pc-rg-item > summary:hover { background: var(--surface-2); }
.pc-rg-item-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pc-rg-item-end { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pc-rg-item .pc-rg-chev { width: 18px; height: 18px; color: var(--ink-2); transition: transform .15s; }
.pc-rg-item[open] .pc-rg-chev { transform: rotate(180deg); }
.pc-rg-item-form { display: grid; gap: 16px; padding: 4px 20px 20px; }
.pc .pc-rg-badges th.pc-num { white-space: nowrap; }
/* New order: one line of the order to a row (the item, how many, for whom). */
.pc-rg-newlines { display: grid; gap: 14px; }
.pc-rg-newline { display: grid; grid-template-columns: minmax(0, 2fr) 110px minmax(0, 1.3fr); gap: 10px 16px; align-items: start; }
@media (max-width: 760px) {
  .pc-rg-newline { grid-template-columns: 96px minmax(0, 1fr); padding-top: 14px; border-top: 1px solid var(--line-2); }
  .pc-rg-newline:first-child { padding-top: 0; border-top: 0; }
  .pc-rg-newline > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pc-rg-facts > div { grid-template-columns: 1fr; }
  .pc-rg-item > summary, .pc-rg-item-form { padding-left: 16px; padding-right: 16px; }
  .pc-rg-actions .ui-btn { flex: 1 1 100%; }
  .pc-rg-pages { text-align: left; }
}

/* Gen-Sec > Surveys: every club's written answers to one question, one to a
   row, a club's name under an answer only when it may be given. The rest of
   the Surveys pages is drawn with the Messages and Regalia rules above. */
.pc-gss-answers { list-style: none; margin: 0 0 14px; padding: 0; }
.pc-gss-answers li { padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pc-gss-answers li:first-child { border-top: 0; padding-top: 0; }
.pc-gss-answers .ui-sub { white-space: normal; }

/* Gen-Sec > Clubs > Calendar: one month as a grid (x-dinner-month, prefix
   pc-cal). A day is its number and up to two marks with a number each: the
   confirmed dinners (filled) and the regular meeting days (outlined). The
   table's layout is fixed, so its seven columns fit any width: nothing
   scrolls sideways on a phone, and a day with a club is one link the size
   of its cell. */
.pc-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.pc-cal-nav .ui-panel-title { flex: 1 1 auto; min-width: 0; text-align: center; }
.pc-cal-step { flex: 0 0 auto; width: 44px; height: 44px; }
.pc table.pc-cal-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.pc table.pc-cal-grid th { padding: 8px 0; border-bottom: 0; text-align: center; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.pc table.pc-cal-grid th abbr { text-decoration: none; cursor: default; }
.pc table.pc-cal-grid td { padding: 0; border-bottom: 0; border-top: 1px solid var(--line-2); text-align: center; vertical-align: top; }
.pc .pc-cal-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 72px; padding: 9px 2px 8px; color: var(--ink); text-decoration: none; }
.pc a.pc-cal-day:hover { background: var(--surface-2); }
.pc a.pc-cal-day:focus-visible { outline-offset: -2px; }
.pc-cal-num { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-cal-grid td.is-empty .pc-cal-num, .pc-cal-grid td.is-past .pc-cal-num { font-weight: 500; color: var(--ink-2); }
.pc-cal-grid td.is-past .pc-cal-marks { opacity: .6; }
.pc-cal-grid td.is-today .pc-cal-num { box-shadow: inset 0 0 0 1.5px var(--burgundy-text); color: var(--burgundy-text); font-weight: 700; }
.pc-cal-grid td.is-chosen .pc-cal-day { background: var(--burgundy-tint); }
.pc-cal-grid td.is-chosen .pc-cal-num { background: var(--burgundy); color: var(--on-fill); box-shadow: none; font-weight: 700; }
.pc-cal-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 3px; }
.pc-cal-mark { min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-cal-mark.is-confirmed { background: var(--sage); color: var(--on-fill); }
.pc-cal-mark.is-regular { border: 1.5px solid var(--line-strong); color: var(--ink-2); }
.pc-cal-mark.is-key { min-width: 12px; width: 12px; height: 12px; padding: 0; flex: 0 0 auto; }
.pc-cal-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 12px 22px 16px; border-top: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.pc-cal-key > span { display: inline-flex; align-items: center; gap: 6px; }
/* A filter that is on, with a cross: one press takes it off. */
.pc .pc-cal-clear .ui-icon { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .pc-cal-nav { padding: 12px 16px; }
  .pc .pc-cal-day { min-height: 60px; padding: 7px 1px 6px; }
  .pc-cal-key { padding: 10px 16px 14px; }
  .pc-cal-key > span:first-child { flex: 1 1 100%; }
}

/* Gen-Sec > Regalia > Badges due: a club's name gets room (beside ten year
   columns it was left some 60px at 1440px and wrapped to five lines), and
   the year columns take only what their numbers need: a heading breaks
   after its number. Narrower than the table needs, it scrolls inside its
   own panel (.pc-tbl-scroll), never the page; on a phone each club is a
   card (the reflow above), which these rules leave alone. */
@media (min-width: 761px) {
  .pc .pc-rg-badges td.pc-td-title { min-width: 260px; overflow-wrap: break-word; }
  .pc .pc-rg-badges th.pc-num, .pc .pc-rg-badges td.pc-num { width: 1%; padding-left: 10px; padding-right: 10px; }
  .pc .pc-rg-badges th.pc-num { white-space: normal; line-height: 1.3; }
  .pc .pc-rg-badges th.pc-num:last-child, .pc .pc-rg-badges td.pc-num:last-child { padding-right: 22px; }
}

/* Gen-Sec > Clubs > Calendar: today, and chosen. Both marks show: the fill of
   the chosen day, and today's ring a little way out from it. */
.pc-cal-grid td.is-today.is-chosen .pc-cal-num { box-shadow: 0 0 0 2px var(--burgundy-tint), 0 0 0 3.5px var(--burgundy-text); }

/* Settings > Changelog: the platform's releases, one panel a day. A release
   is its number, when and which commit, its title and its paragraphs; a
   milestone is a marked line with no number. The search row is shown by the
   page's script (without it every entry simply shows), and the script hides
   what does not match with the hidden attribute, so each of these says so. */
.pc-cl-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.pc-cl-search .ui-field { flex: 1 1 320px; max-width: 560px; }
.pc-cl-shown { margin: 0 0 12px; }
.pc-cl-day .ui-panel-head { border-bottom: 0; }
.pc-cl-entry, .pc-cl-milestone { display: grid; gap: 8px; padding: 18px 22px; border-top: 1px solid var(--line-2); min-width: 0; }
.pc-cl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; min-width: 0; }
.pc-cl-num { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.pc-cl-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-meta); color: var(--ink-2); }
.pc-cl-meta > * + *::before { content: "\00B7"; margin-right: 8px; color: var(--ink-3); }
.pc-cl-title { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pc-cl-item { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.pc-cl-milestone { background: var(--surface-2); }
.pc-cl-mark {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-text);
}
.pc-cl-mark::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--gold-border); }
.pc-cl-mtitle { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.pc-cl-search[hidden], .pc-cl-none[hidden], .pc-cl-day[hidden], .pc-cl-entry[hidden], .pc-cl-milestone[hidden] { display: none; }
@media (max-width: 760px) {
  .pc-cl-search .ui-field { flex-basis: 100%; max-width: none; }
  .pc-cl-shown { margin: 0; }
  .pc-cl-entry, .pc-cl-milestone { padding: 16px; }
}

/* Console › Support (SupportController) and the support line at the foot of
   the General Secretary's pages (platform.layout). */
.pc-foot { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter) 32px; font-size: 13px; color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }
.pc-sup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-sup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 20px; border-top: 1px solid var(--line-2); color: var(--ink); text-decoration: none; min-width: 0; }
.pc-sup-row:first-of-type { border-top: 0; }
.pc-sup-row:hover { background: var(--surface-2); }
.pc-sup-row.is-unread .pc-sup-subject { font-weight: 700; }
.pc-sup-from, .pc-sup-subject, .pc-sup-snippet { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sup-from { font-size: 13px; color: var(--ink-2); }
.pc-sup-subject { font-size: 15px; }
.pc-sup-snippet { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
.pc-sup-when { flex-shrink: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.pc-sup-msg { display: grid; gap: 10px; padding: 18px 22px; border-top: 1px solid var(--line-2); min-width: 0; }
.pc-sup-msg:first-of-type { border-top: 0; }
.pc-sup-msg.is-out { background: var(--surface-2); }
.pc-sup-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; min-width: 0; }
.pc-sup-head b { min-width: 0; overflow-wrap: anywhere; }
.pc-sup-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; max-height: 40em; overflow: auto; }
.pc-sup-files { margin: 0; padding-left: 18px; font-size: 13px; }
.pc-sup-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-sup-reply { display: grid; gap: 12px; }
@media (max-width: 760px) {
  .pc-sup-row, .pc-sup-msg { padding: 14px 16px; }
}