/* finesse · component: responsive calculator · register=product · tokens: inherited silver+system-blue */
.account-entry > .icon { display:none }
.home-drawing { order:-1 }
h1,h2,h3 { min-width:0;overflow-wrap:anywhere }
.receipt,.material-panel { scroll-margin-top:calc(var(--nav-h) + 16px) }

@media(max-width:850px) {
  input:not([type=checkbox]),select,textarea { font-size:16px }
  .material-editor input,.material-editor select { font-size:16px }
  .spec-disclosure summary,.source-specifications a { min-height:44px }
  .source-specifications a { display:inline-flex;align-items:center }
  .material-name { white-space:normal;overflow-wrap:anywhere;line-height:1.5 }
  .material-edit > span,.contact-options a > div,.receipt-top > div { min-width:0 }
  .row-action { width:44px;height:44px }
  .reference-edit,.usage-pick { min-height:44px }
  .reference-controls .search { max-width:none;width:100% }
  .materials .price-input input { font-size:16px }
}

@media(max-width:600px) {
  :root { --nav-h:64px }
  html { scroll-padding-top:calc(var(--nav-h) + 12px);scroll-padding-bottom:150px }
  .site-header { height:var(--nav-h);padding:8px 14px;gap:8px }
  .site-header .brand { gap:7px;min-width:0 }
  .site-header .brand strong { font-size:20px }
  .header-actions { gap:4px }
  .header-actions .language { width:96px;max-width:96px;padding:8px 2px;font-size:16px }
  .header-actions .account-entry { display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0!important;flex-shrink:0;background:var(--accent-soft);color:var(--accent) }
  .account-entry > .icon { display:block;width:19px;height:19px }
  .account-entry > span { display:none }
  .site-header nav { left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));height:62px;padding:4px;border-radius:24px }
  .site-header nav button { min-height:52px;border-radius:20px;font-size:11px;gap:3px }
  .site-header nav .icon { width:20px;height:20px }
  .home-shell { padding-left:16px;padding-right:16px }
  .home-main { padding-top:22px }
  .home-intro { margin-bottom:20px }
  .home-intro h1 { font-size:30px;line-height:1.17;margin:10px 0 12px }
  .home-intro p { font-size:14px;line-height:1.6;margin:0 }
  .intro-label { font-size:11px;letter-spacing:.03em }
  .selector-panel { border-radius:20px }
  .family-tabs { padding:8px;gap:4px }
  .family-tabs button { padding:8px 10px;min-height:44px;white-space:nowrap;font-size:13px }
  .home-drawing { order:0;border:0;border-top:1px solid var(--line);padding:14px 18px }
  .home-preview-image { height:140px;padding:12px 0 }
  .home-selection { padding:18px }
  .home-selection > label { margin-bottom:7px }
  .home-selection select { min-height:48px;font-size:16px }
  .home-selection h2 { font-size:17px;line-height:1.45;margin:12px 0 }
  .home-selection .home-go { order:1;margin:0;min-height:48px;font-size:15px }
  .home-selection > p { order:2;font-size:13px;line-height:1.6;margin:14px 0 0 }
  .home-selection .selection-facts { order:3;margin:10px 0 0;gap:12px;font-size:12px }
  .home-selection > small { order:4;margin-top:10px;font-size:12px;line-height:1.6 }
  .home-bottom { gap:8px;padding:18px 0 }
  .home-bottom .text-link { min-height:44px }
  .main { padding:18px 14px 32px }
  .page-head { gap:12px;margin-bottom:18px }
  .back-home { min-height:32px;display:inline-flex;align-items:center;margin:0;font-size:13px }
  .page-head h1 { font-size:24px;margin-bottom:0 }
  .page-actions { grid-template-columns:auto minmax(0,1fr) auto;gap:6px }
  .page-actions .button { padding:10px 12px;font-size:13px }
  .calculator-toolbar { gap:12px;margin-bottom:16px }
  .cable-switch { display:grid;grid-template-columns:minmax(0,1fr);gap:6px }
  .cable-switch select { width:100%;min-height:48px;padding:10px 12px }
  .audience-bar { margin:0 }
  .audience-bar .segments button { padding:8px;min-height:44px;font-size:13px }
  .completion-notice { padding:14px;gap:8px;margin-bottom:16px }
  .completion-notice p { font-size:12px;line-height:1.6 }
  .completion-notice .button { min-height:44px;padding:8px 14px }
  .reference-version { display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 10px;margin-bottom:16px;font-size:12px }
  .reference-version > div { flex-basis:100%;gap:3px }
  .reference-version .text-link { min-height:44px;font-size:12px;padding:7px 10px }
  .calculation-overview { gap:14px;margin-bottom:18px }
  .selected-cable { padding:16px;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:start }
  .selected-cable:has(.spec-disclosure[open]) { grid-template-columns:minmax(0,1fr) }
  .selected-diagram { width:88px;height:106px;padding:5px }
  .selected-cable h2 { font-size:15px;margin:5px 0;line-height:1.45 }
  .selected-cable p { font-size:12px;line-height:1.6 }
  .spec-disclosure { margin-top:4px }
  .spec-disclosure summary { font-size:12px;line-height:1.5;gap:6px }
  .receipt { padding:18px }
  .receipt .big-cost { margin:8px 0 16px;gap:6px }
  .receipt #main-total { font-size:36px }
  .receipt-calculation { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px }
  .receipt-calculation strong { font-size:19px;line-height:1.5 }
  .receipt .length-control input { width:100%;min-width:0;min-height:46px }
  .receipt-disclaimer { line-height:1.6;font-size:12px }
  .material-panel > .panel-heading { padding:18px 16px 14px;align-items:flex-start;gap:8px }
  .panel-heading p { font-size:13px;line-height:1.6 }
  .section-meta { font-size:11px;padding-top:3px }
  .materials thead tr { padding:10px 16px;justify-content:space-between }
  .materials thead .price-heading { width:100%;justify-content:space-between }
  .materials .price-heading select { width:112px;min-height:44px }
  .materials tbody tr { padding:16px;gap:14px 12px }
  .materials tbody td:first-child { padding-right:36px!important }
  .materials .material-name { font-size:16px;line-height:1.4 }
  .materials .material-spec { font-size:13px;line-height:1.5 }
  .material-edit { gap:8px;padding:0;min-height:52px }
  .materials tbody td:nth-child(2),.materials tbody td:nth-child(3) { display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;font-size:12px }
  .materials tbody td:nth-child(3)::before { text-align:left }
  .materials tbody input,.materials tbody input.quantity { width:100%;min-height:46px;font-size:16px;padding:10px 12px;background:var(--inset);border:1px solid var(--line-strong);text-align:left }
  .usage-value { width:100%;min-height:46px;padding:10px 12px;justify-content:space-between;background:var(--inset);border:1px solid var(--line-strong);font-size:16px;overflow-wrap:anywhere }
  .usage-pick { width:auto;margin:0;align-self:flex-start;min-height:44px;padding:8px 0 }
  .materials tbody td:nth-child(4)::before { content:'Unit price';display:block;font-size:12px;color:var(--muted);text-align:left;margin-bottom:6px }
  html[lang^=zh] .materials tbody td:nth-child(4)::before { content:'材料单价' }
  .materials tbody td:nth-child(4) { align-self:start }
  .materials tbody .price-input { position:relative;min-width:0;display:block }
  .materials tbody .price-input input { width:100%;max-width:none;min-height:46px;padding:10px 45px 10px 12px;font-size:16px;text-align:left;border-color:var(--line-strong) }
  .price-input > span { position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:11px }
  .unit-label { margin-top:5px;font-size:12px }
  .materials tbody td:nth-child(5) { align-self:start;font-size:20px;overflow-wrap:anywhere;padding-top:0!important }
  .materials tbody td:nth-child(5)::before { font-size:12px;min-height:18px;margin:0 0 12px }
  .materials tbody td:nth-child(6) { right:8px;top:12px }
  .calculation-tag { font-size:11px;margin-top:6px }
  .table-foot { padding:12px 16px;flex-direction:column;align-items:stretch;gap:8px }
  .table-foot strong { text-align:right;border-top:1px solid var(--line);padding-top:12px;font-size:17px;white-space:normal;overflow-wrap:anywhere }
  .table-foot .text-link { justify-content:center }
  .below-calculation { margin-top:22px }
  .legend-row { display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:6px 8px }
  .legend-row .percent { grid-column:3;width:auto;font-size:12px }
  .legend-row strong { font-size:13px }
  .contact-card .button,.contact-card > a { width:100%;min-height:44px }
  .reference-controls { margin:18px 0 14px }
  #reference-results { overflow:visible;outline-offset:3px }
  .reference-table { display:block;min-width:0;width:100% }
  .reference-table thead { position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%) }
  .reference-table tbody { display:block }
  .reference-table tbody tr { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:18px 16px;border-bottom:1px solid var(--line) }
  .reference-table tbody tr:last-child { border:0 }
  .reference-table td,.reference-table td.num { display:block;border:0;padding:0;min-width:0;text-align:left;font-size:15px;line-height:1.5;overflow-wrap:anywhere }
  .reference-table td:first-child { grid-column:1/-1 }
  .reference-table td:first-child strong { font-size:16px }
  .reference-table td:not(:first-child)::before { content:attr(data-label);display:block;font-size:12px;color:var(--muted);margin-bottom:5px }
  .reference-table td.source-ref { grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;font-size:12px }
  .reference-table .reference-edit { display:inline-flex;min-height:44px;margin-top:6px;padding:8px 12px;background:var(--accent-soft);font-size:13px }
  .reference-note { line-height:1.65 }
  .mobile-total { display:none;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));padding:7px 12px;border-radius:18px;gap:8px }
  body.past-result .mobile-total { display:flex }
  .mobile-total > span { min-width:0;overflow-wrap:anywhere }
  .mobile-total strong { font-size:17px;line-height:1.3 }
  .mobile-total .button { min-height:44px;padding:8px 13px;flex-shrink:0 }
  body:has(input:not([type=checkbox]):focus,textarea:focus) :is(.site-header nav,.mobile-total) { visibility:hidden;pointer-events:none }
  .site-footer,.home-page .site-footer { padding-bottom:calc(94px + env(safe-area-inset-bottom,0px));margin-top:20px;gap:8px }
  body:has(.mobile-total) .site-footer { padding-bottom:calc(152px + env(safe-area-inset-bottom,0px)) }
  .site-footer a { min-height:44px }
  #toast { bottom:calc(146px + env(safe-area-inset-bottom,0px));width:max-content;max-width:calc(100vw - 28px) }
  body:has(dialog[open]) { overflow-y:hidden }
  dialog,#dialog:has(.material-editor) { width:calc(100vw - 16px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px));margin:auto;border-radius:22px;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;overscroll-behavior:contain;scroll-padding-bottom:85px }
  .dialog-head { position:sticky;top:0;z-index:2;background:var(--surface);padding:16px 16px 10px;border-bottom:1px solid var(--line) }
  .dialog-head h2 { font-size:17px;line-height:1.4;overflow-wrap:anywhere }
  .dialog-head button { flex-shrink:0;min-width:44px;width:44px;height:44px }
  .dialog-body { padding:16px }
  .dialog-body > p,.material-editor .editor-intro { font-size:14px;line-height:1.6 }
  .dialog-body .field { font-size:13px }
  .dialog-body :is(input:not([type=checkbox]),select,textarea) { font-size:16px;min-height:48px }
  .material-editor .form-grid { gap:16px }
  .editor-check,.optional-profile summary,.interest-picker summary { min-height:44px }
  .material-editor .dialog-actions { padding:12px 0 max(12px,env(safe-area-inset-bottom,0px));margin-bottom:-16px;bottom:-16px;gap:8px;border-top:1px solid var(--line);z-index:1 }
  .dialog-actions > .button { flex:1;min-height:46px;padding:10px 12px }
  .dialog-actions { gap:8px }
  .dialog-actions:has(.button:nth-child(3)) { flex-direction:column }
  .diagram-zoom { border:1px solid var(--line);padding:8px;overscroll-behavior-x:contain }
  .mobile-zoom-hint { font-size:13px!important }
  .contact-options a > .icon { flex-shrink:0 }
  .contact-options span { font-size:12px;overflow-wrap:anywhere }
  .account-price-list label,.price-review label { min-height:48px }
  .admin-tabs .button { min-height:44px }
}
@media(max-width:350px) {
  .site-header { padding-left:10px;padding-right:10px;gap:5px }
  .site-header .brand strong { font-size:18px }
  .site-header .brand-symbol { width:27px;height:27px }
  .site-header .brand { gap:5px }
  .header-actions { gap:2px }
  .header-actions .language { width:89px;max-width:89px }
  .home-intro h1 { font-size:28px }
  .home-main { padding-top:18px }
  .home-intro { margin-bottom:16px }
  .home-intro p { font-size:13px;line-height:1.5 }
  .home-selection { padding:15px }
  .home-selection .home-go { margin-top:12px }
  .home-selection h2 { order:2;font-size:16px;margin-bottom:0 }
  .page-actions .button { padding:10px;font-size:12px }
  .audience-bar .segments button { font-size:12px;gap:5px }
  .selected-cable { grid-template-columns:minmax(0,1fr) }
  .selected-diagram { width:100%;height:120px }
  .receipt #main-total { font-size:32px }
  .materials tbody tr { padding:14px;gap:12px 10px }
  .materials tbody .price-input input { padding-right:39px;padding-left:8px }
  .price-input > span { right:7px }
}