/* Charcoal product chrome; score colors are reserved for the results. */
:root{color-scheme:dark;--paper:#202226;--white:#2a2d32;--ink:#edf0f2;--muted:#b5bbc1;--line:#464b53;--green:#d9dfe5;--green-dark:#edf0f2;--soft:#35393f;--surface:#2a2d32;--field:#30343a;--button-ink:#202226;background:var(--paper);color:var(--ink)}
body{background:var(--paper);color:var(--ink);font-family:"Meiryo",sans-serif}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#b8cae0}
.workspace,.form-side,.report-side,.report-side.has-result,.shared-details,dialog{background:var(--surface);border-color:var(--line)}
.workspace{overflow:clip}
.workspace-top,.workspace-top + .steps,.workspace>.steps{background:var(--surface);border-color:var(--line)}
.brand-mark{background:#d9dfe5;color:#202226}
img.brand-mark{display:block;object-fit:contain;flex-shrink:0;background:#202226}
.primary-button,.mobile-start,.skip-link,.shared-actions .primary-button{background:#d9dfe5;color:#202226}
.primary-button>span,.primary-button:hover>span{color:#3e4955}
.primary-button:hover{background:#f0f3f6;color:#202226}
.secondary-button,.share-service{background:#35393f;border-color:#626a75;color:var(--ink)}
.secondary-button:hover,.share-service:hover{background:#414750}
.text-button,.back-button,.inline-link,.terms-link,.selection-card summary,.field-source>summary{color:#d3d9df}
.start-terms a{color:#8ab4ff;text-decoration:underline;text-underline-offset:3px}
.start-terms a:hover{color:#b6d0ff}
.hero-copy>p,.start-terms,.hero-copy>.start-terms,.field label small,.field-label-row label small,.number-entry span,.input-hint,.search-status,.field-note,.private-note,.rating-ends,.slider-clear,.local-draft-bar p,.save-hint,.score-overline,.score-ending,.report-top,.report-bottom,.report-footnote,.report-side>p,.report-side #report-caption:not(:empty),.axis-name small,.category-percentile,.axis-percentile,.distribution-percentile,.distribution-note span,.site-footer p,.footer-brand small,.site-footer>span:last-child,.site-footer>small.footer-copyright,.about-intro>p,.about-items p,.dialog-header,dialog p,.weight-settings>p{color:var(--muted)}
.field label .inline-hint,.rating-field legend .inline-hint,.section-divider .inline-hint{color:var(--muted)}
.field>input,.field>select,.number-select>select,.number-entry,.habit-field select,.education-options label>span,.choice-options span{background:var(--field);border-color:#67707c;color:var(--ink)}
input,select,textarea{accent-color:#c9d2dd}
select option,select optgroup{background:#30343a;color:#edf0f2}
input::placeholder,.field input::placeholder,.number-entry input::placeholder,textarea::placeholder{color:#a8b1bc;opacity:1}
.number-entry input{color:var(--ink)}
.education-options input:checked+span,.choice-options input:checked+span{background:#48515e;border-color:#c9d2dd;color:#fff}
.steps li,.steps .step-name{color:var(--muted)}
.steps li>span,.steps .step-number{background:#35393f;color:#c1c8d0;border-color:#626a75}
.steps .complete .step-number{background:#444d58;color:#e7edf3}
.steps .complete .step-name{color:#e7edf3}
.steps .active .step-number,.steps .active.complete .step-number{background:#d9dfe5;color:#202226}
.steps .incomplete .step-number{background:#57383d;color:#ffc1be}
.steps .incomplete .step-name{color:#ffc1be}
.steps .active.incomplete .step-number{background:#e49390;color:#202226}
.steps li:not(:last-child):after{background:#555d68}
.form-actions,.section-divider,.category-group,.category-content,.site-header,.site-footer,.report-bottom,.distribution-total,.shared-details,.weight-settings,th,td{border-color:var(--line)}
.section-divider h4,.distribution-heading{color:var(--ink)}
.score-chip,.score-percentile,.report-side.has-result .score-chip{background:#3b424b;color:#e7edf3;border-color:#5d6672}
.report-side.has-result .big-score,.big-score{color:var(--ink)}
.bar-track{background:#41464d}
.axis-score.skipped{color:var(--muted)}
.report-charts .radar-label text{font-family:"Meiryo",sans-serif;font-size:24px;font-weight:400;fill:var(--ink);letter-spacing:0}
.report-charts .radar-label tspan{font-size:18px;font-weight:700}
.radar-grid path,.radar-grid polygon{fill:none;stroke:var(--line)}
#radar-area,.report-side.has-result #radar-area{stroke:#d9dfe5;fill:#d9dfe51a;stroke-dasharray:none;stroke-width:2}
#radar-points circle{stroke:#2a2d32}
.live-dot,.report-side.has-result .live-dot{background:#c1cbd7;box-shadow:0 0 0 4px #424953}
.rating-points::before{background:#697482}
.rating-dot{background:#30343a;border-color:#8793a2}
.rating-points input:checked+.rating-dot{background:#d9dfe5;border-color:#d9dfe5;box-shadow:0 0 0 4px #4b5665}
.rating-points input:focus-visible+.rating-dot{outline-color:#b8cae0}
@media(hover:hover){.rating-points label:hover .rating-dot{background:#647386;border-color:#d9dfe5}}
.numeric-slider input[type=range]::-webkit-slider-runnable-track{background:#697482}
.numeric-slider input[type=range]::-moz-range-track{background:#697482}
.selection-card,.selection-card details[open],#company-selected details[open],.field-source-body,.profile-message,.formula,dialog .method-note,th{background:#343941;border-color:#687485;color:var(--ink)}
.selection-card small,.profile-message p{color:var(--muted)}
.profile-symbol,.about-icon{color:#d9dfe5;background:#35393f;border-color:#5e6875}
.search-results,.search-results button{background:#30343a;color:var(--ink);border-color:var(--line)}
.search-results button:hover,.search-results button[aria-selected=true]{background:#495462}
.search-results button:focus-visible{background:#495462}
.search-results li+li{border-color:var(--line)}
.search-results small,.search-results button small{color:var(--muted)}
.form-error{color:#ffd0c7;background:#4b3031;border-color:#a76a68}
.close-button{background:#424852;color:var(--ink)}
dialog::backdrop{background:#080a0dc9}
#share-preview{background:#25282d;color:var(--ink);border-color:#626d7b}
#share-status{color:var(--muted)}
.share-service-x{background:#d9dfe5;color:#202226}
.share-service-x:hover{background:#edf0f2;color:#202226}
.toast{background:#d9dfe5;color:#202226}
.report-footnote,.result-actions .text-button{color:var(--muted)}
.orbit{border-color:#525b68}.art-label,.art-caption,.axis-label,.art-star{color:#aeb9c6}
.hero-art{--hero-accent:#9fd34d;height:340px;mask-image:none}
.hero-art .axis-label{background:var(--soft);border-color:#647080;box-shadow:0 3px 0 #15171b80;color:var(--hero-accent)}
.hero-art .axis-label>span{color:var(--ink)}
.hero-art .art-star{color:var(--hero-accent)}
.measure-disc{top:50%;transform:translate(-50%,-50%);background:#30363f;border-color:#626e7e;box-shadow:0 16px 40px #0003}
.disc-grid,.disc-ticks{stroke:#718092}
.hero-art .disc-grid{stroke-opacity:.55;stroke-width:.8}
.hero-art .disc-spokes{stroke-opacity:.3}
.hero-art .disc-shape{fill:url(#hero-score-gradient);fill-opacity:.13;stroke:url(#hero-score-gradient);stroke-width:1.8;stroke-linejoin:round}
.hero-art .hero-score-dot{stroke:#30363f;stroke-width:1.5}
@media(max-width:900px){.form-actions,.result-actions,.shared-actions,.mobile-start{border-color:var(--line)}.form-actions,.result-actions,.shared-actions{background:#25282df5}}

/* Keep the headline score beside the radar, as in the chosen preview. */
.report-side.has-result{width:100%;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px 4px;padding:20px 12px;container-type:inline-size}
.report-side.has-result .score-display{grid-column:1;grid-row:1;align-self:center}
.report-side.has-result .report-charts .radar-wrap{grid-column:2;grid-row:1;max-width:none}
.report-side.has-result .score-distributions{grid-column:1/-1;grid-row:2}
.report-side.has-result .score-overline{font:700 clamp(8px,8cqi,11px)/1.5 "Meiryo",sans-serif;letter-spacing:0;color:var(--muted);white-space:nowrap}
.report-side.has-result .score-line{flex-direction:column;align-items:center;gap:8px;margin:8px 0}
.report-side.has-result .score-line .big-score{font-family:Arial,sans-serif;font-size:clamp(38px,40cqi,76px);font-weight:700;line-height:1.2;letter-spacing:-.05em;color:#d9dfe5}
.report-side.has-result .score-ending{display:none}
.report-side.has-result #total-score{padding-right:.05em}
.report-side.has-result .score-percentile{font-size:11px;font-weight:700;line-height:1.5;padding:0;background:none;color:var(--muted);border:0}
.report-side.has-result .score-chip{font-size:10px;line-height:1.5;padding:4px 6px;white-space:normal;text-align:center}
@container(max-width:400px){.report-side.has-result .radar-label text,.report-side.has-result .radar-label tspan{font-size:24px}}

/* A single horizontal sequence of arrow-shaped steps. */
.workspace>.steps{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:3px;padding:12px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#626a75 transparent}
.workspace>.steps li{flex:1 0 88px;min-width:88px}
.workspace>.steps button{flex-direction:row;justify-content:center;gap:0;min-height:44px;padding:10px 12px;font-size:12px;background:#35393f;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}
.workspace>.steps li:first-child button{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%)}
.workspace>.steps .step-number{display:none}
.workspace>.steps .step-name{color:inherit}
.workspace>.steps .complete button{background:#444d58;color:#e7edf3}
.workspace>.steps .incomplete button{color:#ffc1be}
.workspace>.steps .active button{background:#d9dfe5;color:#202226}
.workspace>.steps button:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #b8cae0}

/* Small distribution panels keep all categories within a short overview. */
#score-distributions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.distribution-item{display:block;padding:0;min-width:0}
.distribution-heading,.shared-report .distribution-heading{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 6px;font-size:12px;line-height:1.4}
.distribution-heading>strong{font:400 19px/1.2 Arial,sans-serif}
.distribution-item svg{max-height:52px;margin-top:3px}
.distribution-percentile{flex-basis:100%;font-size:10px;line-height:1.3;text-align:right}
.distribution-total{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.distribution-total svg{max-height:52px;margin:0}
.distribution-total .distribution-heading{font-weight:400}

/* Keep the complete result overview above the mobile action bar. */
@media(max-width:900px){
  .report-side.has-result{--report-safe-bottom:env(safe-area-inset-bottom,0px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px 4px;padding:12px}
  .report-side.has-result .report-charts .radar-wrap{max-width:clamp(132px,calc(24svh - var(--report-safe-bottom)),180px)}
  .report-side.has-result .score-line{gap:4px;margin:4px 0}
  .report-side.has-result .score-line .big-score{font-size:clamp(38px,36cqi,64px)}
  .report-side.has-result .radar-label text{font-size:30px}
  .report-side.has-result .radar-label tspan{font-size:26px}
  #score-distributions{gap:8px 12px}
  .distribution-total{grid-column:auto;display:block;border:0;padding:0}
  .distribution-item svg,.distribution-total svg{height:clamp(20px,calc(4svh - var(--report-safe-bottom)/4),36px);max-height:none;margin:2px 0 0}
  .shared-page .site-header{min-height:56px;height:56px}
  .shared-page .brand-mark{width:40px;height:40px}
  .shared-report{margin:8px auto}
  .shared-report h1{font-size:16px;line-height:1.4;margin-bottom:8px}
}
@media(max-width:900px) and (max-height:600px){
  .report-side.has-result{padding:8px 12px;gap:8px 4px}
  .report-side.has-result .report-charts .radar-wrap{max-width:calc(132px - var(--report-safe-bottom)/2)}
  #score-distributions{gap:6px 12px}
  .distribution-item svg,.distribution-total svg{height:clamp(16px,calc(22px - var(--report-safe-bottom)/4),22px)}
  .shared-report>h1{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

#body-fields > .field-grid{grid-template-columns:minmax(0,1fr)}
#romance-experience > fieldset + fieldset{margin-top:0}

/* Release information stays in the corner; on mobile it uses the empty eighth cell. */
.site-footer > .site-release{display:block;margin-top:12px;text-align:right;font:10px/1.5 Arial,"Meiryo",sans-serif;color:var(--muted)}
.evaluation-release{grid-column:1/-1;align-self:end;text-align:right;font:10px/1.5 Arial,"Meiryo",sans-serif;color:var(--muted);min-width:0}
.evaluation-release span{display:block;overflow-wrap:anywhere}
@media(max-width:900px){.evaluation-release{grid-column:auto;font-size:9px}}

/* Violet accents guide the input flow. */
#diagnosis-form{--input-accent:#b5a0ff;--input-accent-soft:#393348}
body:not([data-result="true"]) .workspace>.steps .active button{background:#b5a0ff;color:#201a30}
body:not([data-result="true"]) .workspace>.steps .complete button{background:#3d3652;color:#e1d8ff}
#diagnosis-form .step-heading h3{border-left:3px solid var(--input-accent);padding-left:12px}
#diagnosis-form .primary-button{background:var(--input-accent);color:#201a30}
#diagnosis-form .primary-button:hover{background:#c9baff}
#diagnosis-form .primary-button>span{color:#42325f}
#diagnosis-form :is(input,select,textarea){accent-color:var(--input-accent)}
#diagnosis-form :is(input,select,button,summary):focus-visible{outline-color:var(--input-accent)}
#diagnosis-form :is(.field>input,.field>select,.number-select>select):focus{border-color:var(--input-accent);background:#35313f}
#diagnosis-form .number-entry:focus-within{border-color:var(--input-accent);background:#35313f}
#diagnosis-form :is(.choice-options,.education-options) input:checked+span{background:var(--input-accent-soft);border-color:var(--input-accent);color:#eee8ff}
#diagnosis-form .rating-points input:checked+.rating-dot{background:var(--input-accent);border-color:var(--input-accent);box-shadow:0 0 0 4px #b5a0ff26}
#diagnosis-form .rating-points input:focus-visible+.rating-dot{outline-color:var(--input-accent)}
#diagnosis-form :is(.inline-link,.text-button,.selection-card summary){color:#cbbaff}
#diagnosis-form .selection-card{border-left-color:var(--input-accent)}
#diagnosis-form .step-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);margin:0;padding-block:10px;border-bottom:1px solid var(--line)}
.input-score{display:grid;grid-template-columns:auto minmax(24px,1fr) auto auto;align-items:center;gap:8px;margin-top:6px;font-variant-numeric:tabular-nums}
.input-score[hidden]{display:none}
.input-score-label,.input-score small{font-size:12px;color:var(--muted)}
.input-score-track{height:5px;overflow:hidden;border-radius:4px;background:#41464d}
.input-score-track i{display:block;height:100%;background:var(--score-color);border-radius:inherit}
.input-score strong{font-size:16px;color:var(--score-color)}
@media(hover:hover){#diagnosis-form .rating-points label:hover .rating-dot{border-color:var(--input-accent);background:#63547e}}

/* Compact footer: links above, copyright and version aligned below. */
.site-footer{display:grid;grid-template-columns:1fr auto;gap:16px 12px;padding-top:28px;padding-bottom:24px}
.site-footer .footer-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0}
.site-footer .footer-brand{font-size:16px}
.site-footer nav{display:flex;gap:20px;font-size:12px;flex-wrap:wrap}
.site-footer > small.footer-copyright{grid-row:2;grid-column:1;margin:0;text-align:left;font-size:10px;line-height:1.5}
.site-footer > .site-release{grid-row:2;grid-column:2;margin:0;text-align:right;font-size:10px;line-height:1.5}
@media(max-width:600px){.site-footer{gap:18px 8px}.site-footer .footer-top{flex-direction:column;gap:14px}.site-footer nav{gap:20px;font-size:11px}.site-footer > small.footer-copyright,.site-footer > .site-release{font-size:9px}}