/* ============================================================
   style/calculators.css  —  the Calculators & Converters look

   A new stylesheet rather than additions to main.css: every rule here
   is namespaced `calc-`, and only the calculator pages load the file,
   so no existing tool can be reached by any of it. The colours, radii,
   shadows and spacing are the ones main.css already uses on the tool
   pages — this arranges them for calculators rather than inventing a
   second design language.
   ============================================================ */

/* ── Page frame ─────────────────────────────────────────── */
.calc-wrap { width: 100%; text-align: left; }

.calc-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-bottom: 10px; font-size: 12.5px; color: #94a3b8;
}
.calc-crumbs a { color: #0369a1; }
.calc-crumbs a:hover { text-decoration: underline; }
.calc-crumbs span[aria-current] { color: #475569; }

.calc-wrap > h1 {
    margin: 0 0 6px; font-size: 26px; font-weight: 800; color: orangered;
    line-height: 1.25;
}
.calc-lede {
    margin: 0 0 18px; font-family: inherit; font-size: 15px;
    color: #475569; line-height: 1.6; max-width: 70ch;
}

/* ── The calculator itself ──────────────────────────────── */
.calc-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 18px; margin-bottom: 18px;
}
.calc-card + .calc-card { margin-top: -4px; }

.calc-section-title {
    margin: 0 0 12px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #94a3b8;
}
.calc-group + .calc-group {
    margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0;
}

/* Inputs sit two-up on a desktop and stack on a phone. */
.calc-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.calc-grid.is-single { grid-template-columns: 1fr; }

.calc-field { min-width: 0; }
.calc-field > label,
.calc-label {
    display: block; margin-bottom: 5px;
    font-size: 12.5px; font-weight: 600; color: #334155;
}
.calc-field input,
.calc-field select {
    display: block; width: 100%; padding: 11px 12px;
    font: inherit; font-size: 15px; color: #0f172a;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 9px;
    min-height: 46px;
}
.calc-field input:focus,
.calc-field select:focus {
    outline: none; border-color: #0369a1;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .15);
}
.calc-field input[aria-invalid="true"] { border-color: #dc2626; }
.calc-hint {
    margin: 5px 0 0; font-family: inherit;
    font-size: 12px; color: #94a3b8; line-height: 1.5;
}

/* An input with a unit or currency welded to its left. */
.calc-affix { display: flex; }
.calc-affix > span {
    display: inline-flex; align-items: center; padding: 0 11px;
    background: #eef2f7; border: 1px solid #cbd5e1; border-right: 0;
    border-radius: 9px 0 0 9px; font-size: 14px; color: #475569;
    white-space: nowrap;
}
.calc-affix > input { border-radius: 0 9px 9px 0 !important; }

/* ── Mode switch (percentage, discount, date tools) ─────── */
.calc-modes {
    display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px;
}
.calc-modes input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.calc-modes label {
    display: inline-flex; align-items: center; min-height: 42px;
    padding: 0 14px; cursor: pointer; font-size: 13.5px; font-weight: 600;
    color: #475569; background: #fff;
    border: 1px solid #cbd5e1; border-radius: 999px;
}
.calc-modes label:hover { border-color: #7dd3fc; background: #f0f9ff; }
.calc-modes input:checked + label {
    color: #fff; background: #0369a1; border-color: #0369a1;
}
.calc-modes input:focus-visible + label {
    outline: 2px solid #0369a1; outline-offset: 2px;
}

/* ── Buttons ────────────────────────────────────────────── */
.calc-actions {
    display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px;
}
.calc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; min-height: 44px; padding: 0 18px;
    font: inherit; font-size: 14px; font-weight: 600; color: #334155;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
    cursor: pointer; transition: background .18s, border-color .18s;
}
.calc-btn:hover:not(:disabled) { background: #f0f9ff; border-color: #7dd3fc; }
.calc-btn:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.calc-btn:disabled { opacity: .5; cursor: not-allowed; }
.calc-btn.is-primary { color: #fff; background: #0369a1; border-color: #0369a1; }
.calc-btn.is-primary:hover:not(:disabled) { background: #075985; }
.calc-btn.is-done { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }

/* The swap control on the converters. */
.calc-swap {
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 1px;
}
.calc-swap button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; font-size: 16px; color: #0369a1;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 50%;
    cursor: pointer; transition: transform .2s, background .18s;
}
.calc-swap button:hover { background: #f0f9ff; border-color: #7dd3fc; transform: rotate(180deg); }
.calc-swap button:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }

/* ── Results ────────────────────────────────────────────── */
.calc-result {
    margin-bottom: 18px; padding: 20px;
    background: linear-gradient(135deg, #ecfeff, #eff6ff);
    border: 1px solid #bae6fd; border-radius: 14px;
}
.calc-result-label {
    margin: 0 0 4px; font-family: inherit; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #0369a1;
}
.calc-result-value {
    font-size: clamp(26px, 5vw, 38px); font-weight: 800; color: #0c4a6e;
    line-height: 1.15; overflow-wrap: anywhere;
}
.calc-result-note {
    margin: 8px 0 0; font-family: inherit; font-size: 13.5px;
    color: #075985; line-height: 1.55;
}

/* The refusal that replaces a result rather than sitting beside it, so
   a stale number can never be mistaken for a current one. */
.calc-result.is-error {
    background: #fef2f2; border-color: #fecaca;
}
.calc-result.is-error .calc-result-label { color: #b91c1c; }
.calc-result.is-error .calc-result-value {
    font-size: 17px; font-weight: 600; color: #7f1d1d; line-height: 1.5;
}

.calc-stats {
    display: grid; gap: 10px; margin-top: 16px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.calc-stat {
    padding: 12px 13px; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 11px;
}
.calc-stat dt {
    font-size: 11.5px; font-weight: 600; color: #64748b;
    text-transform: uppercase; letter-spacing: .04em;
}
.calc-stat dd {
    margin: 4px 0 0; font-size: 19px; font-weight: 700; color: #0f172a;
    overflow-wrap: anywhere;
}
.calc-stat small {
    display: block; margin-top: 2px; font-size: 11.5px;
    font-weight: 400; color: #94a3b8;
}

/* Categories carry a colour as well as a word, never colour alone. */
.calc-badge {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 10px; padding: 6px 13px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700;
}
.calc-badge.tone-good { background: #d1fae5; color: #065f46; }
.calc-badge.tone-low  { background: #dbeafe; color: #1e40af; }
.calc-badge.tone-warn { background: #fef3c7; color: #92400e; }
.calc-badge.tone-high { background: #fee2e2; color: #991b1b; }
.calc-badge.tone-none { background: #e2e8f0; color: #475569; }

/* ── Tables ─────────────────────────────────────────────── */
.calc-table-wrap {
    margin-top: 14px; overflow-x: auto;
    border: 1px solid #e2e8f0; border-radius: 11px; background: #fff;
}
.calc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.calc-table th, .calc-table td {
    padding: 9px 12px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid #f1f5f9;
}
.calc-table th:first-child, .calc-table td:first-child { text-align: left; }
.calc-table thead th {
    position: sticky; top: 0; background: #f8fafc; color: #475569;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em;
}
.calc-table tbody tr:last-child td { border-bottom: 0; }
.calc-table tbody tr:hover { background: #f8fafc; }
.calc-table td { font-variant-numeric: tabular-nums; }
.calc-table-scroll { max-height: 380px; overflow-y: auto; }

/* A bar that shows a split without needing a charting library. */
.calc-bar {
    display: flex; height: 14px; margin-top: 14px;
    border-radius: 999px; overflow: hidden; background: #e2e8f0;
}
.calc-bar span { display: block; height: 100%; }
.calc-bar .is-principal { background: #0369a1; }
.calc-bar .is-interest { background: #f97316; }
.calc-bar-key {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
    font-size: 12.5px; color: #475569;
}
.calc-bar-key i {
    display: inline-block; width: 10px; height: 10px; margin-right: 6px;
    border-radius: 3px;
}
.calc-bar-key .is-principal { background: #0369a1; }
.calc-bar-key .is-interest { background: #f97316; }

/* ── Explanation and links ──────────────────────────────── */
.calc-info { margin-top: 8px; }
.calc-info h2 {
    margin: 22px 0 8px; font-size: 18px; font-weight: 700; color: #0f172a;
}
.calc-info h3 {
    margin: 16px 0 6px; font-size: 15px; font-weight: 700; color: #1e293b;
}
.calc-info p, .calc-info li {
    font-family: inherit; font-size: 14.5px; color: #475569; line-height: 1.7;
}
.calc-info p { margin: 0 0 10px; }
.calc-info ul, .calc-info ol { margin: 0 0 12px; padding-left: 22px; }
.calc-info li { margin-bottom: 5px; }
.calc-info a { color: #0369a1; text-decoration: underline; }

.calc-formula {
    margin: 10px 0 14px; padding: 14px 16px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-left: 3px solid #0369a1; border-radius: 0 10px 10px 0;
    font-family: 'Consolas', 'Menlo', monospace; font-size: 14px;
    color: #0f172a; line-height: 1.9; overflow-x: auto;
}

.calc-note {
    display: flex; gap: 10px; margin: 12px 0; padding: 12px 14px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    font-size: 13.5px; color: #78350f; line-height: 1.6;
}
.calc-note i { flex-shrink: 0; margin-top: 3px; color: #b45309; }
.calc-note.is-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.calc-note.is-info i { color: #2563eb; }

.calc-related { margin-top: 26px; }
.calc-related h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #0f172a; }
.calc-related-grid {
    display: grid; gap: 11px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.calc-related-grid a {
    display: flex; align-items: center; gap: 11px; padding: 13px 14px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 11px;
    color: #0f172a; transition: border-color .18s, transform .18s;
}
.calc-related-grid a:hover {
    border-color: #7dd3fc; transform: translateY(-2px);
}
.calc-related-grid i {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
    background: #e0f2fe; color: #0369a1; font-size: 15px;
}
.calc-related-grid strong { display: block; font-size: 14px; font-weight: 700; }
.calc-related-grid small { display: block; font-size: 12px; color: #64748b; margin-top: 1px; }

/* ── Category landing page ──────────────────────────────── */
.calc-hero {
    padding: 26px 22px; margin-bottom: 22px; text-align: center;
    background: linear-gradient(135deg, #ecfeff, #eff6ff);
    border: 1px solid #bae6fd; border-radius: 16px;
}
.calc-hero h1 { margin: 0 0 8px; font-size: clamp(24px, 5vw, 32px); color: orangered; font-weight: 800; }
.calc-hero p {
    margin: 0 auto; max-width: 62ch; font-family: inherit;
    font-size: 15.5px; color: #475569; line-height: 1.65;
}
.calc-cat-section { margin-bottom: 26px; }
.calc-cat-section h2 {
    margin: 0 0 12px; font-size: 19px; font-weight: 700; color: #0f172a;
}
.calc-cards {
    display: grid; gap: 13px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.calc-cards a {
    display: flex; gap: 13px; padding: 16px; color: #0f172a;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 13px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.calc-cards a:hover {
    border-color: #7dd3fc; transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
}
.calc-cards i {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
    background: #e0f2fe; color: #0369a1; font-size: 17px;
}
.calc-cards strong { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.calc-cards p { margin: 0; font-family: inherit; font-size: 13px; color: #64748b; line-height: 1.55; }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 640px) {
    .calc-card { padding: 15px; }
    .calc-result { padding: 16px; }
    .calc-grid { grid-template-columns: 1fr; }
    .calc-swap { justify-content: flex-start; padding: 2px 0 0; }
    .calc-swap button:hover { transform: none; }
    .calc-actions .calc-btn { flex: 1 1 auto; }
    .calc-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .calc-table th, .calc-table td { padding: 8px 10px; }
    .calc-wrap > h1 { font-size: 21px; }
}

/* ── A value and the unit it is measured in ─────────────────
   The unit sits welded to the right of the number, and it is a
   control rather than a label: changing it converts the value
   beside it. Kept narrow so the number keeps most of the width,
   which is what people are actually reading and editing. */
.calc-unitpair { display: flex; align-items: stretch; }
.calc-unitpair > input {
    flex: 1 1 auto; min-width: 0;
    border-right: 0;
    border-radius: 9px 0 0 9px;
}
.calc-unitpair > select {
    flex: 0 0 auto; width: auto;
    padding: 0 8px 0 10px;
    font-size: 14px; color: #475569;
    background: #eef2f7;
    border-radius: 0 9px 9px 0;
}
/* Whichever half has focus draws its ring over the other's edge. */
.calc-unitpair > input:focus,
.calc-unitpair > select:focus { position: relative; z-index: 1; }

/* ── Scrolling to the answer ────────────────────────────────
   The site header is sticky and 76px tall, so a result scrolled
   flush to the top of the viewport would sit behind it. This keeps
   it clear of the header with a little room to breathe. */
.calc-result { scroll-margin-top: 92px; }

/* The hidden attribute has to win.
   The browser's own rule for [hidden] is weaker than any author rule,
   so `.calc-stats { display: grid }` alone would leave a hidden stats
   block sitting on screen — and the result gate hides exactly those.
   Anything the page marks hidden is hidden, whatever else it is. */
[hidden] { display: none !important; }

/* ── Storage unit system (Data Storage Converter) ───────────
   Radio cards rather than a select: the choice between 1,000 and
   1,024 is the whole tool, so it reads as a decision on the page
   instead of hiding inside a dropdown. Built on the same tokens as
   .calc-modes so it belongs to the rest of the design. */
.calc-syschoice { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.calc-syschoice legend {
    padding: 0; margin-bottom: 8px;
    font-size: 12.5px; font-weight: 600; color: #334155;
}
.calc-syscards {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* Off-screen, not display:none — a hidden input is unreachable by
   keyboard, and this control has to be operable without a mouse. */
.calc-syscards input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.calc-syscards label {
    display: block; padding: 12px 14px; cursor: pointer;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 11px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.calc-syscards label strong {
    display: block; font-size: 14.5px; color: #0f172a; margin-bottom: 3px;
}
.calc-sysunits {
    display: block; font-size: 13px; color: #0369a1;
    font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.calc-syscards label small {
    display: block; font-size: 11.5px; color: #64748b; line-height: 1.5;
}
.calc-syscards label:hover { border-color: #7dd3fc; background: #f0f9ff; }
.calc-syscards input:checked + label {
    border-color: #0369a1; background: #f0f9ff;
    box-shadow: inset 0 0 0 1px #0369a1;
}
.calc-syscards input:checked + label strong { color: #075985; }
.calc-syscards input:focus-visible + label {
    outline: 2px solid #0369a1; outline-offset: 2px;
}

/* The two-up explanation and the comparison table under it. */
.calc-sysexplain {
    display: grid; gap: 14px; margin-top: 4px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.calc-sysexplain h3 { margin: 0 0 5px; font-size: 14.5px; color: #0f172a; }
.calc-sysexplain p { margin: 0 0 6px; }
.calc-syseg {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; color: #075985;
    background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
    padding: 7px 10px;
}
.calc-tablecap {
    caption-side: top; padding: 9px 12px 0; text-align: left;
    font-size: 12px; color: #64748b;
}
/* The decimal unit column is a label like the first one, not a number. */
.calc-sysrows th:nth-child(3),
.calc-sysrows td:nth-child(3) { text-align: left; }
/* A visible divider between the binary half and the decimal half. */
.calc-sysrows th:nth-child(3),
.calc-sysrows td:nth-child(3) { border-left: 1px solid #e2e8f0; }