/* ==========================================================================
   TRAC chart reader
   Reference: a printed astronomical almanac and brass astrolabe engraving.
   Instrument, not ornament. Colour appears only where a number was computed.

   Layout rule: the page itself never scrolls. The reading panel is the only
   thing that moves, and charts are sized to sit inside it whole.
   ========================================================================== */

.trac {
    --ink:      #000000;
    --ink-2:    #141414;
    --ink-3:    #333B47;
    --paper:    #FFFFFF;
    --panel:    #FFFFFF;
    --rule:     #CBD2DC;
    --rule-2:   #E6E9EE;
    --brass:    #7E5416;
    --brass-lt: #C89B4E;
    --flag:     #93323C;
    --focus:    #4E86D9;

    --nav-bg:   #EF6C00;
    --nav-bg-2: #C2410C;
    --nav-txt:  #C7CFDF;

    --head-h: 58px;
    --radius: 3px;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;

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

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

/* --- Top strip: identity of the chart in view ---------------------------- */

.trac-top {
    height: var(--head-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.2rem;
    background: var(--nav-bg);
    color: #fff;
}

.trac-brand {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.trac-brand span { color: var(--brass-lt); }

.trac-topfacts {
    display: flex;
    gap: 1.4rem;
    overflow: hidden;
    flex: 1 1 auto;
}

.trac-topfacts div { min-width: 0; }

.trac-topfacts dt {
    font-size: 0.66rem;
    color: #8C97AF;
    margin: 0;
    white-space: nowrap;
}

.trac-topfacts dd {
    margin: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.82rem;
    color: #FFFFFF;
    white-space: nowrap;
}

.trac-edit {
    flex: 0 0 auto;
    padding: 0.42rem 0.9rem;
    font: inherit;
    font-size: 0.85rem;
    color: #fff;
    background: transparent;
    border: 1px solid #3B4C6E;
    border-radius: var(--radius);
    cursor: pointer;
}

.trac-edit:hover { background: #22314F; }
.trac-edit:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 1px; }

/* --- Body: nav rail + reading panel -------------------------------------- */

.trac-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    min-height: 0;
}

.trac-nav {
    background: var(--nav-bg-2);
    overflow-y: auto;
    padding: 0.8rem 0 2rem;
}

.trac-nav h3 {
    margin: 1.1rem 0 0.3rem;
    padding: 0 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6D7A96;
}

.trac-nav h3:first-child { margin-top: 0.2rem; }

.trac-nav button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.46rem 1rem;
    font: inherit;
    font-size: 0.865rem;
    color: var(--nav-txt);
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.trac-nav button:hover { background: #1B2942; color: #fff; }

.trac-nav button[aria-selected="true"] {
    background: #22314F;
    color: #fff;
    border-left-color: var(--brass-lt);
}

.trac-nav button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.trac-nav button svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    opacity: 0.75;
}

.trac-nav button[aria-selected="true"] svg { opacity: 1; color: var(--brass-lt); }

.trac-nav button span { min-width: 0; }

.trac-nav small {
    display: block;
    font-size: 0.7rem;
    color: #6D7A96;
}

.trac-nav button[aria-selected="true"] small { color: #A99168; }

/* --- Reading panel ------------------------------------------------------- */

.trac-main {
    overflow: auto;
    padding: 1.2rem 1.5rem 2rem;
    min-width: 0;
}

.trac-panel { display: none; }
.trac-panel.is-active { display: block; }

.trac-panel > h2 {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.25rem;
}

.trac-lede {
    margin: 0 0 1.1rem;
    max-width: 68ch;
    color: var(--ink-3);
    font-size: 0.88rem;
}

.trac-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: flex-start;
}

.trac-chart {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.7rem;
    flex: 0 0 auto;
}

.trac-chart svg { display: block; max-width: 100%; height: auto; }

.trac-grid16 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.9rem;
}

.trac-grid16 figure {
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.7rem;
}

.trac-grid16 svg { display: block; width: 100%; height: auto; }

.trac-grid16 figcaption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--ink-2);
    text-align: center;
}

.trac-grid16 figcaption b {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.1rem;
}

/* Wider screens fit three full-size charts per row without shrinking them. */
@media (min-width: 1500px) {
    .trac-grid16 { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* --- Tables -------------------------------------------------------------- */

.trac-tablewrap { overflow-x: auto; max-width: 100%; }

.trac-table {
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

.trac-table.full { width: 100%; }

.trac-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    background: #F4F6F9;
    white-space: nowrap;
}

.trac-table td {
    padding: 0.36rem 0.75rem;
    border-bottom: 1px solid var(--rule-2);
    white-space: nowrap;
}

.trac-table tr:last-child td { border-bottom: 0; }
.trac-table tbody tr:hover td { background: #F2F6FC; }

.trac-table .name { font-weight: 500; color: var(--ink); }

.trac-table .num {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.trac-table .lagna-row td { background: #F4F1E8; }
.trac-table tfoot td {
    border-top: 1px solid var(--rule);
    font-weight: 600;
    color: var(--ink);
}

.trac-mark {
    font-size: 0.68rem;
    color: var(--flag);
    margin-left: 0.25rem;
}

.trac-mark.good { color: var(--ink); font-weight: 600; }

/* Two-column key/value blocks for panchang and avakhada */
.trac-kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0 1.4rem;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin: 0 0 1.2rem;
    max-width: 900px;
}

.trac-kv div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--rule-2);
}

.trac-kv dt { margin: 0; color: var(--ink-2); font-size: 0.82rem; }
.trac-kv dd {
    margin: 0;
    color: var(--ink);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.82rem;
}

/* --- Dasha --------------------------------------------------------------- */

.trac-balance {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brass);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin: 0 0 1rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.88rem;
    color: var(--ink);
}

.trac-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
}

.trac-chain div {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--brass);
    border-radius: var(--radius);
    padding: 0.5rem 0.85rem;
    min-width: 132px;
}

.trac-chain dt { margin: 0; font-size: 0.68rem; color: var(--ink-2); }
.trac-chain dd {
    margin: 0.1rem 0 0;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--ink);
}
.trac-chain dd small {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--ink);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.trac-tree { max-width: 760px; }

.trac-tree details {
    border-bottom: 1px solid var(--rule-2);
    background: var(--panel);
}

.trac-tree > details { border: 1px solid var(--rule); border-radius: var(--radius); }

.trac-tree summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.36rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--ink);
}

.trac-tree summary:hover { background: #F2F6FC; }
.trac-tree summary::-webkit-details-marker { display: none; }
.trac-tree summary b { font-weight: 500; }

.trac-tree summary span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.trac-tree details details { margin-left: 0.9rem; border-left: 1px solid var(--rule-2); }
.trac-tree .leaf {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.28rem 0.75rem 0.28rem 1.8rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--rule-2);
}

.trac-tree .leaf span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.76rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* --- Inline controls inside panels --------------------------------------- */

.trac-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
}

.trac-inline label {
    display: block;
    font-size: 0.74rem;
    color: var(--ink-3);
    margin-bottom: 0.2rem;
}

.trac-inline input, .trac-inline select {
    padding: 0.4rem 0.5rem;
    font: inherit;
    font-size: 0.86rem;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.trac-inline button {
    padding: 0.44rem 0.9rem;
    font: inherit;
    font-size: 0.86rem;
    color: #fff;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
}

.trac-inline button:hover { background: #0F1A2E; }

/* --- Entry drawer -------------------------------------------------------- */

.trac-drawer {
    position: fixed;
    inset: 0;
    background: rgba(16, 27, 49, 0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem;
    overflow-y: auto;
    z-index: 40;
}

.trac-drawer.is-open { display: flex; }

.trac-form {
    width: 100%;
    max-width: 640px;
    background: var(--panel);
    border-radius: 5px;
    padding: 1.4rem 1.5rem 1.6rem;
}

.trac-form h2 {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule-2);
}

.trac-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.trac-row.three { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 560px) {
    .trac-row, .trac-row.three { grid-template-columns: 1fr; }
}

.trac-field { margin-bottom: 0.85rem; }

.trac-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.trac-field input, .trac-field select {
    width: 100%;
    padding: 0.46rem 0.55rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.trac-field input:focus, .trac-field select:focus,
.trac-inline input:focus, .trac-inline select:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    background: #fff;
}

.trac-field input.num, .trac-inline input.num {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.84rem;
}

.trac-hint { font-size: 0.75rem; color: var(--ink-3); margin: 0.25rem 0 0; }

.trac-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.85rem; }
.trac-check input { width: auto; margin-top: 0.28rem; }
.trac-check label { margin: 0; font-weight: 400; color: var(--ink-2); }

.trac-actions { display: flex; gap: 0.7rem; margin-top: 1.1rem; }

.trac-btn {
    flex: 1 1 auto;
    padding: 0.62rem 1rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    color: #fff;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
}

.trac-btn:hover { background: #0F1A2E; }

.trac-btn.ghost {
    flex: 0 0 auto;
    color: var(--ink-2);
    background: transparent;
    border-color: var(--rule);
}

.trac-error { display: block; color: var(--flag); font-size: 0.78rem; margin-top: 0.2rem; }

.trac-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.2rem;
    max-width: 70ch;
}

.trac-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--ink-3);
}

.trac-empty svg { opacity: 0.15; margin-bottom: 1.2rem; }

@media (max-width: 720px) {
    .trac-body { grid-template-columns: 1fr; }
    .trac-nav {
        display: flex;
        overflow-x: auto;
        padding: 0;
        border-bottom: 1px solid #22314F;
    }
    .trac-nav h3 { display: none; }
    .trac-nav button {
        width: auto;
        white-space: nowrap;
        border-left: 0;
        border-bottom: 3px solid transparent;
    }
    .trac-nav button[aria-selected="true"] {
        border-left: 0;
        border-bottom-color: var(--brass-lt);
    }
    .trac-nav small { display: none; }
    .trac-topfacts { display: none; }
}

@media print {
    .trac { position: static; }
    .trac-nav, .trac-top, .trac-drawer, .trac-inline { display: none; }
    .trac-panel { display: block !important; page-break-after: always; }
    .trac-main { overflow: visible; }
}

/* --- Overview -------------------------------------------------------------
   One screen holding the chart, the running dasha and today's transits. The
   layout is a flowing grid rather than fixed columns so it reflows on a laptop
   without any card being squeezed below the size its contents need.
   -------------------------------------------------------------------------- */

.trac-ov {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
    padding-bottom: 1rem;
}

.ov-card {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.75rem 0.85rem 0.9rem;
    min-width: 0;
}

.ov-card > h3 {
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rule-2);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}

.ov-card > svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 340px;
    margin: 0 auto;
}

/* Cards that need more room than a single chart column. */
@media (min-width: 1100px) {
    .ov-card.wide { grid-column: span 1; }
    .ov-card.full { grid-column: 1 / -1; }
}

@media (max-width: 1099px) {
    .ov-card.full { grid-column: 1 / -1; }
}

/* Cards supply their own frame, so the blocks inside drop theirs. */
.trac-kv.flush,
.trac-chain.flush {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    grid-template-columns: 1fr;
}

.trac-kv.flush div:last-child { border-bottom: 0; }

.trac-chain.flush { display: grid; gap: 0.4rem; }

.trac-chain.flush div {
    border: 0;
    border-left: 3px solid var(--brass);
    border-radius: 0;
    background: #F7F8FA;
    padding: 0.35rem 0.7rem;
    min-width: 0;
}

.trac-balance.flush {
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    padding: 0.55rem 0.75rem;
}

/* The date form inside an overview card sits tighter than a panel-level one. */
.trac-inline.tight {
    margin-bottom: 0.7rem;
    gap: 0.5rem;
}

.trac-inline.tight label { margin-bottom: 0.15rem; }
.trac-inline.tight input, .trac-inline.tight button { font-size: 0.82rem; }

/* --- Dasha tree inside an Overview card -----------------------------------
   The card is one column wide, so the tree stacks each period's name over its
   dates instead of putting them on opposite ends of a row. Same information,
   a third of the width.
   -------------------------------------------------------------------------- */

.ov-card .trac-tree {
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ov-card .trac-tree > details { border: 1px solid var(--rule); }

.ov-card .trac-tree summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    padding: 0.34rem 0.6rem;
    font-size: 0.82rem;
}

.ov-card .trac-tree summary span,
.ov-card .trac-tree .leaf span:last-child { font-size: 0.72rem; }

.ov-card .trac-tree .leaf {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    padding: 0.3rem 0.6rem 0.3rem 1.3rem;
    font-size: 0.79rem;
}

.ov-card .trac-tree details details { margin-left: 0.6rem; }

/* The three summary cards share a row, so they share a height and their
   scrollable innards stay inside them. */
.ov-card.wide {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1100px) {
    .ov-card.wide { max-height: 460px; }
    .ov-card.wide > .trac-kv.flush,
    .ov-card.wide > .trac-chain.flush { overflow-y: auto; min-height: 0; }
}

/* --- Potential energy -----------------------------------------------------
   The split bar carries the same three-way meaning everywhere it appears:
   benefic solid, neutral hollow, malefic flagged. Width is the percentage,
   so the bar is the number rather than a decoration of it.
   -------------------------------------------------------------------------- */

.trac-bar {
    display: flex;
    width: 100%;
    min-width: 140px;
    height: 12px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
}

.trac-bar i { display: block; height: 100%; }
.trac-bar i.b { background: var(--ink); }
.trac-bar i.n { background: repeating-linear-gradient(
                    45deg, #DDE1E8, #DDE1E8 2px, #FFFFFF 2px, #FFFFFF 4px); }
.trac-bar i.m { background: var(--flag); }

.trac-trace { border: 0; font-size: 0.82rem; }
.trac-trace td { border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.trac-trace td:nth-child(2) { white-space: normal; color: var(--ink-2); }
.trac-trace tr:last-child td { border-bottom: 0; font-weight: 500; }

/* Generated readings, set as prose rather than as data. */
.trac-sentences p {
    margin: 0;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule-2);
    font-size: 0.88rem;
    color: var(--ink);
}

.trac-sentences p:last-child { border-bottom: 0; }

/* A lord exchange ties two houses together tightly enough to be worth
   calling out above the table rather than leaving it to be spotted. */
.trac-exchange {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brass);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    margin-bottom: 1.2rem;
    max-width: 78ch;
}

.trac-exchange p {
    margin: 0;
    padding: 0.35rem 0;
    font-size: 0.88rem;
    color: var(--ink);
}


/* Classification words sit in the ordinary table face. They were previously
   styled as warning marks, which made them smaller and lighter than the data
   beside them - the opposite of what a reader needs from a verdict. */
.trac-table td .verdict-word { font: inherit; color: var(--ink); }

/* --- Score dials ----------------------------------------------------------
   Two numbers that decide the page, so they lead it. The reading beside them
   carries as much weight as the dial itself, because a percentage without a
   verdict invites the reader to invent one.
   -------------------------------------------------------------------------- */

.trac-dials {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.4rem;
    margin-bottom: 1.8rem;
}

.trac-dials figure {
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem 1rem;
    text-align: center;
    flex: 0 0 auto;
}

.trac-dials svg { display: block; margin: 0 auto; }

.trac-dials figcaption {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--ink-2);
    max-width: 210px;
}

.trac-dials figcaption b {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.15rem;
}

.trac-dialnote {
    flex: 1 1 280px;
    min-width: 260px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
}

.trac-dialnote p { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--ink-2); }
.trac-dialnote p:last-child { margin-bottom: 0; }
.trac-dialnote b { color: var(--ink); }
.trac-dialnote .agree { color: var(--ink); font-weight: 500; }
.trac-dialnote .disagree { color: var(--flag); font-weight: 500; }

.trac-panel h3 {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    margin: 1.7rem 0 0.6rem;
}

/* --- Settings section in the birth-details drawer --- */
.trac-settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0 0.9rem;
    padding: 0.4rem 0.8rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: #F4F5F7;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
}

.trac-settings-toggle:hover { background: #E9ECF0; }
.trac-settings-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.trac-settings-sign { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.trac-settings {
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    padding: 0.9rem 0.9rem 0.1rem;
    margin-bottom: 0.4rem;
}

.trac-settings[hidden], .trac-field[hidden] { display: none; }

/* --- Collapsible groups in the side menu (Parashari / Sayana) --- */
.trac-navgroup { margin-bottom: 0.3rem; }

.trac-nav .trac-navgroup-toggle {
    margin-top: 0.6rem;
    padding: 0.5rem 1rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #E6EAF2;
    border-left-color: transparent;
}

.trac-nav .trac-navgroup-toggle:hover { background: #1B2942; }

.trac-navgroup-sign {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: var(--brass-lt);
}

.trac-navgroup-items[hidden] { display: none; }

@media (max-width: 720px) {
    /* The top strip scrolls sideways, so every item stays reachable there. */
    .trac-navgroup, .trac-navgroup-items, .trac-navgroup-items[hidden] { display: contents; }
    .trac-nav .trac-navgroup-toggle { display: none; }
}

/* --- Sayana tables --- */
.trac-subhead {
    margin: 0 0 0.5rem;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}

.sy-grid { width: auto; }
.sy-grid th { text-align: center; min-width: 2.6rem; }

.sy-cell {
    text-align: center;
    line-height: 1.15;
    padding: 0.3rem 0.25rem;
    border: 1px solid var(--rule-2);
    color: var(--ink);
}

.sy-cell.empty { background: #F6F7F9; }
.sy-cell b { display: block; font-size: 0.8rem; font-weight: 600; }
.sy-cell small { display: block; font-size: 0.66rem; color: var(--ink-2); }

.sy-cell.asp-hard { background: #FBE9E7; }
.sy-cell.asp-soft { background: #E5EEF9; }
.sy-cell.asp-minor { background: #EAF3E6; }
.sy-cell.asp-neutral { background: #FFF7D6; }

.sy-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    vertical-align: 0.05rem;
}

.sy-dot.asp-hard { background: #B3261E; }
.sy-dot.asp-soft { background: #1F5FBF; }
.sy-dot.asp-minor { background: #2E7D32; }
.sy-dot.asp-neutral { background: #7E5416; }

/* Nested menu group (Tables inside Parashari Charts). */
.trac-nav .trac-navgroup.sub { margin: 0; }
.trac-nav .trac-navgroup.sub > .trac-navgroup-toggle {
    margin-top: 0.15rem;
    padding-left: 1.35rem;
    font-size: 0.7rem;
    color: var(--nav-txt);
}
.trac-nav .trac-navgroup.sub > .trac-navgroup-items > button { padding-left: 1.9rem; }
.trac-nav .trac-navgroup.sub > .trac-navgroup-items > .trac-navgroup.sub > .trac-navgroup-toggle {
    padding-left: 1.7rem;
}
.trac-nav .trac-navgroup.sub > .trac-navgroup-items > .trac-navgroup.sub > .trac-navgroup-items > button {
    padding-left: 2.35rem;
}

/* Calculation panel copy: use the same content width as the tables below. */
.house-report > .trac-lede,
#panel-energy > .trac-lede,
#panel-funnel > .trac-lede,
#panel-timing > .trac-lede {
    width: 100%;
    max-width: none;
    margin-bottom: 1rem;
    line-height: 1.55;
    text-align: left;
}

/* Timing Synthesis uses the same full-width reading area as the calculation panels. */
#panel-timing > .trac-lede {
    width: 100%;
    max-width: none;
    line-height: 1.55;
    text-align: left;
}

.house-report .trac-table th,
.house-report .trac-table td {
    vertical-align: top;
    text-align: left;
}
.house-report .trac-table .num { text-align: right; }
.house-report .trac-table td:last-child {
    min-width: 320px;
    white-space: normal;
    line-height: 1.45;
}

/* Funnel: the D1/D9 reference charts and sentence reading use the full
   content width, with equal chart columns. */
.funnel-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 1.2rem;
}

.funnel-charts .ov-card {
    width: 100%;
    min-width: 0;
}

.funnel-charts .ov-card > svg {
    display: block;
    width: min(100%, 340px);
    height: auto;
    margin: 0 auto;
}

.funnel-subhead {
    margin: 1.35rem 0 0.6rem;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.trac-sentences {
    width: 100%;
    max-width: none;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.4rem 1rem;
}

@media (max-width: 720px) {
    .funnel-charts { grid-template-columns: 1fr; }
}

/* --- Place of birth search --- */
.trac-citybox { position: relative; }

.trac-citylist {
    position: absolute;
    z-index: 30;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.2rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(16, 27, 49, 0.14);
}

.trac-citylist[hidden] { display: none; }

.trac-citylist li {
    padding: 0.42rem 0.65rem;
    cursor: pointer;
    color: var(--ink);
    font-size: 0.88rem;
}

.trac-citylist li small {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-3);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.trac-citylist li:hover, .trac-citylist li.is-active { background: #EEF2F8; }

.trac-citylist li.trac-citynone { cursor: default; color: var(--ink-3); font-size: 0.82rem; }

/* --- Sayana techniques --- */
.trac-inline button.ghost { color: var(--ink); background: #F4F5F7; border-color: var(--rule); }
.trac-inline button.ghost:hover { background: #E9ECF0; }

.sy-placeform .sy-wide { flex: 1 1 16rem; min-width: 14rem; }
.sy-placeform .sy-wide input { width: 100%; }
.sy-placeform input[type="number"] { width: 7.5rem; }

tr.sy-hit td { background: #FFF7D6; }

.trac-kv .sy-caution dt, .trac-kv .sy-caution dd { color: #8A1C14; }

.sy-details { margin-top: 1rem; }
.sy-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.sy-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0 0 0.8rem;
    font-size: 0.82rem;
    color: var(--ink);
}
.sy-filter label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }

/* --- Foreign travel: three dials, reasons, timing tree, analysis --- */
.trac-dials.three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.trac-dials.three figure {
    width: 100%;
    min-width: 0;
    min-height: 350px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.trac-dials.three figure svg {
    flex: 0 0 auto;
}

.trac-dials.three figcaption {
    width: 100%;
    max-width: none;
    min-height: 4.2rem;
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.45;
}

.trac-dials.three figcaption b {
    margin-bottom: 0.2rem;
}

.ft-bars { max-width: 760px; margin: 0.4rem 0 1rem; }

/* Keep the strongest-reason summary on one clean, aligned row. */
.ft-reason-summary {
    max-width: 900px;
    grid-template-columns: 1fr;
}

.ft-reason-summary div {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    min-height: 3rem;
    padding: 0.45rem 0;
}

.ft-reason-summary dt {
    font-weight: 600;
    white-space: nowrap;
}

.ft-reason-summary dd {
    text-align: left;
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
}

@media (max-width: 900px) {
    .trac-dials.three { grid-template-columns: 1fr; }
    .trac-dials.three figure { min-height: 0; }
}

@media (max-width: 560px) {
    .ft-reason-summary div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

.ft-timing { border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.2rem; }
.ft-tree { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }

.ft-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1.4fr) minmax(12rem, 1fr) 7.5rem;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--rule-2);
    color: var(--ink);
}
.ft-row.md { background: #F4F5F7; font-weight: 700; }
.ft-row .ft-name { font-weight: 600; }
.ft-row .ft-dates { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; color: var(--ink-2); }
.ft-row .ft-score { text-align: right; font-weight: 700; font-size: 0.85rem; }

details.ft-level > summary { cursor: pointer; list-style: none; }
details.ft-level > summary::-webkit-details-marker { display: none; }
details.ft-level > summary .ft-name::before { content: "+ "; font-family: "IBM Plex Mono", monospace; }
details.ft-level[open] > summary .ft-name::before { content: "− "; }
details.ft-level details.ft-level > summary { padding-left: 1.8rem; }
.ft-row.sd { padding-left: 3.2rem; font-size: 0.9rem; }

.ft-high { border-left: 4px solid #1F3A66; }
.ft-high .ft-score { color: #1F3A66; }
.ft-moderate { border-left: 4px solid #7E5416; }
.ft-low { border-left: 4px solid transparent; }

.ft-return {
    font-style: normal; font-size: 0.72rem; font-weight: 700; margin-left: 0.4rem;
    color: #8A1C14; border: 1px solid #8A1C14; border-radius: 3px; padding: 0 0.3rem;
}

.ft-analysis-toggle { margin-top: 1.4rem; }
.ft-analysis[hidden] { display: none; }
.ft-analysis { border-top: 1px solid var(--rule); padding-top: 0.6rem; }

td.ft-yes { font-weight: 700; color: #1F3A66; }
td.ft-no { color: var(--ink-3); }

/* ==========================================================================
   TRAC AI modern home interface
   ========================================================================== */
.trac-home-mode { --nav-bg:#fff; --nav-bg-2:#fff; --nav-txt:#132b5a; --paper:#fbfcfe; --brass:#C88B20; }
.trac-home-mode .trac-top { height:64px; background:#fff; color:#102a5a; border-bottom:1px solid #e6eaf1; }
.trac-top-spacer { flex:1; }
.trac-top-actions { display:flex; align-items:center; gap:14px; }
.trac-icon-btn,.trac-user-btn { border:0; background:transparent; color:#102a5a; font:inherit; cursor:pointer; }
.trac-icon-btn { font-size:20px; width:38px; height:38px; }
.trac-user-btn { display:flex; align-items:center; gap:10px; font-weight:600; }
.trac-avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#123b7a; color:#fff; font-size:17px; }
.trac-chevron { font-size:20px; color:#52627d; }
.trac-home-mode .trac-body { grid-template-columns:262px minmax(0,1fr); }
.trac-home-mode .trac-nav { background:#fff; border-right:1px solid #e8ecf2; overflow:hidden; padding:0 18px; color:#102a5a; position:relative; }
.trac-sidebar-brand { padding:20px 8px 18px; text-align:center; }
.trac-sidebar-brand img { width:176px; max-width:100%; display:block; margin:auto; }
.trac-nav .trac-home-link,.trac-nav .trac-new-analysis,.trac-nav .trac-settings-link { color:#102a5a; background:transparent; border:0; border-radius:11px; margin:3px 0; padding:12px 14px; font-size:15px; font-weight:500; }
.trac-nav .trac-home-link { background:linear-gradient(90deg,#f4cf85,#f8dfa9); color:#172a50; font-weight:600; }
.trac-nav .trac-new-analysis:hover,.trac-nav .trac-settings-link:hover { background:#f5f7fb; }
.nav-icon { width:24px; display:inline-flex; justify-content:center; font-size:20px; color:#173b76; }
.trac-nav .trac-navgroup { margin:2px 0; }
.trac-nav .trac-navgroup-toggle { color:#102a5a; background:transparent; border:0; border-radius:9px; padding:11px 10px; font-size:15px; font-weight:500; }
.trac-nav .trac-navgroup-toggle:hover { background:#f5f7fb; color:#102a5a; }
.trac-nav .nav-caret { margin-left:auto; font-size:22px; color:#6b7890; }
.trac-nav .trac-navgroup-items { padding-left:17px; }
.trac-nav .trac-navgroup.sub > .trac-navgroup-toggle { font-size:13px; color:#5c6d89; padding:7px 10px; }
.trac-nav .trac-navgroup.sub > .trac-navgroup-items > button { color:#536582; font-size:13px; border-left:1px solid #e5e9f0; padding:7px 12px; }
.trac-nav .trac-navgroup.sub > .trac-navgroup-items > button[aria-selected="true"] { background:#f5f8fc; color:#173b76; border-left-color:#d19a32; }
.trac-sidebar-footer { position:absolute; left:18px; right:18px; bottom:18px; }
.trac-quote { background:#f7f9fc; border-radius:12px; padding:20px 10px; text-align:center; color:#163568; font-family:Georgia,serif; font-style:italic; line-height:1.45; }
.trac-quote span { display:block; width:42px; height:3px; background:#c88b20; margin:12px auto 0; }
.trac-copyright { text-align:center; margin-top:14px; color:#73809a; font-size:11px; line-height:1.5; }
.trac-home-mode .trac-main { overflow:hidden; padding:0; background:linear-gradient(135deg,#fff 0%,#fbfcfe 58%,#f6f8fb 100%); }
.trac-home { height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:18px 7vw 20px; }
.trac-home-art { position:absolute; inset:0; pointer-events:none; opacity:.5; }
.trac-orbit { position:absolute; width:470px; height:470px; border:1px solid #e8c779; border-radius:50%; left:-180px; top:90px; opacity:.35; }
.trac-orbit.two { width:600px; height:600px; left:-240px; top:25px; }
.trac-star { position:absolute; right:10%; top:18%; font-size:90px; color:#e4bd62; opacity:.13; }
.trac-home-brand { display:none !important; }
.trac-home-brand img { display:none !important; }
.trac-home h1 { margin:8px 0 0; color:#102d62; font-family:Georgia,"Times New Roman",serif; font-size:clamp(38px,4vw,64px); font-weight:400; line-height:1.05; z-index:1; }
.trac-home-sub { display:none !important; }
.trac-chatbox { width:min(900px,92%); min-height:108px; background:#fff; border:1px solid #d7dfeb; border-radius:18px; box-shadow:0 10px 30px rgba(22,52,95,.09); display:grid; grid-template-columns:54px minmax(0,1fr) auto 54px 62px; align-items:end; gap:8px; padding:13px; z-index:2; }
.trac-chatbox input { height:70px; align-self:stretch; border:0; outline:0; font:18px/1.4 Georgia,"Times New Roman",serif; color:#173b76; padding:0 4px; }
.trac-chatbox input::placeholder { color:#8995a9; }
.trac-chatbox select { height:48px; border:1px solid #dbe2ec; border-radius:12px; background:#fff; color:#173b76; padding:0 34px 0 14px; font-weight:600; outline:0; }
.chat-attach,.chat-mic,.chat-send { border:1px solid #dbe2ec; background:#fff; color:#173b76; border-radius:12px; height:48px; cursor:pointer; font-size:24px; }
.chat-send { border:0; background:#c98b20; color:#fff; border-radius:50%; width:50px; height:50px; font-size:30px; }
.trac-home-links { width:min(900px,92%); display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; z-index:2; }
.trac-home-links button { border:1px solid #dce3ed; background:rgba(255,255,255,.9); color:#173b76; border-radius:12px; padding:11px 14px; cursor:pointer; text-align:left; font:13px "IBM Plex Sans",sans-serif; }
.trac-home-links button:hover { border-color:#c99736; background:#fff; }
.trac-home-footer { margin-top:auto; color:#8490a5; font-size:11px; letter-spacing:.12em; text-transform:uppercase; z-index:1; }
.trac-home-mode .trac-drawer { background:rgba(13,27,50,.25); }
.trac-home-mode .trac-drawer.is-open { display:flex; }
.trac-home-mode .trac-drawer .trac-form { max-height:90vh; overflow:auto; }
@media(max-height:800px){
  .trac-home { padding-top:8px; padding-bottom:10px; }
  .trac-home-brand { width:190px; }
  .trac-home h1 { font-size:42px; }
  .trac-home-sub { margin-bottom:15px; font-size:18px; }
  .trac-chatbox { min-height:92px; }
  .trac-chatbox input { height:55px; }
  .trac-home-links button { padding:8px 12px; }
}
@media(max-width:900px){
  .trac-home-mode .trac-body { grid-template-columns:190px minmax(0,1fr); }
  .trac-sidebar-brand img { width:145px; }
  .trac-home-links { grid-template-columns:repeat(2,1fr); }
  .trac-chatbox { grid-template-columns:44px minmax(0,1fr) auto 44px 52px; }
}

/* Final home-interface refinements */
.trac-home-mode .trac-sidebar-brand {
    padding-top: 10px;
    padding-bottom: 10px;
}
.trac-home-mode .trac-sidebar-brand img {
    width: 176px;
    height: auto;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.trac-home-mode .trac-nav {
    padding-top: 6px;
    padding-bottom: 10px;
}
.trac-home-mode .trac-nav > button,
.trac-home-mode .trac-navgroup-toggle {
    min-height: 44px;
}
.trac-home-mode .trac-navgroup-items {
    padding-left: 8px;
}
.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items {
    padding-left: 8px;
}
.trac-home-mode .trac-navgroup.sub > .trac-navgroup-toggle,
.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button {
    padding-top: 6px;
    padding-bottom: 6px;
}
.trac-home-mode .trac-sidebar-footer {
    left: 18px;
    right: 18px;
    bottom: 14px;
}
.trac-home-mode .trac-quote {
    padding: 14px 8px;
}
.trac-home-mode .trac-copyright {
    margin-top: 8px;
}
/* The home screen no longer contains the quick-question/entry-button strip. */
.trac-home-links { display: none !important; }

@media (max-height: 800px) {
    .trac-home-mode .trac-sidebar-brand { padding-top: 4px; padding-bottom: 5px; }
    .trac-home-mode .trac-sidebar-brand img { width: 158px; }
    .trac-home-mode .trac-nav > button,
    .trac-home-mode .trac-navgroup-toggle { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
    .trac-home-mode .trac-quote { padding: 10px 8px; }
    .trac-home-mode .trac-copyright { margin-top: 5px; }
}

/* ==========================================================================
   Final sidebar/layout correction
   The home interface intentionally has no top application header. The left
   navigation owns the full viewport height and its footer never overlaps menu items.
   ========================================================================== */
.trac-home-mode {
    --sidebar-width: 260px;
}

.trac-home-mode .trac-body {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    height: 100vh;
    min-height: 0;
}

.trac-home-mode .trac-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
}

.trac-home-mode .trac-sidebar-brand {
    flex: 0 0 auto;
    padding: 10px 8px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trac-home-mode .trac-sidebar-brand img {
    width: 176px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* All navigation controls share the same left edge, height and icon column. */
.trac-home-mode .trac-nav > button,
.trac-home-mode .trac-navgroup > .trac-navgroup-toggle {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.2;
}

.trac-home-mode .trac-nav > button .nav-icon,
.trac-home-mode .trac-navgroup > .trac-navgroup-toggle .nav-icon {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
}

.trac-home-mode .trac-navgroup-toggle {
    justify-content: flex-start;
}

.trac-home-mode .trac-navgroup-toggle .nav-caret {
    margin-left: auto;
    flex: 0 0 auto;
    line-height: 1;
}

/* Nested menus are indented consistently instead of shifting text unpredictably. */
.trac-home-mode .trac-navgroup-items {
    padding: 0 0 2px 18px;
    margin: 0;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-toggle {
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items {
    padding-left: 12px;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button {
    width: 100%;
    min-height: 34px;
    display: block;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-left: 2px solid #e5e9f0;
    border-radius: 0;
    text-align: left;
    line-height: 1.2;
    font-size: 13px;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button[aria-selected="true"] {
    border-left-color: #d19a32;
    background: #f5f8fc;
    color: #173b76;
}

/* Footer is part of the sidebar flow and therefore cannot cover menu items. */
.trac-home-mode .trac-sidebar-footer {
    position: static;
    flex: 0 0 auto;
    margin: auto 6px 8px;
    padding-top: 10px;
}

.trac-home-mode .trac-quote {
    padding: 12px 8px;
}

.trac-home-mode .trac-copyright {
    margin-top: 7px;
    padding-bottom: 2px;
}

/* Keep the main screen itself scroll-free. */
.trac-home-mode .trac-main {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.trac-home-mode .trac-home {
    height: 100%;
    min-height: 0;
}

@media (max-height: 800px) {
    .trac-home-mode { --sidebar-width: 238px; }
    .trac-home-mode .trac-sidebar-brand img { width: 150px; }
    .trac-home-mode .trac-sidebar-brand { padding-top: 5px; padding-bottom: 7px; }
    .trac-home-mode .trac-nav > button,
    .trac-home-mode .trac-navgroup > .trac-navgroup-toggle { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
    .trac-home-mode .trac-navgroup.sub > .trac-navgroup-toggle,
    .trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
    .trac-home-mode .trac-quote { padding: 9px 7px; }
    .trac-home-mode .trac-copyright { font-size: 10px; }
}


/* Home greeting refinement: supplied TRAC AI brain mark immediately above the greeting. */
.trac-home-hello-mark {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    z-index: 1;
}
.trac-home-hello-mark img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    display: block;
    border: 0;
    outline: 0;
    box-shadow: none;
}
.trac-home h1 { margin-top: 0; }
@media(max-height:800px){
    .trac-home-hello-mark { width: 72px; height: 72px; margin-bottom: 5px; }
    .trac-home-hello-mark img { width: 72px; height: 72px; }
}

/* ======================================================================
   Final TRAC AI home/sidebar usability refinement
   ====================================================================== */
.trac-home-mode .trac-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
}
.trac-home-mode .trac-sidebar-brand {
    flex: 0 0 auto;
    padding: 8px 6px 10px;
}
.trac-home-mode .trac-sidebar-brand img {
    width: 168px;
    max-height: 132px;
    object-fit: contain;
}
.trac-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
}
.trac-nav-scroll > button,
.trac-nav-scroll > .trac-navgroup {
    width: 100%;
}
.trac-home-mode .trac-nav button {
    position: relative;
    z-index: 1;
}
.trac-home-mode .trac-home-link,
.trac-home-mode .trac-new-analysis,
.trac-home-mode .trac-settings-link {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.trac-home-mode .trac-navgroup-toggle {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: normal;
}
.trac-home-mode .trac-navgroup-toggle > .nav-caret {
    margin-left: auto;
    flex: 0 0 auto;
}
.trac-home-mode .trac-navgroup-items {
    padding-left: 12px;
}
.trac-home-mode .trac-navgroup.sub > .trac-navgroup-toggle {
    min-height: 34px;
    padding: 7px 9px;
}
.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button {
    min-height: 32px;
    padding: 6px 10px;
}
.trac-home-mode .trac-sidebar-footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    margin: 6px 2px 4px;
    padding-top: 6px;
    background: #fff;
    z-index: 5;
}
.trac-home-mode .trac-quote {
    padding: 11px 8px;
}
.trac-home-mode .trac-copyright {
    margin-top: 7px;
    padding-bottom: 2px;
}

/* Keep the home greeting vertically centered while preserving the supplied mark. */
.trac-home-mode .trac-home {
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 12px;
}
.trac-home-mode .trac-home-hello-mark {
    width: 88px;
    height: 88px;
    margin: 0 auto 10px;
}
.trac-home-mode .trac-home-hello-mark img {
    width: 88px;
    height: 88px;
}
.trac-home-mode .trac-home h1 {
    margin: 0 0 18px;
}
.trac-home-mode .trac-chatbox {
    margin: 0;
}

@media (max-height: 800px) {
    .trac-home-mode .trac-sidebar-brand { padding-top: 4px; padding-bottom: 5px; }
    .trac-home-mode .trac-sidebar-brand img { width: 150px; max-height: 112px; }
    .trac-home-mode .trac-home-hello-mark { width: 72px; height: 72px; margin-bottom: 7px; }
    .trac-home-mode .trac-home-hello-mark img { width: 72px; height: 72px; }
    .trac-home-mode .trac-home h1 { font-size: 42px; margin-bottom: 14px; }
}

/* Center the greeting + prompt as one visual block; keep the footer independent. */
.trac-home-mode .trac-home-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    text-align: center;
}


/* ======================================================================
   Final UI alignment: consistent light sidebar + TRAC AI logo greeting
   ====================================================================== */

/* Keep the navigation from covering chart content or the sidebar footer. */
.trac:not(.trac-home-mode) .trac-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border-right: 1px solid #e6ebf2;
    color: #132b5a;
    padding: 8px 12px 10px;
}

.trac:not(.trac-home-mode) .trac-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
}

.trac:not(.trac-home-mode) .trac-sidebar-brand {
    flex: 0 0 auto;
    padding: 8px 6px 12px;
    text-align: center;
}

.trac:not(.trac-home-mode) .trac-sidebar-brand img {
    width: 168px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.trac:not(.trac-home-mode) .trac-nav button {
    color: #183768;
    background: transparent;
    border-left-color: transparent;
    border-radius: 9px;
    min-height: 40px;
}

.trac:not(.trac-home-mode) .trac-nav button:hover {
    background: #f4f7fb;
    color: #102d62;
}

.trac:not(.trac-home-mode) .trac-nav button[aria-selected="true"] {
    background: #f8dda0;
    color: #102d62;
    border-left-color: #c88b20;
    font-weight: 600;
}

.trac:not(.trac-home-mode) .trac-navgroup-items {
    padding-left: 12px;
}

.trac:not(.trac-home-mode) .trac-navgroup.sub > .trac-navgroup-toggle {
    color: #536582;
    min-height: 34px;
    padding: 6px 9px;
}

.trac:not(.trac-home-mode) .trac-navgroup.sub > .trac-navgroup-items > button {
    color: #536582;
    min-height: 32px;
    padding: 6px 10px;
    border-left: 2px solid #e5e9f0;
}

.trac:not(.trac-home-mode) .trac-navgroup.sub > .trac-navgroup-items > button[aria-selected="true"] {
    background: #f5f8fc;
    color: #173b76;
    border-left-color: #d19a32;
}

.trac:not(.trac-home-mode) .trac-sidebar-footer {
    position: static;
    flex: 0 0 auto;
    margin: 6px 2px 2px;
    padding-top: 6px;
    background: #ffffff;
    z-index: 2;
}

.trac:not(.trac-home-mode) .trac-quote {
    padding: 11px 8px;
}

.trac:not(.trac-home-mode) .trac-copyright {
    margin-top: 7px;
    padding-bottom: 2px;
}

/* Use the complete TRAC AI logo immediately above the greeting. */
.trac-home-mode .trac-home-hello-mark {
    width: 190px;
    height: 118px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trac-home-mode .trac-home-hello-mark img {
    width: 190px;
    height: auto;
    max-height: 118px;
    object-fit: contain;
}

/* Give the greeting and chat box a clear, balanced vertical gap. */
.trac-home-mode .trac-home h1 {
    margin: 0 0 28px;
    text-align: center;
}

.trac-home-mode .trac-chatbox {
    margin: 0;
}

@media (max-height: 800px) {
    .trac-home-mode .trac-home-hello-mark {
        width: 165px;
        height: 94px;
        margin-bottom: 9px;
    }
    .trac-home-mode .trac-home-hello-mark img {
        width: 165px;
        max-height: 94px;
    }
    .trac-home-mode .trac-home h1 {
        margin-bottom: 20px;
    }
}

/* ======================================================================
   TRAC AI Home — logo scale and vertical balance
   ====================================================================== */
.trac-home-mode .trac-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px 5vw 70px;
}

.trac-home-mode .trac-home-hello-mark {
    width: 230px;
    height: auto;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trac-home-mode .trac-home-hello-mark img {
    width: 230px;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
}

.trac-home-mode .trac-home h1 {
    margin: 0 0 32px;
    font-size: clamp(38px, 3.2vw, 52px);
    line-height: 1.08;
    text-align: center;
}

.trac-home-mode .trac-chatbox {
    width: min(900px, 92vw);
    margin: 0 auto;
}

@media (max-height: 800px) {
    .trac-home-mode .trac-home {
        padding-top: 12px;
        padding-bottom: 58px;
    }
    .trac-home-mode .trac-home-hello-mark {
        width: 200px;
        margin-bottom: 12px;
    }
    .trac-home-mode .trac-home-hello-mark img {
        width: 200px;
    }
    .trac-home-mode .trac-home h1 {
        margin-bottom: 24px;
        font-size: 44px;
    }
}

/* ==========================================================================
   Side menu: one light treatment on every screen, with readable text
   ========================================================================== */
.trac { --nav-bg: #FFFFFF; --nav-bg-2: #FFFFFF; --nav-txt: #102A5A; }

.trac-top { background: #fff; color: #102A5A; border-bottom: 1px solid #E6EAF1; }
.trac-brand { color: #102A5A; }
.trac-brand span { color: #B07D1D; }
.trac-topfacts dt { color: #6B7890; }
.trac-topfacts dd { color: #102A5A; }

.trac-nav { background: #fff; border-right: 1px solid #E8ECF2; }
.trac-nav h3 { color: #6B7890; }

.trac-nav button { color: #102A5A; }
.trac-nav button:hover { background: #F5F7FB; color: #102A5A; }
.trac-nav button[aria-selected="true"] {
    background: #F1F5FB;
    color: #123B7A;
    font-weight: 600;
    border-left-color: #C88B20;
}
.trac-nav small { color: #6B7890; }
.trac-nav button[aria-selected="true"] small { color: #8A6A24; }
.trac-nav button svg { color: #35507F; opacity: 0.9; }
.trac-nav button[aria-selected="true"] svg { color: #B07D1D; }

.trac-nav .trac-navgroup-toggle {
    color: #102A5A;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.93rem;
    font-weight: 600;
}
.trac-nav .trac-navgroup-toggle:hover { background: #F5F7FB; color: #102A5A; }

.trac-nav .trac-navgroup.sub > .trac-navgroup-toggle {
    color: #46597A;
    font-size: 0.82rem;
    font-weight: 600;
}
.trac-nav .trac-navgroup.sub > .trac-navgroup-items > button {
    color: #2E4265;
    font-size: 0.84rem;
    border-left: 1px solid #E5E9F0;
}
.trac-nav .trac-navgroup.sub > .trac-navgroup-items > button:hover { color: #102A5A; }
.trac-navgroup-sign { color: #B07D1D; }
.trac-nav .nav-caret { color: #6B7890; }
.trac-nav-scroll { overflow-y: auto; max-height: calc(100vh - var(--head-h) - 220px); padding-bottom: 0.5rem; }

/* ==========================================================================
   TRAC AI: ask bar and conversation
   ========================================================================== */
.ask-wrap { width: min(900px, 92%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.ask-wrap.ask-panel { width: 100%; align-items: stretch; }

.ask-wrap .trac-chatbox { width: 100%; grid-template-columns: 54px minmax(0, 1fr) auto 46px 54px 62px; }

.ask-wrap.ask-panel .trac-chatbox {
    min-height: 0;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(22, 52, 95, 0.06);
    padding: 10px;
    align-items: center;
    grid-template-columns: 46px minmax(0, 1fr) auto 42px 46px 52px;
}
.ask-wrap.ask-panel .trac-chatbox input { height: 46px; font-size: 16px; }
.ask-wrap.ask-panel .chat-attach, .ask-wrap.ask-panel .chat-mic { height: 42px; font-size: 19px; }
.ask-wrap.ask-panel .chat-send { width: 44px; height: 44px; font-size: 24px; }
.ask-wrap.ask-panel .trac-chatbox select { height: 42px; }

.ask-lang {
    border: 1px solid #DBE2EC; background: #fff; color: #173B76;
    border-radius: 12px; height: 48px; font: inherit; font-size: 0.8rem;
    font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
}
.ask-wrap.ask-panel .ask-lang { height: 42px; }
.chat-mic.is-listening { background: #C0392B; border-color: #C0392B; color: #fff; }
.chat-send[disabled] { opacity: 0.55; cursor: default; }

.ask-file-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.5rem; padding: 0.2rem 0.3rem 0.2rem 0.7rem;
    font-size: 0.8rem; color: var(--ink); background: #F4F5F7;
    border: 1px solid var(--rule); border-radius: 999px;
}
.ask-file-chip[hidden] { display: none; }
.ask-file-chip button { border: 0; background: none; font-size: 1rem; cursor: pointer; color: var(--ink-2); }
.ask-hint { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--ink-2); min-height: 1.1rem; }

/* --- the page itself: thread above, box docked below --- */
.trac-panel.ai-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
}

/* With the conversation open the page does not scroll; the thread does. */
.trac-main.is-ai { overflow: hidden; padding-bottom: 1rem; }

.ai-thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.4rem;
}

/* Before the first question the introduction sits in the middle of the page;
   once the conversation starts it shrinks to the top, as a chat should. */
.ai-intro {
    max-width: 62ch;
    margin: auto;
    padding: 2.5rem 0 1rem;
    text-align: center;
}
.ai-intro.is-tucked { margin: 0 0 1rem; padding: 0 0 0.6rem; text-align: left; }
.ai-intro.is-tucked h2 { font-size: 1.05rem; }
.ai-intro.is-tucked .trac-lede { display: none; }
.ai-intro.is-tucked .ai-suggestions { justify-content: flex-start; }

.ai-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.9rem; }
.ai-suggestions button {
    font: inherit; font-size: 0.8rem; color: var(--ink);
    background: #F4F5F7; border: 1px solid var(--rule);
    border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer;
}
.ai-suggestions button:hover { background: #E9ECF0; }

.ai-msg { display: flex; margin: 0.9rem 0; }
.ai-msg-you { justify-content: flex-end; }

.ai-bubble {
    max-width: 46ch;
    background: #123B7A;
    color: #fff;
    border-radius: 14px 14px 4px 14px;
    padding: 0.6rem 0.9rem;
    line-height: 1.5;
}

.ai-reply {
    max-width: 74ch;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--rule-2);
    border-radius: 14px 14px 14px 4px;
    padding: 0.9rem 1.1rem;
}
.ai-reply p { margin: 0 0 0.75rem; line-height: 1.68; }
.ai-reply p:last-of-type { margin-bottom: 0.3rem; }
.ai-thinking { color: var(--ink-2); font-style: italic; }

.ai-headline { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.ai-meta { font-size: 0.78rem; color: var(--ink-2); margin: 0.15rem 0 0.8rem; }

.ai-sections { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0.6rem 0 0.5rem; }
.ai-sec { flex: 1 1 15rem; }
.ai-sec h4 {
    margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2);
}
ul.ai-points { margin: 0; padding-left: 1.1rem; color: var(--ink); }
ul.ai-points li { line-height: 1.5; }
ul.ai-points li.ai-no { color: var(--ink-3); }

.ai-worktoggle { margin-top: 0.5rem; }
.ai-working[hidden] { display: none; }
.ai-working { margin-top: 0.7rem; }

.ai-dock {
    flex: 0 0 auto;
    border-top: 1px solid var(--rule-2);
    padding: 0.8rem 0 0;
    margin-bottom: 0;
    background: var(--paper);
}
.ai-foot { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--ink-3); text-align: center; }

@media (max-width: 900px) {
    .ask-wrap .trac-chatbox { grid-template-columns: 44px minmax(0, 1fr) auto 40px 44px 52px; }
    .ai-bubble, .ai-reply { max-width: 100%; }
}

/* --- The reply reads as plain paragraphs, with the question sitting above it --- */
.ai-reply {
    max-width: 78ch;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--ink);
}
.ai-reply p { margin: 0 0 1rem; line-height: 1.75; font-size: 1.005rem; }
.ai-reply p strong { font-weight: 700; color: var(--ink); }
.ai-reply .ai-meta { margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--ink-3); }

.ai-msg { margin: 1.4rem 0; }
.ai-msg-you { margin-bottom: 1.1rem; }
.ai-bubble {
    background: #E7EEF9;
    color: #10294F;
    border-radius: 18px;
    padding: 0.6rem 1rem;
    line-height: 1.5;
}

.ai-thread { padding-right: 1rem; }
.ai-msg-trac { padding-right: 2rem; }

/* --- Soft, centred TRAC AI reading layout --- */
/* The reply column stays centred like a calm reading page; the prose itself remains
   left-aligned for comfortable reading, matching the reference ChatGPT-style layout. */
.ai-msg-trac {
    justify-content: center;
    padding-right: 0;
}
.ai-msg-trac .ai-reply {
    width: min(78ch, 100%);
    max-width: 78ch;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: 0;
    padding: 0.15rem 0;
    box-shadow: none;
    text-align: left;
}
.ai-msg-trac .ai-reply p {
    line-height: 1.78;
    font-size: 1.01rem;
    color: var(--ink);
}
.ai-msg-trac .ai-reply .ai-meta {
    text-align: left;
    color: var(--ink-3);
}
@media (max-width: 900px) {
    .ai-msg-trac {
        justify-content: center;
    }
    .ai-msg-trac .ai-reply {
        width: 100%;
        max-width: 100%;
    }
}


/* ============================================================================
   TRAC AI FINAL SIDEBAR + ASK WIDTH UPDATE — 2026
   Keep the existing menu structure; refresh only its visual presentation.
   ============================================================================ */
.trac-home-mode .trac-nav {
    background: #ffffff;
    border-right: 1px solid #e4e9f2;
    padding: 0 12px;
}

.trac-home-mode .trac-sidebar-brand {
    padding: 18px 8px 18px;
}

.trac-home-mode .trac-sidebar-brand img {
    width: 190px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.trac-home-mode .trac-nav-scroll {
    padding: 4px 2px 12px;
    scrollbar-width: thin;
    scrollbar-color: #aeb7c6 transparent;
}

.trac-home-mode .trac-nav-scroll::-webkit-scrollbar { width: 7px; }
.trac-home-mode .trac-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.trac-home-mode .trac-nav-scroll::-webkit-scrollbar-thumb {
    background: #b4bdca;
    border-radius: 999px;
}

.trac-home-mode .trac-nav > button,
.trac-home-mode .trac-navgroup > .trac-navgroup-toggle {
    min-height: 48px;
    margin: 4px 0;
    padding: 10px 12px;
    gap: 13px;
    border-radius: 12px;
    color: #123b78;
    font-size: 15px;
    font-weight: 600;
    transition: background .16s ease, transform .16s ease;
}

.trac-home-mode .trac-nav > button:hover,
.trac-home-mode .trac-navgroup > .trac-navgroup-toggle:hover {
    background: #f4f7fc;
}

.trac-home-mode .trac-home-link {
    background: #eaf2ff;
    color: #123b78;
    box-shadow: inset 4px 0 0 #1769e8;
}

.trac-home-mode .trac-home-link:hover { background: #e4efff; }

.trac-home-mode .nav-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #123b78;
}

.trac-home-mode .nav-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
}

.trac-home-mode .trac-new-analysis .nav-icon,
.trac-home-mode .trac-navgroup[data-group="parashari"] > .trac-navgroup-toggle .nav-icon,
.trac-home-mode .trac-navgroup[data-group="sayana"] > .trac-navgroup-toggle .nav-icon,
.trac-home-mode .trac-navgroup[data-group="trac"] > .trac-navgroup-toggle .nav-icon,
.trac-home-mode .trac-navgroup[data-group="kp"] > .trac-navgroup-toggle .nav-icon {
    background: #f7edd5;
    border-radius: 9px;
}

.trac-home-mode .trac-navgroup[data-group="parashari"] > .trac-navgroup-toggle .nav-icon {
    background: #eaf2ff;
}

.trac-home-mode .trac-navgroup[data-group="sayana"] > .trac-navgroup-toggle .nav-icon {
    background: #eef7f4;
}

.trac-home-mode .trac-navgroup[data-group="trac"] > .trac-navgroup-toggle .nav-icon {
    background: #fff5dc;
    color: #b27a12;
}

.trac-home-mode .trac-navgroup[data-group="kp"] > .trac-navgroup-toggle .nav-icon {
    background: #f1ecff;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-toggle {
    min-height: 42px;
    padding: 7px 10px;
    color: #163b73;
    font-size: 14px;
    font-weight: 700;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-toggle .trac-navgroup-sign {
    color: #c58a17;
    font-size: 18px;
    font-weight: 700;
    width: 28px;
    text-align: center;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items {
    padding-left: 17px;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button {
    min-height: 36px;
    padding: 7px 12px 7px 15px;
    color: #294a78;
    font-size: 13.5px;
    border-left: 2px solid #dfe7f3;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button:hover {
    background: #f7f9fc;
    color: #123b78;
}

.trac-home-mode .trac-navgroup.sub > .trac-navgroup-items > button[aria-selected="true"] {
    background: #eef4ff;
    color: #123b78;
    border-left-color: #c98b20;
    font-weight: 600;
}

.trac-home-mode .trac-navgroup-toggle > .nav-caret {
    color: #526987;
    font-size: 23px;
    font-weight: 400;
}

.trac-home-mode .trac-sidebar-footer {
    margin: 8px 2px 8px;
    padding: 12px 4px 2px;
    border-top: 1px solid #e8edf4;
}

.trac-home-mode .trac-sidebar-footer .trac-copyright {
    margin-top: 0;
    padding: 4px 0 0;
    color: #74839c;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

/* After a question is asked, keep the input/dock the same readable width as the answer. */
.ask-wrap.ask-panel {
    width: min(78ch, 100%);
    max-width: 78ch;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.ask-wrap.ask-panel .trac-chatbox {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .ask-wrap.ask-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Ask box: the question on top, + at the bottom left, the rest bottom right
   ========================================================================== */
.ask-wrap .trac-chatbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 132px;
    padding: 16px 18px 14px;
}

.ask-wrap .trac-chatbox .ask-input {
    flex: 1 1 auto;
    width: 100%;
    min-height: 58px;
    font: 19px/1.45 Georgia, "Times New Roman", serif;
    color: #173B76;
    border: 0;
    outline: 0;
    padding: 0 2px;
    align-self: stretch;
}

.ask-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ask-tools-right { display: flex; align-items: center; gap: 10px; }

.ask-wrap .chat-attach, .ask-wrap .chat-mic, .ask-wrap .ask-lang { height: 46px; }
.ask-wrap .chat-attach { width: 46px; font-size: 27px; font-weight: 300; line-height: 1; }
.ask-wrap .ask-lang { padding: 0 14px; font-weight: 700; font-size: 0.82rem; }
.ask-wrap .chat-mic { width: 46px; display: inline-flex; align-items: center; justify-content: center; }
.ask-wrap .chat-mic svg { width: 21px; height: 21px; fill: currentColor; }
.chat-mic.is-listening { background: #C0392B; border-color: #C0392B; color: #fff; }
.ask-wrap .chat-send { width: 50px; height: 50px; font-size: 26px; }

.ask-wrap.ask-home .trac-chatbox { min-height: 150px; }
.ask-wrap.ask-home .trac-chatbox .ask-input { min-height: 70px; font-size: 20px; }

/* --- the TRAC AI picker --- */
.ask-model { position: relative; }

.ask-model-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 46px;
    padding: 0 0.7rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #173B76;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}
.ask-model-btn:hover { background: #F2F5FA; }
.ask-model-caret { color: #8A97AC; font-size: 0.8rem; }

.ask-model-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 40;
    width: 22rem;
    max-width: 78vw;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid #E2E8F1;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(16, 42, 90, 0.16);
}
.ask-model-menu[hidden] { display: none; }

.ask-model-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    color: #17253F;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
}
.ask-model-menu button:hover { background: #F4F7FC; }
.ask-model-menu .m-name { font-weight: 600; }
.ask-model-menu .m-note { color: #7A879E; font-size: 0.8rem; }
.ask-model-menu .m-tick { margin-left: auto; color: #123B7A; opacity: 0; font-weight: 700; }
.ask-model-menu button[aria-checked="true"] .m-tick { opacity: 1; }

.ask-model-sep {
    margin: 0.35rem 0.7rem 0.15rem;
    padding-top: 0.4rem;
    border-top: 1px solid #EDF1F7;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8A97AC;
}
.ask-model-foot {
    margin: 0.35rem 0.7rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #8A97AC;
}


/* ==========================================================================
   Brand marks
   ========================================================================== */
.trac-sidebar-brand img { width: 190px; max-width: 100%; }
.trac-home-mode .trac-sidebar-brand img { width: 190px; }
.trac-home-mode .trac-home-hello-mark { width: 320px; margin-bottom: 22px; }
.trac-home-mode .trac-home-hello-mark img { width: 320px; }

.trac-form-brand { text-align: center; margin: 0 0 0.6rem; }
.trac-form-brand img { width: 168px; max-width: 60%; height: auto; display: inline-block; }

/* ==========================================================================
   Side menu: main systems, then More, with the footer pinned at the bottom
   ========================================================================== */
.trac-nav { display: flex; flex-direction: column; }
/* The list always scrolls when it is taller than the space it has. */
.trac-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
}
.trac-nav-scroll::-webkit-scrollbar { width: 8px; }
.trac-nav-scroll::-webkit-scrollbar-thumb { background: #D5DDEA; border-radius: 4px; }
.trac-nav-scroll::-webkit-scrollbar-thumb:hover { background: #BDC8DA; }

.trac-nav-more {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: calc(100% - 0.6rem);
    margin: 0.6rem 0.3rem 0.3rem;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    color: #234070;
    background: #F5F8FD;
    border: 1px solid #E2E9F4;
    border-radius: 12px;
    cursor: pointer;
}
.trac-nav-more:hover { background: #F1F5FB; color: #102A5A; border-color: #DCE4F0; }
.nav-more-caret {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F2DFB8;
    color: #8A5E10;
    font-size: 1.05rem;
    line-height: 1;
}
.trac-nav-extra[hidden] { display: none; }
.trac-nav-extra { padding-top: 0.2rem; }

.trac-sidebar-footer {
    position: static;
    margin-top: auto;
    padding: 0.9rem 0 1rem;
    border-top: 1px solid #EDF1F7;
}
.trac-copyright { text-align: right; margin: 0; color: #8490A5; font-size: 11px; line-height: 1.6; }

/* ==========================================================================
   Headings, lists and tables inside a detailed reading
   ========================================================================== */
.ai-reply h4.ai-md-head {
    margin: 1.3rem 0 0.5rem;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}
.ai-reply h4.ai-md-head:first-child { margin-top: 0; }

.ai-reply ul.ai-md-list, .ai-reply ol.ai-md-list {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
    color: var(--ink);
}
.ai-reply ul.ai-md-list li, .ai-reply ol.ai-md-list li { line-height: 1.65; margin-bottom: 0.35rem; }

.ai-reply .trac-tablewrap { margin: 0.2rem 0 1.1rem; }
.ai-reply .trac-table { font-size: 0.86rem; }
.ai-reply .trac-table th { white-space: normal; }

@media (max-height: 800px) {
    .trac-home-mode .trac-home-hello-mark { width: 250px; margin-bottom: 14px; }
    .trac-home-mode .trac-home-hello-mark img { width: 250px; }
    .ask-wrap.ask-home .trac-chatbox { min-height: 128px; }
    .ask-wrap.ask-home .trac-chatbox .ask-input { min-height: 58px; }
}

@media (max-width: 980px) {
    .trac-home-mode .trac-home-hello-mark,
    .trac-home-mode .trac-home-hello-mark img { width: 240px; }
    .ask-model-menu { width: 18rem; }
}

/* The question sits above; + keeps the left, the rest keeps the right. */
.ask-wrap .trac-chatbox .ask-input { margin-bottom: 2px; }
.ask-wrap .ask-model-btn { font-size: 0.96rem; }

/* The box fills the width it is given; only the welcome screen centres it. */
.ask-wrap .trac-chatbox { width: 100%; margin: 0; }
.ask-wrap.ask-home .trac-chatbox { width: min(900px, 92%); margin: 0 auto; }
.ask-wrap.ask-panel { width: 100%; }
.ask-wrap.ask-panel .trac-chatbox { min-height: 118px; }
.ask-wrap.ask-panel .trac-chatbox .ask-input { min-height: 46px; font-size: 18px; }
.ask-hint:empty { display: none; }

/* Hidden menu entries are still there for the script to open. */
.is-hidden-nav { display: none !important; }

/* The docked box uses the full width of the page, so + keeps the far left. */
.ask-wrap.ask-panel .trac-chatbox { width: 100%; max-width: none; margin: 0; }
.ask-wrap.ask-panel .trac-chatbox .ask-input { font-size: 19px; min-height: 50px; }

.trac-sidebar-footer { padding-right: 0.2rem; }

/* Every control on the right of the box, and the box as wide as the page. */
.ask-tools { justify-content: flex-end; }
.ask-wrap .trac-chatbox { width: 100%; max-width: none; }
.ask-wrap.ask-home .trac-chatbox { width: min(1040px, 94%); }
.ask-wrap.ask-panel .trac-chatbox .ask-input { font-size: 19px; min-height: 52px; }

/* The copyright lives at the foot of the page, hard right. */
.trac-page-footer {
    margin-top: 1.6rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--rule-2);
    text-align: right;
    font-size: 11px;
    color: #8490A5;
}
.trac-main.is-ai .trac-page-footer { display: none; }

/* The chart travels with the reading. */
.ai-charts { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0.2rem 0 1.2rem; }
.ai-chart { margin: 0; }
.ai-chart svg { width: 300px; max-width: 100%; height: auto; border: 1px solid var(--rule-2); border-radius: 10px; }
.ai-chart figcaption { margin-top: 0.3rem; font-size: 0.78rem; color: var(--ink-2); text-align: center; }

.ask-model-menu button[data-reader] .m-note { font-size: 0.78rem; }

/* A chart drawn inside the reading, where the words discuss it. */
.ai-reply .ai-chart { margin: 0.4rem 0 1.1rem; }
.ai-reply .ai-chart svg { width: 320px; max-width: 100%; height: auto; border: 1px solid var(--rule-2); border-radius: 10px; background: #fff; }
.ai-reply .ai-chart figcaption { margin-top: 0.3rem; font-size: 0.78rem; color: var(--ink-2); }

/* The model menu scrolls when it is taller than the space above the box, so the first
   entries (TRAC AI, Parashari) can never be cut off the top of the screen. */
.ask-model-menu {
    max-height: min(60vh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ask-model-menu::-webkit-scrollbar { width: 8px; }
.ask-model-menu::-webkit-scrollbar-thumb { background: #D5DDEA; border-radius: 4px; }

/* ==========================================================================
   Usability pass
   ========================================================================== */

/* The TRAC AI page shows only when it is chosen (it used to stay open under every page). */
.trac-panel.ai-panel:not(.is-active) { display: none; }

/* Header bar: where you are, and whose chart it is. */
.trac-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem;
    margin: -0.25rem 0 1rem; padding: 0.55rem 0.9rem;
    background: #F6F7FA; border: 1px solid var(--rule-2); border-radius: 8px;
    color: var(--ink);
}
.trac-crumb { font-size: 0.92rem; color: var(--ink-3); }
.trac-crumb b { color: var(--ink); font-weight: 700; }
.trac-native { font-size: 0.9rem; color: var(--ink-2); }
.trac-native b { color: var(--ink); }
.trac-main.is-ai .trac-topbar { display: none; }

/* Floating "Ask TRAC AI" button. */
.trac-ask-fab {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 40;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.1rem; border: 0; border-radius: 999px;
    background: var(--nav-bg); color: #FFFFFF; font-size: 0.95rem; font-weight: 600;
    box-shadow: 0 6px 18px rgba(16, 27, 49, 0.28); cursor: pointer;
}
.trac-ask-fab:hover { background: var(--nav-bg-2); }
.trac-ask-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.trac-ask-fab .fab-mark { font-size: 1.05rem; color: var(--brass-lt); }
.trac-main.is-ai ~ .trac-ask-fab, .trac-ask-fab.is-hidden { display: none; }

/* Menu search. */
.trac-nav-search {
    display: block; box-sizing: border-box; width: calc(100% - 1.4rem); margin: 0.5rem 0.7rem 0.6rem;
    padding: 0.5rem 0.7rem 0.5rem 2rem; border-radius: 8px; border: 1px solid #CBD2DC;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333B47' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.6rem center;
    color: #000000; font-size: 0.9rem;
}
.trac-nav-search::placeholder { color: #333B47; opacity: 1; }
.trac-nav-search:focus { outline: 2px solid var(--focus); border-color: var(--focus); }
.trac-nav .is-filtered-out { display: none !important; }
.trac-nav-noresult { margin: 0.2rem 0.9rem 0.5rem; font-size: 0.85rem; color: #333B47; }

/* Option strips: a page's settings in one tidy row; a change applies at once. */
.trac-options {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1.2rem;
    margin: 0 0 1rem; padding: 0.7rem 0.9rem;
    background: #F6F7FA; border: 1px solid var(--rule-2); border-radius: 8px;
}
.trac-opt { display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; }
.trac-opt label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.trac-opt select {
    padding: 0.4rem 0.55rem; border: 1px solid var(--rule); border-radius: 6px;
    background: #FFFFFF; color: var(--ink); font-size: 0.92rem;
}
.trac-inline {
    background: #F6F7FA; border: 1px solid var(--rule-2); border-radius: 8px; padding: 0.7rem 0.9rem;
}

/* Tables: a fixed header row and alternate shading for easier reading. */
.trac-tablewrap { border-radius: 6px; }
.trac-table thead th { position: sticky; top: 0; background: #EEF1F6; color: var(--ink); z-index: 1; }
.trac-table tbody tr:nth-child(even) td { background: #FAFBFC; }
.trac-table tbody tr:hover td { background: #F1F4F9; }

/* Page headings a little stronger, sections a little more air. */
.trac-panel > h2 { margin-bottom: 0.6rem; color: var(--ink); }
.trac-panel h3 { margin-top: 1.4rem; color: var(--ink); }
.trac-lede { color: var(--ink-2); }

@media (max-width: 900px) {
    .trac-ask-fab { right: 0.9rem; bottom: 0.9rem; padding: 0.65rem 0.9rem; }
    .trac-opt { min-width: 100%; }
}
@media print {
    .trac-topbar, .trac-ask-fab, .trac-options, .trac-nav-search { display: none !important; }
}

/* ==========================================================================
   System dashboards: four slots, each any chart or page of the system
   ========================================================================== */
.trac-dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; }
.trac-dash-head h2 { margin: 0; }
.trac-dash-layout { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-2); }
.trac-dash-layout button {
    min-width: 2.1rem; padding: 0.3rem 0.55rem; border: 1px solid var(--rule); border-radius: 6px;
    background: #FFFFFF; color: var(--ink); font-weight: 600; cursor: pointer;
}
.trac-dash-layout button.is-on { background: var(--nav-bg); color: #FFFFFF; border-color: var(--nav-bg); }

.trac-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.trac-dash[data-layout="1"] .trac-dash-grid { grid-template-columns: minmax(0, 1fr); }
.trac-dash[data-layout="1"] .trac-dash-slot:nth-child(n+2),
.trac-dash[data-layout="2"] .trac-dash-slot:nth-child(n+3) { display: none; }

.trac-dash-slot {
    display: flex; flex-direction: column; min-width: 0;
    background: #FFFFFF; border: 1px solid var(--rule-2); border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 27, 49, 0.06);
}
.trac-dash-slot-head {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--rule-2);
}
.trac-dash-num {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--nav-bg); color: #FFFFFF; font-size: 0.85rem; font-weight: 700;
}
.trac-dash-view, .trac-dash-style {
    padding: 0.38rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: #FFFFFF; color: var(--ink); font-size: 0.92rem;
}
.trac-dash-view { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.trac-dash-style { flex: 0 0 auto; }
.trac-dash-style[hidden] { display: none; }
.trac-dash-gear {
    flex: 0 0 auto; width: 2rem; height: 2rem; border: 1px solid var(--rule); border-radius: 6px;
    background: #FFFFFF; color: var(--ink); font-size: 1.05rem; cursor: pointer;
}
.trac-dash-gear[hidden] { display: none; }
.trac-dash-gear:hover, .trac-dash-layout button:hover { border-color: var(--ink-3); }

.trac-dash-body { padding: 0.7rem; overflow: auto; max-height: 560px; color: var(--ink); }
.trac-dash[data-layout="1"] .trac-dash-body { max-height: none; }
.trac-dash-body svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.trac-dash[data-layout="1"] .trac-dash-body svg { max-width: 760px; }
.trac-dash-body .trac-cols { display: block; }
.trac-dash-body h3 { font-size: 1rem; margin-top: 0.8rem; }

@media (max-width: 1100px) { .trac-dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .trac-dash-slot-head select, .trac-dash-gear, .trac-dash-layout { display: none; } }

/* ==========================================================================
   System workspaces: four blocks filling the screen, no page scrollbar
   ========================================================================== */
.trac-main.is-dash { overflow: hidden; display: flex; flex-direction: column; padding: 0.75rem 1rem 0.8rem; }
.trac-main.is-dash > .trac-topbar { position: static; flex: 0 0 auto; margin: 0 0 0.6rem; }
.trac-main.is-dash > .trac-panel.trac-dash.is-active { flex: 1 1 auto; min-height: 0; display: flex; }

.trac-dash .trac-dash-grid {
    flex: 1 1 auto; width: 100%; min-height: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.7rem;
}
.trac-dash[data-max] .trac-dash-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.trac-dash[data-max="0"] .trac-dash-slot:not([data-dash-slot="0"]),
.trac-dash[data-max="1"] .trac-dash-slot:not([data-dash-slot="1"]),
.trac-dash[data-max="2"] .trac-dash-slot:not([data-dash-slot="2"]),
.trac-dash[data-max="3"] .trac-dash-slot:not([data-dash-slot="3"]) { display: none; }

.trac-dash .trac-dash-slot { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.trac-dash .trac-dash-slot-head { flex: 0 0 auto; padding: 0.4rem 0.55rem; gap: 0.4rem; }
.trac-dash .trac-dash-view { font-size: 0.9rem; padding: 0.3rem 0.45rem; }
.trac-dash-btn {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border: 1px solid var(--rule); border-radius: 6px;
    background: #FFFFFF; color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer;
}
.trac-dash-btn:hover { border-color: var(--ink-3); }
.trac-dash-note {
    flex: 0 0 auto; padding: 0.15rem 0.5rem; border-radius: 999px; background: #FFF3DC; color: #4A3200;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.trac-dash-note[hidden] { display: none; }

.trac-dash .trac-dash-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; padding: 0.45rem 0.55rem; position: relative; }
.trac-dash .trac-dash-body.is-scroll { overflow: auto; }
.trac-fit { transform-origin: top left; }
.trac-fit.is-chart { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.trac-dash .trac-dash-body .trac-fit.is-chart svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; }
.trac-dash .trac-dash-body .trac-fit:not(.is-chart) svg { max-width: 100%; height: auto; }
.trac-dash-wait { padding: 1rem; color: var(--ink-2); font-size: 0.9rem; }

/* A block's own settings, opened from ⚙. */
.trac-dash-settings {
    position: absolute; top: 2.9rem; right: 0.5rem; z-index: 6;
    width: min(21rem, calc(100% - 1rem)); max-height: calc(100% - 3.4rem); overflow: auto;
    display: grid; gap: 0.55rem; padding: 0.8rem;
    background: #FFFFFF; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 27, 49, 0.18);
}
.trac-dash-settings[hidden] { display: none; }
.trac-dash-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.trac-dash-field select, .trac-dash-field input {
    padding: 0.38rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: #FFFFFF; color: var(--ink); font-size: 0.9rem; font-weight: 400;
}
.trac-dash-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.trac-dash-actions button {
    padding: 0.4rem 0.75rem; border: 1px solid var(--rule); border-radius: 6px; background: #FFFFFF; color: var(--ink); font-size: 0.88rem; cursor: pointer;
}
.trac-dash-actions button.is-primary { background: var(--nav-bg); border-color: var(--nav-bg); color: #FFFFFF; font-weight: 600; }

/* The system menu. */
.trac-systems { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; }
.trac-system.is-current { background: #E9EEF7 !important; color: #000000 !important; font-weight: 700; box-shadow: inset 3px 0 0 var(--brass-lt); }

/* Small screens: blocks stack and the page may scroll. */
@media (max-width: 900px) {
    .trac-main.is-dash { overflow: auto; display: block; }
    .trac-dash .trac-dash-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 420px; }
}

/* ==========================================================================
   Workspace layouts: Focus (1 large + 2), Side by side, Grid, Single
   ========================================================================== */
.trac-dash[data-layout="focus"] .trac-dash-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.trac-dash[data-layout="focus"] .trac-dash-slot[data-dash-slot="0"] { grid-row: 1 / span 2; }
.trac-dash[data-layout="focus"] .trac-dash-slot[data-dash-slot="3"] { display: none; }
.trac-dash[data-layout="duo"] .trac-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.trac-dash[data-layout="duo"] .trac-dash-slot[data-dash-slot="2"],
.trac-dash[data-layout="duo"] .trac-dash-slot[data-dash-slot="3"] { display: none; }
.trac-dash[data-layout="single"] .trac-dash-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.trac-dash[data-layout="single"] .trac-dash-slot:not([data-dash-slot="0"]) { display: none; }
.trac-dash[data-max] .trac-dash-slot { grid-row: auto !important; }

/* Header bar: system, layout switch, the native — one slim line. */
.trac-main.is-dash > .trac-topbar { padding: 0.35rem 0.75rem; gap: 0.4rem 1rem; border-radius: 10px; background: #F7F8FA; }
.trac-crumb b { font-size: 1rem; color: #000000; }
.trac-ws-layout { display: inline-flex; gap: 0.25rem; padding: 0.15rem; background: #FFFFFF; border: 1px solid var(--rule-2); border-radius: 8px; }
.trac-ws-layout button {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem;
    border: 0; border-radius: 6px; background: transparent; color: #000000; font-size: 0.85rem; cursor: pointer;
}
.trac-ws-layout button svg { width: 20px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.trac-ws-layout button:hover { background: #F1F3F7; }
.trac-ws-layout button.is-on { background: var(--nav-bg); color: #FFFFFF; }
.trac-main:not(.is-dash) .trac-ws-layout { display: none; }
.trac-native { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.55rem; font-size: 0.86rem; color: #000000; }
.trac-native span::before { content: "·"; margin-right: 0.55rem; color: #6B7280; }
@media (max-width: 1250px) { .trac-ws-layout button span { display: none; } }

/* Slimmer block headers and the North / South buttons. */
.trac-dash .trac-dash-slot-head { padding: 0.3rem 0.45rem; gap: 0.35rem; }
.trac-dash .trac-dash-view { font-size: 0.88rem; padding: 0.25rem 0.4rem; color: #000000; }
.trac-dash-btn { width: 1.75rem; height: 1.75rem; font-size: 0.95rem; }
.trac-dash-styles { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.trac-dash-styles:empty { display: none; }
.trac-dash-styles button {
    padding: 0.2rem 0.5rem; border: 0; background: #FFFFFF; color: #000000; font-size: 0.8rem; cursor: pointer;
}
.trac-dash-styles button + button { border-left: 1px solid var(--rule); }
.trac-dash-styles button.is-on { background: #E9EEF7; font-weight: 700; }
.trac-dash .trac-dash-slot { border-radius: 10px; }

/* Charts fill their block; text dark, sign numbers grey. */
.trac-dash .trac-dash-body { padding: 0.3rem; }
.trac-dash-body.has-summary { display: flex; flex-direction: column; }
.trac-dash-body.has-summary .trac-fit.is-chart { flex: 1 1 auto; min-height: 0; height: auto; }
.trac-dash:is([data-dash="parashari"], [data-dash="jaimini"], [data-dash="trac"]) .is-chart svg text { fill: #000000; }
.trac-dash:is([data-dash="parashari"], [data-dash="jaimini"], [data-dash="trac"]) .is-chart svg text:is([font-size="15.6"], [font-size="12.65"], [font-size="11.5"]) { fill: #4B5563; }

/* The key facts under the main chart. */
.trac-dash-summary {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.4rem;
    margin-top: 0.2rem; padding: 0.45rem 0.6rem; border-top: 1px solid var(--rule-2);
    font-size: 0.92rem; color: #000000;
}
.trac-dash-summary em { font-style: normal; font-weight: 600; color: #333B47; margin-right: 0.3rem; }

/* Tables in blocks: compact but never smaller than readable. */
.trac-dash-body .trac-table { font-size: 13px; }
.trac-dash-body .trac-table th, .trac-dash-body .trac-table td { padding: 0.28rem 0.5rem; }
.trac-dash-body p, .trac-dash-body li { font-size: 0.9rem; }

/* No footer in the workspace: every pixel goes to the blocks. */
body.ws-on footer.footer { display: none !important; }

/* ==========================================================================
   Menu: clean, black text
   ========================================================================== */
.trac .trac-nav .trac-nav-label {
    margin: 0.9rem 0.6rem 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #333B47;
}
.trac .trac-nav .trac-home-link,
.trac .trac-nav .trac-new-analysis,
.trac .trac-nav .trac-system {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.6rem 0.8rem; margin: 2px 0; min-height: 42px;
    border: 0; border-radius: 10px; background: transparent;
    color: #000000 !important; font-size: 0.95rem; font-weight: 500; text-align: left; cursor: pointer;
    transition: background 0.12s ease;
}
.trac .trac-nav .trac-home-link { background: linear-gradient(90deg, #F4CF85, #F8DFA9); font-weight: 600; }
.trac .trac-nav .trac-home-link:hover { filter: brightness(0.97); }
.trac .trac-nav .trac-new-analysis:hover,
.trac .trac-nav .trac-system:hover { background: #F2F4F8; }
.trac .trac-nav .trac-system.is-current {
    background: #EDF1F8 !important; font-weight: 700;
    box-shadow: inset 3px 0 0 #C88B20;
}
.trac .trac-nav .nav-icon { display: inline-flex; width: 20px; justify-content: center; color: #1F2A44; }
.trac .trac-nav .nav-icon svg { width: 18px; height: 18px; color: #1F2A44 !important; opacity: 1; }
.trac .trac-nav .trac-system.is-current .nav-icon svg { color: #A06A10 !important; }

/* ==========================================================================
   Two-pane workspace: charts on the left, the system's pages on the right.
   The page never scrolls; only the page pane does. The split can be dragged.
   ========================================================================== */
.trac-main.is-dash { overflow: hidden; display: flex; flex-direction: column; padding: 0.6rem 0.8rem 0.7rem; }
.trac-main.is-dash > .trac-topbar { flex: 0 0 auto; margin: 0 0 0.55rem; padding: 0.3rem 0.8rem; }
.trac-main.is-dash .trac-page-footer { display: none; }
.trac-main.is-dash > .trac-panel.trac-ws.is-active {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0, var(--ws-left, 45%)) 12px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
.trac-ws.is-dragging { cursor: col-resize; user-select: none; }
.trac-ws.is-dragging .trac-ws-svg, .trac-ws.is-dragging .trac-ws-page { pointer-events: none; }

.trac-ws-charts, .trac-ws-details {
    position: relative; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    background: #FFFFFF; border: 1px solid var(--rule-2); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 27, 49, 0.06);
    overflow: hidden;
}

/* The bar on top of each pane: tabs, then tools on the right. */
.trac-ws-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--rule-2); background: #FAFBFC;
}
.trac-ws-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.15rem; overflow: hidden; white-space: nowrap; }
.trac-ws-tab {
    flex: 0 0 auto; padding: 0.38rem 0.75rem; border: 0; border-radius: 8px;
    background: transparent; color: #000000; font-size: 0.9rem; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.trac-ws-tab:hover { background: #EEF1F6; }
.trac-ws-tab[aria-selected="true"], .trac-ws-tab.is-on { background: #16233D; color: #FFFFFF; font-weight: 600; }
.trac-ws-tab:focus-visible, .trac-ws-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.trac-ws-more, .trac-ws-pick {
    flex: 0 0 auto; max-width: 11rem; padding: 0.32rem 0.45rem; border: 1px solid var(--rule); border-radius: 8px;
    background: #FFFFFF; color: #000000; font-size: 0.86rem;
}
.trac-ws-more.is-on { border-color: #16233D; font-weight: 600; }
.trac-ws-more[hidden] { display: none; }
.trac-ws-tools { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.trac-ws-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; height: 1.95rem; padding: 0 0.6rem;
    border: 1px solid var(--rule); border-radius: 8px; background: #FFFFFF; color: #000000; font-size: 0.86rem; cursor: pointer;
}
.trac-ws-btn.is-icon { width: 1.95rem; padding: 0; justify-content: center; font-size: 1rem; }
.trac-ws-btn:hover { border-color: #333B47; }
.trac-ws-btn.is-on { background: #FFF3DC; border-color: #C88B20; }
.trac-ws-btn[hidden] { display: none; }
.trac-ws .trac-dash-note { margin: 0.35rem 0.6rem 0; align-self: flex-start; }
.trac-ws .trac-dash-settings { top: 2.9rem; }

/* The large chart: a square as big as the pane allows. */
.trac-ws-stage { flex: 1 1 auto; min-height: 0; display: flex; gap: 0.6rem; padding: 0.5rem 0.6rem 0.2rem; }
.trac-ws-fig { flex: 1 1 0; min-width: 0; min-height: 0; margin: 0; display: flex; flex-direction: column; }
.trac-ws-fig figcaption { flex: 0 0 auto; display: flex; justify-content: center; margin-bottom: 0.35rem; }
.trac-ws-fig figcaption .trac-ws-pick { max-width: 100%; font-weight: 600; }
.trac-ws-svg { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.trac-ws-svg svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; }
.trac-ws:is([data-dash="parashari"], [data-dash="jaimini"], [data-dash="trac"]) .trac-ws-svg svg text { fill: #000000; }
.trac-ws:is([data-dash="parashari"], [data-dash="jaimini"], [data-dash="trac"]) .trac-ws-svg svg text:is([font-size="15.6"], [font-size="12.65"], [font-size="11.5"]) { fill: #4B5563; }
.trac-ws .trac-dash-summary { margin: 0 0.6rem; padding: 0.4rem 0.4rem; border-top: 1px solid var(--rule-2); }

/* Quick previews under the chart: click one to bring it up large. */
.trac-ws-previews { flex: 0 0 auto; display: flex; justify-content: center; gap: 0.6rem; padding: 0.45rem 0.6rem 0.55rem; border-top: 1px solid var(--rule-2); background: #FAFBFC; }
.trac-ws-previews:empty { display: none; }
.trac-ws-thumb {
    flex: 0 1 8.5rem; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.3rem; border: 1px solid var(--rule-2); border-radius: 10px; background: #FFFFFF; cursor: pointer;
}
.trac-ws-thumb:hover { border-color: #C88B20; box-shadow: 0 2px 8px rgba(16, 27, 49, 0.12); }
.trac-ws-thumb-pic { display: block; width: 100%; height: clamp(54px, 10vh, 92px); pointer-events: none; }
.trac-ws-thumb-pic svg { display: block; width: 100%; height: 100%; }
.trac-ws-thumb-label { font-size: 0.8rem; font-weight: 600; color: #000000; }

/* Compare: two charts across the whole workspace; the pages step aside. */
.trac-main.is-dash > .trac-panel.trac-ws.is-active.is-compare { grid-template-columns: minmax(0, 1fr); }
.trac-ws.is-compare .trac-ws-split, .trac-ws.is-compare .trac-ws-details, .trac-ws.is-compare .trac-ws-previews { display: none; }

/* No charts (or no pages): the other pane takes the room. */
.trac-main.is-dash > .trac-panel.trac-ws.is-active.no-charts,
.trac-main.is-dash > .trac-panel.trac-ws.is-active.no-pages { grid-template-columns: minmax(0, 1fr); }
.trac-ws.no-charts .trac-ws-charts, .trac-ws.no-charts .trac-ws-split,
.trac-ws.no-pages .trac-ws-details, .trac-ws.no-pages .trac-ws-split { display: none; }

/* The handle between the panes. */
.trac-ws-split { position: relative; cursor: col-resize; touch-action: none; }
.trac-ws-split::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 42px; transform: translate(-50%, -50%);
    border-radius: 4px; background: #CBD2DC;
}
.trac-ws-split:hover::after, .trac-ws-split:focus-visible::after, .trac-ws.is-dragging .trac-ws-split::after { background: #C88B20; }
.trac-ws-split:focus-visible { outline: none; }

/* Page tabs that do not fit sit under "More". */
.trac-ws-overflow { position: relative; flex: 0 0 auto; }
.trac-ws-overflow[hidden] { display: none; }
.trac-ws-morebtn { border: 1px solid var(--rule); max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.trac-ws-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 14rem; max-height: 60vh; overflow: auto;
    padding: 0.3rem; background: #FFFFFF; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 27, 49, 0.18);
}
.trac-ws-menu[hidden] { display: none; }
.trac-ws-menu .trac-ws-tab { display: block; width: 100%; text-align: left; }

/* The page itself: full pane, scrolling inside. */
.trac-ws-page { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.8rem 1rem 1.2rem; color: #000000; overscroll-behavior: contain; }
.trac-ws-page > .trac-panel { display: none; }
.trac-ws-page > .trac-panel.is-tab { display: block; }
.trac-ws-page > .trac-panel > h2 { display: none; }
.trac-ws-page > .trac-panel > .trac-lede:first-of-type { margin-top: 0; }
.trac-ws-clone[hidden] { display: none; }
.trac-ws-page .trac-tablewrap { overflow-x: auto; }
.trac-ws-page .trac-table thead th { top: -0.8rem; }

/* Stacked panes on narrower screens; the page may then scroll. */
@media (max-width: 1100px) {
    .trac-main.is-dash { overflow: auto; display: block; }
    .trac-main.is-dash > .trac-panel.trac-ws.is-active { display: flex; flex-direction: column; gap: 0.7rem; }
    .trac-ws-split { display: none; }
    .trac-ws-charts { height: min(88vh, 760px); }
    .trac-ws-details { height: 82vh; }
}

/* The chart bar keeps every tab visible: when the pane is narrow, the tools move to a second line. */
.trac-ws-charts { container-type: inline-size; }
.trac-ws-charts > .trac-ws-bar { flex-wrap: wrap; row-gap: 0.3rem; }
.trac-ws-charts .trac-ws-tabs { flex: 1 0 auto; overflow: visible; }
.trac-ws-charts .trac-ws-more { max-width: 9.5rem; }
@container (max-width: 560px) {
    .trac-ws-charts .trac-ws-btn span { display: none; }
    .trac-ws-charts .trac-ws-tab { padding: 0.36rem 0.6rem; }
}

/* ==========================================================================
   Horizontal header: brand, the systems, the native, actions. The side menu is gone,
   so the workspace has the full width of the screen.
   ========================================================================== */
.trac .trac-nav[hidden] { display: none !important; }
.trac .trac-body, .trac.trac-home-mode .trac-body { grid-template-columns: minmax(0, 1fr) !important; }
.trac-header {
    flex: 0 0 auto; position: relative; z-index: 25;
    display: flex; align-items: center; gap: 1.2rem;
    height: 62px; padding: 0 1.1rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF6 100%);
    border-bottom: 1px solid #E6E1D3;
    box-shadow: 0 1px 0 rgba(200, 139, 32, 0.35), 0 4px 14px rgba(16, 27, 49, 0.05);
    color: #000000;
}
.trac-header-brand { flex: 0 0 auto; display: flex; align-items: center; }
.trac-header-brand img { display: block; height: 42px; width: auto; }

.trac-header-systems {
    flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem; border-radius: 14px; background: #F2F3F6; border: 1px solid #E3E6EC;
    overflow-x: auto; scrollbar-width: none;
}
.trac-header-systems::-webkit-scrollbar { display: none; }
.trac-header .trac-system {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem;
    height: 38px; padding: 0 0.95rem; border: 0; border-radius: 10px;
    background: transparent; color: #000000; font: inherit; font-size: 0.95rem; font-weight: 500;
    cursor: pointer; white-space: nowrap; transition: background 0.12s ease, box-shadow 0.12s ease;
}
.trac-header .trac-system:hover { background: #FFFFFF; }
.trac-header .trac-system.is-current {
    background: #FFFFFF; font-weight: 700;
    box-shadow: 0 1px 3px rgba(16, 27, 49, 0.14), inset 0 -2px 0 #C88B20;
}
.trac-header .nav-icon { display: inline-flex; width: 18px; justify-content: center; color: #1F2A44; }
.trac-header .nav-icon svg { width: 17px; height: 17px; }
.trac-header .trac-system.is-current .nav-icon { color: #A06A10; }

.trac-header-native {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end;
    line-height: 1.25; font-size: 0.82rem; color: #1F2937; text-align: right;
}
.trac-header-native b { font-size: 0.95rem; color: #000000; }
.trac-header-native span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trac-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.trac-header-native + .trac-header-actions { margin-left: 0; }
.trac-header-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 0.95rem;
    border: 1px solid #D8DCE3; border-radius: 10px; background: #FFFFFF; color: #000000;
    font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
.trac-header-btn:hover { border-color: #333B47; }
.trac-header-btn.is-primary { background: linear-gradient(90deg, #F4CF85, #F8DFA9); border-color: #E2B65E; color: #000000; }
.trac-header-btn.is-primary:hover { filter: brightness(0.97); }
.trac-header-btn.is-icon { width: 38px; padding: 0; justify-content: center; }
.trac-header-btn:focus-visible, .trac-header .trac-system:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 1250px) {
    .trac-header { gap: 0.7rem; }
    .trac-header-native span:last-child { display: none; }
    .trac-header .trac-system { padding: 0 0.7rem; }
}
@media (max-width: 1000px) {
    .trac-header-native { display: none; }
    .trac-header-btn:not(.is-icon) span:last-child { display: none; }
    .trac-header-btn:not(.is-icon) { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 640px) {
    .trac-header { height: auto; flex-wrap: wrap; padding: 0.4rem 0.6rem; row-gap: 0.4rem; }
    .trac-header-systems { order: 3; flex: 1 1 100%; }
    .trac-header .trac-system span:last-child { font-size: 0.88rem; }
}
.trac-main.is-dash { padding-top: 0.7rem; }

/* One item of a page at a time, chosen above the page. */
.trac-ws-subbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--rule-2); background: #FFFDF7;
}
.trac-ws-subbar[hidden] { display: none; }
.trac-ws-subpick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.86rem; font-weight: 600; color: #000000; }
.trac-ws-subpick select {
    flex: 0 1 22rem; min-width: 0; padding: 0.34rem 0.55rem; border: 1px solid #C9CFD9; border-radius: 8px;
    background: #FFFFFF; color: #000000; font-size: 0.92rem; font-weight: 600;
}
.trac-ws-step { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: #1F2937; }
.trac-ws-step .trac-ws-btn.is-icon { width: 1.8rem; height: 1.8rem; font-size: 1.1rem; }
.trac-part.is-off { display: none; }
.trac-ws-page .trac-part > h3:first-child { margin-top: 0.2rem; }

/* Items chosen one at a time use the whole pane. */
.trac-ws-page .is-off { display: none !important; }
.trac-ws-page .has-parts .trac-split-host, .trac-ws-page .has-parts.trac-split-host { display: block !important; }
.trac-ws-page .has-parts .trac-split-host > .trac-part { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.trac-ws-page .trac-tablewrap { display: block; width: 100%; }
.trac-ws-page .trac-table { width: 100%; }
.trac-ws-page .trac-part svg { max-width: 100%; }

/* A dasha and the sub-periods of its running sign, side by side. */
.trac-twin { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.6rem 1.4rem; align-items: start; }
.trac-twin-side > h3:first-child { margin-top: 0; }
.trac-twin-side:empty { display: none; }

/* One list for the charts instead of a row of short names. */
.trac-ws-tabs[hidden] { display: none; }
.trac-ws-charts .trac-ws-more { flex: 1 1 auto; max-width: none; min-width: 9rem; font-size: 0.95rem; font-weight: 600; padding: 0.38rem 0.55rem; }
.trac-ws-charts > .trac-ws-bar { flex-wrap: nowrap; }
.trac-ws-charts .trac-ws-stage { padding: 0.45rem 0.55rem 0.25rem; }

/* Text lines up with the tables under it and runs the full width; table cells align alike. */
.trac-lede, .trac-hint, .trac-ws-page p { max-width: none; }
.trac-ws-page > .trac-panel > *, .trac-ws-page .trac-part > * { margin-left: 0; margin-right: 0; }
.trac-ws-page .trac-table:not(.sy-grid) th, .trac-ws-page .trac-table:not(.sy-grid) td { text-align: left; vertical-align: middle; }
.trac-ws-page .trac-table th { white-space: nowrap; }

/* Long readings wrap in their own column; the rest stays on one line. */
.trac-ws-page .trac-table td.is-wrap, .trac-ws-page .trac-table th.is-wrap { white-space: normal; min-width: 15rem; line-height: 1.45; }
.trac-ws-page .trac-table.has-wrap { width: 100%; }
.trac-ws-page .trac-table td { vertical-align: top; }

/* Tables on white: no grey heading band, no shaded rows. */
.trac-ws-page .trac-table, .trac-ws-page .trac-table thead th, .trac-ws-page .trac-table tbody tr td,
.trac-ws-page .trac-table tbody tr:nth-child(even) td, .trac-ws-page .trac-table tr.lagna-row td { background: #FFFFFF; }
.trac-ws-page .trac-table thead th { color: #000000; font-weight: 700; border-bottom: 2px solid #1F2A44; }
.trac-ws-page .trac-table tbody tr:hover td { background: #F7F8FA; }
.trac-ws-page .trac-table tr.lagna-row td { font-weight: 700; }

/* Chart text a little lighter: planets and degrees in regular weight. */
.trac-ws:is([data-dash="parashari"], [data-dash="jaimini"], [data-dash="trac"]) .trac-ws-svg svg text { font-weight: 400; }

/* Maximised chart: the chart pane covers the whole screen. */
.trac-ws.is-max .trac-ws-charts {
    position: fixed; inset: 0; z-index: 300; border-radius: 0; border: 0; box-shadow: none; background: #FFFFFF;
}
.trac-ws.is-max .trac-ws-stage { padding: 0.6rem 1rem 0.4rem; }
.trac-ws.is-max .trac-ws-btn[data-ws-max] { background: #FFF3DC; border-color: #D9A441; }
body.ws-max-on { overflow: hidden; }

/* Tables with a wrapping column: headings may wrap too, so the table never runs past the pane. */
.trac-ws-page .trac-table.has-wrap th { white-space: normal; }
.trac-ws-page .trac-table td.is-wrap, .trac-ws-page .trac-table th.is-wrap { min-width: 11rem; }
.trac-ws-page .trac-table td .trac-hint { margin: 0.2rem 0 0; font-size: 0.78rem; white-space: normal; }

.trac-nowrap{white-space:nowrap}