/* =========================================
   Radar Landing Patterns Library
   File: /radar/assets/landing.patterns.css
   Only .lp-* classes. No product classes.
   ========================================= */

/* -------------------------
   Panel Contract (Safety)
   ------------------------- */

/* Panels must clip overflowing content so nothing can visually "escape" */
.lp-panel{
  overflow: hidden;
}

/* Mandatory inner container: keeps spacing + prevents flex/grid overflow */
.lp-panel-inner{
  width: 100%;
  height: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Text safety helpers (use when you output raw text blocks) */
.lp-text{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* -------------------------
   Pattern: Bars50
   2 columns (50/50): label | (bar + %)
   ------------------------- */

.lp-bars{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.lp-bars-row{
  display: grid;
  grid-template-columns: 1fr 1fr; /* hard 50/50 */
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lp-bars-label{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lp-bars-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--stroke);
  flex: 0 0 auto;
}

.lp-bars-text{
  min-width: 0;
  font-weight: 650;
  font-size: 14px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-bars-right{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lp-bars-track{
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  min-width: 0;
}

.lp-bars-fill{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  width: 0%;
}

.lp-bars-pct{
  flex: 0 0 auto;
  width: 44px;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-2);
}

/* -------------------------
   Pattern: KPI
   Big number + explanation
   ------------------------- */

.lp-kpi{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lp-kpi-value{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.lp-kpi-text{
  color: var(--text-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* -------------------------
   Pattern: Text Stack
   ------------------------- */

.lp-text-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* -------------------------
   Pattern: CTA Row
   Text | Button
   ------------------------- */

.lp-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

/* -------------------------
   Pattern: Timeline (base)
   ------------------------- */

.lp-timeline{
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.lp-timeline-row{
  display: grid;
  grid-template-columns: 64px 18px 1fr;
  gap: 18px;
  align-items: start;
  min-width: 0;
}
/* =========================================
   Bars Pattern Extensions
   ========================================= */

/* ----- Fill width from attribute ----- */

.lp-bars-fill[data-fill="9"]  { width: 9%;  }
.lp-bars-fill[data-fill="17"] { width: 17%; }
.lp-bars-fill[data-fill="22"] { width: 22%; }
.lp-bars-fill[data-fill="26"] { width: 26%; }

/* можно добавлять новые при необходимости */


/* ----- Tone system (dot + bar color) ----- */

.lp-tone-gray .lp-bars-dot{
  background: #8A94A6;
}

.lp-tone-gray .lp-bars-fill{
  background: #8A94A6;
}


.lp-tone-red .lp-bars-dot{
  background: #FF5A5F;
}

.lp-tone-red .lp-bars-fill{
  background: #FF5A5F;
}


.lp-tone-orange .lp-bars-dot{
  background: #FF9F2F;
}

.lp-tone-orange .lp-bars-fill{
  background: #FF9F2F;
}


.lp-tone-yellow .lp-bars-dot{
  background: #FFC94A;
}

.lp-tone-yellow .lp-bars-fill{
  background: #FFC94A;
}


.lp-tone-green .lp-bars-dot{
  background: #27D17F;
}

.lp-tone-green .lp-bars-fill{
  background: #27D17F;
}


/* ----- Compact version ----- */

.lp-bars--compact .lp-bars-text{
  font-size: 13px;
}

.lp-bars--compact .lp-bars-row{
  gap: 12px;
}