/* ===================================================================
   Unit converter (Pages/Shared/_UnitConverter.cshtml)

   Scoped under .uc. Uses the site-wide --az-* tokens (tool-shell.css).
   --uc-accent is the A-Z colour of the tool's first letter, set inline
   by the server. It is used for borders, tints, focus and the result
   figure's underline - never as the only carrier of meaning, and never
   as text colour on white (several letters are too light for 4.5:1).
   =================================================================== */

.uc {
    --uc-accent: var(--az-a-1, #5b8def);
    --uc-ink: var(--az-ink, #10162b);
    --uc-ink-2: var(--az-ink-2, #454d63);
    --uc-ink-3: var(--az-ink-3, #5f677d);
    --uc-line: var(--az-line, #e8e6e3);
    --uc-line-2: var(--az-line-2, #f0eeeb);
    --uc-surface: var(--az-surface, #fff);
    --uc-r: var(--az-r, 14px);
    --uc-r-lg: var(--az-r-lg, 18px);
    --uc-tint: color-mix(in srgb, var(--uc-accent) 8%, #fff);
    --uc-tint-2: color-mix(in srgb, var(--uc-accent) 18%, #fff);

    max-width: 1000px;
    margin: 0 auto;
    padding: 18px 16px 8px;
    color: var(--uc-ink-2);
    text-align: left;
}

.uc *, .uc *::before, .uc *::after { box-sizing: border-box; }

/* WebsiteTemplate style.css sets section { padding: 60px 0; overflow: hidden }
   on every section - 120px of dead space per block and a clipped accent rule. */
.uc :where(section) { padding: 0; overflow: visible; }  /* :where keeps this below .uc-card / .uc-panel padding */

/* ---- Hero ---- */
.uc-hero { text-align: center; margin-bottom: 16px; }

.uc .uc-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px; margin-bottom: 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--uc-ink-2) !important; text-decoration: none !important;
    background: var(--uc-tint); border: 1px solid var(--uc-tint-2);
}
.uc .uc-eyebrow i { color: var(--uc-accent); }
.uc .uc-eyebrow:hover { border-color: var(--uc-accent); }

.uc-hero h1 {
    margin: 0 0 6px;
    font-size: clamp(1.45rem, 3.2vw, 2rem); line-height: 1.2; font-weight: 800;
    color: var(--uc-ink); letter-spacing: -.01em;
}

.uc-lede { max-width: 640px; margin: 0 auto; font-size: .98rem; color: var(--uc-ink-3); }

/* ---- Converter card ---- */
.uc-card {
    position: relative;
    padding: 20px;
    background: var(--uc-surface);
    border: 1px solid var(--uc-line);
    border-radius: var(--uc-r-lg);
    box-shadow: 0 14px 32px -20px rgba(16, 22, 43, .3);
}
.uc-card::before {
    content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--uc-accent);
}

.uc-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start; gap: 12px;
}
.uc-row.is-swapped .uc-field[data-side="from"] { order: 3; }
.uc-row.is-swapped .uc-swap { order: 2; }
.uc-row.is-swapped .uc-field[data-side="to"] { order: 1; }

.uc-field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .9rem; color: var(--uc-ink); }

.uc-input {
    position: relative; display: flex; align-items: center;
    background: var(--uc-surface);
    border: 1.5px solid var(--uc-line); border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.uc-input:focus-within {
    border-color: var(--uc-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--uc-accent) 22%, transparent);
}
.uc-input.is-invalid { border-color: var(--az-error, #c62f2f); }

.uc-input input {
    flex: 1; min-width: 0; min-height: 52px; padding: 0 12px 0 14px;
    border: 0; border-radius: 12px; background: transparent;
    font: inherit; font-size: 1.25rem; font-weight: 700; color: var(--uc-ink);
    font-variant-numeric: tabular-nums;
}
.uc-input input:focus { outline: none; }
.uc-input input::placeholder { color: #b3b7c2; font-weight: 600; }

.uc-unit {
    flex: none; margin-right: 8px; padding: 4px 9px; border-radius: 8px;
    font-size: .82rem; font-weight: 700; color: var(--uc-ink-2);
    background: var(--uc-tint); white-space: nowrap;
}

.uc-msg { margin: 6px 0 0; font-size: .84rem; font-weight: 600; color: var(--az-error, #c62f2f); }

.uc-swap {
    align-self: center; margin-top: 26px;
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--uc-line); background: var(--uc-surface); color: var(--uc-ink-2);
    cursor: pointer; transition: border-color .15s, color .15s, transform .25s;
}
.uc-swap:hover { border-color: var(--uc-accent); color: var(--uc-ink); transform: rotate(180deg); }
.uc :is(button, select, a):focus-visible { outline: 3px solid var(--uc-accent); outline-offset: 2px; }

.uc-result {
    margin-top: 16px; padding: 12px 14px; border-radius: 12px;
    background: var(--uc-tint); border: 1px dashed var(--uc-tint-2);
    font-size: 1.05rem; color: var(--uc-ink-2); overflow-wrap: anywhere; min-height: 50px;
}
.uc-result-empty { color: var(--uc-ink-3); font-size: .95rem; }
.uc-result-out {
    color: var(--uc-ink); font-weight: 800; font-size: 1.2rem;
    text-decoration: underline; text-decoration-color: var(--uc-accent);
    text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.uc-result.is-fresh .uc-result-out { animation: uc-pop .28s ease-out; }

.uc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 12px;
}
.uc-precision { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; font-weight: 600; color: var(--uc-ink-3); }
.uc-precision select {
    min-height: 38px; padding: 0 28px 0 10px; border-radius: 10px;
    border: 1px solid var(--uc-line); background: var(--uc-surface); font: inherit; color: var(--uc-ink);
}

.uc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-btn {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 0 14px; border-radius: 10px;
    font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
    color: #fff; background: var(--uc-ink); border: 1px solid var(--uc-ink);
    transition: background-color .15s, border-color .15s, opacity .15s;
}
.uc-btn:disabled { opacity: .45; cursor: not-allowed; }
.uc-btn.is-done { background: var(--az-mint, #22b06b); border-color: var(--az-mint, #22b06b); }
.uc-btn-ghost { color: var(--uc-ink-2); background: var(--uc-surface); border-color: var(--uc-line); }
.uc-btn-ghost:hover { border-color: var(--uc-accent); color: var(--uc-ink); }

.uc-formula {
    display: flex; flex-wrap: wrap; gap: 4px 18px;
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--uc-line-2);
    font-size: .88rem; color: var(--uc-ink-3);
}
.uc-formula strong { color: var(--uc-ink-2); }

/* ---- Ad slot between the tool and the reference panels ---- */
.uc-ad { margin-top: 14px; }
.uc-ad:empty { display: none; }

/* ---- Table + more conversions ---- */
.uc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; margin-top: 14px; }

.uc-panel {
    padding: 16px; background: var(--uc-surface);
    border: 1px solid var(--uc-line); border-radius: var(--uc-r);
}
.uc-panel h2 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 800; color: var(--uc-ink); }

.uc-table-wrap { overflow-x: auto; }
.uc-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.uc-table th {
    padding: 7px 10px; text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--uc-ink-3); background: var(--uc-line-2);
}
.uc-table th:first-child { border-radius: 8px 0 0 8px; }
.uc-table th:last-child { border-radius: 0 8px 8px 0; }
.uc-table td { padding: 7px 10px; border-bottom: 1px solid var(--uc-line-2); color: var(--uc-ink); }
.uc-table tr:last-child td { border-bottom: 0; }

.uc .uc-reverse {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px;
    border-radius: 10px; border: 1px solid var(--uc-tint-2); background: var(--uc-tint);
    font-weight: 700; color: var(--uc-ink) !important; text-decoration: none !important;
}
.uc .uc-reverse i { color: var(--uc-accent); }
.uc .uc-reverse:hover { border-color: var(--uc-accent); }

.uc-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.uc .uc-links a {
    display: inline-block; padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--uc-line); background: var(--uc-surface);
    font-size: .84rem; color: var(--uc-ink-2) !important; text-decoration: none !important;
}
.uc .uc-links a:hover { border-color: var(--uc-accent); color: var(--uc-ink) !important; }

.uc .uc-all {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-size: .88rem; font-weight: 700; color: var(--az-a-1-strong, #1a6ec0) !important;
}

@keyframes uc-pop { from { opacity: .4; transform: translateY(2px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
    .uc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .uc { padding-top: 12px; }
    .uc-card { padding: 16px 14px; }
    .uc-row { grid-template-columns: 1fr; gap: 8px; }
    .uc-swap { margin: 0 auto; transform: rotate(90deg); }
    .uc-swap:hover { transform: rotate(270deg); }
    .uc-row.is-swapped .uc-swap { order: 2; }
    .uc-toolbar { align-items: stretch; }
    .uc-actions { width: 100%; }
    .uc-actions .uc-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .uc-swap, .uc-input, .uc-btn { transition: none; }
    .uc-result.is-fresh .uc-result-out { animation: none; }
    .uc-swap:hover { transform: none; }
}