/* FAREMAP — app.css. Tokens + page frame + shared chrome + border classes (DESIGN.md §3/§4). */

:where(button,input,select,textarea){border:0;outline:0;background:none;font:inherit;color:inherit;appearance:none}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

:root{
  /* colour tokens — DESIGN.md §3 */
  --paper:#5097FD;
  --paper-2:#5B8DEF;
  --navy:#002F68;
  --navy-deep:#00275A;
  --white:#FFFFFF;
  --pale:#EAF4FF;
  --divider:#4BA8FF;
  --accent-1:#EDF400;
  --accent-2:#A8003C;
  --accent-2-strong:#F41562;
  --success:#00C968;
  --muted:#9BC7F3;
  --ink:#08204e;
  --text:var(--white);

  /* fonts — DESIGN.md §2 */
  --f-display:'Syncopate',Arial,sans-serif;
  --f-body:'Questrial',Arial,sans-serif;
  --f-mono:'Sixtyfour',monospace;

  /* page frame — DESIGN.md §0 / frame.json, USER_FIXES ONE PAGE FRAME */
  --gutter-l:2.0625rem;
  --gutter-r:1.625rem;
  --container-w:116.1875rem;

  /* rule tokens — DESIGN.md §4b BORDER TABLE */
  --rule-nav-w:3px;
  --rule-nav-c:#A0C6FF;
  --rule-result-row-w:2px;
  --rule-result-row-c:var(--divider);
  --rule-ticket-alert-w:2px;
  --rule-ticket-alert-c:var(--accent-2);
  --rule-ticker-footer-w:2px;
  --rule-ticker-footer-c:#AECFFB;
  --rule-matrix-cell-w:2px;
  --rule-matrix-cell-c:var(--divider);
  --rule-matrix-cell-selected-c:var(--accent-1);
  --rule-chip-w:1px;
  --rule-chip-c:var(--divider);
  --rule-audit-panel-w:3px;
  --rule-audit-panel-c:#2CA3EF;
  --rule-legend-panel-w:4px;
  --rule-legend-panel-c:#3186CF;
  --rule-map-callout-w:2px;
  --rule-map-callout-c:var(--accent-1);
  --rule-dest-card-w:1px;
  --rule-dest-card-c:var(--divider);
  --rule-watch-panel-w:2px;
  --rule-watch-panel-c:#AAD2FC;
  --rule-row-w:1px;
  --rule-row-c:var(--navy-deep);
}

/* page scale rule (LUAT 50/0.2): 1920 = mockup 1:1, proportional 1280–2560, fixed below 1024 */
html{font-size:16px}
@media (min-width:1024px){
  html{font-size:clamp(10.67px, calc(100vw / 120), 26.67px)}
}

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--f-body);
  min-height:100vh;
  overflow-x:hidden;
}

a{color:inherit}

/* the ONE page frame every route uses — route bodies never set their own max-width/padding/background */
.page-frame{
  width:100%;
  max-width:calc(var(--container-w) + var(--gutter-l) + var(--gutter-r));
  margin:0 auto;
  padding-left:var(--gutter-l);
  padding-right:var(--gutter-r);
  box-sizing:border-box;
}

/* ---- nav (N5) — copied from mockup/v1/chrome/nav.html, single source for every route ---- */
.site-nav{
  position:sticky;top:0;z-index:20;
  width:100%;
  background:var(--paper-2);
  font-family:var(--f-body);
}
.nav-inner{
  display:flex;align-items:center;gap:1rem;
  padding-top:0.75rem;padding-bottom:0.75rem;
}
.brand-mark{display:flex;align-items:center;gap:0.5rem;text-decoration:none;flex:0 0 auto}
.brand-mark img{height:2.75rem;width:auto;object-fit:contain;display:block}
.footer-mark{height:2.5rem;width:auto;object-fit:contain;display:block;flex:0 0 auto}
.brand-word{font:700 1.25rem var(--f-display);letter-spacing:0.02em;color:var(--white)}

.farebar{
  flex:1 1 auto;min-width:0;
  height:3.375rem;
  display:flex;align-items:center;gap:0.75rem;
  padding:0 0.875rem;
  background:var(--navy);
  border-radius:0.75rem;
  white-space:nowrap;overflow:hidden;
}
.farebar .field{
  border:max(1px, var(--rule-chip-w)) solid #8fb9ec;
  border-radius:5px;
  padding:0.5625rem 0.8125rem;
  font-size:0.875rem;
  color:var(--white);
}
.farebar .search-btn{
  background:var(--accent-1);
  color:var(--ink);
  border-radius:5px;
  padding:0.6875rem 1rem;
  font-weight:700;
  font-size:0.875rem;
  cursor:pointer;
}

.routes{display:flex;gap:0.75rem;margin-left:auto;flex:0 0 auto}
.routes a{
  color:var(--muted);text-decoration:none;font-size:0.75rem;
  padding:0.5625rem;border-radius:5px;
}
.routes a.is-active{background:#75aef6;color:var(--white)}

.socials{display:flex;gap:0.6875rem;border-left:max(1px,1px) solid #8fb9ec;padding-left:0.75rem;flex:0 0 auto}
.socials a{color:var(--white);text-decoration:none;font-size:0.75rem}
[data-launch].is-disabled{cursor:default;opacity:0.55;pointer-events:none}
.search-btn.is-searching{opacity:0.7}
/* USER FIX R1 #1: the fare search is a real form — typed query, ticket size and origin drive the results */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.farebar .field{display:flex;align-items:center;position:relative;flex:0 0 auto;cursor:text}
.farebar .field.sel{padding-right:1.75rem;cursor:pointer}
.farebar .field.sel::after{content:"";position:absolute;right:0.75rem;top:50%;width:0.375rem;height:0.375rem;margin-top:-0.25rem;border-right:max(1px, 0.125rem) solid #8fb9ec;border-bottom:max(1px, 0.125rem) solid #8fb9ec;transform:rotate(45deg);pointer-events:none}
.farebar select{cursor:pointer;font-size:inherit;line-height:1.2}
.farebar select option{color:var(--ink);background:var(--white)}
.farebar .field.q{flex:1 1 13rem;min-width:9rem;max-width:22rem;padding-right:2rem}
.farebar .field.q:focus-within,.farebar .field.sel:focus-within{border-color:var(--accent-1)}
.farebar input{width:100%;min-width:0;font-size:inherit;line-height:1.2;color:var(--white)}
.farebar input::placeholder{color:var(--muted);opacity:1}
.farebar input::-webkit-search-cancel-button{display:none}
.farebar .q-clear{position:absolute;right:0.375rem;top:50%;transform:translateY(-50%);width:1.375rem;height:1.375rem;border-radius:50%;background:#1d4f92;color:var(--white);font-size:0.9375rem;line-height:1;cursor:pointer}
.farebar .q-clear:hover{background:var(--accent-1);color:var(--ink)}
.farebar .search-btn{flex:0 0 auto}

.nav-drawer-toggle{display:none;color:var(--white);font-size:0.875rem;cursor:pointer}
.nav-drawer{display:none}

/* ---- footer (F6) — copied from mockup/v1/chrome/footer.html ---- */
.site-footer{width:100%;background:var(--paper-2);padding-top:0.5rem;padding-bottom:0.5rem}
.footer-inner{display:flex;align-items:center;gap:0.875rem}
.footer-inner .lcd{flex:1 1 auto}
.footer-inner .links{flex:0 0 auto}
.lcd{
  height:2rem;
  border-radius:0.5rem;
  background:var(--navy);
  display:flex;align-items:center;
  padding:0 0.875rem;
  font:0.75rem var(--f-mono);
  white-space:nowrap;overflow:hidden;
  color:var(--white);
}
.rule-ticker-footer{
  box-shadow:
    inset 0 0 0 max(1px, var(--rule-ticker-footer-w)) var(--rule-ticker-footer-c),
    inset 0 0 0 calc(max(1px, var(--rule-ticker-footer-w)) * 2 + 1px) transparent;
}
.footer-inner .links{font-size:0.6875rem;text-align:right;padding-top:0.3125rem}
.footer-inner .links a{color:var(--white);text-decoration:none;margin-left:0.875rem}

main{display:block;min-height:40vh}
main.is-leaving{opacity:0}

/* ---- shared border classes (DESIGN.md §4b) — ZERO ad-hoc border/outline outside this file ---- */
.rule-nav{border:max(1px, var(--rule-nav-w)) solid var(--rule-nav-c);border-radius:8px}
.rule-result-row{border-top:max(1px, var(--rule-result-row-w)) solid var(--rule-result-row-c);border-bottom:max(1px, var(--rule-result-row-w)) solid var(--rule-result-row-c);border-radius:6px}
.rule-ticket-alert{border:max(1px, var(--rule-ticket-alert-w)) solid var(--rule-ticket-alert-c);border-radius:8px}
.rule-matrix-cell{border:max(1px, var(--rule-matrix-cell-w)) solid var(--rule-matrix-cell-c);border-radius:4px}
.rule-matrix-cell.is-selected{border-color:var(--rule-matrix-cell-selected-c);border-width:max(1px, calc(var(--rule-matrix-cell-w) * 2))}
.rule-chip{border:max(1px, var(--rule-chip-w)) solid var(--rule-chip-c);border-radius:999px}
.rule-chip.is-accent{border-color:var(--accent-1)}
.rule-audit-panel{border-top:max(1px, var(--rule-audit-panel-w)) solid var(--rule-audit-panel-c)}
.rule-audit-panel + .rule-audit-panel{border-top:0}
.rule-legend-panel{border:max(1px, var(--rule-legend-panel-w)) solid var(--rule-legend-panel-c);border-radius:8px}
.rule-map-callout{border:max(1px, var(--rule-map-callout-w)) solid var(--rule-map-callout-c);border-radius:6px}
.rule-dest-card{border:max(1px, var(--rule-dest-card-w)) solid var(--rule-dest-card-c);border-radius:8px}
.rule-dest-card + .rule-dest-card{border-top:0}
.rule-watch-panel{border:max(1px, var(--rule-watch-panel-w)) solid var(--rule-watch-panel-c);border-radius:6px}
.rule-row{border-bottom:max(1px, var(--rule-row-w)) solid var(--rule-row-c)}
.rule-row:last-child{border-bottom:0}

/* ---- motion helpers (DESIGN.md §8/§10) — transform/opacity only, off under reduced-motion ---- */
[data-rerank]{transition:transform 240ms ease-out}
[data-flash]{transition:background-color 260ms ease-out, color 260ms ease-out}
[data-flash].is-up{background-color:var(--success)}
[data-flash].is-down{background-color:var(--accent-2-strong)}
[data-draw]{transition:stroke-dashoffset 500ms ease-out}
[data-countup]{font-variant-numeric:tabular-nums}
[data-marquee]{position:relative}
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity 400ms ease-out, transform 400ms ease-out}
[data-reveal].is-in{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  [data-rerank],[data-flash],[data-draw],[data-reveal]{transition-duration:1ms !important}
}

/* ---- responsive: 1024 stacking handled per-route; 390 nav drawer ---- */
@media (max-width:1023px){
  .farebar{white-space:normal;flex-wrap:wrap;height:auto}
  .routes{display:none}
  .socials{display:none}
  .nav-drawer-toggle{display:block;margin-left:auto}
  .nav-drawer.is-open{display:flex;flex-direction:column;gap:0.5rem;padding:0.75rem 1.5rem 1rem;background:var(--navy)}
  .nav-drawer a{color:var(--white);text-decoration:none;font-size:0.9375rem;padding:0.375rem 0}
  html{font-size:14px}
  .page-frame{padding-left:20px;padding-right:20px;max-width:100%}
  .footer-inner .links{text-align:left;padding-top:0.5rem}
  .footer-inner .links a{margin-left:0;margin-right:0.875rem}
}

/* ---- pre_send border fixes (30/09) — measured from mockup/v1/full, drawn here only ---- */
.site-nav .nav-inner.rule-nav{border:0;position:relative}
@media (min-width:1024px){
  /* USER FIX R1 #3: the frame sits inside the gutters and every nav item sits inside the frame with padding */
  .site-nav .nav-inner.rule-nav::before{content:"";position:absolute;inset:0.5rem var(--gutter-r) 0.5rem var(--gutter-l);border:max(1px, 0.125rem) solid var(--rule-nav-c);border-radius:0.5rem;pointer-events:none}
  .site-nav .nav-inner.rule-nav{padding:1.125rem calc(var(--gutter-r) + 1rem) 1.125rem calc(var(--gutter-l) + 1rem)}
}
.rule-result-row[data-open="true"]{border:max(1px, 0.125rem) solid #E4F3FE}
.rule-result-row[data-open="true"] .h-row-head{border-bottom:max(1px, 0.125rem) solid #E4F3FE}
.h-rail{border-right:max(1px, 0.125rem) solid #134591}
.h-ticket{--rule-row-c:#8EA5D7}
.h-plate{border-bottom:max(1px, 0.125rem) solid #56A6E9}
.g-cell.rule-matrix-cell:not(.is-selected):not(.is-sel){border-color:transparent}
.g-legs-h{border-bottom:max(1px, 0.125rem) solid #748CB5}
.it-jhead{border-bottom:max(1px, 0.0625rem) solid #85A3C9}
.it-start,.it-leg-main{border-bottom:max(1px, 0.125rem) solid #ABD0FC}
.it-end{border-top:max(1px, 0.125rem) solid #ABD0FC}
.it-crow.hd.rule-row{border-bottom:max(1px, 0.125rem) solid #A9CEFD}
.it-audit .it-arow.rule-row{border-bottom-color:transparent}
.d-rows .d-r + .d-r{border-top:max(1px, 0.0625rem) solid #D2E5FB}
.dst .d-panel:not([class*="rule-"]){box-shadow:0 0 0 max(1px, 0.0625rem) #8CC4FC}
.m-mx > :nth-last-child(-n+8){border-bottom-color:transparent}
.w-log{--rule-row-c:#15477F}
.w-lr.hd{border-bottom:max(1px, 0.0625rem) solid #183D71}
/* ---- polish r1 (30/09) — watch/destination rules re-measured from mockup/v1/full 04/05 ---- */
.w-log,.w-q{--rule-row-c:#1D5290;--rule-row-w:0.125rem}
.w-log .rule-row:last-child,.w-q .rule-row:last-child{border-bottom:max(1px, var(--rule-row-w)) solid var(--rule-row-c)}
.w-lr.hd,.w-qr.hd,.w-q>.hd{border-bottom:max(1px, 0.125rem) solid #1D5290}
.w-lr .tag.rule-ticket-alert{border-width:max(1px, 0.125rem)}
.rule-input{border:max(1px, 0.125rem) solid #BFD3EA}
.rule-input.bad{border-color:#F7A9BA}
.rule-input.warn{border-color:#EFE38A}
.dst .rule-watch-panel{--rule-watch-panel-c:#2A84F2}
/* ---- polish r2 (30/09) — light plate rims measured from mockup/v1/full/01_grid (the mockup draws a 1–2 px rim on navy plates) ---- */
.grid-r .g-chip.rule-chip:not([aria-pressed="true"]),.grid-r .g-origin.rule-chip{--rule-chip-c:#8EC3FF;border-radius:0.25rem}
.grid-r .g-matrix > .hd.first{border-top:max(1px, 0.125rem) solid #001A40}
.grid-r .g-card{border-bottom:max(1px, 0.125rem) solid #8EC3FF}
.grid-r .g-c1-box{border:max(1px, 0.125rem) solid #1F7BDC}
.grid-r .g-c1-tile b{background:#FCFB9E;border:max(1px, 0.1875rem) solid var(--accent-1)}
.grid-r .g-c2-st span{border:max(1px, 0.125rem) solid #44A5FF}
.grid-r .g-c2-st span.y{border-color:var(--accent-1);box-shadow:none}
.grid-r .g-c3-box{border:max(1px, 0.125rem) solid #1F6CC4}
.grid-r .g-c3-res{border:max(1px, 0.0625rem) solid #1F6CC4}
.grid-r .g-au-head{border-bottom:max(1px, 0.125rem) solid #2A84E6}
/* ---- polish r2 (30/09) — itinerary edge rules measured from mockup/v1/full/02_itinerary (dark navy edge under/over plates) ---- */
.it .it-jhead{border-top:max(1px, 0.125rem) solid #00173F;border-bottom:max(1px, 0.125rem) solid #00173F}
.it .it-inv-card{border-top:max(1px, 0.125rem) solid #00173F}
.it .it-go{border-top:max(1px, 0.125rem) solid #00173F}
.it .it-end{border-top:0}
.it .it-tab[aria-pressed="true"]{border-bottom:max(1px, 0.125rem) solid #BFCF70}
.it .it-wc > div{border:max(1px, 0.125rem) solid #00173F}
/* ---- polish r2 (30/09) — home edge rules measured from mockup/v1/full/00_home ---- */
.home .h-rail{border-right-color:#00173F}
.home .h-plate{border-bottom-color:#00173F}
.home .h-list{gap:0.25rem;background:#2F7FEF;padding-top:0}
.home .h-row.rule-result-row:not([data-open="true"]){border-color:#9CCAFC}
.home .h-chain .c.total{border-bottom:max(1px, 0.125rem) solid #D0EC84}
.home .h-cards{gap:0;background:#CDE3FD;border-radius:0.5rem;overflow:hidden}
.home .h-card{background:#CDE3FD;border-radius:0;border-right:max(1px, 0.125rem) solid #FFFFFF}
.home .h-card + .h-card{border-top:max(1px, 0.125rem) solid #AFCDF8}
.home .h-card b{font-weight:400;font-size:1.0625rem;letter-spacing:0.01em}