/* phone.css — Phone widths: the bar comes back to the bottom, and iPhone-only fixes. */
@media(max-width:620px){
 :root{--rail-w:58px}
 .shell{padding:0 12px 28px}
 .lo{padding:5px 8px}
 nav a .ic{font-size:17px}
 /* On a phone the seven-column month is the problem, not the type size.
    375px across seven columns leaves ~30px of text per day; at any size a
    person can actually read, "TLV→NRT" truncates to "TL…". Shrinking the font
    until it fits is what produced the 9px chips this replaced — legible only
    to someone who did not need the help.

    So below 620px the grid stops being a grid. One row per day, the date and
    weekday in a fixed left column, the chips given the whole rest of the
    width. Nothing truncates, nothing shrinks, and the days run in the order
    they happen — which is how a roster is read anyway. The column headers go
    (there are no columns) and the leading/trailing padding cells go with them. */
 /* Two shapes for the same month, chosen by the pilot and remembered.
    Same markup, same chips — only the class on .cal differs. */
 .shape{display:flex;gap:6px;margin:0 0 10px;padding:3px;border:1px solid var(--line);
   border-radius:12px;background:var(--surface)}
 .shape button{flex:1;background:none;border:0;border-radius:8px;padding:8px 0;
   color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.3px;cursor:pointer}
 .shape button.on{background:var(--raise);color:var(--txt)}

 /* ── DAYS: one row per day ────────────────────────────────────────────────
    375px across seven columns leaves ~31px of text per day, so at any size a
    person can read, "TLV→NRT" truncates. This shape gives each day the whole
    width instead: nothing shrinks, nothing truncates, and the days run in the
    order they happen. */
 .cal.v-days .dow{display:none}
 .cal.v-days .grid{grid-template-columns:1fr}
 .cal.v-days .cel.pad{display:none}
 .cal.v-days .cel{display:flex;align-items:flex-start;gap:11px;min-height:0;padding:9px 12px;border-right:0}
 .cal.v-days .cel .d{flex:0 0 52px;display:flex;align-items:baseline;gap:6px;margin:0;font-size:16px;line-height:1.5}
 .cal.v-days .cel .d .dw{display:inline;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--faint)}
 .cal.v-days .cel .chips{flex:1 1 auto;min-width:0}
 .cal.v-days .chip{font-size:13px;padding:4px 8px;white-space:normal}
 .cal.v-days .cel .chips:empty{display:none}

 /* ── MONTH: the grid, at a size that is actually legible ──────────────────
    31px of text is exactly one IATA station code, so that is what a chip says
    here — and the destination happens to be the right thing to say, because
    the question a month grid answers is "where am I on the 15th", not "what
    was the routing". The colour carries the kind of day; the code carries the
    place. The full text is one tap away and is what the Days shape shows.

    The date is deliberately quiet: in a grid you find a day by its position,
    not by reading numbers, so the number is a coordinate and the station is
    the content. */
 .cal.v-month .dow div{padding:6px 2px;font-size:10px;letter-spacing:.3px}
 .cal.v-month .cel{min-height:66px;padding:3px 3px 4px}
 .cal.v-month .cel .d{font-size:10px;font-weight:600;color:var(--faint);margin-bottom:2px;text-align:center}
 .cal.v-month .cel .d .dw{display:none}
 .cal.v-month .chip{font-size:13px;padding:3px 1px;text-align:center;border-radius:4px;
   margin-bottom:2px;letter-spacing:.2px;font-weight:700}
 .cal.v-month .chip .full{display:none}
 .cal.v-month .chip .mini{display:inline}
 /* A blank day is a thin dashed rule, not a word and not a full-height box. */
 .cal.v-month .chip.blank{min-height:0;height:5px;padding:0;margin-top:3px}
 /* The pay tag shrinks with everything else here — there is no room for
    "💰₪183" at 10px in a 66px cell, so the corner badge goes down to an icon
    and the exact figure stays one tap away, same as the route does. */
 .cal.v-month .paytags{top:2px;right:2px;gap:1px}
 .cal.v-month .paytag{font-size:7.5px;padding:0 2px;border-radius:5px;max-width:34px;overflow:hidden}
 /* A flight row is four fields on one line at desktop width. On a phone that
    forced the metadata to wrap onto four lines and made every row a block.
    Below 620px it becomes a small grid instead: identity and status on the
    first line, metadata on the second. */
 .fr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"num route status" "meta meta meta";gap:3px 10px;align-items:center;padding:10px 13px}
 .fr .num{grid-area:num;width:auto}
 .fr .r{grid-area:route;width:auto;min-width:0}
 .fr .st{grid-area:status;margin-left:0;font-size:11px}
 .fr .ac{grid-area:meta;min-width:0;font-size:11px;line-height:1.4}
 .fr .cn{grid-area:meta;justify-self:end;font-size:10px}
 .sum .s{min-width:33.33%;flex:1 0 33.33%;padding:9px 10px}
 .sum .v{font-size:19px}
 .sum .k{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 /* Three columns of route/dates/hours will not sit on one phone line without
    the route being clipped to nothing, so the trip picker stacks: route and
    hours share the first line, the dates take the second. */
 .swpick{grid-template-columns:1fr auto;grid-template-areas:"rt hr" "wh hr";gap:2px 10px}
 .swpick .rt{grid-area:rt}
 .swpick .wh{grid-area:wh}
 .swpick .hr{grid-area:hr;align-self:center}
 .swmoney{gap:6px}
 .swmoney .mm{padding:7px 8px}
 .swmoney .v{font-size:13px}
 .swmoney .k{font-size:10px;letter-spacing:.4px}
 .swacts{gap:9px 14px}
 /* The route and its dates will not share a phone line, so give the dates their
    own rather than letting the range wrap and strand a word. */
 .swtrade span{display:block;margin-left:0;margin-top:2px}
 /* ₪546,654 will not fit a third of a phone, so the headline takes its own row
    and the two smaller figures share the next. */
 .ehero{flex-wrap:wrap;gap:8px}
 .ehero .eh:first-child{flex:1 0 100%}
 .ehero .v{font-size:18px}
 .ehero .k{font-size:10px;letter-spacing:.4px}
 .er{font-size:12px;gap:8px}
 .er span:not(:first-child){width:66px;flex:0 0 66px}
 .er.eh2 span{font-size:10px}
}
/* ── the bar comes back to the bottom ─────────────────────────────────────
   It was a bottom bar once and became a left rail because eleven items forced
   a horizontal scroll on a phone-width strip. That reason is gone: the regroup
   took it to six sections and folding Flights into Roster takes it to five,
   which fits across 390px with room to spare. A thumb reaches the bottom of a
   phone and does not reach the top-left of one.

   The rail stays on a desktop, where the vertical edge is free and the bottom
   of a 1400px window is nowhere near the pointer. */
@media(max-width:620px){
  :root{--rail-w:0px;--bar-h:58px}
  .navwrap{top:auto;left:0;right:0;bottom:0;width:auto;height:auto;
    border-right:0;border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    transform:none!important;pointer-events:auto!important}
  nav{flex-direction:row;height:var(--bar-h);padding:0;gap:0;overflow:visible}
  nav a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;border-radius:0;padding:0;font-size:10px;gap:0}
  nav a .ic{margin-bottom:3px}
  nav a .ic svg{width:22px;height:22px}
  /* A solid accent slab across a fifth of the bar is too loud at this size.
     The active item is marked by ink and a short rule instead. */
  nav a.on{background:none;color:var(--acc-txt);font-weight:700}
  /* The rail's light-theme rule paints .on white, which is right on top of the
     solid accent slab it has there. The bar has no slab — so that rule erased
     the item the pilot had just tapped: white ink on white, with only the rule
     above it left to show. It must be re-stated for the bar, and with more
     specificity than :root[data-theme="light"] nav a.on. */
  :root[data-theme="light"] nav a.on{color:var(--acc-txt)}
  nav a.on::before{content:"";position:absolute;top:0;width:26px;height:2.5px;
    border-radius:0 0 3px 3px;background:var(--acc)}
  nav a{position:relative}
  nav a:hover{background:none}
  nav a:active{transform:scale(.9)}
  /* the collapse handle has nothing left to collapse */
  .navtoggle{display:none}
  /* content clears the bar, and so does anything pinned to the bottom */
  .shell{padding-bottom:calc(var(--bar-h) + 26px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(var(--bar-h) + 18px + env(safe-area-inset-bottom));left:50%}
}
/* iPhone. Two things Safari does that no other browser does:
   1. Anything wider than the screen for even a moment — a row mid-way through
      its slide-in — widens the page. body{overflow-x:hidden} does not stop
      iOS: the page can then be dragged sideways and settles zoomed out. `clip`
      cuts it off without making a scroll container, so the sticky header
      keeps working.
   2. A field set under 16px is zoomed into when tapped, and the page is left
      zoomed after the keyboard goes. */
#appView{overflow-x:clip}
/* And the document itself: the modal, the toast and anything a library adds to
   <body> live outside #appView, and on the iOS 27 simulator the page came out
   about 40pt wider than the screen on every tab. */
html,body{overflow-x:clip}
@media (max-width:620px){input,select,textarea{font-size:16px}}