/* =============================================================================
   КАРТА 12 ХРАНИТЕЛІВ — базові стилі, v1.1

   Усі класи з префіксом hr- , тому з класами Webflow не конфліктують.
   Це робочий мінімум, щоб квіз виглядав нормально відразу. Кольори й шрифти
   виведені в змінні нижче — перевизначте їх у Webflow (Site settings →
   Custom code → Head) під ваш брендбук, решту чіпати не треба.

   Якщо хочете стилізувати все в Designer: цей файл можна не підключати,
   але тоді задайте в Designer класи hr-opt / hr-on / hr-rail-seg / hr-bars i,
   бо стани «вибрано» і висоти смуг Designer сам не намалює.
============================================================================= */

:root{
  --hr-ink:#14201E;
  --hr-ink-2:#42524F;
  --hr-ink-3:#6E7D7A;
  --hr-paper:#FFFFFF;
  --hr-surface:#F7F9F8;
  --hr-surface-2:#EDF1F0;
  --hr-rule:#DCE3E1;
  --hr-rule-2:#C3CCCA;
  --hr-accent:#0F5C57;

  --hr-p-captured:#BE4239;
  --hr-p-lowAccess:#8A9895;
  --hr-p-integrated:#3B8657;
  --hr-p-awareShadow:#39699E;
  --hr-p-resourcefulShadow:#B2811F;
  --hr-p-lowResource:#B96430;
  --hr-p-integrating:#75569A;

  --hr-s-R:#0F5C57;
  --hr-s-T:#BE4239;
  --hr-s-Z:#8E3229;
  --hr-s-U:#39699E;
  --hr-s-P:#3E9089;

  --hr-font:inherit;
  --hr-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --hr-radius:6px;
}

/* ── кольори за атрибутом ───────────────────────────────────────────────── */
.hr-dot{width:9px; height:9px; border-radius:50%; flex:none; display:inline-block}
.hr-dot[data-profile="captured"],
.hr-profile-name[data-profile="captured"]{background:var(--hr-p-captured)}
.hr-dot[data-profile="lowAccess"],
.hr-profile-name[data-profile="lowAccess"]{background:var(--hr-p-lowAccess)}
.hr-dot[data-profile="integrated"],
.hr-profile-name[data-profile="integrated"]{background:var(--hr-p-integrated)}
.hr-dot[data-profile="awareShadow"],
.hr-profile-name[data-profile="awareShadow"]{background:var(--hr-p-awareShadow)}
.hr-dot[data-profile="resourcefulShadow"],
.hr-profile-name[data-profile="resourcefulShadow"]{background:var(--hr-p-resourcefulShadow)}
.hr-dot[data-profile="lowResource"],
.hr-profile-name[data-profile="lowResource"]{background:var(--hr-p-lowResource)}
.hr-dot[data-profile="integrating"],
.hr-profile-name[data-profile="integrating"]{background:var(--hr-p-integrating)}

.hr-profile-name{background:none!important; font-weight:600}
.hr-profile-name[data-profile="captured"]{color:var(--hr-p-captured)}
.hr-profile-name[data-profile="lowAccess"]{color:var(--hr-p-lowAccess)}
.hr-profile-name[data-profile="integrated"]{color:var(--hr-p-integrated)}
.hr-profile-name[data-profile="awareShadow"]{color:var(--hr-p-awareShadow)}
.hr-profile-name[data-profile="resourcefulShadow"]{color:var(--hr-p-resourcefulShadow)}
.hr-profile-name[data-profile="lowResource"]{color:var(--hr-p-lowResource)}
.hr-profile-name[data-profile="integrating"]{color:var(--hr-p-integrating)}

.hr-bars i[data-scale="R"], .hr-scaletable b[data-scale="R"]{background:var(--hr-s-R)}
.hr-bars i[data-scale="T"], .hr-scaletable b[data-scale="T"]{background:var(--hr-s-T)}
.hr-bars i[data-scale="Z"], .hr-scaletable b[data-scale="Z"]{background:var(--hr-s-Z)}
.hr-bars i[data-scale="U"], .hr-scaletable b[data-scale="U"]{background:var(--hr-s-U)}
.hr-bars i[data-scale="P"], .hr-scaletable b[data-scale="P"]{background:var(--hr-s-P)}
.hr-scaletable b{background:none!important}
.hr-scaletable b[data-scale="R"]{color:var(--hr-s-R)}
.hr-scaletable b[data-scale="T"]{color:var(--hr-s-T)}
.hr-scaletable b[data-scale="Z"]{color:var(--hr-s-Z)}
.hr-scaletable b[data-scale="U"]{color:var(--hr-s-U)}
.hr-scaletable b[data-scale="P"]{color:var(--hr-s-P)}

/* ── прогрес ────────────────────────────────────────────────────────────── */
.hr-rail{display:flex; gap:3px}
.hr-rail-seg{flex:1; height:4px; border-radius:2px; background:var(--hr-rule-2);
  transition:background .2s}
.hr-rail-seg.hr-done{background:var(--hr-accent)}
.hr-rail-seg.hr-now{background:var(--hr-accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--hr-accent) 22%, transparent)}

/* ── легенда 0–4 ────────────────────────────────────────────────────────── */
.hr-legend{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  padding:12px; border:1px dashed var(--hr-rule-2); border-radius:var(--hr-radius);
  background:var(--hr-surface)}
.hr-legend-item{text-align:center}
.hr-legend-item b{display:block; font:600 14px/1 var(--hr-mono); color:var(--hr-accent)}
.hr-legend-item span{display:block; margin-top:5px; font-size:11px; line-height:1.3;
  color:var(--hr-ink-3)}
@media(max-width:560px){ .hr-legend-item span{display:none} }

/* ── твердження ─────────────────────────────────────────────────────────── */
.hr-list{display:flex; flex-direction:column}
.hr-q{padding-block:18px; border-bottom:1px solid var(--hr-rule);
  display:grid; gap:12px}
.hr-q:last-child{border-bottom:0}
.hr-q-head{display:flex; gap:10px; align-items:baseline}
.hr-q-code{font:500 11px/1.5 var(--hr-mono); color:var(--hr-ink-3); min-width:34px}
.hr-q-scale{font:500 10px/1.5 var(--hr-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--hr-ink-3)}
.hr-q-text{font-size:15.5px; line-height:1.55; max-width:64ch; color:var(--hr-ink)}
.hr-q.hr-unanswered .hr-q-code{color:var(--hr-p-captured)}
.hr-q.hr-unanswered{background:color-mix(in srgb, var(--hr-p-captured) 5%, transparent)}

.hr-opts{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px;
  max-width:400px}
.hr-opt{display:flex; align-items:center; justify-content:center; height:42px;
  border:1px solid var(--hr-rule-2); border-radius:var(--hr-radius);
  background:var(--hr-paper); font:500 15px/1 var(--hr-mono); color:var(--hr-ink-2);
  cursor:pointer; transition:border-color .12s, background .12s, color .12s;
  position:relative}
.hr-opt input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.hr-opt:hover{border-color:var(--hr-accent)}
.hr-opt input:focus-visible + span{outline:2px solid var(--hr-accent);
  outline-offset:3px; border-radius:4px}
.hr-opt.hr-on{background:var(--hr-accent); border-color:var(--hr-accent);
  color:var(--hr-paper)}

/* ── стани кнопок навігації ─────────────────────────────────────────────── */
/* hr-incomplete: не всі 15 відповідей. Кнопка пригашена, але робоча —
   клік підсвічує пропущені твердження. Мертва кнопка не пояснює людині,
   чому нічого не сталося. */
.hr-incomplete{opacity:.45}
/* hr-disabled: «Назад» на першому кроці — справді нікуди не веде */
.hr-disabled{opacity:.4; pointer-events:none}

/* ── чипи профілів ──────────────────────────────────────────────────────── */
.hr-chiprow{display:flex; flex-wrap:wrap; gap:7px}
.hr-chip{display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px;
  border:1px solid var(--hr-rule-2); border-radius:20px; background:var(--hr-surface);
  font-size:12.5px; font-weight:500; color:var(--hr-ink)}
.hr-chip-n{font-family:var(--hr-mono); color:var(--hr-ink-3)}

/* ── карта ──────────────────────────────────────────────────────────────── */
.hr-map{border:1px solid var(--hr-rule); border-radius:var(--hr-radius);
  overflow:hidden; background:var(--hr-surface)}
.hr-map-head,.hr-map-row{display:grid; grid-template-columns:1fr 148px 124px;
  gap:12px; align-items:center; padding:11px 15px; text-align:left}
.hr-map-head{background:var(--hr-surface-2); border-bottom:1px solid var(--hr-rule)}
.hr-map-head span{font:500 10px/1 var(--hr-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--hr-ink-3)}
.hr-map-row{border:0; border-bottom:1px solid var(--hr-rule); width:100%;
  background:var(--hr-surface); cursor:pointer; font:inherit; color:var(--hr-ink)}
.hr-map-row:hover{background:var(--hr-surface-2)}
.hr-map-name{display:flex; align-items:center; gap:9px; min-width:0}
.hr-map-t{font-weight:500; font-size:14.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.hr-caret{font:400 11px/1 var(--hr-mono); color:var(--hr-ink-3); flex:none}
.hr-bars{display:flex; gap:3px; align-items:flex-end; height:26px}
.hr-bars i{flex:1; border-radius:1px 1px 0 0; min-height:2px}
.hr-map-nums{font:500 12px/1 var(--hr-mono); color:var(--hr-ink-3);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
@media(max-width:600px){
  .hr-map-head,.hr-map-row{grid-template-columns:1fr 100px; gap:9px; padding:10px 12px}
  .hr-map-head span:nth-child(3),.hr-map-nums{display:none}
}

.hr-detail{padding:0 15px 18px; background:var(--hr-surface-2);
  border-bottom:1px solid var(--hr-rule); display:grid; gap:14px; padding-top:16px}
/* ОБОВ'ЯЗКОВО: display:grid вище перебиває атрибут hidden, і тоді всі 12 блоків
   розпаковки розкриті одразу. Не видаляйте це правило. */
.hr-detail[hidden]{display:none}
.hr-detail h4{margin:0 0 5px; font:500 10px/1 var(--hr-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--hr-ink-3)}
.hr-detail p{font-size:14px; line-height:1.6; color:var(--hr-ink-2);
  max-width:64ch; margin:0 0 9px}
.hr-detail p:last-child{margin-bottom:0}
.hr-todo{color:var(--hr-p-lowResource)!important; font-family:var(--hr-mono);
  font-size:12.5px!important}
.hr-scaletable{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.hr-scaletable div{border:1px solid var(--hr-rule-2); border-radius:5px;
  padding:7px 8px; background:var(--hr-paper)}
.hr-scaletable b{display:block; font:600 15px/1 var(--hr-mono);
  font-variant-numeric:tabular-nums}
.hr-scaletable span{display:block; margin-top:4px; font:400 10px/1.2 var(--hr-mono);
  letter-spacing:.06em; color:var(--hr-ink-3)}

/* ── осі ────────────────────────────────────────────────────────────────── */
.hr-beams{display:flex; flex-direction:column; border:1px solid var(--hr-rule);
  border-radius:var(--hr-radius); overflow:hidden; background:var(--hr-surface)}
.hr-beam{padding:15px; border-bottom:1px solid var(--hr-rule)}
.hr-beam:last-child{border-bottom:0}
.hr-beam.hr-mature{box-shadow:inset 3px 0 0 var(--hr-p-integrated)}
.hr-beam.hr-growth{box-shadow:inset 3px 0 0 var(--hr-p-lowResource)}
.hr-beam-top{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-bottom:11px}
.hr-beam-nm{font:500 10px/1 var(--hr-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--hr-ink-3)}
.hr-beam-st{font-size:12.5px; font-weight:500; color:var(--hr-ink)}
.hr-track{position:relative; height:30px}
.hr-track-line{position:absolute; top:14px; left:0; right:0; height:2px;
  background:var(--hr-rule-2); border-radius:1px}
.hr-track-mid{position:absolute; top:8px; left:50%; width:1px; height:14px;
  background:var(--hr-rule-2); transform:translateX(-50%)}
.hr-track-pin{position:absolute; top:7px; width:3px; height:16px; border-radius:2px;
  background:var(--hr-accent); transform:translateX(-50%)}
.hr-beam-ends{display:flex; justify-content:space-between; gap:12px;
  font-size:13px; margin-top:2px; color:var(--hr-ink-2)}
.hr-beam-ends b{font-family:var(--hr-mono); font-variant-numeric:tabular-nums;
  color:var(--hr-ink)}
.hr-beam-foot{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px;
  align-items:center}
.hr-beam-note{margin:10px 0 0; font-size:13px; line-height:1.5;
  color:var(--hr-ink-3); max-width:62ch}
.hr-tag{font:500 11px/1 var(--hr-mono); letter-spacing:.05em; padding:5px 9px;
  border-radius:4px; background:var(--hr-surface-2); color:var(--hr-ink-2);
  border:1px solid var(--hr-rule)}
.hr-tag.hr-warn{color:var(--hr-p-resourcefulShadow); border-color:currentColor}

/* ── рейтинги ───────────────────────────────────────────────────────────── */
.hr-ranks{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--hr-rule); border:1px solid var(--hr-rule);
  border-radius:var(--hr-radius); overflow:hidden}
.hr-rank{background:var(--hr-surface); padding:14px 15px}
.hr-rank h3{margin:0 0 10px; font:500 10px/1.3 var(--hr-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--hr-ink-3)}
.hr-rank ol{margin:0; padding:0; list-style:none; display:flex;
  flex-direction:column; gap:7px}
.hr-rank li{display:grid; grid-template-columns:16px 1fr auto; gap:9px;
  align-items:baseline; font-size:14px; color:var(--hr-ink)}
.hr-rank-i{font:500 11px/1.5 var(--hr-mono); color:var(--hr-ink-3)}
.hr-rank-n{display:flex; align-items:center; gap:7px}
.hr-rank-v{font:500 12px/1.5 var(--hr-mono); color:var(--hr-ink-3);
  font-variant-numeric:tabular-nums}
.hr-none{margin:0; font-size:13px; color:var(--hr-ink-3); font-style:italic}
.hr-rank-cap{margin:10px 0 0; font-size:12.5px; color:var(--hr-ink-3); line-height:1.5}

/* ── вузол, маршрут, Рівень 2 ───────────────────────────────────────────── */
.hr-card{border:1px solid var(--hr-rule); border-radius:var(--hr-radius);
  background:var(--hr-surface); padding:17px}
.hr-card p{margin:0 0 11px; color:var(--hr-ink-2); line-height:1.6}
.hr-card p:last-child{margin-bottom:0}
.hr-disc{font:500 11.5px/1.5 var(--hr-mono); color:var(--hr-ink-3)!important}

.hr-route{display:flex; flex-direction:column; gap:1px; background:var(--hr-rule);
  border:1px solid var(--hr-rule); border-radius:var(--hr-radius); overflow:hidden}
.hr-step{background:var(--hr-surface); padding:16px; display:grid;
  grid-template-columns:34px 1fr; gap:14px}
.hr-step-num{font:600 13px/1 var(--hr-mono); color:var(--hr-accent); padding-top:3px;
  border-right:1px solid var(--hr-rule)}
.hr-step-lb{font:500 10px/1 var(--hr-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--hr-ink-3)}
.hr-step-who{font-size:20px; font-weight:600; margin-top:6px; color:var(--hr-ink)}
.hr-step-hint{font-size:13.5px; color:var(--hr-ink-2); margin-top:5px; max-width:58ch}

.hr-l2list{display:flex; flex-direction:column; gap:9px}
.hr-l2{display:flex; gap:11px; align-items:center; padding:12px 15px;
  border:1px solid var(--hr-rule); border-radius:7px; background:var(--hr-surface);
  flex-wrap:wrap}
.hr-l2-nm{font-weight:500; font-size:14.5px; flex:1; color:var(--hr-ink)}

/* ── технічна таблиця ───────────────────────────────────────────────────── */
.hr-techwrap{overflow-x:auto; border:1px solid var(--hr-rule);
  border-radius:var(--hr-radius)}
table.hr-tech{width:100%; border-collapse:collapse;
  font:400 12.5px/1.4 var(--hr-mono); font-variant-numeric:tabular-nums}
table.hr-tech th,table.hr-tech td{padding:8px 11px; text-align:right;
  border-bottom:1px solid var(--hr-rule); white-space:nowrap; color:var(--hr-ink-2)}
table.hr-tech th{font-weight:600; color:var(--hr-ink-3);
  background:var(--hr-surface-2); font-size:11px; letter-spacing:.05em}
table.hr-tech th:first-child,table.hr-tech td:first-child{text-align:left}
table.hr-tech tbody tr:last-child td{border-bottom:0}

@media (prefers-reduced-motion:reduce){
  .hr-rail-seg,.hr-opt{transition:none}
}