/* Shared skin for the NSWC-11 reliability calculators (bearings, gears, shafts, drives, couplings).
   Same look as the other NSWC-11 pages: dark card, light group panels, reference cards, tooltips. */
/* ── Reference section shell (same as NSWC-11StaticSeal) ─── */
.ref-wrapper { margin: 0 auto; max-width: 62rem; font-family: "Roboto","Roboto Fallback", Arial, sans-serif; }
.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 { overflow-x: auto; }
.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; }
.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; }
/* the site sets ul li to the 20px body size and weight, which overrode the card's 13px */
.ref-body li { font-size: inherit; font-weight: 400; color: inherit; padding: 0 0 0 2px; }
.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; font-family: "Roboto","Roboto Fallback", Arial, sans-serif; display: block; margin-bottom: 4px; }
mjx-container { color: #1a3a40 !important; margin: 0; }
mjx-container[jax="SVG"][display="true"] { margin: 0.7em 0 !important; }
mjx-container[jax="SVG"] { margin: 0 !important; }
.ref-callout { background: #e8f0f3; border-left: 3px solid #1a6475; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 12px; color: #1a3a40; line-height: 1.55; }
.ref-callout strong { color: #3a6270; }
.ref-warn { background: #fff8e6; border-left: 3px solid #cc7700; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 12px; color: #5a3a00; line-height: 1.55; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 6px 0; }
.ref-table th { background: #e2ecef; border: 1px solid #bbb; padding: 4px 8px; font-weight: 600; color: #444; 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 { font-size: 12px; color: #5f6b70; margin-top: 3px; font-style: italic; }
/* A static explanatory figure in the prose sections of a calculator page */
.kc-fig { margin: 14px 0 18px; padding: 10px 12px 8px; background: #fff; border: 1.5px solid #c8d0da; border-radius: 8px; text-align: center; }
.kc-fig img { display: block; width: 100%; height: auto; }
.kc-fig figcaption { font-size: 13px; color: #4a5560; margin-top: 8px; line-height: 1.5; text-align: left; }
.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; }
.full-col { grid-column: 1 / -1; }
.ref-chart-wrap { height: 220px; position: relative; margin: 4px 0 2px; background: #fff; border: 1px solid #1d3f4b; border-radius: 6px; padding: 6px 6px 2px; }

/* ── Calculator skin (same as NSWC-11StaticSeal / Spring) ── */
.calc-warn-box { background: #fff8e6; border-left: 3px solid #cc7700; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 0.8rem; color: #5a3a00; margin: 0.5rem; }
.calc-warn-box * { font-size: inherit; }
.calc-error-box { background: #fdecea; border-left: 3px solid #c0392b; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 0.8rem; color: #5a1a1a; margin: 0.5rem; }
.nswc-form { max-width: 72rem; background: #1d3f4b; border-radius: 20px; border: 3px solid rgb(67,67,67); padding: 0 0 0.5rem; }
.nswc-form .hdr2 { background:#eef3f5; display:flex; justify-content:center; align-items:center; text-align:center; gap:10px; padding:0.5rem 0.7rem; margin:0.5rem; font-size:22px; font-weight:200; line-height:1.2; box-shadow:0 3px 5px rgba(0,0,0,.4); border-radius:10px; border:2px solid rgb(67,67,67); font-family:"Roboto","Roboto Fallback",Arial,sans-serif; color:#1a3a40; }
.nswc-form .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:8px 11px 10px; }
.nswc-form .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:9px; }
.nswc-form .gco { display:grid; gap:9px 18px; }
.nswc-form .gco.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.nswc-form .gco.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.nswc-form .gco.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.nswc-form .fld { display:flex; flex-direction:column; gap:3px; min-width:0; }
.nswc-form .fld.full { grid-column: 1 / -1; }
.nswc-form .fld label { font-size:12px; color:#444; font-weight:400; line-height:1.3; }
.nswc-form .fld input, .nswc-form .fld select { font-size:13px; padding:3px 7px; border-radius:5px; border:1.5px solid rgb(67,67,67); background:#e2ecef; color:#000; width:100%; height:27px; font-family:"Roboto","Roboto Fallback",Arial,sans-serif; }
.nswc-form .fld input:focus, .nswc-form .fld select:focus { outline:none; border-color:#1a6475; background:#e8f0f3; }
.hint { font-size:11px!important; color:#5f6b70; line-height:1.3; }
@media (max-width:760px){ .nswc-form .gco.g2, .nswc-form .gco.g3, .nswc-form .gco.g4 { grid-template-columns:1fr; } }

/* Results */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 2px; }
.res-box { background: #fff; border: 1.5px solid rgb(67,67,67); border-left-width: 5px; border-radius: 7px; padding: 9px 12px; }
.res-box.good { border-left-color: #2e7d4f; }
.res-box.accent { border-left-color: #b3362b; }
.res-box .res-label { font-size: 0.74rem; color: #5a6168; line-height: 1.3; }
.res-box .res-value { font-size: 1.2rem; font-weight: 700; color: #1a3a40; margin-top: 4px; word-break: break-word; }
.nswc-form .mf-table { width:100%; border-collapse:collapse; font-size:12.5px; font-family:"Roboto","Roboto Fallback",Arial,sans-serif; background:#fff; }
.nswc-form .mf-table th { background:#1a6475; color:#fff; text-align:left; padding:4px 9px; border:1px solid rgb(67,67,67); font-weight:600; }
.nswc-form .mf-table td { padding:3px 9px; border:1px solid #b8c2c2; color:#222; }
.nswc-form .mf-table td:first-child { white-space:nowrap; font-weight:600; }
.nswc-form .mf-table td:last-child { text-align:right; font-family:monospace; }
/* a table whose value columns are all alike: the last one is not a right-aligned total */
.nswc-form .mf-table.mf-even td:last-child { text-align:left; font-family:inherit; }
.nswc-form .mf-table tr:nth-child(even) td { background:#eef3f4; }
.nswc-form .mf-table tr.mf-total td { background:#dfe7e9; font-weight:700; font-size:13.5px; border-top:2px solid rgb(67,67,67); }

/* Calculation steps (shown/hidden) */
details.nswc-details summary { cursor: pointer; color: #1a3a40; font-weight: 700; margin: 4px 0; }
.calc-steps { font-size: 0.82rem; color: #444; margin-top: 8px; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; background: #fff; }
.calc-steps > div { padding: 5px 10px; border-bottom: 1px dashed #ddd; }
.calc-steps > div:nth-child(even) { background: #f7f7f7; }
.calc-steps > div:last-child { border-bottom: none; }
.calc-steps .val { color: #b3362b; font-weight: 700; }

/* Reference tables on the explanation sections */
.nswc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 8px 0; }
.nswc-table th { background: #1d3f4b; color: #eee; border: 1px solid #24505f; padding: 5px 9px; text-align: left; font-weight: 700; }
.nswc-table td { border: 1px solid #ccc; padding: 4px 9px; color: #333; vertical-align: top; }
.nswc-table tr:nth-child(even) td { background: #f4f7f8; }
.fm-list { margin: 0; padding-left: 1.05em; }
.fm-list li { margin: 1px 0; }

/* Result-box explainer tooltips (same as NSWC-11Spring) */
.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: 50%; transform: translateX(-50%); width: 230px; 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; font-family: Roboto,"Roboto Fallback", Arial, sans-serif; white-space: normal; word-wrap: break-word; }
.tooltip-box::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a3a40; z-index: 100; }

/* Download button (matches MIL-HDBK-5 .tbtn) */
.tbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 6px; border: 2px solid #24505f; background: #f7fafb; color: #222; font-size: 13px; font-weight: 400; padding: 5px 14px; transition: filter 0.15s, transform 0.1s; line-height: 1.3; text-decoration: none; }
.tbtn:active { transform: scale(0.97); }

/* Unit tables where every row is an input (torque converter) */
.nswc-form .unit-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 12.5px; font-family: "Roboto","Roboto Fallback",Arial,sans-serif; }
.nswc-form .unit-table td { border: 1px solid #b8c2c2; padding: 2px 8px; color: #222; }
.nswc-form .unit-table .unit-tier td { background: #1a6475; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; padding: 4px 9px; }
.nswc-form .unit-table .unit-tier[data-tier="3"] td { background: #7b5ea7; }
.nswc-form .unit-table .unit-tier[data-tier="4"] td { background: #3c2a54; }
.nswc-form .unit-table .tc-name { width: 46%; }
.nswc-form .unit-table .tc-name label { margin: 0; font-weight: 400; cursor: pointer; }
.nswc-form .unit-table .tc-cell { width: 30%; padding: 1px 3px; }
.nswc-form .unit-table .tc-cell input { width: 100%; height: 26px; font-family: Consolas, "Courier New", monospace; font-size: 13px; padding: 2px 7px; border: 1.5px solid rgb(67,67,67); border-radius: 4px; background: #e2ecef; color: #000; }
.nswc-form .unit-table .tc-cell input:focus { outline: none; border-color: #1a6475; background: #fff; }
.nswc-form .unit-table .tc-nm { color: #5f6b70; font-size: 11.5px; font-family: Consolas, "Courier New", monospace; }
.nswc-form .unit-table tr.tc-active td { background: #e8f0f3; }
.nswc-form .unit-table tr.tc-active .tc-cell input { border-color: #b3362b; background: #fff; }
@media (max-width: 640px) { .nswc-form .unit-table .tc-nm { display: none; } .nswc-form .unit-table .tc-name { width: 55%; } }

/* secondary-unit text inside tables (two-unit results) */
.nswc-form .mf-table .tg-other { color: #5f6b70; font-size: 11px; }

/* Shaft and bore fit lookup: clickable fit tables */
.nswc-form .sbf-table tbody tr { cursor: pointer; }
.nswc-form .sbf-table tbody tr:hover td { background: #eef5f6; }
.nswc-form .sbf-table tbody tr.sbf-sel td { background: #d9ecef; }
.nswc-form .sbf-table td.sbf-use { text-align: left; font-family: "Roboto","Roboto Fallback",Arial,sans-serif; font-weight: 400; }
.nswc-form .sbf-table td:last-child { text-align: left; font-family: inherit; }
.nswc-form .sbf-limits td:nth-child(2), .nswc-form .sbf-limits td:nth-child(3) { text-align: right; font-family: monospace; }

/* The site sets p { margin-bottom: 0 }, so two paragraphs in a row ran together in the prose sections */
.section-content-wrap .text-start p + p,
.section-content-wrap .text-start ul + p { margin-top: 0.75em; }

/* Coefficient of friction lookup */
.nswc-form .fc-table { font-size: 12.5px; }
.nswc-form .fc-table th.fc-sortable { cursor: pointer; user-select: none; }
.nswc-form .fc-table th.fc-asc::after { content: " \25B2"; font-size: 0.7em; }
.nswc-form .fc-table th.fc-desc::after { content: " \25BC"; font-size: 0.7em; }
/* Headings never wrap. The materials column is capped, so the condition column takes the spare width instead. */
.nswc-form .fc-table thead th { white-space: nowrap; }
.nswc-form .fc-table thead th:first-child { width: 300px; }
.nswc-form .fc-table td.fc-mat { white-space: normal; font-weight: 600; min-width: 190px; max-width: 300px; }
.nswc-form .fc-table td.fc-cond { white-space: normal; font-family: inherit; text-align: left; min-width: 150px; }
.nswc-form .fc-table td.fc-num { text-align: center; white-space: nowrap; font-family: monospace; }
.nswc-form .fc-table td.fc-none { color: #8a9296; }
.nswc-form .fc-table td.fc-refcol { text-align: center; font-family: inherit; white-space: nowrap; }
.nswc-form .fc-table .fc-on { font-weight: 400; color: #5a6168; }
.nswc-form .fc-table .fc-mu { cursor: pointer; border-bottom: 1px dotted #1a6475; }
.nswc-form .fc-table .fc-mu:hover, .nswc-form .fc-table .fc-mu:focus { background: #d9ecef; outline: none; }
.fc-ref { font-size: 0.68em; margin-left: 2px; }
.fc-ref a { color: #1a6475; text-decoration: none; padding: 0 1px; font-size: inherit; }
/* the site sets every link to the 20px body size; keep links in the reference list at the list's size */
#fc-refs li { font-size: inherit; font-weight: 400; }
#fc-refs a { font-size: inherit; }
.fc-ref a:hover { text-decoration: underline; }
.nswc-form .fc-basis { display: block; font-size: 0.74em; font-weight: 400; margin-top: 2px; }
.nswc-form .fc-basis-orig { color: #1f6b3a; }
.nswc-form .fc-basis-std, .nswc-form .fc-basis-data, .nswc-form .fc-basis-text { color: #1a6475; }
.nswc-form .fc-basis-comp { color: #a0522d; }
.nswc-form .fc-note { font-size: 0.78em; font-weight: 400; color: #5a6168; margin-top: 3px; }
.fc-k-table td, .fc-k-table th { text-align: left; }
/* the small tables in the prose sections sit outside .nswc-form, so they need the table style spelled out */
.fc-k-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; margin: 6px 0 10px; }
.fc-k-table th { background: #1a6475; color: #fff; padding: 4px 9px; border: 1px solid rgb(67,67,67); font-weight: 600; }
.fc-k-table td { padding: 3px 9px; border: 1px solid #b8c2c2; color: #222; }
.fc-k-table tr:nth-child(even) td { background: #eef3f4; }
.nswc-form .fld label input[type=checkbox] { width: auto; height: auto; margin: 0 6px 0 0; vertical-align: middle; display: inline-block; }
#fc-refs li:target { background: #fff6d6; }

/* Roller chain strength */
.nswc-form .rc-table, .ref-body .rc-table { font-size: 12.5px; width: 100%; border-collapse: collapse; background: #fff; }
.ref-body .rc-table th { background: #1a6475; color: #fff; padding: 4px 8px; border: 1px solid rgb(67,67,67); text-align: center; font-weight: 600; }
.ref-body .rc-table td { padding: 3px 8px; border: 1px solid #b8c2c2; text-align: right; font-family: monospace; }
.ref-body .rc-table td:first-child { text-align: center; font-family: inherit; }
.rc-table td.rc-na { color: #8a9296; text-align: center; }
.rc-table .rc-mm { color: #5a6168; font-size: 0.9em; }
.nswc-form .rc-table td { text-align: right; font-family: monospace; }
.nswc-form .rc-table td:nth-child(1), .nswc-form .rc-table td:nth-child(2) { text-align: left; font-family: inherit; }
.nswc-form .rc-table tr.rc-hi td { background: #fff6d6; }

/* Numbered lists in the explanation text: same light weight as the paragraphs around them. */
.section-content-wrap .text-start > ol { margin: 0.5em 0 0.75em; padding-left: 1.6em; }
.section-content-wrap .text-start > ol > li { font-size: var(--p-font-size); font-weight: var(--font-weight-light); color: var(--p-color); padding-left: 4px; }

/* Friction page: one floating tooltip on the body, in the site's blue tooltip style (the table's scroll box would clip an inline one). */
.tooltip-box.fc-float-tip { position: fixed; bottom: auto; left: 0; top: 0; transform: none; width: auto; max-width: 270px; z-index: 2000; }
.tooltip-box.fc-float-tip::after { display: none; }
.fc-table th .tooltip-icon { margin-left: 4px; vertical-align: middle; background: #eef3f5; color: #1a6475; cursor: help; }
.fc-ref a { cursor: help; }

/* Segmented button group (one of several choices). Colours for rest, hover and selected come from site-chrome.css. */
.nswc-form .sq-seg, .kc-links-inherit .sq-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid rgb(67,67,67); border-radius: 6px; overflow: hidden; width: fit-content; }
.nswc-form .sq-seg button, .kc-links-inherit .sq-seg button { appearance: none; border: 0; border-right: 1px solid #8fa6ae; font: 600 13px/1 "Roboto","Roboto Fallback", Arial, sans-serif; padding: 9px 16px; cursor: pointer; }
.nswc-form .sq-seg button:last-child, .kc-links-inherit .sq-seg button:last-child { border-right: none; }