@layer components{.tool-shell{--tool-band-early: var(--gauge-ramp-start);--tool-band-partial: color-mix(in srgb, var(--gauge-ramp-end) 40%, var(--gauge-ramp-start));--tool-band-reviewable: color-mix(in srgb, var(--gauge-ramp-end) 70%, var(--gauge-ramp-start));--tool-band-ready: var(--gauge-ramp-end);position:relative;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6)}.tool-shell-head{display:grid;gap:var(--space-3);margin-block-end:var(--space-6);max-inline-size:70ch}.tool-shell-lede{color:var(--text-muted)}.tool-shell-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);font-size:var(--type-caption);color:var(--text-muted)}.tool-shell-privacy{display:inline-flex;align-items:center;gap:var(--space-2)}.tool-shell-privacy svg{flex:none;color:var(--accent-text)}.tool-shell-time{font-family:var(--font-mono);font-size:var(--type-micro)}.tool-shell-noscript{padding:var(--space-3) var(--space-4);border:1px dashed var(--line-strong);border-radius:var(--radius);font-size:var(--type-caption);color:var(--text-muted)}.tool-shell-grid{display:grid;gap:var(--space-6)}@media(min-width:1024px){.tool-shell-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}.tool-shell-result{position:sticky;inset-block-start:calc(var(--header-height) + var(--space-5));max-block-size:calc(100dvh - var(--header-height) - 2 * var(--space-5));overflow-y:auto}}.tool-shell-form{display:grid;gap:var(--space-5)}.tool-shell-fieldset{border:1px solid var(--line-soft);border-radius:var(--radius);padding:var(--space-5);display:grid;gap:var(--space-4)}.tool-shell-fieldset legend{padding-inline:var(--space-2);font-weight:var(--weight-bold);font-size:var(--type-caption)}.tool-shell-field{display:grid;gap:var(--space-2)}.tool-shell-field-label{font-size:var(--type-caption);font-weight:var(--weight-medium)}.tool-shell-field select{inline-size:100%;min-block-size:44px;padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.tool-shell-field select:hover{border-color:var(--line-strong)}.tool-shell-factor-list{display:grid;gap:var(--space-3)}.tool-factor{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--space-3);min-block-size:44px;padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}.tool-factor:hover{border-color:var(--line-strong)}.tool-factor:has(.tool-factor-input:checked){border-color:var(--accent);background:var(--red-tint-04)}.tool-factor:has(.tool-factor-input:focus-visible){outline:2px solid var(--red);outline-offset:3px}.tool-factor-input{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.tool-factor-check{display:grid;place-items:center;inline-size:20px;block-size:20px;margin-block-start:2px;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--surface-raised);color:transparent}.tool-factor:has(.tool-factor-input:checked) .tool-factor-check{background:var(--accent);border-color:var(--accent);color:var(--paper-raised)}.tool-factor-copy{display:grid;gap:var(--space-1)}.tool-factor-copy strong{font-weight:var(--weight-medium);line-height:var(--leading-heading)}.tool-factor-copy small{font-size:var(--type-caption);line-height:var(--leading-body);color:var(--text-muted)}.tool-factor-weight{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--text-muted);white-space:nowrap;padding-block-start:var(--space-1)}.tool-factor:has(.tool-factor-input:checked) .tool-factor-weight{color:var(--accent-text)}.tool-shell-progress{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--text-muted)}.tool-shell-result{display:grid;align-content:start;gap:var(--space-5);padding:var(--space-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.tool-shell-result-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.tool-shell-result-title{font-size:var(--type-h3)}.tool-shell-result-title:focus-visible{outline:2px solid var(--red);outline-offset:3px}.tool-sheet-close{display:none;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-raised);color:var(--text)}.tool-shell-status{min-block-size:1.6em;font-weight:var(--weight-medium)}.tool-shell[data-tool-state=empty] .tool-shell-status{min-block-size:0}.tool-shell[data-tool-state=active] [data-tool-empty-only]{display:none}.tool-shell [hidden]{display:none!important}.tool-shell-empty{display:grid;gap:var(--space-2);padding:var(--space-5);border:1px dashed var(--line-strong);border-radius:var(--radius)}.tool-shell-empty h4{font-size:var(--type-body)}.tool-shell-empty p{font-size:var(--type-caption);color:var(--text-muted)}.tool-gauge{position:relative;max-inline-size:260px;margin-inline:auto;inline-size:100%}[dir=rtl] .tool-gauge-svg{transform:scaleX(-1)}.tool-gauge-track{stroke:var(--line-soft)}[data-band=early]{--band-color: var(--tool-band-early)}[data-band=partial]{--band-color: var(--tool-band-partial)}[data-band=reviewable]{--band-color: var(--tool-band-reviewable)}[data-band=ready]{--band-color: var(--tool-band-ready)}.tool-gauge-fill{stroke:var(--band-color, var(--accent))}.tool-gauge-value{position:absolute;inset-block-end:0;inset-inline:0;display:grid;justify-items:center;gap:0;text-align:center}.tool-gauge-score{font-family:var(--font-display);font-size:clamp(2.25rem,4vw,3rem);font-weight:var(--weight-black);line-height:1;letter-spacing:var(--tracking-display)}.tool-gauge-unit{font-size:.45em;font-weight:var(--weight-bold);color:var(--text-muted)}.tool-gauge-band{font-weight:var(--weight-bold);font-size:var(--type-caption)}.tool-gauge-points{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--text-muted)}.tool-band-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:var(--space-2)}.tool-band-legend-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--line-soft);border-radius:var(--radius);font-size:var(--type-caption)}.tool-band-legend-item[data-current]{border-color:var(--accent);background:var(--red-tint-04)}.tool-band-swatch{inline-size:10px;block-size:10px;border-radius:2px;background:var(--band-color, var(--line-strong))}.tool-band-name{font-weight:var(--weight-medium)}.tool-band-range{grid-column:2;font-family:var(--font-mono);font-size:var(--type-micro);color:var(--text-muted)}.tool-shell-band-desc{font-size:var(--type-caption);color:var(--text-muted)}.tool-dimensions{display:grid;gap:var(--space-3)}.tool-dimensions h4{font-size:var(--type-caption)}.tool-dimension{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-1) var(--space-3)}.tool-dimension-label{font-size:var(--type-caption);font-weight:var(--weight-medium)}.tool-dimension-count{font-family:var(--font-mono);font-size:var(--type-micro);color:var(--text-muted)}.tool-dimension-track{grid-column:1 / -1;display:block;block-size:6px;border-radius:var(--radius-pill);background:var(--line-soft);overflow:hidden}.tool-dimension-bar{display:block;block-size:100%;inline-size:0;border-radius:inherit;background:var(--accent)}.tool-shell-body{display:grid;gap:var(--space-5)}.tool-shell-outline{display:grid;gap:var(--space-4)}.tool-outline-section{display:grid;gap:var(--space-2);padding-block-start:var(--space-4);border-block-start:1px solid var(--line-soft)}.tool-outline-section h4{font-size:var(--type-caption)}.tool-outline-section p{font-size:var(--type-caption);line-height:var(--leading-body)}.tool-gap-list{margin:0;padding-inline-start:var(--space-5);display:grid;gap:var(--space-2);font-size:var(--type-caption)}.tool-gap-list li::marker{color:var(--line-strong)}.tool-shell-share{display:grid;gap:var(--space-3);padding-block-start:var(--space-4);border-block-start:1px solid var(--line-soft)}.tool-shell-share h4{font-size:var(--type-caption)}.tool-shell-share-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-block-size:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-raised);color:var(--text);font-size:var(--type-caption);font-weight:var(--weight-medium);text-decoration:none;cursor:pointer}.tool-btn:hover{border-color:var(--accent);color:var(--accent-text)}.tool-btn[data-copied]{border-color:var(--status-ok);color:var(--status-ok)}.tool-shell-share-note{font-size:var(--type-micro);color:var(--text-muted)}.tool-shell-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:var(--type-caption)}.tool-shell-links a{display:inline-flex;align-items:center;min-block-size:44px}.tool-shell-boundary{display:grid;gap:var(--space-2);padding-block-start:var(--space-4);border-block-start:1px solid var(--line-soft)}.tool-shell-boundary h4{font-size:var(--type-caption)}.tool-shell-boundary p{font-size:var(--type-micro);color:var(--text-muted)}.tool-shell-bar{display:none}@media(max-width:1023.98px){.tool-shell-result{display:none}.tool-shell-bar{display:block;position:sticky;inset-block-end:var(--space-3);z-index:calc(var(--z-overlay) + 1);margin-block-start:var(--space-5)}.tool-shell-bar-toggle{display:flex;align-items:center;gap:var(--space-3);inline-size:100%;min-block-size:52px;padding:var(--space-3) var(--space-4);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);color:var(--text);text-align:start}.tool-shell-bar-dot{flex:none;inline-size:10px;block-size:10px;border-radius:var(--radius-pill);background:var(--line-strong)}.tool-shell[data-tool-state=active][data-tool-band=early] .tool-shell-bar-dot{background:var(--tool-band-early)}.tool-shell[data-tool-state=active][data-tool-band=partial] .tool-shell-bar-dot{background:var(--tool-band-partial)}.tool-shell[data-tool-state=active][data-tool-band=reviewable] .tool-shell-bar-dot{background:var(--tool-band-reviewable)}.tool-shell[data-tool-state=active][data-tool-band=ready] .tool-shell-bar-dot{background:var(--tool-band-ready)}.tool-shell-bar-score{font-weight:var(--weight-bold)}.tool-shell-bar-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-caption)}.tool-shell-bar-action{flex:none;font-size:var(--type-caption);font-weight:var(--weight-bold);color:var(--accent-text)}.tool-shell[data-sheet-open] .tool-shell-result{display:grid;position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-overlay);max-block-size:80svh;overflow-y:auto;background:var(--surface-raised);border:1px solid var(--line);border-block-end:none;border-start-start-radius:var(--radius-lg);border-start-end-radius:var(--radius-lg);border-end-start-radius:0;border-end-end-radius:0;box-shadow:var(--shadow-3);padding-block-end:calc(var(--space-8) + var(--space-5))}.tool-shell[data-sheet-open] .tool-sheet-close{display:grid}}.tool-print-letterhead{display:none}@media print{.tool-shell-bar,.tool-sheet-close,.tool-shell-share,.tool-shell-links,.no-print{display:none!important}.tool-shell,.tool-shell-result{border:none;box-shadow:none;padding:0;background:#fff;color:#0c0c0c}.tool-shell-result{display:grid!important;position:static!important;max-block-size:none!important;overflow:visible!important}.tool-print-letterhead{display:block;padding-block-end:var(--space-4);border-block-end:2px solid #0c0c0c;margin-block-end:var(--space-4)}.tool-print-brand{font-family:var(--font-display);font-weight:var(--weight-black);font-size:1.25rem}.tool-print-title{font-weight:var(--weight-bold)}.tool-print-meta{font-family:var(--font-mono);font-size:var(--type-micro);color:#444}html[data-tool-printing] body :not(:has([data-tool-print-target] .tool-shell-result)):not([data-tool-print-target] *):not([data-tool-print-target]){display:none}html[data-tool-printing] [data-tool-print-target] .tool-shell-form,html[data-tool-printing] [data-tool-print-target] .tool-shell-head{display:none}html[data-tool-printing] [data-tool-print-target] .tool-shell-grid{display:block}}}
