/* Shared styles for WireHarnessSizing.html and MIL-W-5088L.html */

.w5088 { max-width: 62rem; margin: 0 auto; text-align: left; }

/* ── notices ───────────────────────────────────────────────────────── */
.w-notice { border-left: 3px solid var(--section-title-color, #3a6270); background: #eef4f6; padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 0.8rem 0; font-size: 12px; line-height: 1.55; font-family: var(--body-font-family); }
.w-notice.warn { border-left-color: #c0562a; background: #f9ede8; }
.w-notice.ok { border-left-color: #2f7d4a; background: #e8f4ec; }
/* site.css sets font-size directly on the bare <p> (a,p,ul li{font-size:var(--p-font-size)}),
   which wins over the parent .w-notice's font-size no matter its specificity — an inherited
   value always loses to any rule that matches the element itself. Same fix as .section li
   in css/mil-hdbk-5.css and .spec-idcode-legend li above. */
.w-notice p { margin: 0 0 0.4rem; font-size: inherit; }
.w-notice p:last-child { margin-bottom: 0; }

/* ── spec page ─────────────────────────────────────────────────────── */
/* Headings and body copy match the sizing of .section-heading.lvl-0 / .section p
   in css/mil-hdbk-5.css (same family of digitized document), rather than a
   look of their own. MIL-W-5088L's own numbering runs as inline paragraphs
   (3.8.8.1, 3.8.8.1.1, ...) rather than nested subsection headings the way
   MIL-HDBK-5 is marked up, so only the six top-level sections and the three
   appendices get a heading element here; the run-in numbered paragraphs below
   them keep the spec's own bold-and-underlined inline style. */
.spec-body { font-size: 0.97rem; line-height: 1.6; }
.spec-body h2.spec-appendix { font-size: 1.35rem; text-align: center; margin: 3rem 0 1rem; padding: 1rem 0; border-top: 3px double #3a6270; border-bottom: 3px double #3a6270; letter-spacing: 0.04em; }
.spec-body h2.spec-appendix span { font-size: 1rem; font-weight: 500; }
.spec-body h3 { font-size: 1.2rem; font-weight: bold; text-transform: uppercase; margin: 2rem 0 0.75rem; }
.spec-body p { margin: 0 0 0.75rem; font-size: 0.97rem; text-align: left; }
.spec-body p[id] { scroll-margin-top: 5rem; }
.spec-body h3[id], .spec-body h2[id], .spec-body figure[id], .spec-body .hdbk-table-wrap[id], .spec-body .spec-example[id] { scroll-margin-top: 5rem; }
.spec-body .chg { color: #c0562a; font-weight: 700; margin-right: 0.2rem; }
.spec-body p.spec-key { background: #fffbe8; border-left: 4px solid #f0a500; padding: 0.5rem 0.8rem; border-radius: 0 4px 4px 0; }
.spec-body .spec-example { background: #f6fafb; border: 1px solid #c8d8de; border-radius: 6px; padding: 0.8rem 1rem; margin: 0.8rem 0; }
.spec-body .spec-list { margin: 0 0 0.8rem 0.5rem; padding-left: 1.6rem; }
.spec-body .spec-list li { margin-bottom: 0.45rem; }
.spec-body .spec-note { font-size: 0.86rem; color: #444; }
.spec-body .spec-erratum { background: #f9ede8; border-left: 4px solid #c0562a; padding: 0.5rem 0.8rem; border-radius: 0 4px 4px 0; }
.spec-body .spec-box { border: 1px solid #555; padding: 0.6rem 0.8rem; font-size: 0.9rem; margin: 1rem 0; }
.spec-body .spec-meta { display: flex; justify-content: space-between; font-size: 0.9rem; }
.spec-body .spec-titleblock { text-align: center; margin: 1rem 0 2rem; }
.spec-body .spec-titleblock p { text-align: center; }
.spec-body .spec-doc-title { font-size: 1.25rem; font-weight: 700; margin: 1.2rem 0; }
.spec-body .spec-inchpound { font-size: 0.8rem; letter-spacing: 0.15em; border: 1px solid #333; display: inline-block; padding: 0 0.4rem; }
.spec-body .spec-list-head { font-size: 0.95rem; font-weight: 700; margin: 1.4rem 0 0.2rem; }
.spec-body .spec-list-sub { font-size: 0.85rem; font-weight: 600; margin: 0.2rem 0 0.3rem 0.5rem; color: #3a6270; }
.spec-body .spec-blank { text-align: center; color: #777; font-style: italic; border: 1px dashed #bbb; padding: 1.2rem; margin: 1.5rem 0; }
.spec-body .spec-keywords { line-height: 1.5; margin-left: 1rem; }
.spec-body .spec-custodians { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; margin: 1.5rem 0; font-size: 0.92rem; }
.spec-body .spec-twocol { display: flex; gap: 1rem; flex-wrap: wrap; }
.spec-body .spec-twocol > table { flex: 1 1 14rem; }
.spec-body table.spec-inline { width: auto; margin: 0.5rem 0 1rem 1rem; }
.spec-body table.spec-reflist td:first-child { white-space: nowrap; font-weight: 600; width: 9.5rem; }
.spec-body table.spec-tableA td, .spec-body table.spec-tableB td { font-size: 0.8rem; }
.spec-body tr.pgrow td { background: #eef2f3 !important; color: #667; font-size: 0.7rem !important; text-align: right !important; padding: 0 8px !important; letter-spacing: 0.06em; text-transform: uppercase; }
.spec-body .spec-pre { background: #f4f4f0; border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem 0.8rem; font-size: 0.85rem; line-height: 1.5; display: block; width: fit-content; margin: 0.4rem 0 0.6rem; }

.spec-body .pgbreak { position: relative; margin: 1.6rem 0 0.8rem; height: 0; border-top: 1px dashed #b8c4c8; }
.spec-body .pgbreak { font-size: 0; }
.spec-body .pgbreak::after { content: attr(data-page); position: absolute; right: 0; top: -0.75rem; background: #fff; color: #7a8a90; font-size: 0.68rem; letter-spacing: 0.06em; padding: 0 0.5rem; }
.spec-body .pgbreak::after { content: "PAGE " attr(data-page); }
.spec-body.hide-pages .pgbreak { display: none; }

.spec-figure { margin: 1.5rem 0; }
.spec-figure .spec-fig-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; }
.spec-scan { margin: 0.5rem 0; text-align: center; }
.spec-scan img { max-width: 100%; height: auto; border: 1px solid #b9c5c9; background: #fff; }
.spec-svg { width: 100%; max-width: 40rem; height: auto; color: #1a2e38; display: block; margin: 0 auto; }
.spec-chartnote { font-size: 0.85rem; margin: 0.4rem 0; }
.spec-chartnote:empty { display: none; }
.spec-scan-details { margin: 0.5rem 0; }
.spec-scan-details summary { cursor: pointer; color: var(--section-title-color, #3a6270); font-weight: 600; font-size: 0.9rem; }
.spec-figure canvas { width: 100% !important; height: 480px !important; }

.spec-idcode { border: 1px solid #b9c5c9; border-radius: 6px; padding: 1rem; margin: 0.5rem 0 1rem; background: #fafcfc; }
.spec-idcode-code { display: flex; flex-wrap: wrap; gap: 0.35rem; font-family: "Courier New", monospace; font-size: 1.5rem; font-weight: 700; }
.spec-idcode-code span { border-bottom: 3px solid #3a6270; padding: 0 0.3rem; }
.spec-idcode-legend { list-style: none; margin: 0.8rem 0 0; padding: 0; font-size: 0.9rem; }
/* site.css sets font-size directly on the bare <li> element (a,p,ul li{font-size:var(--p-font-size)}),
   which overrides inheritance from the <ul> above no matter its own specificity (an inherited value
   always loses to any matching declared one). Same fix as .section li in css/mil-hdbk-5.css. */
.spec-idcode-legend li { font-size: inherit; }
.spec-idcode-legend li b { display: inline-block; min-width: 3.5rem; font-family: "Courier New", monospace; }

/* The contents list itself is .list-container > .quick-link (css/mil-hdbk-5.css),
   same as the MIL-HDBK-5 chapter pages; only the find/page-toggle toolbar below
   it is specific to this page. */
/* .group and .section-title-TOC come from css/mil-hdbk-5.css — same green/grey
   panel as the Table of Contents box above, so the search tools read as part
   of the same family of controls instead of a plain unstyled bar. */
.spec-toc-wrap { margin: 0.5rem 0 1rem; }
.spec-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.4rem 0 0; }
.spec-tools input[type=search] { flex: 1 1 16rem; padding: 0.4rem 0.6rem; border: 2px solid #4a5a4a; border-radius: 6px; font-size: 0.9rem; }
.spec-tools label { font-size: 0.85rem; white-space: nowrap; }
.spec-tools-calc { margin-left: auto; white-space: nowrap; }
.spec-body mark { background: #ffe58a; padding: 0 1px; }
.spec-hit-count { font-size: 0.85rem; color: #555; }
.spec-hidden { display: none !important; }

/* ── calculator page ───────────────────────────────────────────────────
   Sizing and layout language copied from ThreadStressCalculator.html (the
   "sq-" grid/panel tokens and small, dense font sizes) so this calculator
   reads as the same family of tool, not a one-off. Class names that
   js/wire-harness-ui.js writes into innerHTML (wbig, wchecks, wsteps, pill,
   total, hint, w-notice, wbtn) are kept as-is and just restyled smaller;
   everything else (wcalc/wcard/wfield/...) is free to change since it only
   ever appears in this file's own static markup. */
.wc-panel-title { font-size: 15px; font-weight: 700; color: #1C2227; margin: 1.4rem 0 0.5rem; font-family: var(--title-font-family); }
.wc-panel-title:first-child { margin-top: 0; }

/* The calculator itself breaks out of .w5088's 62rem prose width (shared with
   the spec page) into its own wide container, same pattern as
   ThreadStressCalculator.html's .sq-main — a grouped, 2-column input grid
   like that page's needs the extra room to avoid feeling cramped. */
.sq-main { max-width: 1500px; margin: 0 auto; padding: 0 20px 30px; }

.wpresets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.wpresets .hint { align-self: center; }
.wbtn { border: 2px solid #4a5a4a; background: #e4f0f3; border-radius: 6px; padding: 4px 12px; font-size: 12px; font-family: var(--body-font-family); cursor: pointer; }
.wbtn:hover { filter: brightness(0.95); }

.wcalc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: start; background: #6a746a; border: 3px solid rgb(67,67,67); border-radius: 18px; box-shadow: 0 3px 5px rgba(0,0,0,.4); padding: 20px; margin: 1rem 0; }
@media (max-width: 860px) { .wcalc { grid-template-columns: 1fr; } }

/* Grouped input sections, copied from ThreadStressCalculator.html's .tsc-
   tokens: each field group sits in its own bordered card with a colored
   heading, two cards per row on desktop. */
.tsc-section { background: var(--calc-background-color); border: 2px solid var(--calc-outline-color); border-radius: 10px; padding: 11px 13px; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
.tsc-h2 { font-family: var(--title-font-family); font-size: 13px; font-weight: var(--font-weight-bold); background: var(--section-title-color); color: #fff; padding: 5px 10px; border-radius: 6px; margin-bottom: 10px; }
.tsc-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 760px) { .tsc-input-grid { grid-template-columns: 1fr; } }
.wcard { background: #eeeeee; border: 2px solid rgb(67,67,67); border-radius: 10px; box-shadow: 0 3px 5px rgba(0,0,0,.4); overflow: hidden; }
.wcard-h { padding: 11px 16px; background: #fff; border-bottom: 2px solid rgb(67,67,67); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #1C2227; font-weight: 700; font-family: var(--title-font-family); }
.wcard-b { padding: 14px 16px; }
.wcard h3 { font-size: 13px; margin: 0 0 8px; font-weight: 700; font-family: var(--title-font-family); }

.wfield { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.wfield label { font-size: 12px; font-weight: 600; color: #444; font-family: var(--body-font-family); }
.wfield input, .wfield select { padding: 5px 7px; border: 1px solid #9aabb0; border-radius: 5px; font-size: 13px; width: 100%; background: #fff; color: #222; font-family: var(--body-font-family); }
.wfield input:focus, .wfield select:focus { outline: 2px solid var(--section-title-color); }
.wrow { display: flex; gap: 8px; }
.wrow > * { flex: 1 1 0; min-width: 0; }
.wgroup-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #3a6270; font-weight: 700; margin: 12px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #b9c5c9; }

/* .hint is referenced from wire-harness-ui.js template strings, not just static markup */
.hint { font-size: 11px; color: #666; font-weight: 400; line-height: 1.4; font-family: var(--body-font-family); }
.hint a { font-size: inherit; }
.wfield .hint { margin-top: 1px; }

/* Result summary tiles, copied from NSWC-11Spring.html's .res-box/tooltip
   system rather than the page's own one-off .wresult-head/.wbig. */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0 0 4px; }
.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: #b03a1a; }
.res-box .res-label { font-size: 0.74rem; color: #5a6168; line-height: 1.3; font-family: var(--body-font-family); }
.res-box .res-value { font-size: 1.2rem; font-weight: 700; color: #1a3a40; margin-top: 4px; word-break: break-word; font-family: var(--title-font-family); }
.res-box .res-value.bad { color: #b03a1a; }

.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: #61828a; 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, 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; }

.wchecks { list-style: none; margin: 8px 0 0; padding: 0; }
.wchecks li { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid #dfe6e8; font-size: 12px; font-family: var(--body-font-family); }
.wchecks .pill { flex: 0 0 auto; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 8px; color: #fff; }
.wchecks .pill.pass { background: #2f7d4a; }
.wchecks .pill.fail { background: #b03a1a; }
.wchecks .pill.na { background: #7a8a90; }

.wsteps { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; font-family: var(--body-font-family); }
.wsteps th, .wsteps td { border: 1px solid #ccd6d9; padding: 4px 8px; text-align: right; }
.wsteps th:first-child, .wsteps td:first-child { text-align: left; }
.wsteps thead th { background: #2c4a58; color: #fff; font-size: 11px; }
.wsteps tr.total td { font-weight: 700; background: #eef4f6; }
.wsteps + p.hint { margin-top: 6px; }

.wsizes { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--body-font-family); }
.wsizes th, .wsizes td { border: 1px solid #ccd6d9; padding: 3px 6px; text-align: right; white-space: nowrap; }
.wsizes thead th { background: #2c4a58; color: #fff; position: sticky; top: 0; font-size: 10.5px; }
.wsizes td:first-child { text-align: left; font-weight: 700; }
.wsizes tr.best td { background: #d4edda; }
.wsizes tr.ok td { background: #eef8f0; }
.wsizes td.no { color: #b03a1a; }
.wscroll { overflow-x: auto; border: 1px solid #ccd6d9; border-radius: 4px; }

/* Charts: fixed 2-column grid on desktop ("2x2" for the 4 figures), one
   column under ~860px. Previously repeat(auto-fit, minmax(19rem,1fr)) let 3
   narrow columns fit a normal-width screen, which is why Chart.js measured
   each canvas at only ~300px wide — a fixed 2-col track fixes that directly. */
.wcharts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1.2rem; }
@media (max-width: 860px) { .wcharts { grid-template-columns: 1fr; } }
.wchart { background: #eeeeee; border: 2px solid rgb(67,67,67); border-radius: 10px; box-shadow: 0 3px 5px rgba(0,0,0,.4); overflow: hidden; }
.wchart h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin: 0; padding: 10px 14px; background: #fff; border-bottom: 2px solid rgb(67,67,67); color: #1C2227; font-family: var(--title-font-family); }
.wchart-b { padding: 10px 12px; background: #fff; }
.wchart canvas { width: 100% !important; height: 340px !important; }

.wharness td input, .wharness td select { width: 100%; font-size: 12px; }
.wharness th, .wharness td { font-size: 12px; }

@media print {
  .spec-tools, .spec-toc-wrap details summary { display: none; }
  .spec-body .pgbreak { border-top: 1px solid #999; }
  .spec-scan img { max-height: 24cm; }
}

/* ── reference card system (shared with ThreadStressCalculator.html,
   SpringCompressionRound.html, etc — "How this works" uses the same
   numbered, collapsible card look as the rest of the site) ── */
.ref-section-wrap { padding: 1.5rem 0 0.5rem; }
.ref-section-title { font-size: 16px; font-weight: 700; color: #6a746a; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; padding-left: 2px; }
.ref-wrapper { font-family: "Roboto", Arial, sans-serif; }
.ref-card { background: #eee; 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: #6a746a; 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: #A3C3CD; 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: #A3C3CD; }
.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-sub { font-size: 12px; font-weight: 700; color: #61828A; 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; text-align: left; }
.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 { text-align: left; font-size: inherit; }
.ref-body a { font-size: inherit; }
.ref-eq-block { background: #d9d9d9; border: 1.5px solid rgb(67,67,67); border-radius: 6px; padding: 10px 16px 8px; margin: 6px 0 10px; overflow-x: auto; font-family: "Courier New", monospace; }
.ref-eq-tag { font-size: 12px; color: #61828A; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-family: "Roboto", Arial, sans-serif; display: block; margin-bottom: 4px; }
.ref-callout { background: #e8f0f3; border-left: 3px solid #61828A; 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-diagram { width: 100%; max-width: 42rem; height: auto; display: block; margin: 0.4rem auto; color: #1a2e38; }