/* =====================================================================================
   TRAC shell: the main menu on the left, the section tabs under the header, and the
   two columns (chart, table or calculation on the left; its reading on the right).
   Loaded after the theme on every page that uses the shell.
   ===================================================================================== */
:root {
    --sh-navy: #14254D;
    --sh-ink: #1F2937;
    --sh-muted: #5B6475;
    --sh-org: #F05A1A;
    --sh-org-2: #E8650A;
    --sh-peach: #FFF1E7;
    --sh-peach-2: #FFE4D3;
    --sh-cream: #FDF7F1;
    --sh-line: #ECE6DF;
    --sh-side: 248px;
}

/* ---- The header loses its menu row: the menu is on the left now ---- */
.th .th-menu { display: none !important; }
.sh-burger { display: none; width: 42px; height: 40px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; color: var(--sh-navy);
    align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.sh-burger svg { width: 22px; height: 22px; }

/* ---- The main menu ---- */
.side-nav, .side-nav *, .sec-tabs, .sec-tabs *, .two-col, .two-col * { box-sizing: border-box; }
/* The menu is deep navy so it stands apart from the cream pages and white cards (22 Oct). */
.side-nav { background: linear-gradient(180deg, #16295A 0%, #0F1C3D 100%); border-right: 0; box-shadow: 2px 0 14px rgba(15,28,61,.12);
    padding: 18px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 6px; }
.side-nav .sn-item { display: flex; align-items: center; gap: 13px; padding: 11px 15px; border-radius: 12px; border: 0; background: transparent;
    font: inherit; font-size: 15.5px; color: #E6EBF5; text-decoration: none; text-align: left; cursor: pointer; width: 100%; }
.side-nav .sn-item svg { width: 22px; height: 22px; flex: 0 0 auto; color: #9FB3DD; }
.side-nav .sn-item:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
.side-nav .sn-item:hover svg { color: #C9D6F0; }
.side-nav .sn-item:focus-visible { outline: 2px solid #F5B942; outline-offset: 1px; }
.side-nav .sn-item.is-on { background: var(--sh-peach); color: #C2410C; font-weight: 600; }
.side-nav .sn-item.is-on svg { color: var(--sh-org-2); }
.side-nav .sn-new { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .02em; background: var(--sh-org); color: #fff; border-radius: 6px; padding: 2px 6px; }
.side-nav .sn-item.is-on .sn-new { display: none; }
.side-nav .sn-sep { height: 1px; background: rgba(255,255,255,.14); margin: 12px 10px; }

/* ---- Pages with the shell (site, Panchang, Numerology, Vastu) ---- */
.app-wrap { display: grid; grid-template-columns: var(--sh-side) minmax(0, 1fr); align-items: stretch; min-height: calc(100vh - 120px); }
.app-wrap > .side-nav { position: sticky; top: 0; align-self: start; height: 100vh; }
.app-col { min-width: 0; display: flex; flex-direction: column; }
.app-col > main, .app-col > .app-body { flex: 1 0 auto; }

/* ---- The chart page: menu, then the tabs over the workspace ---- */
body .trac .trac-body, body .trac.trac-home-mode .trac-body { grid-template-columns: var(--sh-side) minmax(0, 1fr) !important; }
.trac .trac-body > .trac-nav { display: none !important; }
.trac .trac-body > .side-nav { grid-column: 1; }
.trac .trac-col { grid-column: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.trac .trac-col > .trac-main { flex: 1 1 auto; min-height: 0; }
.trac-home-mode .trac-col { overflow-y: auto; }

/* ---- Section tabs ---- */
.sec-tabs { background: #fff; border-bottom: 1px solid var(--sh-line); padding: 10px 22px 0; position: relative; z-index: 20; }
.sec-tabs[hidden] { display: none !important; }
.sec-crumb { font-size: 12.5px; color: var(--sh-muted); margin-bottom: 6px; }
.sec-crumb b { color: var(--sh-navy); font-weight: 600; }
.sec-row { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.sec-tab, .sec-tab-a { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 12px 12px; border-radius: 12px 12px 0 0;
    border: 0; background: transparent; font: inherit; text-decoration: none; color: inherit; cursor: pointer; flex: 0 0 auto; text-align: left; }
.sec-tab:hover, .sec-tab-a:hover { background: #FBF3EC; }
.sec-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--sh-peach); display: grid; place-items: center; flex: 0 0 auto; }
.sec-ic svg { width: 20px; height: 20px; color: var(--sh-org); }
.sec-tx b { display: block; font-size: 14.5px; color: var(--sh-navy); white-space: nowrap; font-weight: 600; }
.sec-tx small { display: block; font-size: 11.5px; color: var(--sh-muted); white-space: nowrap; margin-top: 1px; }
.sec-caret { font-size: 10px; color: var(--sh-muted); margin-left: 2px; }
.sec-tab.is-on, div.sec-tab.is-on > .sec-tab-a { background: linear-gradient(#FFF7F1, #fff); }
.sec-tab.is-on .sec-ic { background: var(--sh-org); }
.sec-tab.is-on .sec-ic svg { color: #fff; }
button.sec-tab.is-on::after, a.sec-tab.is-on::after, div.sec-tab.is-on > .sec-tab-a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px; background: var(--sh-org); }
div.sec-tab { padding: 0; }
/* The pages of a Panchang tab, shown under it when the pointer rests on it. */
.sec-tabs[data-sec-tabs="panchang"] .sec-row { overflow: visible; flex-wrap: wrap; }
.sec-drop { display: none; position: absolute; top: 100%; left: 0; min-width: 270px; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--sh-line);
    border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px rgba(20, 37, 77, .16); padding: 8px; z-index: 40; }
div.sec-tab:hover > .sec-drop, div.sec-tab:focus-within > .sec-drop, div.sec-tab.is-open > .sec-drop { display: block; }
.sec-drop-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); padding: 6px 10px 6px; }
.sec-drop-i { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 10px; font-size: 14px; color: var(--sh-navy); text-decoration: none; font-weight: 500; }
.sec-drop-i:hover { background: #FBF3EC; }
.sec-drop-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--sh-peach); display: grid; place-items: center; flex: 0 0 auto; }
.sec-drop-ic svg { width: 15px; height: 15px; color: var(--sh-org); }
.sec-drop-i.is-on { background: #fff; box-shadow: 0 2px 10px rgba(20, 37, 77, .10); color: #9A3412; font-weight: 700; }
.sec-drop-i.is-on .sec-drop-ic { background: var(--sh-org); }
.sec-drop-i.is-on .sec-drop-ic svg { color: #fff; }
.sec-drop-i em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--sh-muted); }

/* ---- Workspace: the left column chooses, the right column reads ---- */
.ws-seg { display: flex; gap: 4px; background: #F6F1EC; border-radius: 12px; padding: 4px; margin: 0 0 10px; }
.ws-seg button { flex: 1; border: 0; background: transparent; padding: 8px 4px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600; color: #5B6475; cursor: pointer; white-space: nowrap; }
.ws-seg button small { font-weight: 500; color: #9AA0AA; margin-left: 4px; font-size: 12px; }
.ws-seg button.is-on { background: #fff; color: var(--sh-org); box-shadow: 0 2px 8px rgba(20, 37, 77, .10); }
.ws-seg button.is-on small { color: #F7A77C; }
.ws-pagebar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ws-combo { flex: 1; min-width: 0; height: 40px; border: 2px solid #F7A77C; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 700;
    color: var(--sh-navy); background: #fff; cursor: pointer; }
.ws-combo:focus { outline: 2px solid #FDBA8C; outline-offset: 1px; }
.trac-ws .trac-ws-charts .trac-ws-more { border: 2px solid #F7A77C !important; font-weight: 700 !important; color: var(--sh-navy) !important; }
.trac-ws.mode-page .trac-ws-charts > .trac-ws-bar,
.trac-ws.mode-page .trac-ws-charts > [data-ws-chart-note],
.trac-ws.mode-page .trac-ws-charts > [data-ws-chart-settings],
.trac-ws.mode-page .trac-ws-charts > .trac-ws-stage { display: none !important; }
.trac-ws:not(.mode-page) .ws-left-pages { display: none !important; }
.ws-left-pages { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ws-left-pages > .trac-ws-page { flex: 1 1 auto; min-height: 0; overflow: auto; }
.trac-ws.mode-page { --ws-left: 58% !important; }
.trac-ws .trac-ws-details > .trac-ws-bar, .trac-ws .trac-ws-details > .trac-ws-groups { display: none !important; }
.ws-readbar { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; }
.ws-readbar .ws-read-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ws-readbar .ws-read-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-org); display: inline-block; }
.ws-readbar .ws-combo { height: 36px; font-size: 14px; }
.ws-read { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 4px 24px; }
.ws-read .ws-auto { font-size: 15px; line-height: 1.65; color: #2A3242; }
.ws-read .ws-auto h3 { font-size: 17px; color: var(--sh-navy); margin: 0 0 10px; }
.ws-read .ws-auto h4 { font-size: 15px; color: var(--sh-navy); margin: 16px 0 6px; }
.ws-read .ws-auto p { margin: 0 0 10px; }
.ws-read .ws-auto .ws-verdict { display: flex; gap: 12px; align-items: flex-start; background: #F2FBF5; border: 1px solid #CDEBD8; border-radius: 12px; padding: 11px 14px; margin: 0 0 12px; }
.ws-read .ws-auto .ws-verdict.is-care { background: #FFF8EC; border-color: #F5DFB5; }
.ws-read .ws-auto .ws-verdict::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; background: #1F8A4C; }
.ws-read .ws-auto .ws-verdict.is-care::before { background: #B7791F; }
.ws-read .ws-auto .ws-verdict b { color: var(--sh-navy); }
.ws-read .ws-wait { color: var(--sh-muted); padding: 18px 4px; }
.ws-read > .trac-panel { display: none !important; }
.ws-read > .trac-panel.is-read { display: block !important; }
.ws-read .ws-ask { margin-top: 16px; display: flex; gap: 8px; }
.ws-read .ws-ask input { flex: 1; height: 42px; border: 1px solid var(--sh-line); border-radius: 22px; padding: 0 16px; font: inherit; }
.ws-read .ws-ask button { height: 42px; border: 0; border-radius: 22px; padding: 0 18px; background: var(--sh-org); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ---- Two columns on the other pages ---- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.two-col-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); margin: 0 0 10px 4px; display: flex; align-items: center; gap: 8px; }
.two-col-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-navy); display: inline-block; }
.two-col-h.is-r i { background: var(--sh-org); }

/* ---- Prediction ---- */
.trac-main.is-dash > #panel-dash-prediction.is-active { display: block; height: 100%; overflow-y: auto; }
.trac-pred [data-pred-chart] svg { max-width: 420px; width: 100%; height: auto; display: block; margin: 0 auto; }
.pred-wrap { padding: 18px 22px 28px; }
.pred-who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sh-muted); margin-bottom: 14px; flex-wrap: wrap; }
.pred-who b { color: var(--sh-navy); }
.pred-card { background: #fff; border: 1px solid var(--sh-line); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; }
.pred-card h3 { font-size: 16px; color: var(--sh-navy); margin: 0 0 10px; }
.pred-card table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pred-card th { text-align: left; font-weight: 600; color: var(--sh-muted); font-size: 12px; padding: 7px 8px; border-bottom: 1px solid var(--sh-line); background: #FAF8F6; }
.pred-card td { padding: 7px 8px; border-bottom: 1px solid #F3EFEA; vertical-align: top; }
.pred-sys { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F3EFEA; font-size: 14px; }
.pred-sys b { color: var(--sh-navy); }
.pred-pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 20px; padding: 2px 9px; }
.pred-pill.g { background: #E6F6EC; color: #1F8A4C; }
.pred-pill.a { background: #FDF1DC; color: #B7791F; }
.pred-pill.n { background: #EEF0F4; color: #4B5563; }
.pred-subject { border-top: 1px solid var(--sh-line); padding-top: 14px; margin-top: 14px; }
.pred-subject:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.pred-subject h4 { font-size: 15.5px; color: var(--sh-navy); margin: 0 0 8px; }
.pred-bar { height: 8px; border-radius: 5px; background: #F1ECE6; overflow: hidden; }
.pred-bar i { display: block; height: 100%; background: var(--sh-org); }
.pred-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pred-month { border: 1px solid var(--sh-line); border-radius: 14px; padding: 12px 14px; background: #fff; }
.pred-month.is-now { border-color: #F7A77C; box-shadow: 0 4px 14px rgba(240, 90, 26, .12); }
.pred-month h4 { margin: 0 0 6px; font-size: 15px; color: var(--sh-navy); display: flex; justify-content: space-between; align-items: center; }
.pred-month p { margin: 4px 0; font-size: 13.5px; line-height: 1.5; color: #374151; }
.pred-tabs-note { color: var(--sh-muted); font-size: 13px; }

/* ---- Small screens: the menu slides in from the left ---- */
@media (max-width: 1000px) {
    .sh-burger { display: inline-flex; }
    .app-wrap, body .trac .trac-body, body .trac.trac-home-mode .trac-body { grid-template-columns: minmax(0, 1fr) !important; }
    .side-nav { position: fixed !important; left: 0; top: 0; bottom: 0; height: 100dvh !important; width: 270px; z-index: 200; transform: translateX(-105%);
        transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
    body.sn-open .side-nav { transform: none; }
    body.sn-open::after { content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 150; }
    .trac .trac-col { grid-column: 1; }
    .two-col { grid-template-columns: minmax(0, 1fr); }
    .sec-tx small { display: none; }
}

/* ---- Home ---- */
.trac-home-mode .side-nav [data-home] { display: flex !important; }
.trac-home-mode .trac-main { overflow-y: auto !important; }
.trac .trac-home { justify-content: flex-start !important; height: auto !important; min-height: 100%; overflow: visible !important; padding: 36px 24px 10px !important; }
.trac .trac-home .site-footer { position: static !important; margin-top: 30px !important; }
.home-ex { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px auto 0; max-width: 1060px; position: relative; z-index: 1; }
.home-ex button { font: inherit; font-size: 13px; border: 1px solid var(--sh-line); background: #fff; border-radius: 20px; padding: 6px 12px; color: #3B4660; cursor: pointer; }
.home-ex button:hover { border-color: #F7A77C; color: var(--sh-org); }
.home-cards { width: min(1060px, 100%); margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 1; text-align: left; }
.home-card { background: #fff; border: 1px solid var(--sh-line); border-radius: 16px; padding: 16px 18px; }
.home-card h3 { font-size: 16px; color: var(--sh-navy); margin: 0 0 10px; display: flex; align-items: center; gap: 9px; font-family: inherit; font-weight: 600; }
.home-card h3 svg { width: 20px; height: 20px; color: var(--sh-org); }
.home-tag { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--sh-muted); background: #F3F4F6; border-radius: 6px; padding: 3px 8px; }
.home-tag:empty { display: none; }
.home-card table { width: 100%; border-collapse: collapse; font-size: 14px; }
.home-card td { padding: 6px 4px; border-bottom: 1px solid #F3EFEA; }
.home-card td:first-child { color: var(--sh-muted); }
.home-muted { color: var(--sh-muted); font-size: 14px; margin: 0; }
.home-card .ws-verdict { display: flex; gap: 10px; background: #F2FBF5; border: 1px solid #CDEBD8; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; }
.home-card .ws-verdict.is-care { background: #FFF8EC; border-color: #F5DFB5; }
.home-card .ws-verdict b { color: var(--sh-navy); }
.home-quick { width: min(1060px, 100%); margin: 22px auto 0; text-align: left; position: relative; z-index: 1; }
.home-quick h2 { font-size: 16px; color: var(--sh-navy); margin: 0 0 10px; font-family: inherit; font-weight: 600; }
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-tile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--sh-line); border-radius: 14px; padding: 12px 14px; font: inherit; text-align: left; cursor: pointer; }
.home-tile:hover { border-color: #F7A77C; box-shadow: 0 4px 14px rgba(240, 90, 26, .12); }
.home-tile .sec-ic { width: 42px; height: 42px; }
@media (max-width: 1000px) { .home-cards { grid-template-columns: minmax(0, 1fr); } .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Numerology and Vastu inside the shell ---- */
.app-page .tn, .app-page .tv { background: transparent; }
.app-page .tn-wrap, .app-page .tv-wrap { max-width: none !important; width: auto !important; padding-left: 22px !important; padding-right: 22px !important; }
.app-page .tn-result .two-col, .app-page .tv-two { margin-top: 12px; }
.tn-readcard { background: #fff; border: 1px solid var(--sh-line); border-radius: 16px; padding: 16px 18px; position: sticky; top: 12px; }
.num-sec[hidden], .tv-sec[hidden] { display: none !important; }
.num-right .ws-read { overflow: visible; padding: 0; }
.num-right h2 { font-size: 15px; margin: 18px 0 8px; }
.sec-tabs[data-sec-tabs="panchang"] .sec-tab-a { padding: 8px 8px 12px; gap: 7px; }
.sec-tabs[data-sec-tabs="panchang"] .sec-ic { width: 32px; height: 32px; }
.tn-form-fold { margin: 0 0 14px; }
.tn-form-fold > summary { cursor: pointer; color: var(--sh-org); font-weight: 600; padding: 6px 0; }

/* ---- Prediction reports ---- */
.pred-astro { display: none; }
.is-astro .pred-astro { display: block; }
.pred-astro { margin: 6px 0 10px; font-size: 13px; }
.pred-astro summary { cursor: pointer; color: var(--sh-org); font-weight: 600; }
.pred-astro table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.pred-astro td, .pred-astro th { border-bottom: 1px solid #F3EFEA; padding: 5px 6px; text-align: left; vertical-align: top; }
.pred-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sh-muted); }
.pred-pick select { height: 32px; border: 1px solid #F7A77C; border-radius: 8px; padding: 0 8px; font: inherit; color: var(--sh-navy); font-weight: 600; background: #fff; }
.pred-read { font-size: 15px; line-height: 1.6; color: #2A3242; }
.pred-read h4 { font-size: 16px; color: var(--sh-navy); margin: 18px 0 8px; border-top: 1px solid var(--sh-line); padding-top: 12px; }
.pred-read h4:first-of-type { border-top: 0; padding-top: 0; }
.pred-read h5 { font-size: 15px; color: var(--sh-navy); margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.pred-read p { margin: 0 0 8px; }
.pred-read .pred-subject { border-top: 0; margin: 0 0 12px; padding: 0; }
.pred-read .ws-verdict { display: flex; gap: 12px; background: #F2FBF5; border: 1px solid #CDEBD8; border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; }
.pred-read .ws-verdict.is-care { background: #FFF8EC; border-color: #F5DFB5; }
.pred-read .ws-verdict b { color: var(--sh-navy); }
.pred-small { font-size: 13.5px; color: #4B5563; }
.pred-now { background: #FFF7F1; border-radius: 8px; padding: 6px 8px; }
.pred-barrow { display: grid; grid-template-columns: 150px 1fr 44px; gap: 10px; align-items: center; margin: 7px 0; font-size: 14px; }
.pred-barrow b { color: var(--sh-navy); }
.pred-barrow span { color: var(--sh-muted); }
.pred-months.one { grid-template-columns: minmax(0, 1fr); }

/* A period in a timing page can be clicked for its reading. */
.trac-ws.mode-page .ws-left-pages summary, .trac-ws.mode-page .ws-left-pages .leaf, .trac-ws.mode-page .ws-left-pages tbody tr { cursor: pointer; }
.trac-ws.mode-page .ws-left-pages tbody tr:hover td, .trac-ws.mode-page .ws-left-pages summary:hover, .trac-ws.mode-page .ws-left-pages .leaf:hover { background: #FFF7F1 !important; }
.ws-left-pages .ws-picked, .ws-left-pages .ws-picked td { background: #FFE4D3 !important; }
.ws-pagebar + .ws-tip { font-size: 12.5px; color: var(--sh-muted); margin: -4px 0 8px; }

/* ---- Wider use of the screen; the chart fills its column; icons never cut ---- */
.trac-main.is-dash { overflow-y: auto !important; padding: 0.5rem 0.6rem 0.6rem !important; }
.trac-ws .trac-ws-bar, .ws-pagebar, .trac-ws-tools { flex-wrap: wrap; row-gap: 6px; }
.trac-ws-tools { margin-left: 0 !important; }
.trac-ws-btn, .trac-ws-btn.is-icon { flex: 0 0 auto; }
.trac-ws-stage { padding: 0.4rem 0.4rem 0.2rem !important; }
.trac-ws-svg svg { width: 100% !important; height: 100% !important; }

/* ---- The reading header: a plain bar, not a label and an orange box ---- */
.trac-ws-details > .ws-readbar { margin: 0; padding: 10px 14px; background: #FFF7F1; border-bottom: 1px solid var(--sh-line); gap: 14px; }
.ws-readbar .ws-read-h { font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sh-navy) !important; }
.ws-readbar .ws-read-h i { display: none !important; }
.ws-readbar .ws-combo { border: 1px solid #E3D9CF !important; height: 38px !important; font-weight: 600 !important; font-size: 14.5px !important; }
.ws-readbar .ws-combo:hover { border-color: #F7A77C !important; }
.trac-ws-details .ws-read { padding: 14px 16px 24px !important; }
.ws-seg button small { display: none !important; }
.trac-ws:not(.is-max):not(.has-size) .trac-ws-svg { align-items: flex-start !important; }
.trac-ws:not(.is-max):not(.has-size) .trac-ws-svg svg { height: auto !important; max-height: none !important; }
.ws-read .ws-auto h3, .ws-read .ws-auto h4 { font-family: inherit !important; }
.trac-ws .trac-ws-charts > .trac-ws-bar .trac-ws-tabs { flex: 1 1 220px !important; }

/* ---- Home: your day today, what favours you today ---- */
.home-cards { width: min(1240px, 100%) !important; grid-template-columns: minmax(0, 1fr) !important; }
.home-quick, .home-ex { width: min(1240px, 100%) !important; max-width: none !important; }
.home-luck { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.home-luck > div { background: #FAF8F6; border: 1px solid var(--sh-line); border-radius: 12px; padding: 10px 12px; }
.home-luck small { display: block; font-size: 12px; color: var(--sh-muted); }
.home-luck b { display: block; font-size: 15px; color: var(--sh-navy); margin-top: 3px; }
.home-luck i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #CBD5E1; vertical-align: -1px; margin-right: 6px; }
.home-short { font-size: 14.5px; color: #2A3242; margin: 12px 0 6px; line-height: 1.55; }
.home-short b { color: var(--sh-navy); }
.home-tag { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sh-muted); background: #F3F4F6; border-radius: 6px; padding: 3px 8px; }
.home-favs-wrap h2 { font-size: 16px; color: var(--sh-navy); margin: 6px 0 10px; font-family: inherit; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.home-favs-wrap h2 small { font-size: 12px; font-weight: 500; color: var(--sh-muted); background: #F3F4F6; border-radius: 20px; padding: 2px 9px; }
.home-favs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-favs > .home-muted { grid-column: 1 / -1; }
.home-fav { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--sh-line); border-radius: 14px; padding: 12px 14px; font: inherit; text-align: left; cursor: pointer; }
.home-fav:hover { border-color: #F7A77C; box-shadow: 0 4px 14px rgba(240, 90, 26, .12); }
.home-fav-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.home-fav-top b { font-size: 14.5px; color: var(--sh-navy); line-height: 1.25; }
.home-fav .sec-ic { width: 38px; height: 38px; flex: 0 0 auto; }
.home-fav .lvl { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.home-fav .lvl.g { background: #E6F6EC; color: #1F7A44; }
.home-fav .lvl.a { background: #FDF1DC; color: #8A5A12; }
.home-fav .lvl.w { background: #EEF0F4; color: #374151; }
.home-fav-tx { font-size: 13px; color: #3A4252; line-height: 1.5; }
.home-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 1200px) { .home-luck { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 700px) { .home-luck, .home-favs, .home-tiles-6 { grid-template-columns: minmax(0, 1fr) !important; } }
.home-tiles-6 .home-tile { min-width: 0; } .home-tiles-6 .sec-tx { min-width: 0; } .home-tiles-6 .sec-tx b, .home-tiles-6 .sec-tx small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Year readings: only the year in view; the rest under "More choices" ---- */
.yr-form { grid-template-columns: repeat(auto-fill, minmax(170px, 220px)) !important; align-items: end; }
.yr-form .yr-go { display: none !important; }
.yr-form .yr-more { grid-column: 1 / -1; border: 1px solid var(--sh-line); border-radius: 12px; background: #FFFCF9; }
.yr-form .yr-more > summary { cursor: pointer; padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: var(--sh-navy); list-style: none; }
.yr-form .yr-more > summary::-webkit-details-marker { display: none; }
.yr-form .yr-more > summary span { color: var(--sh-org); margin-right: 4px; }
.yr-form .yr-more[open] > summary { border-bottom: 1px solid var(--sh-line); }
.yr-form .yr-more-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; padding: 10px 12px 12px; align-items: end; }
.yr-form .yr-more-body .yr-form-wide { grid-column: 1 / -1; }
.yr-form select, .yr-form input[type=number] { height: 38px; border: 1px solid #E3D9CF; border-radius: 9px; padding: 0 10px; font: inherit; font-size: 14.5px; background: #fff; color: var(--sh-navy); }
.yr-form .yr-main select { font-weight: 600; border-color: #F7A77C; }
/* Daily Report */
.pd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.pd-date { font-size: 19px; color: var(--sh-navy); }
.pd-nav { border: 1px solid var(--sh-line); background: #fff; border-radius: 10px; padding: 5px 12px; font-weight: 700; color: var(--sh-navy); cursor: pointer; font-size: 15px; }
.pd-nav:hover { border-color: var(--sh-org); color: var(--sh-org); }
.pd-pick { border: 1px solid var(--sh-line); border-radius: 10px; padding: 5px 10px; font: inherit; color: var(--sh-ink); }
.pd-ladder { width: 100%; border-collapse: collapse; }
.pd-ladder th { font-size: 12.5px; color: var(--sh-muted); text-align: left; font-weight: 600; }
.pd-ladder td, .pd-ladder th { padding: 7px 8px; border-bottom: 1px solid #f0ece7; }
.pd-ladder tr.now td { background: #FFF7F1; }
.pd-ladder td:last-child { white-space: nowrap; }
.pred-card td.g, .pd-area em.g, h4.g { color: #1F8A4C; } .pred-card td.b, .pd-area em.b, h4.b { color: #B45309; } .pred-card td.m, .pd-area em.m { color: var(--sh-muted); }
.pred-card td.g, .pred-card td.b { font-weight: 600; }
.pd-hours { position: relative; height: 34px; background: #F4F1EE; border-radius: 9px; overflow: hidden; margin-top: 6px; }
.pd-hours i { position: absolute; top: 0; height: 26px; }
.pd-hours s { position: absolute; bottom: 0; height: 6px; background: #6BA6E0; text-decoration: none; }
.pd-hours .k-good, .pd-key .k-good { background: #5BBE86; } .pd-hours .k-best, .pd-key .k-best { background: #0F6A37; }
.pd-hours .k-avoid, .pd-key .k-avoid { background: #E3A35A; } .pd-hours .k-rahu, .pd-key .k-rahu { background: #B93A2A; }
.pd-key .k-moon { background: #6BA6E0; }
.pd-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--sh-muted); margin-top: 3px; }
.pd-key { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--sh-muted); margin: 6px 0 4px; }
.pd-key span { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.pd-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.pd-area { border: 1px solid var(--sh-line); border-radius: 12px; padding: 9px 11px; font-size: 13.5px; color: var(--sh-ink); line-height: 1.45; }
.pd-area b { display: block; color: var(--sh-navy); }
.pd-area em { font-style: normal; font-weight: 700; font-size: 12.5px; }
.pd-sys { width: 100%; border-collapse: collapse; margin: 8px 0; }
.pd-sys th { width: 112px; text-align: left; vertical-align: top; color: var(--sh-navy); font-size: 13.5px; padding: 7px 8px; }
.pd-sys td { font-size: 13.5px; padding: 7px 8px; border-bottom: 1px solid #f0ece7; line-height: 1.5; }
.pd-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .pd-areas { grid-template-columns: 1fr 1fr; } .pd-dd { grid-template-columns: 1fr; } }
.pred-theme { font-style: italic; color: var(--sh-ink); }
.pred-sky summary { cursor: pointer; color: var(--sh-org); font-weight: 600; font-size: 13.5px; margin: 4px 0; }
/* TRAC Sandesh: new posts since the last visit */
.side-nav .sn-new.sn-count { background: #DC2626; border-radius: 999px; min-width: 18px; text-align: center; padding: 2px 5px; }
/* Menu icons: an orange icon in a thin orange outline tile; the item on show gets a solid orange tile with a white icon.
   The row height is unchanged. */
.side-nav .sn-item { padding-top: 7px; padding-bottom: 7px; }
.side-nav .sn-item svg { box-sizing: border-box; width: 30px; height: 30px; padding: 5px; border-radius: 9px; color: #FB923C;
  background: transparent; box-shadow: inset 0 0 0 1.5px rgba(251,146,60,.55); }
.side-nav .sn-item:hover svg { color: #FDBA74; box-shadow: inset 0 0 0 1.5px rgba(253,186,116,.8); }
.side-nav .sn-item.is-on svg { color: #FFFFFF; background: #F97316; box-shadow: none; }

/* System tabs inside the reading column (wide screens): a compact row of buttons, names only, wrapping if needed. */
.ws-systabs { flex: 0 0 auto; padding: 8px 10px 8px; border-bottom: 1px solid var(--rule-2, #E5E7EB); background: #fff; }
.ws-systabs .sec-tabs { background: transparent; border: 0; padding: 0; z-index: auto; }
.ws-systabs .sec-crumb { margin: 0 2px 6px; }
.ws-systabs .sec-row { flex-wrap: wrap; gap: 6px; overflow: visible; }
.ws-systabs .sec-tab { padding: 5px 11px 5px 6px; gap: 7px; border-radius: 10px; border: 1px solid var(--sh-line); background: #fff; }
.ws-systabs .sec-tab:hover { background: #FBF3EC; }
.ws-systabs .sec-ic { width: 24px; height: 24px; border-radius: 7px; }
.ws-systabs .sec-ic svg { width: 15px; height: 15px; }
.ws-systabs .sec-tx b { font-size: 14px; }
.ws-systabs .sec-tx small { display: none; }
.ws-systabs .sec-tab.is-on { background: var(--sh-org); border-color: var(--sh-org); }
.ws-systabs .sec-tab.is-on .sec-tx b { color: #fff; }
.ws-systabs .sec-tab.is-on .sec-ic { background: rgba(255, 255, 255, .22); }
.ws-systabs button.sec-tab.is-on::after, .ws-systabs a.sec-tab.is-on::after { display: none; }

/* Chart / Table / Timing / Special as a strip down the left of the chart column (wide screens; set by the script). */
.ws-seg-ic { display: none; }
.trac-ws.has-rail .trac-ws-charts { padding-left: 74px; }
.trac-ws.has-rail .ws-seg { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 62px; margin: 0; flex-direction: column; justify-content: flex-start; gap: 6px; z-index: 2; }
.trac-ws.has-rail .ws-seg button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 8px; font-size: 11.5px; }
.trac-ws.has-rail .ws-seg-ic { display: block; width: 22px; height: 22px; }
.trac-ws.has-rail .ws-seg-ic svg { width: 22px; height: 22px; display: block; }

/* Wide tables (owner's choice A, 24 Oct 2026): first column stays, slim grey bar under the table, soft fade, round
   ‹ › buttons, a one-line hint (set up by trac-shell.js). */
.tw-slide { position: relative; --tw-stick-w: 0px; }
.tw-bar { display: none; position: relative; height: 4px; margin: 8px 10px 2px; background: #EEEAE4; border-radius: 3px; cursor: pointer; touch-action: none; transition: height .15s; }
.tw-bar:hover { height: 6px; }
.tw-bar i { position: absolute; top: 0; bottom: 0; min-width: 24px; background: #94A3B8; border-radius: 3px; cursor: grab; }
.tw-bar:hover i { background: #64748B; }
.tw-slide.is-over .tw-bar { display: block; }
.tw-hint { display: none; font-size: 12px; color: #6B7280; margin: 5px 10px 0; }
.tw-slide.is-over.at-start:not(.was-slid) .tw-hint { display: block; }
.tw-arr { display: none; position: absolute; top: calc(50% - 8px); transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; border-radius: 50%;
          border: 1px solid #D9D3CA; background: #fff; color: #0F1E4A; font-size: 20px; line-height: 1; padding: 0 0 3px; cursor: pointer;
          box-shadow: 0 2px 6px rgba(20, 37, 77, .14); transition: opacity .2s; }
.tw-arr:hover { border-color: #EA580C; color: #C2410C; }
.tw-arr.l { left: calc(var(--tw-stick-w) + 6px); } .tw-arr.r { right: 6px; }
.tw-slide.is-over .tw-arr { display: grid; place-items: center; }
.tw-slide.at-start .tw-arr.l, .tw-slide.at-end .tw-arr.r { opacity: 0; pointer-events: none; }
.tw-slide.is-over::before, .tw-slide.is-over::after { content: ""; position: absolute; top: 0; bottom: 16px; width: 40px; pointer-events: none; z-index: 2; transition: opacity .2s; }
.tw-slide.is-over::before { left: var(--tw-stick-w); background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.tw-slide.is-over::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.tw-slide.at-start::before, .tw-slide.at-end::after { opacity: 0; }
.tw-slide.is-over > .trac-tablewrap { cursor: grab; scrollbar-width: none; }
.tw-slide.is-over > .trac-tablewrap::-webkit-scrollbar { display: none; }
.tw-slide.is-dragging > .trac-tablewrap { cursor: grabbing; user-select: none; }
.tw-slide.is-over .tw-stick { position: sticky; left: 0; z-index: 1; }
.tw-slide.is-over:not(.at-start) .tw-stick { box-shadow: 4px 0 6px -4px rgba(15, 30, 74, .2); }
@media (hover: none) { .tw-arr { width: 28px; height: 28px; font-size: 18px; } }

/* ==========================================================================
   Kundli / Birth Chart: a panel on the right instead of a pop-up (owner, 24 Oct 2026).
   The page stays in view on the left; system tabs on top (Parashari by default), then
   New Chart / Saved Charts. On phones the panel takes the whole screen.
   ========================================================================== */
.trac-drawer, .trac-home-mode .trac-drawer {
    justify-content: flex-end; align-items: stretch; padding: 0;
    background: rgba(15, 30, 74, .18); backdrop-filter: none;
}
.trac-drawer .trac-form, .trac-home-mode .trac-drawer .trac-form {
    width: 440px; max-width: 100%; height: 100vh; height: 100dvh; max-height: none; margin: 0;
    border-radius: 0; box-shadow: -12px 0 32px rgba(15, 30, 74, .2);
    display: flex; flex-direction: column; overflow-y: auto;
}
.trac-drawer.is-open .trac-form { animation: bfSlideIn .22s ease-out; }
@keyframes bfSlideIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.trac-drawer .bf-head { padding: .85rem 1.2rem .7rem; }
.trac-drawer .bf-brand { display: none; }
.trac-drawer .bf-title { padding-left: 0; border-left: 0; }
.trac-drawer .bf-title h2 { font-size: 1.08rem; margin: 0; }
.trac-drawer .bf-title p { margin: .1rem 0 0; font-size: .8rem; }
.trac-drawer .bf-section { padding: .8rem 1.2rem .1rem; }
.trac-drawer .trac-settings-toggle.bf-adv { width: calc(100% - 2.4rem); margin-left: 1.2rem; margin-right: 1.2rem; }
.trac-drawer .trac-settings.bf-settings { margin-left: 1.2rem; margin-right: 1.2rem; }
.trac-drawer .bf-save-profile { margin: .4rem 1.2rem 0; }
.trac-drawer .trac-actions.bf-actions { margin-top: auto; padding: .8rem 1.2rem .5rem; }
.trac-drawer .trac-form .trac-btn.bf-submit { background: #EA580C; border-color: #EA580C; font-weight: 700; }
.trac-drawer .trac-form .trac-btn.bf-submit:hover { background: #C2410C; border-color: #C2410C; }
.bf-pdf-note { margin: 0; padding: 0 1.2rem .8rem; background: #FAFBFC; font-size: .76rem; color: #6B7280; text-align: center; }

.bf-sys { display: flex; gap: .2rem; margin: .7rem 1.2rem 0; border-bottom: 2px solid #EFEBE5; }
.bf-sys button { border: 0; background: none; padding: .5rem .85rem; margin-bottom: -2px; border-bottom: 2px solid transparent;
                 font: inherit; font-size: .9rem; color: #4B5563; cursor: pointer; }
.bf-sys button:hover { color: #111827; }
.bf-sys button.is-on { color: #C2410C; font-weight: 700; border-bottom-color: #EA580C; }
.bf-view { display: flex; margin: .7rem 1.2rem .2rem; padding: 3px; background: #F1EEEA; border-radius: 10px; }
.bf-view button { flex: 1 1 0; border: 0; background: none; padding: .45rem; border-radius: 8px; font: inherit; font-size: .86rem; color: #4B5563; cursor: pointer; }
.bf-view button.is-on { background: #fff; color: #0F1E4A; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Saved Charts view: everything of the New Chart form is set aside. */
.trac-form.is-saved-view > :not(.bf-head):not(.bf-sys):not(.bf-view):not(.bf-savedlist):not(input):not(.trac-alert) { display: none !important; }
.bf-savedlist { padding: .4rem 0 1rem; flex: 1 1 auto; }
.bf-sl-search { display: block; width: calc(100% - 2.4rem); margin: .4rem 1.2rem .3rem; padding: .55rem .75rem; border: 1px solid #D9D3CA; border-radius: 8px; font: inherit; font-size: .88rem; }
.bf-sl-note { margin: .2rem 1.2rem .3rem; font-size: .76rem; color: #6B7280; }
.bf-sl-item { display: flex; align-items: center; gap: .7rem; padding: .65rem 1.2rem; border-bottom: 1px solid #F1EEEA; }
.bf-sl-item:hover { background: #FBFAF8; }
.bf-sl-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #E0E7FF; color: #1E3A8A; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.bf-sl-txt { flex: 1 1 auto; min-width: 0; }
.bf-sl-txt b { display: block; font-size: .9rem; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-sl-txt small { display: block; font-size: .76rem; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-sl-open { flex: none; border: 1px solid #FDBA74; background: #fff; color: #C2410C; font: inherit; font-size: .8rem; font-weight: 700; border-radius: 7px; padding: .3rem .7rem; cursor: pointer; }
.bf-sl-open:hover { background: #FFF7ED; }
.bf-sl-empty { margin: 1rem 1.2rem; font-size: .86rem; color: #4B5563; }
.bf-sl-foot { margin: .9rem 1.2rem 0; font-size: .76rem; color: #6B7280; text-align: center; }
.bf-saved[data-saved-profiles] { display: none !important; }   /* replaced by Saved Charts */

@media (max-width: 600px) {
    .trac-drawer .trac-form, .trac-home-mode .trac-drawer .trac-form { width: 100%; box-shadow: none; }
}

/* Kundli PDF: the note in the corner while the PDF is made (trac-pdf.js). The page stays usable. */
.tp-toast { position: fixed; right: 18px; bottom: 70px; z-index: 2000; width: 340px; max-width: calc(100vw - 32px);
            background: #0F1E4A; color: #fff; border-radius: 12px; padding: 12px 34px 12px 14px; box-shadow: 0 10px 30px rgba(15, 30, 74, .3); font-size: 13.5px; }
.tp-toast[hidden] { display: none; }
.tp-toast b { display: block; font-weight: 600; }
.tp-toast small { display: block; margin-top: 3px; color: #CBD5E1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-toast-bar { display: block; height: 4px; margin-top: 9px; background: rgba(255, 255, 255, .2); border-radius: 3px; overflow: hidden; }
.tp-toast-bar[hidden] { display: none; }
.tp-toast-bar i { display: block; height: 100%; width: 4%; background: #FB923C; border-radius: 3px; transition: width .25s; }
.tp-toast.is-done { background: #14532D; }
.tp-toast.is-error { background: #7F1D1D; }
.tp-toast-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: #CBD5E1; font-size: 18px; line-height: 1; cursor: pointer; }
@media (max-width: 600px) { .tp-toast { left: 16px; right: 16px; bottom: 64px; width: auto; } .th-pdf span { display: none; } }

/* Compare ayanamsas (owner, 25 Oct 2026) */
.ay-cmp-btn { margin-top: 6px; border: 1px solid #FDBA74; background: #FFF7ED; color: #C2410C; font: inherit; font-size: .82rem; font-weight: 700; border-radius: 8px; padding: .3rem .7rem; cursor: pointer; }
.ay-cmp { border: 0; border-radius: 14px; padding: 0; width: min(920px, 96vw); box-shadow: 0 20px 50px rgba(20, 37, 77, .3); }
.ay-cmp::backdrop { background: rgba(15, 30, 74, .3); }
.ay-cmp-head { display: flex; align-items: center; padding: 12px 16px; background: #14254D; color: #fff; }
.ay-cmp-head b { font-size: 16px; } .ay-cmp-head button { margin-left: auto; border: 0; background: none; color: #fff; font-size: 22px; cursor: pointer; }
.ay-cmp-note { margin: 10px 16px; font-size: 13px; color: #5B6475; }
.ay-cmp-wrap { overflow-x: auto; padding: 0 16px 16px; }
.ay-cmp table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ay-cmp th { background: #FFF1E7; color: #9A3412; text-align: left; padding: 8px 10px; white-space: nowrap; }
.ay-cmp td { padding: 7px 10px; border-bottom: 1px solid #F3EDE6; vertical-align: top; }
.ay-cmp td:first-child { font-weight: 700; color: #14254D; white-space: nowrap; }
.ay-cmp .ay-diff { color: #C2410C; font-weight: 700; }
.ay-use { border: 1px solid #14254D; background: #fff; color: #14254D; border-radius: 7px; padding: .25rem .6rem; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }

/* Learn from the chart: tap a planet or house (owner, 25 Oct 2026) */
.trac-ws-stage svg[data-chart-key="d1"] { cursor: pointer; }
.lc-tip { position: fixed; z-index: 2100; width: 290px; max-width: calc(100vw - 24px); background: #14254D; color: #fff; border-radius: 12px;
          padding: 12px 34px 12px 14px; box-shadow: 0 10px 28px rgba(20, 37, 77, .3); font-size: 13.5px; line-height: 1.5; }
.lc-tip[hidden] { display: none; }
.lc-tip b { color: #FFC107; display: block; margin-bottom: 3px; }
.lc-tip p { margin: 0; }
.lc-tip small { display: block; margin-top: 7px; color: #C9D3E6; font-size: 12px; }
.lc-tip .lc-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: #C9D3E6; font-size: 18px; cursor: pointer; }

/* Simple / Detailed reading (owner, 25 Oct 2026) */
.ws-sd { display: inline-flex; margin-left: auto; background: #F1EEEA; border-radius: 9px; padding: 3px; flex: none; }
.ws-sd button { border: 0; background: none; font: inherit; font-size: 12.5px; color: #5B6475; padding: 4px 10px; border-radius: 7px; cursor: pointer; }
.ws-sd button.is-on { background: #fff; color: #14254D; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.is-simple .ws-read details, .is-simple .ws-read .ftr-working, .is-simple .ws-read .pred-astro, .is-simple .ws-read .yr-astro-area,
.is-simple .ws-read .yr-whybox, .is-simple .ws-read .trac-method-note { display: none !important; }

/* Overall picture at the top of each reading pane */
.ov { background: #FFF1E7; border: 1px solid #FFD3A3; border-left: 4px solid #F05A1A; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; color: #14254D; }
.ov-tg { border-left-color: #15803D; }
.ov-tc { border-left-color: #C2410C; }
.ov-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ov-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9A3412; }
.ov-h b { font-size: 15px; color: #14254D; }
.ov-x { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; color: #5B6475; cursor: pointer; padding: 0 4px; }
.ov p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #1F2937; }
.ov .ov-why { font-size: 13px; color: #5B6475; border-top: 1px dashed #FFD3A3; padding-top: 6px; }
.ov.is-min p { display: none; }
.ov.is-min .ov-x { transform: rotate(45deg); }

/* Ads only at the bottom (owner, 25 Oct 2026): keep Google's automatic in-page placements out of the reading.
   Also switch "Auto ads" off in the AdSense account, so only the page-bottom units are served. */
.google-auto-placed { display: none !important; }
.trac-ad { margin-top: 24px; }

/* Clear TRAC AI label on every answer */
.ai-label { font-size: 12px; color: #5B6475; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-label span { background: #14254D; color: #FFC107; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; font-size: 11px; }

/* Owner-only tables on the Parashari pages (Mrityu bhaga, Ayurdaya): shown to the admin only. */
.trac-owner-only { margin-top: 1.5rem; padding: .8rem 1rem; border: 2px dashed #b45309; border-radius: 8px; background: #fffbeb; color: #1f2937; }
.trac-owner-only h3 { color: #92400e; margin-top: 0; }
.trac-details { margin: .5rem 0; }
.trac-details > summary { cursor: pointer; font-weight: 600; color: #1f2937; padding: .3rem 0; }

/* Lal Kitab home measure */
.lk-measure{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:4px 0 10px}
.lk-measure label{display:flex;gap:6px;align-items:center;font-weight:600;color:#14254D}
.lk-measure input{width:90px;padding:6px 8px;border:1px solid #D9D3CA;border-radius:8px;font:inherit}
.lk-measure-out{color:#374151;font-size:14px}
.lk-measure-out.is-good{color:#166534;font-weight:600}
.lk-measure-out.is-care{color:#9A3412;font-weight:600}
.lk-pairs{display:grid;gap:10px;margin:6px 0 12px}
.lk-pair{border:1px solid #ECE6DF;border-radius:10px;padding:10px 12px;background:#fff}
.lk-pair-top{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:4px}
.lk-pair-top b{color:#14254D;font-size:15px}
.lk-pair-top span{color:#5B6475;font-size:13px}
.lk-pair p{margin:3px 0;font-size:14px;color:#1F2937}


/* ---- The Panchang menu (owner, 1 Nov 2026: a labelled menu; the topic's pages always on show; a list on phones) ---- */
.sec-tabs.pm { padding: 14px 22px 14px; background: #FBF7F2; }
.pm-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.pm-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8B1538; }
.pm-hint { font-size: 13px; color: #5D5262; }
.pm-swipe { display: none; font-size: 12px; color: #5D5262; }
.pm-topics { display: flex; gap: 6px; background: #fff; border: 1px solid #EADFD6; border-radius: 12px 12px 0 0; padding: 6px; }
.pm-topic { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: #3E3442; text-decoration: none; white-space: nowrap; }
.pm-topic:hover { background: #F7E9EE; }
.pm-ic { display: grid; place-items: center; }
.pm-ic svg { width: 18px; height: 18px; color: #8B1538; }
.pm-count { font-size: 12px; font-weight: 500; color: #6F6473; }
.pm-topic.is-on { background: #8B1538; color: #fff; font-weight: 700; }
.pm-topic.is-on .pm-ic svg { color: #FFE7A8; }
.pm-topic.is-on .pm-count { color: #F6D9E2; }
.pm-pages { background: #F7E9EE; border: 1px solid #EADFD6; border-top: 0; border-radius: 0 0 12px 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pm-pages-h { font-size: 13px; font-weight: 600; color: #6B1430; margin-right: 4px; }
.pm-page { font-size: 13px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #E2C9D2; color: #3E3442; text-decoration: none; white-space: nowrap; }
.pm-page:hover { border-color: #8B1538; color: #8B1538; }
.pm-page.is-on { background: #8B1538; border-color: #8B1538; color: #fff; font-weight: 600; }
.pm-page em { font-style: normal; color: #6F6473; }
.pm-more { display: contents; }
.pm-more > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px dashed #B88A9A; color: #6B1430; }
.pm-more > summary::-webkit-details-marker { display: none; }
.pm-more[open] > summary { background: #fff; }
.pm-more-list { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.pm-select { display: none; }
.pm-here { font-size: 13px; color: #5D5262; margin: 0 0 8px; }
.pm-here a { color: #8B1538; text-decoration: none; }
.pm-here a:hover { text-decoration: underline; }
.pm-here span { margin: 0 2px; }
.pm-here b { color: #2A2230; }
/* The page header: a plain white card that says what the page shows. */
.tp-hero.pm-hero { background: #fff !important; border: 1px solid #EADFD6 !important; box-shadow: 0 1px 2px rgba(60,30,0,.04) !important; border-radius: 14px; }
.tp-hero.pm-hero::after { display: none; }
.tp-hero.pm-hero h1 { color: #8B1538 !important; font-weight: 600; }
.tp-hero.pm-hero .tp-hero-lead { color: #3B3240 !important; }
.tp-hero.pm-hero .tp-hero-lead b { color: #2A2230; }
@media (max-width: 900px) {
    .pm-hint { display: none; }
    .pm-swipe { display: inline; }
    .pm-topics { overflow-x: auto; scrollbar-width: thin; border-radius: 12px; background: transparent; border: 0; padding: 0 0 4px; }
    .pm-topic { flex: 0 0 auto; background: #fff; border: 1px solid #EADFD6; border-radius: 10px; min-height: 44px; }
    .pm-topic.is-on { border-color: #8B1538; }
    .pm-pages { background: transparent; border: 0; padding: 10px 0 0; }
    .pm-pages-h, .pm-pages > .pm-page, .pm-more { display: none; }
    .pm-select { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 12px; font-weight: 600; color: #6B1430; }
    .pm-select select { font: inherit; font-size: 15px; font-weight: 600; color: #2A2230; min-height: 46px; padding: 0 12px; border: 1px solid #D9C8CF; border-radius: 10px; background: #fff; }
}

/* ---- Prediction: the free summaries with the button for the full report (owner, 1 Nov 2026) ---- */
.rc-wrap { display: flex; flex-direction: column; gap: 14px; }
.rc-intro h2 { margin: 0 0 4px; font-size: 1.3rem; color: #1F2A44; }
.rc-intro p { margin: 0; color: #4F5870; font-size: 14px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rc-card { background: #fff; border: 1px solid #EEDFD3; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.rc-card h3 { margin: 0; font-size: 1.05rem; color: #1F2A44; }
.rc-line { margin: 0; font-size: 13px; color: #5C6478; }
.rc-ans { background: #FDF8F3; border-radius: 12px; padding: 10px 12px; }
.rc-head { margin: 0 0 6px; font-weight: 700; color: #8B1538; }
.rc-body { font-size: 14px; line-height: 1.6; color: #2D3448; }
.rc-body p { margin: 0 0 6px; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.rc-buy { flex: 1 1 auto; text-align: center; padding: 10px 12px; border-radius: 10px; background: #8B1538; color: #fff !important; font-weight: 700; text-decoration: none; }
.rc-buy:hover { background: #6B1430; }
.rc-open { padding: 10px 12px; border-radius: 10px; border: 1px solid #E2C9D2; color: #8B1538; font-weight: 600; text-decoration: none; }
.rc-ask { margin: 0; font-size: 14px; color: #4F5870; }
.rc-ask button { font: inherit; font-weight: 700; color: #8B1538; background: none; border: 0; cursor: pointer; text-decoration: underline; }

/* ---- The Panchang menu, second design (owner, 1 Nov 2026): a plain question, six topics, every page on show ---- */
.sec-tabs.pm2 { padding: 18px 22px 16px; background: #FDF8F3; }
.pm2-q { margin: 0 0 2px; font-size: 20px; color: #1F2A44; }
.pm2-sub { margin: 0 0 12px; font-size: 14px; color: #4F5870; }
.pm2-topics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pm2-topic { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #EEDFD3; color: #1F2A44; text-decoration: none; min-width: 0; }
.pm2-topic:hover { border-color: #C9A0AF; box-shadow: 0 4px 12px rgba(139,21,56,.08); }
.pm2-ic { width: 34px; height: 34px; border-radius: 10px; background: #F7E9EE; display: grid; place-items: center; flex: none; }
.pm2-ic svg { width: 19px; height: 19px; color: #8B1538; }
.pm2-tx { min-width: 0; }
.pm2-tx b { display: block; font-size: 14.5px; line-height: 1.25; }
.pm2-tx small { display: block; font-size: 12px; color: #5C6478; margin-top: 2px; line-height: 1.3; }
.pm2-topic.is-on { background: #8B1538; border-color: #8B1538; color: #fff; box-shadow: 0 6px 16px rgba(139,21,56,.22); }
.pm2-topic.is-on .pm2-ic { background: rgba(255,255,255,.16); }
.pm2-topic.is-on .pm2-ic svg { color: #FFE7A8; }
.pm2-topic.is-on .pm2-tx small { color: #F6D9E2; }
.pm2-card { margin-top: 12px; background: #fff; border: 1px solid #EEDFD3; border-radius: 16px; overflow: hidden; }
.pm2-card-h { background: #FCF1E8; padding: 11px 18px; font-size: 15px; font-weight: 700; color: #1F2A44; }
.pm2-blocks { padding: 14px 18px 16px; display: flex; flex-wrap: wrap; gap: 16px 28px; }
.pm2-block { flex: 1 1 260px; min-width: 0; }
.pm2-block.is-regions { flex: 2 1 380px; }
.pm2-block-h { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8B1538; margin-bottom: 8px; }
.pm2-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.pm2-block.is-regions .pm2-links { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.pm2-link { display: block; padding: 9px 12px; border-radius: 10px; border: 1px solid #EEDFD3; color: #1F2A44; text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm2-link:hover { border-color: #8B1538; color: #8B1538; background: #FDF6F8; }
.pm2-link.is-on { background: #F6DDE6; border-color: #E2B8C8; color: #8B1538; font-weight: 700; }
.pm2-link em { font-style: normal; color: #6F6473; }
@media (max-width: 1100px) { .pm2-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .sec-tabs.pm2 { padding: 14px 14px 12px; }
    .pm2-q { font-size: 18px; }
    .pm2-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pm2-topic { padding: 10px; }
    .pm2-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm2-block.is-regions .pm2-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Panchang pages in the software's look: white cards with the peach title band and navy text. */
.tp-page .tp-card { border: 1px solid #EEDFD3 !important; border-top: 1px solid #EEDFD3 !important; border-radius: 16px; padding: 0 16px 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,30,0,.04); }
.tp-page .tp-card h2 { margin: 0 -16px 12px; padding: 11px 16px; background: #FCF1E8; color: #1F2A44 !important; font-family: inherit; font-weight: 700; font-size: 1.02rem; }
.tp-page .tp-card h2::before { display: none; }
.tp-page .tp-controls { border-color: #EEDFD3; }