/* craft.css — The craft floor: names that must not clip, hit areas, focus, press. */
/* ── craft floor ───────────────────────────────────────────────────────────
   Everything below is about how the app feels in the hand rather than what it
   shows. It is deliberately at the end: none of it changes a layout decision
   made above, and all of it was missing. */

/* The airline's own face, on the three places the product says its own name.
   It stays out of the 10–13px interface, where the platform sans is simply
   more legible at arm's length. */
.mk,.who b,.login h1,.mnav .lbl{font-family:var(--display);letter-spacing:-.01em}
.who b{font-weight:700}
.login h1{font-weight:700;letter-spacing:-.02em}
/* A pilot's own name must not be the thing that gets clipped. The freshness
   badge is the least important text in the header, so it yields first. */
.badge{min-width:0}
#syncTxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* On a phone there is not enough width for a name, a sentence of freshness and
   two icon buttons. The freshness badge is the one that can lose its words: it
   keeps the pulse dot, which was always what carried the meaning, and the
   sentence moves to the title attribute for anyone who long-presses it. */
@media(max-width:620px){
  /* The status-bar inset stays in the phone padding. This rule once replaced
     it with a flat 14px, and on every iPhone with a notch or Dynamic Island the
     name ran into the clock and the buttons sat on the battery. */
  .top{gap:8px;padding:calc(14px + env(safe-area-inset-top)) 0 12px}
  .badge{padding:0;width:34px;height:34px;justify-content:center;border-radius:999px}
  .badge #syncTxt{display:none}
  .badge .p{width:9px;height:9px}
  .who b{font-size:16px}
  .who span{font-size:11.5px}
  .lo{padding:0;width:34px;height:34px;display:grid;place-items:center}

  /* Filters were costing three wrapped rows — roughly 40% of the first screen
     before a single flight appeared. Only the rows that are purely pills become
     a swipeable strip; a row containing the search field keeps wrapping, because
     a strip would push the pills beside it off-screen, and a control you can
     only reach by guessing it is there is the same as a hidden one. */
  .filters:not(:has(input[type=text])){
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    /* Bleeds to the screen edge by exactly the phone gutter (.shell, 12px).
       It was 18px — the desktop gutter — and stuck 6px past the screen on
       each side, which is all an iPhone needs to let the page slide sideways. */
    margin:0 -12px 10px;padding:0 12px 2px;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .filters:not(:has(input[type=text]))::-webkit-scrollbar{display:none}
  .filters:not(:has(input[type=text])) > *{flex:0 0 auto}
  .filters input[type=text]{flex:1 0 100%}
  .pill{padding:8px 12px}

  /* The collapse handle straddled the rail edge, which put it on top of the
     first column of content. On a phone it tucks fully inside the rail. */
  .navtoggle{left:0;width:var(--rail-w);border-radius:0 0 0 0;border-left:0;
    border-right:0;height:40px;background:transparent;border-top:1px solid var(--line);
    box-shadow:none}
  :root[data-nav-collapsed] .navtoggle{left:0;width:34px;height:52px;
    border:1px solid var(--acc);border-left:0;border-radius:0 12px 12px 0;
    background:var(--raise)}
}
/* Hit areas reach 44px without the control growing to match. A settings gear
   that measures 25px is a 25px target on a phone; this makes it a 44px target
   that still looks like a 25px gear. */
.lo,.badge,.tabs button,.pill,.seg button,.mnav > button{position:relative}
.lo::after,.badge::after,.tabs button::after,.pill::after,.seg button::after,
.mnav > button::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;min-height:100%}
.lo{padding:7px 10px}
/* Keyboard focus existed nowhere. Two rings, so it is visible on the page
   ground and on an accent fill alike, and :focus-visible so a mouse press
   never shows it. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--acc-txt);outline-offset:2px;border-radius:8px}
/* Controls whose own corners outrank the ring's 8px when focused — they did
   when their rules came after it, and still do now that they come before. */
.bidsnote:focus-visible,.tboard:focus-visible{border-radius:14px}
.peye:focus-visible{border-radius:999px}
nav a:focus-visible{outline-offset:-3px}
.chip:focus-visible,.fr:focus-visible,.trip .h:focus-visible{outline-offset:-2px}
/* Browser surfaces. These ship with defaults that belong to no design system,
   and they are the cheapest signal that a page was built rather than assembled. */
::selection{background:color-mix(in srgb,var(--acc) 38%,transparent);color:var(--txt)}
:root{accent-color:var(--acc);color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
input,textarea{caret-color:var(--acc-txt)}
*{-webkit-tap-highlight-color:transparent}
html{scrollbar-color:var(--line) transparent;scrollbar-width:thin;
  overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;
  border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box;
  border:3px solid var(--bg)}
/* Press. Every control the thumb lands on answers within one frame — the thing
   that makes an interface feel alive rather than remote. Scale is kept shallow
   so a list of rows does not look like it is breathing. */
.fr,.person,.trip .h,.pill,.seg button,.tabs button,.lo,.badge,.mnav > button,
.dest,.nowcard,.bid,.chg{transition:transform .12s var(--cc-e,ease),
  background .15s ease,border-color .15s ease,color .15s ease}
.fr:active,.person:active,.trip .h:active,.dest:active,.bid:active,.chg:active{transform:scale(.988)}
.pill:active,.seg button:active,.lo:active,.badge:active,.mnav > button:active{transform:scale(.94)}
nav a:active{transform:scale(.92)}
/* A row that can be opened should say so before it is touched. */
@media(hover:hover){
  .fr:hover,.person:hover,.bid:hover,.chg:hover{border-color:var(--faint)}
  .dest:hover .ph{transform:scale(1.06)}
}
.dest .ph{transition:transform .5s var(--cc-e,ease)}