/* ============================================================
   Shared styling for the plain input-and-answer tools
   ============================================================

   Number to words, base converter, NATO phonetic, NPV and nth
   root all have the same shape: a few fields, one answer, a copy
   button. This is that shape once rather than five times.

   Colours come from a2z-tokens.css where the site already
   defines them, with local fallbacks so the file is not
   load-order dependent.
   ============================================================ */

.st-wrap {
    max-width: 900px;
    margin: 0 auto 28px;
}

.st-panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e6ee);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
}

.st-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.st-field { display: flex; flex-direction: column; gap: 6px; }

.st-field label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2, #454d63);
    margin: 0;
}

.st-field input[type="text"],
.st-field input[type="number"],
.st-field select {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid var(--border, #d9dde8);
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #10162b);
}

.st-field input:focus,
.st-field select:focus {
    outline: none;
    border-color: #5b8def;
    box-shadow: 0 0 0 3px rgba(91, 141, 239, .18);
}

/* A field the user typed something impossible into. Announced as
   well as coloured - a red border alone says nothing to a screen
   reader, and nothing at all to anyone who cannot distinguish it. */
.st-field input[aria-invalid="true"] {
    border-color: #d64545;
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .14);
}

.st-hint { font-size: 12.5px; color: var(--ink-3, #5f677d); }
.st-error { font-size: 12.5px; color: #b3261e; min-height: 1em; }

/* ---- the answer ---- */

.st-out {
    background: linear-gradient(135deg, #eef1fd, #f6f2ff);
    border: 1px solid #ddd7fb;
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 4px;
}

.st-out-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6a45d8;
    margin-bottom: 6px;
}

.st-out-value {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink, #10162b);
    word-break: break-word;
}

.st-out-value.is-empty { color: var(--ink-3, #5f677d); font-weight: 500; font-size: 15px; }

.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.st-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border, #d9dde8);
    background: #fff;
    color: var(--ink-2, #454d63);
    cursor: pointer;
}

.st-btn:hover { border-color: #b9caf6; color: #3a66cc; }

.st-btn-primary {
    background: linear-gradient(140deg, #5b8def, #7b5bf0);
    border-color: transparent;
    color: #fff;
}

.st-btn-primary:hover { color: #fff; filter: brightness(1.05); }

/* ---- small result tables (NPV schedule, base table) ---- */

.st-table-wrap { overflow-x: auto; margin-top: 14px; }

.st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 460px;
}

.st-table th,
.st-table td {
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-soft, #eef0f5);
}

.st-table th:first-child,
.st-table td:first-child { text-align: left; }

.st-table th {
    font-weight: 700;
    color: var(--ink-2, #454d63);
    background: var(--surface-2, #f7f8fc);
}

.st-table tfoot td { font-weight: 700; border-top: 2px solid var(--border, #e3e6ee); }

/* Figures line up column to column only if the digits are the same
   width - proportional digits make a column of numbers ragged. */
.st-table td,
.st-num { font-variant-numeric: tabular-nums; }

/* ---- cash-flow rows ---- */

.st-flows { display: flex; flex-direction: column; gap: 8px; }

.st-flow {
    display: grid;
    grid-template-columns: 74px 1fr 40px;
    gap: 8px;
    align-items: center;
}

.st-flow span { font-size: 13px; color: var(--ink-3, #5f677d); }

.st-flow input {
    padding: 8px 10px;
    font-size: 14.5px;
    border: 1px solid var(--border, #d9dde8);
    border-radius: 9px;
    width: 100%;
}

.st-flow button {
    border: 1px solid var(--border, #d9dde8);
    background: #fff;
    border-radius: 9px;
    height: 34px;
    cursor: pointer;
    color: var(--ink-3, #5f677d);
    font-size: 16px;
    line-height: 1;
}

.st-flow button:hover { border-color: #e2a2a2; color: #b3261e; }

/* ---- base converter grid ---- */

.st-bases { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

/* ---- NATO output ---- */

.st-nato {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.st-nato-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border, #e3e6ee);
    border-radius: 10px;
}

.st-nato-chip b { font-size: 15px; color: #6a45d8; line-height: 1.1; }
.st-nato-chip span { font-size: 11.5px; color: var(--ink-3, #5f677d); }

.st-copied { font-size: 12.5px; color: #1faa63; font-weight: 600; }

@media (max-width: 560px) {
    .st-panel { padding: 15px; }
    .st-out-value { font-size: 17px; }
}

/* The site's dark theme sets .theme-dark on body. */
.theme-dark .st-panel { background: #171a22; border-color: #2b3040; }
.theme-dark .st-field input,
.theme-dark .st-field select,
.theme-dark .st-flow input { background: #0f1218; border-color: #2b3040; color: #e8eaf2; }
.theme-dark .st-out { background: #191a2b; border-color: #322a55; }
.theme-dark .st-out-value { color: #e8eaf2; }
.theme-dark .st-btn { background: #171a22; border-color: #2b3040; color: #c9cede; }
.theme-dark .st-table th { background: #12151c; color: #c9cede; }
.theme-dark .st-nato-chip { background: #171a22; border-color: #2b3040; }