/* ==========================================================================
   TRAC Numerology
   Same palette as the chart reader so the two feel like one product, but a
   scrolling document rather than a fixed instrument: a numerology reading is
   read top to bottom once, not worked across panels for an hour.
   ========================================================================== */

.tn {
    --ink: #000000;
    --ink-2: #141414;
    --ink-3: #333B47;
    --paper: #FFFFFF;
    --rule: #CBD2DC;
    --rule-2: #E6E9EE;
    --brass: #7E5416;
    --brass-lt: #C89B4E;
    --deep: #16233D;
    --flag: #93323C;
    --good: #1F6B3A;
    --radius: 3px;

    color: var(--ink-2);
    background: var(--paper);
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

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

.tn-wrap { max-width: 1060px; margin: 0 auto; padding: 0 1.2rem; }

.tn-top { background: var(--deep); color: #fff; padding: 0.85rem 0; }
.tn-top .tn-wrap { display: flex; align-items: center; justify-content: space-between; }

.tn-brand {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.08rem; font-weight: 500; color: #fff; text-decoration: none;
}
.tn-brand span { color: var(--brass-lt); }
.tn-top nav a { color: #C7CFDF; text-decoration: none; font-size: 0.88rem; margin-left: 1.3rem; }
.tn-top nav a:hover { color: #fff; }

.tn-body { padding: 1.8rem 1.2rem 4rem; }

.tn h2 {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.25rem; font-weight: 500; color: var(--ink);
    margin: 0 0 1rem;
}

.tn h3 {
    font-size: 0.98rem; font-weight: 600; color: var(--ink);
    margin: 2rem 0 0.6rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule);
}

.tn-section {
    margin-top: 2.8rem; padding-top: 1.4rem;
    border-top: 3px solid var(--deep);
}

/* --- form --- */
.tn-form {
    background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 1.3rem 1.4rem 1.5rem; margin-bottom: 2rem;
}

.tn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.tn-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 620px) { .tn-row, .tn-row.three { grid-template-columns: 1fr; } }

.tn-field { margin-bottom: 0.9rem; }
.tn-field label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--ink); margin-bottom: 0.25rem; }
.tn-field input, .tn-field select {
    width: 100%; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.92rem;
    color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
}
.tn-field input:focus, .tn-field select:focus { outline: 2px solid #4E86D9; outline-offset: 1px; }
.tn-field input.num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.86rem; }
.tn-hint { font-size: 0.78rem; color: var(--ink-3); margin: 0.25rem 0 0; }
.tn-error { display: block; color: var(--flag); font-size: 0.8rem; margin-top: 0.2rem; }

.tn-more { margin: 0.4rem 0 0.2rem; border-top: 1px solid var(--rule-2); padding-top: 0.8rem; }
.tn-more summary { cursor: pointer; font-size: 0.88rem; font-weight: 500; color: var(--ink); }

.tn-btn {
    margin-top: 1.1rem; padding: 0.65rem 1.6rem;
    font: inherit; font-size: 0.95rem; font-weight: 600;
    color: #fff; background: var(--deep); border: 1px solid var(--deep);
    border-radius: var(--radius); cursor: pointer;
}
.tn-btn:hover { background: #0F1A2E; }

.tn-alert {
    background: #FDF4F4; border: 1px solid #E8CFD2; border-left: 3px solid var(--flag);
    border-radius: var(--radius); padding: 0.8rem 1rem; color: var(--flag); margin-bottom: 1.4rem;
}

/* --- number cards --- */
.tn-cards { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.8rem; }

.tn-card {
    flex: 1 1 130px; background: #fff; border: 1px solid var(--rule);
    border-top: 3px solid var(--brass); border-radius: var(--radius);
    padding: 0.6rem 0.8rem 0.7rem; text-align: center;
}
.tn-card dt { font-size: 0.74rem; color: var(--ink-3); margin: 0; }
.tn-card dd {
    margin: 0.15rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 1.5rem; font-weight: 600; color: var(--ink);
}
.tn-card small { font-size: 0.76rem; color: var(--ink-2); }

.tn-working {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.88rem; color: var(--ink); background: #F5F7FA;
    border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 0.6rem 0.8rem; margin: 0 0 0.5rem; word-spacing: 0.35rem;
}

/* --- tables --- */
.tn-table {
    width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--rule); border-radius: var(--radius);
    font-size: 0.88rem; margin-bottom: 0.6rem;
}
.tn-table th {
    text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--ink);
    background: #F2F4F7; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule);
}
.tn-table td { padding: 0.42rem 0.7rem; border-bottom: 1px solid var(--rule-2); }
.tn-table tr:last-child td { border-bottom: 0; }
.tn-table .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tn-table tr.current td { background: #F1F3F7; font-weight: 500; }
.tn-table.tight { font-size: 0.83rem; }

/* --- grid block --- */
.tn-grid-row { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }
.tn-gridbox {
    flex: 0 0 auto; background: #fff; border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 0.7rem;
}
.tn-gridbox svg { display: block; }
.tn-gridnotes { flex: 1 1 320px; min-width: 300px; }
.tn-gridnotes p { margin: 0 0 0.3rem; font-size: 0.88rem; }

.tn-list { margin: 0.7rem 0 0; padding-left: 1.1rem; }
.tn-list li { font-size: 0.88rem; margin-bottom: 0.25rem; }

.tn-sentences {
    background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 0.3rem 1rem; max-width: 80ch;
}
.tn-sentences p {
    margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-2);
    font-size: 0.9rem; color: var(--ink);
}
.tn-sentences p:last-child { border-bottom: 0; }

.tn-verdict {
    background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--ink);
    border-radius: var(--radius); padding: 0.8rem 1rem; max-width: 74ch;
}
.tn-verdict.yes { border-left-color: var(--good); }
.tn-verdict.no { border-left-color: var(--flag); }
.tn-verdict p { margin: 0.3rem 0 0; font-size: 0.9rem; }

.tn-note { font-size: 0.85rem; color: var(--ink-3); max-width: 78ch; margin: 0.5rem 0 0; }

@media print {
    .tn-form, .tn-top { display: none; }
}

/* ==========================================================================
   Classic look, matching the chart reader: TRAC navy for the accent, a gold
   rule, neutral greys and dark text. Light text only on the navy button.
   ========================================================================== */
.tn { background: #F5F6F8; min-height: 100vh; }
.tn-top { background: #FFFFFF; color: #111827; border-bottom: 1px solid #E2E6ED; box-shadow: 0 1px 0 rgba(201, 150, 43, 0.55), 0 2px 10px rgba(17, 24, 39, 0.05); }
.tn-brand { color: #111827; }
.tn-brand span { color: #B07F1A; }
.tn-top nav a { color: #374151; font-weight: 500; }
.tn-top nav a:hover { color: #5A2306; }
.tn-section { border-top: 3px solid #EF6C00; }
.tn h3 { color: #5A2306; border-bottom: 1px solid #E2E6ED; }
.tn-form { border: 1px solid #E2E6ED; border-radius: 14px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05); }
.tn-field input, .tn-field select { border-color: #D0D6E0; border-radius: 9px; }
.tn-field input:focus, .tn-field select:focus { outline: none; border-color: #2B4BA8; box-shadow: 0 0 0 3px rgba(43, 75, 168, 0.18); }
.tn-btn { color: #FFFFFF; background: #EF6C00; border: 1px solid #EF6C00; border-radius: 10px; box-shadow: 0 2px 6px rgba(30, 58, 95, 0.25); }
.tn-btn:hover { background: #172B66; }