/* Safarnama app, phone design "D" (3 Oct 2026). Same look as the site's phone.css: paper ground, navy ink,
   gold rules, tickets for the key figures, compact rows. Loaded last in app.html; applies only at phone width,
   so the laptop app is unchanged. Light: paper. Dark: deep navy with cream ink and gold. */

@media (max-width: 768px) {
  /* ================= Tokens ================= */
  :root:not([data-theme="dark"]) {
    --d-paper: #F5EDDC; --d-card: #FBF6EA; --d-ink: #173C63; --d-mute: #5C6B7E; --d-gold: #805717; --d-rule: #B8862E;
    --d-line: rgba(23,60,99,.14); --d-dash: rgba(23,60,99,.3); --d-dots: rgba(150,110,40,.07); --d-tint: #EFE2C4;
    --d-ticket: #173C63; --d-ticket-fg: #F5EDDC; --d-ticket-k: #E9C77B; --d-ticket-sub: #D8CDB4;
    --d-btn: #173C63; --d-btn-fg: #F5EDDC; --d-tab: #173C63; --d-tab-fg: #AEBBD0; --d-tab-on: #E9C77B;
  }
  :root[data-theme="dark"] {
    --d-paper: #0E1830; --d-card: #16233F; --d-ink: #EFE6D2; --d-mute: #A9B5C9; --d-gold: #E0B65F; --d-rule: #C9A14E;
    --d-line: rgba(233,199,123,.16); --d-dash: rgba(233,199,123,.3); --d-dots: rgba(233,199,123,.035); --d-tint: rgba(233,199,123,.1);
    --d-ticket: #EDE0C2; --d-ticket-fg: #173C63; --d-ticket-k: #805717; --d-ticket-sub: #4F5D70;
    --d-btn: #E9C77B; --d-btn-fg: #14233F; --d-tab: #0A1226; --d-tab-fg: #8C9AB3; --d-tab-on: #E9C77B;
  }
  :root, :root[data-theme="dark"] {
    --bg: var(--d-paper); --surface: var(--d-card); --text: var(--d-ink); --muted: var(--d-mute); --faint: var(--d-mute);
    --saffron: var(--d-btn); --saffron-deep: var(--d-gold); --saffron-tint: var(--d-tint); --green: var(--d-btn); --green-tint: var(--d-tint);
    --navy: var(--d-ink); --border: var(--d-line); --border-soft: var(--d-line); --gold: var(--d-gold);
    --shadow: none; --shadow-lg: 0 10px 26px rgba(14,42,74,.12);
    --d-barh: 54px; --d-tabh: 60px; --d-top: env(safe-area-inset-top, 0px); --d-safe: env(safe-area-inset-bottom, 0px);
  }

  /* ================= Ground and scrolling ================= */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  html, body { background-color: var(--d-paper) !important; }
  body { background-image: radial-gradient(var(--d-dots) 1px, transparent 1px) !important; background-size: 5px 5px !important; color: var(--d-ink); }

  /* ================= Top bar: one slim paper bar, nothing floats over content ================= */
  body:has(.screen.active:not(.auth)) .app-topbar { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 38;
    height: calc(var(--d-barh) + var(--d-top)); background: var(--d-paper); border-bottom: 1px solid var(--d-line); }
  .tophome { top: calc(10px + var(--d-top)) !important; left: 10px !important; height: 34px !important; padding: 0 6px !important; gap: 2px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; backdrop-filter: none !important;
    color: var(--d-ink) !important; font-family: var(--serif) !important; font-weight: 700 !important; font-size: 1.15rem !important; z-index: 41 !important; }
  .tophome svg { color: var(--d-gold); width: 16px !important; height: 16px !important; }
  .theme-toggle { top: calc(11px + var(--d-top)) !important; right: 58px !important; width: 32px !important; height: 32px !important; z-index: 41 !important;
    background: var(--d-card) !important; border: 1px solid var(--d-line) !important; box-shadow: none !important; font-size: 14px !important; }
  .topava { top: calc(9px + var(--d-top)) !important; right: 12px !important; width: 36px !important; height: 36px !important; z-index: 41 !important;
    border: 2px solid var(--d-rule) !important; box-shadow: none !important; background: var(--d-ticket) !important; color: var(--d-ticket-k) !important; }
  .main, .main.dash-grid { padding: calc(var(--d-barh) + var(--d-top) + 14px) 16px calc(var(--d-tabh) + var(--d-safe) + 24px) !important; }

  /* ================= Bottom tab bar (same as the site) ================= */
  .nav { background: var(--d-tab) !important; border-top: 1px solid rgba(233,199,123,.18) !important; padding: 4px 0 max(4px, var(--d-safe)) !important; box-shadow: none !important; }
  .nav-i { color: var(--d-tab-fg) !important; gap: 2px !important; padding: 6px 0 !important; }
  .nav-i.active, .nav .nav-i.active { color: var(--d-tab-on) !important; } /* beats app-ui.css .nav button.active (6 Oct) */
  .nav-lb { font-size: .64rem !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 600 !important; }
  .toast { bottom: calc(var(--d-tabh) + var(--d-safe) + 14px) !important; background: var(--d-ticket) !important; color: var(--d-ticket-fg) !important; border: 0 !important; }

  /* ================= Shared type ================= */
  .label, .section-label, .ui-eyebrow, .ws-lbl, .pace-l, .mapcard-title, .stat-l, .pstat-l {
    color: var(--d-gold) !important; font-size: .64rem !important; letter-spacing: .18em !important; font-weight: 700 !important; }
  .page-head h1, .view-title, .ui-heading h1, .coll-intro h1 { font-family: var(--serif) !important; color: var(--d-ink) !important; line-height: 1.2 !important; }
  .view-title, .ui-heading h1, .coll-intro h1 { font-size: 1.6rem !important; margin: 4px 0 6px !important; }
  .ui-subtitle, .coll-intro p { font-size: .85rem !important; line-height: 1.5 !important; color: var(--d-mute) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px !important; }
  .ui-heading { margin-bottom: 10px !important; padding: 0 !important; }
  .ui-heading .ui-flourish { display: none !important; }
  .card, .mapcard, .strava-box, .streak-card, .pace-box, .inv-strip, .grp-card, .inv-box, .ui-reward, .tp-card {
    background: var(--d-card) !important; border: 1px solid var(--d-line) !important; border-radius: 12px !important; box-shadow: none !important; }
  .btn:not(.ghost):not(.sb-sync), .cc-walk:not(.ghost), .inv-row .btn, .inv-strip .btn { background: var(--d-btn) !important; color: var(--d-btn-fg) !important; border-color: var(--d-btn) !important; }
  .ui-text-button, .coll-badge-more { color: var(--d-gold) !important; }
  .d-rule-top { border-top: 3px double var(--d-rule) !important; }

  /* ================= Dashboard ================= */
  .walking-strip { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 6px !important; padding: 9px 12px !important; margin-bottom: 10px !important;
    background: var(--d-card) !important; border: 1.5px dashed var(--d-dash) !important; border-radius: 10px !important; box-shadow: none !important; min-width: 0; }
  .walking-strip .ws-dot { display: none !important; }
  .walking-strip .ws-lbl { flex: 0 0 auto; }
  .walking-strip strong { font-family: var(--serif); font-size: 1rem !important; color: var(--d-ink) !important; flex: 0 0 auto; }
  .walking-strip .ws-trail, .walking-strip .ws-mode { font-size: .74rem !important; color: var(--d-mute) !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
  .walking-strip .ws-switch { margin-left: auto !important; flex: 0 0 auto; font-size: .74rem !important; color: var(--d-gold) !important; background: none !important; border: 0 !important; padding: 0 !important; white-space: nowrap; }
  .dash-cover { height: 170px !important; border-radius: 12px !important; margin-bottom: 24px !important; box-shadow: none !important; }
  .dash-cover-cap { font-family: var(--serif) !important; font-size: 1.1rem !important; }
  .dash-cover-credit { font-size: 8.5px !important; }
  .page-head { margin: 4px 0 10px !important; }
  .page-head h1 { font-size: 1.35rem !important; margin-top: 4px !important; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .page-head .loc-emoji { font-size: 1.1rem !important; }
  .logcard { border: 1.5px dashed var(--d-dash) !important; border-radius: 12px !important; background: var(--d-card) !important; box-shadow: none !important; margin-bottom: 12px !important; }
  .logcard-toggle { padding: 12px 14px !important; font-size: .95rem !important; color: var(--d-ink) !important; }
  .logcard-toggle svg { color: var(--d-gold) !important; }

  /* Progress as a ticket */
  .prog-wrap { position: relative; background: var(--d-ticket) !important; color: var(--d-ticket-fg) !important; border-radius: 12px !important; padding: 14px 16px 10px !important; margin-bottom: 10px !important; }
  .prog-wrap::before, .prog-wrap::after { content: ""; position: absolute; top: 46px; width: 16px; height: 16px; border-radius: 50%; background: var(--d-paper); }
  .prog-wrap::before { left: -8px; } .prog-wrap::after { right: -8px; }
  .prog-row { margin: 0 !important; }
  .prog-km { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: .85rem !important; color: var(--d-ticket-sub) !important; }
  .prog-km .big, .prog-climb .big { font-family: var(--serif) !important; font-size: 1.7rem !important; color: var(--d-ticket-fg) !important; line-height: 1.1 !important; }
  #d-total, #d-climb-total { color: var(--d-ticket-sub) !important; }
  .prog-climb { font-size: .85rem !important; color: var(--d-ticket-sub) !important; }
  .prog-climb .pc-sep { display: none !important; }
  .prog-remain { font-size: .76rem !important; color: var(--d-ticket-k) !important; margin: 6px 0 4px !important; padding-top: 8px; border-top: 1.5px dashed rgba(233,199,123,.4); }
  :root[data-theme="dark"] .prog-remain { border-top-color: rgba(23,60,99,.3); }
  .routebar { margin-top: 18px !important; }
  .routebar::before { background: color-mix(in srgb, var(--d-ticket-sub) 30%, transparent) !important; } /* the road still to walk, visible on the ticket */
  .routebar-fill { background: var(--d-ticket-k) !important; }
  .m-dot-c { width: 9px !important; height: 9px !important; border-width: 1.5px !important; }
  .m-dot-c.done { background: var(--d-ticket-k) !important; border-color: var(--d-ticket-k) !important; }
  .m-dot-c.current { background: var(--d-ticket-fg) !important; border-color: var(--d-ticket-k) !important; }
  .routebar-you span { color: var(--d-ticket-k) !important; font-size: .58rem !important; }

  /* Stats: one row of four */
  .stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; margin-bottom: 10px !important; }
  .stat { padding: 9px 4px !important; background: var(--d-card) !important; border: 1px solid var(--d-line) !important; border-radius: 10px !important; box-shadow: none !important; min-width: 0; }
  .stat-v { font-family: var(--serif) !important; font-size: 1.05rem !important; color: var(--d-ink) !important; }
  .stat-l { font-size: .54rem !important; letter-spacing: .1em !important; }
  .pace-box { padding: 12px 14px !important; gap: 0 !important; margin-bottom: 10px !important; border-style: dashed !important; }
  .pace-box > svg { display: none !important; }
  .pace-v { font-size: .84rem !important; line-height: 1.5 !important; color: var(--d-ink) !important; }

  /* Map and elevation */
  .mapelev { gap: 10px !important; margin-bottom: 10px !important; }
  .mapcard-head { padding: 10px 12px !important; gap: 8px !important; }
  .mapcard-hint { font-size: .7rem !important; color: var(--d-mute) !important; }
  .cbar-row { padding: 8px 12px !important; }
  .cbar-fill { background: var(--d-ink) !important; }
  .cbar-txt { font-size: .74rem !important; color: var(--d-ink) !important; }
  .mapcard-body { padding: 10px 12px 12px !important; }
  .map-credit-line { display: none !important; }
  #route-map, .route-map, .leaflet-container { max-height: 260px; }

  /* Streak, invite, keepsake: compact rows */
  .streak-card { display: grid !important; grid-template-columns: 46px 1fr !important; gap: 12px !important; align-items: center !important; padding: 12px 14px !important; margin-bottom: 10px !important; }
  .streak-num { width: 46px !important; height: 46px !important; font-size: 1.3rem !important; background: var(--d-ticket) !important; color: var(--d-ticket-k) !important; }
  #streak-title { font-size: .95rem !important; color: var(--d-ink) !important; }
  #streak-sub { font-size: .76rem !important; line-height: 1.4 !important; color: var(--d-mute) !important; }
  .streak-weeks i { background: var(--d-tint) !important; }
  .streak-weeks i.on { background: var(--d-ink) !important; }
  .inv-strip { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; margin-bottom: 10px !important; font-size: .84rem !important; line-height: 1.45 !important; }
  .inv-strip .btn { flex: 0 0 auto; padding: 9px 12px !important; font-size: .8rem !important; }
  .ui-reward { grid-template-columns: 76px 1fr !important; gap: 12px !important; padding: 12px 14px !important; align-items: center !important; }
  .ui-reward img { width: 76px !important; height: auto !important; }
  .ui-reward h3 { font-size: 1.02rem !important; margin: 2px 0 !important; }
  .ui-reward p { font-size: .76rem !important; margin: 0 !important; }
  .ui-reward .ui-eyebrow { font-size: .56rem !important; }
  .ui-reward .ui-text-button { font-size: .78rem !important; padding: 4px 0 0 !important; }

  /* Your route: one list with rows, not a stack of boxes */
  .dash-aside { margin-top: 6px !important; padding-top: 14px !important; border-top: 3px double var(--d-rule) !important; }
  .monument-list { background: var(--d-card) !important; border: 1px solid var(--d-line) !important; border-radius: 12px !important; overflow: hidden; gap: 0 !important; }
  .m-card { margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--d-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 12px !important; background: transparent !important; gap: 10px !important; }
  .m-card:last-child { border-bottom: 0 !important; }
  .m-card.current { background: var(--d-tint) !important; }
  .m-card.locked { opacity: .8; }
  .m-icon { font-size: 1.05rem !important; width: 24px !important; }
  .m-name { font-size: .9rem !important; color: var(--d-ink) !important; }
  .m-desc { font-size: .72rem !important; color: var(--d-mute) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-info { min-width: 0; }
  .m-km-val { font-size: .8rem !important; font-family: var(--serif) !important; color: var(--d-ink) !important; }
  .m-km-asc { font-size: .66rem !important; }
  .m-status { font-size: .85rem !important; }
  .m-progress-bar { background: var(--d-rule) !important; }

  /* ================= Routes ================= */
  .coll-intro { margin-bottom: 8px !important; padding: 0 !important; text-align: left !important; }
  .coll-badges-row { margin-bottom: 8px !important; }
  .coll-badge-strip { gap: 8px !important; min-height: 0 !important; }
  .coll-badge-strip .bt-art, .coll-badge-strip img { width: 44px !important; height: 44px !important; }
  #ui-route-search { display: grid !important; grid-template-columns: 1fr 42%; gap: 8px !important; margin-bottom: 4px !important; }
  #ui-route-search .ui-search, #ui-route-search .ui-select { height: 42px !important; font-size: .85rem !important; padding: 0 12px !important; border-radius: 10px !important;
    background-color: var(--d-card) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
  #ui-route-count { grid-column: 1 / -1; font-size: .6rem !important; }
  .ui-trail-browser { margin: 8px 0 !important; padding: 12px 0 0 !important; border-top: 3px double var(--d-rule) !important; background: transparent !important; border-radius: 0 !important; }
  .ui-trail-browser-head { margin-bottom: 8px !important; }
  .ui-trail-browser-head h2 { font-size: 1.2rem !important; margin: 2px 0 0 !important; }
  .ui-trail-browser-head > span { display: none !important; }
  .ui-trail-tabs { display: flex !important; overflow-x: auto; gap: 8px !important; scrollbar-width: none; border: 0 !important; background: transparent !important; margin: 0 -16px !important; padding: 2px 16px 8px !important; scroll-padding-inline: 16px; }
  .ui-trail-tabs::-webkit-scrollbar { display: none; }
  .ui-trail-tabs button { flex: 0 0 auto !important; min-width: 128px; padding: 9px 12px !important; border: 1px solid var(--d-line) !important; border-radius: 10px !important;
    background: var(--d-card) !important; color: var(--d-ink) !important; text-align: left !important; }
  .ui-trail-tabs button span { font-size: .58rem !important; color: var(--d-gold) !important; }
  .ui-trail-tabs button strong { font-size: .88rem !important; display: block; white-space: nowrap; }
  .ui-trail-tabs button small { font-size: .66rem !important; color: var(--d-mute) !important; }
  .ui-trail-tabs button[aria-pressed="true"], .ui-trail-tabs button.active, .ui-trail-tabs button[aria-selected="true"] { background: var(--d-ticket) !important; border-color: var(--d-ticket) !important; color: var(--d-ticket-fg) !important; }
  .ui-trail-tabs button[aria-pressed="true"] small, .ui-trail-tabs button.active small, .ui-trail-tabs button[aria-selected="true"] small { color: var(--d-ticket-sub) !important; }
  .ui-trail-tabs button[aria-pressed="true"] strong, .ui-trail-tabs button.active strong, .ui-trail-tabs button[aria-selected="true"] strong { color: var(--d-ticket-fg) !important; }
  .ui-trail-tabs button[aria-pressed="true"] span, .ui-trail-tabs button.active span, .ui-trail-tabs button[aria-selected="true"] span { color: var(--d-ticket-k) !important; }
  #ui-trail-summary { padding: 10px 0 4px !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
  #ui-trail-summary h3 { font-size: 1.1rem !important; margin: 2px 0 !important; }
  #ui-trail-summary p { font-size: .78rem !important; margin: 0 !important; color: var(--d-mute) !important; }
  .coll-cities { gap: 8px !important; max-width: none !important; }
  .coll-city { display: grid !important; grid-template-columns: 84px 1fr !important; align-items: stretch !important; background: var(--d-card) !important;
    border: 1px solid var(--d-line) !important; border-radius: 12px !important; box-shadow: none !important; overflow: hidden; min-height: 0 !important; }
  .coll-city .cc-photo { width: 84px !important; height: 100% !important; min-height: 96px; aspect-ratio: auto !important; }
  .coll-city .cc-photo img { width: 100%; height: 100%; object-fit: cover; }
  .coll-city .cc-body { padding: 9px 12px !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  .coll-city .cc-name { flex: 1 0 100%; font-size: 1.05rem !important; line-height: 1.2 !important; margin: 0 !important; color: var(--d-ink) !important; }
  .coll-city .cc-detail { flex: 1 0 100%; font-size: .74rem !important; line-height: 1.4 !important; margin: 0 !important; color: var(--d-mute) !important; }
  .coll-city .ui-photo-credit { flex: 1 0 100%; order: 9; font-size: 8.5px !important; line-height: 1.3 !important; margin: 0 !important; opacity: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .coll-city .cc-tag { font-size: .58rem !important; padding: 3px 8px !important; margin: 0 !important; background: var(--d-tint) !important; color: var(--d-gold) !important; }
  .coll-city .cc-walk { padding: 6px 10px !important; font-size: .74rem !important; margin: 0 !important; border-radius: 8px !important; }
  .coll-city .cc-walk.ghost { background: transparent !important; border: 1px solid var(--d-ink) !important; color: var(--d-ink) !important; }
  .tp-card { padding: 12px 14px !important; text-align: left !important; margin-top: 10px !important; }
  .tp-card .m-emoji { display: none !important; }
  .tp-card h3 { font-size: 1rem !important; margin: 0 0 2px !important; }
  .tp-card p { font-size: .78rem !important; margin: 0 0 6px !important; }
  .tp-card .series-dots { justify-content: flex-start !important; }
  .series-dot.done { background: var(--d-ink) !important; }
  .cc-cert { font-size: .78rem !important; }

  /* ================= Badges ================= */
  .ui-ach-hero { display: block !important; padding: 14px !important; background: var(--d-card) !important; border: 1px solid var(--d-line) !important; border-radius: 12px !important; box-shadow: none !important; margin-bottom: 10px !important; }
  .ui-ach-hero h2 { font-size: 1.15rem !important; margin: 2px 0 6px !important; }
  .ui-ach-hero > div > p { display: none !important; }
  .ui-ach-numbers { gap: 6px !important; margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; }
  .ui-ach-numbers strong { font-size: 1.35rem !important; }
  .ui-ach-numbers span { font-size: .62rem !important; }
  .ui-featured { display: grid !important; grid-template-columns: 82px 1fr !important; gap: 12px !important; align-items: center; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--d-line) !important; }
  .ui-featured h3 { font-size: 1.05rem !important; margin: 0 !important; }
  .ui-featured p { font-size: .74rem !important; margin: 2px 0 !important; }
  .ui-toolbar { gap: 6px !important; margin-bottom: 10px !important; }
  .ui-chip { padding: 6px 12px !important; font-size: .74rem !important; min-height: 0 !important; background: var(--d-card) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
  .ui-chip[aria-pressed="true"], .ui-chip.active, .ui-chip.on { background: var(--d-ticket) !important; color: var(--d-ticket-fg) !important; border-color: var(--d-ticket) !important; }
  .ui-select, .ui-search { height: 40px !important; font-size: .85rem !important; border-radius: 10px !important; background-color: var(--d-card) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
  #ui-ach-category { flex: 1 1 44%; } #ui-ach-search { flex: 1 1 50%; min-width: 0; }
  .ui-passport { border-radius: 14px !important; margin-bottom: 14px !important; }
  .ui-passport-cover { padding: 16px !important; gap: 10px !important; }
  .ui-passport-cover h2 { font-size: 1.5rem !important; letter-spacing: .3em !important; margin: 2px 0 !important; }
  .ui-passport-cover > div > p { display: none !important; }
  .ui-passport-id { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .ui-passport-id strong { font-size: 1rem !important; }
  .ui-passport-id small { font-size: .7rem !important; }
  .ui-passport-export { padding: 9px 14px !important; font-size: .74rem !important; }
  .ui-passport-tabs { display: flex !important; overflow-x: auto; scrollbar-width: none; }
  .ui-passport-tabs::-webkit-scrollbar { display: none; }
  .ui-passport-tabs button { flex: 0 0 auto !important; min-width: 116px; padding: 8px 10px !important; font-size: .82rem !important; }
  .ui-passport-page { padding: 16px !important; }
  .ui-passport-page h2 { font-size: 1.3rem !important; }
  .ui-passport-page > p { font-size: .82rem !important; }
  .ui-section-head { margin: 14px 0 8px !important; padding-top: 12px !important; border-top: 3px double var(--d-rule) !important; }
  .ui-section-head h2 { font-size: 1.2rem !important; }
  .ui-badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .ui-badge { padding: 8px 6px 9px !important; border-radius: 10px !important; background: var(--d-card) !important; border: 1px solid var(--d-line) !important; box-shadow: none !important; min-height: 0 !important; gap: 4px !important; }
  .ui-badge-art { margin: 0 0 2px !important; }
  .ui-badge h3 { font-size: .74rem !important; line-height: 1.25 !important; margin: 0 !important; }
  .ui-badge p { display: none !important; }
  .ui-badge-state { font-size: .58rem !important; padding: 2px 6px !important; margin: 2px 0 0 !important; background: var(--d-tint) !important; color: var(--d-gold) !important; }
  .ui-badge[data-earned="true"] .ui-badge-state { background: var(--d-ticket) !important; color: var(--d-ticket-k) !important; }

  /* ================= Profile ================= */
  #s-profile .main > .ui-eyebrow { background: transparent !important; padding: 0 !important; }
  .prof-id { gap: 12px !important; margin: 6px 0 14px !important; align-items: center !important; }
  .prof-ava { width: 56px !important; height: 56px !important; border: 2px solid var(--d-rule) !important; }
  .prof-name { font-size: 1.2rem !important; font-family: var(--serif) !important; }
  .prof-photo-btn { font-size: .76rem !important; color: var(--d-gold) !important; }
  .strava-box { padding: 14px !important; }
  .strava-box p { font-size: .78rem !important; line-height: 1.5 !important; }
  .strava-box .sb-sync { padding: 9px 16px !important; font-size: .85rem !important; }
  .prof-grid { gap: 10px !important; }
  .prof-col-l, .prof-col-r { gap: 10px !important; }
  .prof-col-l .card { padding: 12px 14px !important; margin-bottom: 10px !important; }
  .pwin { gap: 4px !important; }
  .pstat-v { font-family: var(--serif) !important; font-size: 1.15rem !important; }
  .pstat-l { font-size: .54rem !important; }
  .ptype { padding: 7px 0 !important; font-size: .85rem !important; }
  .ptype-meta { font-size: .72rem !important; }
  .prof-alltime { font-size: .78rem !important; }
  .prof-note { font-size: .7rem !important; line-height: 1.5 !important; }
  .prof-recent-hd { margin: 4px 0 6px !important; padding-top: 12px !important; border-top: 3px double var(--d-rule) !important; }
  .hist-item { padding: 10px 12px !important; gap: 10px !important; margin-bottom: 0 !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--d-line) !important; background: transparent !important; box-shadow: none !important; }
  .hist-icon { font-size: 1rem !important; width: 22px !important; }
  .hist-date { font-size: .68rem !important; color: var(--d-mute) !important; }
  .hist-detail { font-size: .84rem !important; line-height: 1.35 !important; color: var(--d-ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hist-status { font-size: .68rem !important; }
  .hist-km { font-family: var(--serif) !important; font-size: 1rem !important; color: var(--d-ink) !important; }
  .inv-box { padding: 12px 14px !important; }
  .inv-lead { font-size: .82rem !important; line-height: 1.45 !important; margin-bottom: 8px !important; }
  .inv-row input { height: 40px !important; font-size: .78rem !important; background: var(--d-paper) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
  .inv-stats { font-size: .72rem !important; }
  .prof-links { gap: 4px 14px !important; font-size: .8rem !important; margin-top: 14px !important; padding-top: 12px !important; border-top: 3px double var(--d-rule) !important; }
  .prof-links a { color: var(--d-ink) !important; }
  .prof-danger { padding: 10px 14px !important; font-size: .76rem !important; background: transparent !important; border: 1px dashed var(--d-dash) !important; border-radius: 10px !important; }

  /* fixes after first look */
  .coll-city .cc-body { flex-direction: row !important; align-items: center !important; padding: 9px 12px !important; }
  .coll-intro { background: transparent !important; color: var(--d-ink) !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
  .coll-intro::before, .coll-intro::after { display: none !important; }
  .coll-intro h1 { color: var(--d-ink) !important; }
  .coll-badges-row { flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: 12px !important; border: 1px solid var(--d-line) !important; box-shadow: none !important; }
  .coll-badge-strip { flex-wrap: nowrap !important; overflow: hidden; flex: 1 1 auto; }
  .coll-badges-row .coll-badge-more { flex: 0 0 auto; margin: 0 0 0 auto !important; }
  .ui-passport-cover { background: linear-gradient(150deg, #173C63, #0E2A4A) !important; color: #F5EDDC !important; }
  .ui-passport-cover .ui-eyebrow { color: #E9C77B !important; }
  .ui-passport-export { background: #E9C77B !important; color: #173C63 !important; border: 0 !important; }
  .prof-recent-hd { background: transparent !important; border-radius: 0 !important; padding: 12px 0 6px !important; }
  .ui-featured > div:first-child { width: 82px; }
  .ui-featured .ui-stamp, .ui-featured img { width: 82px !important; height: auto !important; max-width: 82px; }
  .ui-featured > div:last-child { min-width: 0; }
  .ui-featured > div:first-child { flex: 0 0 82px; width: 82px !important; min-width: 0 !important; max-width: 82px !important; overflow: hidden; }
  .ui-featured .ui-stamp { margin: 0 !important; }
  .ui-featured > div:last-child { padding-left: 2px; }
  /* the passport is always paper, so its ink stays navy in both themes */
  .ui-passport-spread, .ui-passport-page, .ui-passport-tabs { --d-ink: #173C63; --text: #173C63; --d-mute: #5C6B7E; --muted: #5C6B7E; --faint: #5C6B7E; --d-gold: #805717; --saffron-deep: #805717; color: #173C63; }
  .ui-passport-page h2, .ui-passport-page h3, .ui-passport-page strong, .ui-trail-visa h3 { color: #173C63 !important; }

  /* ---- text wraps where it makes sense, never collides (overlap check, 3 Oct) ---- */
  .walking-strip { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "lbl lbl sw" "city trail trail" "mode mode mode" !important;
    align-items: baseline !important; column-gap: 6px !important; row-gap: 2px !important; }
  .walking-strip .ws-lbl { grid-area: lbl; }
  .walking-strip .ws-switch { grid-area: sw; }
  .walking-strip strong { grid-area: city; }
  .walking-strip .ws-trail { grid-area: trail; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .walking-strip .ws-mode { grid-area: mode; white-space: normal !important; }
  .m-card { display: grid !important; grid-template-columns: 24px minmax(0, 1fr) auto 18px !important; align-items: center !important; position: relative; }
  .m-desc { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35 !important; }
  .m-km { text-align: right !important; white-space: nowrap; }
  .m-progress-bar { position: absolute !important; left: 0; bottom: 0; }
  .coll-city .ui-photo-credit { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  #ui-route-search { grid-template-columns: minmax(0, 1fr) minmax(0, 40%) !important; }
  #ui-route-search .ui-search, #ui-route-search .ui-select { min-width: 0 !important; width: 100% !important; }
  .prof-ava-edit { display: none !important; }
  #prof-ava-initials { font-size: 1.15rem !important; }
  /* stamps need room for their names (Thiruvananthapuram): two per row */
  .ui-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ui-badge-art { height: auto !important; aspect-ratio: 880 / 640; max-width: 100% !important; margin: 0 auto 4px !important; }
  .ui-badge h3 { font-size: .82rem !important; }
  .ui-passport-stamp > span:last-child { white-space: normal !important; line-height: 1.35 !important; letter-spacing: .06em !important; font-size: .58rem !important; }
  .ui-passport-stamps { gap: 16px 12px !important; }
}

/* Anything the app hides (the hidden attribute) stays hidden, even where a phone rule above sets display with !important
   (5 Oct 2026: an empty "0" streak card showed for new walkers). Keep this rule last. */
[hidden] { display: none !important; }