/* Pandus kalkulyatori — BEM (pcalc), Qulay Makon tokens.css o'zgaruvchilari fallback bilan.
   Ko'chirishda: faqat .pcalc* qoidalari kerak; .pcalc-body / .pcalc-top — demo qobiq. */

.pcalc-body {
  margin: 0;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1a1f2b);
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-normal, 1.5);
}

/* --- Demo qobiq: yuqori panel --- */
.pcalc-top { border-bottom: 1px solid var(--color-border, #e3e7ee); background: var(--color-bg-card, #fff); }
.pcalc-top__inner {
  max-width: var(--container-max, 1200px); margin: 0 auto; padding: 12px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.pcalc-top__brand { font-weight: 700; color: var(--color-primary, #023E8A); text-decoration: none; font-size: 1.125rem; }
.pcalc-top__langs { display: flex; flex-wrap: wrap; gap: 4px; }
.pcalc-top__langs a {
  padding: 4px 10px; border-radius: var(--radius-full, 999px); color: var(--color-text-secondary, #4a5568);
  text-decoration: none; font-size: var(--font-size-sm, 14px);
}
.pcalc-top__langs a.is-active { background: var(--color-primary-light, #E5EBF5); color: var(--color-primary, #023E8A); font-weight: 600; }

/* --- Sahifa --- */
/* Sayt .container bilan bir xil: chekkalar logo (chap) va korzinka (o'ng) bilan tekis */
.pcalc { max-width: var(--max-width, 1600px); margin: 0 auto; padding: 16px var(--side-padding, 20px) 48px; }
.pcalc__breadcrumb { font-size: var(--font-size-sm, 14px); color: var(--color-text-muted, #6b7280); display: flex; flex-wrap: wrap; gap: 6px; }
.pcalc__breadcrumb a { color: inherit; }
.pcalc__title { font-size: clamp(1.5rem, 4vw, 2rem); line-height: var(--line-height-tight, 1.2); margin: 16px 0 8px; }
.pcalc__lead { color: var(--color-text-secondary, #4a5568); margin: 0 0 24px; }

/* Sayt global `section { padding: 60px var(--side-padding) }` ni kalkulyator ichida bekor qilish
   (aks holda qadamlar tepasida 60px bo'shliq va yonlarda ortiqcha padding paydo bo'ladi) */
.pcalc section { padding: 0; }

/* --- Index hero banner: «Калькулятор» + orqa fon rasm --- */
/* Rasm qo'yish: static/calculator/hero.jpg faylini joylang — avtomatik chiqadi.
   Rasm bo'lmasa — brend yashil fon ko'rinadi (fallback). */
.pcalc-hero {
  padding: 0; margin: 4px 0 28px; border-radius: var(--radius-xl, 16px); overflow: hidden;
  background-color: var(--color-primary, #0A4A3A);
  background-image: linear-gradient(115deg, rgba(10,74,58,.92) 0%, rgba(10,74,58,.55) 100%), url('hero.jpg');
  background-size: cover; background-position: center;
}
.pcalc-hero__inner { padding: 44px var(--side-padding, 24px); }
.pcalc-hero__title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 10px 0 10px; }
.pcalc-hero__lead { color: rgba(255,255,255,.92); margin: 0; max-width: 680px; font-size: var(--font-size-lg, 1.05rem); }
.pcalc-hero__crumb { color: rgba(255,255,255,.8); }
.pcalc-hero__crumb a { color: rgba(255,255,255,.92); }
.pcalc-hero__crumb [aria-current] { color: #fff; }

/* --- Ikki ustun: chapda kiritish (box), o'ngda chizma/natija (box) --- */
.pcalc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pcalc-layout__right { position: static; }
/* O'ng ustun ham chap forma kabi karta ko'rinishida */
.pcalc-layout__right .pcalc-result {
  margin-top: 0; background: var(--color-bg-soft, #f6f8fb);
  border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px); padding: 20px;
}
/* Karta ichidagi qadamlar: tepada ortiqcha bo'shliq yo'q, qadamlar orasida me'yoriy */
.pcalc-layout .pcalc-step { margin-top: 0; }
.pcalc-layout .pcalc-step + .pcalc-step { margin-top: 20px; }
/* Planshet/mobil (≤1024px, sayt bilan bir xil chegara): ustunlar ustma-ust, to'liq enli */
@media (max-width: 1024px) {
  .pcalc-layout { grid-template-columns: 1fr; gap: 20px; }
  .pcalc-layout__left, .pcalc-layout__right { min-width: 0; }
  .pcalc-layout__right { position: static; }
}

/* --- Buyurtma — ikki ustun ostida, markazda alohida ajralib turadigan oq quti --- */
.pcalc-buyurtma {
  max-width: 720px; margin: 28px auto 0; padding: 24px; background: #fff;
  border: 1px solid var(--color-border, #e3e7ee); border-top: 3px solid var(--color-primary, #0A4A3A);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-md, 0 4px 16px rgba(16,24,40,.08));
}
.pcalc-buyurtma__title { margin: 0 0 6px; font-size: 1.15rem; }
.pcalc-buyurtma__lead { margin: 0 0 16px; color: var(--color-text-secondary, #4a5568); font-size: var(--font-size-sm, 14px); }
.pcalc-buyurtma__grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
.pcalc-buyurtma__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 0; }
.pcalc-buyurtma__note { margin: 12px 0 0; }
.pcalc-buyurtma__status { font-size: var(--font-size-sm, 14px); color: var(--color-danger, #c0392b); }
.pcalc-buyurtma__ok {
  margin: 0; padding: 12px 14px; background: var(--color-success-light, #e6f6ee);
  border: 1px solid var(--color-success, #1e9e5a); border-radius: var(--radius-md, 8px);
  color: var(--color-text, #1a2332); font-weight: 600;
}

/* --- Forma --- */
.pcalc-form {
  background: var(--color-bg-soft, #f6f8fb); border: 1px solid var(--color-border, #e3e7ee);
  border-radius: var(--radius-lg, 12px); padding: 20px;
}
.pcalc-form__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 20px; }
.pcalc-form__field { margin: 0; min-width: 0; }
.pcalc-form__label { display: block; font-weight: 600; font-size: var(--font-size-sm, 14px); margin-bottom: 6px; padding: 0; }
.pcalc-form__input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border-strong, #c8cfdb); border-radius: var(--radius-md, 8px); background: #fff;
}
.pcalc-form__input:focus-visible { outline: 2px solid var(--color-primary, #023E8A); outline-offset: 1px; }
.pcalc-form__hint { margin: 4px 0 0; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6b7280); }
.pcalc-form__radios { border: 0; padding: 0; }
.pcalc-form__radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; min-height: 40px; cursor: pointer; }

.pcalc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px;
  border: 1px solid var(--color-primary, #023E8A); border-radius: var(--radius-md, 8px);
  background: var(--color-primary, #023E8A); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.pcalc-btn:hover { background: var(--color-primary-hover, #03306E); }
.pcalc-btn:focus-visible { outline: 2px solid var(--color-primary, #023E8A); outline-offset: 2px; }
.pcalc-btn[disabled] { opacity: .6; cursor: progress; }
.pcalc-btn--outline { background: transparent; color: var(--color-primary, #023E8A); }
.pcalc-btn--outline:hover { background: var(--color-primary-lighter, #F2F5FA); }
.pcalc-btn--small { min-height: 36px; padding: 0 14px; font-size: var(--font-size-sm, 14px); }

/* --- Natija --- */
.pcalc-result { margin-top: 32px; }
.pcalc-result[aria-busy="true"] { opacity: .5; }
.pcalc-result__title { font-size: 1.5rem; margin: 0 0 16px; }
.pcalc-result__title:focus { outline: none; }
.pcalc-result__subtitle { display: block; font-size: 1.125rem; font-weight: 700; margin: 28px 0 12px; }

.pcalc-alert { border-radius: var(--radius-md, 8px); padding: 12px 16px; border: 1px solid; }
.pcalc-alert p { margin: 4px 0; }
.pcalc-alert ul { margin: 4px 0; padding-left: 20px; }
.pcalc-alert__title { font-weight: 700; font-size: 1rem; margin: 0 0 4px; }
.pcalc-alert--error { background: var(--color-danger-light, #fdecec); border-color: var(--color-danger, #c62828); }
.pcalc-alert--warn { background: var(--color-warning-light, #fff6e0); border-color: var(--color-warning, #b7791f); }
.pcalc-alert--ok { background: var(--color-success-light, #e8f6ee); border-color: var(--color-success, #2e7d32); }

.pcalc-notes { margin: 0 0 8px; padding-left: 20px; color: var(--color-text-secondary, #4a5568); font-size: var(--font-size-sm, 14px); }
.pcalc-notes li { margin: 4px 0; }

.pcalc-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-full, 999px); font-size: var(--font-size-xs, 12px);
  font-weight: 600; background: var(--color-success-light, #e8f6ee); color: var(--color-success, #2e7d32);
}
.pcalc-badge--warn { background: var(--color-warning-light, #fff6e0); color: var(--color-warning, #8a5a00); }
.pcalc-badge--muted { background: var(--color-surface-2, #eef1f5); color: var(--color-text-secondary, #4a5568); }

.pcalc-variants { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pcalc-variant { border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px); padding: 14px 16px; }
.pcalc-variant.is-selected { border: 2px solid var(--color-primary, #023E8A); padding: 13px 15px; }
.pcalc-variant.is-disabled { background: var(--color-bg-soft, #f6f8fb); }
.pcalc-variant__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pcalc-variant__slope { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pcalc-variant__pct { color: var(--color-text-muted, #6b7280); }
.pcalc-variant__meta { margin: 6px 0 10px; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
.pcalc-variant__state { font-size: var(--font-size-sm, 14px); font-weight: 600; color: var(--color-primary, #023E8A); }

.pcalc-geom { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.pcalc-geom__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border, #e3e7ee); }
.pcalc-geom dt { color: var(--color-text-secondary, #4a5568); }
.pcalc-geom dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pcalc-geom small { display: block; font-weight: 400; color: var(--color-text-muted, #6b7280); }

.pcalc-drawing { margin: 0; }
.pcalc-drawing__svg { border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px); padding: 8px; background: #fff; }
.pcalc-drawing__note { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6b7280); margin: 6px 0 0; }

/* SVG ichki elementlari — ranglar shu yerdan */
.pcalc-svg { display: block; width: 100%; height: auto; }

.pcalc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pcalc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, 14px); }
.pcalc-table th, .pcalc-table td { padding: 10px 8px; border-bottom: 1px solid var(--color-border, #e3e7ee); text-align: left; vertical-align: top; }
.pcalc-table thead th { font-weight: 600; color: var(--color-text-muted, #6b7280); white-space: nowrap; }
.pcalc-table tbody th { font-weight: 400; }
.pcalc-table__num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcalc-table__name { display: block; font-weight: 600; }
.pcalc-table__product { display: block; margin-top: 2px; color: var(--color-primary, #023E8A); }
.pcalc-table__note { display: block; margin-top: 2px; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6b7280); white-space: normal; }
.pcalc-table tfoot th, .pcalc-table tfoot td { font-weight: 600; border-bottom: 0; }
.pcalc-price { font-weight: 600; color: var(--color-price, inherit); }
.pcalc-price--request { font-weight: 500; color: var(--color-text-secondary, #4a5568); }

.pcalc-pricing-note { margin: 12px 0 0; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
.pcalc-total {
  margin-top: 20px; padding: 16px 20px; border-radius: var(--radius-lg, 12px); background: var(--color-primary-lighter, #F2F5FA);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px;
}
.pcalc-total__label { font-weight: 600; }
.pcalc-total__value { font-size: 1.75rem; font-weight: 700; color: var(--color-primary, #023E8A); font-variant-numeric: tabular-nums; }
.pcalc-muted { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6b7280); }

.pcalc-offers { margin: 0; padding-left: 0; list-style: none; counter-reset: offer; display: grid; gap: 12px; }
.pcalc-offer { counter-increment: offer; border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px); padding: 14px 16px; }
.pcalc-offer__title { margin: 0 0 6px; font-size: 1rem; }
.pcalc-offer__title::before { content: counter(offer) ". "; color: var(--color-text-muted, #6b7280); }
.pcalc-offer p { margin: 4px 0; }
.pcalc-offer__note { font-size: var(--font-size-sm, 14px); color: var(--color-text-muted, #6b7280); }
.pcalc-offer__links { margin: 8px 0 0; padding-left: 20px; }
.pcalc-offer a, .pcalc-pricing-note a, .pcalc-table__note a { color: var(--color-primary, #023E8A); }
.pcalc-cta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.pcalc-disclaimer {
  margin-top: 40px; padding: 16px 20px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: 4px solid var(--color-primary, #0A4A3A);
  background: var(--color-bg-soft, #f7f9fc); border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #475569);
}
.pcalc-disclaimer p { margin: 4px 0; }
.pcalc-disclaimer strong { color: var(--color-text, #1a2332); }

@media (max-width: 560px) {
  .pcalc-form { padding: 16px; }
  .pcalc-btn { width: 100%; }
  .pcalc-variant .pcalc-btn { width: auto; }
  .pcalc-geom__row { flex-direction: column; gap: 2px; }
  .pcalc-geom dd { text-align: left; }
}

/* ===== A3: konstruktor ===== */
.js .pcalc-form__submit { display: none; }
.pcalc-js-note { display: none; margin: 0; font-size: var(--font-size-sm, 14px); color: var(--color-text-muted, #6b7280); }
.js .pcalc-js-note { display: block; }
.pcalc-form__actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }

.pcalc-step { margin-top: 24px; }
.pcalc-step__title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin: 0 0 12px; }
.pcalc-step__num {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary, #023E8A); color: #fff; font-size: .9rem; font-weight: 700; flex: none;
}
.pcalc-form__groups { display: grid; gap: 12px; }
.pcalc-form__group { border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-md, 8px); padding: 12px 14px 14px; margin: 0; background: #fff; }
.pcalc-form__legend { font-weight: 600; padding: 0 6px; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
.pcalc-form__group .pcalc-form__grid { margin-bottom: 0; }

/* Konfiguratsiya kartochkalari */
.pcalc-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pcalc-card {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "icon name" "icon desc" "status status";
  min-width: 0;
  gap: 2px 12px; padding: 12px 14px; border: 2px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px);
  background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.pcalc-card:hover { border-color: var(--color-border-strong, #c8cfdb); }
.pcalc-card:has(.pcalc-card__input:checked) { border-color: var(--color-primary, #023E8A); box-shadow: 0 0 0 3px var(--color-primary-light, #E5EBF5); }
.pcalc-card:has(.pcalc-card__input:focus-visible) { outline: 2px solid var(--color-primary, #023E8A); outline-offset: 2px; }
.pcalc-card__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pcalc-card__icon { grid-area: icon; width: 64px; height: 40px; color: var(--color-primary, #023E8A); }
.pcalc-card__icon svg { width: 100%; height: 100%; fill: currentColor; }
/* Uzun so'zlar (ru: "Предупреждающая") kartadan chiqib ketmasin: ustun torayadi, so'z ko'chiriladi */
.pcalc-card__name, .pcalc-card__desc, .pcalc-card__status { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.pcalc-card__name { grid-area: name; font-weight: 700; font-size: var(--font-size-sm, 15px); line-height: 1.3; }
.pcalc-card__desc { grid-area: desc; font-size: var(--font-size-xs, 12px); color: var(--color-text-secondary, #4a5568); }
.pcalc-card__status { grid-area: status; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6b7280); min-height: 1em; margin-top: 4px; }
.pcalc-card.is-fit .pcalc-card__status { color: var(--color-success, #2e7d32); }
.pcalc-card.is-unfit { background: var(--color-bg-soft, #f6f8fb); color: var(--color-text-muted, #6b7280); }
.pcalc-card.is-unfit .pcalc-card__icon { color: var(--color-text-subtle, #9aa4b2); }
.pcalc-card.is-unfit .pcalc-card__status { color: var(--color-danger, #c62828); }

/* Jonli qiyalik ko'rsatkichi */
.pcalc-slope {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border, #e3e7ee); background: var(--color-bg-soft, #f6f8fb); margin-bottom: 16px;
}
.pcalc-slope__label { font-weight: 600; color: var(--color-text-secondary, #4a5568); }
.pcalc-slope__value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.pcalc-slope__value small { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary, #4a5568); }
.pcalc-slope__note { flex-basis: 100%; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
.pcalc-badge--ok { background: var(--color-success-light, #e8f6ee); color: var(--color-success, #2e7d32); border: 1px solid currentColor; }
.pcalc-badge--bad { background: var(--color-danger-light, #fdecec); color: var(--color-danger, #c62828); border: 1px solid currentColor; }
.pcalc-konfig { margin: 0 0 8px; }

/* Sinab ko'rilgan konfiguratsiyalar */
.pcalc-tried { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pcalc-tried__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; border-radius: var(--radius-md, 8px); border: 1px solid var(--color-border, #e3e7ee); }
.pcalc-tried__name { font-weight: 600; }
.pcalc-tried__fp { color: var(--color-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.pcalc-tried__why { grid-column: 1 / -1; font-size: var(--font-size-sm, 14px); }
.pcalc-tried__item.is-unfit .pcalc-tried__why { color: var(--color-danger, #c62828); }
.pcalc-tried__item.is-fit .pcalc-tried__why { color: var(--color-success, #2e7d32); }

/* Tab'lar va toggle'lar */
.pcalc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border, #e3e7ee); margin-top: 28px; }
.pcalc-tab { font: inherit; font-weight: 600; padding: 10px 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--color-text-secondary, #4a5568); cursor: pointer; margin-bottom: -1px; }
.pcalc-tab[aria-selected="true"] { color: var(--color-primary, #023E8A); border-bottom-color: var(--color-primary, #023E8A); }
.pcalc-tab:focus-visible { outline: 2px solid var(--color-primary, #023E8A); outline-offset: -2px; }
.pcalc-panel { padding-top: 12px; }
.pcalc-toggles { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; font-size: var(--font-size-sm, 14px); }
.pcalc-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 32px; }
.pcalc-plan-wrap.is-grid-off #grid { display: none; }
.pcalc-plan-wrap.is-obyekt_olchamlari-off #obyekt_olchamlari { display: none; }
.pcalc-plan-wrap.is-pandus_olchamlari-off #pandus_olchamlari { display: none; }

/* Plan SVG */
.pcalc-plan { display: block; width: 100%; height: auto; }

@media (max-width: 560px) {
  .pcalc-card { grid-template-columns: 48px minmax(0, 1fr); }
  .pcalc-card__icon { width: 48px; height: 30px; }
  .pcalc-slope__value { font-size: 1.6rem; }
}

/* ===== Taktil plitka kalkulyatori ===== */
.pcalc-form[data-zona="yonalish"] [data-zonalar]:not([data-zonalar~="yonalish"]),
.pcalc-form[data-zona="etibor"] [data-zonalar]:not([data-zonalar~="etibor"]),
.pcalc-form[data-zona="xizmat"] [data-zonalar]:not([data-zonalar~="xizmat"]),
.pcalc-form[data-zona="piyoda"] [data-zonalar]:not([data-zonalar~="piyoda"]) { display: none; }
.pcalc-form__input--locked { background: var(--color-bg-soft, #f6f8fb); color: var(--color-text-secondary, #4a5568); border-style: dashed; cursor: not-allowed; }
.pcalc-lock { font-size: .8em; }
.pcalc-card__icon--plitka { width: 48px; height: 48px; }
.pcalc-cards--material { margin-bottom: 8px; }
.pcalc-plitka-ikonka { width: 100%; height: 100%; display: block; }
.pcalc-plitka { display: block; width: 100%; height: auto; }

/* ===== Brayl tablichka kalkulyatori ===== */
.pcalc-form__textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; min-height: 72px; resize: vertical;
  border: 1px solid var(--color-border-strong, #c8cfdb); border-radius: var(--radius-md, 8px); background: #fff; }
.pcalc-form__textarea:focus-visible { outline: 2px solid var(--color-primary, #023E8A); outline-offset: 1px; }
.pcalc-color { display: flex; align-items: center; gap: 10px; }
.pcalc-color input[type="color"] { width: 48px; height: 36px; border: 1px solid var(--color-border-strong, #c8cfdb); border-radius: var(--radius-md, 8px); padding: 2px; background: #fff; cursor: pointer; }
.pcalc-color__readout { font-size: var(--font-size-xs, 12px); color: var(--color-text-secondary, #4a5568); font-variant-numeric: tabular-nums; }
.pcalc-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--color-border-strong, #c8cfdb); vertical-align: middle; margin-right: 6px; }
.pcalc-brayl { display: block; max-width: 100%; height: auto; }
.pcalc-card--kichik { grid-template-columns: 1fr; grid-template-areas: "name" "desc" "status"; }

/* ===== Kirish sahifasi ===== */
.pcalc-index { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 24px; }
.pcalc-index__card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px); background: #fff; }
.pcalc-index__card h2 { margin: 0; font-size: 1.2rem; }
.pcalc-index__card p { margin: 0; color: var(--color-text-secondary, #4a5568); flex: 1; }
.pcalc-index__icon { width: 64px; height: 40px; color: var(--color-primary, #023E8A); }
.pcalc-index__icon svg { width: 100%; height: 100%; fill: currentColor; }

/* ===== Yig'ma ro'yxatlar va kompakt ro'yxat ===== */
.pcalc-details { margin: 12px 0; border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-md, 8px); padding: 8px 14px; background: #fff; }
.pcalc-details > summary { cursor: pointer; font-weight: 600; color: var(--color-primary, #023E8A); padding: 4px 0; }
.pcalc-details[open] > summary { margin-bottom: 8px; }
.pcalc-list { display: grid; gap: 4px; }
.pcalc-list__item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 6px 8px; border-radius: var(--radius-md, 8px); cursor: pointer; }
.pcalc-list__item:hover { background: var(--color-bg-soft, #f6f8fb); }
.pcalc-list__name { grid-column: 2; }
.pcalc-list__meta { grid-column: 2; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6b7280); }
.pcalc-cards--olcham { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ===== Chizmalar: soddalashtirilgan ko'rinish ===== */
.pcalc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: var(--font-size-xs, 12px); color: var(--color-text-secondary, #4a5568); }
.pcalc-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.pcalc-legend__chip { display: inline-block; width: 18px; height: 10px; border-radius: 2px; border: 1px solid var(--color-primary, #023E8A); }
.pcalc-legend__chip--marsh { background: #b9d1ff; }
.pcalc-legend__chip--maydoncha { background: #e3ebf7; }
.pcalc-legend__chip--kirish { background: var(--color-primary-lighter, #F2F5FA); border-style: dashed; }
.pcalc-legend__chip--plitka { background: #ffd54a; border-color: #b7791f; }
.pcalc-legend__chip--tutqich { background: #d97706; border-color: #d97706; height: 4px; }
/* Ixtiyoriy pozitsiya (masalan tutqich, h < 450 — ShNQ 62-band): ko'rsatiladi, jamiga kirmaydi */
.pcalc-table__row--ixtiyoriy th, .pcalc-table__row--ixtiyoriy td { color: var(--color-text-secondary, #4a5568); background: var(--color-primary-lighter, #F2F5FA); }
.pcalc-table__row--ixtiyoriy .pcalc-badge { margin-left: 6px; vertical-align: middle; }
.pcalc-legend__chip--eshik { background: repeating-linear-gradient(45deg, #9aa4b2 0 2px, #fff 2px 5px); border-color: #4a5568; }

/* ===== Neytral natija bloklari (yashil banner yo'q) va texnik chizma legendasi ===== */
.pcalc-slope { background: #fff; }
.pcalc-xulosa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px); background: #fff; margin-bottom: 16px; }
.pcalc-xulosa__value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pcalc-xulosa__note { flex-basis: 100%; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
.pcalc-drawing__svg { background: #fff; }
.pcalc-legend__chip { border-color: #1A1A1A; background: #fff; }
.pcalc-legend__chip--pandus { border: 1px solid #1A1A1A; }
.pcalc-legend__chip--kirish { border: 1px dashed #1A1A1A; }
.pcalc-legend__chip--plitka { background: #FFED00; border-color: #9E9E9E; }
.pcalc-legend__chip--tutqich { background: #023E8A; border-color: #023E8A; height: 3px; }
.pcalc-legend__chip--yuza { background: #023E8A; border-color: #023E8A; height: 3px; }
.pcalc-legend__chip--panjara { background: #1A1A1A; border: none; height: 1px; border-radius: 0; }
.pcalc-legend__chip--eshik { background: repeating-linear-gradient(45deg, #1A1A1A 0 1px, #fff 1px 5px); border-color: #1A1A1A; }
.pcalc-legend__chip--daraja { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #1A1A1A; background: none; border-radius: 0; }

/* ===== Qiyalik variantlari: ikki asosiy karta yonma-yon (teng), tikroq ShNQ variantlari kichikroq ===== */
.pcalc-variants--asosiy { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 10px; }
.pcalc-variants--tikroq { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 8px; }
.pcalc-variants--tikroq .pcalc-variant { padding: 10px 12px; }
.pcalc-variants--tikroq .pcalc-variant__slope { font-size: 1.05rem; }
.pcalc-variants__note { margin: 4px 0 6px; font-size: var(--font-size-sm, 14px); }
.pcalc-variant__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0; font-size: var(--font-size-sm, 14px); }
.pcalc-variant__facts div { display: flex; flex-direction: column; }
.pcalc-variant__facts dt { color: var(--color-text-muted, #6b7280); font-size: var(--font-size-xs, 12px); }
.pcalc-variant__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcalc-variant__diff { margin: 0 0 8px; font-weight: 600; color: var(--color-primary, #023E8A); }
.pcalc-talablar li { margin-bottom: 4px; }

/* ===== Plitka: qiymatlar asosi ro'yxati (sahifa osti) ===== */
.pcalc-asoslar { margin: 4px 0 0; padding-left: 18px; }
.pcalc-asoslar li { margin-bottom: 4px; }

/* ===== Sahifa tartibi (mijoz uchun): bitta majburiy maydon, javob qatori, chizma yuqorida, ma'lumotnoma yopiq ===== */
.pcalc-form__field--asosiy { max-width: 380px; }
.pcalc-form__input--katta { font-size: 1.5rem; font-weight: 700; padding: 12px 14px; }
.pcalc-aniqlashtirish { margin: 16px 0 0; background: transparent; }
.pcalc-aniqlashtirish[open] { background: #fff; }
.pcalc-aniqlashtirish > summary .pcalc-muted, .pcalc-shakl > summary .pcalc-muted { font-weight: 400; font-size: var(--font-size-sm, 14px); }
.pcalc-aniqlashtirish .pcalc-form__groups { margin-top: 4px; }
.pcalc-javob { margin: 0 0 12px; padding: 16px 20px; border: 1px solid var(--color-border, #e3e7ee); border-radius: var(--radius-lg, 12px); background: #fff; }
.pcalc-javob__matn { display: block; font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pcalc-javob__izoh { display: block; margin-top: 6px; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
.pcalc-javob + .pcalc-tabs { margin-top: 4px; }
.pcalc-shakl { margin-top: 16px; }
.pcalc-shakl__sabab { margin: 0 0 10px; }
.pcalc-malumot > summary { font-size: 1rem; }
.pcalc-malumot .pcalc-geom, .pcalc-malumot .pcalc-talablar { margin-top: 4px; }
.pcalc-variants__title { margin: 0 0 10px; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
/* 4 variant — 2 × 2 (tor ekranda 1 ustun) */
.pcalc-malumot .pcalc-variants--asosiy { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.pcalc-badge--tavsiya { background: var(--color-primary, #023E8A); color: #fff; }
.pcalc-notes--oxiri { margin-top: 16px; }

/* Modul variantlari (pandus) — ikki karta yonma-yon, kompaniya oldindan tanlangan; oraliq — yig'ma */
.pcalc-variants--modul { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0 0 12px; }
.pcalc-variant--modul .pcalc-variant__slope { font-size: 1.1rem; }
.pcalc-variant__warn {
  margin: 8px 0; padding: 8px 10px; font-size: var(--font-size-sm, 14px);
  background: var(--color-warning-light, #fff6e0); color: var(--color-warning, #8a5a00);
  border-left: 3px solid var(--color-warning, #8a5a00); border-radius: 6px;
}
.pcalc-boshqa { margin: 0 0 12px; }
.pcalc-boshqa .pcalc-variants--modul { grid-template-columns: minmax(260px, 440px); margin-top: 10px; }

/* ===== Soddalashtirish: bo'shliq + ajralib turadigan asosiy harakat ===== */
.pcalc-javob { margin-bottom: 20px; }
.pcalc-norma-izoh { margin: 0 0 18px; font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary, #4a5568); }
.pcalc-drawing__svg { padding: 14px; }
.pcalc-malumot { margin: 10px 0; }
.pcalc-result__subtitle { margin-top: 32px; }
/* Asosiy keyingi qadam — boshqalardan ajralib turadi (to'ldirilgan, kattaroq, markazda) */
.pcalc-cta--main { margin: 28px 0 8px; justify-content: center; }
.pcalc-btn--cta { min-height: 52px; padding: 0 40px; font-size: 1.0625rem; box-shadow: 0 2px 10px rgba(2, 62, 138, .25); }
.pcalc-btn--cta:hover { box-shadow: 0 4px 16px rgba(2, 62, 138, .32); }
@media (max-width: 560px) {
  .pcalc-btn--cta { width: 100%; }
  .pcalc-result__subtitle { margin-top: 24px; }
}