/* ==========================================================================
   Account region visual redesign ("make pretty") - LMS v0.3.56
   Spec: ~/workspace/ops/v0356-prep/SPEC-account-pretty.md (signed,
   independent red-team PASS 2026-09-19). Build seat: G-Build.
   Staging only.

   Contract: markup in includes/dashboard/parts/account.php is unchanged
   except the documented label/value span split (spec change 2). The
   ppfb_render_footer_legal_line() contract is untouched; the footer
   restyle here is CSS-ONLY.

   Token discipline: every color below resolves to a token in
   assets/css/palette-tokens-v0.3.56.css (handle 'ppfb-palette-tokens',
   enqueued by ppfb_button_layer_stylesheet() and reached through the
   'ppfb-dash-tokens' dependency chain). No new brand colors invented.
   Gold (--course-gold-accent) appears as decorative rules and dot
   markers ONLY; there is no gold text anywhere in the region (AC-14).

   Motion: zero transitions and zero keyframe animations ship in this
   file. Press feedback is an instant color state change; the region
   inherits the dashboard view fade (M1) from the motion build and
   carries no region-local entrance, scroll, or press motion
   (spec section 6, AC-15 through AC-20).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Region frame: 20 px side padding keeps the reading column full-bleed
   safe at the 390 px primary canvas (spec section 3).
   ------------------------------------------------------------------------- */
.ppfb-10k-account {
  padding-inline: 20px;
}

/* Eyebrow "Account": true small-caps treatment (spec section 3). */
.ppfb-10k-account .ppfb-10k-eyebrow {
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--course-text-muted);
  margin: 0 0 12px;
}

/* ---------------------------------------------------------------------------
   Access record: the only card in the region. White on the Egret field,
   12 px radius, 1 px hairline in the Candied Ginger tint family, one soft
   shadow at low alpha, 20 px padding (spec section 3).
   ------------------------------------------------------------------------- */
.ppfb-10k-account-record {
  background: var(--course-surface-card);
  border: 1px solid var(--course-candied-ginger);
  border-radius: 12px;
  /* Kiln Ink token at 8% alpha: single-elevation soft shadow, card only. */
  box-shadow: 0 4px 16px rgba(34, 26, 18, 0.08);
  padding: 20px;
  margin: 0 0 24px;
}

/* Record title "Your access record" + the 3 px gold decorative rule
   (60 px wide, 10 px below the title; decorative content, announced by
   nothing - spec open item 2). */
.ppfb-10k-account-record .ppfb-10k-account-row-title {
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  color: var(--course-text-primary);
  margin: 0 0 14px;
}
.ppfb-10k-account-record .ppfb-10k-account-row-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 10px;
  background: var(--course-gold-accent);
}

/* ---------------------------------------------------------------------------
   Record rows: label/value treatment (spec change 2). Markup renders two
   inline spans in DOM order - label first, value second - with no float,
   order, or absolute repositioning, so screen-reader order stays
   "Name: {name}". The label column is fixed at 110 px (set by the longest
   label "Access since:"); long values wrap inside their own column with
   wrapped lines hanging under the value start, never under the label.
   No truncation, no ellipsis, no hyphenation of user data.
   ------------------------------------------------------------------------- */
.ppfb-10k-account-record > p {
  display: flex;
  align-items: baseline;
  margin: 0 0 10px;
}
.ppfb-10k-account-record > p:last-child {
  margin-bottom: 0;
}
/* Label span: first inline span in the row. */
.ppfb-10k-account-record > p > span:first-child {
  flex: 0 0 110px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--course-text-muted);
}
/* Value span: second inline span in the row. */
.ppfb-10k-account-record > p > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 550;
  color: var(--course-text-primary);
  overflow-wrap: break-word;
  hyphens: none;
}
/* Name value renders one step up at 16/24 (spec section 3). */
.ppfb-10k-account-record > p.ppfb-10k-data:first-of-type > span:last-child {
  font-size: 16px;
  line-height: 24px;
}

/* ---------------------------------------------------------------------------
   Hairline rules: 1 px line in the Candied Ginger tint family, decorative,
   zero extra margins - the row padding supplies the air (spec section 3).
   ------------------------------------------------------------------------- */
.ppfb-10k-account .ppfb-10k-rule {
  border: 0;
  border-top: 1px solid var(--course-candied-ginger);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Account rows on the Egret field: 20 px padding block between rules.
   Row titles and quiet copy take the spec type scale (section 3).
   ------------------------------------------------------------------------- */
.ppfb-10k-account-row {
  padding-block: 20px;
}
.ppfb-10k-account .ppfb-10k-account-row-title {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--course-text-primary);
  margin: 0 0 8px;
}
.ppfb-10k-account-row > p {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--course-text-muted);
  margin: 0 0 12px;
}
.ppfb-10k-account-row > p:last-child {
  margin-bottom: 0;
}

/* Action links ("Reset password", "Write to support", "Sign out"):
   full-width 48 px tap rows in --course-link. Press feedback is an instant
   state change to --course-link-hover - no timed animation exists for this
   in the demo vocabulary (spec section 6), so transitions are explicitly
   off. :focus-visible shows the 2 px Kiln Ink ring (WCAG 2.4.11). */
.ppfb-10k-account-row > a.ppfb-10k-link-quiet {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 550;
  color: var(--course-link);
  transition: none;
}
.ppfb-10k-account-row > a.ppfb-10k-link-quiet:hover,
.ppfb-10k-account-row > a.ppfb-10k-link-quiet:active {
  color: var(--course-link-hover);
}
.ppfb-10k-account-row > a.ppfb-10k-link-quiet:focus-visible {
  outline: 2px solid var(--course-focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Enrollment detail: padding after its rule; gold dot markers on the
   inclusion bullets, drawn in CSS, decorative only (spec change 7).
   8 px marker-to-text gap, 8 px between bullets.
   ------------------------------------------------------------------------- */
.ppfb-10k-enrollment-detail {
  padding-top: 20px;
}
.ppfb-10k-enrollment-detail .ppfb-10k-inclusions {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.ppfb-10k-enrollment-detail .ppfb-10k-inclusions li {
  position: relative;
  padding-left: 16px;
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  color: var(--course-text-body);
}
.ppfb-10k-enrollment-detail .ppfb-10k-inclusions li:last-child {
  margin-bottom: 0;
}
.ppfb-10k-enrollment-detail .ppfb-10k-inclusions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--course-gold-accent);
}
/* Closed-cart line (conditional, server-rendered). */
.ppfb-10k-enrollment-detail > p.ppfb-10k-quiet {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--course-text-muted);
  margin: 12px 0 0;
}

/* ---------------------------------------------------------------------------
   Legal footer: the black slab is gone. Quiet centered line on the Egret
   field, CSS-ONLY - the ppfb_render_footer_legal_line() contract is
   untouched (spec section 5). Vertical chrome budget: 24 px top padding +
   19 px legal line height + 32 px bottom padding = 75 px of the 96 px cap
   at 390 px; the iOS safe-area inset rides outside the budget.
   ------------------------------------------------------------------------- */
.ppfb-10k-legal {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 24px 20px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}
.ppfb-10k-legal > p {
  /* Inline flex turns the text runs between items into anonymous flex
     items, so the 8 px column gap applies symmetrically on each side of
     every middot separator with no markup change. Rendered text and item
     order are untouched. */
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
  max-width: 350px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 19px;
  font-weight: 400;
  color: var(--course-text-muted);
}
/* Plain-text items stay muted (fail-closed contract unchanged). */
.ppfb-10k-legal > p > span {
  color: var(--course-text-muted);
}
.ppfb-10k-legal > p > a {
  color: var(--course-link);
}
.ppfb-10k-legal > p > a:focus-visible {
  outline: 2px solid var(--course-focus-ring);
  outline-offset: 2px;
}