/* ===========================================================================
   WCT PARTNER PORTAL - SHARED SECTION STYLES (Phase 2)
   ---------------------------------------------------------------------------
   Every /portal/<section> page is chrome (a topbar + a back link, styled by
   .psec-*) wrapped around a content block in <div class="psec"> whose inner
   components are ALL scoped under .psec here. That scoping is deliberate: this
   file loads AFTER wct.css, so .psec .btn / .psec .pill win over the platform's
   own full-width .btn and status .pill without touching them anywhere else.
   Nothing here hard-codes a colour that a theme owns - every surface, border and
   text tone comes from a wct.css custom property, so both palettes and the
   light/dark toggle just work. US spelling, no em-dash, no emoji.
   =========================================================================== */

/* ---- The section-page chrome (topbar, back link, title band) -------------- */
.psec-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20; background: var(--bg);
}
.psec-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fH); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); text-decoration: none; border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 12px; background: var(--card); cursor: pointer;
}
.psec-back:hover { color: var(--white); border-color: var(--border-strong); }
.psec-back svg { width: 15px; height: 15px; }
.psec-top-actions { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Content wrapper ------------------------------------------------------ */
.psec { padding: 18px 0 60px; color: var(--white); font-family: var(--fB); }
.psec .foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--xmuted); text-align: center; }
.psec .intro { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 2px 0 18px; }

/* ---- Icons: the sprite is stroke-based, coloured by currentColor ---------- */
.psec .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
.psec .ico-sm { width: 15px; height: 15px; }
.psec .ico-lg { width: 24px; height: 24px; }

/* ---- Tool header (page title + a primary out-link) ------------------------ */
.psec .tool-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.psec .tool-title { display: flex; align-items: center; gap: 11px; font-family: var(--fH); font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 1.05; margin: 0; }
.psec .tool-title .ico { color: var(--red); }
.psec .tool-subtitle { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 6px 0 16px; }

/* ---- Buttons (inline, auto-width - override wct.css .btn inside .psec) ----- */
.psec .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; padding: 9px 14px;
  font-family: var(--fH); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1;
  border-radius: 8px; border: 1px solid var(--border2); background: var(--card); color: var(--white);
  cursor: pointer; text-decoration: none; transition: all 0.18s var(--ease);
}
.psec .btn:hover { border-color: var(--border-strong); background: var(--card-h); }
.psec .btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.psec .btn-primary:hover { background: var(--red-h); border-color: var(--red-h); box-shadow: 0 4px 20px rgba(225, 6, 0, 0.32); }
.psec .btn-discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.psec .btn-discord:hover { background: #4a56d6; border-color: #4a56d6; box-shadow: none; }
.psec .btn-sm { padding: 7px 11px; font-size: 11.5px; }
.psec .btn-block { width: 100%; }
.psec .btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

/* ---- Chips / badges / pills ----------------------------------------------- */
.psec .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.psec .badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--fH); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--fill-1); border: 1px solid var(--border2); border-radius: 100px; padding: 4px 10px; white-space: nowrap; }
.psec .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--fill-1); border: 1px solid var(--border2); border-radius: 100px; padding: 5px 11px; white-space: nowrap; }
.psec .pill .ico { color: var(--red); }
.psec .pill-accent { color: var(--white); background: rgba(225, 6, 0, 0.1); border-color: rgba(225, 6, 0, 0.32); font-weight: 700; }

/* ---- Cards ---------------------------------------------------------------- */
.psec .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.psec .card + .card, .psec .card.mt-16 { margin-top: 16px; }
.psec .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.psec .card-title { display: flex; align-items: center; gap: 10px; font-family: var(--fH); font-size: 15px; font-weight: 700; text-transform: uppercase; line-height: 1.1; margin: 0; }
.psec .card-icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(225, 6, 0, 0.1); border: 1px solid rgba(225, 6, 0, 0.26); color: var(--red); flex-shrink: 0; }
.psec .card-icon .ico { width: 18px; height: 18px; }

/* ---- Section title (a divider heading within a page) ---------------------- */
.psec .section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.psec .section-title h2 { display: flex; align-items: center; gap: 9px; font-family: var(--fH); font-size: 16px; font-weight: 700; text-transform: uppercase; margin: 0; }
.psec .section-title h2 .ico { color: var(--red); }
.psec .section-title.mt-16 { margin-top: 26px; }

/* ---- Grid ----------------------------------------------------------------- */
.psec .grid { display: grid; gap: 12px; }
.psec .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.psec .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.psec .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .psec .grid.cols-3, .psec .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .psec .grid.cols-2, .psec .grid.cols-3, .psec .grid.cols-4 { grid-template-columns: 1fr; }
}

/* ---- Item card (icon + text + action) ------------------------------------- */
.psec .item-card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 14px; }
.psec .item-icon { width: 40px; height: 40px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--fill-1); border: 1px solid var(--border2); color: var(--white); flex-shrink: 0; }
.psec .item-icon.discord { background: rgba(88, 101, 242, 0.14); border-color: rgba(88, 101, 242, 0.4); color: #8791f6; }
.psec .item-icon .ico { width: 20px; height: 20px; }
.psec .item-content { flex: 1; min-width: 0; }
.psec .item-title { font-family: var(--fH); font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 0 3px; line-height: 1.15; }
.psec .item-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.psec .item-card .btn { align-self: flex-start; }

/* ---- Stats panel ---------------------------------------------------------- */
.psec .stats-panel { display: flex; flex-direction: column; gap: 2px; }
.psec .stats-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border); }
.psec .stats-row:first-child { border-top: none; }
.psec .stats-label { font-size: 12.5px; color: var(--muted); }
.psec .stats-value { font-family: var(--fH); font-size: 14px; font-weight: 700; }

/* ---- Cert card (Latest News: certification announcements) ------------------ */
.psec .certann-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .psec .certann-grid { grid-template-columns: 1fr; } }
.psec .certann { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 14px; }
.psec .certann h4 { font-family: var(--fH); font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0; line-height: 1.15; }
.psec .certann .cert-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; flex: 1; }
.psec .certann .btn { align-self: flex-start; }

/* ---- Reports grid (out-links laid out in a wrap) -------------------------- */
.psec .reports-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.psec .reports-grid .btn { flex: 0 0 auto; }

/* ---- World-times grid (quarterly meeting) --------------------------------- */
.psec .tz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .psec .tz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .psec .tz-grid { grid-template-columns: 1fr; } }
.psec .tz-row { display: flex; flex-direction: column; gap: 2px; background: var(--fill-1); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 10px; }
.psec .tz-city { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.psec .tz-time { font-family: var(--fH); font-size: 13px; font-weight: 700; }

/* ---- Map placeholder (an iframe would be blocked by CSP; we link out) ------ */
.psec .map-wrap { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 26px 18px; text-align: center; background: var(--fill-1); }
.psec .map-wrap .ico { width: 34px; height: 34px; color: var(--muted); }
.psec .map-wrap p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 10px 0 14px; }

/* ---- Helpers -------------------------------------------------------------- */
.psec .muted { color: var(--muted); }
.psec .small { font-size: 12px; }
.psec .divider { height: 1px; background: var(--border); margin: 14px 0; }
.psec .mt-8 { margin-top: 8px; } .psec .mt-16 { margin-top: 16px; } .psec .mt-24 { margin-top: 24px; }
.psec .mb-8 { margin-bottom: 8px; } .psec .mb-16 { margin-bottom: 16px; }

/* ---- Modal (used by hubs + directories) -----------------------------------
   The overlay is a fixed, viewport-sized flex box; the panel is bounded to
   max-height:100% OF THAT (real pixels, never vh - this app runs in browsers
   whose vh is unreliable) and scrolls its body internally, so a long directory
   never pushes the close button or title off-screen. */
.psec-modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; background: var(--overlay); overflow-y: auto; }
.psec-modal-overlay.hidden { display: none; }
.psec-modal-content { position: relative; width: 100%; max-width: 720px; margin: auto; padding: 0; background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; box-shadow: var(--elev); }
.psec-modal-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border2); background: var(--card); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.psec-modal-close:hover { color: var(--white); border-color: var(--border-strong); }
.psec-modal-title { font-family: var(--fH); font-size: 19px; font-weight: 700; text-transform: uppercase; margin: 0; padding: 22px 52px 12px 22px; }
#psecModalBody { padding: 0 22px 22px; }

/* ---- Directory table (instructor directory + any tabular listing) ---------
   The scroll happens in #psecModalBody above, so the search box just sticks to
   its top and the table flows full-length beneath it. */
.psec .dir-search { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border2); border-radius: 9px; padding: 9px 12px; margin-bottom: 12px; }
.psec .dir-search .ico { color: var(--muted); }
.psec .dir-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--white); font-family: var(--fB); font-size: 14px; }
.psec .dir-count { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.psec .dir-scroll { border: 1px solid var(--border); border-radius: 10px; }
.psec table.dir { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.psec table.dir th { text-align: left; font-family: var(--fH); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.psec table.dir td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.psec table.dir tr:last-child td { border-bottom: none; }
.psec table.dir .nm { font-weight: 600; white-space: nowrap; }
.psec table.dir a { color: var(--white); border-bottom: 1px solid var(--red); text-decoration: none; }
.psec .dir-lvl { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--fill-1); border: 1px solid var(--border2); border-radius: 100px; padding: 2px 7px; white-space: nowrap; }
.psec .dir-lvl.master { color: var(--red); background: rgba(225, 6, 0, 0.1); border-color: rgba(225, 6, 0, 0.3); }
.psec .dir-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---- Latest News feed (worldchasetag.com articles) ------------------------ */
.psec .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
.psec .news-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; }
.psec .news-card:hover { border-color: var(--red); transform: translateY(-2px); }
.psec .news-thumb { aspect-ratio: 16 / 9; background: var(--fill-1); overflow: hidden; }
.psec .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psec .news-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.psec .news-title { font-family: var(--fH); font-size: 14.5px; font-weight: 700; line-height: 1.25; margin: 0; }
.psec .news-more { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin-top: auto; }
.psec .news-more .ico { color: var(--red); }
.psec .news-loading, .psec .news-empty { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; padding: 22px 4px; }
.psec .news-empty a { color: var(--red); }

/* ===========================================================================
   PHASE 2b - HUB COMPONENTS
   Components the four resource hubs need on top of the shared set above. Base
   form fields (.field, .field label/input/select) and the .hidden utility come
   from wct.css already; only what wct.css lacks lives here. Same token rules,
   both palettes, scoped under .psec.
   =========================================================================== */

/* General Operations: the contact avatar - a headshot where we have one, a
   monogram fallback where we do not - and the native <details> FAQ accordion.
   Both share the same 44px round footprint so the Contacts grid stays even. */
.psec .contact-avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fH); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; background: rgba(225, 6, 0, 0.1); border: 1px solid rgba(225, 6, 0, 0.26); color: var(--red); flex-shrink: 0; }
.psec .contact-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(225, 6, 0, 0.26); background: var(--fill-1); flex-shrink: 0; }
.psec details.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.psec details.faq-item + details.faq-item { margin-top: 8px; }
.psec details.faq-item summary { cursor: pointer; font-family: var(--fH); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; list-style: none; }
.psec details.faq-item summary::-webkit-details-marker { display: none; }
.psec details.faq-item summary::before { content: '+ '; color: var(--red); }
.psec details.faq-item[open] summary::before { content: '- '; }
.psec details.faq-item[open] summary { margin-bottom: 8px; }

/* Long-form modal prose (getting-started guide, community tips). */
.psec .prose { font-size: 13.5px; line-height: 1.6; color: var(--white); }
.psec .prose ol, .psec .prose ul { margin: 0; padding-left: 20px; }
.psec .prose li { margin: 8px 0; }
.psec .prose em { color: var(--muted); font-style: italic; }
.psec .prose strong { font-weight: 700; }
.psec .tip-card { background: var(--fill-1); border: 1px solid var(--border2); border-radius: 11px; padding: 16px; }

/* Operating a Gym: the Quad Maintenance tool (a compact form + status grid that
   scores a quad and exports a PDF). Its own light field style, separate from the
   platform .field so it reads inside the modal. */
.psec .fld-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.psec .fld { width: 100%; background: var(--fill-1); border: 1px solid var(--border2); border-radius: 8px; padding: 10px 12px; color: var(--white); font-family: var(--fB); font-size: 14px; }
.psec .fld:focus { outline: none; border-color: var(--border-strong); }
.psec .maint-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.psec table.maint { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.psec table.maint th, .psec table.maint td { border: 1px solid var(--border); padding: 8px; text-align: center; vertical-align: top; }
.psec table.maint thead th { background: var(--fill-1); font-family: var(--fH); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.psec table.maint tbody th { background: var(--card); text-align: left; font-weight: 600; white-space: nowrap; }
.psec .cell-btns { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.psec .status-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border2); background: var(--card); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.psec .status-btn.ok { color: var(--ok-tx); }
.psec .status-btn.warn { color: var(--warn-tx); }
.psec .status-btn.bad { color: var(--no-tx); }
.psec .status-btn.nc { color: var(--muted); }
.psec .status-btn.active.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.psec .status-btn.active.warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.psec .status-btn.active.bad { background: var(--red); color: #fff; border-color: var(--red); }
.psec .status-btn.active.nc { background: var(--muted); color: var(--bg); border-color: var(--muted); }
.psec .comment-input { display: none; margin-top: 6px; width: 100%; background: var(--fill-1); border: 1px solid var(--border2); border-radius: 6px; padding: 6px 8px; color: var(--white); font-family: var(--fB); font-size: 12px; resize: vertical; min-height: 40px; }
.psec .maint-legend { font-size: 12px; color: var(--muted); margin-top: 10px; }
.psec .result-box { background: var(--fill-1); border: 1px solid var(--border2); border-radius: 10px; padding: 16px; text-align: center; }
.psec .score-label { font-size: 13px; color: var(--muted); }
.psec .score-value { font-family: var(--fH); font-size: 32px; font-weight: 800; }
.psec .forbid-banner { border: 2px dashed var(--red); background: rgba(225, 6, 0, 0.1); color: var(--red); padding: 14px; border-radius: 10px; font-weight: 700; text-align: center; }

/* Hosting an Event: the Postmortem tool. Textarea (wct.css .field styles only
   input/select), a 1-to-5 rating strip and a positives/negatives toggle set. */
.psec .field textarea { width: 100%; padding: 13px 14px; font: inherit; font-size: 15px; background: var(--card); color: var(--white); border: 1px solid var(--border2); border-radius: 6px; outline: none; min-height: 82px; resize: vertical; transition: border-color 0.15s; }
.psec .field textarea:focus { border-color: var(--red); }
.psec .pm-rating { display: flex; gap: 6px; }
.psec .pm-rating-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border2); background: var(--card); color: var(--white); font-family: var(--fH); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.psec .pm-rating-btn:hover { border-color: var(--border-strong); }
.psec .pm-rating-btn.active { background: var(--red); border-color: var(--red); color: #fff; }
.psec .pm-tog { display: flex; flex-wrap: wrap; gap: 8px; }
.psec .pm-tog-btn { padding: 7px 12px; border-radius: 100px; border: 1px solid var(--border2); background: var(--fill-1); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.psec .pm-tog-btn:hover { color: var(--white); border-color: var(--border-strong); }
.psec .pm-tog-btn.active { background: var(--ok); border-color: var(--ok); color: #fff; }
.psec .pm-tog-btn.neg.active { background: var(--red); border-color: var(--red); color: #fff; }