/*
 * App-style home for phones.
 *
 * Mirrors the FindMyTrain app's home screen (search card, quick actions,
 * tracked trains, recent and popular routes, bottom nav). Everything here is
 * scoped to .apph* classes and its own --app-* tokens, so the site's blue
 * theme in premium.css is untouched. Above 880px none of it shows.
 */
:root {
  --app-bg: #F2F2F2;
  --app-surface: #FFFFFF;
  --app-ink: #111111;
  --app-muted: #666666;
  --app-border: #D6D6D6;
  --app-violet: #7C3AED;
  --app-violet-soft: #EDE9FE;
  --app-good: #15803D;
  --app-warn: #B45309;
  --app-bad: #DC2626;
  --app-g-violet: linear-gradient(135deg, #7C3AED, #A855F7);
  --app-g-mint: linear-gradient(135deg, #10B981, #34D399);
  --app-g-ocean: linear-gradient(135deg, #0EA5E9, #22D3EE);
  --app-g-sunset: linear-gradient(135deg, #F97362, #FBBF24);
  --app-h-violet: linear-gradient(135deg, #5B21B6, #7C3AED);
  --app-r: 22px;
  --app-r-hero: 28px;
  --app-lift: 0 1px 2px rgba(30, 27, 75, .02), 0 4px 8px rgba(30, 27, 75, .04), 0 12px 24px rgba(30, 27, 75, .10);
  --app-num: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-nav-h: 62px;
  --app-card-border: rgba(214, 214, 214, .6);
  --app-nav-bg: rgba(242, 242, 242, .96);
  --app-nav-glass: rgba(242, 242, 242, .72);
  --app-toast: #1F1F1F;
  --app-hue-violet: #7C3AED;
  --app-hue-ocean: #0369A1;
  --app-hue-sunset: #C2410C;
}

/* Dark look, from the app's dark tokens. Set on <html> by the head script and
   js/app-home.js; css/home-dark.css darkens the rest of the page to match. */
html[data-apph-theme="dark"] {
  --app-bg: #0D0D0D;
  --app-surface: #181818;
  --app-ink: #F2F2F2;
  --app-muted: #A3A3A3;
  --app-border: #333333;
  --app-violet: #A78BFA;
  --app-violet-soft: rgba(124, 58, 237, .2);
  --app-good: #4ADE80;
  --app-warn: #FBBF24;
  --app-bad: #F87171;
  --app-lift: 0 1px 2px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .25), 0 12px 24px rgba(0, 0, 0, .35);
  --app-card-border: rgba(51, 51, 51, .9);
  --app-nav-bg: rgba(13, 13, 13, .96);
  --app-nav-glass: rgba(13, 13, 13, .62);
  --app-toast: #2A2A2A;
  --app-hue-violet: #C4B5FD;
  --app-hue-ocean: #7DD3FC;
  --app-hue-sunset: #FDBA74;
}

.apph, .apph-nav, .apph-star { display: none; }

@media (max-width: 880px) {
  .apph { display: block; background: var(--app-bg); color: var(--app-ink); padding: 16px 0 8px; }
  .apph__wrap { padding: 0 16px; max-width: 560px; margin: 0 auto; }
  .apph svg.i, .apph-sheet svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; flex: none; }

  .apph__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .apph__lede { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 700; color: var(--app-muted); }
  .apph-pill { flex: none; height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
    border-radius: 100px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-ink);
    font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .4px; cursor: pointer; }
  .apph-pill .i { font-size: 17px; color: var(--app-violet); }
  .apph-circle { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--app-border);
    background: var(--app-surface); color: var(--app-ink); display: grid; place-items: center; font-size: 19px; cursor: pointer; }

  /* Settings sheet */
  .apph-sheet .apph-label { margin: 8px 0 8px; }
  .apph-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-bottom: 16px;
    border-radius: 100px; background: var(--app-surface); border: 1px solid var(--app-border); }
  .apph-seg button { height: 40px; border: 0; border-radius: 100px; background: none; font: inherit; font-size: 14px;
    font-weight: 700; color: var(--app-muted); cursor: pointer; }
  .apph-seg button[aria-checked="true"] { background: var(--app-violet-soft); color: var(--app-violet); }
  .apph-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .apph-langtile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 14px 16px; border-radius: var(--app-r); border: 1px solid var(--app-border); background: var(--app-surface);
    color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; }
  .apph-langtile__native { font-size: 17px; font-weight: 700; }
  .apph-langtile__en { font-size: 12px; color: var(--app-muted); }
  .apph-langtile .i { position: absolute; top: 12px; right: 12px; font-size: 18px; color: var(--app-violet); display: none; }
  .apph-langtile[aria-checked="true"] { border: 2px solid var(--app-violet); background: var(--app-violet-soft); padding: 13px 15px; }
  .apph-langtile[aria-checked="true"] .i { display: block; }

  .apph-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--app-muted); }

  .apph-card { background: var(--app-surface); border: 1px solid var(--app-card-border);
    border-radius: var(--app-r); box-shadow: var(--app-lift); }

  /* Search card */
  .apph-search { padding: 16px; }
  .apph-search__ends { display: flex; align-items: center; }
  .apph-end { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 6px;
    margin: -6px; border-radius: 12px; cursor: pointer; color: inherit; font: inherit; }
  .apph-end:focus-visible { outline: 2px solid var(--app-violet); outline-offset: 2px; }
  .apph-end--to { text-align: right; }
  .apph-end__code { display: block; margin-top: 4px; font-family: var(--app-num); font-size: 28px;
    font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .apph-end__code.is-empty { font-size: 22px; color: var(--app-muted); font-weight: 700; line-height: 1.3; }
  .apph-end__name { display: block; margin-top: 2px; font-size: 13px; color: var(--app-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apph-swap { flex: none; width: 48px; height: 48px; margin: 0 8px; border-radius: 50%;
    background: var(--app-violet-soft); border: 1px solid var(--app-border); color: var(--app-violet);
    display: grid; place-items: center; font-size: 18px; cursor: pointer; }
  .apph-date { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 16px;
    padding: 12px 0; border-top: 1px solid var(--app-border); cursor: pointer; }
  .apph-date .i { font-size: 16px; color: var(--app-muted); }
  .apph-date__text { font-size: 14px; font-weight: 700; }
  .apph-date__rel { margin-left: auto; font-size: 13px; color: var(--app-muted); }
  /* The real date input covers the row so a tap opens the phone's own picker. */
  .apph-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
    border: 0; padding: 0; cursor: pointer; }
  .apph-cta { width: 100%; height: 54px; border: 0; border-radius: 100px; background: var(--app-h-violet);
    color: #fff; font: inherit; font-size: 15.5px; font-weight: 800; display: flex; align-items: center;
    justify-content: center; gap: 8px; cursor: pointer;
    box-shadow: 0 1px 2px rgba(124, 58, 237, .02), 0 4px 8px rgba(124, 58, 237, .04), 0 12px 24px rgba(124, 58, 237, .10); }
  .apph-cta .i { font-size: 17px; }
  .apph-msg { margin: 10px 0 0; font-size: 13px; color: var(--app-bad); text-align: center; }

  /* Quick actions */
  .apph-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; }
  .apph-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none;
    border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--app-ink);
    text-decoration: none; cursor: pointer; }
  .apph-tile__icon { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center;
    color: #fff; font-size: 26px; }
  .apph-tile__icon--violet { background: var(--app-g-violet); box-shadow: 0 4px 12px rgba(124, 58, 237, .28); }
  .apph-tile__icon--mint { background: var(--app-g-mint); box-shadow: 0 4px 12px rgba(16, 185, 129, .28); }
  .apph-tile__icon--ocean { background: var(--app-g-ocean); box-shadow: 0 4px 12px rgba(14, 165, 233, .28); }
  .apph-tile__icon--sunset { background: var(--app-g-sunset); box-shadow: 0 4px 12px rgba(249, 115, 98, .28); }

  .apph-section { margin-top: 24px; }
  .apph-section > .apph-label { margin-bottom: 12px; }

  /* Tracked trains */
  .apph-empty { display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 14px; color: var(--app-muted); }
  .apph-empty .i { font-size: 18px; }
  .apph-tracked { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .apph-train { display: flex; align-items: center; gap: 10px; padding: 14px 10px 14px 16px; }
  .apph-train__main { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left;
    font: inherit; color: inherit; cursor: pointer; }
  /* Two lines, because the part of a long name that tells trains apart
     ("Tejas Rajdhani") usually comes after the route. */
  .apph-train__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
  .apph-train__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--app-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apph-train__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
  .apph-train__ago { font-size: 11.5px; color: var(--app-muted); }
  .apph-train__x { flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--app-muted);
    border-radius: 50%; display: grid; place-items: center; font-size: 18px; cursor: pointer; }
  .apph-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px;
    font-size: 12px; font-weight: 700; border: 1px solid; white-space: nowrap; }
  .apph-badge .i { font-size: 12px; }
  .apph-badge--good { color: var(--app-good); background: rgba(21, 128, 61, .12); border-color: rgba(21, 128, 61, .35); }
  .apph-badge--warn { color: var(--app-warn); background: rgba(180, 83, 9, .12); border-color: rgba(180, 83, 9, .35); }
  .apph-badge--bad { color: var(--app-bad); background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .35); }
  .apph-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--app-violet);
    animation: apph-pulse 1s ease-in-out infinite alternate; }
  @keyframes apph-pulse { from { opacity: .25; } to { opacity: 1; } }

  /* Recent searches */
  .apph-list { padding: 4px 0; }
  .apph-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; background: none;
    border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
  .apph-row + .apph-row { border-top: 1px solid var(--app-card-border); }
  .apph-row > .i { font-size: 18px; color: var(--app-muted); }
  .apph-row__text { flex: 1; min-width: 0; }
  .apph-row__title { display: block; font-family: var(--app-num); font-size: 15px; font-weight: 800; }
  .apph-row__sub { display: block; font-size: 13px; color: var(--app-muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .apph-row > .i:last-child { font-size: 16px; }

  /* Popular routes */
  .apph-routes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 4px 16px 20px; scrollbar-width: none; }
  .apph-routes::-webkit-scrollbar { display: none; }
  .apph-route { flex: none; width: 224px; scroll-snap-align: start; padding: 16px 16px 12px;
    border-radius: var(--app-r); border: 1px solid; text-decoration: none; color: var(--app-ink); }
  .apph-route--violet { --c1: 124, 58, 237; --c2: 168, 85, 247; --hue: var(--app-hue-violet); }
  .apph-route--ocean { --c1: 14, 165, 233; --c2: 34, 211, 238; --hue: var(--app-hue-ocean); }
  .apph-route--sunset { --c1: 249, 115, 98; --c2: 251, 191, 36; --hue: var(--app-hue-sunset); }
  .apph-route { background: linear-gradient(135deg, rgba(var(--c1), .12), rgba(var(--c2), .12));
    border-color: rgba(var(--c1), .22);
    box-shadow: 0 1px 2px rgba(var(--c1), .02), 0 4px 8px rgba(var(--c1), .04), 0 12px 24px rgba(var(--c1), .10); }
  .apph-route__line { display: flex; align-items: center; gap: 4px; color: var(--hue); font-size: 13px; }
  .apph-route__dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--c1)); flex: none; }
  .apph-route__bar { flex: 1; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgb(var(--c1)), rgb(var(--c2))); }
  .apph-route__ends { display: flex; justify-content: space-between; margin-top: 10px; }
  .apph-route__ends span:last-child { text-align: right; }
  .apph-route__code { display: block; font-family: var(--app-num); font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
  .apph-route__city { display: block; font-size: 11.5px; color: var(--app-muted); }
  .apph-route__go { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--hue); }

  /* Station picker sheet */
  .apph-sheet { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; }
  .apph-sheet[hidden] { display: none; }
  .apph-sheet__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 20, .45); }
  .apph-sheet__panel { position: relative; width: 100%; max-height: 86vh; max-height: 86dvh; display: flex;
    flex-direction: column; background: var(--app-bg); color: var(--app-ink);
    border-radius: var(--app-r-hero) var(--app-r-hero) 0 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .apph-sheet__grab { width: 38px; height: 4px; border-radius: 4px; background: var(--app-border); margin: 0 auto 12px; }
  .apph-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .apph-sheet__title { margin: 0; font-size: 21px; font-weight: 800; }
  .apph-sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--app-border);
    background: var(--app-surface); display: grid; place-items: center; font-size: 18px; color: var(--app-ink); cursor: pointer; }
  .apph-sheet__q { width: 100%; height: 50px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--app-border);
    background: var(--app-surface); font: inherit; font-size: 16px; color: var(--app-ink); }
  .apph-sheet__q:focus { outline: 2px solid var(--app-violet); outline-offset: 0; border-color: transparent; }
  .apph-sheet__list { overflow-y: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
  .apph-sheet__list .apph-label { margin: 12px 0 6px; }
  .apph-sheet__list .apph-row { padding: 10px 4px; }
  .apph-sheet__note { padding: 16px 4px; font-size: 14px; color: var(--app-muted); }
  html.apph-lock, html.apph-lock body { overflow: hidden; }

  /* Follow button on the live status result */
  .apph-star { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px;
    border-radius: 100px; border: 1px solid var(--app-border); background: var(--app-surface);
    font: inherit; font-size: 13px; font-weight: 700; color: var(--app-violet); cursor: pointer; }
  .apph-star[hidden] { display: none; }
  .apph-star svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .apph-star.is-on { background: var(--app-violet-soft); }
  .apph-star.is-on svg { fill: currentColor; }

  /* Toast */
  .apph-toast { position: fixed; left: 16px; right: 16px; z-index: 310;
    bottom: calc(var(--app-nav-h) + 12px + env(safe-area-inset-bottom)); display: flex; align-items: center;
    gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--app-toast); color: #fff; font-size: 14px; }
  .apph-toast[hidden] { display: none; }
  .apph-toast button { margin-left: auto; background: none; border: 0; color: #C4B5FD; font: inherit;
    font-weight: 800; cursor: pointer; }

  /* Bottom nav */
  .apph-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid;
    grid-template-columns: repeat(5, 1fr); height: calc(var(--app-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--app-nav-bg);
    border-top: 1px solid var(--app-border); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .apph-nav { background: var(--app-nav-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  }
  .apph-nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; background: none; border: 0; padding: 0; font: inherit; font-size: 11px; font-weight: 600;
    letter-spacing: .1px; color: var(--app-muted); text-decoration: none; cursor: pointer; }
  .apph-nav__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; transform: scale(.92); transition: transform .18s; }
  .apph-nav__item.is-active { color: var(--app-violet); font-weight: 800; }
  .apph-nav__item.is-active svg { transform: scale(1); }
  .apph-nav__item.is-active::after { content: ""; position: absolute; bottom: 5px; width: 16px; height: 3px;
    border-radius: 3px; background: var(--app-g-violet); }

  body.has-apph-nav { padding-bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom)); }
  body.has-apph-nav .social-share-floating { bottom: calc(var(--app-nav-h) + 18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .apph-pulse { animation: none; }
  .apph-nav__item svg { transition: none; }
}

/* premium.css colours every link blue on hover; on a phone that hover sticks
   after a tap, so the app block's links keep their own colours. */
.apph-tile:hover, .apph-tile:focus, .apph-row:hover, .apph-route:hover { color: var(--app-ink); }
.apph-nav__item:hover, .apph-nav__item:focus { color: var(--app-muted); }
.apph-nav__item.is-active:hover, .apph-nav__item.is-active:focus { color: var(--app-violet); }

/* The Android install bar (css/openapp.css) sits just above the bottom nav on
   the home page, and the toast moves up above both. */
@media (max-width: 880px) {
  body.has-apph-nav .appbar { bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom)); padding-bottom: .65rem; }
  body.has-apph-nav.has-appbar { padding-bottom: calc(var(--app-nav-h) + 4.6rem + env(safe-area-inset-bottom)); }
  body.has-appbar .apph-toast { bottom: calc(var(--app-nav-h) + 4.6rem + 12px + env(safe-area-inset-bottom)); }
}

/* The local trains link is a sentence, not a station code. */
.apph-local { background: var(--app-surface); }
.apph-local__title { font-family: inherit; font-weight: 700; }

/* Devanagari has no capitals, and tracking pulls its joined letters apart. */
[lang="hi"] .apph-label { letter-spacing: 0; font-size: 12.5px; }