/* Quadcode tools: a single call position, explicit costs, inspectable payoff. */
:root { --positive: #63e2a4; --negative: #ff9b9b; }
h1, h2, h3, strong { font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; padding-block: 24px 32px; }
.hero h1 { max-width: 10em; font-size: clamp(48px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.hero-title > p { margin-top: 4px; color: var(--muted); font-size: 16px; line-height: 1.4; }
.hero-copy > p { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 27em; }
.hero .author-byline { margin-top: 24px; }
.hero .author-name, .hero .author-name a { font-size: 14px; }
.hero .author-name { flex-wrap: wrap; gap: 4px; }
.hero .author-byline p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 4px; }
.hero .author-linkedin { display: inline-flex; margin-left: 4px; }
.quick-guide { background: #fff; border-radius: 20px; padding-inline: 24px; margin-bottom: 16px; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.quick-guide > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 15px; gap: 24px; }
.quick-guide summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 180ms; }
.quick-guide[open] summary svg { transform: rotate(180deg); }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 8px 24px; }
.guide-grid h2 { font-size: 17px; line-height: 1.4; }
.guide-grid p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-top: 12px; }
.no-script { padding: 20px; background: #fff2d7; border-radius: 16px; margin-block: 16px; }
.calculator-grid { display: grid; grid-template-columns: 352px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.input-panel, .results-panel { border-radius: 24px; min-width: 0; }
.input-panel { padding: 20px 24px; background: #fff; align-self: start; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.panel-heading h2 { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.text-button { min-height: 44px; font-size: 14px; color: var(--muted); padding-block: 12px; }
.text-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.fields-grid, .settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.field { min-width: 0; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 28px; margin-bottom: 4px; }
.field-heading label { font-size: 14px; line-height: 1.4; }
.help-button { width: 24px; height: 28px; flex-shrink: 0; border-radius: 6px; color: var(--muted); font-size: 12px; position: relative; padding: 0; }
.help-button::before { content: ''; position: absolute; inset: 6px 4px; border: 1px solid currentColor; border-radius: 50%; }
.help-button:hover, .help-button[aria-expanded=true] { background: #e9ecf0; color: var(--ink); }
.field-tooltip { position: fixed; z-index: 250; width: min(300px, calc(100vw - 32px)); padding: 16px 20px; border-radius: 16px; background: #272729; color: #f7f7f8; box-shadow: 0 8px 32px #0002; font-size: 14px; line-height: 1.65; }
.money-control { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: #f3f4f6; border-radius: 12px; }
.money-control > span { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.money-control input { width: 100%; min-width: 0; padding: 11px 0; border: 0; background: transparent; outline: 0; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.money-control:has(input:focus-visible), .target-control:has(input:focus-visible) { outline: 2px solid #cf2c30; outline-offset: 3px; }
.money-control:has(input[aria-invalid=true]), .target-control:has(input[aria-invalid=true]) { box-shadow: inset 0 0 0 1px #b5232c; }
input::selection { background: #cbdced; color: #181818; }
.field-hint, .cost-detail { font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.field-error { font-size: 12px; line-height: 1.6; color: #a61625; margin-top: 8px; }
.field-error:empty, .target-error:empty, #share-status:empty { display: none; }
.settings-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; width: 100%; padding-block: 8px; font-size: 14px; margin-top: 8px; }
.settings-trigger small { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 4px; }
.settings-trigger svg, .calculate-button svg, .icon-button svg, .example-button svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
.settings-trigger:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.position-cost { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.position-cost dt { color: var(--muted); font-size: 13px; }
.position-cost dd { font-size: 22px; text-align: right; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cost-detail { margin-top: 8px; }
.calculate-button, .apply-button { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 24px; padding: 10px 16px; width: 100%; border-radius: 32px; color: #fff; background: #181818; font-size: 15px; margin-top: 16px; }
.calculate-button:hover, .apply-button:hover { background: #363638; }
.results-panel { background: var(--dark); color: #f7f7f8; padding: 16px 24px 20px; }
.result-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.result-heading h2 { font-size: 14px; color: #b5b5bd; line-height: 1.5; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; min-height: 44px; border-radius: 8px; color: #b5b5bd; font-size: 12px; }
.icon-button:hover { color: #fff; background: #272729; }
.profit { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.profit[data-size=medium] { font-size: clamp(28px, 3.4vw, 48px); }
.profit[data-size=long] { font-size: clamp(20px, 2.5vw, 32px); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.result-context { font-size: 13px; color: #b5b5bd; line-height: 1.6; margin-top: 4px; }
.result-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block: 8px; }
.result-facts dt { color: #b5b5bd; font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
.result-facts dd { font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-facts small { color: #b5b5bd; font-size: 12px; line-height: 1.6; display: block; margin-top: 4px; }
.result-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.mode-control { display: flex; flex-wrap: wrap; gap: 4px; }
.mode-control button { min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: #252527; color: #b5b5bd; }
.mode-control button[aria-pressed=true] { background: #eeeef1; color: #181818; }
.mode-control button:hover { background: #3b3b3e; color: #fff; }
.mode-control button[aria-pressed=true]:hover { background: #dcdce1; color: #181818; }
.early-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block: 8px 16px; }
.early-summary p { font-size: 13px; line-height: 1.6; }
.early-summary small { display: block; font-size: 12px; color: #b5b5bd; }
.early-summary button { font-size: 12px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; color: #b5b5bd; }
.view-heading { margin-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.view-tabs { display: flex; gap: 4px; }
.view-tabs button { padding: 8px 12px; min-height: 44px; border-radius: 8px; color: #b5b5bd; font-size: 12px; }
.view-tabs button[aria-selected=true] { background: #303033; color: #fff; }
.view-tabs button:hover { color: #fff; }
#chart-container { --payoff-height: 196px; width: 100%; margin-top: 4px; min-height: var(--payoff-height); }
#payoff-chart { display: block; width: 100%; height: var(--payoff-height); touch-action: pan-y; cursor: crosshair; }
.plot-grid { stroke: #2c2c2f; stroke-width: 1; }
.zero-line { stroke: #777780; }
.plot-label { font: 12px 'Suisse Intl', Arial, sans-serif; fill: #b5b5bd; }
.plot-marker, .plot-cursor { stroke: #7b7b84; stroke-width: 1; stroke-dasharray: 3 5; }
.plot-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.positive-line { stroke: var(--positive); }
.negative-line { stroke: var(--negative); }
.plot-baseline { fill: none; stroke: #92929b; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.plot-point { fill: var(--positive); stroke: #161616; stroke-width: 2; }
.negative-point { fill: var(--negative); }
.chart-legend { display: flex; gap: 24px; flex-wrap: wrap; color: #b5b5bd; font-size: 12px; margin-top: 4px; }
.chart-legend span { display: flex; align-items: center; gap: 8px; }
.chart-legend i { width: 20px; border-top: 2px solid var(--positive); }
.chart-legend .baseline-key { border-top: 2px dashed #92929b; }
.scenario-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; flex: 1 1 300px; min-width: 0; }
.target-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.target-heading label { font-size: 13px; color: #b5b5bd; }
.target-control { display: flex; align-items: center; gap: 6px; width: 96px; min-height: 44px; background: #272729; border-radius: 12px; padding: 0 12px; color: #b5b5bd; }
.target-control input { background: transparent; border: 0; outline: 0; color: #fff; min-width: 0; width: 100%; padding: 10px 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.target-error { flex-basis: 100%; order: 1; font-size: 12px; line-height: 1.6; color: #ffb9be; margin-top: 8px; }
#price-slider { appearance: none; flex: 1 1 104px; min-width: 104px; height: 44px; background: transparent; margin: 0; padding: 0; cursor: ew-resize; }
#price-slider::-webkit-slider-runnable-track { height: 3px; background: #55555c; border-radius: 4px; }
#price-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border: 0; border-radius: 50%; background: #f7f7f8; }
#price-slider::-moz-range-track { height: 3px; background: #55555c; border-radius: 4px; }
#price-slider::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #f7f7f8; }
.value-explanation { font-size: 13px; line-height: 1.65; color: #d7d7dc; font-variant-numeric: tabular-nums; }
.chart-note, .table-context { font-size: 12px; line-height: 1.65; color: #b5b5bd; margin-top: 8px; }
.result-error { padding: 16px; background: #352327; border-radius: 12px; color: #ffb9be; font-size: 13px; line-height: 1.6; margin-top: 24px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 12px; }
th { font-weight: 400; color: #b5b5bd; }
td, th { padding: 12px 8px; text-align: right; white-space: nowrap; }
td:first-child, th:first-child { text-align: left; }
tbody tr { border-bottom: 1px solid #303033; }
.table-scroll { overflow: auto; max-height: 320px; border-radius: 8px; margin-top: 8px; scrollbar-color: #595960 #272729; }
.table-scroll thead { position: sticky; top: 0; z-index: 3; background: #202022; }
.table-scroll tr > :first-child { position: sticky; left: 0; z-index: 1; background: #161616; padding-right: 16px; }
.table-scroll thead tr > :first-child { z-index: 4; background: #202022; }
.table-scroll .selected-row > * { background: #29292d; }
.table-scroll .expiry-cell { border-left: 1px solid #424248; }
.calculator-notes { display: flex; justify-content: space-between; gap: 48px; margin-block: 16px 48px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.calculator-notes p { max-width: 78ch; }
.calculator-notes a { text-decoration: underline; text-underline-offset: 4px; flex-shrink: 0; }
#share-status { color: var(--muted); margin-top: 16px; }
#share-fallback label { display: block; font-size: 14px; margin-block: 8px; }
#share-url { width: 100%; border: 0; padding: 12px; border-radius: 8px; font-size: 16px; }
.explanation-section, .method-section { padding-block: 48px 72px; }
.section-intro, .example-grid, .faq-section, .author-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.section-intro h2, .faq-section > h2, .author-section > h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; letter-spacing: -.025em; max-width: 11em; }
.section-intro p, .example-grid p, .faq-list p, .author-card p { font-size: 17px; color: var(--muted); line-height: 1.7; }
.section-intro p + p { margin-top: 20px; }
.section-intro h3 { font-size: 20px; line-height: 1.4; margin-block: 32px 12px; }
.section-intro h3:first-child { margin-top: 0; }
.section-intro .formula { color: var(--ink); font-size: 24px; line-height: 1.5; margin-block: 16px; }
.method-sources { margin-top: 24px; }
.method-sources summary { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; padding-block: 12px; }
.method-sources a { text-decoration: underline; text-underline-offset: 4px; }
.method-sources p { font-size: 14px; line-height: 1.8; margin-top: 12px; }
.section-intro .updated { font-size: 13px; margin-top: 32px; }
.updated time { margin-left: 8px; color: var(--ink); }
.example-band { background: var(--dark); color: #f7f7f8; padding-block: 64px; }
.example-grid h2 { font-size: 48px; line-height: 1.15; letter-spacing: -.025em; }
.example-grid p { color: #b5b5bd; margin-top: 24px; }
.example-table table { font-size: 17px; }
.example-table td, .example-table th { padding-block: 16px; }
.example-table th { text-align: left; }
.example-table tbody th { color: #f7f7f8; }
.example-table p { font-size: 14px; }
.example-button { display: inline-flex; align-items: center; gap: 24px; background: #f7f7f8; color: #181818; border-radius: 32px; padding: 12px 20px; min-height: 48px; font-size: 15px; margin-top: 32px; }
.example-button:hover { background: #dcdce1; }
.method-section { padding-block: 80px; }
.faq-section { padding-block: 24px 80px; }
.faq-list details { padding: 20px 0; border-bottom: 1px solid #dce0e5; }
.faq-list details:first-child { padding-top: 0; }
.faq-list summary { position: relative; padding-right: 32px; min-height: 44px; font-size: 19px; line-height: 1.5; }
.faq-list summary::after { content: '+'; position: absolute; right: 0; top: 0; font-size: 24px; color: var(--muted); }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { margin-top: 16px; font-size: 16px; }
.faq-list a { text-decoration: underline; text-underline-offset: 4px; }
.author-section { padding-block: 32px 64px; }
.author-card { display: flex; align-items: flex-start; gap: 24px; }
.author-card > img { border-radius: 50%; object-fit: cover; object-position: center 20%; width: 80px; height: 80px; flex-shrink: 0; }
.author-card h3 { font-size: 24px; line-height: 1.3; }
.author-card p { margin-top: 12px; font-size: 16px; }
.author-links { display: flex; gap: 16px 24px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; }
.author-links a { text-decoration: underline; text-underline-offset: 4px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: 32px; color: var(--muted); font-size: 13px; }
.site-footer img { display: block; width: 140px; height: auto; }
.site-footer > div { display: flex; gap: 24px; }
.site-footer a:hover { text-decoration: underline; }
.settings-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 28px; padding: 32px; color: var(--ink); background: #fff; }
.settings-dialog::backdrop { background: #0007; }
.settings-dialog .panel-heading { margin-bottom: 16px; }
.close-button { width: 44px; height: 44px; border-radius: 50%; background: #f3f4f6; font-size: 28px; flex-shrink: 0; }
#settings-description, .dialog-note { font-size: 13px; line-height: 1.65; color: var(--muted); }
.settings-dialog h3 { font-size: 17px; margin-block: 24px 8px; }
.settings-fields { gap: 16px; }
.dialog-note { margin-top: 24px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px; }
.dialog-actions button { min-height: 48px; padding: 12px 20px; border-radius: 32px; font-size: 14px; }
.dialog-actions .apply-button { width: auto; margin: 0; }
html:has(.settings-dialog[open]) { overflow: hidden; }
.header-demo { background: #e60019; }
.header-demo:hover { background: #c70214; }
@media (max-width: 1200px) { .header-bar { gap: 20px; } .primary-nav { gap: 16px; } }
@media (max-width: 1023px) { :root { --page-gutter: 32px; --header-height: 96px; } .header-container { padding-inline: 32px; } .primary-nav, .solutions-nav { display: none; } .header-bar { gap: 16px; } .header-bar > .header-burger { display: inline-flex; } }
@media (max-width: 1023px), (pointer: coarse) { .field-heading { min-height: 44px; } .help-button { width: 44px; height: 44px; } .help-button::before { inset: 14px; } }
@media (max-width: 580px) { .header-actions { display: none; } .header-bar { justify-content: space-between; } }
@media (max-width: 1199px) { .calculator-grid { grid-template-columns: 320px minmax(0, 1fr); } .input-panel, .results-panel { padding-inline: 20px; } .result-facts dd { font-size: 20px; } }
@media (min-width: 768px) and (max-width: 1023px) { .calculator-grid { grid-template-columns: 1fr; } .input-panel { display: grid; grid-template-columns: 160px 1fr; column-gap: 32px; } .input-panel .panel-heading { align-self: start; } .hero { gap: 32px; } }
@media (max-width: 767px) {
  :root { --page-gutter: 20px; }
  .header-container { padding: 12px 20px 16px; }
  .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 24px 32px; }
  .hero h1 { font-size: 44px; max-width: 10em; }
  .hero-copy > p { font-size: 18px; }
  .hero .author-byline { margin-top: 20px; }
  .calculator-grid { grid-template-columns: 1fr; }
  .input-panel, .results-panel { border-radius: 24px; padding: 24px; }
  .panel-heading { margin-bottom: 8px; }
  .fields-grid { gap: 12px; }
  .profit { font-size: clamp(32px, 10vw, 48px); }
  .profit[data-size=medium] { font-size: clamp(24px, 7vw, 36px); }
  .profit[data-size=long] { font-size: clamp(18px, 5.4vw, 24px); }
  .result-facts { grid-template-columns: 1fr; gap: 12px; margin-block: 20px; }
  .result-facts > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 16px; }
  .result-facts dd { font-size: 20px; white-space: nowrap; }
  .result-facts dt { margin: 0; font-size: 13px; }
  .result-facts small { grid-column: 1/-1; margin-top: 4px; }
  .result-facts > .long-amount { display: block; }
  .result-facts > .long-amount dt { margin-bottom: 8px; }
  .mode-control { gap: 4px; }
  .mode-control button { padding-inline: 12px; font-size: 12px; }
  #chart-container { margin-inline: -12px; width: calc(100% + 24px); }
  .target-heading { flex: 1 1 auto; }
  .target-control { flex-shrink: 0; }
  .view-tabs button { padding-inline: 8px; }
  .icon-button { padding-inline: 4px; }
  .guide-grid { grid-template-columns: 1fr; gap: 24px; }
  .quick-guide { padding-inline: 20px; }
  .guide-grid p { margin-top: 8px; }
  .calculator-notes { flex-direction: column; gap: 12px; margin-bottom: 32px; }
  .section-intro, .example-grid, .faq-section, .author-section { grid-template-columns: 1fr; gap: 24px; }
  .section-intro h2, .faq-section > h2, .author-section > h2, .example-grid h2 { font-size: 36px; }
  .explanation-section { padding-block: 32px 48px; }
  .example-band { padding-block: 48px; }
  .example-grid p { margin-top: 16px; }
  .example-table table { font-size: 15px; }
  .method-section { padding-block: 48px; }
  .section-intro .formula { font-size: 20px; }
  .faq-section { padding-bottom: 48px; }
  .author-section { padding-bottom: 32px; }
  .author-card { gap: 16px; }
  .site-footer { flex-wrap: wrap; gap: 24px; }
  .site-footer > div { width: 100%; }
  .header-burger { min-height: 44px; }
  .table-scroll { margin-inline: -8px; }
}
@media (max-width: 400px) { .input-panel, .results-panel { padding: 20px; } .fields-grid { column-gap: 12px; } .settings-dialog { padding: 24px 20px; } .settings-fields { gap: 16px 12px; } .dialog-actions { gap: 8px; } .early-summary { align-items: start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

@media (min-width: 1024px) and (max-height: 740px) {
  .results-panel { padding-top: 12px; }
  .result-facts { margin-block: 4px; }
  #chart-container { margin-top: 0; }
}

.result-heading h2, .result-facts dt, .result-facts small, .result-context,
.target-heading label, .mode-control button, .view-tabs button, .early-summary p,
.early-summary button, .chart-legend, .value-explanation, .table-context { font-size: 14px; }
.profit { font-size: clamp(32px, 3.4vw, 44px); }
.panel-heading h2 { flex: 1 1 auto; }
.position-cost { margin-top: 4px; }
.position-cost dt { font-size: 14px; }
.settings-trigger small { font-size: 14px; }
.plot-label { font-size: 14px; }
#chart-container { --payoff-height: 224px; touch-action: pan-y; }
@media (min-width: 1024px) and (max-height: 740px) {
  #chart-container { --payoff-height: 212px; }
}
#chart-container:empty { min-height: 0; }
.scenario-period { display: none; }
.scenario-period select {
  min-height: 44px;
  max-width: 100%;
  padding: 8px;
  color: #f7f7f8;
  background: #272729;
  border: 1px solid #686870;
  border-radius: 8px;
  font: inherit;
  color-scheme: dark;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .calculator-grid { grid-template-columns: minmax(280px, .85fr) minmax(0, 1fr); }
  .input-panel { display: block; }
  .form-actions { gap: 4px 8px; }
  .result-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .input-panel, .results-panel { padding-block: 12px 16px; }
  .result-facts { margin-block: 12px; }
  .scenario-period { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; margin-top: 8px; }
  .table-scroll td, .table-scroll th { font-size: 14px; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .field-heading { min-height: 32px; }
  .help-button { width: 32px; height: 32px; }
  .help-button::before { inset: 8px; }
}