/* Calibrex OSINT Academy — Field Notes */
.fn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
.fn-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px 74px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(150deg,#e9bd7808,#0b0f1a 50%);transition:transform .25s,border-color .25s,box-shadow .25s}
.fn-tile:hover{transform:translateY(-3px);border-color:#e9bd7866;box-shadow:0 18px 50px #0008}
.fn-num{position:absolute;left:22px;top:22px;font:700 30px 'Playfair Display',Georgia,serif;color:var(--gold)}
.fn-topic{font:500 10px 'DM Mono',monospace;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase}
.fn-tile b{font:700 20px/1.25 'Playfair Display',Georgia,serif}
.fn-sum{color:#b9c2d3;font-size:14px;line-height:1.6}
.fn-state{margin-top:auto;font-weight:800;font-size:12.5px;color:var(--gold)}
.fn-tile.read{border-color:#3ddc8455}
.fn-tile.read .fn-state{color:#3ddc84}
.fn-progress{align-self:center;font:500 12px 'DM Mono',monospace;letter-spacing:1px;color:var(--gold);padding:10px 14px;border:1px solid #e9bd7855;border-radius:99px}

/* Reading page */
.fn-bar{position:fixed;left:0;right:0;top:76px;height:2px;z-index:59;background:transparent}
.fn-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f5a944,#e9bd78);box-shadow:0 0 10px #e9bd78aa;transition:width .15s}
.fn-wrap{max-width:780px;padding:56px 0 20px}
.fn-back{font-size:13px;color:var(--muted);display:inline-block;margin-bottom:22px}
.fn-back:hover{color:var(--text)}
.fn-wrap h1{font:700 clamp(34px,5vw,54px)/1.08 'Playfair Display',Georgia,serif;letter-spacing:-1px;margin:14px 0 0}
.fn-lede{color:#b9c2d3;font-size:17px;line-height:1.7;margin:16px 0 0}
.fn-learn{margin:24px 0 0;padding:16px 20px;border-left:2px solid var(--gold);background:#e9bd7808;border-radius:0 14px 14px 0}
.fn-learn b{font:500 10px 'DM Mono',monospace;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase}
.fn-learn ul{margin:8px 0 0;padding-left:18px;color:#cfd6e4;font-size:14.5px;line-height:1.8}
.fn-body{margin-top:30px}
.fn-body.open p,.fn-body.open li{color:#d5dbe7;font-size:16.5px;line-height:1.8}
.fn-body h3{font:700 24px 'Playfair Display',Georgia,serif;margin:34px 0 8px}
.fn-body code{font:500 .9em 'DM Mono',monospace;color:#f5c26b;background:#ffffff0c;padding:2px 6px;border-radius:6px}
.fn-list{padding-left:20px}
.fn-hint{font-size:13.5px!important;color:var(--muted)!important;margin:4px 0 12px}
.fn-task{padding:12px 16px;border:1px dashed #e9bd7855;border-radius:12px}
.fn-gate{text-align:center;padding:40px 26px;border:1px solid #e9bd7844;border-radius:24px;background:radial-gradient(circle at 50% 0,#e9bd7814,transparent 60%),#0a0d16}
.fn-gate h2{font:700 28px 'Playfair Display',Georgia,serif;margin:12px 0 8px}
.fn-gate p{color:#b9c2d3;line-height:1.7;max-width:520px;margin:0 auto}
.fn-gate .pg-ctas{justify-content:center}
.fn-lock{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7b8,#e9bd78 45%,#a87a33)}
.fn-lock svg{width:24px;height:24px;fill:none;stroke:#2a1c06;stroke-width:1.8;stroke-linecap:round}
.fn-end{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.fn-end .button{cursor:pointer;border:0}.fn-end .button-glass{border:1px solid var(--line)}
.fn-end .fn-done:disabled{opacity:.7;cursor:default}
.fn-cta{margin-top:40px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.fn-cta p{color:#cfd6e4;margin:8px 0 14px}

/* Exercises */
.fn-quiz,.fn-sort,.fn-hot,.fn-compare,.fn-checklist,.fn-builder,.fn-sun{margin:22px 0;padding:20px;border:1px solid #e9bd7833;border-radius:18px;background:#0a0d16}
.fn-q{font-weight:800;color:#f2f5fb!important;margin:0 0 12px}
.fn-opts{display:grid;gap:8px}
.fn-opts button{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#ffffff06;color:var(--text);font:600 14.5px Manrope,sans-serif;cursor:pointer;transition:border-color .2s,background .2s}
.fn-opts button:hover{border-color:#e9bd7866}
.answered .fn-opts button{cursor:default}
.fn-opts .right{border-color:#3ddc84;background:#3ddc8414}
.fn-opts .wrong{border-color:#ff6b6b;background:#ff6b6b14}
.fn-why{margin:12px 0 0;font-size:14.5px!important;line-height:1.6}
.fn-why:empty{display:none}
.fn-why b{color:var(--gold)}
.fn-reveal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.fn-card{position:relative;min-height:128px;padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(150deg,#e9bd780c,#0b0f1a);color:var(--text);text-align:left;cursor:pointer;perspective:800px;transition:border-color .2s}
.fn-card b{display:block;font-size:15px;line-height:1.4;transition:opacity .3s}
.fn-card span{position:absolute;inset:16px;font-size:14px;line-height:1.55;color:#d5dbe7;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.fn-card:after{content:"Tap to reveal";position:absolute;right:14px;bottom:10px;font:500 9.5px 'DM Mono',monospace;letter-spacing:1px;color:var(--gold)}
.fn-card.flipped{border-color:#e9bd7866}
.fn-card.flipped b{opacity:0}.fn-card.flipped span{opacity:1;transform:none}.fn-card.flipped:after{content:""}
.fn-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;flex-wrap:wrap}
.fn-item p{margin:0!important;font-size:14.5px!important;flex:1;min-width:200px}
.fn-buckets{display:flex;gap:6px;flex-wrap:wrap}
.fn-buckets button{border:1px solid var(--line);background:none;color:var(--muted);border-radius:99px;padding:6px 10px;font:700 12px Manrope,sans-serif;cursor:pointer}
.fn-buckets button.on{border-color:var(--gold);color:#17130d;background:var(--gold)}
.fn-item.right{border-color:#3ddc84}.fn-item.wrong{border-color:#ff6b6b}
.fn-btn{margin-top:10px;border:1px solid #e9bd7866;background:#e9bd7814;color:var(--gold);border-radius:99px;padding:9px 16px;font:700 13px Manrope,sans-serif;cursor:pointer}
.fn-scene{position:relative;border-radius:12px;overflow:hidden}
.fn-scene svg{display:block;width:100%;height:auto}
.fn-spot{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;border:2px solid #fff;background:#e9bd78;color:#17130d;font:800 13px Manrope,sans-serif;cursor:pointer;box-shadow:0 0 0 6px #e9bd7840;animation:fn-ping 1.8s ease-out infinite}
.fn-spot.seen{background:#3ddc84;animation:none;box-shadow:none}
.fn-spot.on{background:#fff;box-shadow:0 0 0 6px #ffffff40}
@keyframes fn-ping{70%{box-shadow:0 0 0 14px #e9bd7800}}
.fn-note{margin:12px 0 0!important;font-size:14.5px!important;min-height:3.2em}
.fn-note b{color:var(--gold)}
.fn-tabs{display:flex;gap:6px;margin-bottom:12px}
.fn-tabs button{border:1px solid var(--line);background:none;color:var(--muted);border-radius:99px;padding:7px 12px;font:600 12px 'DM Mono',monospace;cursor:pointer}
.fn-tabs button.on{border-color:var(--gold);color:var(--gold)}
.fn-ver{padding:16px;border-radius:12px;background:#f3eee2;color:#2a2112}
.fn-ver b{font-size:17px}.fn-ver p{color:#3a3122!important;font-size:15px!important;margin:8px 0 0}
.fn-ver mark{background:none;color:inherit;transition:background .3s}
.fn-compare.diff .fn-ver mark{background:#f5c26b;padding:0 3px;border-radius:3px}
.fn-checklist label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:6px;cursor:pointer;font-size:14.5px;color:#d5dbe7}
.fn-checklist input{accent-color:var(--gold);width:18px;height:18px;margin-top:2px;flex-shrink:0}
.fn-checklist label.is-flag{border-color:#3ddc8488}
.fn-checklist label.not-flag{opacity:.55}
.fb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fb-grid label,.fs-ctl{display:flex;flex-direction:column;gap:6px}
.fb-grid span,.fs-ctl span{font:500 10px 'DM Mono',monospace;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase}
.fb-grid input,.fb-grid select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#ffffff08;color:var(--text);font:inherit;font-size:14px;color-scheme:dark}
.fb-out{margin-top:14px;padding:14px;border-radius:12px;background:#05070d;border:1px solid #e9bd7844;overflow-x:auto}
.fb-out code{background:none!important;padding:0!important;font-size:14px!important}
.fb-out span{color:#f5c26b}
.fb-explain{margin:10px 0 0;padding-left:18px}
.fb-explain li{font-size:14px!important;line-height:1.7!important}
.fn-sun svg{display:block;width:100%;height:auto;border-radius:12px}
.fs-ctl{margin-top:14px}
.fs-ctl input{accent-color:var(--gold);width:100%}
.fs-ctl b{font:700 22px 'DM Mono',monospace;color:var(--gold)}
.fs-read{font-size:14px!important;color:var(--muted)!important;margin:6px 0 0}

@media (max-width:760px){.fn-grid,.fn-reveal,.fb-grid{grid-template-columns:1fr}.fn-bar{top:66px}.fn-tile{padding-left:64px}}
@media (prefers-reduced-motion:reduce){.fn-spot{animation:none}}
