/* ==========================================================================
   RiverSync — Tier badge assets  ·  tokens/tiers.css
   Two company-wide tier marks sharing one chassis:
     · Maintenance agreement tiers — Silver (8×5 NBD) · Gold (24×7 ND)
     · Partner program tiers      — Authorized · Gold · Platinum
   Ported from the Maintenance Agreement portal and re-cut for DS v2:
   the fully-rounded pill becomes the system-wide 2px corner, and the round
   coin becomes a flat square plaque — solid fill, hairline inner rim, no
   gradients or shadows (flat by mandate; depth reads as distraction).
   Consumed by components/tiers/TierBadge.jsx + PartnerBadge.jsx.
   ========================================================================== */

:root{
  --tier-gold:#92761D;   --tier-gold-bg:#FBF3DA;   --tier-gold-bd:#E7D099;
  --tier-silver:#5D6975; --tier-silver-bg:#EEF1F4; --tier-silver-bd:#CFD6DD;
  --tier-auth:#34618E;   --tier-auth-bg:#E9F1F8;   --tier-auth-bd:#BCD6EB;
  --tier-plat:#565B73;   --tier-plat-bg:#EFEFF5;   --tier-plat-bd:#CDD0DE;
  /* flat plaque fills — one solid per tier, no gradients */
  --tier-gold-fill:#CFA94A;   --tier-silver-fill:#B9C3CD;
  --tier-auth-fill:#4D7DAB;   --tier-plat-fill:#B5B9CC;
}
[data-theme="dark"]{
  --tier-gold:#D8B85B;   --tier-gold-bg:rgba(216,184,91,.13);   --tier-gold-bd:rgba(216,184,91,.34);
  --tier-silver:#AEB8C2; --tier-silver-bg:rgba(174,184,194,.12); --tier-silver-bd:rgba(174,184,194,.30);
  --tier-auth:#7FAFD9;   --tier-auth-bg:rgba(127,175,217,.12);   --tier-auth-bd:rgba(127,175,217,.32);
  --tier-plat:#BCC0D6;   --tier-plat-bg:rgba(188,192,214,.12);   --tier-plat-bd:rgba(188,192,214,.30);
  --tier-gold-fill:#B9963C;   --tier-silver-fill:#8D99A6;
  --tier-auth-fill:#46719B;   --tier-plat-fill:#878DA8;
}

/* ----------------------------- the chip --------------------------------
   One chassis for both systems; tier modifiers re-tint it. Everything
   else (corner, hover, tooltip) is shared. Flat throughout. */
.rs-tier{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:2px 10px 2px 3px; border-radius:var(--r-xs); border:1px solid var(--tier-silver-bd);
  color:var(--tier-silver); background:var(--tier-silver-bg);
  white-space:nowrap; line-height:1; vertical-align:middle; cursor:help; position:relative;
  transition:border-color .16s var(--ease,ease);}
a.rs-tier{text-decoration:none;}
.rs-tier--gold{color:var(--tier-gold); background:var(--tier-gold-bg); border-color:var(--tier-gold-bd);}
.rs-tier--authorized{color:var(--tier-auth); background:var(--tier-auth-bg); border-color:var(--tier-auth-bd);}
.rs-tier--platinum{color:var(--tier-plat); background:var(--tier-plat-bg); border-color:var(--tier-plat-bd);}
.rs-tier__label{padding-right:1px; letter-spacing:.005em;}
/* partner chips wear formal small-caps lettering — credential, not status */
.rs-tier--partner .rs-tier__label{font-size:10px; font-weight:750; letter-spacing:.09em; text-transform:uppercase;}
.rs-tier:hover{border-color:currentColor; z-index:61;}
.rs-tier:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring); z-index:61;}

/* ---------------------------- the plaque -------------------------------
   Flat square medallion: one solid fill per tier and a hairline inner
   rim (the old coin's engraved ring, squared off and de-shadowed).      */
.rs-tier__medal{width:20px; height:20px; border-radius:var(--r-xs); flex:none; position:relative;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  background:var(--tier-silver-fill);}
.rs-tier__medal::after{content:""; position:absolute; inset:2px; border-radius:1px;
  border:1px solid rgba(255,255,255,.45); pointer-events:none;}
.rs-tier__medal .rs-ic{position:relative; z-index:1;}
.rs-tier__medal--gold{background:var(--tier-gold-fill);}
.rs-tier__medal--silver{background:var(--tier-silver-fill); color:#3B434C;}
.rs-tier__medal--silver::after{border-color:rgba(255,255,255,.60);}
.rs-tier__medal--authorized{background:var(--tier-auth-fill);}
.rs-tier__medal--platinum{background:var(--tier-plat-fill); color:#33384C;}
.rs-tier__medal--platinum::after{border-color:rgba(255,255,255,.60);}

/* ------------------------- detail tooltip ------------------------------
   Hover / keyboard-focus the chip and the agreement (or program level)
   detail pops up — same contract as the MA portal's shared tooltip.      */
.rs-tier__tip{position:absolute; z-index:60; left:50%; bottom:calc(100% + 10px);
  width:max-content; min-width:208px; max-width:264px; display:block; text-align:left;
  background:var(--surface); color:var(--fg); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); box-shadow:var(--shadow-lg); padding:11px 12px 10px;
  font-weight:400; white-space:normal; cursor:default; opacity:0; pointer-events:none;
  transform:translate(-50%,4px) scale(.985); transform-origin:bottom center;
  transition:opacity .14s var(--ease,ease), transform .14s var(--ease,ease);}
.rs-tier__tip::after{content:""; position:absolute; left:50%; bottom:-5.5px; width:10px; height:10px;
  margin-left:-5px; background:var(--surface); border-right:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong); transform:rotate(45deg);}
.rs-tier:hover .rs-tier__tip, .rs-tier:focus-visible .rs-tier__tip{opacity:1; transform:translate(-50%,0) scale(1);}
.rs-tier__tiphd{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.rs-tier__tiphd b{font-size:13px; font-weight:700;}
.rs-tier__tipcode{margin-left:auto; font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:10px;
  font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:var(--r-xs);
  color:var(--tier-silver); background:var(--tier-silver-bg); border:1px solid var(--tier-silver-bd);}
.rs-tier--gold .rs-tier__tipcode{color:var(--tier-gold); background:var(--tier-gold-bg); border-color:var(--tier-gold-bd);}
.rs-tier--authorized .rs-tier__tipcode{color:var(--tier-auth); background:var(--tier-auth-bg); border-color:var(--tier-auth-bd);}
.rs-tier--platinum .rs-tier__tipcode{color:var(--tier-plat); background:var(--tier-plat-bg); border-color:var(--tier-plat-bd);}
.rs-tier__tiprow{display:flex; align-items:baseline; gap:10px; font-size:12px; margin-top:5px;}
.rs-tier__tiprow>span{color:var(--fg3); width:56px; flex:none; font-weight:500;}
.rs-tier__tiprow>b{color:var(--fg); font-weight:600;}
.rs-tier__tipblurb{display:block; margin-top:8px; padding-top:8px; border-top:1px solid var(--border);
  font-size:11.5px; line-height:1.5; color:var(--fg2); text-wrap:pretty;}

/* --------------------------- partner emblem ----------------------------
   The ceremonial mark — a certificate-style plaque: double-rule frame,
   flat medallion, letterspaced name, diamond rule and program level.
   Flat: solid tint, hairline rules, no shadow or sheen. For partner
   directories, program pages, signage and print.                        */
.rs-pemblem{position:relative; display:inline-block; vertical-align:top; width:200px;
  padding:22px 16px 16px; text-align:center;
  border:1px solid var(--tier-auth-bd); border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--tier-auth-bg) 55%, var(--surface));}
.rs-pemblem--gold{border-color:var(--tier-gold-bd);
  background:color-mix(in srgb, var(--tier-gold-bg) 55%, var(--surface));}
.rs-pemblem--platinum{border-color:var(--tier-plat-bd);
  background:color-mix(in srgb, var(--tier-plat-bg) 55%, var(--surface));}
/* inner hairline frame — the certificate double rule */
.rs-pemblem::before{content:""; position:absolute; inset:5px; z-index:1;
  border:1px solid color-mix(in srgb, var(--tier-auth-bd) 70%, transparent); border-radius:1px; pointer-events:none;}
.rs-pemblem--gold::before{border-color:color-mix(in srgb, var(--tier-gold-bd) 70%, transparent);}
.rs-pemblem--platinum::before{border-color:color-mix(in srgb, var(--tier-plat-bd) 70%, transparent);}
.rs-pemblem .rs-tier__medal{margin:0 auto 12px;}
.rs-pemblem .rs-tier__medal::after{inset:4px;}
.rs-pemblem__kicker{font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--fg3);}
.rs-pemblem__name{margin-top:3px; font-size:16.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tier-auth);}
.rs-pemblem--gold .rs-pemblem__name{color:var(--tier-gold);}
.rs-pemblem--platinum .rs-pemblem__name{color:var(--tier-plat);}
.rs-pemblem__rule{display:flex; align-items:center; gap:7px; margin:11px 12px 8px;
  color:color-mix(in srgb, var(--tier-auth) 55%, var(--tier-auth-bd));}
.rs-pemblem--gold .rs-pemblem__rule{color:color-mix(in srgb, var(--tier-gold) 55%, var(--tier-gold-bd));}
.rs-pemblem--platinum .rs-pemblem__rule{color:color-mix(in srgb, var(--tier-plat) 55%, var(--tier-plat-bd));}
.rs-pemblem__rule::before, .rs-pemblem__rule::after{content:""; flex:1; height:1px;
  background:currentColor; opacity:.55;}
.rs-pemblem__rule i{width:5px; height:5px; background:currentColor; transform:rotate(45deg); flex:none;}
.rs-pemblem__level{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg2);}

/* ------------------------- comparison matrix ---------------------------
   What each tier includes — one row per perk, one column per tier, and a
   three-state mark: tick (included) · half square (partial) · minus (not
   included). Flat: hairline rules only, marks in the tier's own color.  */
.rs-tiercmp{width:100%; border-collapse:collapse; font-size:12px; text-align:center;}
.rs-tiercmp th, .rs-tiercmp td{padding:8px 10px; border-bottom:1px solid var(--border);}
.rs-tiercmp thead th{padding-bottom:10px; vertical-align:bottom;}
.rs-tiercmp__col{display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.04em;}
.rs-tiercmp--partner .rs-tiercmp__col{font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;}
.rs-tiercmp tbody th{text-align:left; font-weight:500; color:var(--fg); white-space:nowrap;}
.rs-tiercmp__note{display:block; margin-top:2px; font-size:10.5px; font-weight:400; color:var(--fg3);}
.rs-tiercmp tbody tr:hover td, .rs-tiercmp tbody tr:hover th{background:var(--surface-2, rgba(0,0,0,.025));}
.rs-tiercmp td{min-width:84px;}
/* the three marks */
.rs-tiercmp__yes{display:inline-flex; vertical-align:middle;}
.rs-tiercmp__half{display:inline-block; width:11px; height:11px; vertical-align:middle;
  border-radius:var(--r-xs); border:1px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%);}
.rs-tiercmp__no{display:inline-flex; vertical-align:middle; color:var(--fg3); opacity:.55;}
/* legend */
.rs-tiercmp__legend{display:flex; align-items:center; gap:18px; margin-top:10px;
  font-size:11px; color:var(--fg3);}
.rs-tiercmp__legend>span{display:inline-flex; align-items:center; gap:6px;}
.rs-tiercmp__legend .rs-tiercmp__half{color:var(--fg3);}