/* Shared, card-free interface for the three browser-only wardrobe tools. */
:root[data-theme] .page-interactive-tool .static-page-hero,
:root[data-theme] .page-interactive-tool .static-page-hero-shell { background: none; border: 0; border-radius: 0; box-shadow: none; }
.page-interactive-tool [hidden] { display: none !important; }
.page-interactive-tool .static-page-hero::before,
.page-interactive-tool .static-page-hero::after { content: none; }
.page-interactive-tool .static-page-hero { padding-block: clamp(28px,4vw,56px) 0; }
.page-interactive-tool main .shell { max-width: 1200px; }
.tool-hero-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: clamp(28px,5vw,64px); padding-bottom: clamp(32px,4vw,56px); border-bottom: 1px solid var(--border); }
.page-interactive-tool .static-page-hero h1 { font-size: clamp(38px,4.8vw,66px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: break-word; hyphens: none; }
.tool-hero-lead { max-width: 53ch; color: var(--muted-strong); font-size: clamp(16px,1.45vw,19px); line-height: 1.75; margin: 24px 0; }
.tool-hero-art { margin: 0; width: 100%; max-width: 430px; justify-self: center; color: var(--text); --tool-art-paper: #fff; --tool-art-line: #c2b7aa; --tool-art-cloth: #dfd3c1; --tool-art-dark: #756f6b; }
.tool-hero-art svg { width: 100%; height: auto; display: block; }
:root[data-theme="dark"] .tool-hero-art { --tool-art-paper: #25212c; --tool-art-line: #766d80; --tool-art-cloth: #b8aa96; --tool-art-dark: #ded4cb; }
.page-interactive-tool .button { font: 650 14px/1.45 Inter,sans-serif; transition: opacity .2s ease; white-space: normal; text-align: center; }
.page-interactive-tool .button:is(:hover,:focus-visible) { opacity: .82; transform: none; }
.page-interactive-tool .button-dark:is(:hover,:focus-visible) { box-shadow: 0 12px 24px rgba(213,65,144,.24); }
.page-interactive-tool .button-light { background: var(--surface-solid); border-color: var(--border-strong); box-shadow: none; }
.page-interactive-tool .button-light:is(:hover,:focus-visible) { border-color: var(--border-strong); box-shadow: none; }
.tool-start { gap: 20px; }
.page-interactive-tool .resource-tool-section { padding-block: clamp(36px,4vw,56px) 0; }
.tool-layout { display: grid; grid-template-columns: 292px minmax(0,1fr); gap: clamp(30px,4vw,56px); align-items: start; scroll-margin-top: 105px; }
#wardrobe-tool { scroll-margin-top: 105px; }
.tool-settings { padding-right: 28px; border-right: 1px solid var(--border); min-width: 0; }
.tool-settings h2 { font-size: 24px; letter-spacing: -.03em; margin: 0 0 24px; line-height: 1.25; }
.tool-fields { display: grid; gap: 18px; }
.tool-fields label { display: grid; gap: 8px; min-width: 0; }
.tool-fields label > span { font-size: 12px; font-weight: 650; line-height: 1.5; color: var(--muted-strong); }
.tool-fields :is(input,select),.packing-fields :is(input,select),.packing-day-fields select,.packing-item-editor input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); background-color: var(--surface-solid); font: inherit; box-shadow: none; }
.tool-fields select,.packing-planner select { font-size: 14px; text-overflow: ellipsis; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23887c91' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-size: 20px; background-position: right 10px center; background-repeat: no-repeat; padding-right: 32px; }
.page-interactive-tool :is(.tool-fields,.packing-fields) input[type="number"] { appearance: textfield; }
.page-interactive-tool :is(.tool-fields,.packing-fields) input[type="number"]::-webkit-inner-spin-button,
.page-interactive-tool :is(.tool-fields,.packing-fields) input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.page-interactive-tool :is(.tool-layout,.packing-planner) :is(input,select,button,summary):focus-visible,.tool-start:focus-visible { outline: 2px solid var(--accent-violet); outline-offset: 3px; }
.tool-check-label input,.packing-planner input[type="checkbox"] { appearance: none; box-sizing: border-box; width: 24px; height: 24px; margin: 0; flex: 0 0 24px; border: 2px solid var(--muted); border-radius: 6px; background: var(--surface-solid); cursor: pointer; }
.tool-check-label input:checked,.packing-planner input[type="checkbox"]:checked { background: #7434b7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/20px no-repeat; border-color: #7434b7; }
.tool-form > .button { margin-top: 24px; width: 100%; gap: 12px; }
.tool-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 18px 0 0; }
.tool-result { min-width: 0; scroll-margin-top: 105px; }
.tool-result-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.tool-result h2 { font-size: clamp(26px,3vw,34px); line-height: 1.2; letter-spacing: -.035em; margin: 0; }
.tool-result-heading .button { min-height: 40px; padding: 9px 13px; font-size: 12px; }
.tool-result-lead { color: var(--muted-strong); line-height: 1.8; max-width: 66ch; margin: 0 0 28px; }
.tool-value { display: block; font-size: clamp(46px,5vw,76px); line-height: 1.1; font-weight: 750; letter-spacing: -.045em; margin: 0; overflow-wrap: anywhere; }
.tool-value-label { margin: 8px 0 30px; color: var(--muted-strong); font-size: 13px; }
.tool-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 32px; margin: 0; padding: 24px 0; border-block: 1px solid var(--border); }
.tool-metrics > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tool-metrics dt { color: var(--muted); font-size: 12px; line-height: 1.6; }
.tool-metrics dd { color: var(--text); font-size: 25px; font-weight: 700; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.tool-result-note { margin-top: 28px; max-width: 65ch; }
.tool-result-note h3 { margin: 0 0 10px; font-size: 15px; }
.tool-result-note p { margin: 0; color: var(--muted-strong); line-height: 1.8; }
.tool-secondary { margin-top: clamp(48px,6vw,80px); padding-top: clamp(32px,4vw,48px); border-top: 1px solid var(--border); }
.tool-secondary-intro { max-width: 72ch; margin-bottom: 28px; }
.tool-secondary-intro h2 { font-size: clamp(25px,3vw,34px); line-height: 1.2; letter-spacing: -.03em; margin: 0 0 16px; }
.tool-secondary-intro p { color: var(--muted-strong); line-height: 1.8; margin: 0; }
.tool-secondary .tool-layout { padding-top: 8px; }
.tool-compact-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 32px; }
.tool-plan-section { padding-block: 28px; border-top: 1px solid var(--border); }
.tool-plan-section h3 { font-size: 21px; letter-spacing: -.02em; margin: 0 0 12px; line-height: 1.3; }
.tool-plan-section > p { color: var(--muted-strong); line-height: 1.8; margin: 0 0 18px; }
.tool-plain-list { margin: 0; padding-left: 20px; color: var(--muted-strong); line-height: 1.8; }
.tool-plain-list li + li { margin-top: 12px; }
.tool-check-list { list-style: none; margin: 0; padding: 0; }
.tool-check-list li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.tool-check-label { display: flex; gap: 12px; align-items: start; min-height: 36px; color: var(--text); font-size: 14px; line-height: 1.7; cursor: pointer; }
.tool-check-label input { margin-top: 1px; }
.tool-check-label:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.tool-details { padding-block: 18px; border-block: 1px solid var(--border); }
.tool-details + .tool-details { border-top: 0; }
.tool-details > summary { cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.6; }
.tool-details > :not(summary) { margin-top: 20px; }
.tool-reading { margin-top: clamp(48px,6vw,80px); }
.tool-reading-row { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(24px,5vw,72px); padding-block: clamp(32px,4vw,48px); border-top: 1px solid var(--border); scroll-margin-top: 110px; }
.tool-reading-row h2 { margin: 0; max-width: 22ch; font-size: clamp(25px,3vw,36px); line-height: 1.2; letter-spacing: -.035em; }
.tool-reading-row p,.tool-reading-row li { color: var(--muted-strong); line-height: 1.8; }
.tool-reading-row p:first-child { margin-top: 0; }
.tool-reading-row p:last-child { margin-bottom: 0; }
.tool-reading-row ul { padding-left: 20px; }
.tool-reading-row li + li { margin-top: 12px; }
.tool-related { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.tool-related h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
.tool-related a { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.tool-related a:hover { opacity: .82; }
.page-interactive-tool .tool-faq-section { padding-block: 32px 56px; }
@media (max-width: 1040px) { .tool-layout { grid-template-columns: 250px minmax(0,1fr); gap: 28px; } .tool-settings { padding-right: 22px; } .tool-compact-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
    .page-interactive-tool main .shell { width: calc(100% - 40px); }
    .tool-hero-layout { grid-template-columns: 1fr; gap: 24px; }
    .tool-hero-art { max-width: 280px; }
    .tool-hero-lead { margin-block: 20px; }
    .tool-start { width: 100%; }
    .tool-layout { grid-template-columns: 1fr; gap: 36px; }
    .tool-settings { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 30px; }
    .tool-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; }
    .tool-fields label { grid-template-rows: 1fr auto; }
    .tool-fields label:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tool-fields :is(input,select) { font-size: 16px; }
    .tool-result-heading { display: block; }
    .tool-result-heading .button { margin-top: 18px; }
    .tool-reading-row { grid-template-columns: 1fr; gap: 24px; }
    .tool-reading-row h2 { max-width: none; }
    .tool-check-label { font-size: 15px; }
}
@media (max-width: 360px) { .tool-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .page-interactive-tool * { scroll-behavior: auto; transition: none !important; } }
@media print {
    body.page-capsule-wardrobe-checklist { background: #fff !important; color: #111 !important; }
    .page-capsule-wardrobe-checklist main :is(h1,h2,h3,p,li,dt,dd,label,span,summary) { color: #111 !important; -webkit-text-fill-color: #111 !important; }
    .page-capsule-wardrobe-checklist main .shell { width: 100% !important; max-width: none; padding: 0; }
    .page-capsule-wardrobe-checklist .static-page-hero h1 { font-size: 24pt; }
    .page-interactive-tool :is(.tool-hero-art,.tool-start,.tool-faq-section) { display: none !important; }
    .tool-hero-layout { display: block; padding: 0; border: 0; }
    .page-capsule-wardrobe-checklist :is(.tool-settings,.tool-result-heading .button,.tool-faq-section,.tool-reading,.tool-reading-row,.tool-note) { display: none !important; }
    .page-capsule-wardrobe-checklist .tool-layout { display: block; }
    .page-capsule-wardrobe-checklist :is(.static-page-hero,.resource-tool-section) { padding: 0; }
    .page-capsule-wardrobe-checklist .tool-result h2 { font-size: 18pt; }
    .page-capsule-wardrobe-checklist .tool-result-lead { font-size: 10pt; margin: 8px 0; }
    .page-capsule-wardrobe-checklist .tool-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); padding-block: 10px; gap: 12px; margin-bottom: 12px; }
    .page-capsule-wardrobe-checklist .tool-metrics dd { font-size: 16pt; }
    .page-capsule-wardrobe-checklist .tool-plan-section { padding-block: 14px; break-inside: avoid; }
    .page-capsule-wardrobe-checklist .tool-plan-section h3 { font-size: 13pt; }
    .page-capsule-wardrobe-checklist :is(.tool-check-label,.tool-plain-list) { font-size: 10pt; }
    .page-capsule-wardrobe-checklist .tool-check-list li { padding-block: 5px; break-inside: avoid; }
    .page-capsule-wardrobe-checklist .tool-check-label input { width: 13px; height: 13px; flex-basis: 13px; background-color: #fff !important; border: 1px solid #555; background-size: 11px; print-color-adjust: exact; }
    .page-capsule-wardrobe-checklist .tool-check-label input:checked { background-color: #111 !important; }
    .page-capsule-wardrobe-checklist .tool-details { padding-block: 12px; border: 0; font-size: 10pt; }
    .page-capsule-wardrobe-checklist .tool-details > :not(summary) { margin-top: 8px; }
}