/* Product layout adjustments. Shared chrome and design tokens come from emonster.com. */
.language-panel { left: auto; right: 0; width: max-content; min-width: 100%; }
.language-panel .language-link { white-space: nowrap; }
.nav .legal-menu-panel, .language-panel { max-height: calc(100svh - 120px); overflow-y: auto; }
.calculator-heading { display: flex; align-items: flex-start; gap: 12px; }
.calculator-heading > .tabler-icon { width: 1em; height: 1em; flex: 0 0 auto; margin-top: .08em; color: var(--link); }
.calculator-heading > span { min-width: 0; }
.calculator-home { padding-top: 60px; padding-bottom: 48px; scroll-margin-top: 88px; }
.calculator-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: 64px; margin-bottom: 56px; scroll-margin-top: 112px; }
.calculator-overview h1 { margin: 0; font-size: 52px; line-height: 1.1; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.calculator-overview p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.calculator-collection { scroll-margin-top: 112px; }
.calculator-collection > h2 { margin: 0 0 24px; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
.calculator-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.calculator-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-soft); color: var(--text); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
:root[data-theme="dark"] .calculator-card { background: var(--surface); }
.calculator-card-media { overflow: hidden; }
.calculator-card:focus-visible { outline: 2px solid var(--link); outline-offset: 6px; }
.calculator-card-image { display: block; width: 100%; height: auto; aspect-ratio: 1.9; object-fit: cover; background: var(--bg-soft); transition: transform .22s ease; }
.calculator-card-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; min-height: 76px; }
.calculator-card-caption :is(h2, h3, h4, h5) { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.calculator-card-details { min-width: 0; align-self: flex-start; }
.calculator-card-description { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.calculator-card-caption > .tabler-icon { width: 22px; height: 22px; flex-shrink: 0; transform: rotate(-45deg); }
.calculator-card-details + .tabler-icon { align-self: flex-start; margin-top: 2px; }
.calculator-card-caption :is(h2, h3, h4, h5) > .tabler-icon { width: 22px; height: 22px; margin-top: 2px; }
.calculator-card:is(:hover, :focus-visible) { border-color: var(--link); box-shadow: var(--shadow-soft); }
.calculator-card:is(:hover, :focus-visible) .calculator-card-caption :is(h2, h3, h4, h5) { color: var(--link); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .calculator-card:hover { transform: translateY(-3px); }
  .calculator-card:hover .calculator-card-image { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .calculator-card, .calculator-card-image { transition: none; }
}
@media (max-width: 980px) {
  .calculator-overview { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; }
  .calculator-overview h1 { max-width: 760px; font-size: 44px; }
  .calculator-overview p { max-width: 640px; }
  .calculator-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .calculator-home { padding-top: 28px; padding-bottom: 36px; }
  .calculator-overview { margin-bottom: 32px; }
  .calculator-overview h1 { font-size: 36px; }
  .calculator-overview p { font-size: 16px; }
  .calculator-gallery { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.tools-hero, .tools-about { scroll-margin-top: 88px; }
.tools-hero { padding: 104px 0 100px; background: var(--hero-bg); border-bottom: 1px solid var(--border); }
.tools-hero h1 { max-width: 1000px; margin: 0; font-size: clamp(44px, 6.5vw, 80px); line-height: 1.08; letter-spacing: -.055em; font-weight: 850; text-wrap: balance; }
.tools-hero .hero-lede { max-width: 760px; margin: 28px 0 0; }
.tools-status { margin: 24px 0 0; color: var(--muted); font-size: 16px; }
.tools-hero .hero-actions { margin-top: 32px; }
.tools-about { padding: 72px 0; }
.tools-about h2 { margin: 0 0 20px; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.tools-about p { max-width: 820px; margin: 0; color: var(--muted); font-size: 18px; }
.footer-about a { display: inline-flex; align-items: center; gap: 7px; }
.no-js-navigation { padding: 20px; background: var(--bg-soft); }
.no-js-navigation a { display: inline-block; margin: 6px 12px; }
.tool-directory { padding-top: 64px; padding-bottom: 64px; scroll-margin-top: 100px; }
.tool-directory > h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.025em; }
.tool-category { margin-top: 36px; }
.tool-category h3 { margin-bottom: 12px; color: var(--muted); font-size: 16px; font-weight: 650; }
.tool-list article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; padding: 24px 0; border-top: 1px solid var(--border); }
.tool-list h4, .tool-list h2 { margin: 0; font-size: 21px; line-height: 1.4; letter-spacing: -.02em; }
.tool-list p { margin: 0; color: var(--muted); }
.calculator-intro { padding-top: 56px; padding-bottom: 32px; overflow-wrap: anywhere; }
.calculator-intro:lang(de), .calculator-layout:lang(de), .calculator-explanation:lang(de) { hyphens: auto; }
.calculator-intro h1 { max-width: 1000px; margin: 20px 0 0; font-size: clamp(32px, 4.5vw, 54px); line-height: 1.15; letter-spacing: -.04em; text-wrap: balance; }
.calculator-intro .hero-lede { max-width: 900px; margin-top: 20px; font-size: 18px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.breadcrumbs a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 0; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); color: var(--text); font-weight: 650; line-height: 1.4; text-decoration: none; }
.breadcrumbs a:hover { border-color: var(--link); background: var(--surface); }
.breadcrumbs a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.breadcrumbs .tabler-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.breadcrumbs a > .tabler-icon { color: var(--link); }
.breadcrumb-step { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.calculator-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 24px; padding-bottom: 48px; overflow-wrap: anywhere; }
.calculator-layout h2, .calculator-explanation h2 { margin: 0 0 20px; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.calculator-inputs, .calculator-output { padding: 24px; border: 1px solid var(--border); border-top: 3px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.calculator-inputs, .calculator-output { display: flex; flex-direction: column; }
.calculator-layout [hidden] { display: none !important; }
.calculator-fields { display: grid; gap: 24px; }
.calculator-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; min-width: 0; }
.calculator-field-row-single { grid-template-columns: minmax(0, 1fr); }
.calculator-field-row:has(> [hidden]) > :not([hidden]) { grid-column: 1 / -1; }
.calculator-note { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.calculator-inputs > form + .calculator-note { margin: auto 0 0; padding-top: 24px; }
.calculator-fields .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.calculator-field-row > .field { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 7px; }
.calculator-fields .field-controls { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.calculator-fields label { font-size: 14px; line-height: 1.5; font-weight: 700; }
.calculator-fields .field-unit { color: var(--muted); font-size: inherit; font-weight: inherit; }
.calculator-fields input, .calculator-fields select { min-height: 46px; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.calculator-fields small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.calculator-fields [aria-invalid="true"] { border-color: var(--coral); }
.field-error, .form-errors { color: var(--coral); font-size: 14px; margin: 0; }
.calculator-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-quiet { background: var(--bg); color: var(--text); border: 1px solid var(--border); min-height: 44px; font: inherit; font-weight: 650; }
.btn-quiet:hover { background: var(--bg-soft); }
.calculator-output { grid-column: 1 / -1; border-top-color: var(--green); background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
.calculator-output > h2 > .tabler-icon { color: var(--green); }
.calculator-layout.calculator-preview-layout { align-items: start; }
.calculator-preview-layout > .calculator-output { grid-column: auto; }
.calculator-layout.calculator-preview-layout > .calculator-method { grid-column: 1 / -1; }
.calculator-preview-workspace { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; min-width: 0; }
.calculator-preview-workspace > .calculator-output { grid-column: auto; }
.utility-output { gap: 16px; }
.utility-advanced { grid-column: 1 / -1; min-width: 0; }
.utility-advanced > summary { cursor: pointer; padding: 12px 0; font-weight: 650; }
.utility-advanced[open] > summary { margin-bottom: 12px; }
.utility-digits { margin: 20px 0; font-size: clamp(24px, 5vw, 64px); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.25; overflow-wrap: anywhere; }
.utility-output:fullscreen { padding: clamp(24px, 5vw, 80px); background: var(--bg); color: var(--text); overflow: auto; justify-content: center; text-align: center; }
.utility-output:fullscreen .utility-digits { font-size: clamp(30px, 10vw, 160px); }
.utility-output:fullscreen .calculator-actions { justify-content: center; }
.utility-analog { width: min(100%, 320px); height: auto; margin: 16px auto; display: block; fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.utility-analog [data-hour-hand] { stroke-width: 6; }
.utility-analog [data-second-hand] { stroke: var(--green); stroke-width: 2; }
.utility-code-preview { align-self: flex-start; width: min(100%, 480px); max-width: 100%; padding: 12px; background: #fff; border-radius: 8px; }
.utility-code-preview img { display: block; max-width: 100%; max-height: 600px; width: 100%; height: auto; object-fit: contain; }
@media screen and (min-width: 981px) {
  .calculator-preview-workspace > [data-code-output][data-preview-sticky] { position: sticky; top: var(--code-preview-top); }
  [data-code-output][data-preview-sticky] .utility-code-preview img { max-height: var(--code-preview-max-height, 600px); }
}
.image-tool-drop { padding: 20px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-soft); }
.image-tool-drop[data-dragging] { border-color: var(--green); }
.image-tool-drop input[type=file] { width: 100%; max-width: 100%; padding: 8px 0; }
.image-tool-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.image-tool-previews figure { min-width: 0; margin: 0; }
.image-tool-previews figcaption { margin-bottom: 10px; font-weight: 650; }
.image-tool-previews img { display: block; max-width: 100%; width: 100%; height: 220px; object-fit: contain; border-radius: 8px; background: var(--bg-soft); }
.image-tool-icon-stage { display: grid; place-items: center; height: 220px; border-radius: 8px; background: var(--bg-soft); }
.image-tool-icon-stage > img.favicon-browser-preview { width: 32px; height: 32px; border-radius: 0; }
.image-tool-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 16px; overflow-wrap: anywhere; }
.image-tool-metrics dd { margin: 0; font-variant-numeric: tabular-nums; }
[data-image-summary] { overflow-wrap: anywhere; }
@media (max-width: 600px) { .image-tool-previews { grid-template-columns: 1fr; } .image-tool-previews img, .image-tool-icon-stage { height: 180px; } .image-tool-metrics { grid-template-columns: 1fr; gap: 4px; } .image-tool-metrics dd { margin-bottom: 12px; } }
.utility-output table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.utility-output :is(th, td) { padding: 10px; text-align: start; border-bottom: 1px solid var(--border); }
.calculator-output h3 { margin: 28px 0 12px; font-size: 18px; }
.calculator-output > [role="status"] { margin: 0; min-height: 1lh; font-size: 14px; color: var(--muted); }
.result-unavailable .primary-result, .result-unavailable .age-detail, .result-unavailable dd, .result-unavailable td, .result-unavailable .result-warning { visibility: hidden; }
.result-label { margin: 20px 0 8px; color: var(--muted); font-size: 14px; }
.primary-result { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.15; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.result-breakdown { margin: 0; font-size: 14px; }
.result-breakdown > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--border); }
.result-breakdown dt { color: var(--muted); max-width: 65%; }
.result-breakdown dd { text-align: right; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-warning { border-left: 3px solid var(--coral); padding-left: 12px; font-size: 14px; margin: 24px 0; }
.calculator-output [data-result] { margin-bottom: 24px; }
.calculator-output [data-copy-result] { margin-top: auto; align-self: flex-start; }
.result-table-wrap { overflow-x: auto; margin-top: 24px; }
.result-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.result-table-wrap caption { text-align: left; font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.result-table-wrap th, .result-table-wrap td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }

/* Calculator diagrams inherit the canonical palette, type and appearance modes. */
.result-visual { margin: 24px 0 0; padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.result-visual figcaption { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
.result-visual svg { display: block; width: 100%; max-width: 760px; margin-inline: auto; height: auto; overflow: visible; }
.result-visual svg text { font-family: inherit; font-size: 14px; font-weight: 400; fill: var(--muted); stroke: none; font-variant-numeric: tabular-nums; }
.viz-color-0 { --viz-color: var(--green); }
.viz-color-1 { --viz-color: var(--blue); }
.viz-color-2 { --viz-color: var(--amber); }
.viz-color-3 { --viz-color: var(--coral); }
.viz-color-4 { --viz-color: var(--link); }
.viz-color-5 { --viz-color: var(--muted); }
.viz-fill { fill: var(--viz-color); stroke: none; }
.viz-background { fill: var(--bg-soft); stroke: none; }
.result-visual svg .viz-segment-label { fill: var(--surface); font-size: 13px; font-weight: 700; }
.result-visual svg .viz-pan-label { fill: var(--viz-color); }
.viz-outline { fill: none; stroke: var(--border-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.viz-line { fill: none; stroke: var(--viz-color); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.viz-series-1 { stroke-dasharray: 7 4; }
.viz-screen-panel { fill: color-mix(in srgb, var(--green) 8%, var(--surface)); stroke: var(--green); stroke-width: 2; vector-effect: non-scaling-stroke; }
.viz-screen-diagonal { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.viz-screen-badge { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.result-visual svg .viz-screen-measurement { fill: var(--text); font-size: 20px; font-weight: 600; }

.viz-gear { stroke-width: 1.5; }
.viz-axis, .viz-grid { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-grid { stroke: var(--border); }
.viz-marker { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.viz-slope { stroke: var(--green); stroke-width: 3; vector-effect: non-scaling-stroke; }
.visual-legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; font-size: 12px; }
.visual-legend li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.visual-legend-plain li { grid-template-columns: minmax(0, 1fr) auto; }
.visual-legend strong, .visual-bar-label strong { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.visual-swatch { width: 16px; height: 16px; border-radius: 3px; background: var(--viz-color); color: var(--surface); font-size: 10px; font-weight: 800; text-align: center; line-height: 16px; }
.visual-marker-swatch { height: 16px; width: 8px; border-right: 2px dashed var(--text); }
.visual-bars { display: grid; gap: 16px; }
.roman-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.roman-part { display: grid; align-content: start; gap: 6px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--green) 5%, var(--surface)); text-align: center; }
.roman-part-subtractive { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); background: color-mix(in srgb, var(--blue) 5%, var(--surface)); }
.roman-symbol { color: var(--green); font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: .02em; }
.roman-part-subtractive .roman-symbol { color: var(--blue); }
.roman-operation { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.roman-value { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.roman-equation { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.8; font-variant-numeric: tabular-nums; }
.roman-equation-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.roman-equation-term { display: inline-block; white-space: nowrap; }

.visual-total { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.visual-total strong { color: var(--text); font-variant-numeric: tabular-nums; }
.visual-legend span, .visual-legend strong { overflow-wrap: anywhere; min-width: 0; }
.visual-bar-label { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 7px; font-size: 12px; overflow-wrap: anywhere; }
.visual-bar-label > span { min-width: 0; }
.visual-bar-label strong { flex: 0 1 48%; }
.visual-axis-label, .visual-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.visual-data { margin-top: 16px; font-size: 12px; }
.visual-data summary { min-height: 44px; display: list-item; cursor: pointer; color: var(--link); padding-top: 12px; }
.visual-data summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 3px; }
.result-unavailable:not([data-visual-pending]) .result-visual { visibility: hidden; }
.resistor-body { fill: #dbc6a0; stroke: #a18a63; stroke-width: 2; }
.resistor-lead { stroke: #8d939d; stroke-width: 7; stroke-linecap: round; }
.resistor-band-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.resistor-band-key { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; text-align: start; }
button.resistor-band-key { cursor: pointer; }
button.resistor-band-key:hover { border-color: var(--link); }
button.resistor-band-key:focus-visible, #resistor-chart-title + .result-table-wrap:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.resistor-band-name { display: block; color: var(--muted); font-size: 12px; }
.resistor-band-value { font-size: 13px; white-space: nowrap; }
.resistor-swatch { display: inline-block; width: 16px; height: 16px; background: var(--resistor-color); border: 1px solid var(--border); border-radius: 3px; vertical-align: middle; }
#resistor-chart-title + .result-table-wrap .resistor-swatch { margin-inline-end: 8px; }
.rcBlack { --resistor-color: #191919; } .rcBrown { --resistor-color: #804322; }
.rcRed { --resistor-color: #db3030; } .rcOrange { --resistor-color: #f28c22; }
.rcYellow { --resistor-color: #f5cb31; } .rcGreen { --resistor-color: #34864c; }
.rcBlue { --resistor-color: #3565be; } .rcViolet { --resistor-color: #8b48a7; }
.rcGray { --resistor-color: #888c91; } .rcWhite { --resistor-color: #ffffff; }
.rcGold { --resistor-color: #c2a03d; } .rcSilver { --resistor-color: #bbc0c7; }
.rcPink { --resistor-color: #f09cb8; } .rcNone { --resistor-color: transparent; }
.resistor-color-ready > select { padding-inline-start: 44px; }
.resistor-selected-color { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
@supports (appearance: base-select) {
  .select-control > select:not(.resistor-color-select), .select-control > select:not(.resistor-color-select)::picker(select) { appearance: base-select; }
  .select-control > select::picker-icon { display: none; }
  .select-control > select::picker(select) { position: fixed; position-anchor: auto; position-area: none; inset: auto; top: anchor(bottom); left: anchor(left); width: anchor-size(width); height: max-content; max-height: calc(100dvh - 24px); max-width: calc(100dvw - 24px); position-try-order: normal; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --tools-picker-viewport; margin-block: 4px; padding: 4px; overflow-y: auto; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgb(0 0 0 / .15); }
  .select-control > select option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px; border-radius: 4px; font: inherit; }
  .select-control > select option:hover, .select-control > select option:focus { background: var(--bg-soft); }
  .select-control > select option:checked { background: var(--bg-soft); font-weight: 600; }
  .select-control > select option:disabled { opacity: .5; }
  .select-control > select option::checkmark { order: 3; margin-inline-start: auto; }
  .resistor-selected-color { display: none; }
  .resistor-color-ready > .resistor-color-select, .resistor-color-ready > .resistor-color-select::picker(select) { appearance: base-select; }
  .resistor-color-control > .resistor-color-select { padding-inline-start: 12px; }
  .resistor-color-select > button { all: unset; width: 100%; }
  .resistor-color-select selectedcontent, .resistor-color-select option { display: flex; align-items: center; gap: 10px; }
  .resistor-color-select .resistor-swatch { flex: 0 0 16px; }
}
@position-try --tools-picker-viewport {
  top: 12px;
  bottom: 12px;
  margin-block: auto;
}
@media (max-width: 600px) {
  .result-visual { padding: 16px 12px; }
  .visual-legend li { grid-template-columns: 18px minmax(0, 1fr); }
  .visual-legend strong { grid-column: 2; text-align: left; }
  .visual-legend-plain li { grid-template-columns: minmax(0, 1fr); }
  .visual-legend-plain strong { grid-column: 1; }
}
@media (forced-colors: active) {
  .roman-part { background: Canvas; border-color: CanvasText; }
  .roman-symbol, .roman-part-subtractive .roman-symbol { color: CanvasText; }
  .viz-screen-panel, .viz-screen-badge { fill: Canvas; stroke: CanvasText; }
  .viz-screen-diagonal { stroke: LinkText; }
  .result-visual svg .viz-screen-measurement { fill: CanvasText; }
  .viz-fill { fill: Highlight; stroke: CanvasText; stroke-width: 1; }
  .viz-line, .viz-slope, .viz-marker, .viz-outline, .viz-axis, .viz-grid { stroke: CanvasText; }
  .visual-swatch { background: Highlight; color: HighlightText; }
}
.calculator-explanation { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; gap: 32px 24px; padding-bottom: 64px; overflow-wrap: anywhere; }
.calculator-explanation > section { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--border); padding-top: 24px; }
.calculator-explanation > [aria-labelledby="sources-title"] > ul { max-width: 900px; }
.calculator-layout > :is(.calculator-method, .calculator-assumptions) { grid-column: auto; padding: 24px; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: var(--radius); max-width: none; background: color-mix(in srgb, var(--blue) 3%, var(--surface)); }
.calculator-layout > .calculator-assumptions { grid-column: 1 / -1; border-top-color: var(--amber); background: color-mix(in srgb, var(--amber) 3%, var(--surface)); }
.calculator-method h2 > .tabler-icon { color: var(--blue); }
.calculator-assumptions h2 > .tabler-icon { color: var(--amber); }
.calculator-layout > :is(.calculator-method, .calculator-assumptions) > :last-child { margin-bottom: 0; }
.calculator-assumptions p { max-width: 80ch; }
.calculator-explanation p, .calculator-assumptions p, .formula-list { color: var(--muted); line-height: 1.7; }
.calculator-explanation a { text-decoration: underline; text-underline-offset: 3px; }
.calculator-explanation .calculator-card { text-decoration: none; }
.calculator-explanation small { color: var(--muted); display: block; }
.formula-list { padding-left: 20px; overflow-wrap: anywhere; }
.formula-list li { margin-bottom: 14px; }
.cut-list { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 0; }
.cut-list legend { padding: 0 6px; font-size: 16px; font-weight: 700; }
.cut-list > p { color: var(--muted); font-size: 13px; }
.cut-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr) auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.cut-row button { padding: 11px; font-size: 12px; }
@media (max-width: 980px) {
  .calculator-layout, .calculator-explanation, .calculator-preview-workspace { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .calculator-output { max-width: 100%; }
}
@media (max-width: 600px) {
  .calculator-intro { padding-top: 32px; }
  .calculator-layout { padding-bottom: 32px; }
  .calculator-fields, .calculator-field-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .calculator-actions { flex-direction: column; align-items: stretch; }
  .calculator-actions .btn { padding: 12px 18px; }
  .calculator-inputs, .calculator-output, .calculator-layout > :is(.calculator-method, .calculator-assumptions) { padding: 20px; }
  .tool-directory { padding-top: 36px; padding-bottom: 36px; }
  .tool-list article { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cut-row { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); }
  .cut-row button { grid-column: 1 / -1; justify-self: start; }
  .primary-result { font-size: 32px; }
}
@media (max-width: 760px) {
  .tools-hero { padding: 64px 0; }
  .tools-hero h1 { font-size: clamp(40px, 10vw, 60px); }
  .tools-about { padding: 48px 0; }
}
.tools-legal-supplement{
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.advertising-privacy{
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--border);
}
.advertising-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.advertising-actions .btn{
  min-height: 44px;
  white-space: normal;
  text-align: center;
}
.advertising-privacy .btn { max-width: 100%; white-space: normal; }
.advertising-links{
  overflow-wrap: anywhere;
}
.advertising-privacy [hidden] { display: none !important; }

/* Homepage category disclosure follows Paper City Guide's collection browser. */
.calculator-category-browser { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); margin-bottom: 22px; }
.calculator-category-browser > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; border-radius: 14px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 650; }
.calculator-category-browser > summary::-webkit-details-marker { display: none; }
.calculator-category-browser > summary:hover { background: var(--bg-soft); }
.calculator-category-browser > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.calculator-category-browser > summary > .tabler-icon { flex: 0 0 auto; width: 20px; height: 20px; }
.calculator-category-browser > summary > .tabler-icon:first-child { color: var(--link); }
.calculator-category-browser > summary > .tabler-icon:last-child { margin-left: auto; transition: transform .18s ease; }
.calculator-category-browser[open] > summary > .tabler-icon:last-child { transform: rotate(180deg); }
.calculator-category-selection { min-width: 0; margin-left: auto; font-size: 14px; font-weight: 400; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calculator-category-browser + .calculator-search { margin-top: 0; }
.calculator-category-browser .calculator-category-links { margin-bottom: 0; padding: 4px 16px 16px; }
@media (max-width: 600px) {
  .calculator-category-browser > summary { gap: 9px; padding: 12px; font-size: 14px; }
  .calculator-category-selection { font-size: 13px; }
  .calculator-category-browser .calculator-category-links { padding: 4px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .calculator-category-browser > summary > .tabler-icon:last-child { transition: none; }
}

.calculator-category-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.calculator-category-links a { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 72px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-soft); color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.4; font-weight: 650; transition: border-color .15s ease, background-color .15s ease; }
.calculator-category-links a > .tabler-icon, .calculator-category-links a > [aria-hidden] { flex: 0 0 auto; width: 22px; height: 22px; color: var(--link); font-size: 22px; line-height: 1; }
.calculator-category-links a > [data-category-label] { min-width: 0; white-space: normal; overflow-wrap: normal; }
.calculator-category-links a:hover { border-color: var(--link); background: var(--surface); }
.calculator-category-links a[aria-current="page"] { border-color: var(--link); background: color-mix(in srgb, var(--link) 12%, var(--bg)); }
.calculator-category-links a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
@media (max-width: 980px) {
  .calculator-category-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .calculator-category-links a { transition: none; }
}
@media (forced-colors: active) {
  .calculator-category-links a[aria-current="page"] { border: 2px solid Highlight; }
}
.calculator-filter-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.calculator-group[hidden] { display: none; }
.calculator-group { position: relative; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-strong); scroll-margin-top: 110px; }
.calculator-group-alias { position: absolute; top: 0; left: 0; width: 0; height: 0; scroll-margin-top: 110px; }
.calculator-group > h3 { margin: 0 0 24px; color: var(--text); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; font-weight: 800; letter-spacing: -.025em; }
.calculator-card-compact { border: 1px solid var(--border); padding: 24px; background: var(--bg-soft); }
.calculator-card-compact .calculator-card-caption { margin: 0; min-height: 56px; }
.calculator-card-compact .calculator-card-caption h4 { font-size: 18px; }
.calculator-card-compact:hover { border-color: var(--link); }
.calculator-fields input[type="date"] { width: 100%; min-width: 0; }
.result-breakdown dd { max-width: 60%; }
@media (max-width: 600px) {
  .calculator-card-compact { padding: 20px; }
  .calculator-category-links { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 28px; }
  .calculator-category-links a { min-height: 64px; padding: 12px; font-size: 14px; gap: 10px; }
  .calculator-group { margin-top: 32px; }
}

.age-detail { font-size: 18px; line-height: 1.6; margin: 10px 0 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calculator-fields input[type="time"] { width: 100%; min-width: 0; }
.calculator-fields label:has(> .tabler-icon) { display: flex; align-items: center; gap: 7px; }
.calculator-fields label > .tabler-icon { width: 18px; height: 18px; color: var(--link); flex: 0 0 auto; }
/* Shared searchable controls retain the canonical inset Tabler chevron. */
.searchable-select-control > input { width: 100%; padding-inline-end: 42px; text-overflow: ellipsis; }
.searchable-select-popup { position: fixed; z-index: 1000; inset: auto; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgb(0 0 0 / .15); font-size: 16px; }
.searchable-select-option { min-height: 44px; padding: 10px 12px; border-radius: 4px; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.searchable-select-option[aria-selected="true"] { font-weight: 600; background: var(--bg-soft); }
.searchable-select-option[data-active] { background: var(--bg-soft); outline: 2px solid var(--link); outline-offset: -2px; }
.searchable-select-option[aria-disabled="true"] { opacity: .5; cursor: default; }
.searchable-select-group { margin: 0; padding: 10px 12px 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.searchable-select-count { margin: 0; padding: 8px 12px; color: var(--muted); font-size: 12px; font-weight: 400; }
@media (forced-colors: active) {
  .searchable-select-option[data-active] { outline-color: Highlight; }
  .searchable-select-option[aria-disabled="true"] { color: GrayText; opacity: 1; }
}
.currency-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.currency-actions .btn { white-space: normal; }
@media (max-width: 600px) { .currency-actions .btn { width: 100%; justify-content: center; } }

/* Shared repeated inputs used by timesheets, shopping, recipes and material planners. */
.record-row { display: grid; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.record-row .field-row { min-width: 0; }
.record-row > button { justify-self: start; }
.calculator-fields textarea { width: 100%; min-height: 110px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; resize: vertical; }

/* Requested theme-aware chrome: the canonical shell and controls retain their semantics. */
:root {
  --tools-chrome-bg: var(--surface);
  --tools-footer-bg: var(--bg-soft);
  --tools-chrome-text: var(--text);
  --tools-chrome-muted: var(--muted);
  --tools-chrome-rule: var(--border-strong);
  --tools-chrome-control: var(--bg);
  --tools-chrome-hover: var(--bg-soft);
  --tools-chrome-accent: var(--link);
}
:root[data-theme="dark"] {
  --tools-chrome-bg: #080f17;
  --tools-footer-bg: #050b12;
  --tools-chrome-text: #f1f6ff;
  --tools-chrome-muted: #bdc6d0;
  --tools-chrome-rule: #263a55;
  --tools-chrome-control: #101e31;
  --tools-chrome-hover: #172b44;
  --tools-chrome-accent: #9fe8ca;
}
.topbar { background: var(--tools-chrome-bg); color: var(--tools-chrome-text); border-color: var(--tools-chrome-rule); }
.topbar .brand span, .footer .brand span { color: var(--tools-chrome-accent); border-color: var(--tools-chrome-rule); }
.nav, .legal-menu summary { color: var(--tools-chrome-muted); }
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--tools-chrome-text); }
.nav > a::after { background: var(--tools-chrome-accent); }
.topbar :is(.icon-button, .language-menu summary) { background: var(--tools-chrome-control); color: var(--tools-chrome-text); border-color: var(--tools-chrome-rule); }
.topbar :is(.icon-button, .language-menu summary):hover { background: var(--tools-chrome-hover); border-color: var(--tools-chrome-accent); }
.legal-menu-panel, .language-panel { background: var(--tools-chrome-control); border-color: var(--tools-chrome-rule); box-shadow: var(--shadow); }
.nav .legal-menu-panel a, .mobile-legal-menu .legal-menu-panel a, .language-link { color: var(--tools-chrome-muted); }
.nav .legal-menu-panel a:hover, .nav .legal-menu-panel a:focus-visible, .nav .legal-menu-panel a[aria-current], .mobile-legal-menu .legal-menu-panel a:hover, .mobile-legal-menu .legal-menu-panel a:focus-visible, .mobile-legal-menu .legal-menu-panel a[aria-current], .language-link:hover, .language-link[aria-current] { color: var(--tools-chrome-text); background: var(--tools-chrome-hover); }
.legal-menu[open] summary, .legal-menu summary:hover { color: var(--tools-chrome-accent); }
.mobile-menu { background: var(--tools-chrome-bg); color: var(--tools-chrome-text); border-color: var(--tools-chrome-rule); }
.mobile-menu-inner > a { color: var(--tools-chrome-text); border-color: var(--tools-chrome-rule); }
.mobile-language-links { border-color: var(--tools-chrome-rule); }
.footer { background: var(--tools-footer-bg); color: var(--tools-chrome-text); border-top: 1px solid var(--tools-chrome-rule); }
.footer-grid h2 { color: var(--tools-chrome-text); }
.footer :is(.footer-site a, .footer-legal a, .footer-company a, .footer-privacy-button) { color: var(--tools-chrome-muted); }
.footer :is(a, button):hover { color: var(--tools-chrome-accent); }
.footer-bottom { color: var(--tools-chrome-muted); border-color: var(--tools-chrome-rule); }
.topbar :focus-visible, .footer :is(a,button):focus-visible { outline-color: var(--tools-chrome-accent); }
.brand .brand-logo-dark { display: none; }
.brand .brand-logo-light { display: block; }
:root[data-theme="dark"] .brand .brand-logo-dark { display: block; }
:root[data-theme="dark"] .brand .brand-logo-light { display: none; }


.calculators-menu summary { position: relative; padding: 0 42px 0 0; }
.calculators-menu summary > .tabler-icon-chevron-down { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.calculators-menu-panel { width: max-content; max-width: calc(100vw - 32px); grid-template-columns: repeat(2, max-content); max-height: calc(100svh - 120px); overflow-y: auto; padding: 8px; }
.calculators-menu-panel a { gap: 10px; border-radius: 6px; min-width: 0; }
.calculators-menu-panel a > .tabler-icon, .calculators-menu-panel a > [aria-hidden], .footer-calculators a > .tabler-icon, .footer-calculators a > [aria-hidden] { width: 18px; height: 18px; flex: 0 0 18px; font-size: 18px; line-height: 1; }
.calculators-menu-panel a > [data-category-label] { white-space: nowrap; overflow-wrap: normal; }
.calculators-menu-panel .all-calculators { grid-column: 1 / -1; border-bottom: 1px solid var(--tools-chrome-rule); margin-bottom: 4px; }
.footer-grid { grid-template-columns: minmax(190px, 1.1fr) minmax(110px, .65fr) minmax(0, 1.8fr) minmax(140px, .85fr) max-content; gap: 32px; }
/* Copyright and privacy share the footer tracks, matching Paper City Guide. */
.footer-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; grid-template-columns: subgrid; align-items: center; column-gap: inherit; row-gap: 12px; margin-top: 24px; }
.footer-bottom p { grid-column: 1 / -2; min-width: 0; }
.footer-bottom .footer-privacy-button { grid-column: -2 / -1; justify-self: end; justify-content: space-between; align-items: center; gap: 7px; width: 100%; min-width: 0; min-height: 30px; padding: 2px 0; font-size: 13px; font-weight: 600; line-height: 1.65; text-align: right; }
.footer-privacy-button > svg { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 1.8; }
.footer-privacy-button > span { min-width: 0; overflow-wrap: anywhere; }
.footer-grid > nav { min-width: 0; }
.footer-grid :is(a, h2) { overflow-wrap: anywhere; }
.footer-calculators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 18px; }
.footer-calculators h2 { grid-column: 1 / -1; }
.footer-calculators a[data-group-nav="all"] { grid-column: 1 / -1; }
.footer-calculators a { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.footer-calculators a > .tabler-icon { margin-top: 2px; }
.footer-calculators a > [data-category-label] { white-space: normal; overflow-wrap: normal; }
.calculator-category-links a { min-height: 54px; padding: 10px 12px; font-size: 14px; }
@media (max-width: 1240px) {
  .footer-grid { grid-template-columns: minmax(110px, 1fr) minmax(0, 1.8fr) minmax(140px, 1fr) max-content; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1060px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-calculators { grid-template-columns: max-content; }
  .mobile-legal-menu.calculators-menu summary { padding: 10px 42px 10px 4px; }
  .mobile-legal-menu .calculators-menu-panel { position: static; width: 100%; grid-template-columns: minmax(0, 1fr); transform: none; max-height: none; overflow: visible; }
  .mobile-menu .legal-menu-panel { background: var(--tools-chrome-control); }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 28px; }
  .footer-bottom { margin-top: 4px; }
  .footer-bottom p { grid-column: 1 / -1; }
  .footer-bottom .footer-privacy-button { grid-column: 2; min-height: 36px; }
  .footer-calculators { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .calculator-category-links { gap: 8px; }
}

/* Document cards and current-document tabs follow the requested Paper City Guide layout. */
.legal-section { padding: 40px 0 72px; background: var(--bg); }
.legal-container { max-width: 1080px; }
.legal-breadcrumbs { margin: 0 0 24px; }
.legal-content { border: 1px solid var(--border-strong); border-radius: 20px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-soft); }
.legal-kicker { display: flex; align-items: center; gap: 8px; color: var(--link); font-size: 13px; font-weight: 650; margin: 0 0 16px; }
.legal-kicker .tabler-icon { width: 18px; height: 18px; }
.legal-title { margin: 0; font-size: clamp(36px, 4.4vw, 54px); line-height: 1.15; overflow-wrap: anywhere; }
.legal-intro { margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-top: 28px; background: var(--bg-soft); border: 1px solid var(--border-strong); border-radius: 14px; }
.legal-tabs a { flex: 1 1 max-content; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 10px 12px; border-radius: 9px; color: var(--text); text-decoration: none; text-align: center; font-size: 14px; font-weight: 650; line-height: 1.5; }
.legal-tabs a:hover, .legal-tabs a[aria-current="page"] { background: var(--surface); color: var(--link); }
.legal-tabs a[aria-current="page"] { box-shadow: 0 2px 8px #00000008; }
.legal-tabs a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.legal-document { margin-top: 36px; font-size: 16px; line-height: 1.8; }
.legal-document h2 { margin: 32px 0 14px; color: var(--text); font-size: clamp(22px, 2.4vw, 26px); line-height: 1.35; letter-spacing: -.02em; }
.legal-document p, .legal-document li { line-height: 1.8; }
.attribution-source-link { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 600px) {
  .legal-section { padding: 28px 0 48px; }
  .legal-content { padding: 24px 20px; border-radius: 18px; }
  .legal-title { font-size: 36px; }
  .legal-title:lang(ja) { font-size: 32px; line-height: 1.35; }
  .legal-tabs { flex-direction: column; margin-top: 24px; }
  .legal-tabs a { flex-basis: auto; justify-content: flex-start; text-align: left; }
  .legal-intro, .legal-document { font-size: 15px; }
  .legal-document { margin-top: 28px; }
}
@media (forced-colors: active) {
  .legal-tabs a[aria-current="page"] { border: 1px solid Highlight; }
}

.calculator-category-links .country-flags, .calculators-menu-panel .country-flags, .footer-calculators .country-flags, .calculator-group > h3 .country-flags { display: inline-block; white-space: nowrap; }
.legal-document h3 { margin: 28px 0 14px; color: var(--text); font-size: 20px; line-height: 1.4; }
@media (max-width: 1060px) {
  .mobile-legal-menu summary, .mobile-legal-menu .legal-menu-panel { border-color: var(--tools-chrome-rule); }
  .mobile-menu .mobile-legal-menu .legal-menu-panel a { background: var(--tools-chrome-control); color: var(--tools-chrome-muted); }
  .mobile-menu .mobile-legal-menu .legal-menu-panel a:hover, .mobile-menu .mobile-legal-menu .legal-menu-panel a:focus-visible, .mobile-menu .mobile-legal-menu .legal-menu-panel a[aria-current] { background: var(--tools-chrome-hover); color: var(--tools-chrome-text); }
}

.legal-content .legal-kicker { color: var(--link); }

/* Paper City Guide preference-dialog composition; retain the Tools theme and consent runtime. */
#tools-preferences { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 28px; margin: auto; border: 1px solid var(--border-strong); border-radius: 20px; overflow: auto; background: var(--surface); color: var(--text); }
#tools-preferences[open] { display: grid; gap: 24px; }
#tools-preferences::backdrop { background: #0008; }
#tools-preferences .preferences-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#tools-preferences h2 { min-width: 0; margin: 0; padding-top: 6px; font-size: 24px; line-height: 1.3; }
#tools-preferences .icon-button { flex-shrink: 0; border-radius: 10px; background: var(--surface); border-color: var(--border-strong); color: var(--text); }
#tools-preferences p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
#tools-preferences .preferences-consent { display: grid; gap: 12px; }
#tools-preferences .consent-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin: 0; }
#tools-preferences .consent-actions .btn { min-height: 48px; padding: 12px 18px; border: 1px solid var(--link); border-radius: 10px; background: none; color: var(--link); box-shadow: none; font-size: 14px; font-weight: 500; white-space: normal; }
#tools-preferences .preferences-reset { padding-top: 16px; border-top: 1px solid var(--border-strong); }
#tools-preferences [data-reset-preferences] { min-height: 44px; margin-left: -10px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
#tools-preferences [data-reset-preferences]:hover, #tools-preferences .icon-button:hover { background: var(--bg-soft); color: var(--link); }
#tools-preferences [data-reset-status]:empty { display: none; }
#tools-preferences [data-reset-status]:not(:empty) { margin-top: 8px; }
#tools-preferences :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
@media (max-width: 480px) {
  #tools-preferences { padding: 22px; border-radius: 18px; }
  #tools-preferences[open] { gap: 20px; }
  #tools-preferences h2 { font-size: 22px; }
  #tools-preferences .consent-actions { flex-direction: column; }
  #tools-preferences .consent-actions .btn { width: 100%; }
}

/* Reserve the reviewed fixed-height, variable-width banner before consent. */
.calculator-banner { min-height: 132px; margin-top: 32px; margin-bottom: 32px; }
.calculator-banner-label { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 24px; }
.calculator-banner [data-ad-mount] { max-width: 970px; margin-inline: auto; }

/* Short fixed choices use native controls; long catalogs retain native selects. */
.calculator-fields .field-label { font-size: 14px; line-height: 1.5; font-weight: 700; }
.calculator-choices { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.calculator-fields .calculator-choice { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.calculator-fields .calculator-choice input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--link); }
.calculator-choice span { min-width: 0; overflow-wrap: normal; hyphens: none; }
.calculator-choice:has(input:checked) { border-color: var(--link); background: color-mix(in srgb, var(--link) 9%, var(--bg)); }
.calculator-choice:hover { border-color: var(--link); }
.calculator-choice:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.calculator-weekdays { grid-template-columns: repeat(auto-fit, minmax(min(100%, 125px), 1fr)); }
@media (forced-colors: active) { .calculator-choice:has(input:checked) { border-color: Highlight; } }

/* Every radio group uses the full form width and one option per row. */
.calculator-field-row:has(.calculator-choices:not(.calculator-weekdays)) { grid-template-columns: minmax(0, 1fr); }
.calculator-choice:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.calculator-choice:has(input:disabled):hover { border-color: var(--border); }
@media (forced-colors: active) { .calculator-choice:has(input:disabled) { color: GrayText; border-color: GrayText; opacity: 1; } }

/* Collection search follows Paper City Guide with this portal's shared color tokens. */
.calculator-search { max-width: 620px; margin-top: -18px; }
.calculator-search[hidden], .calculator-search-empty[hidden], .calculator-card[hidden] { display: none; }
.calculator-search > label { display: block; font-size: 14px; font-weight: 550; margin-bottom: 8px; }
.calculator-search-input { display: flex; align-items: center; gap: 12px; padding-inline: 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); }
.calculator-search-input:focus-within { outline: 2px solid var(--link); outline-offset: 3px; }
.calculator-search-input > .tabler-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--muted); }
.calculator-search input { width: 100%; min-width: 0; min-height: 50px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: 0; }
.calculator-search input::placeholder { color: var(--muted); opacity: 1; }
.calculator-search-empty { margin-top: 20px; padding: 18px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-soft); }
.calculator-search-empty p { margin: 0 0 12px; }
@media (max-width: 600px) { .calculator-search { margin-top: -6px; } }
@media (forced-colors: active) { .calculator-search-input { border-color: ButtonText; } .calculator-search-input:focus-within { outline-color: Highlight; } }

/* World time uses the shared form controls and surfaces, with stable clock panels. */
.world-clock [hidden] { display: none !important; }
.world-clock-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.world-clock-toolbar h3 { margin: 0; font-size: 20px; }
.world-clock-toolbar + .calculator-note { margin: 20px 0; }
.world-clock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; min-height: 260px; }
.world-clock-card { min-width: 0; padding: 24px; border: 1px solid var(--border); border-top: 3px solid var(--link); border-radius: var(--radius); background: var(--bg-soft); }
:root[data-theme="dark"] .world-clock-card { background: var(--surface); }
.world-clock-card h3 { min-height: 58px; margin: 0 0 16px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.world-clock-time { font-size: clamp(26px, 3vw, 40px); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 0 0 12px; min-height: 48px; white-space: nowrap; }
.world-clock-date { min-height: 48px; margin: 0 0 12px; }
.world-clock-card .calculator-note { margin: 12px 0 0; }
.world-clock-card [data-clock-difference] { font-size: 14px; min-height: 42px; }
.world-clock-settings { margin-top: 28px; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.calculator-inputs > .world-clock-settings { margin-top: 0; }
.world-clock-settings summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 650; }
.world-clock-settings summary .tabler-icon { width: 20px; height: 20px; color: var(--link); }
.world-clock-settings form { margin-top: 24px; }
.world-primary-date { margin: 0 0 24px; font-size: 20px; font-weight: 600; }
.world-time-location { padding: 16px 0; border-top: 1px solid var(--border); }
.world-time-location h3 { margin: 0 0 8px; font-size: 16px; }
.world-time-location p { margin: 8px 0; }
.world-time-location p strong { font-variant-numeric: tabular-nums; }
.world-time-layout .result-unavailable :is(.world-primary-date, .world-time-location p, .calculator-choices) { visibility: hidden; }
.world-no-overlap { font-size: 28px; }
@media (max-width: 980px) { .world-clock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .world-clock-grid { grid-template-columns: minmax(0, 1fr); } .world-clock-settings { padding: 16px; } .world-clock-card h3 { min-height: 0; } }

.world-time-layout .calculator-output .calculator-choice { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.world-time-layout .calculator-output .calculator-choice input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--link); }

/* Air Datepicker: shared emonster tokens in System / Light / Dark. */
.date-time-control { position: relative; min-width: 0; }
.date-time-control input { width: 100%; }
.date-time-enhanced input { padding-right: 52px; }
.date-time-trigger { position: absolute; right: 5px; top: 5px; bottom: 5px; width: 40px; border: 0; border-radius: 7px; background: transparent; color: var(--link); display: grid; place-items: center; cursor: pointer; }
.date-time-trigger[hidden] { display: none; }
.date-time-trigger:hover { background: var(--bg-soft); }
.date-time-trigger:focus-visible, .emonster-picker [tabindex]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.date-time-trigger svg { width: 20px; height: 20px; }
.emonster-picker {
  --adp-background-color: var(--surface); --adp-color: var(--text); --adp-color-secondary: var(--muted); --adp-color-other-month: var(--muted);
  --adp-color-disabled: var(--muted); --adp-color-current-date: var(--link); --adp-border-color: var(--border-strong); --adp-border-color-inner: var(--border);
  --adp-border-radius: 12px; --adp-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI";
  --adp-font-size: 14px; --adp-width: 308px; --adp-padding: 12px; --adp-day-cell-height: 40px; --adp-nav-height: 44px; --adp-nav-action-size: 40px;
  --adp-cell-background-color-hover: var(--bg-soft); --adp-cell-background-color-selected: var(--link); --adp-cell-background-color-selected-hover: var(--link);
  --adp-cell-background-color-in-range: var(--bg-soft); --adp-background-color-hover: var(--bg-soft); --adp-background-color-active: var(--bg-soft);
  --adp-btn-color: var(--link); --adp-btn-color-hover: var(--link); --adp-btn-background-color-hover: var(--bg-soft); --adp-btn-height: 40px;
  --adp-nav-color-secondary: var(--muted); --adp-time-track-background-color: var(--border-strong); --adp-time-track-background-color-hover: var(--link); --adp-time-day-period-color: var(--muted);
  --adp-color-other-month-hover: var(--text); --adp-color-other-year: var(--muted); --adp-color-other-year-hover: var(--text); --adp-z-index: 90;
  max-width: calc(100vw - 18px); box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.emonster-picker[hidden] { display: none !important; }
.emonster-picker .air-datepicker--pointer { display: none; }
.emonster-picker .air-datepicker-nav--action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.emonster-picker .air-datepicker-nav--action path { stroke: currentColor; }
.emonster-picker .air-datepicker-cell.-selected- { color: var(--bg); }
.emonster-picker .air-datepicker-cell.-disabled- { opacity: .45; }
.emonster-picker .air-datepicker-time--row input { accent-color: var(--link); }
.emonster-picker .picker-seconds { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font: inherit; color: var(--muted); }
.emonster-picker .picker-seconds input { width: 76px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.license-notice { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); color: var(--text); font-size: 13px; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .emonster-picker { transition: none; } }
.emonster-picker .air-datepicker-nav--action[data-action="prev"] svg { transform: rotate(90deg); }
.emonster-picker .air-datepicker-nav--action[data-action="next"] svg { transform: rotate(-90deg); }
.emonster-picker.-inline- { position: absolute; left: 0; top: 0; border: 1px solid var(--border-strong); }
.emonster-picker { --adp-day-name-color: var(--muted); --adp-day-name-color-hover: var(--text); }
.emonster-picker { --adp-time-track-color: var(--border-strong); --adp-time-track-color-hover: var(--link); }
.emonster-picker .air-datepicker-time { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.emonster-picker .air-datepicker-time--current { justify-content: center; }
.emonster-picker .air-datepicker-time--current-hours, .emonster-picker .air-datepicker-time--current-minutes { font-family: inherit; font-size: 28px; font-weight: 600; }
.emonster-picker .air-datepicker-time--row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; min-height: 40px; background: none; }
.emonster-picker .picker-range-label { font-size: 13px; color: var(--muted); }
.emonster-picker .air-datepicker-time--row input[type="range"]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 5px; }
.emonster-picker .air-datepicker-time--row input[type="range"]::-webkit-slider-runnable-track { background: var(--border-strong); border-radius: 3px; }
.emonster-picker .air-datepicker-time--row input[type="range"]::-moz-range-track { background: var(--border-strong); border-radius: 3px; }
.emonster-picker .air-datepicker-time--row input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--link); border-color: var(--link); }
.emonster-picker .air-datepicker-time--row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--link); border-color: var(--link); }
.emonster-picker .picker-seconds { gap: 12px; }

/* Subsections keep regional and historical conversions readable within one category. */
.calculator-subgroup + .calculator-subgroup, .tool-category + .tool-category { margin-top: 32px; }
.calculator-subgroup > h4 { margin: 0 0 20px; font-size: 20px; }
.calculator-subgroup[hidden] { display: none; }

/* Airport lookup uses the shared calculator cards and theme tokens. */
.airport-finder-layout .field label { display: block; margin-bottom: 8px; font-weight: 600; }
.airport-finder-layout input[type="search"] { width: 100%; }
.airport-finder-examples { margin-block: 24px; }
.airport-finder-examples > div { display: flex; flex-wrap: wrap; gap: 8px; }
.airport-finder-group { margin-top: 28px; }
.airport-finder-group + .airport-finder-group { border-top: 1px solid var(--border); padding-top: 24px; }
.airport-finder-group h3 { margin: 0 0 8px; font-size: 1.1rem; }
.airport-finder-results { list-style: none; margin: 0; padding: 0; }
.airport-finder-results li { display: flex; align-items: flex-start; gap: 18px; padding-block: 22px; }
.airport-finder-results li + li { border-top: 1px solid var(--border); }
.airport-finder-code { min-width: 65px; font-size: 1.5rem; letter-spacing: .04em; }
.airport-finder-results h4 { margin: 0 0 8px; font-size: 1rem; }
.airport-finder-results p { margin: 6px 0; }
.airport-finder-reason { overflow-wrap: anywhere; }

/* Classical lettering is scoped to Roman numeral values and symbols. */
.roman-numeral, .roman-symbol, [data-field="romanNumber"] input { font-family: "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif; font-weight: 600; letter-spacing: .08em; }
[data-field="romanNumber"] input { text-transform: uppercase; }
.result-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.color-input-row { display: flex; align-items: center; gap: 12px; }
.color-input-row > input[type="text"] { flex: 1; min-width: 0; }
.color-input-row > input[type="color"] { flex: 0 0 52px; width: 52px; min-height: 48px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.viewing-cone { fill: var(--link); fill-opacity: .12; stroke: var(--link); stroke-width: 1.5; }
.bmi-marker { fill: var(--text); stroke: var(--surface); stroke-width: 1; }
.color-preview { stroke: var(--border); stroke-width: 1; }
@media (forced-colors: active) { .viewing-cone { stroke: CanvasText; fill: Highlight; } .bmi-marker { fill: CanvasText; stroke: Canvas; } .color-preview { forced-color-adjust: none; } }

.viewing-distance-choice { min-height: 44px; max-width: 100%; padding: 8px 10px; font-size: inherit; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; text-align: start; }
.viewing-distance-choice[aria-current="true"] { border-color: var(--link); background: color-mix(in srgb, var(--link) 9%, var(--bg)); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (forced-colors: active) { .viewing-distance-choice[aria-current="true"] { border-color: Highlight; } }
.viewing-reference-guide { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
[data-viewing-viewer] { cursor: grab; touch-action: none; outline: none; }
.viewing-canvas { touch-action: pan-y; }
.viewing-viewer-hit { fill: transparent; stroke: transparent; pointer-events: all; vector-effect: non-scaling-stroke; }
[data-viewing-viewer]:hover .viewing-viewer-hit, [data-viewing-viewer]:focus-visible .viewing-viewer-hit { stroke: var(--link); stroke-width: 2; }
[data-viewing-dragging], [data-viewing-dragging] [data-viewing-viewer] { cursor: grabbing; user-select: none; }
[data-viewing-viewer][aria-disabled="true"] { pointer-events: none; cursor: default; }
[data-viewing-edge] { cursor: ns-resize; touch-action: none; outline: none; }
.viewing-edge-hit { fill: transparent; stroke: transparent; pointer-events: all; vector-effect: non-scaling-stroke; }
.viewing-edge-dot { fill: var(--surface); stroke: var(--green); stroke-width: 2; }
[data-viewing-edge]:hover .viewing-edge-hit, [data-viewing-edge]:focus-visible .viewing-edge-hit { stroke: var(--link); stroke-width: 2; }
[data-viewing-resizing], [data-viewing-resizing] [data-viewing-edge] { cursor: ns-resize; }
[data-viewing-edge][aria-disabled="true"] { pointer-events: none; cursor: default; }
[data-viewing-marker] { cursor: pointer; outline: none; }
.viewing-marker-hit { fill: transparent; stroke: transparent; pointer-events: all; vector-effect: non-scaling-stroke; }
[data-viewing-marker]:hover .viewing-reference-dot { stroke: var(--link); stroke-width: 2; }
[data-viewing-marker]:focus-visible .viewing-marker-hit { stroke: var(--link); stroke-width: 2; }
[data-viewing-marker][aria-disabled="true"] { cursor: wait; pointer-events: none; }
.viewing-reference-dot { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.result-visual svg .viewing-reference-number { fill: var(--text); font-size: 13px; font-weight: 650; }
.result-visual svg .viewing-viewer-label { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
[data-viewing-guide][data-selected="true"] { stroke: var(--link); stroke-width: 2; stroke-dasharray: none; }
[data-viewing-marker][data-selected="true"] .viewing-reference-dot { fill: var(--link); stroke: var(--link); }
.result-visual svg [data-viewing-marker][data-selected="true"] .viewing-reference-number { fill: var(--bg); }
.viewing-reference-key { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--muted); border-radius: 50%; font-size: 11px; font-weight: 650; }
.viewing-reference-legend li[aria-current="true"] .viewing-reference-key { color: var(--bg); background: var(--link); border-color: var(--link); }
.viewing-reference-legend li[aria-current="true"] strong { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
@media (forced-colors: active) {
  [data-viewing-viewer]:hover .viewing-viewer-hit, [data-viewing-viewer]:focus-visible .viewing-viewer-hit { stroke: Highlight; }
  .viewing-edge-dot { fill: Canvas; stroke: CanvasText; }
  [data-viewing-edge]:hover .viewing-edge-hit, [data-viewing-edge]:focus-visible .viewing-edge-hit { stroke: Highlight; }
  [data-viewing-marker]:focus-visible .viewing-marker-hit { stroke: Highlight; }
  .viewing-reference-guide, .viewing-reference-dot { stroke: CanvasText; }
  [data-viewing-guide][data-selected="true"] { stroke: Highlight; }
  [data-viewing-marker][data-selected="true"] .viewing-reference-dot { fill: Highlight; stroke: Highlight; }
  .result-visual svg [data-viewing-marker][data-selected="true"] .viewing-reference-number { fill: HighlightText; }
  .viewing-reference-legend li[aria-current="true"] .viewing-reference-key { background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* Belt geometry uses the same quiet, expanded SVG targets as screen controls. */
[data-belt-handle], .belt-rim-hit { cursor: grab; touch-action: none; outline: none; }
[data-belt-handle^="top"], [data-belt-handle^="bottom"] { cursor: ns-resize; }
.belt-rim-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; vector-effect: non-scaling-stroke; }
.belt-handle-hit { fill: transparent; stroke: transparent; pointer-events: all; vector-effect: non-scaling-stroke; }
.belt-edge-dot { fill: var(--surface); stroke: var(--green); stroke-width: 2; }
[data-belt-handle]:hover .belt-handle-hit, [data-belt-handle]:focus-visible .belt-handle-hit { stroke: var(--link); stroke-width: 2; }
[data-belt-dragging], [data-belt-dragging] [data-belt-handle], [data-belt-dragging] .belt-rim-hit { cursor: grabbing; user-select: none; }
[data-belt-handle][aria-disabled="true"], [data-belt-rim][aria-disabled="true"] { pointer-events: none; cursor: default; }
@media (forced-colors: active) {
  .belt-edge-dot { fill: Canvas; stroke: CanvasText; }
  [data-belt-handle]:hover .belt-handle-hit, [data-belt-handle]:focus-visible .belt-handle-hit { stroke: Highlight; }
}

/* Direct manipulation keeps the existing graph and semantic numerical fields. */
[data-visual-handle] { cursor: ew-resize; touch-action: none; outline: none; }
[data-visual-handle][aria-orientation="vertical"] { cursor: ns-resize; }
.visual-control-hit { fill: transparent; stroke: transparent; pointer-events: all; vector-effect: non-scaling-stroke; }
.visual-control-dot { fill: var(--surface); stroke: var(--link); stroke-width: 2; vector-effect: non-scaling-stroke; }
.result-visual svg .visual-control-number { fill: var(--text); font-size: 12px; font-weight: 650; pointer-events: none; }
[data-visual-handle]:hover .visual-control-hit, [data-visual-handle]:focus-visible .visual-control-hit { stroke: var(--link); stroke-width: 2; }
[data-visual-dragging], [data-visual-dragging] [data-visual-handle] { cursor: grabbing; user-select: none; }
[data-visual-handle][aria-disabled="true"] { cursor: default; pointer-events: none; }
.visual-control-key { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--link); border-radius: 50%; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.visual-control-legend { margin-top: 20px; }
.formula-symbol { display: inline-block; margin-inline-start: 5px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: baseline; }
.formula-term, .formula-key-link { appearance: none; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.formula-term { display: inline; min-width: 24px; min-height: 28px; margin: 1px; padding: 1px 4px; border-color: var(--border-strong); border-radius: 4px; vertical-align: baseline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.formula-term:disabled { cursor: default; border-color: transparent; }
.formula-term:not(:disabled):hover, .formula-key-link:hover { background: color-mix(in srgb, var(--link) 14%, var(--surface)); }
.formula-term:focus-visible, .formula-term[data-formula-linked]:focus-visible, .formula-key-link:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.formula-key-link { display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; min-height: 44px; border-radius: 4px; padding: 10px 8px; }
.formula-key-link > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.formula-key { margin-top: 24px; font-size: 14px; }
.formula-key summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-weight: 650; }
.formula-key summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.formula-key ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; list-style: none; margin: 8px 0 0; padding: 0; }
.formula-key li { min-width: 0; border-radius: 4px; }
.formula-key [hidden] { display: none !important; }
.formula-accessible-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.formula-key .formula-symbol { margin: 0; flex-shrink: 0; }
.formula-term[data-formula-linked], .formula-key li[data-formula-linked] { color: var(--link); background: color-mix(in srgb, var(--link) 18%, var(--surface)); outline: 2px solid var(--link); outline-offset: 1px; }
.field[data-formula-linked] .formula-symbol, .formula-key li[data-formula-linked] .formula-symbol { color: var(--surface); background: var(--link); border-color: var(--link); }
.field[data-formula-linked] { scroll-margin-block: 112px; }
.calculator-fields .field[data-formula-linked] :is(input, select, textarea), .airport-finder-layout .field[data-formula-linked] input { outline: 2px solid var(--link); outline-offset: 3px; }
.calculator-fields .field[data-formula-linked] > label, .calculator-fields .field[data-formula-linked] > .field-label { color: var(--link); background: color-mix(in srgb, var(--link) 18%, var(--surface)); border-radius: 3px; outline: 2px solid var(--link); outline-offset: 2px; }
label.field[data-formula-linked] > span:first-child, .airport-finder-layout .field[data-formula-linked] > label { color: var(--link); background: color-mix(in srgb, var(--link) 18%, var(--surface)); border-radius: 3px; outline: 2px solid var(--link); outline-offset: 2px; }
.graph-handle-tooltip { position: fixed; width: max-content; box-sizing: border-box; z-index: 90; display: grid; gap: 3px; max-width: min(320px, calc(100vw - 24px)); padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 6px 24px rgb(0 0 0 / 12%); font-size: 14px; line-height: 1.45; pointer-events: auto; overflow-wrap: anywhere; }
.graph-handle-tooltip[hidden] { display: none; }
.graph-handle-tooltip strong { font-weight: 650; }
.graph-handle-tooltip > span { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .formula-key ul { grid-template-columns: minmax(0, 1fr); } }
/* Shared correspondence cues add no layout shift and preserve native focus/errors. */
.calculator-fields .field[data-visual-linked] > label, .calculator-fields .field[data-visual-linked] > .field-label { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.calculator-fields .field[data-visual-linked] input, .calculator-fields .field[data-visual-linked] select { outline: 2px solid var(--link); outline-offset: 3px; }
[data-visual-linked] > .visual-control-hit, [data-visual-linked] > .belt-handle-hit, [data-visual-linked] > .viewing-viewer-hit, [data-visual-linked] > .viewing-edge-hit, [data-visual-linked] > .viewing-marker-hit { stroke: var(--link); stroke-width: 2; }
[data-belt-rim][data-visual-linked] { stroke: var(--link); stroke-width: 3; }
.resistor-band[data-visual-linked] { stroke: var(--link); stroke-width: 3; }
.resistor-band-key[data-visual-linked], .viewing-distance-choice[data-visual-linked] { outline: 2px solid var(--link); outline-offset: 3px; }
@media (forced-colors: active) {
  .formula-symbol, .graph-handle-tooltip { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .formula-term { border-color: ButtonText; }
  .formula-term:disabled { border-color: transparent; color: GrayText; }
  .formula-term[data-formula-linked], .formula-key li[data-formula-linked] { background: Canvas; outline-color: Highlight; }
  .formula-term:focus-visible, .formula-key-link:focus-visible, .field[data-formula-linked] :is(input, select, textarea), .field[data-formula-linked] > :is(label, .field-label), label.field[data-formula-linked] > span:first-child { outline-color: Highlight; }
  .field[data-formula-linked] .formula-symbol, .formula-key li[data-formula-linked] .formula-symbol { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
  .formula-term[data-formula-linked], .formula-key li[data-formula-linked], .calculator-fields .field[data-formula-linked] > label, .calculator-fields .field[data-formula-linked] > .field-label { color: Highlight; }
  .calculator-fields .field[data-visual-linked] > label, .calculator-fields .field[data-visual-linked] > .field-label { color: Highlight; }
  .calculator-fields .field[data-visual-linked] input, .calculator-fields .field[data-visual-linked] select, .resistor-band-key[data-visual-linked], .viewing-distance-choice[data-visual-linked] { outline-color: Highlight; }
  [data-visual-linked] > .visual-control-hit, [data-visual-linked] > .belt-handle-hit, [data-visual-linked] > .viewing-viewer-hit, [data-visual-linked] > .viewing-edge-hit, [data-visual-linked] > .viewing-marker-hit, [data-belt-rim][data-visual-linked], .resistor-band[data-visual-linked] { stroke: Highlight; }
  .visual-control-dot { fill: Canvas; stroke: Highlight; }
  [data-visual-handle]:hover .visual-control-hit, [data-visual-handle]:focus-visible .visual-control-hit { stroke: Highlight; }
  .result-visual svg .visual-control-number { fill: CanvasText; }
}

/* Plate builder: standard equipment colors supplement explicit weight labels. */
.barbell-builder { margin-block: 1.5rem; }
.barbell-builder h3 { margin-block: 0 0.5rem; }
.barbell-plate-picker { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.barbell-plate-choice { grid-column: span 2; display: grid; justify-items: center; align-content: start; gap: 0.6rem; padding: 0.75rem 0.4rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); }
.barbell-plate-choice:nth-child(-n+4) { grid-column: span 3; }
@media (max-width: 1000px) { .barbell-plate-choice { grid-column: span 4; } }
@media (max-width: 640px) { .barbell-plate-picker .barbell-plate-choice { grid-column: span 6; } }
@media (max-width: 380px) { .barbell-plate-picker .barbell-plate-choice { grid-column: 1 / -1; } }
.barbell-plate-selected { border-color: var(--link); }
.barbell-plate-face { position: relative; touch-action: none; width: 82px; height: 82px; border: 3px solid color-mix(in srgb, var(--bb-plate) 70%, #000); border-radius: 50%; background: var(--bb-plate); color: var(--bb-text); display: flex; align-items: center; justify-content: center; font: inherit; font-weight: 750; box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--bb-text) 12%, transparent); cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.barbell-plate-face:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--bb-text) 22%, transparent), 0 4px 12px #0002; }
.barbell-plate-face:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
.barbell-plate-face:disabled { cursor: default; opacity: 0.65; }
.barbell-plate-face > span:first-child { position: absolute; inset-inline: 3px; top: 10px; font-size: 0.875rem; line-height: 1.2; }
.barbell-plate-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid #9da6ad; }
.barbell-plate-actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.barbell-plate-actions .btn { min-width: 44px; min-height: 44px; padding: 0.4rem; }
.barbell-plate-actions strong { min-width: 1.8ch; text-align: center; font-variant-numeric: tabular-nums; }
.barbell-plate-choice small { font-size: 0.75rem; color: var(--muted); text-align: center; }
.barbell-inventory { margin-block: 0.5rem; width: 100%; }
.barbell-inventory > summary { cursor: pointer; font-weight: 650; padding-block: 0.75rem; }
.barbell-inventory .cut-list { margin-top: 0.75rem; }
.barbell-color-red { --bb-plate: #b42c3a; --bb-text: #fff; }
.barbell-color-blue { --bb-plate: #205da8; --bb-text: #fff; }
.barbell-color-yellow { --bb-plate: #f1ca42; --bb-text: #18201e; }
.barbell-color-green { --bb-plate: #207245; --bb-text: #fff; }
.barbell-color-white { --bb-plate: #f3f2ed; --bb-text: #18201e; }
.barbell-color-iron { --bb-plate: #3c444d; --bb-text: #fff; }
.result-visual .barbell-loaded-plate { fill: var(--bb-plate); stroke: #26313d; stroke-width: 0.8; }
.result-visual .barbell-shaft { fill: #a8b1ba; stroke: #596572; stroke-width: 0.8; }
.result-visual .barbell-grip { fill: #64727e; }
@media (prefers-reduced-motion: reduce) { .barbell-plate-face { transition: none; } .barbell-plate-face:hover:not(:disabled) { transform: none; } }
@media (forced-colors: active) { .barbell-plate-face { forced-color-adjust: auto; border-color: ButtonText; } .barbell-plate-selected { outline: 2px solid Highlight; } .result-visual .barbell-loaded-plate { fill: Canvas; stroke: CanvasText; } }

.calculator-layout.barbell-layout { grid-template-columns: minmax(0, 1fr); }
.result-visual[data-visual-kind="plates"] svg { overflow: hidden; }
.result-visual .barbell-plate-control { cursor: pointer; outline: none; }
.result-visual .barbell-plate-control:is(:hover, :focus-visible) .barbell-loaded-plate { stroke: var(--link); stroke-width: 2; outline: none; filter: brightness(1.2); }
.result-visual .barbell-plate-control[data-plate-exiting] { pointer-events: none; }
@media (forced-colors: active) { .result-visual .barbell-plate-control:is(:hover, :focus-visible) .barbell-loaded-plate { stroke: Highlight; } }

.barbell-output { margin-top: 24px; }
.barbell-output h3 { margin: 28px 0 12px; font-size: 18px; }
.barbell-output > [role="status"] { margin: 0; min-height: 1lh; font-size: 14px; color: var(--muted); }
.barbell-output [data-result] { margin-bottom: 24px; }
.result-visual svg .barbell-plate-label { fill: var(--bb-text); font-size: 9px; font-weight: 750; pointer-events: none; }
.result-visual svg .barbell-plate-label-compact { font-size: 5px; }
.result-visual svg .barbell-measurement { font-size: 10px; }
.result-visual svg .barbell-centerline { fill: none; stroke: #a8b1ba; stroke-linecap: round; stroke-linejoin: round; }
.result-visual svg .barbell-drop-zone { fill: transparent; stroke: none; pointer-events: none; }
.barbell-load-key p { margin: 0.75rem 0 0.5rem; color: var(--muted); font-size: 0.875rem; }
.barbell-load-key ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.barbell-load-key li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.barbell-load-swatch { width: 10px; height: 18px; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--bb-plate); flex: 0 0 auto; }
@media (forced-colors: active) { .result-visual svg .barbell-plate-label { fill: CanvasText; } .result-visual svg .barbell-centerline { stroke: CanvasText; } }

.barbell-layout [data-result-visual] svg { touch-action: none; }
.barbell-dragging { user-select: none; }
.barbell-drag-ghost { position: fixed; z-index: 120; pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 8px 24px #0004; opacity: 0.9; }
.barbell-drag-source { opacity: 0.4; }
.barbell-drop-ready [data-result-visual] { outline: 3px solid var(--green); outline-offset: 3px; }
.barbell-drop-remove [data-result-visual] { outline: 3px dashed var(--coral); outline-offset: 3px; }

/* User-entered picker values must wrap on narrow screens. */
.random-picker-results { overflow-wrap: anywhere; user-select: text; }
.random-picker-results li { margin-block: .4rem; }
/* Physical optotype dimensions come only from ruler calibration, never responsive scaling. */
.eye-setup fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.eye-setup .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eye-limit { border-inline-start: 3px solid var(--link); padding-inline-start: 12px; }
.eye-ruler-space { width: 100%; overflow-x: auto; padding: 14px 4px; }
.eye-ruler { height: 1px; border-top: 2px solid var(--text); position: relative; flex-shrink: 0; }
.eye-ruler::before, .eye-ruler::after { content: ''; width: 1px; height: 16px; background: var(--text); position: absolute; top: -9px; }
.eye-ruler::before { left: 0; transform: translateX(-50%); }
.eye-ruler::after { right: 0; transform: translateX(50%); }
.eye-width-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.eye-width-controls .btn { padding: 0; min-height: 44px; justify-content: center; }
.eye-setup .eye-confirm { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.6; }
.eye-confirm input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; margin-top: 3px; accent-color: var(--link); }
.eye-stage { height: 256px; width: 100%; display: flex; justify-content: center; align-items: center; background: #fff; color: #000; border: 1px solid var(--border); border-radius: 8px; margin: 20px 0; overflow: hidden; forced-color-adjust: none; }
.eye-stage svg { display: block; max-width: none; max-height: none; flex: 0 0 auto; overflow: visible; stroke: none; }
.eye-stage svg[hidden] { display: none; }
.eye-stage:focus-visible, .eye-results:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.eye-response-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 360px; margin: 0 auto; }
.eye-direction { display: flex; flex-direction: column; justify-content: center; min-height: 60px; gap: 6px; overflow-wrap: anywhere; }
.eye-up { grid-column: 2; grid-row: 1; }
.eye-left { grid-column: 1; grid-row: 2; }
.eye-right { grid-column: 3; grid-row: 2; }
.eye-down { grid-column: 2; grid-row: 3; }
.eye-up svg { transform: rotate(-90deg); }
.eye-left svg { transform: rotate(180deg); }
.eye-down svg { transform: rotate(90deg); }
.eye-output [data-eye-status] { min-height: 3em; }
.eye-results { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 12px; overflow-wrap: anywhere; }
.eye-result-value { font-size: 22px; font-weight: 650; color: var(--text); }
/* Action availability is visible across the calculator platform, including exports. */
.calculator-layout .btn:disabled { background: var(--bg-soft); color: var(--muted); border-color: var(--border); opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }
.calculator-fields .calculator-toggle { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.calculator-toggle input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; padding: 0; margin: 0; accent-color: var(--link); }
.calculator-fields .calculator-input-range, .calculator-input-range { width: 100%; min-height: 44px; padding: 0; margin: 0; border: 0; box-shadow: none; accent-color: var(--link); cursor: pointer; }
.calculator-input-range:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.calculator-input-range:disabled { cursor: not-allowed; opacity: .5; }
.utility-design { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.utility-design > h3 { margin: 0 0 20px; font-size: 18px; }
.utility-design .calculator-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.utility-design [data-utility-field="logo"], .utility-design [data-qr-caption], .utility-design .calculator-note { grid-column: 1 / -1; }
.utility-design .code-frame-field { grid-column: 1 / -1; }
.utility-design .code-style-field { grid-column: 1 / -1; }
.code-style-swatch { width: 28px; height: 28px; flex: 0 0 28px; }
.code-frame-swatch { display: block; width: 28px; height: 28px; flex: 0 0 28px; border: 2px solid currentColor; }
.code-frame-rounded { border-radius: 8px; }
.code-frame-none { border: 0; }
@font-face { font-family: 'DSEG7 Classic'; src: url('/assets/fonts/DSEG7Classic-Regular-v046.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; }
.utility-digits[data-digital], .world-clock-time { font-family: 'DSEG7 Classic', ui-monospace, monospace; font-weight: 400; line-height: 1.55; letter-spacing: .025em; }
@media (max-width: 600px) { .utility-design .calculator-fields { grid-template-columns: minmax(0,1fr); } }
@media (forced-colors: active) { .calculator-layout .btn:disabled { background: Canvas; color: GrayText; border-color: GrayText; opacity: 1; } }

/* Registry totals stay separate from category labels and search-result announcements. */
.calculator-category-count { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 24px; margin-inline-start: auto; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calculator-collection .calculator-category-count { border-color: transparent; background: var(--link); color: #fff; }
:root[data-theme="dark"] .calculator-collection .calculator-category-count { background: color-mix(in srgb, var(--link) 45%, var(--bg)); }
.calculator-group > h3 > .calculator-category-count { align-self: center; min-width: 28px; margin-inline-start: 0; padding: 0 8px; font-size: 14px; line-height: 24px; letter-spacing: normal; }
@media (forced-colors: active) {
  :root[data-theme] .calculator-collection .calculator-category-count { border-color: Highlight; background: Highlight; color: HighlightText; }
}

@media (max-width: 1060px) {
  .mobile-legal-menu .calculators-menu-panel a > [data-category-label] { min-width: 0; white-space: normal; }
}