/* Shared Food and Graphic Communication components: Learn cards, Labs hub, Revision (quizzes and flashcards).
   Themed with --x-* tokens so one set of rules serves both subjects. */
[data-fgx="fd"]{--x-ink:#25483f;--x-accent:#d86f4c;--x-accent2:#4f7b91;--x-line:#d9d0c2;--x-shadow:#d9d0c2;--x-paper:#f4efe3;--x-card:#fffdf8;--x-muted:#6d7873;--x-good:#2c8a5f;--x-bad:#c2453c;--x-hi:#eabf52;--x-display:"Libre Franklin",system-ui,sans-serif;--x-mono:"IBM Plex Mono",ui-monospace,monospace}
[data-fgx="gc"]{--x-ink:#172f46;--x-accent:#2b62d9;--x-accent2:#ef735a;--x-line:#d8d0c2;--x-shadow:#d9d0c2;--x-paper:#f3efe6;--x-card:#fffdf8;--x-muted:#6d7880;--x-good:#2c8a5f;--x-bad:#c2453c;--x-hi:#f3c84b;--x-display:"Libre Franklin",system-ui,sans-serif;--x-mono:"IBM Plex Mono",ui-monospace,monospace}
.fgx-btn{border:1px solid var(--x-line);background:#fff;color:var(--x-ink);border-radius:9px;padding:10px 13px;font:800 12px var(--x-display);box-shadow:2px 2px 0 var(--x-shadow);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.2}
.fgx-btn:hover{transform:translateY(-1px)}.fgx-btn:focus-visible,.fgx-card button:focus-visible,.fgx-opt:focus-visible{outline:3px solid var(--x-hi);outline-offset:2px}
.fgx-btn.primary{background:var(--x-ink);border-color:var(--x-ink);color:#fff}.fgx-btn.accent{background:var(--x-accent);border-color:var(--x-accent);color:#fff}.fgx-btn.hi{background:var(--x-hi);border-color:rgba(0,0,0,.18);color:#1c2430}
.fgx-btn[disabled]{opacity:.5;cursor:default;transform:none}
.fgx-mini{font:700 10px var(--x-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--x-accent)}

/* ---------- Learn cards ---------- */
.fgl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--x-line);border-radius:14px;overflow:hidden;box-shadow:6px 6px 0 var(--x-shadow);cursor:pointer;transition:transform .12s;min-width:0}
.fgl-card:hover{transform:translateY(-2px)}.fgl-card:focus-visible{outline:3px solid var(--x-hi);outline-offset:3px}
.fgl-img{position:relative;aspect-ratio:16/8.2;background:#d9d6cf;overflow:hidden}.fgl-img img{width:100%;height:100%;object-fit:cover;display:block}
.fgl-no{position:absolute;left:10px;top:10px;background:var(--x-ink);color:#fff;font:800 12px var(--x-mono);padding:5px 9px;border-radius:7px}
.fgl-done{position:absolute;right:10px;top:10px;background:var(--x-good);color:#fff;font:800 10px var(--x-mono);padding:5px 8px;border-radius:7px;letter-spacing:.05em}
.fgl-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}.fgl-ao{display:flex;gap:5px;flex-wrap:wrap}.fgl-ao span{font:700 10px var(--x-mono);border:1px solid var(--x-line);background:#f6f2e8;border-radius:999px;padding:3px 8px;color:var(--x-ink)}
.fgl-body h3{margin:0;font:900 19px/1.15 var(--x-display);color:var(--x-ink)}.fgl-body p{margin:0;color:var(--x-muted);font-size:13.5px;line-height:1.5}
.fgl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}.fgl-chips span{font:700 11px var(--x-display);background:#f1ede4;color:var(--x-ink);border-radius:999px;padding:4px 9px}
.fgl-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--x-line);margin-top:6px;padding-top:10px;font-size:12px;color:var(--x-muted)}.fgl-foot b{color:var(--x-accent);font:800 12px var(--x-display)}
.fgl-bar{height:5px;border-radius:5px;background:#ece6d8;overflow:hidden;width:90px;display:inline-block;vertical-align:middle;margin-right:7px}.fgl-bar i{display:block;height:100%;background:var(--x-good)}

/* ---------- Page hero used by Learn, Labs, Revision ---------- */
.fgx-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:end;margin:34px 0 24px}.fgx-hero h1{margin:6px 0 8px;font:900 clamp(32px,5vw,54px)/1.02 var(--x-display);color:var(--x-ink);letter-spacing:-.02em}
.fgx-hero p{margin:0;color:var(--x-muted);font-size:16px;line-height:1.55;max-width:60ch}.fgx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.fgx-stat{background:#fff;border:1px solid var(--x-line);border-radius:12px;padding:12px 14px;box-shadow:3px 3px 0 var(--x-shadow)}.fgx-stat b{display:block;font:900 26px var(--x-display);color:var(--x-ink)}.fgx-stat span{font-size:11.5px;color:var(--x-muted)}
.fgx-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- Labs hub ---------- */
.fgx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 22px}.fgx-steps div{background:#fff;border:1px solid var(--x-line);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.45;color:var(--x-muted)}.fgx-steps b{display:block;color:var(--x-ink);font:900 14px var(--x-display);margin-bottom:2px}.fgx-steps i{font:800 11px var(--x-mono);color:var(--x-accent);font-style:normal;display:block;margin-bottom:4px}
.fgx-labs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.fgx-lab{background:#fff;border:1px solid var(--x-line);border-radius:14px;overflow:hidden;box-shadow:6px 6px 0 var(--x-shadow);display:flex;flex-direction:column}
.fgx-lab .shot{aspect-ratio:16/7;background:#1d2630;overflow:hidden;position:relative}.fgx-lab .shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}.fgx-lab .shot em{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.94);color:var(--x-ink);font:800 10px var(--x-mono);padding:4px 8px;border-radius:6px;font-style:normal;letter-spacing:.05em}
.fgx-lab .in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}.fgx-lab h3{margin:0;font:900 19px var(--x-display);color:var(--x-ink)}.fgx-lab p{margin:0;color:var(--x-muted);font-size:13.5px;line-height:1.5}
.fgx-lab dl{margin:0;display:grid;gap:6px;font-size:12.5px;line-height:1.45}.fgx-lab dt{font:800 10px var(--x-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--x-accent)}.fgx-lab dd{margin:0;color:var(--x-ink)}
.fgx-lab .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}

/* ---------- Revision ---------- */
.fgr-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 4px}.fgr-note{font:700 11px var(--x-mono);letter-spacing:.06em;color:var(--x-muted);margin-left:auto;text-transform:uppercase}
.fgr-group{margin:26px 0 8px}.fgr-group h2{margin:0;padding-left:12px;border-left:4px solid var(--x-accent);font:900 22px var(--x-display);color:var(--x-ink)}.fgr-group p{margin:4px 0 12px 16px;color:var(--x-muted);font-size:14px}
.fgr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.fgr-card{background:#fff;border:1px solid var(--x-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;box-shadow:3px 3px 0 var(--x-shadow)}
.fgr-card .no{font:700 10px var(--x-mono);letter-spacing:.08em;color:var(--x-muted)}.fgr-card h3{margin:0;font:900 16px/1.2 var(--x-display);color:var(--x-ink);min-height:38px}.fgr-card .meter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--x-muted)}.fgr-card .meter .fgl-bar{flex:1;width:auto}
.fgr-card .meter b{font:800 12px var(--x-mono);color:var(--x-ink)}.fgr-card.pass{border-color:var(--x-good)}.fgr-card.pass .no:after{content:" · PASSED";color:var(--x-good);font-weight:800}
.fgr-card .btns{display:flex;gap:6px;flex-wrap:wrap}.fgr-card .btns .fgx-btn{padding:8px 10px;font-size:11.5px}

/* overlay (quiz and flashcards) */
.fgo{position:fixed;inset:0;z-index:9000;background:rgba(15,22,30,.62);display:flex;align-items:flex-start;justify-content:center;padding:4vh 14px;overflow:auto}
.fgo-box{background:var(--x-paper);border:1px solid var(--x-line);border-radius:16px;width:min(720px,100%);box-shadow:8px 8px 0 rgba(0,0,0,.22);padding:20px 22px 22px;font-family:"DM Sans",system-ui,sans-serif;color:var(--x-ink)}
.fgo-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.fgo-head h2{margin:0;font:900 18px var(--x-display)}.fgo-x{border:1px solid var(--x-line);background:#fff;border-radius:8px;padding:6px 10px;font:800 12px var(--x-display);cursor:pointer}
.fgo-prog{height:6px;background:#e5dfd0;border-radius:6px;margin:12px 0 16px;overflow:hidden}.fgo-prog i{display:block;height:100%;background:var(--x-accent);transition:width .25s}
.fgo-q{font:800 19px/1.35 var(--x-display);margin:0 0 14px}.fgo-count{font:700 11px var(--x-mono);letter-spacing:.08em;color:var(--x-muted);text-transform:uppercase;margin-bottom:6px}
.fgo-opts{display:grid;gap:8px}.fgx-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;border:1.5px solid var(--x-line);background:#fff;border-radius:10px;padding:11px 13px;font:600 14.5px/1.4 "DM Sans",system-ui,sans-serif;color:var(--x-ink);cursor:pointer}
.fgx-opt b{flex:none;width:24px;height:24px;border-radius:7px;background:#f1ede4;font:800 12px var(--x-mono);display:grid;place-items:center}.fgx-opt:hover:not([disabled]){border-color:var(--x-accent)}
.fgx-opt.good{border-color:var(--x-good);background:#eaf6ef}.fgx-opt.good b{background:var(--x-good);color:#fff}.fgx-opt.bad{border-color:var(--x-bad);background:#fbecea}.fgx-opt.bad b{background:var(--x-bad);color:#fff}.fgx-opt[disabled]{cursor:default}
.fgo-why{margin-top:12px;background:#fff;border-left:4px solid var(--x-accent);border-radius:8px;padding:10px 13px;font-size:14px;line-height:1.5}.fgo-why strong{display:block;font:800 12px var(--x-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.fgo-foot{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.fgo-score{text-align:center;padding:10px 0}.fgo-score .big{font:900 56px var(--x-display);color:var(--x-ink);line-height:1}.fgo-score .big small{font-size:24px;color:var(--x-muted)}.fgo-score p{margin:8px 0 0;color:var(--x-muted)}
.fgo-miss{margin:14px 0 0;display:grid;gap:8px}.fgo-miss div{background:#fff;border:1px solid var(--x-line);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.45}.fgo-miss b{display:block;margin-bottom:3px}
/* flashcards */
.fgc{perspective:1000px;margin:6px 0 14px}.fgc-card{position:relative;min-height:220px;cursor:pointer;transform-style:preserve-3d;transition:transform .45s}.fgc-card.flip{transform:rotateY(180deg)}
.fgc-face{position:absolute;inset:0;backface-visibility:hidden;background:#fff;border:1px solid var(--x-line);border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:4px 4px 0 var(--x-shadow)}
.fgc-face.back{transform:rotateY(180deg);background:var(--x-ink);color:#fff}.fgc-face .term{font:900 28px/1.15 var(--x-display)}.fgc-face .def{font:500 17px/1.5 "DM Sans",system-ui,sans-serif}.fgc-face small{margin-top:14px;font:700 10px var(--x-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.fgc-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.fgc-card,.fgo-prog i,.fgl-card{transition:none}}
@media(max-width:1100px){.fgr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fgx-labs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.fgx-hero{grid-template-columns:1fr}.fgx-steps{grid-template-columns:1fr}.fgr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fgx-labs{grid-template-columns:1fr}.fgo-box{padding:16px}.fgo-q{font-size:17px}.fgr-note{margin-left:0}}
@media(max-width:460px){.fgr-grid{grid-template-columns:1fr}.fgx-stats{grid-template-columns:1fr 1fr 1fr}}

.fgx-link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-decoration-color:var(--x-accent);text-underline-offset:3px;font:inherit;cursor:pointer;text-align:left}
.fd-prose p,.gc-prose p{margin:0 0 12px;line-height:1.65}.fd-prose p:last-child,.gc-prose p:last-child{margin-bottom:0}

/* Food NEA workbench */
.nea{margin:0 0 30px}
.nea-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.nea-tab{text-align:left;border:1px solid var(--fd-line);background:#fff;border-radius:12px;padding:12px 14px;box-shadow:3px 3px 0 #ded5c8;color:var(--fd-green)}
.nea-tab b{display:block;font:900 15px var(--fd-display)}.nea-tab span{display:block;font-size:11px;color:#6a7771;margin-top:2px}
.nea-tab.on{background:var(--fd-green);color:#fff;border-color:var(--fd-green)}.nea-tab.on span{color:#cfe0d8}
.nea-blurb{font-size:12.5px;line-height:1.6;color:#4f5c56;margin:0 0 16px}
.nea-body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.nea-nav{position:sticky;top:78px;background:#fff;border:1px solid var(--fd-line);border-radius:14px;padding:12px;box-shadow:5px 5px 0 var(--fd-shadow);max-height:calc(100vh - 100px);overflow:auto}
.nea-sec{font:700 9px var(--fd-mono);text-transform:uppercase;letter-spacing:.11em;color:var(--fd-terr);margin:12px 4px 4px}
.nea-sec:first-child{margin-top:2px}
.nea-step{display:flex;gap:9px;align-items:center;width:100%;border:0;background:transparent;border-radius:9px;padding:7px 8px;text-align:left;color:#3f4d47;font-size:12px;font-weight:700}
.nea-step i{flex:0 0 22px;height:22px;border-radius:50%;border:1px solid var(--fd-line);display:grid;place-items:center;font:800 10px var(--fd-mono);font-style:normal;background:#f8f5ee}
.nea-step:hover{background:#f4efe3}.nea-step.on{background:#e9f1ec;color:var(--fd-green)}.nea-step.ok i{background:var(--fd-sage);border-color:var(--fd-sage);color:#fff}
.nea-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed #ded5c8}
.nea-restore{display:inline-block;cursor:pointer}
.nea-panel{background:#fff;border:1px solid var(--fd-line);border-radius:16px;padding:26px 28px;box-shadow:6px 6px 0 var(--fd-shadow);min-width:0}
.nea-panel h2{margin:6px 0 8px;font:900 28px/1.1 var(--fd-display);letter-spacing:-.035em;color:var(--fd-green)}
.nea-panel h3{margin:22px 0 8px;font:800 12px var(--fd-display);text-transform:uppercase;letter-spacing:.07em;color:var(--fd-terr)}
.nea-intro{font-size:14px;line-height:1.65;color:#4f5c56;margin:0}
.nea-look{margin:0;padding-left:20px;font-size:13px;line-height:1.7;color:#3f4d47}
.nea-f{display:block;margin:0 0 14px}.nea-f>span{display:block;font-size:12px;font-weight:800;color:var(--fd-green);margin-bottom:5px}
.nea-f textarea{width:100%;border:1px solid #cfc6b8;border-radius:10px;padding:10px 12px;background:#fffdf8;color:var(--fd-ink);font-size:13.5px;line-height:1.55;resize:vertical}
.nea-f textarea:focus,.nea-panel input:focus{outline:3px solid #eabf5299;outline-offset:1px;border-color:var(--fd-green)}
.nea-ex{margin:14px 0;border:1px dashed #cdbf9f;border-radius:10px;background:#fbf6e6;padding:10px 14px}
.nea-ex summary{cursor:pointer;font-weight:800;font-size:12.5px;color:var(--fd-green)}.nea-ex p{margin:8px 0 0;font-size:13px;line-height:1.6;color:#4f4a39}
.nea-checks{display:grid;gap:6px}.nea-chk{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:#3f4d47}.nea-chk input{margin-top:3px;accent-color:var(--fd-green);width:16px;height:16px}
.nea-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--fd-line)}.nea-foot .fgx-btn[disabled]{opacity:.45;cursor:not-allowed}
.nea-saved{min-height:18px;margin:8px 0 0;font-size:11px;color:#6d7873}
.nea-hours,.nea-skills,.nea-res,.nea-plan{margin:0 0 16px;font-size:13px}
.nea-hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:8px}
.nea-hr{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--fd-line);border-radius:9px;padding:6px 10px;background:#fffdf8}
.nea-hr input{width:64px}
.nea-panel input[type=number],.nea-panel td input{border:1px solid #cfc6b8;border-radius:7px;padding:6px 8px;background:#fffdf8;font-size:13px;width:100%}
.nea-hr input{width:64px}
.nea-total{margin:8px 0 0;font:700 11px var(--fd-mono);color:var(--fd-green)}
.nea-sgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.nea-chip{border:1px solid var(--fd-line);background:#fffdf8;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;color:#3f4d47}
.nea-chip.on{background:var(--fd-green);border-color:var(--fd-green);color:#fff}
.nea-res table,.nea-plan table{width:100%;border-collapse:collapse;margin-top:8px}
.nea-res th,.nea-plan th{font:700 10px var(--fd-mono);text-transform:uppercase;letter-spacing:.08em;color:#6d7873;text-align:left;padding:4px 6px}
.nea-res td,.nea-plan td{padding:3px 4px}.nea-mean{font:800 13px var(--fd-mono);color:var(--fd-green);text-align:center}
.nea-plan td:first-child{width:84px}
@media(max-width:900px){.nea-body{grid-template-columns:1fr}.nea-nav{position:static;max-height:none}.nea-panel{padding:20px 16px}.nea-tabs{grid-template-columns:1fr}}
@media(max-width:560px){.nea-res table,.nea-plan table{display:block;overflow-x:auto}.nea-panel h2{font-size:23px}}