/* Applications lab (applications.php). Scoped to .ap; loaded after shared styles. */
.ap{
  --ap-ink:#13284b;--ap-text:#33465f;--ap-muted:#617089;--ap-line:#e1e8f2;--ap-soft:#f4f7fc;--ap-blue:#2563eb;--ap-blue-soft:#eaf1ff;
  --ap-green:#14996b;--ap-amber:#b45309;--ap-red:#c2410c;
  width:min(1400px,100% - 64px);margin:0 auto;padding:20px 0 56px;color:var(--ap-text);font-size:16px;line-height:1.6;
}
.ap *,.ap *::before,.ap *::after{box-sizing:border-box}
.ap :where(h1,h2,h3,p,ul,ol){margin:0}
.ap :where(h1,h2,h3){color:var(--ap-ink);letter-spacing:-.02em;line-height:1.25}
.ap :where(a){text-decoration:none;color:inherit}
.ap :where(img){display:block;max-width:100%}
.ap :where(svg.lucide){width:16px;height:16px;flex:none}
.ap [hidden]{display:none!important}

.ap-crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:13px;color:var(--ap-muted);margin-bottom:18px}
.ap-crumbs a{color:var(--ap-blue)}
.ap-crumbs strong{color:var(--ap-ink);font-weight:600}

/* Hero */
.ap-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;margin-bottom:28px}
.ap-kicker{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ap-blue);margin-bottom:10px}
.ap-hero h1{font-size:clamp(32px,5vw,58px);line-height:1.08;margin-bottom:16px}
.ap-hero h1 span{color:var(--ap-blue);display:block}
.ap-hero-copy>p{font-size:17px;max-width:60ch;color:var(--ap-text)}
.ap-stats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.ap-stats li{display:flex;flex-direction:column;font-size:13px;color:var(--ap-muted)}
.ap-stats b{font-size:28px;color:var(--ap-ink);line-height:1.1}
.ap-hero-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ap-hero-mosaic img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:16px;box-shadow:0 10px 28px #13284b1f}
.ap-hero-mosaic img:nth-child(2){transform:translateY(18px)}
.ap-hero-mosaic img:nth-child(4){transform:translateY(18px)}

.ap-howto{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:8px 0 24px}
.ap-howto div{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--ap-line);border-radius:14px}
.ap-howto span{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--ap-blue);color:#fff;font-weight:700}
.ap-howto p{font-size:14px}
.ap-howto b{color:var(--ap-ink)}

/* Filter */
.ap-filter{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:4px 2px 10px;margin-bottom:12px}
.ap-filter button{flex:none;min-height:38px;padding:7px 14px;border-radius:999px;border:1px solid var(--ap-line);background:#fff;color:var(--ap-text);font:600 13px/1.2 inherit;cursor:pointer;white-space:nowrap}
.ap-filter button small{margin-left:4px;color:var(--ap-muted)}
.ap-filter button:hover{border-color:#b9cdf0}
.ap-filter button.is-active{background:var(--ap-ink);border-color:var(--ap-ink);color:#fff}
.ap-filter button.is-active small{color:#cbd5e1}

/* Cards */
.ap-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.ap-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--ap-line);border-radius:20px;overflow:hidden;box-shadow:0 6px 22px #1d35570c;scroll-margin-top:100px}
.ap-media{position:relative;aspect-ratio:16/8;overflow:hidden;background:#f1f5f9}
.ap-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-media img.is-drawing{object-fit:contain;background:#f8fafc}
.ap-field{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#ffffffef;color:var(--ap-ink);font-size:12px;font-weight:700;box-shadow:0 4px 12px #0f172a1f}
.ap-field svg.lucide{color:var(--ap-blue)}
.ap-no{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--ap-ink);color:#fff;font-size:13px;font-weight:700}
.ap-body{display:flex;flex-direction:column;gap:14px;padding:20px;flex:1}
.ap-body h2{font-size:22px}
.ap-problem{padding:14px 16px;border-radius:14px;background:#fff8eb;border:1px solid #f7e2bd;font-size:15px;color:#5b3a0e}
.ap-who{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ap-amber);margin-bottom:6px}
.ap-formula{min-height:46px;padding:8px 12px;border-radius:12px;background:var(--ap-blue-soft);color:var(--ap-ink);overflow-x:auto;overflow-y:hidden}
.ap-formula-toggle{border:1px solid #d6e3f5;border-radius:12px;background:#fbfdff;overflow:hidden}
.ap-formula-toggle summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 13px;cursor:pointer;list-style:none;color:var(--ap-blue);font-size:14px;font-weight:700}
.ap-formula-toggle summary::-webkit-details-marker{display:none}
.ap-formula-toggle summary:before{content:'+';display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#eaf1ff;font-size:17px;line-height:1}
.ap-formula-toggle[open] summary:before{content:'−'}
.ap-formula-toggle[open] .ap-formula{border-top:1px solid #d6e3f5;border-radius:0}
.ap-formula .math-block{display:block;text-align:center}
.ap-formula .katex-display{margin:0}
.ap-formula p{margin:0}
.ap-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.ap-inputs label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#536c8c;min-width:0}
.ap-inputs input{width:100%;min-width:0;min-height:42px;padding:8px 10px;border:1px solid #cbd9e9;border-radius:10px;background:#fff;font:600 15px/1.3 inherit;color:var(--ap-ink)}
.ap-inputs input:focus{outline:3px solid #93b4ff;outline-offset:1px;border-color:var(--ap-blue)}
.ap-inputs input[aria-invalid=true]{border-color:#dc2626;background:#fff7f6}
.ap-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px;border-radius:16px;background:var(--ap-soft);border:1px solid var(--ap-line)}
.ap-visual{min-width:0;background:#fff;border-radius:12px;border:1px solid var(--ap-line)}
.ap-svg{display:block;width:100%;height:auto;max-height:220px}
.ap-readout{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.ap-readout>span{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ap-muted)}
.ap-readout strong{font-size:20px;line-height:1.3;color:var(--ap-blue)}
.ap-verdict{font-size:14px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--ap-line)}
.ap-verdict[data-level=ok]{background:#ecfdf5;border-color:#bbf0d7;color:#0f6f4e}
.ap-verdict[data-level=warn]{background:#fff7e6;border-color:#f7dfb5;color:#8a4b06}
.ap-verdict[data-level=bad]{background:#fff1ef;border-color:#f6c9c0;color:#b42318}
.ap-steps{border:1px solid var(--ap-line);border-radius:12px;background:#fbfcfe}
.ap-steps summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:10px 14px;font-weight:700;font-size:14px;color:var(--ap-blue)}
.ap-steps-body{padding:0 14px 12px}
.ap-steps-body ol{padding-left:20px;display:grid;gap:6px;font-size:14px}
.ap-steps-body b{color:var(--ap-ink)}
.ap-challenge{display:flex;gap:8px;font-size:14px;color:var(--ap-text);padding:10px 12px;border-left:3px solid var(--ap-blue);background:#f8fbff;border-radius:0 10px 10px 0}
.ap-challenge svg.lucide{color:var(--ap-blue);margin-top:3px}
.ap-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 16px;border-radius:11px;border:1px solid var(--ap-line);background:#fff;color:var(--ap-ink);font:600 14px/1.2 inherit;cursor:pointer}
.ap-btn-primary{background:var(--ap-blue);border-color:var(--ap-blue);color:#fff}
.ap-link{font-size:14px;font-weight:700;color:var(--ap-blue);margin-left:auto}
.ap-note{margin-top:24px;padding:14px 18px;border-radius:14px;background:#fffbeb;border:1px solid #fde68a;font-size:13px;color:#6b4f12}

/* SVG palette */
.ap-t{font:700 12px 'Be Vietnam Pro',Arial,sans-serif;fill:#1e293b}
.ap-t-big{font:700 15px 'Be Vietnam Pro',Arial,sans-serif;fill:var(--ap-ink)}
.ap-fill-soft{fill:#e2e8f0;stroke:#94a3b8;stroke-width:1.5}
.ap-fill-a{fill:#93c5fd;stroke:#1d4ed8;stroke-width:1.5}
.ap-fill-b{fill:#60a5fa;stroke:#1d4ed8;stroke-width:1.5}
.ap-fill-ok{fill:#86efac;stroke:#15803d;stroke-width:2}
.ap-fill-warn{fill:#fcd34d;stroke:#b45309;stroke-width:2}
.ap-fill-bad{fill:#fca5a5;stroke:#b91c1c;stroke-width:2}
.ap-line{fill:none;stroke:#334155;stroke-width:2}
.ap-dash{stroke:#64748b;stroke-width:1.5;stroke-dasharray:5 4;fill:none}
.ap-track{fill:#e2e8f0}
.ap-bar{fill:#93c5fd}
.ap-bar-ok{fill:#34d399}
.ap-bar-bad{fill:#f87171}
.ap-tile-a{fill:#fde68a;stroke:#fff;stroke-width:.6}
.ap-tile-b{fill:#fcd9a0;stroke:#fff;stroke-width:.6}
.ap-sun{fill:#facc15}
.ap-panel{fill:#1e3a8a;stroke:#93c5fd;stroke-width:1}
.ap-roof{fill:#fb923c;stroke:#9a3412;stroke-width:2}
.ap-drop{stroke:#38bdf8;stroke-width:2;stroke-linecap:round}
.ap-water{fill:#38bdf8}
.ap-water-over{fill:#0ea5e9;stroke:#dc2626;stroke-width:2}
.ap-earth{fill:#3b82f6}
.ap-moon{fill:#cbd5e1}
.ap-signal{fill:#f59e0b}
.ap-wall{fill:#cbd5e1}
.ap-ladder-ok{stroke:#15803d;stroke-width:6;stroke-linecap:round}
.ap-ladder-bad{stroke:#dc2626;stroke-width:6;stroke-linecap:round}
.ap-shelf{fill:#fef3c7;stroke:#b45309;stroke-width:2}
.ap-screen{fill:#1e40af;stroke:#0f172a;stroke-width:3}
.ap-screen-bad{fill:#991b1b;stroke:#0f172a;stroke-width:3}
.ap-grid{stroke:#e2e8f0;stroke-width:1}
.ap-route{fill:none;stroke:#f97316;stroke-width:4}
.ap-air{stroke:#2563eb;stroke-width:4}
.ap-dot-a{fill:#16a34a}
.ap-dot-b{fill:#dc2626}
.ap-cup{fill:#e0f2fe;stroke:#0284c7;stroke-width:1.5}
.ap-quiz{margin:18px 0;padding:16px;border:1px solid #cbd5e1;border-radius:16px;background:#f8fafc}
.ap-quiz>strong{display:block;color:#17345e;margin-bottom:8px}
.ap-quiz-options{display:grid;gap:8px;margin:10px 0}
.ap-quiz-options label{display:flex;gap:8px;align-items:center;padding:9px 11px;border:1px solid #d8e1ee;border-radius:10px;background:#fff;cursor:pointer}
.ap-quiz-options label:has(input:checked){border-color:#2563eb;background:#eff6ff}
.ap-quiz-feedback{min-height:20px;margin:8px 0 0;font-weight:600}
.ap-quiz-feedback[data-level="ok"]{color:#16803c}.ap-quiz-feedback[data-level="bad"]{color:#b42318}.ap-quiz-feedback[data-level="warn"]{color:#9a6700}
.ap-quiz.is-complete{border-color:#86efac;background:#f0fdf4}

/* Responsive */
@media (min-width:640px){
  .ap-howto{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ap-stage{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
}
@media (min-width:1024px){
  .ap-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
  .ap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1600px){
  .ap{width:min(1640px,100% - 96px)}
  .ap-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ap-stage{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .ap{width:calc(100% - 32px);padding-top:14px;font-size:15px}
  .ap-body{padding:16px}
  .ap-hero-copy>p{font-size:16px}
  .ap-link{margin-left:0;width:100%}
  .ap-actions .ap-btn{flex:1 1 120px}
}
@media (max-width:359px){
  .ap{width:calc(100% - 24px)}
  .ap-inputs{grid-template-columns:minmax(0,1fr)}
  .ap-media{aspect-ratio:16/10}
}