/* SimpleAvWx support site styles. Colors sampled from the app icon and asset catalog. */
:root{
  --brand-blue:#1e97e8;      /* icon gradient, top-left */
  --brand-navy:#22299a;      /* icon gradient, bottom-right */
  --brand-mid:#1f7bd4;
  --windsock:#ff3700;        /* icon windsock */
  --vfr:#28c034;             /* asset "vfr" (light) */
  --mvfr:#007aff;            /* system blue, used for MVFR in app */
  --ifr:#f12600;             /* asset "ifr" (light) */
  --lifr:#af52de;            /* system purple, used for LIFR in app */
  --nodata:#8e8e93;
  --h-blue:#4ac1f7;          /* asset "h_blue" */
  --blue-gray:#2f3a49;       /* asset "blueGray" */
  --bg:#f2f2f7; --card:#ffffff; --text:#1c1c1e; --muted:#5b5b63; --border:#d8d8de;
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#000;--card:#1c1c1e;--text:#f2f2f7;--muted:#a1a1aa;--border:#38383a;
        --vfr:#51b14c;--ifr:#d03e22;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55;font-size:17px;overflow-wrap:break-word}
a{color:var(--mvfr)} a:hover{text-decoration:none}
img{max-width:100%;height:auto}
code,kbd,.mono{font-family:var(--mono);font-size:.92em}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}

/* header */
.site-header{background:linear-gradient(135deg,var(--brand-blue),var(--brand-mid) 55%,var(--brand-navy));color:#fff}
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem}
.brand img{width:36px;height:36px}
.nav ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.nav a.navlink{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center}
.brand{min-height:44px}
.nav a.navlink:hover,.nav a.navlink[aria-current=page]{background:rgba(255,255,255,.18)}

/* hero */
.hero{max-width:1080px;margin:0 auto;padding:40px 20px 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:2.6rem;line-height:1.1;margin:0 0 12px}
.hero p.lead{font-size:1.2rem;opacity:.95;margin:0 0 20px}
.hero.one{grid-template-columns:1fr;max-width:820px}
.hero .icon-big{width:120px;height:120px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding:28px 20px 40px}.hero h1{font-size:2rem}}

/* App Store "coming soon" box (NOT the Apple badge) */
.appstore-soon{display:inline-flex;align-items:center;gap:10px;border:2px dashed rgba(255,255,255,.85);color:#fff;
  border-radius:10px;padding:10px 16px;font-weight:600;background:rgba(0,0,0,.18)}
.appstore-soon small{display:block;font-weight:400;opacity:.85}
.appstore-soon.on-light{border-color:var(--brand-mid);color:var(--brand-mid);background:transparent}

main{max-width:1080px;margin:0 auto;padding:28px 20px 48px}
main.narrow{max-width:820px}
h1,h2,h3{line-height:1.25}
h2{margin-top:2rem}
.muted{color:var(--muted)}
.breadcrumb{font-size:.9rem;color:var(--muted);margin-bottom:8px}
.breadcrumb a{color:var(--muted)}

/* cards like the app's RoundedSectionView */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:var(--mvfr)}
.card h3{margin:0 0 6px;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.section-box{border:2.5px solid var(--sb,var(--nodata));border-radius:10px;overflow:hidden;margin:18px 0;background:var(--card)}
.section-box>.sb-head{background:var(--sb,var(--nodata));color:#fff;font-weight:700;padding:6px 14px;display:flex;justify-content:space-between;gap:8px}
.section-box>.sb-body{padding:12px 14px}
.sb-vfr{--sb:var(--vfr)} .sb-mvfr{--sb:var(--mvfr)} .sb-ifr{--sb:var(--ifr)} .sb-lifr{--sb:var(--lifr)} .sb-blue{--sb:var(--brand-mid)} .sb-orange{--sb:var(--windsock)}

/* flight rules legend */
.rules{display:grid;gap:10px;margin:12px 0}
.rule{display:flex;gap:12px;align-items:flex-start}
.sw{width:40px;height:40px;border-radius:6px;flex:none}
.sw.vfr{background:var(--vfr)}.sw.mvfr{background:var(--mvfr)}.sw.ifr{background:var(--ifr)}.sw.lifr{background:var(--lifr)}.sw.nodata{background:var(--nodata)}

table{border-collapse:collapse;width:100%;margin:12px 0;background:var(--card);border-radius:8px;overflow:hidden}
th,td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top;font-size:.95rem}
th{background:rgba(127,127,127,.08)}
.table-wrap{overflow-x:auto}

.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:42px;margin:10px 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--mvfr);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}

.notice{border-left:5px solid var(--windsock);background:var(--card);padding:12px 16px;border-radius:6px;margin:18px 0}
.notice.warn{border-left-color:var(--ifr)}
.notice strong{display:block;margin-bottom:4px}

.shots{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
figure{margin:16px 0}
figcaption{text-align:center;color:var(--muted);font-size:.88rem}

details{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin:10px 0}
details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸";margin-right:8px;color:var(--muted)}
details[open] summary::before{content:"▾"}
details{padding:2px 16px}
details[open]{padding-bottom:12px}
details[open] summary{margin-bottom:4px}

.site-footer{border-top:1px solid var(--border);background:var(--card);color:var(--muted);font-size:.88rem}
.site-footer .inner{max-width:1080px;margin:0 auto;padding:24px 20px;display:grid;gap:10px}
.site-footer nav a{margin-right:14px;display:inline-flex;align-items:center;min-height:44px}
.legal-note{font-size:.82rem}
@media print{.site-header,.site-footer{display:none}}

/* help topics (mobile first) */
.topics{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.topics a{display:block;min-height:44px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;text-decoration:none;color:inherit}
.topics a strong{color:var(--mvfr)}
.topics a span{display:block;color:var(--muted);font-size:.92rem}
.toc ul{margin:0;padding-left:0;list-style:none}
.toc li a{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--border)}
section[id]{scroll-margin-top:12px}
.all-topics a,.inapp-bar a{display:inline-flex;align-items:center;min-height:44px}
.coming-later{color:var(--muted);font-style:italic}

/* in-app mode: ?inapp=1 (class set in <head> before first paint) */
.inapp-bar{display:none}
html.inapp .site-header,html.inapp .site-footer nav,html.inapp .legal-note,
html.inapp .breadcrumb,html.inapp .web-only,html.inapp .skip,html.inapp .all-topics{display:none}
html.inapp .inapp-bar{display:block}
html.inapp main{padding-top:4px}

@media (max-width:480px){
  body{font-size:16px}
  main{padding:16px 14px 36px}
  .nav{padding:8px 14px;gap:8px}
  .nav ul{margin-left:0}
  .hero{padding:24px 14px 32px}
  .hero h1{font-size:1.75rem}
  h1{font-size:1.6rem}
  th,td{padding:6px 8px;font-size:.9rem}
  .grid{grid-template-columns:1fr}
  .site-footer .inner{padding:18px 14px}
}

/* ---- Home hero only (header.home + .hero-band are only on index.html) ----
   Light blue (darkened enough for white body text, >= 4.5:1) to navy, reached at 62% across. At >= 1024px it is
   reached earlier when needed, min(62%, 100% - 520px) on the 100deg gradient line, so the navy always starts before
   the photo layer and there is no visible box edge. Tablets: navy at 50%. A decorative captain photo (backdrop tinted
   to --brand-navy) sits at the right edge, cropped by the viewport, and fades into the navy.
   The photo layer is positioned in the whole header (not just the hero band) so the captain can sit a little higher:
   it starts 36px below the top of the header and ends at the bottom of the hero. It shows a fixed crop window of the
   1280x720 frame: x 330-865, full height (phone, face, cap, pocket hand; his back is cut off).
   Phones (< 640px) hide the photo; the text is the content. */
.site-header.home{position:relative;overflow:hidden;background:linear-gradient(100deg,#1379be 0%,#1b6ac2 20%,var(--brand-navy) 62%,var(--brand-navy) 100%)}
@media (min-width:1024px){.site-header.home{background:linear-gradient(100deg,#1379be 0%,#1b6ac2 20%,var(--brand-navy) min(62%,calc(100% - 520px)),var(--brand-navy) 100%)}}
.site-header.home .nav{position:relative;z-index:2}
.site-header.home .hero p.lead{opacity:1}
.hero-band .hero{position:relative;z-index:1}
.hero-photo{position:absolute;right:0;bottom:0;height:calc(100% - 36px);aspect-ratio:535/720;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 15%);mask-image:linear-gradient(to right,transparent 0%,#000 15%)}
.hero-photo picture{display:block;width:100%;height:100%}
.hero-photo img{position:absolute;top:0;left:-61.682%;width:239.252%;max-width:none;height:auto}
@media (min-width:640px){.hero-band .hero.one{max-width:1080px}.hero-band .hero.one>div{max-width:min(36rem,54%)}}
/* tablets: photo at most 46vw wide (61.9vw tall at 535:720) so it stays right of the 54% text column, and below the
   nav row; navy at 50% */
@media (min-width:640px) and (max-width:1023px){
  .site-header.home{background:linear-gradient(100deg,#1379be 0%,#1b6ac2 18%,var(--brand-navy) 50%,var(--brand-navy) 100%)}
  .hero-photo{height:min(calc(100% - 64px),61.9vw)}}
/* phones (< 640px): no photo (index.html also hides it inline and gets a 1x1 blank, so nothing is downloaded and a
   stale cached style.css cannot leave the photo box in the flow as a tall empty square); the hero wraps its content. */
@media (max-width:639px){.hero-photo{display:none}.hero-band .hero{padding-top:20px;padding-bottom:32px}
 .hero-band .hero .icon-big{width:96px;height:96px}}

/* ---- header v2 (Oct 20 2026): no brand in nav, nav left-aligned (v3; inner pages keep logo+wordmark, wordmark hidden < 640px), compact home hero with icon left of title,
   faded KCLT METAR/TAF "paper" sheet behind the home header (aria-hidden, decorative) ---- */
.nav{justify-content:flex-start}
.nav nav{margin-left:0}
.nav ul{margin-left:0;justify-content:flex-start}
.site-header.wx>*:not(.wx-sheet):not(.hero-photo){position:relative;z-index:1}
.site-header.home .hero-band .hero{padding-top:4px;padding-bottom:28px}
.hero-band .hero.one>div{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:center}
.hero-band .hero .icon-big{grid-row:1 / span 2;width:144px;height:144px;align-self:start}
.hero-band .hero h1{margin:0 0 8px;align-self:end}
.hero-band .hero p.lead{margin:0;align-self:start}
.hero-band .hero .appstore-soon{grid-column:2;justify-self:start;margin-top:16px}
@media (min-width:640px){.hero-band .hero.one>div{max-width:min(44rem,62%)}}
.wx-sheet{position:absolute;z-index:0;pointer-events:none;user-select:none;top:-14%;left:4%;width:80%;max-width:1000px;
 transform:rotate(-7deg);transform-origin:top left;padding:28px 34px;border-radius:6px;
 background:#f4efe2;color:#2a2a2a;box-shadow:0 10px 40px rgba(0,0,0,.6);opacity:.066;
 -webkit-mask-image:radial-gradient(ellipse 75% 70% at 45% 45%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 45% 45%,#000 35%,transparent 80%)}
.wx-sheet pre{margin:0;font-family:var(--mono);font-size:15px;line-height:1.9;white-space:pre;letter-spacing:.02em}
@media (prefers-color-scheme:dark){.wx-sheet{opacity:.0495}}
@media (max-width:639px){
 .nav{padding:6px 6px}.nav ul{margin-left:0;justify-content:flex-start;gap:0}.brand{font-size:0;gap:0;margin-right:2px}.brand img{width:32px;height:32px}.nav a.navlink{padding:6px 7px;font-size:.9rem}
 .hero-band .hero.one>div{grid-template-columns:auto 1fr;column-gap:14px}
 .hero-band .hero .icon-big{grid-row:1;width:84px;height:84px;align-self:center}
 .hero-band .hero h1{grid-column:2;margin:0;align-self:center}
 .hero-band .hero p.lead{grid-column:1 / -1;margin-top:14px}
 .hero-band .hero .appstore-soon{grid-column:1 / -1}
 .site-header.home .hero-band .hero{padding-top:4px;padding-bottom:24px}
 .wx-sheet{width:180%;left:-20%;top:-4%}.wx-sheet pre{font-size:11px}}
@media (max-width:379px){.nav{padding:6px 4px}.nav a.navlink{padding:6px 5px;font-size:.82rem}.brand img{width:28px;height:28px}}
/* captain full header height at desktop (>= 1024px), header stays the v2 height */
/* hat ~10% of header height below the top, as in the pre-v2 tall header: the frame has ~22% empty space above the hat,
   so the layer is 116% of the header height, anchored bottom-right; the empty top is cropped by the header's overflow:hidden */
@media (min-width:1024px){.hero-photo{top:auto;bottom:0;height:116%}}
/* homepage "Not for navigation": red outline + light red fill; contrast text 14.9:1 / 14.4:1, links 7.6:1 / 8.9:1 */
.notice.nfn{border:2px solid #c62828;border-radius:var(--radius);background:#fdecea;color:#1c1c1e}
.notice.nfn a{color:#0047a3}
@media (prefers-color-scheme:dark){.notice.nfn{border-color:#ff6b5e;background:#3b1515;color:#f2f2f7}.notice.nfn a{color:#8ec5ff}}

/* screenshot slots #101-#113 (2026-10-20 shotslots): phone-shaped dashed boxes */
.shot-slot{box-sizing:border-box;width:100%;max-width:260px;aspect-ratio:9/19.5;margin:20px auto;padding:18px 16px;
 border:2px dashed var(--muted);border-radius:28px;background:var(--bg);color:var(--muted);
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.shot-slot .ss-num{font-size:2.6rem;font-weight:800;line-height:1;color:var(--text)}
.shot-slot .ss-file{font-family:var(--mono,ui-monospace,monospace);font-size:.9rem;color:var(--text)}
.shot-slot .ss-desc{font-size:.85rem;line-height:1.4}
.card.has-slot{display:flex;flex-direction:column}
.shot-slot.in-card{max-width:145px;margin:14px auto 0}
.shot-slot.in-card .ss-num{font-size:1.6rem}
.shot-slot.in-card .ss-desc{font-size:.68rem;line-height:1.3}
.shot-slot.in-card .ss-file{font-size:.75rem}
.shot-slot.in-card{padding:10px 9px;gap:5px;border-radius:20px}
@media (max-width:639px){.shot-slot{max-width:230px}.shot-slot.in-card{max-width:152px}}
/* real screenshots (2026-10-20 shots1): rounded phone-like frame, same size as the dashed slots */
.shot-img{max-width:260px;margin:20px auto}
.shot-img img{box-sizing:border-box;display:block;width:100%;height:auto;border-radius:28px;border:6px solid #1c1c1e;
 box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px rgba(0,0,0,.18);background:#1c1c1e}
.shot-img.in-card{max-width:145px;margin:14px auto 0}
.shot-img.in-card img{border-width:4px;border-radius:20px}
@media (prefers-color-scheme:dark){.shot-img img{border-color:#3a3a3c;box-shadow:0 10px 28px rgba(0,0,0,.6)}}
@media (max-width:639px){.shot-img{max-width:230px}.shot-img.in-card{max-width:152px}}