.xb-assess.xt-tool { display: block; padding-top: var(--xn-px-48); padding-bottom: var(--xn-px-104); } .xt-tool .xt-panel { display: block; flex: none; min-width: 0; max-width: var(--xn-px-860); margin-inline: auto; padding: var(--xn-px-40); border: var(--xn-hairline) solid var(--xn-line); border-radius: var(--xn-radius); background: var(--xn-ground); scroll-margin-top: calc(var(--xn-header-h) + var(--xn-px-16)); } .xt-tool .xt-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-280), 1fr)); gap: var(--xn-px-48); flex: none; max-width: none; margin-top: var(--xn-px-80); } .xt-tool .xt-aside .xb-rule { grid-column: 1 / -1; padding-top: var(--xn-px-8); } .xt-progress { margin-bottom: var(--xn-px-36); } .xt-progress__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--xn-px-4) var(--xn-px-16); margin-bottom: var(--xn-px-14); } .xt-progress__step { margin: 0; font-size: var(--xn-px-15); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xt-progress__count { margin: 0; font-size: var(--xn-px-14); color: var(--xn-text-2); } .xt-track { display: flex; gap: var(--xn-px-6); margin: 0; padding: 0; list-style: none; } .xt-track__seg { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--xn-px-8); min-width: 0; } .xt-track__bar { display: block; height: var(--xn-px-4); background: var(--xn-line); } .xt-track__seg.is-done .xt-track__bar { background: var(--xn-accent); } .xt-track__seg.is-current .xt-track__bar { background: var(--xn-ink); } .xt-track__name { display: block; font-size: var(--xn-px-13); line-height: 1.35; color: var(--xn-text-2); overflow-wrap: anywhere; } .xt-track__seg.is-current .xt-track__name { color: var(--xn-ink); font-weight: var(--xn-w-semibold); } .xt-track__seg.is-done .xt-track__name { color: var(--xn-ink); } .xt-track__seg.is-done .xt-track__name::before { content: ""; display: inline-block; width: var(--xn-px-4); height: var(--xn-px-8); margin-right: var(--xn-px-8); border: solid var(--xn-accent); border-width: 0 var(--xn-px-2) var(--xn-px-2) 0; transform: translateY(-1px) rotate(45deg); } .xt-step { display: none; min-width: 0; } .xt-step.is-current { display: block; } .xt-step__title { margin: 0; font-size: var(--xn-px-28); font-weight: var(--xn-w-semibold); line-height: 1.2; letter-spacing: -0.012em; color: var(--xn-ink); } .xt-step__title:focus:not(:focus-visible) { outline: 0; } .xt-step__intro { max-width: var(--xn-px-640); margin: var(--xn-px-12) 0 0; font-size: var(--xn-px-17); line-height: 1.6; color: var(--xn-body); } .xt-qbox { margin: var(--xn-px-26) 0 0; padding: var(--xn-gap-rule) 0 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xt-q { min-width: 0; margin: 0; padding: 0; border: 0; } .xt-step__title + .xt-qbox, .xt-step__intro + .xt-qbox { margin-top: var(--xn-px-28); padding-top: 0; border-top: 0; } .xt-q__text { display: block; width: 100%; margin: 0 0 var(--xn-px-16); padding: 0; font-size: var(--xn-px-19); font-weight: var(--xn-w-semibold); line-height: 1.4; color: var(--xn-ink); } .xt-q__num { color: var(--xn-text-2); } .xt-scale-legend { display: flex; align-items: center; gap: var(--xn-px-12); margin: 0 0 var(--xn-px-14); font-size: var(--xn-px-12); font-weight: var(--xn-w-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--xn-text-2); } .xt-scale-legend__rule { position: relative; flex: 0 1 var(--xn-px-120); height: var(--xn-hairline); background: var(--xn-field); } .xt-scale-legend__rule::after { content: ""; position: absolute; top: calc(var(--xn-px-3) * -1); right: 0; width: var(--xn-px-6); height: var(--xn-px-6); border: solid var(--xn-field); border-width: var(--xn-hairline) var(--xn-hairline) 0 0; transform: rotate(45deg); } .xt-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-12); } .xt-card { position: relative; display: flex; align-items: flex-start; gap: var(--xn-px-14); min-height: var(--xn-px-56); padding: var(--xn-px-16) var(--xn-px-18); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); background: var(--xn-ground); cursor: pointer; transition: border-color var(--xn-motion), background-color var(--xn-motion); } .xt-card:hover { border-color: var(--xn-ink); } .xt-card.is-on { border-color: var(--xn-accent); background: var(--xn-accent-wash); } .xt-card:has(.xt-card__input:focus-visible) { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-px-2); } .xt-card__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .xt-card__mark { display: grid; flex: none; place-items: center; width: var(--xn-px-22); height: var(--xn-px-22); margin-top: var(--xn-px-2); border: var(--xn-px-2) solid var(--xn-field); border-radius: 50%; background: var(--xn-ground); color: transparent; } .xt-card.is-on .xt-card__mark { border-color: var(--xn-accent); background: var(--xn-accent); color: var(--xn-ground); } .xt-card__mark svg { width: var(--xn-px-14); height: var(--xn-px-14); } .xt-card__body { display: flex; flex-direction: column; gap: var(--xn-px-4); min-width: 0; } .xt-card__level { font-size: var(--xn-px-12); font-weight: var(--xn-w-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--xn-text-2); } .xt-card.is-on .xt-card__level { color: var(--xn-accent); } .xt-card__text { font-size: var(--xn-px-16); font-weight: var(--xn-w-medium); line-height: 1.45; color: var(--xn-ink); } .xt-card__note { font-size: var(--xn-px-14); line-height: 1.5; color: var(--xn-text-2); } .xt-weight { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-10) var(--xn-px-16); margin-top: var(--xn-px-16); } .xt-weight__label { font-size: var(--xn-px-14); font-weight: var(--xn-w-semibold); color: var(--xn-text-2); } .xt-seg { display: inline-flex; border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); } .xt-seg__opt { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--xn-px-44); padding: 0 var(--xn-px-16); border-left: var(--xn-hairline) solid var(--xn-tag-line); font-size: var(--xn-px-14); color: var(--xn-body); cursor: pointer; transition: background-color var(--xn-motion), color var(--xn-motion); } .xt-seg__opt:first-child { border-left: 0; } .xt-seg__opt:hover { background: var(--xn-accent-wash); } .xt-seg__opt.is-on { background: var(--xn-ink); color: var(--xn-ground); font-weight: var(--xn-w-semibold); } .xt-seg__opt:has(input:focus-visible) { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-px-2); } .xt-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .xt-nav { display: flex; align-items: center; gap: var(--xn-px-16); margin-top: var(--xn-px-28); padding-top: var(--xn-px-28); border-top: var(--xn-hairline) solid var(--xn-line); } .xt-nav__hint { order: 1; flex: 1 1 auto; min-height: calc(var(--xn-px-14) * 1.55); margin: 0; font-size: var(--xn-px-14); line-height: 1.55; color: var(--xn-text-2); } .xt-nav__back { order: 0; } .xt-nav__go { order: 2; margin-left: auto; } .xt-nav .xn-btn[hidden] { display: none; } .xt-nav .xn-btn[disabled] { opacity: 0.45; cursor: not-allowed; } .xt-linkbtn { min-height: var(--xn-target); padding: 0 var(--xn-px-4); border: 0; background: none; font: inherit; font-size: var(--xn-px-15); font-weight: var(--xn-w-semibold); color: var(--xn-ink); text-decoration: underline; text-decoration-thickness: var(--xn-hairline); text-underline-offset: var(--xn-underline-offset); cursor: pointer; } .xt-linkbtn:hover { color: var(--xn-accent); } .xt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xn-px-28) var(--xn-px-28); margin-top: var(--xn-px-28); } .xt-fields--one { grid-template-columns: minmax(0, 1fr); margin-top: 0; } .xt-fields .xb-f { gap: var(--xn-px-8); align-content: start; } .xt-fields .xb-f input:not([type="checkbox"]):not([type="radio"]), .xt-fields .xb-f select { height: var(--xn-px-52); } .xt-fields .xb-f input:hover, .xt-fields .xb-f select:hover, .xt-fields .xb-f textarea:hover { border-color: var(--xn-ink); } .xt-example { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-16); margin-top: var(--xn-px-20); padding-bottom: var(--xn-px-4); } .xt-example .xb-small { flex: 1 1 var(--xn-px-240); margin: 0; } .xt-status { margin: var(--xn-px-12) 0 0; min-height: calc(var(--xn-px-14) * 1.55); } .xt-lead { margin: 0 0 var(--xn-px-16); } .xt-tool .xb-err--summary { margin: 0 0 var(--xn-px-20); padding: var(--xn-px-12) var(--xn-px-16); border: var(--xn-hairline) solid var(--xn-error); border-radius: var(--xn-radius); } .xt-review__group { padding: var(--xn-px-20) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xt-review__group:first-child { margin-top: var(--xn-px-16); } .xt-review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xn-px-12); } .xt-review__rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--xn-px-8) var(--xn-px-24); margin: var(--xn-px-12) 0 0; font-size: var(--xn-px-15); } .xt-review__rows dt { color: var(--xn-text-2); } .xt-review__rows dd { margin: 0; font-weight: var(--xn-w-semibold); text-align: right; } .xt-formactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-16) var(--xn-px-20); margin-top: var(--xn-px-36); padding-top: var(--xn-px-24); border-top: var(--xn-hairline) solid var(--xn-line); } .xt-matrixwrap { margin-top: var(--xn-px-8); } .xt-tool .xb-matrix .xb-input { border: var(--xn-hairline) solid var(--xn-field); border-radius: var(--xn-radius); } .xt-tool .xb-matrix tbody th { padding-right: var(--xn-px-20); } .xt-tool.xt-tool--page .xb-result.xt-result { margin-top: var(--xn-px-56); padding-top: var(--xn-px-40); border-top: var(--xn-hairline) solid var(--xn-ink); } .xt-tool .xb-matrix { min-width: var(--xn-px-720); } .xt-tool .xb-matrix tbody th { width: var(--xn-px-280); min-width: var(--xn-px-240); background: var(--xn-ground); } .xt-tool .xb-matrix .xb-input { box-sizing: border-box; width: 100%; min-width: var(--xn-px-72); } .xt-tool .xb-matrix thead th, .xt-tool .xb-matrix thead td { vertical-align: bottom; } .xt-help { margin-top: var(--xn-px-6); font-weight: var(--xn-w-regular); } .xt-help summary { display: inline-block; min-height: var(--xn-px-24); font-size: var(--xn-px-14); font-weight: var(--xn-w-semibold); color: var(--xn-accent); cursor: pointer; } .xt-help .xb-small { margin-top: var(--xn-px-6); font-size: var(--xn-px-13); } .xt-tool .xb-briefout { padding: var(--xn-px-28) var(--xn-px-32); border: var(--xn-hairline) solid var(--xn-line); border-radius: var(--xn-radius); background: var(--xn-ground); } .xt-tool .xb-result.xt-result { display: block; margin: 0; padding: 0; border: 0; } .xt-tool .xb-result.xt-result[hidden] { display: none; } .xt-tool .xb-tablewrap { position: relative; } .xt-tool .screen-reader-text { position: absolute; width: var(--xn-px-1); height: var(--xn-px-1); margin: calc(var(--xn-px-1) * -1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .xt-wizard[hidden] { display: none; } .xt-sum { padding: var(--xn-px-32) var(--xn-px-36); background: var(--xn-accent-wash); } .xt-tool--page .xt-sum { padding: 0; background: none; } .xt-result__title { margin: var(--xn-px-8) 0 0; font-size: clamp(var(--xn-px-26), 3vw, var(--xn-px-36)); font-weight: var(--xn-w-semibold); line-height: 1.15; letter-spacing: -0.015em; color: var(--xn-ink); } .xt-result__title:focus:not(:focus-visible) { outline: 0; } .xt-sum__text { max-width: var(--xn-px-680); margin: var(--xn-px-16) 0 0; } .xt-sum--score { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head score" "text score" "scale scale"; column-gap: var(--xn-px-48); align-items: start; } .xt-sum--score .xt-sum__head { grid-area: head; } .xt-sum--score .xt-sum__score { grid-area: score; } .xt-sum--score .xt-sum__text { grid-area: text; } .xt-sum--score .xt-scale { grid-area: scale; } .xt-score { display: flex; flex-direction: column; align-items: flex-end; gap: var(--xn-px-4); margin: 0; } .xt-score__n { font-size: clamp(var(--xn-px-72), 8vw, var(--xn-px-96)); font-weight: var(--xn-w-semibold); line-height: 0.95; letter-spacing: -0.03em; color: var(--xn-ink); } .xt-score__of { font-size: var(--xn-px-16); color: var(--xn-text-2); } .xt-scale { margin-top: var(--xn-px-32); } .xt-scale__track { position: relative; display: flex; gap: var(--xn-px-4); padding-top: var(--xn-px-16); } .xt-scale__seg { display: flex; flex: var(--xt-w, 1) 1 0; flex-direction: column; gap: var(--xn-px-8); min-width: 0; } .xt-scale__bar { display: block; height: var(--xn-px-6); background: var(--xn-tag-line); } .xt-scale__seg.is-here .xt-scale__bar { background: var(--xn-accent); } .xt-scale__name { font-size: var(--xn-px-13); line-height: 1.35; color: var(--xn-text-2); } .xt-scale__seg.is-here .xt-scale__name { color: var(--xn-ink); font-weight: var(--xn-w-semibold); } .xt-scale__pin { position: absolute; top: 0; left: calc(var(--xt-at, 0) * 1%); width: 0; height: 0; border-top: var(--xn-px-10) solid var(--xn-ink); border-right: var(--xn-px-6) solid transparent; border-left: var(--xn-px-6) solid transparent; transform: translateX(-50%); } .xt-scale__ends { display: flex; justify-content: space-between; margin: var(--xn-px-6) 0 0; font-size: var(--xn-px-13); color: var(--xn-text-2); } .xt-block { margin-top: var(--xn-px-48); padding-top: var(--xn-px-32); border-top: var(--xn-hairline) solid var(--xn-line); } .xt-block[hidden] { display: none; } .xt-block > .xb-h3 { margin: 0 0 var(--xn-px-20); font-size: var(--xn-px-22); } .xt-block > * + .xb-h3 { margin-top: var(--xn-px-24); } .xt-tool .xb-chartbox { max-width: none; } .xt-block .xb-focus__label { margin-top: var(--xn-px-32); } .xt-block .xb-chartbox + .xb-tablewrap { margin-top: var(--xn-px-28); } .xt-block > .xb-small { margin: calc(var(--xn-px-8) * -1) 0 var(--xn-px-16); } .xt-weak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xn-px-24); align-items: start; } .xt-weakbox { min-width: 0; padding: var(--xn-px-24); border: var(--xn-hairline) solid var(--xn-line); border-top: var(--xn-px-3) solid var(--xn-break); border-radius: var(--xn-radius); } .xt-weakbox__mark { display: inline-flex; align-items: center; gap: var(--xn-px-8); margin: 0; padding: var(--xn-px-4) var(--xn-px-10); background: var(--xn-break-wash); font-size: var(--xn-px-12); font-weight: var(--xn-w-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--xn-ink); } .xt-weakbox__dot { display: block; width: var(--xn-px-8); height: var(--xn-px-8); background: var(--xn-break); } .xt-weakbox__name { margin: var(--xn-px-14) 0 var(--xn-px-4); font-size: var(--xn-px-22); font-weight: var(--xn-w-semibold); line-height: 1.25; color: var(--xn-ink); } .xt-weakbox__points { margin: 0; font-size: var(--xn-px-15); color: var(--xn-text-2); } .xt-weakbox .xb-focus__label { margin-top: var(--xn-px-24); } .xt-ans { display: flex; flex-direction: column; gap: var(--xn-px-14); margin: var(--xn-px-12) 0 0; padding: 0; list-style: none; } .xt-ans li { display: flex; flex-direction: column; gap: var(--xn-px-2); padding-left: var(--xn-px-14); border-left: var(--xn-px-2) solid var(--xn-break-wash); font-size: var(--xn-px-15); line-height: 1.5; } .xt-ans__q { color: var(--xn-ink); } .xt-ans__a { color: var(--xn-text-2); } .xt-weakbox .xb-steps-list { margin-top: var(--xn-px-12); font-size: var(--xn-px-15); } .xt-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-200), 1fr)); gap: var(--xn-px-24) var(--xn-px-32); margin: 0; } .xt-fig { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--xn-px-6); padding-top: var(--xn-px-14); border-top: var(--xn-hairline) solid var(--xn-ink); } .xt-fig dt { font-size: var(--xn-px-14); line-height: 1.4; color: var(--xn-text-2); } .xt-fig dd { margin: 0; font-size: var(--xn-px-28); font-weight: var(--xn-w-semibold); line-height: 1.15; letter-spacing: -0.012em; color: var(--xn-ink); } .xt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-12) var(--xn-px-20); margin-top: var(--xn-px-48); padding-top: var(--xn-px-24); border-top: var(--xn-hairline) solid var(--xn-line); } .xt-actions .xn-btn { flex: 0 0 auto; } .xt-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xn-px-16) var(--xn-px-32); margin-top: var(--xn-px-32); padding-top: var(--xn-px-32); border-top: var(--xn-hairline) solid var(--xn-ink); } .xt-close__line { flex: 1 1 var(--xn-px-300); margin: 0; font-size: var(--xn-px-20); font-weight: var(--xn-w-semibold); line-height: 1.35; color: var(--xn-ink); } @media (min-width: 760px) { .xt-opts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 759px) { .xb-assess.xt-tool { padding-top: var(--xn-px-32); padding-bottom: var(--xn-px-72); } .xt-tool .xt-panel { padding: 0; border: 0; } .xt-tool .xt-aside { margin-top: var(--xn-px-56); gap: var(--xn-px-32); } .xt-progress { margin-bottom: var(--xn-px-24); } .xt-track__name { position: absolute; width: var(--xn-px-1); height: var(--xn-px-1); margin: calc(var(--xn-px-1) * -1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .xt-track__seg.is-done .xt-track__name::before { display: none; } .xt-track__bar { height: var(--xn-px-6); } .xt-step__title { font-size: var(--xn-px-26); } .xt-card { padding: var(--xn-px-14) var(--xn-px-16); } .xt-qbox { margin-top: var(--xn-px-28); padding-top: var(--xn-px-24); } .xt-nav { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; gap: var(--xn-px-10) var(--xn-px-12); margin: var(--xn-px-24) calc(var(--xn-pad) * -1) 0; padding: var(--xn-px-12) var(--xn-pad) var(--xn-px-12); background: var(--xn-ground); } .xt-nav__hint { order: -1; flex: 1 0 100%; } .xt-nav__back { flex: 0 0 auto; } .xt-nav__go { flex: 1 1 0; margin-left: 0; } .xt-fields { grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-24); } .xt-card__input, .xt-seg__opt input, .xt-fields input, .xt-fields select, .xt-fields textarea { scroll-margin-bottom: var(--xn-px-120); } .xt-sum { padding: var(--xn-px-24) var(--xn-px-20); margin-inline: calc(var(--xn-pad) * -1); } .xt-tool--page .xt-sum { margin-inline: 0; padding: 0; } .xt-sum--score { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "score" "text" "scale"; } .xt-score { flex-direction: row; align-items: baseline; gap: var(--xn-px-12); margin-top: var(--xn-px-12); } .xt-score__n { font-size: var(--xn-px-72); } .xt-scale__name { position: absolute; width: var(--xn-px-1); height: var(--xn-px-1); margin: calc(var(--xn-px-1) * -1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .xt-weak { grid-template-columns: minmax(0, 1fr); } .xt-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xn-px-24) var(--xn-px-16); } .xt-fig dd { font-size: var(--xn-px-22); } .xt-block[data-xn-scenarios] .xb-table, .xt-block[data-xn-sens] .xb-table, .xt-block[data-xn-assume] .xb-table { min-width: var(--xn-px-520); } .xt-tool .xb-matrix tbody th { position: sticky; left: 0; z-index: 1; width: var(--xn-px-160); min-width: var(--xn-px-160); } .xt-block { margin-top: var(--xn-px-40); } .xt-actions .xn-btn { flex: 1 1 100%; } .xt-close .xn-btn { flex: 1 1 100%; } .xt-tool .xb-briefout { padding: var(--xn-px-20); } .xt-seg { flex: 1 1 100%; } .xt-seg__opt { flex: 1 1 0; padding: 0 var(--xn-px-8); text-align: center; } } @media (prefers-reduced-motion: reduce) { .xt-card, .xt-seg__opt { transition: none; } } @media print { .xt-tool .xt-wizard, .xt-tool .xt-aside, .xt-tool .xt-actions, .xt-tool .xt-close, .xt-tool .xt-formactions { display: none !important; } .xt-tool .xt-panel { max-width: none; padding: 0; border: 0; } .xb-assess.xt-tool { padding: 0; } .xt-sum { padding: 0; background: none; } .xt-weakbox, .xt-block { break-inside: avoid; } .xt-tool.xt-tool--page .xb-result.xt-result { margin-top: 0; padding-top: 0; border-top: 0; } }