/* Flat layer for main tool pages still built on bangalore-theme.css (2026-10 redesign).
   Loaded last, scoped to <body class="flat">. Removes the legacy SaaS look (gradients, shadows,
   hover lifts, icon tiles, webfonts) and aligns the pages with the station/line/home signage system.
   Uses !important only to beat legacy inline styles. Rules: .claude/skills/bengalurumetro-design/SKILL.md */

body.flat {
  --fl-ink: #16141a; --fl-ink-2: #4b4752; --fl-ink-3: #6f6a76;
  --fl-bg: #fbfaf8; --fl-panel: #f1efec; --fl-rule: #dcd8d2; --fl-card: #ffffff;
  --fl-brand: #7b3a92; --fl-link: #1f5fa8;
  --fl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fl-bg) !important;
  color: var(--fl-ink);
}

/* one typeface (system UI) everywhere except icon glyphs */
body.flat, body.flat :is(main, section, div, p, li, td, th, a, span, strong, b, em, small, label, button, input, select, textarea, h1, h2, h3, h4, h5, h6, summary, dt, dd, figcaption) {
  font-family: var(--fl-font) !important;
}
body.flat :is(h1, h2, h3) { letter-spacing: -.01em; }
body.flat main h1 { letter-spacing: -.02em; }

/* flat: no shadows, no gradients, no hover lifts */
body.flat main *, body.flat .cross-links *, body.flat .ad-unit {
  box-shadow: none !important;
  text-shadow: none !important;
}
body.flat main *:not(select):not(input), body.flat .cross-links * { background-image: none !important; }
body.flat [style*="linear-gradient"] { background-color: var(--fl-panel) !important; }
body.flat main *:hover, body.flat .cross-links *:hover { transform: none !important; }

/* one corner radius for panels (pills stay pills: line badges, chips) */
body.flat main :is([style*="border-radius:10px"], [style*="border-radius: 10px"], [style*="border-radius:12px"], [style*="border-radius: 12px"],
  [style*="border-radius:14px"], [style*="border-radius: 14px"], [style*="border-radius:16px"], [style*="border-radius: 16px"], [style*="border-radius:18px"]),
body.flat :is(.tg-card, .tg-callout, .card-type, .calc-card, .fare-result, .recharge-option, .map-container) { border-radius: 8px !important; }

/* panels: hairline border instead of shadow */
body.flat :is(.tg-card, .card-type, .calc-card, .recharge-option) { border: 1px solid var(--fl-rule) !important; background: var(--fl-card) !important; }

/* primary actions: one solid brand button */
body.flat :is(.calc-btn, #find-nearest-btn, .btn-primary) {
  background: var(--fl-brand) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; min-height: 48px;
}
body.flat :is(.calc-btn, #find-nearest-btn, .btn-primary):active { filter: brightness(.95); }

/* links read as links */
body.flat main a:not([class]) { text-underline-offset: 3px; }

/* "You Might Also Need": icon-tile grid -> plain labelled list (no blank gradient squares) */
body.flat .cross-links { max-width: 900px; margin: 40px auto 24px !important; padding: 0 16px !important; }
body.flat .cross-links__title { font-size: .8125rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-ink-3) !important; font-weight: 700 !important; margin: 0 0 12px !important; text-align: left !important; }
body.flat .cross-links__title i, body.flat .cross-links__icon { display: none !important; }
body.flat .cross-links__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 16px !important; border-top: 1px solid var(--fl-rule); }
@media (min-width: 700px) { body.flat .cross-links__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
body.flat .cross-links__card {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
  min-height: 52px; padding: 6px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--fl-rule) !important;
  border-radius: 0 !important; text-decoration: none !important; text-align: left !important;
}
body.flat .cross-links__card::after { content: "\2192"; color: var(--fl-ink-3); padding-left: 10px; }
body.flat .cross-links__label { font-size: .9375rem !important; font-weight: 500 !important; color: var(--fl-ink) !important; margin: 0 !important; }

/* ads: framed as ads (neutral tint + dashed rule), not as cards */
body.flat .ad-unit { background: #eeece8 !important; border: 1px dashed var(--fl-rule) !important; border-radius: 8px !important; }
body.flat .ad-unit__label { font-size: .75rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-ink-2) !important; }

/* tables: rules, not boxes */
body.flat main table { border-collapse: collapse; }
body.flat main :is(td, th) { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { body.flat * { transition: none !important; animation: none !important; } }

/* neutral chips + plain headings (colour only from line tokens) */
body.flat .hero-badges span { background: var(--fl-panel) !important; color: var(--fl-ink-2) !important; border: 0 !important; border-radius: 8px !important; }
body.flat .calc-card :is(h1, h2) { color: var(--fl-ink) !important; }
body.flat .calc-swap { border-color: var(--fl-rule) !important; color: var(--fl-ink-2) !important; background: var(--fl-card) !important; }

/* section quick-navs: underline tabs, not pills (part 2) */
body.flat :is(.map-quick-nav, .timings-quick-nav, .fare-quick-nav, .sc-quick-nav) a {
  border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--fl-ink-2) !important;
  font-weight: 600 !important; padding: 0 12px !important; min-height: 44px; box-shadow: inset 0 -3px 0 transparent !important;
}
body.flat :is(.map-quick-nav, .timings-quick-nav, .fare-quick-nav, .sc-quick-nav) a:active { box-shadow: inset 0 -3px 0 var(--fl-brand) !important; color: var(--fl-ink) !important; }
@media (hover: hover) and (pointer: fine) { body.flat :is(.map-quick-nav, .timings-quick-nav, .fare-quick-nav, .sc-quick-nav) a:hover { box-shadow: inset 0 -3px 0 var(--fl-brand) !important; color: var(--fl-ink) !important; } }
body.flat :is(.map-quick-nav, .timings-quick-nav, .fare-quick-nav, .sc-quick-nav) { border-bottom: 1px solid var(--fl-rule); }
/* icon font is no longer loaded on these pages: drop the empty icon slots */
body.flat :is(i.fas, i.fa, i.fab, i.far) { display: none !important; }

/* craft pass */
body.flat .cross-links__title { text-transform: none !important; letter-spacing: -.01em !important; font-size: 1.125rem !important; color: var(--fl-ink) !important; }
body.flat .ad-unit { background: #f3f1ec !important; border: 1px solid var(--fl-rule) !important; }
body.flat .ad-unit__label { text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; color: var(--fl-ink-3) !important; }

/* craft pass D (smart-card, fare-calculator and other legacy tool content):
   ink headings, no tinted info boxes, no pricing cards, no SaaS greys */
body.flat main :is(h1, h2, h3, h4) { color: var(--fl-ink) !important; }
body.flat main :is(h2, h3) i { display: none !important; }
body.flat main p, body.flat main li { color: var(--fl-ink-2); }
body.flat main :is(td, th, span, strong, b, em)[style*="color"]:not(.line-badge):not([class*="line-badge"]) { color: inherit !important; }
body.flat main div[style*="background"] { background: var(--fl-card) !important; border: 1px solid var(--fl-rule) !important; border-radius: 8px !important; }
body.flat main tr[style*="background"], body.flat main thead tr, body.flat main th[style*="background"] { background: transparent !important; }
body.flat main th { border-bottom: 2px solid var(--fl-rule) !important; color: var(--fl-ink-3); font-size: .8125rem; }
/* breadcrumbs and inline links: ink, not violet */
body.flat main nav a, body.flat main .near-me-breadcrumb a { color: var(--fl-ink-2) !important; }
body.flat main a[style*="color:var(--tech-purple)"], body.flat main a[style*="color:#6a1b9a"], body.flat main a[style*="color: #6a1b9a"] { color: var(--fl-link) !important; }

/* smart card: card types as ruled rows, recharge methods as a plain list, no floating bar */
body.flat .card-type { border: 0 !important; border-bottom: 1px solid var(--fl-rule) !important; border-radius: 0 !important; background: none !important; padding: 14px 0 !important; margin: 0 !important; }
body.flat .card-type h3 { font-size: 1.0625rem !important; }
body.flat .recharge-option { border: 0 !important; border-bottom: 1px solid var(--fl-rule) !important; border-radius: 0 !important; background: none !important; padding: 12px 0 !important; margin: 0 !important; min-height: 52px; }
body.flat .recharge-option i { display: none !important; }
@media (max-width: 768px) {
  body.flat .sticky-book-bar { position: static !important; display: block !important; padding: 0 16px 24px !important; background: none !important; border: 0 !important; }
  body.flat .sticky-book-bar a { border-radius: 8px !important; }
  body.flat { padding-bottom: 0 !important; }
}

/* fare calculator: left-aligned, warm inputs, result right under the button */
body.flat .calc-card { text-align: left !important; }
body.flat .calc-card h2 { justify-content: flex-start !important; text-align: left !important; }
body.flat .calc-card > p { text-align: left !important; color: var(--fl-ink-2) !important; }
body.flat .form-select { border-color: #bdb7ae !important; border-radius: 8px !important; font-family: var(--fl-font) !important; }
body.flat .fl-faq { border-top: 1px solid var(--fl-rule); }
body.flat .fl-faq:last-of-type { border-bottom: 1px solid var(--fl-rule); }
body.flat .fl-faq summary { cursor: pointer; list-style: none; position: relative; padding: 14px 32px 14px 0; min-height: 44px; }
body.flat .fl-faq summary::-webkit-details-marker { display: none; }
body.flat .fl-faq summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font-size: 1.25rem; color: var(--fl-ink-3); }
body.flat .fl-faq[open] summary::after { content: "\2013"; }
body.flat .fl-faq summary h3 { display: inline; font-size: 1rem !important; margin: 0 !important; }
body.flat .fl-faq p { padding-bottom: 14px; }

/* metro map (no <main> wrapper): same neutral treatment as the main-scoped rules above */
body.flat div[style*="background"]:not(.cross-links__icon) { background: var(--fl-card) !important; border: 1px solid var(--fl-rule) !important; border-radius: 8px !important; }
body.flat :is(tr, th)[style*="background"], body.flat thead tr { background: transparent !important; }
body.flat p[style*="color:#6a1b9a"] { color: var(--fl-ink) !important; }
body.flat a[download] { background: var(--fl-brand) !important; font-family: var(--fl-font) !important; }
body.flat div:has(> a[download]) + div a[download] { background: var(--fl-card) !important; color: var(--fl-ink) !important; border: 1px solid #bdb7ae !important; }
body.flat #download-map p[style*="font-weight:600"] { color: var(--fl-ink) !important; }