/* ==========================================================================
   PKOUG MEMBER PORTAL
   ==========================================================================

   The skin for the authenticated member area: the portal navigation, the
   dashboard cards, and the definition lists the account screens use.

   Loaded by member/_portal.php on every portal page, after pkoug-tokens.css
   and pkoug-components.css. It defines NOTHING that already exists in either:
   the status pills, buttons, cards, tables, progress bar and form controls all
   come from the component sheet, because a second copy of a pill is how the
   member's view of their own account comes to disagree with the
   administrator's view of the same account.

   It is deliberately NOT pkoug-admin.css. That sheet is the skin for a tool
   somebody works in all day; this is somebody's own account page, visited
   occasionally. The vocabulary is shared, the density is not.
   ========================================================================== */

/* ==========================================================================
   1. PORTAL NAVIGATION
   ==========================================================================

   One horizontal row of links in the header, the same shape as the admin nav
   but its own class: the two have different contents, different capability
   rules and different wrapping behaviour at 360 px, and sharing a class would
   mean every future change to one had to be checked against the other.

   The current page is marked with aria-current="page", which is what carries
   the meaning; the underline is the visual echo of it, never the source. */

.pk-portal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1);
  margin-left: var(--pk-space-6);
}

.pk-portal-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-2);
  /* 44px tall including padding, so the target is thumb-sized on a phone
     without the row growing on a desktop. */
  min-height: 44px;
  padding: var(--pk-space-2) var(--pk-space-3);
  border-radius: var(--pk-radius-md);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-semibold);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.pk-portal-nav__link:hover {
  color: var(--pk-link);
  background: var(--pk-surface-sunk);
}

.pk-portal-nav__link:focus-visible {
  outline: var(--pk-focus-width) solid var(--pk-focus-ring);
  outline-offset: 2px;
}

/* "You are here", stated three ways — colour, weight and an underline — so it
   survives a colour-vision difference and a monochrome print alike. */
.pk-portal-nav__link[aria-current="page"] {
  color: var(--pk-link);
  border-bottom-color: var(--pk-link);
  font-weight: var(--pk-weight-heavy);
}

/* A count beside a nav label. Only ever rendered when the number is real and
   greater than zero — see pkoug_portal_modules() — because a badge showing 0
   is a decoration that teaches people to ignore badges. */
.pk-portal-nav__badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--pk-warning-tint, var(--pk-surface-sunk));
  border: 1px solid var(--pk-warning);
  color: var(--pk-warning);
  font-size: var(--pk-text-xs, .75rem);
  font-weight: var(--pk-weight-heavy);
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 60rem) {
  /* Below the desktop breakpoint the nav takes its own full-width row under
     the brand rather than competing with it for horizontal space.
     `order: 3; width: 100%` says so — and it never happened, because
     `.pk-header__inner` is `display: flex` with the initial `flex-wrap: nowrap`
     in the component sheet. A comment here previously asserted the opposite.
     With nowrap there is no second row for the nav to take, so it was squeezed
     onto the brand's row at 117px wide on a 360px phone, and the six links
     inside it scrolled in a sliver.

     Wrapping is set HERE rather than on `.pk-header__inner` in the component
     sheet, because that sheet is shared with the public site and the admin
     area, and changing the header layout of the whole project on the strength
     of a portal defect is the wrong trade made in the wrong place — the same
     reasoning §22 applied to `.pk-btn--sm`. Only portal pages link this file. */
  .pk-header__inner { flex-wrap: wrap; }

  .pk-portal-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    margin-top: var(--pk-space-2);
    padding-top: var(--pk-space-2);
    border-top: 1px solid var(--pk-divider);
    /* Scrolls inside itself rather than dragging the page sideways — the same
       containment .pk-table-wrap uses, and the reason the overflow probe
       measures the document rather than the element.

       min-width: 0 IS WHAT MAKES THAT TRUE, and it was missing. A flex item
       defaults to `min-width: auto`, which refuses to shrink below its own
       content — so `overflow-x: auto` had nothing to overflow, the nav grew to
       whatever its widest row needed, and the PAGE scrolled instead. With five
       modules the row happened to fit at 360px and the defect was invisible;
       registering a sixth made it visible, at 640px of scrollWidth against a
       360px viewport. The containment was never working, and the number of
       modules must not be what decides whether it does. */
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* AND `contain: paint`, because `overflow-x: auto` alone clips the pixels
       without stopping the ancestor from REPORTING the scrolled extent. With
       the nav scrolling inside itself, `document.documentElement.scrollWidth`
       still came back as 429 on a 360px viewport while `window.scrollX` stayed
       pinned at 0 — the page could not actually move, but every overflow probe
       in tools/q8 uses scrollWidth as its signal and would keep calling it a
       defect. Paint containment is simply true of this element: it already
       clips, and saying so makes the measurement agree with the behaviour. */
    contain: paint;
    scrollbar-width: none;
  }
  .pk-portal-nav::-webkit-scrollbar { display: none; }
  .pk-portal-nav__link { flex: none; }
}

/* The sign-out form sits in .pk-nav__actions beside the theme toggle. */
.pk-portal-signout { margin: 0; display: inline-flex; }

/* ==========================================================================
   2. PORTAL FOOTER
   ==========================================================================
   A tool footer, not the marketing one: where you are, and the way back to the
   public site. The member area is behind a login and a column of join-us links
   in it is noise. It deliberately does NOT print the signed-in identity the way
   the admin footer does — an administrator's screen is their own, a member's
   may be a shared machine, and the greeting at the top already says who this
   is. */

.pk-portal-foot {
  margin-top: var(--pk-space-12, var(--pk-space-10));
  border-top: 1px solid var(--pk-divider);
  background: var(--pk-surface-sunk);
}

.pk-portal-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-4);
  padding: var(--pk-space-5) 0;
  font-size: var(--pk-text-sm);
  color: var(--pk-text-muted);
}

.pk-portal-foot__inner a { color: inherit; }

/* ==========================================================================
   3. DASHBOARD LAYOUT
   ==========================================================================
   Two columns where there is room, one where there is not. The left column
   carries what the member came to do; the right carries state they came to
   check. */

.pk-portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--pk-space-6);
  align-items: start;
  margin-top: var(--pk-space-8);
}

@media (max-width: 62rem) {
  .pk-portal-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. DEFINITION LISTS
   ==========================================================================
   Label on the left, value on the right, collapsing to stacked pairs on a
   phone. member/security.php previously borrowed .pk-ace-fields for this,
   which lives in the admin sheet it does not load — so the list rendered as
   an undifferentiated run of text. */

.pk-portal-dl {
  margin: var(--pk-space-4) 0 0;
  display: grid;
  gap: var(--pk-space-3);
}

.pk-portal-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--pk-space-4);
  align-items: baseline;
  padding-bottom: var(--pk-space-3);
  border-bottom: 1px solid var(--pk-divider);
}

.pk-portal-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }

.pk-portal-dl dt {
  margin: 0;
  color: var(--pk-text-muted);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-semibold);
}

.pk-portal-dl dd {
  margin: 0;
  color: var(--pk-ink);
  /* Long values — an email address, a URL — must wrap rather than push the
     grid wider than its column. */
  overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
  .pk-portal-dl > div {
    grid-template-columns: 1fr;
    gap: var(--pk-space-1);
  }
}

/* ==========================================================================
   5. PROFILE COMPLETION
   ==========================================================================
   The percentage is stated in text; the bar is the same value drawn, and is
   aria-hidden at the usage site. A progress bar that is the only carrier of
   the number is unreadable to anybody who cannot see it. */

.pk-portal-complete__figure {
  display: flex;
  align-items: baseline;
  gap: var(--pk-space-3);
}

.pk-portal-complete__pct {
  font-family: var(--pk-font-display, inherit);
  font-size: var(--pk-text-3xl);
  font-weight: var(--pk-weight-heavy);
  line-height: 1;
  color: var(--pk-ink);
}

/* The list of fields still to fill in. Each item is a link straight to the
   field it names, so "add your city" is one click from the box. */
.pk-portal-todo {
  margin: var(--pk-space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-2);
}

.pk-portal-todo li { margin: 0; }

.pk-portal-todo a {
  display: inline-flex;
  align-items: center;
  /* Comfortably tappable without becoming a button: these are suggestions,
     not the primary action on the card. 44px because that is this project's
     figure — .pk-btn-icon says so in its own comment, and .pk-portal-nav__link
     is built to it. The first browser review measured these at 40px on every
     dashboard with anything outstanding. */
  min-height: 44px;
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px dashed var(--pk-border);
  border-radius: var(--pk-radius-md);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-sm);
  text-decoration: none;
}

.pk-portal-todo a:hover {
  border-style: solid;
  border-color: var(--pk-link);
  color: var(--pk-link);
}

.pk-portal-todo a:focus-visible {
  outline: var(--pk-focus-width) solid var(--pk-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   6. CARD HEADS
   ==========================================================================
   A heading and its state pill on one line, wrapping rather than truncating.
   Truncation hides exactly the word that mattered. */

.pk-portal-cardhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-3);
  margin: 0 0 var(--pk-space-3);
}

.pk-portal-cardhead > :first-child { margin: 0; }

/* A row of actions at the foot of a card, separated from the body it acts on. */
.pk-portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-3);
  margin-top: var(--pk-space-5);
}

/* ==========================================================================
   7. TOUCH TARGETS
   ==========================================================================

   `.pk-btn--sm` is 36px, and it is shared with the admin area and the public
   site. It is NOT changed globally here: the admin area is a dense tool used
   with a mouse all day, and widening every small button across the project on
   the strength of a member-area review would be the wrong trade made in the
   wrong place.

   Inside the portal it is different. Sign out is on every page, the directory's
   card buttons are the whole point of a card, and the first browser review
   measured all of them at 36px at 360 px wide. 44px is this project's own
   figure — `.pk-btn-icon` states it, and `.pk-portal-nav__link` is built to it —
   so the portal holds its own controls to it.

   Scoped to sheets only portal pages link, so nothing outside the member area
   moves. */

.pk-portal-signout .pk-btn,
.pk-member-card__foot .pk-btn {
  min-height: 44px;
}

/* ==========================================================================
   8. MEMBER EXPERIENCE — 2026 REFINEMENT
   ========================================================================== */

.pk-member-portal,
.pk-member-auth {
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--pk-link) 8%, transparent) 0, transparent 24rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--pk-success) 7%, transparent) 0, transparent 28rem),
    var(--pk-canvas, #f5f7fa);
}

.pk-member-portal .pk-header,
.pk-member-auth .pk-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom-color: color-mix(in srgb, var(--pk-divider) 72%, transparent);
  background: color-mix(in srgb, var(--pk-surface) 88%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--pk-ink) 4%, transparent),
              0 12px 32px color-mix(in srgb, var(--pk-ink) 5%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.pk-member-portal .pk-header__inner,
.pk-member-auth .pk-header__inner { min-height: 76px; }

.pk-member-portal .pk-brand__logo,
.pk-member-auth .pk-brand__logo {
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--pk-ink) 14%, transparent));
}

.pk-portal-main { padding-block: clamp(2.5rem, 6vw, 5.5rem); }

.pk-member-portal .pk-card,
.pk-member-auth form.pk-stack {
  border-color: color-mix(in srgb, var(--pk-border) 76%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--pk-ink) 5%, transparent),
              0 18px 48px color-mix(in srgb, var(--pk-ink) 7%, transparent);
}

.pk-member-portal .pk-card {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pk-member-portal .pk-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 5rem;
  height: 3px;
  border-radius: 0 0 999px;
  background: linear-gradient(90deg, var(--pk-link), var(--pk-success));
  opacity: .72;
}

.pk-member-portal .pk-card:hover {
  border-color: color-mix(in srgb, var(--pk-link) 22%, var(--pk-border));
  box-shadow: 0 2px 4px color-mix(in srgb, var(--pk-ink) 5%, transparent),
              0 24px 60px color-mix(in srgb, var(--pk-ink) 10%, transparent);
}

.pk-portal-pagehead {
  max-width: 52rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.pk-portal-pagehead .pk-h2 { margin: 0; }

.pk-portal-pagehead > p:last-child {
  max-width: 62ch;
  margin: var(--pk-space-3) 0 0;
  color: var(--pk-text-muted);
  font-size: var(--pk-text-lg);
  line-height: 1.65;
}

.pk-portal-eyebrow {
  margin: 0 0 var(--pk-space-2);
  color: var(--pk-link);
  font-size: var(--pk-text-xs, .75rem);
  font-weight: var(--pk-weight-heavy);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pk-portal-nav__link {
  position: relative;
  border-bottom: 0;
}

.pk-portal-nav__link::after {
  content: "";
  position: absolute;
  right: var(--pk-space-3);
  bottom: 5px;
  left: var(--pk-space-3);
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

.pk-portal-nav__link[aria-current="page"] {
  border-bottom: 0;
  background: color-mix(in srgb, var(--pk-link) 8%, transparent);
}

.pk-portal-nav__link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }

.pk-member-dashboard .pk-portal-grid { gap: clamp(1rem, 2vw, 1.5rem); }
.pk-member-dashboard .pk-stack--lg { gap: clamp(1rem, 2vw, 1.5rem); }

.pk-member-dashboard .pk-card { padding: clamp(1.4rem, 3vw, 2.15rem); }

.pk-membership-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 11rem;
  margin: calc(var(--pk-space-4) * -1) calc(var(--pk-space-4) * -1) var(--pk-space-4);
  overflow: hidden;
  border-radius: calc(var(--pk-radius-lg) - 2px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--pk-link) 9%, var(--pk-surface)),
                            color-mix(in srgb, var(--pk-success) 8%, var(--pk-surface)));
}

.pk-membership-visual__glow {
  position: absolute;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pk-link) 18%, transparent);
  filter: blur(24px);
}

.pk-membership-visual img {
  position: relative;
  z-index: 1;
  width: 9.5rem;
  height: 9.5rem;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px color-mix(in srgb, var(--pk-ink) 25%, transparent));
  transform: rotate(-2deg);
}

.pk-member-directory > .pk-h1 { margin-bottom: 0; }
.pk-member-directory > .pk-lead { max-width: 66ch; color: var(--pk-text-muted); }

.pk-member-directory .pk-directory-tools {
  position: relative;
  z-index: 2;
  margin-top: var(--pk-space-7, var(--pk-space-6));
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: color-mix(in srgb, var(--pk-surface) 92%, transparent);
}

.pk-member-directory > .pk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.pk-member-directory .pk-member-card {
  position: relative;
  min-height: 24rem;
  padding: 1.4rem;
  border-color: color-mix(in srgb, var(--pk-border) 76%, transparent);
  border-radius: calc(var(--pk-radius-lg) + 2px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--pk-surface) 98%, white 2%), var(--pk-surface));
  box-shadow: 0 2px 3px color-mix(in srgb, var(--pk-ink) 4%, transparent),
              0 16px 38px color-mix(in srgb, var(--pk-ink) 7%, transparent);
}

.pk-member-card__level-art {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 4.6rem;
  height: 4.6rem;
  object-fit: contain;
  opacity: .94;
  filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--pk-ink) 20%, transparent));
  pointer-events: none;
}

.pk-member-directory .pk-member-card__head { padding-right: 3.8rem; }
.pk-member-directory .pk-member-card__name a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pk-member-directory .pk-member-card__meta { gap: var(--pk-space-3); }
.pk-member-directory .pk-member-card__tags { align-content: start; }
.pk-member-directory .pk-member-card__foot { margin-top: auto; }

.pk-member-directory .pk-chip,
.pk-member-detail .pk-chip {
  border-color: color-mix(in srgb, var(--pk-border) 75%, transparent);
  background: color-mix(in srgb, var(--pk-surface-sunk) 84%, transparent);
  text-decoration: none;
}

.pk-member-detail .pk-profile-head {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--pk-border);
  border-radius: calc(var(--pk-radius-lg) + 4px);
  background:
    radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--pk-link) 12%, transparent), transparent 17rem),
    var(--pk-surface);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--pk-ink) 9%, transparent);
}

.pk-member-detail .pk-avatar--xl {
  box-shadow: 0 0 0 7px var(--pk-surface),
              0 18px 36px color-mix(in srgb, var(--pk-ink) 20%, transparent);
}

.pk-member-level-inline {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  margin-right: calc(var(--pk-space-2) * -1);
  filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--pk-ink) 18%, transparent));
}

.pk-membership-detail-art {
  float: right;
  width: 7rem;
  height: 7rem;
  margin: -1rem -1rem .5rem 1rem;
  object-fit: contain;
  filter: drop-shadow(0 16px 16px color-mix(in srgb, var(--pk-ink) 18%, transparent));
}

.pk-profile-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.pk-profile-form > .pk-card { padding: clamp(1.35rem, 3vw, 2rem); }
.pk-profile-form > .pk-card:nth-of-type(1),
.pk-profile-form > .pk-card:nth-of-type(3),
.pk-profile-form > .pk-cluster { grid-column: 1 / -1; }

.pk-profile-form > .pk-card:nth-of-type(1),
.pk-profile-form > .pk-card:nth-of-type(3) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pk-space-5) var(--pk-space-6);
}

.pk-profile-form > .pk-card:nth-of-type(1) > h2,
.pk-profile-form > .pk-card:nth-of-type(3) > h2,
.pk-profile-form > .pk-card:nth-of-type(3) > .pk-card__body { grid-column: 1 / -1; }

.pk-profile-form .pk-field { margin: 0; }
.pk-profile-form textarea { min-height: 8.5rem; }
.pk-profile-form > .pk-cluster { position: sticky; bottom: 1rem; z-index: 8; padding: .75rem; width: fit-content; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-lg); background: color-mix(in srgb, var(--pk-surface) 90%, transparent); box-shadow: 0 12px 34px color-mix(in srgb, var(--pk-ink) 12%, transparent); backdrop-filter: blur(14px); }

.pk-member-portal :is(.pk-input, .pk-select, textarea.pk-input),
.pk-member-auth :is(.pk-input, .pk-select, textarea.pk-input) {
  min-height: 3rem;
  border-color: color-mix(in srgb, var(--pk-border) 88%, transparent);
  background: color-mix(in srgb, var(--pk-surface) 92%, var(--pk-canvas, #f5f7fa));
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.pk-member-portal :is(.pk-input, .pk-select, textarea.pk-input):focus,
.pk-member-auth :is(.pk-input, .pk-select, textarea.pk-input):focus {
  border-color: var(--pk-link);
  background: var(--pk-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pk-link) 14%, transparent);
}

.pk-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.pk-security-grid > .pk-card { margin: 0 !important; padding: clamp(1.35rem, 3vw, 2rem); }
.pk-security-card--account,
.pk-security-card--activity { grid-column: 1 / -1; }
.pk-security-grid .pk-table-wrap { margin-top: var(--pk-space-4); border: 1px solid var(--pk-divider); border-radius: var(--pk-radius-lg); }

.pk-member-testimonial-page { max-width: 58rem; }
.pk-member-testimonial-page > .pk-card,
.pk-member-testimonial-page .pk-testimonial-form { max-width: none !important; }
.pk-member-testimonial-page textarea { min-height: 15rem; }
.pk-member-testimonial-page .pk-quote { border-radius: var(--pk-radius-lg); background: color-mix(in srgb, var(--pk-success) 7%, var(--pk-surface-sunk)); }

.pk-member-auth__main {
  position: relative;
  display: grid;
  align-content: center;
  min-height: calc(100vh - 190px);
  max-width: 72rem;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.pk-member-auth__main::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 3%;
  width: min(38vw, 28rem);
  aspect-ratio: 1;
  border-radius: 42% 58% 65% 35% / 38% 42% 58% 62%;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, white 72%, transparent), transparent 13%),
    linear-gradient(145deg, color-mix(in srgb, var(--pk-success) 86%, black), color-mix(in srgb, var(--pk-link) 88%, black));
  box-shadow: inset -2rem -2rem 5rem color-mix(in srgb, black 22%, transparent),
              0 3rem 6rem color-mix(in srgb, var(--pk-ink) 16%, transparent);
  opacity: .92;
  transform: translateY(-50%) rotate(-8deg);
}

.pk-member-auth__main > .pk-h2,
.pk-member-auth__main > .pk-alert,
.pk-member-auth__main > form,
.pk-member-auth__main > p { width: min(100%, 31rem); }

.pk-member-auth__main > .pk-h2 { margin-bottom: var(--pk-space-6); font-size: clamp(2.2rem, 5vw, 3.5rem); }

.pk-member-auth__main > form.pk-stack {
  max-width: 31rem !important;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--pk-border) 78%, transparent);
  border-radius: calc(var(--pk-radius-lg) + 4px);
  background: color-mix(in srgb, var(--pk-surface) 92%, transparent);
  backdrop-filter: blur(16px);
}

.pk-member-auth .pk-footer { margin-top: 0; }

@media (min-width: 88rem) {
  .pk-member-directory > .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
  .pk-member-directory > .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-profile-form { grid-template-columns: 1fr; }
  .pk-profile-form > .pk-card,
  .pk-profile-form > .pk-cluster { grid-column: auto; }
  .pk-member-auth__main::after { opacity: .32; right: -8rem; }
}

@media (max-width: 48rem) {
  .pk-portal-main { padding-block: var(--pk-space-7, var(--pk-space-6)); }
  .pk-portal-pagehead > p:last-child { font-size: var(--pk-text-md, 1rem); }
  .pk-member-directory > .pk-grid,
  .pk-security-grid,
  .pk-profile-form > .pk-card:nth-of-type(1),
  .pk-profile-form > .pk-card:nth-of-type(3) { grid-template-columns: 1fr; }
  .pk-security-card--account,
  .pk-security-card--activity,
  .pk-profile-form > .pk-card:nth-of-type(1) > h2,
  .pk-profile-form > .pk-card:nth-of-type(3) > h2,
  .pk-profile-form > .pk-card:nth-of-type(3) > .pk-card__body { grid-column: auto; }
  .pk-member-directory .pk-member-card { min-height: auto; }
  .pk-member-detail .pk-profile-head { align-items: flex-start; }
  .pk-membership-detail-art { width: 5.5rem; height: 5.5rem; }
  .pk-profile-form > .pk-cluster { position: static; width: 100%; }
  .pk-profile-form > .pk-cluster .pk-btn { flex: 1 1 12rem; }
  .pk-member-auth__main::after { display: none; }
  .pk-member-auth__main > .pk-h2,
  .pk-member-auth__main > .pk-alert,
  .pk-member-auth__main > form,
  .pk-member-auth__main > p { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-member-portal .pk-card,
  .pk-portal-nav__link::after,
  .pk-member-portal :is(.pk-input, .pk-select, textarea.pk-input),
  .pk-member-auth :is(.pk-input, .pk-select, textarea.pk-input) { transition: none; }
}

@media print {
  .pk-member-portal .pk-header { position: static; box-shadow: none; backdrop-filter: none; }
  .pk-member-portal .pk-card { break-inside: avoid; box-shadow: none; }
  .pk-membership-visual img,
  .pk-member-card__level-art,
  .pk-membership-detail-art,
  .pk-member-level-inline { filter: none; }
}