/* Hive Ladder check (tools/rung-assessment.html). House colors: navy #1E3A5F, honey #D8A62A, paper #F3F5F7. */
.hl { max-width: 900px; margin: 0 auto; padding: 24px 16px 56px; font-family: "Public Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #15202c; display: grid; gap: 20px; }
.hl-head { display: grid; gap: 8px; }
.hl-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #566271; }
.hl-h1 { font-size: clamp(28px, 4.5vw, 38px); font-weight: 900; color: #1e3a5f; margin: 0; line-height: 1.15; }
.hl-lede { font-size: 17px; color: #3a4654; max-width: 65ch; margin: 0; }
.hl-rungs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; font-size: 14px; font-weight: 600; }
.hl-rungs span { display: inline-flex; align-items: center; gap: 6px; }
.hl-card { background: #fff; border: 1px solid #d2d8df; border-radius: 10px; padding: 24px 28px; display: grid; gap: 18px; min-width: 0; }
@media (max-width: 600px) { .hl-card { padding: 18px 16px; } }
.hl-h2 { font-size: 20px; font-weight: 700; margin: 0; }
.hl-muted { color: #566271; margin: 0; }
.hl-muted.small, .small { font-size: 13px; }
.hl-muted a { color: #1e3a5f; }
.hl-badge { flex: none; vertical-align: middle; }
.hl-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-topic input, .hl-choice input, .hl-seg input, .hl-guess input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hl-topic span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #d2d8df; border-radius: 99px; font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; }
.hl-topic input:checked + span { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.hl-topic input:focus-visible + span, .hl-choice input:focus-visible + span, .hl-seg input:focus-visible + span, .hl-guess input:focus-visible ~ span { outline: 3px solid #d8a62a; outline-offset: 2px; }
.hl-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.hl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 8px; border: 1px solid #d2d8df; background: #fff; color: #15202c; cursor: pointer; text-decoration: none; }
.hl-btn:hover { border-color: #1e3a5f; }
.hl-btn.primary { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.hl-btn.primary:hover { background: #2b4c75; }
.hl-btn[disabled] { opacity: .45; cursor: not-allowed; }
.hl-btn:focus-visible, .hl-link:focus-visible { outline: 3px solid #d8a62a; outline-offset: 2px; }
.hl-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: #1e3a5f; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hl-step-head { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: baseline; }
.hl-progress { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #566271; }
.hl-progress i { width: 22px; height: 6px; border-radius: 3px; background: #d2d8df; }
.hl-progress i.on { background: #d8a62a; }
.hl-q { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.hl-q legend { font-size: 16px; font-weight: 700; padding: 0; margin-bottom: 8px; }
.hl-choices { display: grid; gap: 8px; }
.hl-choice { position: relative; }
.hl-choice span { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #d2d8df; border-radius: 8px; font-size: 15px; cursor: pointer; background: #fff; }
.hl-choice span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #8a96a3; flex: none; margin-top: 2px; box-sizing: border-box; }
.hl-choice input:checked + span { border-color: #1e3a5f; background: #e5ebf2; }
.hl-choice input:checked + span::before { border-color: #1e3a5f; background: #1e3a5f; box-shadow: inset 0 0 0 3px #e5ebf2; }
.hl-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid #d2d8df; border-radius: 8px; overflow: hidden; }
.hl-seg label { position: relative; border-left: 1px solid #d2d8df; }
.hl-seg label:first-child { border-left: 0; }
.hl-seg span { display: block; text-align: center; padding: 9px 4px; font-size: 14px; font-weight: 600; cursor: pointer; }
.hl-seg input:checked + span { background: #1e3a5f; color: #fff; }
@media (max-width: 520px) { .hl-seg span { font-size: 12px; padding: 9px 2px; } }
.hl-guess { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.hl-guess label { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #d2d8df; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; }
.hl-guess label:has(input:checked) { border-color: #1e3a5f; background: #e5ebf2; }
.hl-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #d2d8df; border-radius: 8px; resize: vertical; }
.hl-text:focus { outline: 3px solid #d8a62a; outline-offset: 1px; }
.hl-sub-q { font-size: 14px; font-weight: 600; margin: 4px 0 0; }
.hl-error { color: #b3261e; font-weight: 600; margin: 0; }
.hl-results { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .hl-results { grid-template-columns: 1fr; } }
.hl-map { margin: 0; }
.hl-map svg { width: 100%; height: auto; display: block; font-family: inherit; }
.hl-side { display: grid; gap: 14px; }
.hl-verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hl-verdict { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hl-verdict p { margin: 0; }
.hl-confirm { margin: 0; font-size: 14px; background: #fbf3df; padding: 10px 12px; border-radius: 8px; }
.hl-private { font-size: 13px; color: #566271; margin: 0; }