/* ==========================================================================
   RiverSync — Product family badge  ·  rs-family.css
   Canonical identity badge for the three product families (SPEC-PRD-PRO §6,
   PRO-17): frigo · koelkast · nevera. The glyph encodes the family's
   capability axis — frigo = flat line (fixed-speed screw compressor),
   koelkast = modulating wave (inverter variable-speed), nevera = module bays
   + grow mark (modular, pay-as-you-grow) — drawn on the shared cabinet
   silhouette. Chassis mirrors the tier chip (tokens/tiers.css): flat solid
   plaque + label, 2px corner, hairline inner rim, hover capability tooltip.
   No gradients, no shadows on the chip itself. Pairs with rs-family.js.
   ========================================================================== */

:root{
  --fam-frigo:#3F6E93;    --fam-frigo-bg:#EAF1F7;    --fam-frigo-bd:#C2D6E6;    --fam-frigo-fill:#527FA3;
  --fam-koelkast:#2F7D6D; --fam-koelkast-bg:#E7F3EF; --fam-koelkast-bd:#B9DACF; --fam-koelkast-fill:#43907E;
  --fam-nevera:#6A5EA8;   --fam-nevera-bg:#EFECF8;   --fam-nevera-bd:#D0C9E9;   --fam-nevera-fill:#8177B8;
}
[data-theme="dark"]{
  --fam-frigo:#8FB6D4;    --fam-frigo-bg:rgba(143,182,212,.12);  --fam-frigo-bd:rgba(143,182,212,.32);  --fam-frigo-fill:#41678A;
  --fam-koelkast:#6FC0AE; --fam-koelkast-bg:rgba(111,192,174,.11); --fam-koelkast-bd:rgba(111,192,174,.30); --fam-koelkast-fill:#33705F;
  --fam-nevera:#A99EDC;   --fam-nevera-bg:rgba(169,158,220,.12); --fam-nevera-bd:rgba(169,158,220,.30); --fam-nevera-fill:#5F5694;
}

/* ------------------------------ the chip -------------------------------- */
.rs-fam{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:2px 9px 2px 3px; border-radius:var(--r-xs,2px); border:1px solid var(--famc-bd);
  color:var(--famc); background:var(--famc-bg);
  white-space:nowrap; line-height:1; vertical-align:middle; position:relative;
  transition:border-color .16s var(--ease,ease);}
.rs-fam--frigo   {--famc:var(--fam-frigo);    --famc-bg:var(--fam-frigo-bg);    --famc-bd:var(--fam-frigo-bd);    --famc-fill:var(--fam-frigo-fill);}
.rs-fam--koelkast{--famc:var(--fam-koelkast); --famc-bg:var(--fam-koelkast-bg); --famc-bd:var(--fam-koelkast-bd); --famc-fill:var(--fam-koelkast-fill);}
.rs-fam--nevera  {--famc:var(--fam-nevera);   --famc-bg:var(--fam-nevera-bg);   --famc-bd:var(--fam-nevera-bd);   --famc-fill:var(--fam-nevera-fill);}
.rs-fam[tabindex]{cursor:help;}
.rs-fam:hover{border-color:currentColor; z-index:61;}
.rs-fam:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring, rgba(54,121,172,.30)); z-index:61;}
.rs-fam__label{padding-right:1px; letter-spacing:.005em;}

/* ----------------------------- the plaque ------------------------------- */
.rs-fam__medal{width:20px; height:20px; border-radius:var(--r-xs,2px); flex:none; position:relative;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  background:var(--famc-fill);}
.rs-fam__medal::after{content:""; position:absolute; inset:2px; border-radius:1px;
  border:1px solid rgba(255,255,255,.40); pointer-events:none;}
.rs-fam__medal svg{position:relative; z-index:1; display:block;}

/* ------------------------------ variants -------------------------------- */
/* compact — dense tables, mobile rows */
.rs-fam--sm{font-size:11px; gap:5px; padding:1px 7px 1px 2px;}
.rs-fam--sm .rs-fam__medal{width:16px; height:16px;}
.rs-fam--sm .rs-fam__medal::after{inset:1.5px;}
/* icon-only — plaque alone (tooltip carries the name); tightest surfaces */
.rs-fam--icon{padding:0; border:none; background:none; gap:0;}
.rs-fam--icon .rs-fam__label{display:none;}

/* --------------------------- capability tooltip -------------------------
   Same contract as the tier chip's detail tooltip (tokens/tiers.css) —
   restated here so the badge is standalone on every surface.              */
.rs-fam__tip{position:absolute; z-index:60; left:50%; bottom:calc(100% + 10px);
  width:max-content; min-width:216px; max-width:272px; display:block; text-align:left;
  background:var(--surface,#fff); color:var(--fg,#1C2126); border:1px solid var(--border-strong,#D2DAE1);
  border-radius:var(--r-sm,3px); box-shadow:var(--shadow-lg,0 8px 24px rgba(18,26,33,.12)); padding:11px 12px 10px;
  font-weight:400; font-size:12px; 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-fam__tip::after{content:""; position:absolute; left:50%; bottom:-5.5px; width:10px; height:10px;
  margin-left:-5px; background:var(--surface,#fff); border-right:1px solid var(--border-strong,#D2DAE1);
  border-bottom:1px solid var(--border-strong,#D2DAE1); transform:rotate(45deg);}
.rs-fam:hover .rs-fam__tip, .rs-fam:focus-visible .rs-fam__tip{opacity:1; transform:translate(-50%,0) scale(1);}
@media (prefers-reduced-motion: reduce){ .rs-fam__tip{transition:none;} }
.rs-fam__tiphd{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.rs-fam__tiphd b{font-size:13px; font-weight:700;}
.rs-fam__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,2px);
  color:var(--famc); background:var(--famc-bg); border:1px solid var(--famc-bd);}
.rs-fam__tiprow{display:flex; align-items:baseline; gap:10px; font-size:12px; margin-top:5px;}
.rs-fam__tiprow>span{color:var(--fg3,#66737F); width:72px; flex:none; font-weight:500;}
.rs-fam__tiprow>b{color:var(--fg,#1C2126); font-weight:600;}
.rs-fam__tipblurb{display:block; margin-top:8px; padding-top:8px; border-top:1px solid var(--border,#E4E9EE);
  font-size:11.5px; line-height:1.5; color:var(--fg2,#4A5560); text-wrap:pretty;}