/* ==========================================================================
   FAB-PARAGON. The Paragon Program surface.

   WHERE IT LOADS
   Added by the 'fabbruccio_sections' filter in inc/paragon.php on two
   routes: the /paragon/ page, and every WooCommerce account route (the
   dashboard panel, the logged-out login panel, and /my-account/paragon/).
   The slug is registered in fabbruccio_section_slugs() in functions.php; a
   file here that is not in that list never loads, because
   fabbruccio_resolve_sections() intersects against it.

   THE ONE RULE THIS FILE EXISTS TO OBEY
   Emerald and Ruby are NAMES, NOT A PALETTE. There is no green anywhere in
   this file and no red beyond the single oxblood already in the system.
   Nothing keys off the tier slug: a tier is set in the same ink at the same
   weight whatever it is called, and a new tier added through the
   fabbruccio_paragon_tiers filter needs no CSS at all. A programme whose
   tiers each bring their own colour is a gold-badge loyalty scheme with the
   serial numbers filed off, and design-language/rules.md section 2 closes
   the palette at eight entries for exactly that reason.

   THE ACCENT BUDGET ON THESE SCREENS
   One oxblood mark, and it is a 2px LEFT RULE on .fab-paragon__note, which
   is sanctioned use two in rules.md (the same rule the made-to-order line
   and .fab-doc__note already use). The progress meter is INK, deliberately:
   an oxblood bar would be a field, not a mark, and would put a second
   accent moment in the same viewport as the CTA on the Paragon page.

   NO NEW PRIMITIVES. Hairline rows, radius 0, no shadow, no card, no badge,
   no pill. Everything below is either a token or a pattern fab-doc.css and
   fab-base.css already ship.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE PANEL

   One component, four placements (account dashboard, logged-out login
   screen, /my-account/paragon/, and the Paragon page through the
   [fabbruccio_paragon_status] shortcode). It is bounded by a single hairline
   above and below rather than by a box, because a bordered card is the one
   surface this system reserves for a review.
   -------------------------------------------------------------------------- */
.fab-paragon {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(24px, 3.2vw, 34px) 0 0;
  border-top: var(--fab-hairline-width) solid var(--fab-ink);
  font-family: var(--fab-font-sans);
  color: var(--fab-ink);
}

/* Inside the 65ch document measure the panel is already narrow, so it takes
   the full measure. On the account routes, which run the full commerce
   content box, it is capped: a benefits list set to 1200px reads as a form,
   not as a statement. */
.fab-paragon .fab-paragon__head,
.fab-paragon .fab-paragon__meter,
.fab-paragon .fab-paragon__benefits,
.fab-paragon .fab-paragon__note,
.fab-paragon .fab-paragon__actions {
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   THE HEAD. Eyebrow, the tier name as the one large thing, one grey line.

   The tier name is set at --fab-size-heading-s and weight 500, i.e. the
   section-heading size, NOT a display size. It is a status, not a trophy.
   -------------------------------------------------------------------------- */
.fab-paragon__head { margin: 0 0 clamp(20px, 2.6vw, 26px); }

.fab-paragon__head .fab-eyebrow { margin-bottom: var(--fab-space-sm); }

/* SELECTORS ARE DOUBLED (.fab-paragon .fab-paragon__x) ON EVERY <p> IN THIS
   COMPONENT, AND THAT IS NOT DECORATION.

   On the Paragon page the panel renders inside .fab-doc, whose element
   selectors are deliberately broad because the markup they paint lives in
   post_content and cannot carry BEM classes on every node. `.fab-doc p` is
   0,0,1,1 and a single class is 0,0,1,0, so the document's body type WINS
   against a lone .fab-paragon__tier: the tier name came out at body size and
   secondary grey, i.e. the one large thing in the component silently stopped
   being large, on the one page most people will read it on.

   Two classes is 0,0,2,0, which clears .fab-doc p without an ancestor
   selector and therefore without a second copy of these rules for the
   in-document case. Do not "simplify" these back to one class. */
.fab-paragon .fab-paragon__tier {
  margin: 0;
  font-size: var(--fab-size-heading-s);
  font-weight: var(--fab-weight-medium);
  line-height: var(--fab-leading-heading);
  letter-spacing: var(--fab-track-heading-s);
  color: var(--fab-ink);
}

.fab-paragon .fab-paragon__sub {
  margin: 10px 0 0;
  font-size: var(--fab-size-lede);
  line-height: 1.6;
  color: var(--fab-ink-secondary);
}

/* --------------------------------------------------------------------------
   THE METER. A 2px hairline track with an ink fill.

   Two pixels, not eight: at eight it is a progress bar out of a dashboard
   kit, at two it is the same hairline that divides everything else on the
   site, temporarily filled in. Radius 0, so the fill ends square.

   The fill width is an inline style because it is DATA (this customer's
   distance to the next tier), and data does not belong in a stylesheet.
   -------------------------------------------------------------------------- */
.fab-paragon .fab-paragon__meter { margin: 0 0 clamp(20px, 2.6vw, 26px); }

.fab-paragon .fab-paragon__track {
  position: relative;
  height: 2px;
  background: var(--fab-hairline);
  border-radius: var(--fab-radius);
  overflow: hidden;
}

.fab-paragon .fab-paragon__fill {
  display: block;
  height: 100%;
  min-width: 0;
  background: var(--fab-ink);
  border-radius: var(--fab-radius);
}

.fab-paragon .fab-paragon__meterline {
  margin: 10px 0 0;
  font-size: var(--fab-size-caption);
  letter-spacing: var(--fab-track-caption);
  line-height: 1.5;
  color: var(--fab-ink-secondary);
}

/* --------------------------------------------------------------------------
   THE BENEFITS. The .fab-doc__facts pattern: hairline rows, no bullets, the
   label in ink on its own line and the detail in secondary grey under it.

   Restated here rather than reused by class because fab-doc.css only loads
   on the document surface, and this panel also renders on /my-account/,
   where that file is (correctly) absent. Two declarations that agree is the
   right trade against loading a whole document stylesheet on the account.
   -------------------------------------------------------------------------- */
.fab-paragon .fab-paragon__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fab-paragon .fab-paragon__benefits li {
  margin: 0;
  padding: 13px 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
  font-size: var(--fab-size-lede);
  line-height: 1.7;
  color: var(--fab-ink-secondary);
}

.fab-paragon .fab-paragon__benefits li:first-child { border-top: 0; padding-top: 0; }

.fab-paragon .fab-paragon__benefits b {
  display: block;
  color: var(--fab-ink);
  font-weight: var(--fab-weight-medium);
}

/* --------------------------------------------------------------------------
   THE NOTE. The ONE oxblood mark on these screens, as a 2px left rule.
   Identical to .fab-doc__note, for the same reason as the benefits list.
   -------------------------------------------------------------------------- */
.fab-paragon .fab-paragon__note {
  margin: var(--fab-space-lg) 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--fab-accent-oxblood);
  font-size: var(--fab-size-compact);
  line-height: 1.7;
  color: var(--fab-ink-secondary);
}

/* --------------------------------------------------------------------------
   ACTIONS. Quiet entry links (.fab-more from fab-base.css), never buttons.
   A second oxblood fill on the account screen would break the one-accent
   rule, and these are navigation, not a decision.
   -------------------------------------------------------------------------- */
.fab-paragon .fab-paragon__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fab-space-xl);
  margin: clamp(22px, 2.8vw, 28px) 0 0;
}

/* --------------------------------------------------------------------------
   THE PER-ORDER RETURNS LINE, under the order table on
   /my-account/view-order/{id}/. The tier's window, stated where the customer
   is looking at the order it applies to.
   -------------------------------------------------------------------------- */
.fab-paragon__orderline {
  max-width: 62ch;
  margin: var(--fab-space-lg) 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--fab-hairline);
  font-size: var(--fab-size-compact);
  line-height: 1.7;
  color: var(--fab-ink-secondary);
}

/* --------------------------------------------------------------------------
   THE COMPACT PLACEMENT (account dashboard, logged-out login screen).
   Same component, less air, because it sits under WooCommerce's own copy
   rather than owning the page.
   -------------------------------------------------------------------------- */
.fab-paragon--compact { margin-top: clamp(24px, 3.2vw, 36px); }
.fab-paragon--compact.fab-paragon .fab-paragon__tier { font-size: var(--fab-size-product); }

/* --------------------------------------------------------------------------
   THE PARAGON PAGE

   The page itself is post_content on the document surface, so fab-doc.css
   paints the measure, the head and the hairline sections. Only two things
   are specific to it.
   -------------------------------------------------------------------------- */

/* 1. Inside the document measure the panel has already got a hairline above
      it from .fab-doc > section, so it must not draw a second one. */
.fab-doc .fab-paragon {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fab-doc .fab-paragon .fab-paragon__head,
.fab-doc .fab-paragon .fab-paragon__meter,
.fab-doc .fab-paragon .fab-paragon__benefits,
.fab-doc .fab-paragon .fab-paragon__note,
.fab-doc .fab-paragon .fab-paragon__actions { max-width: none; }

/* 2. The tier table. .fab-doc__table already paints it; the only change is
      that the numeric columns must not wrap "90 days" onto two lines. */
.fab-paragon__table th:not(:first-child),
.fab-paragon__table td:not(:first-child) { white-space: nowrap; }

/* --------------------------------------------------------------------------
   THE ACCOUNT NAVIGATION, brought into the design language.

   NOT COSMETIC HOUSEKEEPING, and not this build's invention either. The
   parent theme paints the My Account menu at instawhew/assets/css/
   woocommerce.css:802 with, in eleven lines, four things this system
   forbids outright:

     background: #fff + box-shadow: var(--shadow-sm)   no shadow, ever
     border-radius: var(--radius-lg)                   radius is 0
     .is-active a { background: var(--accent-50) }     an accent FIELD
     .is-active a { font-weight: 700 }                 no weight above 500

   The accent wash is the one that matters. design-language/rules.md section
   2 is unambiguous: oxblood is a MARK, and "no tinted card, hover wash or
   gradient, nothing filled larger than a button". A pale oxblood block
   behind the selected menu item is exactly the field the rule exists to
   prevent, and it renders on every account screen this build ships, next to
   a panel written to obey the same rule.

   Corrected in the system's own vocabulary: no fill, no shadow, no radius,
   hairline rows, and the active item marked the way rules.md sanctions an
   active state, with a rule and a weight change. The rule is INK, not
   oxblood: the accent budget on these screens is spent on the note, and
   navigation is not a decision worth the one mark.

   Scoped to the account nav and living here because fab-paragon.css is the
   only child stylesheet that loads on every account route. Reverting it is
   deleting this block. The parent is not touched.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: transparent;
  border: 0;
  border-radius: var(--fab-radius);
  box-shadow: none;
  overflow: visible;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: var(--fab-hairline-width) solid var(--fab-hairline);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:first-child {
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  padding: 13px 0 13px 12px;
  border-left: 2px solid transparent; /* reserved, so the active state does not shift the row */
  font-size: var(--fab-size-small);
  font-weight: var(--fab-weight-regular);
  color: var(--fab-ink-secondary);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
  background: transparent;
  color: var(--fab-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: transparent;
  border-left-color: var(--fab-ink);
  color: var(--fab-ink);
  font-weight: var(--fab-weight-medium);
}

/* --------------------------------------------------------------------------
   NARROW

   At 390 the benefits rows and the meter are already single column, so the
   only change is the action links, which stop sitting side by side and
   stack. Nothing here reflows a photograph, because this surface has none:
   the programme is stated in type, not illustrated with a badge.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .fab-paragon .fab-paragon__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fab-space-md);
  }
}