/* ==========================================================================
   YEARLY EPHEMERIS - shared stylesheet for /ephemeris-YYYY.html
   ==========================================================================
   One stylesheet for all five year pages (2026 to 2030). The token layer and
   the table rules are lifted from ephemeris.html so the yearly pages and the
   monthly page read as one instrument; only the rasi-chart animator at the top
   is new.

   Palette: cool slate + Age blue #096DD2 throughout the UI. The graha colours
   in the script are the TRADITIONAL ones (Surya copper, Guru golden-yellow,
   Ketu smoky saffron) - semantic content, not UI decoration, and therefore
   the same sanctioned exception ephemeris.html already carries.
   ========================================================================== */

/* ============================
   THEME TOKENS
   ============================
   ONE ground, deliberately.

   ephemeris.html still carries [data-theme="dark"], ="light" and
   ="newspaper" blocks, but they are dead there: its New Age :root block is
   declared last and ties them on specificity (0,1,0), so source order hands
   every token to :root whatever data-theme says. Measured on the live page
   before writing this file - setting data-theme="dark" moves no token, and
   the page ships no theme toggle. They are therefore not copied here, so
   nobody later debugs a dark mode this page never had.

   Token NAMES are inherited from ephemeris.html so the two stylesheets stay
   diffable. --gold is Age blue #096DD2; there is no gold in the UI.
   ============================ */
:root {
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'PT Sans', system-ui, -apple-system, sans-serif;
    --radius: 2px;
    --radius-sm: 2px;

    --bg-page: #FFFFFF;
    --bg-surface: #F4F5F7;
    --bg-card: #FFFFFF;

    --text-primary: #232323;
    --text-secondary: #555555;
    --text-muted: #5A6474;

    --gold: #096DD2;
    --gold-dim: #0B4FA8;
    --gold-border: #E4E4E4;
    --gold-subtle: rgba(9, 109, 210, 0.06);
    --border: #E4E4E4;

    --red: #B42318;
    --green: #067647;

    --table-row-alt: #F8FAFC;
    --table-row-hover: rgba(9, 109, 210, 0.07);
    --table-today-bg: rgba(9, 109, 210, 0.10);
    --table-header-bg: #F4F5F7;
    --table-group-bg: #EDF1F6;

    --input-bg: #FFFFFF;
}

/* ============================
   BASE
   ============================ */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-primary);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    padding: 6px 12px; background: var(--gold); color: #FFFFFF;
    z-index: 9999;
}
.skip-link:focus { left: 0; }

/* ============================
   CONTROLS BAR
   ============================ */
.controls-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
}
.controls-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.year-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.year-nav__label {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    margin-right: 2px;
}
.year-pill {
    padding: 4px 12px;
    border: 1px solid var(--gold-border);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.year-pill:hover { background: var(--gold-subtle); color: var(--gold); text-decoration: none; }
.year-pill.current {
    background: var(--gold);
    border-color: var(--gold);
    color: #FFFFFF;
    cursor: default;
}
.year-pill.current:hover { text-decoration: none; }

.nav-select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.75rem;
    background: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
}
.nav-select:focus { border-color: var(--gold); outline: none; }

.name-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}
.toggle-label {
    font-size: 0.63rem; color: var(--text-muted); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.toggle-pill { display: flex; border: 1px solid var(--gold-border); border-radius: 20px; overflow: hidden; }
.tpill-opt {
    padding: 3px 11px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.63rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.tpill-opt.active { background: var(--gold-subtle); color: var(--gold); }
.tpill-opt:hover:not(.active) { background: var(--table-row-hover); }

/* State / dignity legend */
.planet-legend {
    padding: 7px 24px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.planet-legend-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.pl-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pl-name { font-weight: 600; }
.pl-meaning { opacity: 0.7; font-size: 0.6rem; }

/* ============================
   MAIN
   ============================ */
main {
    flex: 1;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 24px 40px;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.section-head h2 {
    font-family: var(--font-heading);
    font-size: 1.24rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.01em;
}

.status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
    min-height: 22px;
}
/* No spinner: nothing on this page is computed at load. */

/* ==========================================================================
   RASI CHART ANIMATOR
   ========================================================================== */
.animator {
    display: grid;
    grid-template-columns: minmax(320px, 520px) 1fr;
    gap: 28px;
    align-items: start;
    margin-bottom: 40px;
}

.chart-panel { min-width: 0; }

/* South Indian rasi chart: fixed signs, 4x4 grid, hollow centre. */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    aspect-ratio: 1 / 1;
    position: relative;
}
/* The twelve rāśi cells: white ground, bright Age-blue rule. The chart is the
   one place on the page that is a diagram rather than a document, so it takes
   the accent at full strength instead of the hairline grey used elsewhere. */
.rasi-box {
    background: #FFFFFF;
    border: 1.5px solid #096DD2;
    position: relative;
    min-width: 0;
    transition: background 0.2s, border-color 0.2s;
}

/* Janma Rāśi: a highlighter mark. Lemon, not ochre - a pop yellow with no
   red in it, so it stays clear of the warm-earth tones the palette rule bans
   and reads as a marker pen rather than a gold wash. */
.rasi-box.janma-sign {
    background: #FFF7A8;
    border-color: #F5C400;
    box-shadow: inset 0 0 0 1.5px #F5C400;
}
.rasi-box.janma-sign .rasi-box__house { color: #8A6D00; }
.rasi-box.janma-sign .rasi-box__name { color: #8A6D00; }
.rasi-box__name {
    position: absolute;
    bottom: 4px; right: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    pointer-events: none;
    text-align: right;
    line-height: 1.15;
}
.rasi-box__house {
    position: absolute;
    top: 4px; left: 6px;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--gold);
    pointer-events: none;
}
.rasi-box.janma-sign .rasi-box__house::after {
    content: ' Janma';
    font-weight: 600;
    letter-spacing: 0.03em;
}

.chart-centre {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    text-align: center;
    z-index: 5;
}
.centre-date {
    font-family: var(--font-heading);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.centre-weekday {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.centre-moon { font-size: 1.5rem; line-height: 1; margin-bottom: 2px; }
.centre-tithi { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.centre-paksha {
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.centre-nakshatra { font-size: 0.62rem; color: var(--text-secondary); margin-top: 5px; }

/* Bead layer sits above the boxes; beads are placed in percentage
   coordinates along each sign's 0 to 30 degree strip. */
.bead-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
.bead {
    position: absolute;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    line-height: 1;
    color: #FFFFFF;
    border: 2px solid var(--bg-page);
    transform: translate(-50%, -50%);
    transition: left 0.28s ease, top 0.28s ease;
    z-index: 20;
}
/* Gochara verdict, the chart's primary reading: green when the graha stands
   in a favourable house from the Janma Rāśi with its vedha house empty, red
   otherwise (including a favourable house obstructed by vedha). The graha is
   identified by its glyph, so the disc is free to carry the verdict. */
.bead--good { background: #16A34A; }
.bead--bad  { background: #DC2626; }
.bead--retro::after {
    content: '\211E';
    position: absolute;
    top: -7px; right: -8px;
    background: var(--red);
    color: #FFFFFF;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 6px;
    border: 1.5px solid var(--bg-page);
}
.bead--combust::before {
    content: '\263C';
    position: absolute;
    bottom: -7px; right: -8px;
    background: var(--text-muted);
    color: #FFFFFF;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 6px;
    border: 1.5px solid var(--bg-page);
}

/* ============================
   SCRUBBER
   ============================ */
.scrubber-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}
.play-btn {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gold);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.play-btn:hover { background: var(--gold-dim); }
.scrubber-wrap { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scrubber-wrap input[type="range"] {
    width: 100%;
    cursor: pointer;
    accent-color: var(--gold);
}
.scrubber-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.step-btn {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--gold-border);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.step-btn:hover { background: var(--gold-subtle); }

/* ============================
   SPHUTA PANEL
   ============================ */
.sphuta-panel { min-width: 0; }
.sphuta-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sphuta-title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.janma-picker { display: flex; align-items: center; gap: 6px; }
.janma-picker label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* Six columns do not fit a 375px phone, and html/body carry overflow-x:clip,
   so without a scroll port of its own the Gochara column is silently cut off
   rather than reachable. Wide content scrolls inside its own container. */
.sphuta-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sphuta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}
.sphuta-table th {
    text-align: left;
    padding: 7px 8px;
    background: var(--table-header-bg);
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold-border);
}
.sphuta-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.sphuta-table tbody tr:nth-child(even) { background: var(--table-row-alt); }
.sphuta-graha { font-weight: 700; white-space: nowrap; }
.sphuta-deg { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sphuta-house { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.sphuta-state { font-size: 0.68rem; color: var(--text-secondary); }
.tag {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    border-radius: 10px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.tag--retro { color: var(--red); }
.tag--combust { color: var(--text-muted); }

/* Gochara verdict tags, matching the disc colours in the chart. */
.tag--good { color: #FFFFFF; background: #16A34A; border-color: #16A34A; }
.tag--bad  { color: #FFFFFF; background: #DC2626; border-color: #DC2626; }
.tag--vedha { color: #8A6D00; background: #FFF7A8; border-color: #F5C400; }

/* Nakṣatra and its Vimśottarī lord. */
.sphuta-nak { font-size: 0.72rem; line-height: 1.35; }
.sphuta-nak .nak-lord { font-weight: 700; color: var(--gold); }
.sphuta-nak .nak-pada {
    display: block;
    font-size: 0.62rem;
    color: var(--text-muted);
}

/* ==========================================================================
   YEARLY TABLE
   ========================================================================== */
.month-jump {
    position: sticky;
    top: var(--p2-masthead-h, 0px);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0;
    margin-bottom: 10px;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
}
.month-chip {
    padding: 4px 11px;
    border: 1px solid var(--gold-border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.month-chip:hover { background: var(--gold-subtle); color: var(--gold); }
.month-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #FFFFFF;
}

.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.eph-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.eph-table th, .eph-table td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.eph-table thead tr.col-row th {
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 8px;
    border-bottom: 2px solid var(--gold-border);
}
.eph-table thead tr.col-row th.hdr-planet { border-top: 2px solid currentColor; min-width: 78px; }
.eph-table thead tr.col-row th.hdr-dt { min-width: 28px; text-align: left; padding-left: 8px; }

/* Sticky header, applied via a JS scroll transform. CSS position:sticky
   is broken inside overflow-x:auto parents because the browser coerces
   overflow-y to auto, trapping sticky children. */
#ephHead {
    position: relative;
    z-index: 5;
    will-change: transform;
}

.eph-table tbody tr { transition: background 0.12s; }
.eph-table tbody tr:nth-child(even) { background: var(--table-row-alt); }
.eph-table tbody tr:hover { background: var(--table-row-hover); }
.eph-table tbody tr.today-row { background: var(--table-today-bg); }

/* Month band: the anchor each month chip jumps to.
   scroll-margin-top must sit on the ROW (the scroll target), not on its cell,
   and must clear both pieces of sticky chrome above it: the masthead, whose
   live height /taem-translate.js publishes as --p2-masthead-h, and the month
   strip itself, whose measured height the script writes to --eph-jump-h.
   Without this the band lands at viewport 0, hidden behind both. */
.eph-table tbody tr.month-band {
    scroll-margin-top: calc(var(--p2-masthead-h, 0px) + var(--eph-jump-h, 44px) + 10px);
}
.eph-table tbody tr.month-band td {
    background: var(--table-group-bg);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--gold-border);
}
.eph-table tbody tr.month-band:hover { background: var(--table-group-bg); }
.month-band__days {
    float: right;
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.eph-table td.dt { font-weight: 700; font-size: 0.78rem; color: var(--text-primary); }
.eph-table td.dy { font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); }
.eph-table td.dy.sun { color: var(--red); }
.eph-table td.dy.sat { color: var(--gold); }

/* ==========================================================================
   BAKED POSITION CELLS
   ==========================================================================
   The table is rendered at build time, so its markup is tuned for size: a
   year is 3285 position cells, and every character is paid 3285 times. Each
   cell is

       <td class="STATE"><b>23°</b><i>Kar</i><u>Can</u><s>55'27"</s><em>℞</em></td>

   b  degree        i  Saṃskṛta rāśi abbreviation
   s  minutes/sec   u  English rāśi abbreviation
   em state marker (℞ vakra, or ☼ asta with class cb)

   Bare element selectors rather than class names are what keep the file
   small; they are scoped to .eph-table td so nothing else on the page is
   affected. Both spellings ship in the markup and are swapped in CSS below,
   which keeps the name toggle free of JavaScript and leaves both readable to
   a search engine.

   Single-letter state classes on the td:
   u ucca  n nīca  m mūlatrikoṇa  k svakṣetra  v vakra  a asta  g ingress
   ========================================================================== */
.eph-table td b,
.eph-table td i,
.eph-table td u,
.eph-table td s,
.eph-table td em {
    display: block;
    font-style: normal;
    text-decoration: none;
    line-height: 1.25;
}
.eph-table td b { font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.eph-table td i,
.eph-table td u { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; }
.eph-table td s { font-size: 0.68rem; font-variant-numeric: tabular-nums; opacity: 0.72; }
.eph-table td em { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.03em; color: var(--red); }
.eph-table td em.cb { color: var(--text-muted); }

/* Degree and abbreviation share a line; the rest stack under them. */
.eph-table td b, .eph-table td i, .eph-table td u {
    display: inline-block;
    vertical-align: baseline;
}
.eph-table td i, .eph-table td u { margin-left: 3px; }

/* State colours. Combustion outranks dignity, which outranks retrogression,
   matching the order the renderer applies them. */
.eph-table td.u { color: #B8860B; }
.eph-table td.n { color: #B42318; }
.eph-table td.m { color: #0369A1; }
.eph-table td.k { color: #067647; }
.eph-table td.v { color: #7E22CE; }
.eph-table td.a { color: #64748B; }

/* Sign ingress: a rule in the graha's own colour above the figure. */
.eph-table td.g {
    border-top: 2px solid currentColor;
    padding-top: 4px;
}

/* ============================
   NAME LANGUAGE SWITCH
   ============================
   Pure CSS. i = Saṃskṛta, u = English, in the table body, the column headers
   and the rāśi legend alike. */
.latin-names .eph-table td i,
.latin-names .eph-table th i,
.latin-names .sign-legend-abbr i { display: none; }
.eph-table td u,
.eph-table th u,
.sign-legend-abbr u { display: none; }
.latin-names .eph-table td u { display: inline-block; }
.latin-names .eph-table th u,
.latin-names .sign-legend-abbr u { display: inline; }
.eph-table th i, .sign-legend-abbr i { font-style: normal; }
.eph-table th u, .sign-legend-abbr u { text-decoration: none; }

/* ============================
   SIGN LEGEND
   ============================ */
.sign-legend {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.sign-legend-item { display: inline-flex; align-items: baseline; gap: 4px; }
.sign-legend-abbr { font-weight: 700; color: var(--text-secondary); }

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1024px) {
    .animator { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 768px) {
    .eph-table { min-width: auto; font-size: 0.6rem; }
    .eph-table th, .eph-table td { padding: 3px 2px; min-width: 0 !important; }
    .eph-lon { min-width: 0; padding: 2px 1px; }
    .controls-inner { flex-direction: column; align-items: flex-start; }
    .name-toggles { margin-left: 0; }
    main { padding: 12px 12px 32px; }
    .bead { width: 24px; height: 24px; font-size: 0.68rem; }
    .sphuta-table { font-size: 0.7rem; }
    .sphuta-table th, .sphuta-table td { padding: 5px 6px; }
    .sphuta-nak { font-size: 0.66rem; }
    .centre-date { font-size: 0.86rem; }
    .centre-moon { font-size: 1.15rem; }
}

/* ============================
   PRINT
   ============================ */
@media print {
    body { background: #fff; color: #000; }
    .controls-bar, .planet-legend, .month-jump,
    .p2-masthead, .p2-footer, .animator, .status-bar { display: none !important; }
    .table-wrapper { border: 1px solid #000; overflow: visible; }
    .eph-table { font-size: 0.6rem; min-width: unset; }
    .eph-table td, .eph-table th { padding: 2px 3px; color: #000 !important; border-color: #ccc !important; }
    .eph-table thead tr.col-row th { background: #eee !important; color: #333 !important; border-bottom: 1px solid #999 !important; }
    .eph-table tbody tr.month-band td { background: #ddd !important; color: #000 !important; }
}