/* ============================================================================ FLIGHTPERFORMANCECALC — shared front-end design system VINTAGE AIRCRAFT-COCKPIT ALUMINUM skin ---------------------------------------------------------------------------- DEFAULT theme = vintage riveted brushed-aluminum daylight (light) data-theme=dark = dark glass cockpit (phosphor green on charcoal) This file RESTYLES the site's existing class/element vocabulary in place: nav / .nav-inner / .nav-logo / .nav-links / .nav-trigger / .nav-menu / .nav-ham / .theme-tg ; .hero / .hero-grid / .hero-lead / .hero-tool / .cred / .rail ; .calc / .calc-head / .calc-body / .field / .in-wrap / .readout / .a-cell / .a-flag ; .apt* ; .otp / .bc / .steps / .qref / .ex-table / .gloss / .guides / .callout / .faq / .sbn / .next-tool / footer / .type-selector / .type-btn ; h1-h4 / p / a / strong / table / details ; main.page / .eyebrow. Palettes are taken verbatim from the two approved look-boards: cockpit-skin.html (light) and cockpit-final.html (dark). ============================================================================ */ /* --------------------------------------------------------------------------- 1. THEME TOKENS Variable NAMES are kept identical to the site's originals (--paper, --panel, --magenta, --amber, --ink, --mono …) so every existing rule keeps resolving — only their VALUES are repointed to the cockpit-aluminum system. The former magenta/amber accents both collapse onto the deep instrument green. --------------------------------------------------------------------------- */ :root{ /* -- surfaces (vintage aluminum) -- */ --paper:#e4e2da; /* base greige behind the skin */ --panel:#edf0f2; /* brushed-metal panel face */ --panel-2:#e2e6ea; /* recessed panel / header strip */ --panel-3:#dce1e5; /* deepest inset (input wells) */ --ink:#1c242b; /* markings / headings */ --body:#2f3842; /* body copy (darkened for contrast) */ --muted:#5b6771; /* labels / secondary */ /* -- structural lines & fasteners -- */ --line:rgba(28,36,43,.17); --line-soft:rgba(28,36,43,.09); --bezel:#bcc4ca; --neat:rgba(28,36,43,.34); --tick:rgba(28,36,43,.30); /* -- accent = deep instrument green (former magenta + amber unify here) -- */ --magenta:#0e8f66; --magenta-soft:rgba(14,143,102,.11); --amber:#0e8f66; --amber-soft:rgba(14,143,102,.11); --accent:#0e8f66; --accent-dim:#8fc4b2; --sky:#2f6d8c; /* -- safety semantics -- */ --ok-fg:#0e8f66; --ok-bd:rgba(14,143,102,.42); --ok-bg:rgba(14,143,102,.10); --warn-bg:#a86413; --warn-fg:#fbf3e6; --high-bg:#d02f2f; --high-fg:#fdeeee; --danger:#d02f2f; --red:#d02f2f; /* -- depth -- */ --shadow:0 1px 0 rgba(255,255,255,.6),0 18px 44px rgba(60,72,84,.20); /* -- type -- */ --disp:'Oswald',sans-serif; --sans:'Barlow Semi Condensed',sans-serif; --mono:'Share Tech Mono',monospace; /* fluid scale + rhythm (carried from the site so existing rules keep working) */ --fs-eyebrow:14.5px; --fs-lede:clamp(17px,1.1vw+15px,19.5px); --fs-h1:clamp(44px,7.4vw,76px); --fs-h2:clamp(28px,4.2vw,37px); --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px; --sp-6:40px; --sp-7:56px; --sp-8:80px; /* -- riveted-panel building blocks (recomputed per theme) -- */ /* a single countersunk rivet */ --rivet:radial-gradient(circle,#f8fbfc 0 1.2px,#cad1d7 1.7px 2.7px,rgba(140,148,156,.55) 2.9px 3.5px,transparent 3.7px); /* brushed-grain + light-catch + panel gradient for a metal face */ --metal-face: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,0) 24%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(28,38,48,.022) 1px 2px, transparent 2px 5px), linear-gradient(180deg,#f1f4f6,#dde2e6); --metal-face-2: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 42%), repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, rgba(28,38,48,.02) 1px 2px, transparent 2px 5px), linear-gradient(180deg,#e6eaee,#d9dee3); --panel-border:#bcc4ca; --panel-shadow:0 18px 44px rgba(60,72,84,.18), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(120,130,140,.28); } /* ---- DARK: explicit toggle wins in both directions ---- */ :root[data-theme="dark"]{ --paper:#0c1116; --panel:#1b2228; --panel-2:#161c22; --panel-3:#11161b; --ink:#e8eef2; --body:#9fb0bb; --muted:#7d909b; --line:rgba(180,210,190,.14); --line-soft:rgba(180,210,190,.08); --bezel:#2b343d; --neat:rgba(150,190,170,.4); --tick:rgba(150,190,170,.34); --magenta:#35e0a1; --magenta-soft:rgba(53,224,161,.13); --amber:#35e0a1; --amber-soft:rgba(53,224,161,.13); --accent:#35e0a1; --accent-dim:#1c7d5c; --sky:#63b8d8; --ok-fg:#35e0a1; --ok-bd:rgba(53,224,161,.4); --ok-bg:rgba(53,224,161,.12); --warn-bg:#e0973f; --warn-fg:#171208; --high-bg:#cf3a37; --high-fg:#fff0ef; --danger:#ff5d59; --red:#ff4d4d; --shadow:0 1px 0 rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.6); --rivet:radial-gradient(circle,#2a333c 0 1.2px,#151b21 1.7px 2.7px,rgba(0,0,0,.6) 2.9px 3.5px,transparent 3.7px); --metal-face: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 26%), repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, rgba(0,0,0,.10) 1px 2px, transparent 2px 5px), linear-gradient(180deg,#20272e,#141a1f); --metal-face-2: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%), linear-gradient(180deg,#161d23,#0f151a); --panel-border:#2b343d; --panel-shadow:0 22px 54px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.4); } /* ---- DARK via OS preference, only when the user hasn't forced light ---- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0c1116; --panel:#1b2228; --panel-2:#161c22; --panel-3:#11161b; --ink:#e8eef2; --body:#9fb0bb; --muted:#7d909b; --line:rgba(180,210,190,.14); --line-soft:rgba(180,210,190,.08); --bezel:#2b343d; --neat:rgba(150,190,170,.4); --tick:rgba(150,190,170,.34); --magenta:#35e0a1; --magenta-soft:rgba(53,224,161,.13); --amber:#35e0a1; --amber-soft:rgba(53,224,161,.13); --accent:#35e0a1; --accent-dim:#1c7d5c; --sky:#63b8d8; --ok-fg:#35e0a1; --ok-bd:rgba(53,224,161,.4); --ok-bg:rgba(53,224,161,.12); --warn-bg:#e0973f; --warn-fg:#171208; --high-bg:#cf3a37; --high-fg:#fff0ef; --danger:#ff5d59; --red:#ff4d4d; --shadow:0 1px 0 rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.6); --rivet:radial-gradient(circle,#2a333c 0 1.2px,#151b21 1.7px 2.7px,rgba(0,0,0,.6) 2.9px 3.5px,transparent 3.7px); --metal-face: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 26%), repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, rgba(0,0,0,.10) 1px 2px, transparent 2px 5px), linear-gradient(180deg,#20272e,#141a1f); --metal-face-2: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%), linear-gradient(180deg,#161d23,#0f151a); --panel-border:#2b343d; --panel-shadow:0 22px 54px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.4); } } /* --------------------------------------------------------------------------- 2. RESET / BASE --------------------------------------------------------------------------- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ color:var(--body); font-family:var(--sans); font-size:17px; line-height:1.62; font-weight:400; overflow-x:hidden; /* no horizontal page overflow */ -webkit-font-smoothing:antialiased; background:var(--paper); position:relative; min-height:100vh; } ::selection{background:var(--accent);color:#fff;} img{max-width:100%;display:block;} :focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:3px;} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}} .wrap{max-width:1160px;margin:0 auto;padding:0 22px;} .content{max-width:840px;margin:0 auto;padding:0 22px;min-width:0;} /* --------------------------------------------------------------------------- 3. THE VINTAGE RIVETED ALUMINUM SKIN (page background) A fixed full-viewport layer sits behind all content on every page: - fractal-noise grain (data-URI SVG) - patina blotches (radial gradients) - riveted seam pattern (data-URI SVG: seam lines + rivet rows) - brushed diagonal hatching + fine vertical grain - greige aluminum base wash Dark theme swaps to charcoal + a faint avionics grid. --------------------------------------------------------------------------- */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: /* grain */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") repeat, /* riveted seam pattern: 720x460 tile, seam cross-lines + rivet rows */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='460'%3E%3Cg fill='none' stroke='rgba(66,60,48,0.16)' stroke-width='1.2'%3E%3Cpath d='M0 .5H720M.5 0V460'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(255,253,247,0.34)' stroke-width='1'%3E%3Cpath d='M0 2.6H720M2.6 0V460'/%3E%3C/g%3E%3Cg fill='rgba(150,150,140,0.5)'%3E%3Ccircle cx='16' cy='7' r='3'/%3E%3Ccircle cx='76' cy='7' r='3'/%3E%3Ccircle cx='136' cy='7' r='3'/%3E%3Ccircle cx='196' cy='7' r='3'/%3E%3Ccircle cx='256' cy='7' r='3'/%3E%3Ccircle cx='316' cy='7' r='3'/%3E%3Ccircle cx='376' cy='7' r='3'/%3E%3Ccircle cx='436' cy='7' r='3'/%3E%3Ccircle cx='496' cy='7' r='3'/%3E%3Ccircle cx='556' cy='7' r='3'/%3E%3Ccircle cx='616' cy='7' r='3'/%3E%3Ccircle cx='676' cy='7' r='3'/%3E%3Ccircle cx='7' cy='60' r='3'/%3E%3Ccircle cx='7' cy='120' r='3'/%3E%3Ccircle cx='7' cy='180' r='3'/%3E%3Ccircle cx='7' cy='240' r='3'/%3E%3Ccircle cx='7' cy='300' r='3'/%3E%3Ccircle cx='7' cy='360' r='3'/%3E%3Ccircle cx='7' cy='420' r='3'/%3E%3C/g%3E%3C/svg%3E") repeat, /* patina blotches */ radial-gradient(58% 52% at 18% 12%, rgba(120,114,96,.09), transparent 62%), radial-gradient(52% 46% at 86% 78%, rgba(104,100,86,.09), transparent 62%), radial-gradient(46% 42% at 62% 45%, rgba(96,94,86,.05), transparent 60%), radial-gradient(40% 60% at 100% 30%, rgba(88,86,74,.06), transparent 55%), /* brushed diagonal hatch */ repeating-linear-gradient(57deg, rgba(255,255,255,.03) 0 1px, transparent 1px 46px), repeating-linear-gradient(122deg, rgba(60,56,48,.018) 0 1px, transparent 1px 70px), /* light sweep + fine vertical grain */ linear-gradient(118deg, rgba(255,255,252,.20) 0%, rgba(255,255,252,0) 48%), repeating-linear-gradient(90deg, rgba(255,255,252,.045) 0 1px, rgba(62,58,50,.025) 1px 2px, transparent 2px 5px), /* greige aluminum base */ radial-gradient(132% 92% at 50% -10%, #f0efea 0%, #e5e3dc 52%, #d3d1c7 100%); box-shadow:inset 0 0 220px rgba(62,58,48,.12); } /* dark cockpit skin */ :root[data-theme="dark"] body::before{ background: linear-gradient(rgba(53,224,161,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(53,224,161,.05) 1px,transparent 1px), radial-gradient(120% 80% at 50% -10%, #12191f 0%, #0c1116 55%, #05080b 100%); background-size:44px 44px,44px 44px,cover; box-shadow:inset 0 0 260px rgba(0,0,0,.5); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::before{ background: linear-gradient(rgba(53,224,161,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(53,224,161,.05) 1px,transparent 1px), radial-gradient(120% 80% at 50% -10%, #12191f 0%, #0c1116 55%, #05080b 100%); background-size:44px 44px,44px 44px,cover; box-shadow:inset 0 0 260px rgba(0,0,0,.5); } } /* --------------------------------------------------------------------------- 4. RIVETED PANEL UTILITIES (reusable brushed-metal treatment) .panel — brushed-metal face + corner rivets + border + light-catch .panel-riveted — same, plus a full sparse rivet perimeter (~120px pitch) Both are also applied automatically to the site's container classes below. --------------------------------------------------------------------------- */ .panel{ position:relative; background: var(--rivet) left 11px top 11px/16px 16px no-repeat, var(--rivet) right 11px top 11px/16px 16px no-repeat, var(--rivet) left 11px bottom 11px/16px 16px no-repeat, var(--rivet) right 11px bottom 11px/16px 16px no-repeat, var(--metal-face); border:1px solid var(--panel-border); border-radius:13px; box-shadow:var(--panel-shadow); } .panel-riveted{ position:relative; background: var(--rivet) left 14px top 11px / 120px 8px repeat-x, var(--rivet) left 14px bottom 11px / 120px 8px repeat-x, var(--rivet) left 11px top 14px / 8px 120px repeat-y, var(--rivet) right 11px top 14px / 8px 120px repeat-y, var(--metal-face); border:1px solid var(--panel-border); border-radius:14px; box-shadow:var(--panel-shadow); } /* --------------------------------------------------------------------------- 5. NAV (brushed instrument fascia, sticky) --------------------------------------------------------------------------- */ nav{ position:sticky;top:0;z-index:100; background:var(--metal-face-2); border-bottom:1px solid var(--panel-border); box-shadow:inset 0 -1px 0 rgba(14,143,102,.30); backdrop-filter:blur(6px); } :root[data-theme="dark"] nav, :root:not([data-theme="light"]) nav{box-shadow:inset 0 -1px 0 rgba(53,224,161,.22);} .nav-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:14px;height:62px;padding:0 22px;min-width:0;} .nav-logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:clamp(16px,4.6vw,20px);letter-spacing:.14em;color:var(--ink);text-decoration:none;text-transform:uppercase;white-space:nowrap;margin-right:auto;min-width:0;} .nav-logo .mark{width:26px;height:26px;flex-shrink:0;color:var(--accent);} .nav-logo span{color:var(--accent);} .nav-links{display:flex;gap:4px;list-style:none;align-items:center;} .nav-dd{position:relative;} .nav-trigger{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;background:none;border:none;cursor:pointer;padding:11px 12px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center;gap:6px;} .nav-trigger:hover,.nav-trigger.open,.nav-trigger.active{color:var(--accent);background:var(--magenta-soft);} .nav-trigger .caret{width:9px;height:9px;transition:transform .18s;} .nav-trigger.open .caret{transform:rotate(180deg);} .nav-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:236px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none;z-index:120;} .nav-menu.open{display:block;} .nav-menu a{display:flex;align-items:center;font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);font-weight:600;text-decoration:none;padding:11px 12px;border-radius:8px;min-height:44px;} .nav-menu a:hover,.nav-menu a.active{color:var(--accent);background:var(--magenta-soft);} /* theme toggle button */ .theme-tg{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:0 12px;min-height:40px;cursor:pointer;transition:border-color .15s,color .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);} .theme-tg:hover{color:var(--accent);border-color:var(--accent);} .theme-tg svg{width:15px;height:15px;} .theme-tg .ic-moon{display:none;} .theme-tg .ic-sun{display:block;} :root[data-theme="dark"] .theme-tg .ic-sun{display:none;} :root[data-theme="dark"] .theme-tg .ic-moon{display:block;} :root[data-theme="dark"] .theme-tg{box-shadow:inset 0 1px 0 rgba(255,255,255,.05);} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-tg .ic-sun{display:none;} :root:not([data-theme="light"]) .theme-tg .ic-moon{display:block;} } :root[data-theme="light"] .theme-tg .ic-sun{display:block;} :root[data-theme="light"] .theme-tg .ic-moon{display:none;} /* hamburger */ .nav-ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:12px;min-width:44px;min-height:44px;justify-content:center;align-items:center;} .nav-ham span{display:block;width:23px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;} @media(max-width:820px){ .nav-links{display:none;position:absolute;top:62px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--panel-border);flex-direction:column;padding:10px 14px 14px;box-shadow:var(--shadow);} .nav-links.open{display:flex;align-items:stretch;} .nav-ham{display:flex;order:3;} .nav-dd{width:100%;} .nav-trigger{width:100%;justify-content:space-between;font-size:14px;padding:13px 14px;} .nav-menu{position:static;box-shadow:none;border:none;border-radius:0;min-width:0;padding:0 0 6px 12px;background:transparent;} } /* --------------------------------------------------------------------------- 6. HERO --------------------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);} .hero-neat{display:none;} /* removed decorative ruler-tick strip (read as a stray chart axis on mobile) */ .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:34px;padding:44px 22px 52px;max-width:1160px;margin:0 auto;} @media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:48px;align-items:start;padding:56px 22px 60px;}} .hero-lead{align-self:start;min-width:0;} .hero-tool{min-width:0;} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:20px;} .eyebrow::before{content:'';width:28px;height:1.5px;background:var(--accent);display:inline-block;} h1{font-family:var(--disp);font-weight:700;font-size:var(--fs-h1);line-height:.92;letter-spacing:.01em;color:var(--ink);text-transform:uppercase;text-wrap:balance;margin-bottom:20px;text-shadow:0 1px 0 rgba(255,255,255,.5);overflow-wrap:break-word;} :root[data-theme="dark"] h1{text-shadow:0 2px 24px rgba(0,0,0,.6);} h1 .amp,h1 .accent{color:var(--accent);position:relative;} :root[data-theme="dark"] h1 .amp,:root[data-theme="dark"] h1 .accent{text-shadow:0 0 22px rgba(53,224,161,.4);} .lede{font-size:var(--fs-lede);color:var(--body);max-width:34em;margin-bottom:26px;line-height:1.56;text-wrap:pretty;overflow-wrap:break-word;} .lede strong,.lede b{color:var(--ink);font-weight:600;} .subtitle{font-size:var(--fs-lede);color:var(--body);max-width:40em;margin-bottom:20px;line-height:1.56;overflow-wrap:break-word;} .cred{display:flex;flex-wrap:wrap;gap:8px;list-style:none;} .cred li{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--body);font-weight:600;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--panel);box-shadow:0 1px 2px rgba(20,30,40,.06);min-width:0;} .cred li svg{width:13px;height:13px;color:var(--accent);flex-shrink:0;} /* hero load animation (respects reduced-motion via global rule) */ .load-anim>*{animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) both;} .load-anim>.eyebrow{animation-delay:.02s;} .load-anim>h1{animation-delay:.09s;} .load-anim>.lede{animation-delay:.17s;} .load-anim>.cred{animation-delay:.24s;} @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} /* constants rail — riveted plate */ .rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:26px;border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;background:var(--metal-face-2);box-shadow:var(--panel-shadow);} .rail::before{content:'STANDARD ATMOSPHERE — REFERENCE CONSTANTS';position:absolute;top:0;left:0;right:0;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:600;background:var(--panel-2);border-bottom:1px solid var(--line-soft);padding:4px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rail div{padding:34px 14px 12px;border-right:1px solid var(--line-soft);min-width:0;} .rail div:last-child{border-right:none;} .rail dt{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px;} .rail dd{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:.01em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;} .rail dd small{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--accent);letter-spacing:.02em;margin-left:2px;} @media(max-width:560px){.rail{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.rail div:nth-child(2){border-right:none;}.rail div:nth-child(1),.rail div:nth-child(2){border-bottom:1px solid var(--line-soft);}.rail div:nth-child(3),.rail div:nth-child(4){padding-top:12px;}.rail dt{white-space:normal;}} /* --------------------------------------------------------------------------- 7. CALCULATOR PANEL (instrument enclosure) --------------------------------------------------------------------------- */ .calc{ position:relative;min-width:0;overflow:hidden; background: var(--rivet) left 14px top 12px / 120px 8px repeat-x, var(--rivet) left 14px bottom 12px / 120px 8px repeat-x, var(--rivet) left 12px top 14px / 8px 120px repeat-y, var(--rivet) right 12px top 14px / 8px 120px repeat-y, var(--metal-face); border:1px solid var(--panel-border); border-radius:14px; box-shadow:var(--panel-shadow); } .rivets{display:none;} /* the panel now carries its own rivet perimeter */ .calc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--metal-face-2);border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;} .calc-head .tag{display:flex;flex-direction:column;gap:2px;min-width:0;} .calc-head .tag b{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1;} .calc-head .tag em{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:normal;} .live-dot{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--ok-fg);text-transform:uppercase;font-weight:600;white-space:nowrap;} .live-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok-fg);box-shadow:0 0 8px var(--ok-fg);animation:pulse 2.4s ease-out infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok-fg) 55%,transparent);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}} /* WX airport strip */ .apt{position:relative;padding:16px 18px;margin:14px 14px 2px;border:1px solid var(--accent);border-radius:11px;background:var(--magenta-soft);} .apt.touched{border-color:var(--line);background:var(--panel-2);} .apt-start{position:absolute;top:-10px;left:16px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-radius:5px;padding:3px 9px;} .apt-row{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap;} .apt-in{flex:1 1 auto;min-width:0;display:flex;border:1.5px solid var(--line);border-radius:9px;background:var(--panel-3);overflow:hidden;box-shadow:inset 0 2px 5px rgba(60,72,84,.12);} .apt-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--magenta-soft);} .apt-in input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:11px 14px;min-height:46px;} .apt-in input::placeholder{color:var(--muted);letter-spacing:.05em;font-weight:400;opacity:.85;} .apt-btn{border:none;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-radius:9px;padding:0 15px;min-height:46px;font-weight:600;transition:filter .15s,transform .1s;white-space:nowrap;} .apt-btn:hover{filter:brightness(1.06);}.apt-btn:active{transform:scale(.97);} .apt-go{background:var(--accent);color:#fff;} .apt-near{background:var(--panel);color:var(--accent);border:1.5px solid var(--accent);} .apt-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;} .apt-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:999px;font-family:var(--mono);font-size:13px;color:var(--ink);padding:8px 13px;min-height:38px;cursor:pointer;transition:border-color .15s,color .15s;} .apt-chip:hover{border-color:var(--accent);color:var(--accent);} .apt-chip .fav-x{color:var(--muted);font-size:15px;padding:2px 3px;line-height:1;} .apt-chip .fav-x:hover{color:var(--danger);} .apt-chip.fav .star{color:var(--accent);} .apt-save{background:var(--magenta-soft);border-color:var(--accent);color:var(--accent);} .apt-msg{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.5;} .apt-msg.warn{color:var(--warn-bg);} .apt-msg.err{color:var(--danger);} .apt-metar{margin-top:10px;background:var(--panel-3);border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;} .apt-metar-raw{font-family:var(--mono);font-size:13.5px;color:var(--ink);line-height:1.55;word-break:break-word;} .apt-metar-meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:5px;letter-spacing:.02em;} .apt-metar-meta.stale{color:var(--warn-bg);font-weight:600;} .apt-metar-meta.old{color:var(--danger);font-weight:700;} /* inputs */ .calc-body{padding:16px 18px 4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;} @media(max-width:520px){.calc-body{grid-template-columns:minmax(0,1fr);}} .field{min-width:0;} .field label{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px;} .in-wrap{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:9px;background:var(--panel-3);overflow:hidden;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 2px 5px rgba(60,72,84,.12);min-width:0; background-image:var(--metal-face-2);} .in-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--magenta-soft);} .in-wrap input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);padding:12px 14px;min-height:48px;font-variant-numeric:tabular-nums;} .in-wrap input::placeholder{color:var(--muted);font-weight:400;opacity:.7;} .unit-tg{display:flex;border-left:1.5px solid var(--line);} .unit-tg button{border:none;background:var(--panel-2);font-family:var(--mono);font-size:13px;color:var(--muted);padding:0 13px;min-width:48px;min-height:48px;cursor:pointer;transition:background .12s,color .12s;font-weight:600;} .unit-tg button:hover{color:var(--ink);} .unit-tg button.on{background:var(--accent);color:#fff;} .unit-static{display:flex;align-items:center;font-family:var(--mono);font-size:13px;color:var(--muted);background:var(--panel-2);border-left:1.5px solid var(--line);padding:0 14px;font-weight:600;white-space:nowrap;} .hint{font-size:14.5px;color:var(--muted);margin-top:6px;line-height:1.45;} .field-hum{grid-column:1/-1;} .hum-row{display:flex;align-items:center;gap:14px;} .hum-val{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink);min-width:52px;text-align:right;font-variant-numeric:tabular-nums;} .hum-row input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:transparent;height:44px;cursor:pointer;} .hum-row input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:5px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,0%),var(--line) var(--fill,0%),var(--line) 100%);} .hum-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--panel);border:2.5px solid var(--accent);cursor:pointer;box-shadow:var(--shadow);transition:transform .1s;margin-top:-8px;} .hum-row input[type=range]::-webkit-slider-thumb:active{transform:scale(1.14);} .hum-row input[type=range]::-moz-range-track{height:6px;border-radius:5px;background:var(--line);} .hum-row input[type=range]::-moz-range-progress{height:6px;border-radius:5px;background:var(--accent);} .hum-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--panel);border:2.5px solid var(--accent);cursor:pointer;} /* --------------------------------------------------------------------------- 8. READOUT — dark "glass" instrument face (identical in both themes, matching the DA-gauge look-board: always a dark instrument) --------------------------------------------------------------------------- */ .readout{position:relative;margin:14px;border-radius:13px;overflow:hidden;display:flex;flex-direction:column; background:radial-gradient(140% 120% at 30% 0%,#12181d,#05080a); border:1px solid #05100c; box-shadow:inset 0 1px 0 rgba(180,210,190,.08),inset 0 0 46px rgba(0,0,0,.55); padding:20px 20px 18px;min-width:0;} .readout::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 55%);} .readout::before{content:'';position:absolute;left:0;right:0;top:-45%;height:45%;pointer-events:none;background:linear-gradient(180deg,rgba(53,224,161,.06),transparent);animation:sweep 7s linear infinite;} @keyframes sweep{0%{transform:translateY(0)}100%{transform:translateY(340%)}} .readout>*{position:relative;z-index:1;} .readout .gauge-rose{position:absolute;top:50%;right:-46px;left:auto;transform:translateY(-50%);width:220px;height:220px;color:var(--accent);opacity:.10;pointer-events:none;z-index:0;} .a-cell{position:relative;z-index:1;min-width:0;} .a-cell .a-lbl{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:3px;} .a-cell .a-val{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);} .a-da .a-val{font-size:clamp(38px,8vw,56px);line-height:1;letter-spacing:-.01em;transition:color .25s;} .a-unit{font-size:13px;color:var(--muted);font-weight:500;} .a-sm .a-val{font-size:21px;} /* inside the glass readout the labels/values go phosphor */ .readout .a-lbl{color:#7c9188;letter-spacing:.16em;} .readout .a-da .a-val{font-size:clamp(44px,9vw,64px);line-height:.94;letter-spacing:-.01em;color:#5a6f66;} .readout .a-da .a-unit{font-size:16px;color:#7c9188;} .readout[data-s="ok"] .a-da .a-val{color:#eef2f4;text-shadow:0 0 18px rgba(53,224,161,.3);} .readout[data-s="warn"] .a-da .a-val{color:#e0973f;text-shadow:0 0 20px rgba(224,151,63,.4);} .readout[data-s="high"] .a-da .a-val{color:#ff5d59;text-shadow:0 0 22px rgba(255,93,89,.45);} .readout .a-sm .a-val{color:#dbe7df;} .readout .a-sm .a-unit{color:#7c9188;} /* altitude tape */ .tape{position:relative;margin:16px 0 6px;} .tape-zones{position:relative;display:flex;height:9px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.05);} .tz{display:block;height:100%;} .tz-g{flex:0 0 35.7%;background:rgba(53,224,161,.5);} .tz-a{flex:0 0 21.4%;background:rgba(224,151,63,.55);} .tz-r{flex:0 0 42.9%;background:rgba(255,93,89,.5);} .tape-field{position:absolute;top:-4px;width:2px;height:17px;background:rgba(255,255,255,.45);left:0;transform:translateX(-50%);transition:left .35s ease;z-index:2;} .tape-field::after{content:'FIELD';position:absolute;top:19px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#7c9188;white-space:nowrap;} .tape-needle{position:absolute;top:-5px;width:3px;height:19px;background:#eef3ea;border-radius:2px;left:0;transform:translateX(-50%);transition:left .4s cubic-bezier(.34,1.15,.5,1),background .2s,box-shadow .2s;box-shadow:0 0 9px rgba(255,255,255,.5);z-index:3;} .tape-needle[data-s="idle"]{opacity:.28;} .tape-needle[data-s="warn"]{background:#e0973f;box-shadow:0 0 11px rgba(224,151,63,.8);} .tape-needle[data-s="high"]{background:#ff5d59;box-shadow:0 0 12px rgba(255,93,89,.9);} .tape-scale{display:flex;justify-content:space-between;margin-top:15px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#6a7f76;font-weight:600;} .sub-gauges{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:8px 0 14px;padding-top:14px;border-top:1px solid rgba(180,210,190,.1);} /* annunciator flag / lamp */ .a-flag{grid-column:1/-1;position:relative;z-index:1;display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border:1.5px solid var(--line);border-radius:9px;padding:12px 15px;min-height:46px;transition:background .2s,color .2s,border-color .2s;} .a-flag::before{content:'';width:10px;height:10px;border-radius:50%;background:currentColor;flex-shrink:0;box-shadow:0 0 8px currentColor;} .a-flag.idle{color:var(--muted);background:var(--panel);font-weight:600;letter-spacing:.1em;} .a-flag.idle::before{box-shadow:none;opacity:.5;} .a-flag.ok{color:var(--ok-fg);border-color:var(--ok-bd);background:var(--ok-bg);} .a-flag.warn{color:var(--warn-fg);background:var(--warn-bg);border-color:var(--warn-bg);letter-spacing:.16em;} .a-flag.high{color:var(--high-fg);background:var(--high-bg);border-color:var(--high-bg);letter-spacing:.16em;} .a-flag.warn::before,.a-flag.high::before{box-shadow:0 0 8px rgba(255,255,255,.6);} /* flags rendered on the glass readout */ .readout .a-flag{border-color:rgba(180,210,190,.1);margin-top:auto;} .readout .a-flag.idle{color:#7c9188;background:rgba(180,210,190,.03);} .readout .a-flag.ok{color:#35e0a1;background:rgba(53,224,161,.14);border-color:rgba(53,224,161,.3);} .readout .a-flag.warn{color:#e0973f;background:rgba(224,151,63,.15);border-color:rgba(224,151,63,.35);} .readout .a-flag.high{color:#ff6f6b;background:rgba(255,93,89,.16);border-color:rgba(255,93,89,.4);animation:lamp 1.15s ease-in-out infinite;} @keyframes lamp{0%,100%{opacity:1}50%{opacity:.55}} @media(prefers-reduced-motion:reduce){.readout::before{animation:none;}.readout .a-flag.high{animation:none;}.live-dot::before{animation:none;}} .res-actions,.inst-foot .res-actions{grid-column:1/-1;position:relative;z-index:1;display:flex;gap:18px;flex-wrap:wrap;align-items:center;} .res-btn,.res-btn:hover{border:none;background:none;padding:8px 2px;min-height:44px;color:var(--accent);font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;} .res-btn:hover{filter:brightness(1.15);} .res-btn.ok2{color:var(--ok-fg);} .show-math{grid-column:1/-1;position:relative;z-index:1;justify-self:start;background:none;border:none;padding:8px 2px;min-height:44px;color:var(--accent);font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;} .show-math:hover{filter:brightness(1.15);} .math-panel{grid-column:1/-1;position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;} .calc .math-panel{margin:0 14px 14px;} .math-panel .mline{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--body);line-height:1.85;word-break:break-word;} .math-panel .mline strong{color:var(--ink);} .math-panel .mhead{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:11px 0 3px;} .math-panel .mhead:first-child{margin-top:0;} .math-panel .mnote{font-size:13px;color:var(--muted);font-weight:500;margin-top:11px;line-height:1.55;} .inst-foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:2px 18px 8px;} /* --------------------------------------------------------------------------- 9. SIGNATURE / GAUGE PANEL (riveted brushed plate holding the instrument) --------------------------------------------------------------------------- */ .signature,.gauge-panel{ position:relative;margin:14px 0;padding:26px 24px;min-width:0; background: var(--rivet) left 14px top 12px / 120px 8px repeat-x, var(--rivet) left 14px bottom 12px / 120px 8px repeat-x, var(--rivet) left 12px top 14px / 8px 120px repeat-y, var(--rivet) right 12px top 14px / 8px 120px repeat-y, var(--metal-face); border:1px solid var(--panel-border); border-radius:16px; box-shadow:var(--panel-shadow); } .gauge-wrap{display:flex;justify-content:center;align-items:center;min-width:0;} .gauge-wrap svg{max-width:100%;height:auto;} .sig-head{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:8px;} .sig-head b{color:var(--accent);} .mini-readout{ font-family:var(--mono); border:1px solid var(--panel-border);border-radius:8px; padding:10px 13px; background:var(--metal-face-2); font-size:12px;color:var(--muted);letter-spacing:.06em; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } .mini-readout b{color:var(--accent);display:block;font-size:18px;margin-top:2px;} .lamp-chip{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);} .lamp-chip i{width:11px;height:11px;border-radius:50%;display:inline-block;} .lamp-chip.on i{background:var(--accent);box-shadow:0 0 9px var(--accent);} .lamp-chip.warn i{background:var(--red);box-shadow:0 0 9px var(--red);} .lamp-chip.off i{background:var(--bezel);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);} /* --------------------------------------------------------------------------- 10. AIRCRAFT-TYPE SELECTOR (riveted tiles; big SVG over label; green when on) --------------------------------------------------------------------------- */ .type-selector{margin-bottom:20px;min-width:0;} .type-selector-label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;} .type-selector-label .sn,.sec .sn{color:var(--accent);font-weight:700;} .type-selector-label .st,.sec .st{color:var(--ink);font-weight:700;} .type-selector-label .secg,.sec .secg{width:20px;height:20px;color:var(--accent);flex:none;} .type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} @media(max-width:700px){.type-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:380px){.type-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}} .type-btn{ position:relative;min-width:0;cursor:pointer;text-align:center; padding:18px 10px 14px;border-radius:12px; background: var(--rivet) left 9px top 9px/14px 14px no-repeat, var(--rivet) right 9px top 9px/14px 14px no-repeat, var(--rivet) left 9px bottom 9px/14px 14px no-repeat, var(--rivet) right 9px bottom 9px/14px 14px no-repeat, var(--metal-face); border:1px solid var(--panel-border); box-shadow:var(--panel-shadow); transition:border-color .18s,box-shadow .18s,transform .12s; } .type-btn:hover{transform:translateY(-2px);border-color:var(--accent-dim);} .type-btn.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--magenta-soft),var(--panel-shadow);} .type-icon{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--ink);opacity:.72;transition:color .18s,opacity .18s;} .type-icon svg,.type-icon img{height:100px;width:auto;max-width:100%;display:block;} .type-btn:hover .type-icon{opacity:.9;} .type-btn.active .type-icon{color:var(--accent);opacity:1;} .type-tag{display:none;} .type-name{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin-bottom:2px;line-height:1.05;overflow-wrap:break-word;} .type-btn.active .type-name{color:var(--accent);} .type-sub{font-size:13px;color:var(--muted);line-height:1.35;overflow-wrap:break-word;} @media(max-width:380px){.type-icon,.type-icon svg,.type-icon img{height:78px;}} .type-banner{display:flex;gap:10px;border-left:3px solid var(--accent);background:var(--magenta-soft);border-radius:0 10px 10px 0;padding:12px 14px;margin-top:12px;font-size:15.5px;color:var(--body);} .type-banner-icon{display:none;} .type-banner-text{flex:1;min-width:0;} /* phase toggle + generic section headers/toggles used on calculator.html */ .phase-toggle{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;margin:20px 0;background:var(--metal-face-2);} .phase-btn{flex:1;min-width:0;border:none;background:transparent;font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px;min-height:48px;cursor:pointer;transition:background .18s,color .18s;} .phase-btn.active{background:var(--accent);color:#fff;font-weight:600;} .sec{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:15.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line-soft);} .toggle-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:6px;} .tg{display:flex;flex-direction:column;gap:6px;min-width:0;} .tg-label{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .tg-btns{display:flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;background:var(--metal-face-2);} .tg-btn{border:none;background:transparent;font-family:var(--mono);font-size:14px;color:var(--muted);padding:0 15px;min-width:48px;min-height:44px;cursor:pointer;} .tg-btn.on{background:var(--accent);color:#fff;font-weight:600;} /* --------------------------------------------------------------------------- 11. NEXT-TOOL / GUIDE CARDS --------------------------------------------------------------------------- */ .next-tool{display:block;position:relative;min-width:0;border-left:4px solid var(--accent);padding:18px 20px;margin:30px auto 0;text-decoration:none;overflow:hidden;border-radius:12px; background:var(--metal-face);border:1px solid var(--panel-border);border-left:4px solid var(--accent);box-shadow:var(--panel-shadow);transition:transform .15s,box-shadow .15s;} .next-tool:hover{transform:translateY(-2px);} .nt-icons{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:11px;color:var(--accent);opacity:.85;} .nt-icons svg{height:25px;width:auto;} .nt-eyebrow{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:5px;} .nt-title{display:block;font-family:var(--disp);font-weight:700;font-size:25px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin-bottom:5px;line-height:1.02;} .nt-sub{display:block;font-size:15px;color:var(--body);line-height:1.55;} .guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px;} @media(max-width:640px){.guides{grid-template-columns:minmax(0,1fr);}} .gcard{display:block;min-width:0;border-left:4px solid var(--accent);border-radius:12px;padding:17px 18px;text-decoration:none;transition:box-shadow .16s,transform .12s,border-color .16s; background:var(--metal-face);border:1px solid var(--panel-border);border-left:4px solid var(--accent);box-shadow:var(--panel-shadow);} .gcard:hover{transform:translateY(-2px);} .gcard .g-k{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;} .gcard .g-t{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:21px;letter-spacing:.03em;color:var(--ink);margin:5px 0;line-height:1.05;overflow-wrap:break-word;} .gcard .g-t::after{content:'\00a0\2192';color:var(--accent);} .gcard .g-d{display:block;font-size:14px;color:var(--body);line-height:1.5;} /* --------------------------------------------------------------------------- 12. PROSE --------------------------------------------------------------------------- */ main.page,.page{max-width:840px;margin:0 auto;padding:32px 22px 0;min-width:0;} .prose{margin-top:52px;min-width:0;} h2{font-family:var(--disp);font-weight:700;font-size:var(--fs-h2);letter-spacing:.01em;color:var(--ink);text-transform:uppercase;line-height:1;text-wrap:balance;margin:0 0 14px;padding-top:8px;} h3{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:24px 0 8px;overflow-wrap:break-word;} h4{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px;overflow-wrap:break-word;} .prose section{margin-bottom:44px;} .prose section>.sec-no{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--accent);font-weight:700;margin-bottom:9px;} .prose section>.sec-no::before{content:'';width:16px;height:9px;flex:none;border:1px solid var(--accent);border-right:none;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 50%,transparent) 0 1px,transparent 1px 5px);opacity:.65;} .prose p,p{margin-bottom:14px;max-width:66ch;overflow-wrap:break-word;} .prose strong,strong{color:var(--ink);font-weight:700;} .prose a,a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);overflow-wrap:break-word;} .prose a:hover,a:hover{text-decoration-color:var(--accent);} .prose em,em{font-style:italic;} .callout{position:relative;border:1px solid var(--panel-border);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:16px 18px 16px 20px;margin:20px 0;font-size:16px;color:var(--body);max-width:66ch;background:var(--metal-face);box-shadow:var(--panel-shadow);} .callout::before{content:'FORMULA';position:absolute;top:-9px;left:16px;background:var(--panel-2);color:var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.16em;font-weight:700;padding:0 7px;border-radius:3px;} .callout strong{color:var(--ink);font-family:var(--mono);font-size:15px;letter-spacing:.02em;} /* --------------------------------------------------------------------------- 13. TABLES (scroll inside their own overflow-x container) --------------------------------------------------------------------------- */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:16px 0 18px;} .ex-table,.qref{width:100%;border-collapse:collapse;} .ex-table{font-size:15.5px;} .qref{margin:6px 0 14px;font-size:15px;} .ex-table th,.qref th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;padding:9px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;} .ex-table td,.qref td{padding:10px 12px;border-bottom:1px solid var(--line-soft);color:var(--body);} .qref td{white-space:nowrap;} .ex-table td.mono,.qref td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;} .ex-table tr:last-child td,.qref tr:last-child td{border-bottom:none;} .ex-table tr:last-child{background:var(--magenta-soft);} .band-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle;} .band-dot.d-ok{background:var(--ok-fg);}.band-dot.d-warn{background:var(--warn-bg);}.band-dot.d-high{background:var(--danger);} .qref-note,.updated{font-size:14px;color:var(--muted);max-width:66ch;} /* --------------------------------------------------------------------------- 14. STEPS --------------------------------------------------------------------------- */ .steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 6px;counter-reset:step;} @media(max-width:640px){.steps{grid-template-columns:minmax(0,1fr);}} .steps li{position:relative;min-width:0;counter-increment:step;border-radius:11px;padding:16px;scroll-margin-top:80px; background:var(--metal-face);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);} .steps li::before{content:counter(step,decimal-leading-zero) ' /';display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent);margin-bottom:6px;} .steps li h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin:0 0 5px;} .steps li p{font-size:14.5px;color:var(--body);margin:0 0 12px;max-width:none;line-height:1.55;} .steps li .fx{display:block;font-family:var(--mono);font-size:12.5px;color:var(--accent);background:var(--magenta-soft);border-radius:7px;padding:8px 10px;letter-spacing:.02em;word-break:break-word;} /* --------------------------------------------------------------------------- 15. GLOSSARY --------------------------------------------------------------------------- */ .gloss{display:grid;gap:0;margin:8px 0 4px;border:1px solid var(--panel-border);border-radius:11px;overflow:hidden;box-shadow:var(--panel-shadow);} .gloss .gterm{padding:16px 18px;border-bottom:1px solid var(--line-soft);background:var(--metal-face);scroll-margin-top:80px;min-width:0;} .gloss .gterm:last-child{border-bottom:none;} .gloss dt{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin-bottom:4px;} .gloss dd{font-size:15px;color:var(--body);max-width:70ch;margin:0;line-height:1.55;overflow-wrap:break-word;} .gloss dd .mono{font-family:var(--mono);font-size:13.5px;color:var(--ink);} .gloss dd a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;font-weight:600;font-family:var(--mono);font-size:13px;} /* --------------------------------------------------------------------------- 16. FAQ (details/summary) --------------------------------------------------------------------------- */ .faq{margin-bottom:10px;overflow:hidden;transition:border-color .15s;border-radius:11px; background:var(--metal-face);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);} .faq[open]{border-color:var(--accent);} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-family:var(--sans);font-weight:700;color:var(--ink);font-size:16.5px;min-height:52px;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:'+';font-family:var(--mono);font-size:22px;color:var(--accent);flex-shrink:0;transition:transform .2s;} .faq[open] summary::after{content:'\2212';} .faq .faq-a{padding:0 18px 16px;font-size:15.5px;color:var(--body);max-width:66ch;overflow-wrap:break-word;} /* --------------------------------------------------------------------------- 17. SHARE BAR --------------------------------------------------------------------------- */ .sbn{margin:48px auto 0;min-width:0;padding:16px 18px 18px;border-radius:14px; background: var(--rivet) left 11px top 11px/15px 15px no-repeat, var(--rivet) right 11px top 11px/15px 15px no-repeat, var(--rivet) left 11px bottom 11px/15px 15px no-repeat, var(--rivet) right 11px bottom 11px/15px 15px no-repeat, var(--metal-face); border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);} .sbn-lbl{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:700;margin:0 0 12px;} .sbn-btns{display:flex;gap:7px;flex-wrap:wrap;} .sbn-c{width:44px;height:44px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;color:#fff;text-decoration:none;transition:filter .15s,transform .1s;} .sbn-c:hover{filter:brightness(1.1);}.sbn-c:active{transform:scale(.95);} .sbn-c svg{width:19px;height:19px;fill:currentColor;} .c-share{background:var(--accent);} .c-copy{background:var(--panel-3);color:var(--ink);border:1px solid var(--panel-border);} .c-copy.copied{background:var(--ok-fg);color:#fff;border-color:var(--ok-fg);} .c-copy.copied .ic-copy{display:none;} .c-copy.copied .ic-check{display:inline-block!important;} .c-fb{background:#1877f2;}.c-x{background:var(--ink);color:var(--paper);}.c-li{background:#0a66c2;}.c-wa{background:#25d366;}.c-em{background:var(--sky);} /* --------------------------------------------------------------------------- 18. BREADCRUMB / ON-THIS-PAGE --------------------------------------------------------------------------- */ .bc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:22px 0 0;} .bc a{color:var(--accent);text-decoration:none;font-weight:600;} .bc a:hover{text-decoration:underline;text-underline-offset:3px;} .bc .sep{color:var(--line);} .bc [aria-current="page"]{color:var(--body);font-weight:600;} .otp{margin:16px 0 2px;border:1px solid var(--panel-border);border-radius:11px;background:var(--metal-face);box-shadow:var(--panel-shadow);min-width:0;} .otp-in{display:flex;align-items:center;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 12px;min-width:0;} .otp-in::-webkit-scrollbar{display:none;} .otp-lbl{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;white-space:nowrap;padding-right:8px;flex:none;} .otp-in a{font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--body);text-decoration:none;padding:12px 11px;white-space:nowrap;border-bottom:2px solid transparent;flex:none;font-weight:500;} .otp-in a:hover{color:var(--accent);border-bottom-color:var(--accent);} /* --------------------------------------------------------------------------- 19. SETUP CONTROLS (calculator.html) --------------------------------------------------------------------------- */ .setup-btn,.setup-sel{font-family:var(--mono);font-size:13px;border:1.5px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);min-height:44px;padding:0 14px;cursor:pointer;} .setup-btn:hover{border-color:var(--accent);color:var(--accent);} /* --------------------------------------------------------------------------- 20. STICKY MOBILE ANNUNCIATOR --------------------------------------------------------------------------- */ .stick{display:none;} @media(max-width:820px){ .stick{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);border-top:1.5px solid var(--accent);padding:10px 18px calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;transform:translateY(120%);transition:transform .28s cubic-bezier(.22,.61,.36,1);} .stick.show{transform:translateY(0);} .stick .s-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;} .stick .s-val{font-family:var(--mono);font-size:27px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.05;} .stick .s-flag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;padding:8px 12px;border-radius:8px;} .stick .s-flag.ok{color:var(--ok-fg);background:var(--ok-bg);} .stick .s-flag.warn{color:var(--warn-fg);background:var(--warn-bg);} .stick .s-flag.high{color:var(--high-fg);background:var(--high-bg);} .stick .s-flag.high{animation:lamp 1.25s ease-in-out infinite;} .content{padding-bottom:96px;} } /* --------------------------------------------------------------------------- 21. ADS --------------------------------------------------------------------------- */ .ad-slot{display:none;margin:30px auto 4px;} .ad-slot.ad-live{display:block;} .ad-label,.ad-slot-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;text-align:center;font-weight:600;} .ad-box{background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:8px;} /* --------------------------------------------------------------------------- 22. FOOTER --------------------------------------------------------------------------- */ footer{border-top:1px solid var(--panel-border);background:var(--metal-face-2);margin-top:64px;} .foot-inner{max-width:1160px;margin:0 auto;padding:40px 22px 22px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;min-width:0;} @media(max-width:700px){.foot-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}} .foot-col{min-width:0;} .foot-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px;} .foot-col h4.foot-brand{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);flex-wrap:wrap;} .foot-col h4.foot-brand .mark{width:22px;height:22px;color:var(--accent);} .foot-col h4.foot-brand .fb-mid,.foot-col h4.foot-brand span{color:var(--accent);} .foot-col p,.foot-col a{font-size:14.5px;color:var(--body);text-decoration:none;display:block;line-height:1.95;overflow-wrap:break-word;} .foot-col a:hover{color:var(--accent);} .foot-bottom{max-width:1160px;margin:0 auto;padding:16px 22px 30px;border-top:1px solid var(--line-soft);} .foot-bottom p{font-family:var(--mono);font-size:12.5px;color:var(--muted);line-height:1.85;max-width:90ch;} /* --------------------------------------------------------------------------- 23. UTILITY --------------------------------------------------------------------------- */ .skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:11px 18px;z-index:400;border-radius:0 0 9px 0;text-decoration:none;font-weight:600;} .skip:focus{left:0;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* --------------------------------------------------------------------------- 24. MOBILE HARDENING — no horizontal overflow at 360–390px --------------------------------------------------------------------------- */ @media (max-width:700px){ .hero-grid{grid-template-columns:minmax(0,1fr);} .hero-lead,.hero-tool,.calc,.calc-body,.field,.in-wrap,.apt,.apt-row,.otp-in, .foot-inner,.foot-col,.nav-inner,.content,main,.type-selector,.type-grid, .signature,.gauge-panel,.readout,.prose,.sbn{min-width:0;} .in-wrap input,.apt-row input{min-width:0;} .apt-row{flex-wrap:wrap;} .rail{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .rail dt{white-space:normal;} .readout{max-width:100%;} h1,h2,h3,h4,p,li,dd,a,.lede,.subtitle{overflow-wrap:break-word;} .nav-inner{gap:10px;padding:0 14px;} .nav-logo{font-size:16px;} } @media (max-width:460px){ .rail{grid-template-columns:minmax(0,1fr);} /* single column: every row uniform — first cell clears the header banner, the rest share equal top/bottom padding, dividers between all but the last */ .rail div{padding:12px 14px;border-right:none;border-bottom:1px solid var(--line-soft);} .rail div:first-child{padding-top:34px;} .rail div:last-child{border-bottom:none;} .theme-tg-txt{display:none;} .theme-tg{padding:0 9px;min-width:44px;justify-content:center;} .nav-inner{gap:6px;padding:0 10px;} .nav-logo{font-size:15px;letter-spacing:.04em;gap:6px;} .nav-logo .mark{width:20px;height:20px;flex-shrink:0;} } @media (max-width:560px){h1,h2,h3{overflow-wrap:break-word;}} .hero-lead h1,.hero h1{overflow-wrap:normal;} /* hero headline sized to fit its column (prevents "CALCULATOR" clipping) */ .hero-lead h1{font-size:clamp(38px,5.4vw,62px);} /* calculator-first: on single-column widths the tool leads, marketing text follows */ @media (max-width:999px){.hero-tool{order:-1;}} /* calculator.html input groups (.input-wrap + .unit) — match the .in-wrap treatment so inputs are full-width, tall, and readable on mobile */ .input-wrap{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:9px;background:var(--panel-3);overflow:hidden;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 2px 5px rgba(60,72,84,.12);min-width:0;width:100%;} .input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--magenta-soft);} .input-wrap input{flex:1 1 auto;min-width:0;width:100%;border:none;outline:none;background:transparent;font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);padding:12px 14px;min-height:48px;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;margin:0;} .input-wrap input::placeholder{color:var(--muted);font-weight:400;opacity:.7;} .input-wrap input::-webkit-outer-spin-button,.input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .input-wrap .unit{display:flex;align-items:center;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted);background:var(--panel-2);border-left:1.5px solid var(--line);padding:0 14px;font-weight:600;white-space:nowrap;flex:0 0 auto;} /* --- share block: inline label + tidy single row (no stacked/orphaned icons) --- */ .sbn{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .sbn-lbl{margin:0;white-space:nowrap;flex:0 0 auto;} .sbn-btns{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;} .sbn-c{width:40px;height:40px;} .sbn-c svg{width:18px;height:18px;} /* --- pressure-altitude calculator inputs (.pa-inwrap / .pa-unit-btns / .pa-ub) — match the homepage .in-wrap/.unit-tg so the unit sits inline, not stacked below --- */ .pa-field{min-width:0;margin-bottom:14px;} .pa-field label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px;} .pa-inwrap{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:9px;background:var(--panel-3);overflow:hidden;box-shadow:inset 0 2px 5px rgba(60,72,84,.12);min-width:0;width:100%;transition:border-color .15s,box-shadow .15s;} .pa-inwrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--magenta-soft);} .pa-inwrap input{flex:1 1 auto;min-width:0;width:100%;border:none;outline:none;background:transparent;font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);padding:12px 14px;min-height:48px;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;margin:0;} .pa-inwrap input::placeholder{color:var(--muted);font-weight:400;opacity:.7;} .pa-inwrap input::-webkit-outer-spin-button,.pa-inwrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .pa-unit-btns{display:flex;flex:0 0 auto;border-left:1.5px solid var(--line);} .pa-ub{border:none;background:var(--panel-2);font-family:var(--mono);font-size:13px;color:var(--muted);padding:0 14px;min-width:48px;min-height:48px;cursor:pointer;font-weight:600;transition:background .12s,color .12s;} .pa-ub+.pa-ub{border-left:1px solid var(--line);} .pa-ub:hover:not(:disabled){color:var(--ink);} .pa-ub.on{background:var(--accent);color:#fff;} .pa-ub:disabled{cursor:default;} /* ============================================================ Aircraft discoverability (homepage) + enhanced airport quick-fill (DA & PA) + "breathe" cue for Get Weather. ============================================================ */ /* Option A — compact "next step" CTA (inside .content column) */ .accta{margin:24px 0 4px;} .accta a{display:flex;align-items:flex-start;gap:18px;text-decoration:none;border:1.5px solid var(--line);border-radius:16px;background:var(--panel);padding:18px 22px;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.5) inset;transition:border-color .14s,transform .14s;} .accta a:hover{border-color:var(--accent);transform:translateY(-2px);} .accta .cta-badge{flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;} .accta .cta-badge svg{width:32px;height:32px;} .accta .cta-tx{flex:1 1 auto;min-width:0;} .accta .cta-eyebrow{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;} .accta .cta-t{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(18px,2.4vw,22px);color:var(--ink);margin:2px 0 3px;letter-spacing:-.01em;line-height:1.15;} .accta .cta-s{display:block;font-size:14px;color:var(--muted);margin:0;line-height:1.45;} .accta .cta-arrow{flex:0 0 auto;align-self:center;font-size:26px;color:var(--accent);font-weight:700;} @media(max-width:520px){.accta a{gap:14px;padding:16px 18px;}.accta .cta-arrow{display:none;}} /* Option B — aircraft picker band */ .acband{margin:30px 0 4px;} .acpanel{position:relative;border:1.5px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 40px -28px rgba(40,52,64,.5);} .acpanel-skin{position:absolute;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(100deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(60,72,84,.05) 62%,rgba(255,255,255,.28));} .acpad{position:relative;padding:clamp(20px,3.4vw,30px);} .ac-eyebrow{display:block;font-family:var(--mono);font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;} .ac-h{font-family:var(--disp);font-size:clamp(22px,3.4vw,30px);line-height:1.02;margin:7px 0 6px;color:var(--ink);letter-spacing:.01em;} .ac-sub{font-size:15px;line-height:1.5;color:var(--muted);max-width:60ch;margin:0 0 18px;} .acgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;} @media(max-width:720px){.acgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}} @media(max-width:380px){.acgrid{grid-template-columns:repeat(2,minmax(0,1fr));}} .actile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-decoration:none;padding:16px 8px 13px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel-3);color:var(--ink);box-shadow:inset 0 2px 5px rgba(60,72,84,.10);transition:border-color .14s,transform .14s,box-shadow .14s,color .14s;min-width:0;} .actile:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(40,52,64,.7);} .actile .ico{display:flex;align-items:center;justify-content:center;width:100%;height:40px;color:var(--ink);} .actile:hover .ico{color:var(--accent);} .actile .ico svg{width:auto;height:100%;max-width:100%;fill:currentColor;display:block;} .actile .nm{font-family:var(--mono);font-size:15px;letter-spacing:.03em;font-weight:700;text-transform:uppercase;color:var(--ink);} .actile:hover .nm{color:var(--accent);} /* Enhanced airport quick-fill (Nearest primary + manual entry) */ .apt-enh .apt-actions{display:flex;flex-direction:column;gap:13px;margin-top:2px;} .apt-near.apt-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;border:none;font-size:15px;min-height:54px;letter-spacing:.04em;} .apt-near.apt-primary svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto;} .apt-or{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .apt-or::before,.apt-or::after{content:"";flex:1;height:1px;background:var(--line);} .apt-row2{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap;} .apt-row2 .apt-in{flex:1 1 auto;} .apt-row2 .apt-go{flex:0 0 auto;} /* "breathe" cue for the Get Weather button (toggled by the existing airport state machine) */ @keyframes breathe-btn{0%,100%{transform:scale(1);box-shadow:0 2px 9px -3px color-mix(in srgb,var(--accent) 30%,transparent);}50%{transform:scale(1.055);box-shadow:0 7px 24px 2px color-mix(in srgb,var(--accent) 60%,transparent);}} .apt-btn.breathe-btn{animation:breathe-btn 1.85s ease-in-out infinite;will-change:transform,box-shadow;} @media(prefers-reduced-motion:reduce){.apt-btn.breathe-btn{animation:none;}} /* ============================================================ QA pass — styles the redesign left uncovered: error pages (404/403) and several calculator controls. ============================================================ */ /* ---------- error pages: 404 / 403 ---------- */ .err-stage{position:relative;padding:40px 22px 60px;} .err-neat{display:none;} .err-wrap{position:relative;z-index:1;width:100%;max-width:640px;margin:0 auto;} .err-panel{border:1.5px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 40px -28px rgba(40,52,64,.5);} .err-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--panel-2);border-bottom:1px solid var(--line-soft);} .err-head .tag,.err-head .stamp{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;} .err-body{padding:clamp(22px,5vw,36px);} .err-code{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;} .err-num{font-family:var(--disp);font-weight:700;font-size:clamp(40px,11vw,64px);line-height:1;color:var(--ink);letter-spacing:.02em;} .err-flag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;} .err-flag.warn{background:var(--warn-bg);color:var(--warn-fg);} .err-flag.stop{background:var(--high-bg);color:var(--high-fg);} .err-body h1{margin:4px 0 12px;} .err-sub{font-size:16px;line-height:1.6;color:var(--body);margin:0 0 22px;} .cta-row{display:flex;flex-wrap:wrap;gap:12px;} .cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:0 20px;min-height:52px;border-radius:11px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);transition:filter .15s,transform .1s;} .cta:hover{filter:brightness(1.06);} .cta:active{transform:scale(.98);} .cta.ghost{background:var(--panel);color:var(--accent);} .cta svg{width:20px;height:20px;flex:0 0 auto;} .err-links{border-top:1px solid var(--line-soft);padding:clamp(18px,4vw,24px) clamp(22px,5vw,36px);background:var(--panel-2);} .err-links .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px;} .err-links .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 20px;} .err-links .grid a{font-family:var(--sans);font-size:15px;color:var(--body);text-decoration:none;padding:5px 0;} .err-links .grid a:hover{color:var(--accent);} @media(max-width:520px){.cta{width:100%;}.err-links .grid{grid-template-columns:minmax(0,1fr);}} /* ---------- calculator: CALCULATE PERFORMANCE primary button ---------- */ .calc-btn{display:block;width:100%;box-sizing:border-box;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);border:1.5px solid var(--accent);border-radius:12px;min-height:56px;padding:0 20px;margin:18px 0 6px;cursor:pointer;transition:filter .15s,transform .1s;box-shadow:0 10px 24px -14px var(--accent);} .calc-btn:hover{filter:brightness(1.06);} .calc-btn:active{transform:scale(.99);} .calc-btn.loading{opacity:.7;cursor:default;} /* ---------- calculator: runway-condition select ---------- */ .rwy-select{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);background-color:var(--panel-3);border:1.5px solid var(--line);border-radius:9px;min-height:48px;padding:0 40px 0 14px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23557788' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;} .rwy-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--magenta-soft);} /* ---------- calculator: setups bar ---------- */ .setup-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px;} .setup-bar-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;} .setup-btn{display:inline-flex;align-items:center;gap:8px;} .setup-btn svg{width:17px;height:17px;flex:0 0 auto;} .setup-sel{flex:1 1 auto;min-width:150px;box-sizing:border-box;-webkit-appearance:none;appearance:none;padding-right:34px;background-color:var(--panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23557788' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;} .setup-del{border:1.5px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);min-height:44px;min-width:44px;font-size:20px;line-height:1;cursor:pointer;} .setup-del:hover{border-color:var(--danger);color:var(--danger);} /* ---------- calculator: humidity slider ---------- */ .hum-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;} .hum-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;} .hum-readout{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;} .hum-slider-wrap{display:flex;align-items:center;gap:12px;} .hum-tick-label{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto;} .hum-track-wrap{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;height:44px;} .hum-track-wrap::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:5px;background:var(--line);} .hum-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:6px;border-radius:5px;background:var(--accent);pointer-events:none;} .hum-track-wrap input[type=range]{position:relative;z-index:1;width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:44px;margin:0;cursor:pointer;} .hum-track-wrap input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent;} .hum-track-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--panel);border:2.5px solid var(--accent);cursor:pointer;margin-top:-8px;box-shadow:var(--shadow);} .hum-track-wrap input[type=range]::-moz-range-track{height:6px;background:transparent;} .hum-track-wrap input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--panel);border:2.5px solid var(--accent);cursor:pointer;} .hum-note{font-size:13px;line-height:1.5;color:var(--muted);margin-top:10px;} /* ============================================================ Real photographed aircraft-skin background (replaces the procedural body::before texture above) + article reading panel. ============================================================ */ body::before{ background:#dfe3e5 url(skin/skin-light.jpg) center top / cover no-repeat; box-shadow:inset 0 0 200px rgba(30,36,40,.22); } :root[data-theme="dark"] body::before{ background:#0c1116 url(skin/skin-dark.jpg) center top / cover no-repeat; box-shadow:inset 0 0 240px rgba(0,0,0,.5); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::before{ background:#0c1116 url(skin/skin-dark.jpg) center top / cover no-repeat; box-shadow:inset 0 0 240px rgba(0,0,0,.5); } } /* article text floats on a translucent brushed reading panel; the skin frames it in the page gutters so there's no reading conflict */ main.content,main.page,.page{ background:rgba(238,241,243,.94); border:1px solid rgba(255,255,255,.5); border-radius:20px; box-shadow:0 30px 80px -46px rgba(20,30,40,.55); margin-top:10px;margin-bottom:44px; backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); } main.content{padding-top:8px;} :root[data-theme="dark"] main.content,:root[data-theme="dark"] main.page,:root[data-theme="dark"] .page{ background:rgba(14,20,25,.88); border-color:rgba(255,255,255,.06); } /* calculator's bottom explainer prose gets the same reading panel */ .seo-sec{ background:rgba(238,241,243,.94); border:1px solid rgba(255,255,255,.5); border-radius:20px; box-shadow:0 30px 80px -46px rgba(20,30,40,.55); padding:26px 26px;margin-bottom:30px; backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); } :root[data-theme="dark"] .seo-sec{background:rgba(14,20,25,.88);border-color:rgba(255,255,255,.06);} /* ============================================================ Downloads page — kneeboard card grid + tool cards ============================================================ */ .dl-intro{font-size:15.5px;color:var(--body);line-height:1.55;margin:2px 0 6px;max-width:64ch;} .dl-h2{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3vw,26px);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:26px 0 4px;} .dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:14px 0 6px;} @media(max-width:640px){.dl-grid{grid-template-columns:minmax(0,1fr);}} .dl-card{display:flex;flex-direction:column;text-decoration:none;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;transition:border-color .14s,transform .14s,box-shadow .14s;} .dl-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(20,30,40,.6);} .dl-thumb{background:var(--panel-3);border-bottom:1px solid var(--line);padding:18px 18px 0;display:flex;justify-content:center;} .dl-thumb img{width:100%;max-width:216px;height:auto;border:1px solid var(--line);border-bottom:none;border-radius:5px 5px 0 0;box-shadow:0 10px 26px -14px rgba(20,30,40,.55);display:block;} .dl-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;} .dl-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;} .dl-body h3{font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:6px 0 6px;line-height:1.06;} .dl-body p{font-size:14px;color:var(--body);line-height:1.45;margin:0 0 15px;flex:1;} .dl-btn{align-self:flex-start;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:8px;padding:11px 17px;display:inline-flex;align-items:center;gap:8px;} .dl-card:hover .dl-btn{filter:brightness(1.07);} .dl-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:14px 0 6px;} @media(max-width:640px){.dl-tools{grid-template-columns:minmax(0,1fr);}} .dl-tool{border:1.5px solid var(--line);border-radius:14px;background:var(--panel);padding:22px 22px 24px;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;} .dl-tool .ic{width:46px;height:46px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;} .dl-tool .ic svg{width:26px;height:26px;fill:currentColor;} .dl-tool h3{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;color:var(--ink);margin:12px 0 6px;} .dl-tool p{font-size:14.5px;color:var(--body);line-height:1.5;margin:0 0 16px;flex:1;} .dl-tool p b{color:var(--ink);} .dl-btn2{align-self:flex-start;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1.5px solid var(--accent);border-radius:8px;padding:10px 16px;text-decoration:none;transition:background .14s,color .14s;} .dl-btn2:hover{background:var(--accent);color:#fff;} .dl-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5;} /* ============================================================ METAR decoder tool ============================================================ */ .metar-tool{border:1.5px solid var(--line);border-radius:18px;background:var(--panel);padding:clamp(18px,4.5vw,26px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 20px 44px -32px rgba(20,30,40,.5);margin:22px 0 16px;} /* camera-first primary action */ .metar-scan{width:100%;display:flex;align-items:center;justify-content:center;gap:13px;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:20px 22px;font-family:var(--sans);font-weight:700;font-size:clamp(17px,4.4vw,19px);cursor:pointer;min-height:66px;box-shadow:0 12px 26px -12px var(--accent);transition:filter .14s,transform .1s;} .metar-scan:hover{filter:brightness(1.05);} .metar-scan:active{transform:scale(.99);} .metar-scan svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;} .metar-scan-hint{text-align:center;font-size:13.5px;color:var(--muted);margin:11px 4px 0;line-height:1.45;} .metar-or{display:flex;align-items:center;gap:14px;margin:22px 0 15px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .metar-or::before,.metar-or::after{content:"";flex:1;height:1px;background:var(--line);} .metar-in{width:100%;min-height:74px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel-3);color:var(--ink);font-family:var(--mono);font-size:16.5px;line-height:1.5;padding:14px 16px;resize:vertical;box-shadow:inset 0 2px 5px rgba(60,72,84,.12);letter-spacing:.03em;text-transform:uppercase;} .metar-in::placeholder{color:var(--muted);opacity:.65;text-transform:none;letter-spacing:0;font-size:14.5px;} .metar-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--magenta-soft);} .metar-row{display:flex;gap:14px;align-items:center;margin-top:13px;flex-wrap:wrap;} .metar-decode{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:15px 32px;font-family:var(--sans);font-weight:700;font-size:16px;min-height:54px;cursor:pointer;transition:filter .12s,transform .1s;} .metar-decode:hover{filter:brightness(1.05);} .metar-decode:active{transform:scale(.99);} .metar-link{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:14.5px;cursor:pointer;padding:8px 4px;text-decoration:underline;text-underline-offset:3px;} .metar-link:hover{color:var(--accent);} .metar-status{font-size:14px;color:var(--muted);margin-top:14px;min-height:1.1em;line-height:1.5;} .metar-status.err{color:var(--danger);font-weight:600;} /* results */ .metar-out:empty{display:none;} .metar-out{margin-top:4px;} .md-card{border:1.5px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;margin-top:20px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 40px -30px rgba(20,30,40,.5);} .md-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:16px 20px;background:var(--panel-2);border-bottom:1px solid var(--line);} .md-head .kk{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:2px;} .md-head .st{font-family:var(--disp);font-weight:700;font-size:clamp(20px,5vw,26px);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);line-height:1;} .md-head .tt{font-family:var(--mono);font-size:13.5px;color:var(--muted);} .md-rows{padding:2px 20px 12px;} .md-item{padding:13px 0;border-bottom:1px solid var(--line-soft);} .md-item:last-child{border-bottom:none;} .md-item .l{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px;} .md-item .v{display:block;font-size:17px;color:var(--ink);line-height:1.4;} .md-raw{margin:0 20px 18px;font-family:var(--mono);font-size:13px;color:var(--body);background:var(--panel-3);border:1px solid var(--line-soft);border-radius:9px;padding:11px 13px;word-break:break-word;line-height:1.55;} .md-raw b{color:var(--ink);} /* ============================================================ Hero reading panel (Option A) — the eyebrow/headline/lede/chips sit on a translucent card so body text is readable over the skin. ============================================================ */ .hero-lead{ background: var(--rivet) left 12px top 12px/16px 16px no-repeat, var(--rivet) right 12px top 12px/16px 16px no-repeat, var(--rivet) left 12px bottom 12px/16px 16px no-repeat, var(--rivet) right 12px bottom 12px/16px 16px no-repeat, rgba(240,243,245,.965); border:1px solid rgba(255,255,255,.7);border-radius:20px; padding:clamp(24px,5.5vw,32px) clamp(22px,5vw,30px); box-shadow:0 24px 54px -30px rgba(20,30,40,.65); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); } :root[data-theme="dark"] .hero-lead{ background: var(--rivet) left 12px top 12px/16px 16px no-repeat, var(--rivet) right 12px top 12px/16px 16px no-repeat, var(--rivet) left 12px bottom 12px/16px 16px no-repeat, var(--rivet) right 12px bottom 12px/16px 16px no-repeat, rgba(15,21,26,.93); border-color:rgba(255,255,255,.1); } /* ============================================================ METAR code reference (decoder page) — view codes on-page + download the print-ready PDF cheat sheet. ============================================================ */ .mref{margin:34px 0 6px;} .mref-h{font-family:var(--disp);font-weight:700;font-size:clamp(21px,4.5vw,27px);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0 0 8px;} .mref-lead{font-size:15px;color:var(--body);line-height:1.55;margin:0 0 18px;max-width:64ch;} .mref-dl{display:flex;gap:16px;align-items:center;text-decoration:none;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);padding:16px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;transition:border-color .14s,transform .14s,box-shadow .14s;} .mref-dl:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(20,30,40,.6);} .mref-dl-thumb{flex:none;} .mref-dl-thumb img{width:92px;height:auto;border:1px solid var(--line);border-radius:5px;box-shadow:0 8px 20px -12px rgba(20,30,40,.55);display:block;} .mref-dl-body{display:flex;flex-direction:column;gap:3px;min-width:0;} .mref-dl-tag{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700;} .mref-dl-title{font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;color:var(--ink);line-height:1.08;} .mref-dl-sub{font-size:13.5px;color:var(--body);line-height:1.4;margin-bottom:7px;} .mref-dl-btn{align-self:flex-start;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:8px;padding:9px 15px;display:inline-flex;align-items:center;gap:7px;} .mref-dl-btn svg{width:15px;height:15px;fill:currentColor;} .mref-dl:hover .mref-dl-btn{filter:brightness(1.07);} .mref-view{margin-top:16px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;} .mref-view>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);} .mref-view>summary::-webkit-details-marker{display:none;} .mref-view>summary::after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s;flex:none;margin-right:4px;} .mref-view[open]>summary::after{transform:rotate(-135deg);} .mref-view[open]>summary{border-bottom:1px solid var(--line);} .mref-inner{padding:18px;} .mref-anat{background:var(--panel-3);border:1px solid var(--line-soft);border-radius:10px;padding:13px 15px;margin-bottom:18px;} .mref-anat .ex{font-family:var(--mono);font-size:13.5px;color:var(--ink);line-height:1.85;word-break:break-word;} .mref-anat .ex b{color:var(--accent);} .mref-anat p{font-size:12.5px;color:var(--muted);margin:9px 0 0;line-height:1.5;} .mref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} @media(max-width:640px){.mref-grid{grid-template-columns:minmax(0,1fr);}} .mref-grp{border:1px solid var(--line-soft);border-radius:11px;background:var(--panel-3);padding:13px 15px;} .mref-grp h3{font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:0 0 7px;padding-bottom:7px;border-bottom:1px solid var(--line);} .mref-r{display:flex;gap:12px;padding:5px 0;font-size:13.5px;line-height:1.4;} .mref-r .c{flex:none;width:92px;font-family:var(--mono);color:var(--ink);font-weight:600;word-break:break-word;} .mref-r .d{color:var(--body);min-width:0;} .mref-gnote{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.45;} .mref-gnote b{color:var(--ink);}