/* CalcHandbook — shared overrides for every calculator page (contrast + tablet/phone layout). Loaded last in , after each page's own styles, so it only has to patch what they miss. */ /* ---------- Contrast: white surfaces default to dark ink ---------- The page body uses light text for the navy background; without this, text that is not explicitly coloured inside white cards/tooltips inherits it and becomes invisible. */ .card, .diagram-card, .diagram-tooltip { color: var(--ink); } /* ---------- Tablet (single column) ---------- */ @media (max-width: 980px) { .workspace { grid-template-columns: minmax(0, 1fr); } .workspace > * { min-width: 0; } /* Title block on top, tools row below it */ .topbar { flex-direction: column; align-items: stretch; gap: 16px; } .topbar-right { flex-wrap: wrap; flex-shrink: 1; } } /* ---------- Phone ---------- */ @media (max-width: 640px) { body { padding: 14px 12px 36px; background-attachment: scroll; } .topbar { gap: 12px; padding-bottom: 14px; margin-bottom: 16px; } .topbar-left { flex-direction: column; align-items: flex-start; gap: 8px; } .divider { display: none; } .fig-title { font-size: 21px; line-height: 1.2; } .fig-sub { font-size: 11.5px; line-height: 1.45; } /* Units toggle full width, then Reset | Report side by side */ .topbar-right { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; width: 100%; } .topbar-right .unit-toggle { grid-column: 1 / -1; display: flex; width: 100%; } .topbar-right .unit-btn { flex: 1; justify-content: center; padding: 8px 10px; } .topbar-right .btn { justify-content: center; padding: 10px 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .workspace { gap: 14px; } .diagram-card { padding: 16px 10px 10px; } .card-header { padding: 13px 14px; gap: 10px; } .card-body, .card-body-inner { padding-left: 14px; padding-right: 14px; } /* Inputs: two per row at most */ .field-grid, .field-grid.two, .field-grid.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .field-input { padding: 9px 11px; min-width: 0; } .field-input input { min-width: 0; width: 100%; } /* Formulas and results wrap instead of pushing the page sideways */ .formula-block { font-size: 14px; padding: 10px 11px; overflow-x: auto; overflow-wrap: anywhere; } .formula-result, .calc-res { white-space: normal; overflow-wrap: anywhere; } .calc-lab { white-space: normal; } .calc-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .calc-res { justify-self: start; } .results, .results.three, .point-results { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ratio-display { padding: 12px; } .seg { flex-wrap: wrap; } table { display: block; max-width: 100%; overflow-x: auto; } .x-slider-wrap { padding-left: 0; padding-right: 0; } .appfoot { font-size: 10.5px; line-height: 1.6; } } /* ---------- Small phone ---------- */ @media (max-width: 380px) { .field-grid, .field-grid.two, .field-grid.three, .results, .results.three, .point-results { grid-template-columns: minmax(0, 1fr); } .fig-title { font-size: 19px; } } /* Utilisation bars: a failing ratio (> 100 %) fills the bar instead of spilling out of the card */ .ratio-bar { overflow: hidden; } .ratio-fill { max-width: 100%; } @media (max-width: 640px) { /* Parallel-axis tables (Sections): compact, scroll sideways inside the card */ table { font-size: 11.5px; -webkit-overflow-scrolling: touch; } th, td { padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap; } } /* Brand link (same look on every calculator; Beams pages used a figure mark before) */ a.brand { text-decoration: none; } a.brand .brand-mark { letter-spacing: 0.01em; white-space: nowrap; } .brand-mark .hc { color: var(--accent); font-weight: 700; }