/* ui.css: the shared button system, focus rings, skip link, layout fallback, the "next steps" block and the
   alerts sign-up block. Linked last in <head> on every page by scripts/apply_ui.py, so it sits after each
   page's own <style> and wins ties. Uses the colour tokens every page copies from index.html.

   Buttons
     .btn                 primary: accent fill (Check my flight, Write my claim letters, Next)
     .btn.secondary       outline in the accent colour (a second choice beside a primary)
     .btn.ghost           secondary look too (older pages use "ghost" for Back and Copy)
     .btn.quiet           text-only, for low-weight actions
     .btn.big / .btn.lg   larger size
   Every button is at least 44px tall, has AA text contrast in both themes (light: white on #0b5cad, 6.7:1;
   dark: #07172a on #6db1f5, 8.6:1) and a 3px focus ring. */

/* Fonts, self-hosted (latin subset, SIL Open Font License). Replaces the Google Fonts request. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-condensed-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--accent-hover:#094a8c;--btn-radius:8px;--snh:101px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-hover:#9ccbfa}}
:root[data-theme="dark"]{--accent-hover:#9ccbfa}

/* Header space, reserved before nav.js draws the header (stops the page jumping down on load). */
@media (max-width:1180px){:root{--snh:119px}}
@media (max-width:860px){:root{--snh:171px}}
@media (max-width:640px){:root{--snh:153px}}
@media (max-width:380px){:root{--snh:171px}}
#site-header{display:block;min-height:var(--snh)}
.sn{min-height:var(--snh)}
@media (max-width:860px){#site-header[data-noquick],.sn:not(:has(.sn-quick)){min-height:calc(var(--snh) - 60px)}}

/* Layout fallback for generated pages whose own CSS has no .wrap rule (airline, airport and ground stop
   pages). Zero specificity, so any page that sets .wrap itself keeps its own values. */
:where(body>.wrap){max-width:1120px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right,0px)) 56px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:44px}
:where(body>.wrap>*){min-width:0}
:where(body>.wrap .sec>p,body>.wrap>header>p,body>.wrap .lede,body>.wrap .lead){max-width:72ch}
@media (max-width:640px){:where(body>.wrap){gap:36px;padding-top:20px}}

/* Skip link and focus */
.skip-link,a.skip{position:absolute;left:12px;top:-80px;z-index:300;background:var(--accent);color:var(--on-accent,#fff)!important;padding:12px 18px;border-radius:var(--btn-radius);font:600 1rem var(--body,sans-serif);text-decoration:none}
.skip-link:focus,a.skip:focus{top:12px;outline:3px solid var(--ink);outline-offset:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

/* Button system */
.btn,a.cta,.pri,.errand-links .btn,.avail-btn{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border:2px solid var(--accent);border-radius:var(--btn-radius);
  background:var(--accent);color:var(--on-accent,#fff);font-family:var(--body,system-ui,sans-serif);font-size:1rem;font-weight:600;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;filter:none;transition:background-color .12s,border-color .12s}
.btn:hover,a.cta:hover,.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent,#fff);filter:none}
.btn:focus-visible,a.cta:focus-visible,.pri:focus-visible,.avail-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn.secondary,.btn.ghost,.avail-btn,.errand-links .btn.ghost{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.btn.secondary:hover,.btn.ghost:hover,.avail-btn:hover,.errand-links .btn.ghost:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding-inline:8px}
.btn.quiet:hover{background:var(--accent-soft);color:var(--accent)}
.btn.big,.btn.lg{font-size:1.06rem;padding:13px 22px;min-height:52px;background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.btn.big:hover,.btn.lg:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost[disabled]:hover,.btn.secondary[disabled]:hover{background:var(--surface);border-color:var(--accent)}

/* Small targets made at least 24 by 24 (WCAG 2.5.8) */
.bi,.sn-bi{display:inline-flex!important;align-items:center;justify-content:center;min-width:24px;min-height:24px;vertical-align:middle}
.ft-sb{min-width:24px;min-height:24px}
.crumbs a,nav.crumbs a{display:inline-block;padding-block:3px}
.cite{display:inline-flex!important;align-items:center;justify-content:center;min-width:24px;min-height:24px;vertical-align:1px;box-sizing:border-box}
td a:not(.cite):not(.btn){display:inline-block;padding-block:3px}

/* Next steps block (end of guide, airline, stats and reactions pages) */
.nx{display:flex;flex-direction:column;gap:14px}
.nx>p{margin:0;color:var(--muted);max-width:68ch}
.nx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:none}
.nx-grid li{margin:0;padding:0;display:flex}
.nx-card{flex:1;display:flex;flex-direction:column;gap:4px;padding:16px 18px;min-height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink)!important;text-decoration:none!important}
.nx-card strong{font-size:1.04rem;color:var(--accent)}
.nx-card span{font-size:.92rem;color:var(--muted);line-height:1.45}
.nx-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.nx-card.is-primary{background:var(--accent);border-color:var(--accent)}
.nx-card.is-primary strong,.nx-card.is-primary span{color:var(--on-accent,#fff)}
.nx-card.is-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* Alerts sign-up block */
.alerts{border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px}
.alerts h2{font-size:1.6rem}
.alerts>p{margin:0;max-width:64ch;color:var(--ink)}
.alerts form{margin:0}
.alerts fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;align-items:end}
.alerts label.f{display:flex;flex-direction:column;gap:5px;font-size:.92rem;font-weight:600;color:var(--ink)}
.alerts select,.alerts input[type=email]{font:inherit;font-size:1rem;font-weight:400;min-height:44px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
.alerts .chk{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.45;cursor:pointer}
.alerts .chk input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--accent)}
.alerts .act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.alerts .note{margin:0;font-size:.86rem;color:var(--muted);max-width:64ch}
.alerts .note a{color:var(--accent)}
.alerts .status{margin:0;font-size:.95rem;font-weight:600}
.alerts .status:empty{display:none}
.alerts .status.ok{color:var(--good)}.alerts .status.err{color:var(--bad)}
.alerts .soon{display:none;margin:0;padding:10px 12px;border-radius:8px;background:var(--warn-soft);color:var(--ink);font-size:.92rem;line-height:1.45}
.alerts.is-soon .soon{display:block}
.alerts.is-soon fieldset{opacity:.6}
.alerts-band{max-width:1120px;margin:40px auto 0;padding:0 max(16px,env(safe-area-inset-left,0px))}
@media (max-width:760px){.alerts fieldset{grid-template-columns:1fr}.alerts{padding:18px 16px}}


/* Card links (home page entry cards, next steps cards): full-card hit area, trailing chevron, lift on hover.
   The first home card and the first next steps card are the primary action. */
.doors a,.nx-card{position:relative;min-height:56px;padding:14px 44px 14px 16px;border:1.5px solid var(--accent);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .12s,border-color .12s}
.doors a::after,.nx-card::after{content:"";position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.doors a:hover,.nx-card:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,20,40,.14)}
.doors a:active,.nx-card:active{transform:translateY(0);box-shadow:none}
.doors a:focus-visible,.nx-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.doors b{color:var(--accent)}
.doors li:first-child a,.nx-card.is-primary{background:var(--accent);border-color:var(--accent)}
.doors li:first-child a b,.doors li:first-child a span,.nx-card.is-primary strong,.nx-card.is-primary span{color:var(--on-accent,#fff)}
.doors li:first-child a::after,.nx-card.is-primary::after{background:var(--on-accent,#fff)}
.doors li:first-child a:hover,.nx-card.is-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
@media (max-width:640px){.doors a{padding:12px 36px 12px 12px;min-height:88px}.doors a::after{right:10px;width:16px;height:16px;margin-top:-8px}}
@media (prefers-reduced-motion:reduce){.doors a:hover,.nx-card:hover{transform:none}}

/* Embeds show one figure only */
.is-embed .nx,.is-embed .alerts,.is-embed .alerts-band,.is-embed .skip-link{display:none!important}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
[aria-invalid="true"]{border-color:var(--bad)!important;box-shadow:0 0 0 1px var(--bad)}