/* Shree 777 landing — shared base for every design (loaded before the theme CSS).
   Reset, the self-hosted Yatra One wordmark font (SIL OFL 1.1, fonts/YatraOne-OFL.txt) and the shared
   chart pages (page_market / page_slots / page_404 in app/views.php). Colours come from variables each
   theme sets on :root. Light theme only, flat colours only (no gradients). */
@font-face { font-family: "Yatra One"; src: url("fonts/yatra-one.ttf") format("truetype"); font-display: swap; }
:root {
  --amber: #F7B12B; --amber-dk: #E39B12; --amber-lt: #FFBE3F; --on-amber: #3A2A00; --gold: #906716; --page: #F5F5F5;
  --ink: #2b2410; --muted: #6a5f45; --line: #e6dcc4; --soft: #fbf4e4; --head: #ffffff; --accent: #906716;
  --accent-ink: #3A2A00; --red: #b3261e; --today: #fff1cc;
  --fb: "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif; --fm: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw: "Yatra One", "Mukta", serif;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
button { font: inherit; color: inherit; }
.wrap { width: min(1140px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--on-amber); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 3px solid var(--on-amber); outline-offset: 3px; }
.ios-note { margin-top: 10px; background: #fdecea; color: #7a1c14; padding: 10px 12px; border-radius: 10px; font-size: .95rem; }
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; }
[hidden] { display: none !important; }
.flash { animation: s7flash 1.6s; }
@keyframes s7flash { 0% { background: #ffe08a; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- shared chart pages ---------- */
.chart-page .page { padding: 26px 0 10px; }
.page .crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 8px; }
.page .crumbs a { color: var(--accent); text-decoration: none; font-weight: 600; }
.page h1 { font-family: var(--fw); font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.15; color: var(--ink); }
.page .lead { margin: 10px 0 16px; max-width: 48em; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.today-strip { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.today-strip span { font-weight: 700; color: var(--muted); }
.today-strip b { font: 700 clamp(1.1rem, 5vw, 1.45rem) var(--fm); flex: 1; white-space: nowrap; color: var(--ink); }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 12px; flex-wrap: wrap; }
.tabs a { text-decoration: none; font-weight: 700; padding: 9px 14px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amber-dk); }
.jump { margin: 0 0 8px; font-size: .9rem; font-weight: 600; }
.jump a { color: var(--accent); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table.chart { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; color: var(--ink); }
table.chart th, table.chart td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px 6px; text-align: center; }
table.chart thead th { position: sticky; top: 0; background: var(--head); color: var(--muted); font: 700 .76rem var(--fb); text-transform: uppercase; letter-spacing: .04em; z-index: 2; }
table.chart thead th:first-child { left: 0; z-index: 3; }
table.chart thead th:first-child, table.chart tbody th { width: 1%; padding-inline: 10px; }
table.chart tbody th { position: sticky; left: 0; z-index: 1; background: var(--soft); font: 600 .76rem var(--fm); white-space: nowrap; text-align: left; color: var(--muted); }
table.chart tbody th small { display: block; font-weight: 500; opacity: .85; }
table.chart.jodi td { font: 700 1.02rem var(--fm); }
table.chart.panel td { white-space: nowrap; color: var(--muted); }
table.chart.panel td .pn { display: inline-block; vertical-align: middle; line-height: 1.12; font: 600 .8rem/1.12 var(--fm); }
table.chart.panel td b { display: inline-block; vertical-align: middle; margin: 0 5px; font: 800 1.1rem var(--fm); color: var(--ink); }
table.chart td.red, table.chart td.red b { color: var(--red); }
table.chart td.today { background: var(--today); box-shadow: inset 0 0 0 2px var(--amber-dk); }
table.chart td.pend, table.chart td.na, table.chart .na { color: #b9ad90; }
table.chart.slotchart td { font: 700 .86rem var(--fm); white-space: nowrap; }
.fit table.chart.panel { min-width: 640px; }
.empty { background: var(--soft); padding: 16px; border-radius: 12px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.chip:hover { border-color: var(--amber-dk); }
.page .sec { padding-top: 28px; }
.page .sec h2 { font-family: var(--fw); font-weight: 400; font-size: 1.45rem; margin-bottom: 10px; color: var(--ink); }
@media (max-width: 640px) {
  .fit table.chart.panel { min-width: 0; }
  .tbl-wrap.fit { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  .fit table.chart { table-layout: fixed; }
  table.chart th, table.chart td { padding: 6px 2px; }
  table.chart thead th { font-size: .64rem; letter-spacing: 0; }
  table.chart thead th:first-child, table.chart tbody th { padding-inline: 4px; }
  table.chart tbody th { font-size: .62rem; }
  .fit table.chart thead th:first-child { width: 46px; }
  table.chart tbody th small, table.chart .wk-y { display: none; }
  table.chart.jodi td { font-size: .9rem; }
  table.chart.panel td { padding: 4px 1px; }
  table.chart.panel td .pn { font-size: .62rem; line-height: 1.06; opacity: .85; }
  table.chart.panel td b { margin: 0 1px; font-size: .84rem; }
  table.chart.slotchart td { font-size: .76rem; padding-inline: 6px; }
}
@media (max-width: 380px) {
  table.chart.panel td .pn { font-size: .58rem; }
  table.chart.panel td b { font-size: .76rem; margin: 0; }
  table.chart thead th:first-child, table.chart tbody th { font-size: .56rem; padding-inline: 2px; }
}

/* ---------- 200% page zoom on a phone = a ~195px CSS viewport: everything reflows, nothing overlaps ---------- */
@media (max-width: 300px) {
  .wrap { width: calc(100% - 20px); }
  [class*="-bar-in"] { flex-wrap: wrap; justify-content: center; padding: 6px 0; row-gap: 6px; }
  [class*="-dock"] small { display: none; }
  .btn { white-space: normal; }
  .today-strip b { white-space: normal; }
  .tbl-wrap.fit { margin-inline: -10px; }
}
/* too narrow for a whole week: give the chart its natural width and let it scroll sideways in its box */
@media (max-width: 300px) { .fit table.chart { table-layout: auto; } .fit table.chart.panel { min-width: 480px; } .fit table.chart.jodi { min-width: 300px; } }
/* keep the pannas visibly apart from the jodi on small phones */
@media (max-width: 640px) { table.chart.panel td b { margin: 0 3px; } table.chart.panel td .pn { font-weight: 500; } }
@media (max-width: 380px) { table.chart.panel td b { margin: 0 2px; } table.chart.panel td { padding: 3px 1px; } }