/* Safar Seva · interaction and layout refinements. LOFL Sand tokens are shared. */
:root { --content-width:1120px; }
* { box-sizing:border-box; }
body { margin:0; }
.safar-page { max-width:var(--content-width); margin:24px auto; padding:24px 32px 32px; }
.safar-page :is(h1,h2,h3,p,small,strong) { overflow-wrap:break-word; }
.safar-page :is(button,a,select,summary) { transition:background-color .16s,color .16s,border-color .16s,transform .16s; }
button:disabled { cursor:not-allowed; }
button:disabled:hover { transform:none!important; }
:target { scroll-margin-top:24px; }
.site-header.lofl-frame { padding:8px 0 24px; gap:24px; }
.brand { gap:12px; }
.brand-mark { width:52px; height:52px; }
.brand small { font-size:11px; }
.site-header nav { gap:20px; }
.site-header nav a { padding:4px 2px; color:var(--ink); }
.connection { font-size:11.5px; }
.live-stats { border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; margin:0; padding:20px 0 16px; column-gap:24px; row-gap:12px; }
.live-number { font-size:30px; font-variant-numeric:tabular-nums; }
.live-stat { gap:10px; }
.live-label { font-size:13px; }
.live-stat small { margin-top:3px; font-size:10.5px; }
.live-legend { font-size:11px; }
.live-stats[data-live="false"] .live-dot { animation:none; background:var(--line2); }
.intro-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px; padding:40px 0; }
.hero-copy { min-width:0; }
.hero-copy .eyebrow { font-size:11px; letter-spacing:.08em; margin-bottom:24px; max-width:32ch; }
.hero-copy .hero-title { font-size:clamp(34px,3.4vw,46px); line-height:1.5; margin:0 0 16px; }
.hero-copy .hero-title>span { color:var(--action); }
.hero-english { font-size:35px; line-height:1.05; margin-bottom:24px; color:var(--head-text); }
.hero-description { font-size:15px; margin-bottom:24px; }
.hero-description>span { display:block; font-size:13px; line-height:1.8; margin-top:8px; max-width:42ch; }
.ride-ritual { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:24px 0 0; border-top:1px dashed var(--line2); gap:12px; }
.ride-ritual li { display:flex; align-items:flex-start; gap:8px; }
.ride-ritual li>span { font:500 18px/1.6 var(--display); color:var(--head-text); }
.ride-ritual strong { font:500 15px/1.8 var(--reading); }
.ride-ritual small { display:block; color:var(--soft); font:11px/1.6 var(--body); }
.margin-note { font-size:17px; margin-top:16px; }
.journey-panel { width:100%; max-width:none; margin:0; padding:24px; border:1px solid var(--line2); border-top:3px solid var(--action); border-radius:6px; background:var(--surface); }
.panel-topline .eyebrow { font-size:11px; letter-spacing:.1em; }
.ticket-corner { color:var(--action); }
.journey-panel h2 { font-size:27px; margin:8px 0 0; }
.subheading { font-size:26px; margin:8px 0 24px; }
.route-inputs { padding-left:20px; grid-template-columns:minmax(0,1fr) 40px; gap:16px 8px; }
.station-field select { padding:12px 30px 10px 12px; min-height:54px; border:1px solid var(--line2); background:var(--surface); font-size:16px; text-overflow:ellipsis; }
.station-field select:hover { border-color:var(--head); }
.station-field select[aria-invalid=true] { border-color:var(--danger); }
.swap-button { width:40px; height:44px; border-radius:50%; color:var(--head-text); }
.swap-button:hover { background:var(--bg); border-color:var(--head); transform:rotate(180deg); }
.route-rail { left:2px; }
.ride-preview { min-height:90px; margin:24px 0; padding-top:16px; }
.stop-number { font-size:42px; }
.preview-description { font-size:13px; }
.preview-description>small { font-size:11.5px; line-height:1.7; }
.primary-button,.task-button { border-color:var(--action); background:var(--action); }
.primary-button:hover,.task-button:hover { background:color-mix(in srgb,var(--action) 88%,black); }
.primary-button:active,.secondary-button:active { transform:translateY(1px); }
#start-button { min-height:66px; padding:12px 18px; }
#start-button>span:last-child { font-size:24px; transition:transform .16s; }
#start-button:hover>span:last-child { transform:translateX(4px); }
.panel-footnote { font-size:11px; line-height:1.8; margin-top:16px; padding-top:16px; }
#resume-ride { width:100%; margin-top:12px; text-align:center; }
.intro-grid.is-active { display:block; padding:24px 0 0; }
.active-ride { padding:24px 0 40px; }
.metro-timeline { margin:0 auto 24px; padding:20px 22px 16px; border:1px solid var(--line2); border-radius:6px; background:var(--surface2); }
.metro-timeline-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.metro-timeline-heading .eyebrow { margin:0 0 3px; font-size:10px; }
.metro-timeline-heading h2 { margin:0; font-size:23px; line-height:1.3; }
.metro-timeline-heading h2 small { display:block; color:var(--head-text); font:500 19px/1.3 var(--display); }
.metro-timeline-heading>span { color:var(--head-text); font:500 26px/1 var(--display); white-space:nowrap; }
.metro-timeline-heading>span small { color:var(--soft); font:11px/1.4 var(--body); }
.metro-line { display:flex; list-style:none; margin:0; padding:8px 0 3px; overflow-x:auto; scrollbar-width:thin; }
.metro-line li { position:relative; flex:0 0 92px; min-height:67px; padding-right:10px; }
.metro-line li:last-child { flex-basis:92px; }
.metro-node { position:relative; z-index:1; display:block; width:13px; height:13px; margin-bottom:9px; border:2px solid var(--head); border-radius:50%; background:var(--surface2); }
.metro-line li.endpoint .metro-node { width:17px; height:17px; margin-top:-2px; border-color:var(--action); background:var(--action); box-shadow:0 0 0 4px color-mix(in srgb,var(--action) 18%,transparent); }
.metro-connector { position:absolute; top:6px; left:13px; width:calc(100% - 13px); border-top:2px solid var(--head); opacity:.55; }
.metro-line li.endpoint .metro-connector { top:6px; }
.metro-station { display:block; max-width:84px; }
.metro-station strong { display:block; font:500 12px/1.45 var(--reading); }
.metro-station small { display:block; color:var(--soft); font:10px/1.35 var(--body); white-space:normal; }
.metro-timeline-note { margin:11px 0 0; color:var(--soft); font-size:11px; line-height:1.6; }
.ride-heading { align-items:center; gap:16px; margin:0 auto 24px; }
.ride-heading .eyebrow { font-size:11px; line-height:1.8; }
.ride-heading h1 { font-size:30px; }
.route-summary { display:flex; padding:16px 0; gap:16px; margin-bottom:24px; }
.route-summary>div { min-width:0; }
.route-summary strong { font:500 18px/1.8 var(--reading); }
.route-summary small { margin-top:4px; font-size:12px; }
.route-summary>button { flex-shrink:0; gap:8px; font-size:13px; }
.activity-steps { margin-bottom:24px; padding:8px 0; gap:12px; }
.activity-steps:before { display:none; }
.activity-steps .step-button { border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:var(--surface); }
.activity-steps .step-button strong { background:none; padding:0; }
.activity-steps .step-button[aria-pressed=true] { border-color:var(--learning); background:var(--learning-tint); }
.activity-steps .step-button>span { width:34px; height:34px; font-size:17px; }
.activity-steps .step-button:hover>span { transform:none; }
.active-ride>.task-card { background:var(--surface); padding:24px; border:1px solid var(--line2); border-radius:6px; }
.active-ride>.task-card h2 { font-size:28px; margin-top:24px; }
.active-ride>.task-card .task-label { gap:10px; }
.active-ride>.task-card .task-label>small { font-size:11px; }
.task-label strong { flex-wrap:wrap; }
.story-selector { max-width:290px; }
.story-selector select { min-height:44px; font-size:12px; }
.task-body { line-height:2; }
.active-ride>.task-card .task-body { margin-top:16px; }
.title-choice { min-height:150px; background:var(--surface); }
.title-choice:hover { background:var(--skill-tint); border-color:var(--skill-deep); }
.quick-answer:hover { border-color:var(--ok-deep); }
.task-form .field-error:not(:empty) { border-left:3px solid var(--danger); padding:10px 12px; background:var(--danger-tint); }
.active-ride>.conversation-prompt { padding:24px 4px 0; }
.yatra-section { display:block; border:1px solid var(--line2); border-radius:6px; background:var(--surface); margin:0; padding:0; }
.yatra-section:before { display:none; }
.yatra-disclosure>summary { padding:24px; gap:24px; }
.yatra-disclosure>summary>h2 { font-size:24px; }
.yatra-disclosure>summary>h2>small { font-size:24px; }
.yatra-disclosure>summary>span { font-size:30px; }
.yatra-disclosure>summary>span>small { font-size:11px; }
.yatra-full { padding:0 24px 24px; gap:24px; }
.yatra-badge { opacity:1; background:var(--surface2); padding:12px; }
.yatra-badge[data-earned=false]>span { color:var(--soft); }
.yatra-lamp { border-radius:4px; }
.yatra-lamp:hover { background:var(--culture-tint); }
.ledger-section { padding:40px 0; }
.ledger-stats { background:var(--surface); border:1px solid var(--line); border-radius:6px; }
.stat { padding:24px; gap:16px; }
.stat-number { font-variant-numeric:tabular-nums; }
.stat-description { font-size:13px; }
.stat-description small { font-size:11px; }
.empty-ledger { background:var(--surface); padding:24px; }
.ledger-ride>div { min-width:0; flex:1; }
.ledger-ride strong { overflow-wrap:anywhere; }
.notebook-stamp { flex-shrink:0; }
.section-header>.secondary-button { flex-shrink:0; flex-wrap:wrap; gap:4px 8px; max-width:260px; font-size:12px; }
.library-story { border-color:var(--line); }
.library-story>summary:hover { background:var(--surface2); }
.library-story[open] { border-color:var(--head); }
.library-story summary>small { font-size:11px; line-height:1.8; }
.library-story summary>strong { font-size:23px; }
.library-story-body { font-size:16px; }
.about-section { padding:40px 0; }
.site-footer { margin-top:0; font-size:11px; }
dialog { overscroll-behavior:contain; }
body:has(dialog[open]) { overflow:hidden; }
.dialog-top h2 { min-width:0; }
.dialog-feedback:empty { display:none; }
.dialog-feedback { font:13px/1.7 var(--reading); color:var(--ok-deep); padding:12px; border:1px solid var(--ok); border-radius:4px; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
.dialog-actions button { min-width:0; white-space:normal; padding:12px; }
.together-dialog input { min-height:48px; font-size:16px; }
.toast { width:max-content; max-width:min(560px,calc(100% - 32px)); bottom:max(24px,env(safe-area-inset-bottom)); font-size:13px; }
@media(min-width:761px) and (max-width:1050px) {
  .site-header { flex-wrap:wrap; }
  .site-header nav { order:initial; width:auto; border:0; padding:0; margin-left:auto; }
  .connection { margin-left:auto; }
  .intro-grid { gap:24px; }
  .journey-panel { padding:24px; }
}
@media(max-width:760px) {
  .safar-page { margin:0 auto; padding:16px 20px 24px; border-inline:0; }
  .site-header.lofl-frame { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:4px 0 0; }
  .brand-mark { width:42px; height:42px; }
  .brand { gap:10px; }
  .brand strong { font-size:23px; }
  .brand small { font-size:9px; max-width:175px; line-height:1.6; }
  .connection { font-size:10px; white-space:normal; max-width:76px; justify-self:end; }
  .connection i { width:6px; height:6px; }
  .site-header nav { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:8px; padding:4px 0 0; border-top:1px dashed var(--line); }
  .site-header nav a { justify-content:center; font-size:14px; min-height:48px; }
  .live-stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:16px 0; }
  .live-stat { flex-wrap:wrap; gap:4px; align-items:baseline; }
  .live-label { flex-basis:100%; font-size:11px; }
  .live-number { font-size:27px; }
  .live-stat small { font-size:9px; }
  .live-mine { font-size:10px; padding:2px 4px; }
  .live-legend { font-size:10px; line-height:1.7; }
  .intro-grid { grid-template-columns:1fr; padding:24px 0 32px; gap:24px; }
  .hero-copy .eyebrow { max-width:none; font-size:10px; margin-bottom:12px; }
  .hero-copy .hero-title { font-size:34px; line-height:1.5; margin-bottom:16px; }
  .hero-copy .hero-title br { display:none; }
  .hero-english { font-size:30px; margin-bottom:16px; }
  .hero-english br { display:none; }
  .hero-description { font-size:14px; margin-bottom:16px; }
  .hero-description>span { max-width:48ch; font-size:12px; }
  .ride-ritual { padding-top:16px; }
  .ride-ritual li { gap:6px; }
  .ride-ritual strong { font-size:14px; }
  .ride-ritual small { font-size:10px; }
  .margin-note { display:none; }
  .journey-panel { padding:16px; }
  .journey-panel h2 { font-size:25px; }
  .subheading { font-size:25px; margin-bottom:24px; }
  .ride-heading { flex-direction:row; align-items:flex-start; gap:12px; }
  .ride-heading h1 { font-size:25px; }
  .ride-heading .text-button { font-size:11px; max-width:105px; white-space:normal; text-align:right; }
  .ride-heading .eyebrow { font-size:10px; }
  .route-summary { gap:12px; }
  .route-summary strong { font-size:16px; }
  .route-summary>button { min-height:44px; padding:8px 12px; flex-wrap:wrap; }
  .activity-steps { gap:8px; margin-bottom:24px; }
  .activity-steps .step-button { gap:8px; padding:8px; flex-wrap:wrap; justify-content:center; text-align:center; }
  .activity-steps .step-button>span { width:28px; height:28px; font-size:15px; }
  .activity-steps strong { font-size:13px; }
  .activity-steps strong small { font-size:12px; }
  .active-ride>.task-card { padding:16px; }
  .metro-timeline { margin-bottom:20px; padding:17px 16px 13px; }
  .metro-timeline-heading h2 { font-size:21px; }
  .metro-line li { flex-basis:84px; }
  .active-ride>.task-card h2 { font-size:25px; line-height:1.7; }
  .active-ride>.task-card .task-body { font-size:16px; }
  .story-selector { order:3; width:100%; max-width:none; }
  .story-selector select { font-size:13px; }
  .active-ride>.task-card .title-choices,.active-ride>.task-card .quick-answers { grid-template-columns:1fr; gap:10px; }
  .active-ride>.task-card .title-choice { min-height:100px; padding:16px; }
  .active-ride>.task-card .quick-answer { min-height:68px; }
  .title-choice span { font-size:16px; }
  .title-choice small { font-size:13px; }
  .active-ride>.conversation-prompt { padding-top:20px; }
  .yatra-disclosure>summary { padding:16px; flex-wrap:wrap; gap:16px; }
  .yatra-disclosure>summary>h2 { font-size:22px; }
  .yatra-disclosure>summary>h2>small { font-size:22px; }
  .yatra-disclosure>summary>span { font-size:26px; flex:initial; margin-left:auto; }
  .yatra-disclosure>summary>span>small { max-width:105px; font-size:10px; }
  .yatra-full { padding:0 16px 16px; gap:16px; }
  .yatra-badges { gap:8px; }
  .ledger-section { padding:32px 0; }
  .stat { padding:16px; }
  .ledger-stats { grid-template-columns:1fr; }
  .stat-description small { font-size:12px; }
  .section-header { gap:16px; }
  .section-header>.secondary-button { max-width:none; min-height:48px; }
  .ledger-ride { gap:12px; }
  .ledger-ride>div { flex-basis:100%; min-width:0; }
  .ledger-ride>.text-button { margin-left:auto; }
  .about-section { padding:32px 0; }
  .site-footer { gap:12px; }
}
@media(max-width:360px) {
  .safar-page { padding-inline:16px; }
  .brand small { max-width:145px; }
  .hero-copy .hero-title { font-size:30px; }
  .journey-panel,.active-ride>.task-card { padding:16px; }
  .route-inputs { padding-left:16px; grid-template-columns:minmax(0,1fr) 36px; gap:16px 8px; }
  .swap-button { width:36px; }
  .station-field select { padding-left:8px; }
  .dialog-actions { grid-template-columns:1fr; }
  .yatra-disclosure>summary { padding:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .safar-page :is(button,a,select,summary) { transition:none; }
  .swap-button:hover,#start-button:hover>span:last-child { transform:none; }
}
@media print {
  .safar-page { max-width:none; margin:0; padding:0; }
  .hero-copy,.journey-panel,.live-stats,.activity-steps,.conversation-prompt { display:none; }
  .active-ride>.task-card { border:0; padding:0; }
}