/*=========================================================
  KC-CALC — shared styles for the "super calculator" pages
  (LMTD, psychrometrics, vessel volume, ...).

  Same look as the spring calculators (navy frame, light panels,
  12px Roboto controls, tabbed Chart.js graphs, collapsible
  reference cards), kept in one cached file instead of a copy of
  the same ~300 lines of CSS inlined in every page.
=========================================================*/

/* ---------- calculator frame ---------- */
.kc-calc { margin: 0 auto; max-width: 58rem; background: #1d3f4b; border-radius: 20px; border: 3px solid rgb(67,67,67); padding-bottom: 0.5rem; }
.kc-calc * { box-sizing: border-box; }
.kc-calc .hdr { background: #eef3f5; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0.4rem 0.6rem; margin: 0.5rem; font-size: 24px; font-weight: 200; box-shadow: 0 3px 5px rgba(0,0,0,.4); border-radius: 10px; border: 2px solid rgb(67,67,67); text-align: center; }
.kc-calc .toolbar { background: #eef3f5; margin: 0 0.5rem 0.5rem; border-radius: 10px; border: 2px solid rgb(67,67,67); box-shadow: 0 3px 5px rgba(0,0,0,.4); padding: 5px 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kc-calc .tlabel { font-size: 12px; color: #555; font-weight: 400; margin-right: 2px; }
.kc-calc .tbtn { font-size: 13px; padding: 3px 10px; border-radius: 6px; border: 1.5px solid; cursor: pointer; font-family: inherit; font-weight: 400; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kc-calc .toolbar select { font-size: 13px; padding: 2px 6px; border-radius: 6px; border: 1.5px solid var(--kc-slate-line); background: #fff; height: 26px; font-family: inherit; }
.kc-calc .grp { background: #eef3f5; margin: 0 0.5rem 0.5rem; border-radius: 10px; border: 2px solid rgb(67,67,67); box-shadow: 0 3px 5px rgba(0,0,0,.4); padding: 6px 8px; }
.kc-calc .grp-title { font-size: 12px; font-weight: 600; color: #1a6475; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #c0c0c0; padding-bottom: 4px; margin-bottom: 6px; }
.kc-calc .grp-note { font-size: 12px; color: #5f6b70; margin: 6px 0 0; line-height: 1.45; }

/* ---------- option tiles (radio cards) ---------- */
.kc-calc .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.kc-calc .it { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 6px 6px 7px; border: 1.5px solid; border-radius: 8px; cursor: pointer; font-size: 12px; text-align: center; line-height: 1.25; }
.kc-calc .it input { position: absolute; opacity: 0; pointer-events: none; }
.kc-calc .it img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: #fff; border-radius: 5px; }
.kc-calc .it:focus-within { outline: 3px solid rgba(95,199,219,.6); outline-offset: 1px; }
.kc-calc .sub-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 8px; font-size: 12px; }
.kc-calc .sub-opts select { font-size: 12px; padding: 1px 4px; border-radius: 5px; border: 1.5px solid #434343; background: #fff; height: 22px; }
.kc-calc .sub-opts input { font-size: 12px; padding: 1px 4px; border-radius: 5px; border: 1.5px solid #434343; background: #fff; height: 22px; width: 70px; text-align: right; margin-left: 4px; }
.kc-calc .sub-opts > span:not([hidden]) { display: contents; }
.kc-calc .tiles.tiles-2 { grid-template-columns: repeat(2, minmax(140px, 210px)); }
.kc-calc .tiles.tiles-6 { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* ---------- property panel (label | input | unit rows) ---------- */
.kc-calc .prop-panel { background: #eef3f5; margin: 0 .5rem .5rem; border-radius: 10px; border: 2px solid #434343; box-shadow: 0 3px 5px rgba(0,0,0,.4); padding: 6px 8px; }
.kc-calc .prop-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
.kc-calc .prop-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 3px; display: flex; align-items: center; gap: 6px; }
.kc-calc .prop-col-title .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.kc-calc .prop-row { display: grid; grid-template-columns: 1fr auto minmax(46px, max-content); align-items: center; gap: 4px; padding: 3px 0; border-bottom: .5px solid #d0d0d0; }
.kc-calc .prop-row:last-child { border-bottom: none; }
.kc-calc .prop-row label, .kc-calc .prop-row .lbl { font-size: 12px; color: #333; }
.kc-calc .prop-row input, .kc-calc .prop-row select { font-size: 12px; padding: 1px 4px; border-radius: 4px; border: 1.5px solid #434343; background: #fff; color: #000; height: 22px; width: 110px; text-align: right; font-family: inherit; }
.kc-calc .prop-row select { text-align: left; }
.kc-calc .prop-row .span2 { grid-column: 2 / 4; width: auto; min-width: 0; }
.kc-calc .prop-row input:focus, .kc-calc .prop-row select:focus { outline: none; border-color: #1a6475; background: #e8f0f3; }
.kc-calc .prop-row input.computed { background: #e2ecef; font-weight: 600; color: #0f3d47; }
.kc-calc .prop-row .unit { font-size: 12px; color: #555; white-space: nowrap; }
.kc-calc .prop-cols.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-calc .data-area { width: 100%; min-height: 168px; font: 12px/1.5 ui-monospace, Consolas, monospace; border: 1.5px solid #434343; border-radius: 6px; padding: 6px 8px; resize: vertical; }
.kc-calc .data-area:focus { outline: none; border-color: #1a6475; background: #f4f9fa; }
.kc-calc .prop-row .unit select { width: auto; min-width: 70px; }
@media (max-width: 760px) { .kc-calc .prop-cols, .kc-calc .prop-cols.cols-2 { grid-template-columns: 1fr; } }

/* ---------- diagram panel ---------- */
.kc-calc .diagram { background: #fff; border-radius: 6px; padding: 4px; text-align: center; }
.kc-calc .diagram img { width: 100%; max-width: 640px; height: auto; display: inline-block; }
.kc-calc .diagram svg { width: 100%; max-width: 640px; height: auto; display: inline-block; }

/* ---------- strapping / data table inside a graph pane ---------- */
.kc-calc .strap-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 12px; }
.kc-calc .strap-bar input { font-size: 12px; padding: 1px 4px; border-radius: 5px; border: 1.5px solid #434343; background: #fff; height: 24px; width: 90px; text-align: right; margin: 0 4px; }
.kc-calc .strap-scroll { max-height: 420px; overflow: auto; background: #fff; border-radius: 6px; margin: 0 6px; }
.kc-calc .strap-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.kc-calc .strap-table th { position: sticky; top: 0; background: var(--kc-navy-2, #1d3f4b); color: #fff; font-weight: 600; padding: 6px 8px; text-align: right; white-space: nowrap; }
.kc-calc .strap-table td { padding: 3px 8px; text-align: right; border-bottom: 1px solid #e3eaed; }
.kc-calc .strap-table tbody tr:nth-child(even) td { background: #f4f8f9; }

/* ---------- results ---------- */
.kc-calc .res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.kc-calc .res-box { background: #fff; border: 1.5px solid #434343; border-left: 4px solid #1a6475; border-radius: 6px; padding: 5px 8px; }
.kc-calc .res-box.key { border-left-color: #5fc7db; background: #f4fbfd; }
.kc-calc .res-label { font-size: 11.5px; color: #5a6168; display: block; }
.kc-calc .res-val { font-size: 18px; font-weight: 700; color: #1a3a40; font-variant-numeric: tabular-nums; }
.kc-calc .res-val small { font-size: 12px; font-weight: 500; color: #5a6168; margin-left: 3px; }
.kc-calc .res-sub { font-size: 11.5px; color: #5f6b70; display: block; margin-top: 1px; }
.kc-calc .work { font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; background: #fff; border: 1.5px solid #c9d6da; border-radius: 6px; padding: 6px 10px; margin-top: 6px; white-space: pre-wrap; color: #22343b; overflow-x: auto; }

/* ---------- status ---------- */
.kc-calc .status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-calc .status-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: #333; line-height: 1.45; padding: 0; }
.kc-calc .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #aaa; flex-shrink: 0; margin-top: 4px; }
.kc-calc .status-dot.ok { background: #2a7a2a; }
.kc-calc .status-dot.warn { background: #cc7700; }
.kc-calc .status-dot.err { background: #cc2222; }

/* ---------- tabbed graphs ---------- */
.kc-calc .graph-banner { background: #eef3f5; margin: 0 0.5rem 0.5rem; border-radius: 10px; border: 2px solid rgb(67,67,67); box-shadow: 0 3px 5px rgba(0,0,0,.4); overflow: hidden; }
.kc-calc .graph-tab-row { display: flex; flex-wrap: wrap; border-bottom: 2px solid rgb(67,67,67); background: #e2ecef; }
.kc-calc .graph-tab { flex: 1 1 auto; padding: 6px 8px; font-size: 12px; font-weight: 500; color: #3a4a50; text-align: center; cursor: pointer; border: none; border-right: 1px solid #b0b0b0; background: transparent; font-family: inherit; }
.kc-calc .graph-tab:last-child { border-right: none; }
.kc-calc .graph-tab:hover { background: #eef3f5; color: #1a6475; }
.kc-calc .graph-tab.active { background: #eef3f5; color: #1a3a40; font-weight: 700; box-shadow: inset 0 -3px 0 #1a6475; }
.kc-calc .graph-content { padding: 8px; display: none; }
.kc-calc .graph-content.visible { display: block; }
.kc-calc .graph-canvas { position: relative; height: 360px; background: #fff; border-radius: 6px; }
.kc-calc .graph-note { font-size: 11.5px; color: #5f6b70; margin: 6px 2px 0; line-height: 1.45; }

/* ---------- footnote bar ---------- */
.kc-calc .bottom-bar { background: #eef3f5; margin: 0 0.5rem; border-radius: 10px; border: 2px solid rgb(67,67,67); box-shadow: 0 3px 5px rgba(0,0,0,.4); padding: 6px 10px; }
.kc-calc .bottom-bar p { font-size: 12px; color: #555; margin: 0 0 4px; font-weight: 400; }
.kc-calc .bottom-bar p:last-child { margin-bottom: 0; }

/* ---------- tooltip "i" ---------- */
.tooltip-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #1a6475; color: #fff; font-size: 9px; font-weight: 700; font-style: normal; cursor: default; flex-shrink: 0; line-height: 1; user-select: none; }
.tooltip-icon:focus + .tooltip-box, .tooltip-icon:hover + .tooltip-box { display: block; }
.tooltip-box { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; width: 240px; background: #1a3a40; color: #eee; font-size: 12px; line-height: 1.55; padding: 7px 10px; border-radius: 6px; border: 1px solid #3a6270; box-shadow: 0 3px 8px rgba(0,0,0,.4); z-index: 100; pointer-events: none; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal; }

/* ---------- lightbox for zoomable reference figures ---------- */
.ref-zoomable { cursor: zoom-in; transition: opacity .15s; }
.ref-zoomable:hover { opacity: .85; }
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 99999; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.lightbox-overlay.active { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.6); cursor: default; }
.lightbox-close { position: fixed; top: 16px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100000; }
.lightbox-close:hover { background: rgba(255,255,255,.3); }
.lightbox-caption { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; text-align: center; max-width: 80vw; pointer-events: none; }

/* ---------- reference guide (collapsible cards) ---------- */
.ref-wrapper { margin: 0 auto; max-width: 58rem; }
.ref-section-wrap { padding: 1rem 0.5rem 0.5rem; }
.ref-section-title { font-size: 16px; font-weight: 700; color: #1a6475; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; padding-left: 2px; }
.ref-card { background: #eef3f5; border: 2px solid rgb(67,67,67); border-radius: 10px; box-shadow: 0 3px 5px rgba(0,0,0,.4); margin: 0 0 1rem; overflow: hidden; }
.ref-card-header { background: #1d3f4b; padding: 8px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ref-card-header h2 { font-size: 13px; font-weight: 700; color: #eee; text-transform: uppercase; letter-spacing: 0.07em; margin: 0; flex: 1; }
.ref-card-header .ref-num { font-size: 12px; color: #5fc7db; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.ref-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; color: #5fc7db; }
.ref-card.collapsed .ref-chevron { transform: rotate(-90deg); }
.ref-card.collapsed .ref-body { display: none; }
.ref-body { padding: 14px 16px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.ref-body > * { min-width: 0; }
.ref-body.two-col { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
@media (max-width: 640px) { .ref-body.two-col { grid-template-columns: 1fr; } }
.ref-sub { font-size: 12px; font-weight: 700; color: #1a6475; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #c0c0c0; padding-bottom: 3px; margin-bottom: 6px; }
.ref-body p { font-size: 13px; color: #333; line-height: 1.65; margin: 0 0 8px; font-weight: 400; }
.ref-body p:last-child { margin-bottom: 0; }
.ref-body ul, .ref-body ol { font-size: 13px; color: #333; line-height: 1.7; padding-left: 18px; margin: 0 0 8px; }
.ref-body li { font-size: 13px; padding: 0; color: #333; }
.ref-body a { font-size: inherit; }
.ref-eq-block { background: #e2ecef; border: 1.5px solid rgb(67,67,67); border-radius: 6px; padding: 10px 16px 8px; margin: 6px 0 10px; overflow-x: auto; }
.ref-eq-tag { font-size: 12px; color: #1a6475; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; display: block; margin-bottom: 4px; }
.ref-eq-block mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; margin: .6em 0 !important; }
mjx-container { color: #1a3a40 !important; }
.ref-fig { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; margin: 4px 0; }
.ref-fig img { width: 100%; height: auto; display: block; background: #fff; border-radius: 6px; border: 1px solid #d3dee2; }
.ref-fig-label { font-size: 12px; font-weight: 600; color: #494949; text-transform: uppercase; letter-spacing: 0.05em; }
.ref-fig-caption { font-size: 12px; color: #5f5f5f; max-width: 460px; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.ref-table th { background: #e2ecef; border: 1px solid #bbb; padding: 4px 8px; font-weight: 600; color: #333; text-align: left; }
.ref-table td { border: 1px solid #ccc; padding: 3px 8px; color: #333; vertical-align: top; }
.ref-table tr:nth-child(even) td { background: #f4f7f8; }
.ref-table-caption, .ref-body p.ref-table-caption { font-size: 12px; color: #5f6b70; margin-top: 3px; font-style: italic; line-height: 1.5; }
.ref-body > .ref-span { grid-column: 1 / -1; width: 100%; max-width: 640px; justify-self: center; }
@media (max-width: 560px) { .ref-table th, .ref-table td { padding: 3px 4px; } .ref-table { font-size: 11.5px; } }
#citationIEEE, #citationAPA, #citationMLA, #citationHarvard { overflow-wrap: anywhere; }
.ref-callout { background: #e8f0f3; border-left: 3px solid #1a6475; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 12.5px; color: #1a3a40; line-height: 1.55; }
.ref-callout strong { color: #0f3d47; }
.ref-warn { background: #fff8e6; border-left: 3px solid #cc7700; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 12.5px; color: #5a3a00; line-height: 1.55; }
.full-col { grid-column: 1 / -1; }
.ref-faq dt { font-size: 13px; font-weight: 700; color: #1a3a40; margin-top: 10px; }
.ref-faq dt:first-child { margin-top: 0; }
.ref-faq dd { font-size: 13px; color: #333; line-height: 1.65; margin: 2px 0 0; }

/* ---------- progressive disclosure (toolbar checkboxes, "show all results") ---------- */
.kc-calc .tcheck { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: #1d3f4b; cursor: pointer; margin: 0 0 0 10px; user-select: none; }
.kc-calc .tcheck input { width: 15px; height: 15px; accent-color: #1a6475; cursor: pointer; margin: 0; }
.kc-calc:not(.show-adv) .adv-only, .kc-calc:not(.show-fc) .fc-only, .kc-calc:not(.show-more) .more-res { display: none !important; }
.kc-calc .more-toggle { display: block; margin: 8px auto 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #1a6475; background: #fff; border: 1.5px solid #1a6475; border-radius: 6px; padding: 4px 14px; cursor: pointer; }
.kc-calc .more-toggle:hover { background: #1a6475; color: #fff; }

@media print {
  .kc-calc .toolbar, .kc-calc .graph-tab-row { display: none; }
  .ref-card.collapsed .ref-body { display: grid; }
}