/* =====================================================
   MetfaB™ · MFW VDA 6.3 Portal — site.css
   Shared stylesheet for every page
   ===================================================== */

:root{
  --brand:#0a0a0a;
  --brand-2:#1f1f1f;
  --steel:#2b2f33;
  --ink-steel:#353F47;
  --chrome:#c9ccd1;
  --chrome-2:#8c9197;
  --accent:#ff6a00;
  --accent-2:#ffae3d;
  --bg:#f3f3f4;
  --panel:#ffffff;
  --ink:#181a1d;
  --muted:#5b6068;
  --line:#dde0e5;
  --line-soft:#eef1f5;
  --ok:#1e7c47;
  --warn:#b8761c;
  --bad:#c0392b;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --r:8px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
kbd{background:#eef1f5;border:1px solid #d0d6df;border-radius:3px;padding:1px 6px;font-size:11.5px;font-family:Consolas,Menlo,monospace}
code{background:#eef1f5;color:#0a0a0a;padding:1px 6px;border-radius:3px;font-size:.92em;font-family:Consolas,Menlo,monospace}

/* =================== TOP BAR =================== */
.topbar{
  background:#fff;color:var(--ink-steel);
  height:72px;display:flex;align-items:center;padding:0 28px;
  border-bottom:4px solid var(--accent);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent))}
.lockup{display:flex;align-items:center;gap:14px;margin-right:24px}
.lockup .mfw{height:48px;width:auto}
.lockup .metfab{height:30px;width:auto}
.lockup .tm{font-size:9px;vertical-align:super;color:var(--ink-steel);font-weight:700}
.topbar nav.main{display:flex;gap:2px;align-items:center}
.topbar nav.main > div{position:relative}
.topbar nav.main > div > a, .topbar nav.main > div > button{
  color:var(--ink-steel);background:transparent;border:none;cursor:pointer;
  font:600 13.5px "Segoe UI",Roboto,Arial,sans-serif;padding:10px 14px;border-radius:5px;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
}
.topbar nav.main > div:hover > a, .topbar nav.main > div:hover > button{
  background:#fff7ef;color:var(--accent);
}
.topbar nav.main > div.active > a{color:var(--accent);background:#fff7ef}
.caret::after{content:"▾";font-size:11px;opacity:.7;transition:transform .15s}
.topbar nav.main > div:hover .caret::after{transform:rotate(180deg)}
.topbar .right-tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.topbar .search-mini{
  background:#f5f6f8;border:1px solid var(--line);
  color:var(--ink-steel);padding:8px 12px;border-radius:5px;font-size:13px;width:230px;
}
.topbar .search-mini:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,0,.15)}
.topbar .search-mini::placeholder{color:#9aa0a6}
.topbar .ham{display:none;background:transparent;border:none;color:var(--ink-steel);font-size:26px;cursor:pointer;padding:6px 10px;margin-left:auto}

/* =================== MEGA MENU =================== */
.mega{
  position:absolute;left:0;top:calc(100% + 8px);background:#fff;color:var(--ink-steel);
  border-radius:8px;box-shadow:0 14px 36px rgba(0,0,0,.16);
  width:880px;padding:10px;border-top:3px solid var(--accent);
  display:none;z-index:60;
}
.topbar nav.main > div:hover .mega,
.topbar nav.main > div:focus-within .mega{display:block}
.mega.tools, .mega.about{width:300px}
.mega h4{margin:0;padding:8px 12px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.mega .row{display:grid;grid-template-columns:200px 1fr;align-items:center;padding:7px 10px;border-radius:6px;cursor:pointer}
.mega .row:hover{background:#fff7ef}
.mega .row .chap{font-weight:700;color:var(--ink-steel);font-size:13px;display:flex;align-items:center;gap:8px}
.mega .row .chap::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%}
.mega .row .chap small{color:var(--muted);font-weight:400;font-size:11.5px;margin-left:6px}
.mega .row .subs{display:flex;flex-wrap:wrap;gap:4px}
.mega .row .subs a{font-size:11.5px;color:var(--ink-steel);background:#f1f1f4;
  padding:3px 8px;border-radius:4px;border:1px solid #e2e3e7;font-family:Consolas,Menlo,monospace;text-decoration:none}
.mega .row .subs a:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.mega .footer-row{border-top:1px solid var(--line);margin-top:6px;padding:8px 12px;
  display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.mega.tools a, .mega.about a{display:block;padding:9px 12px;color:var(--ink-steel);font-size:13.5px;border-radius:6px;text-decoration:none}
.mega.tools a:hover, .mega.about a:hover{background:#fff7ef;color:var(--accent)}
.mega.tools a small, .mega.about a small{display:block;color:var(--muted);font-size:11.5px;font-weight:400}

/* =================== HERO (home) =================== */
.hero{
  background:radial-gradient(ellipse at 80% 30%, rgba(255,106,0,.08) 0%, transparent 60%), #ffffff;
  color:var(--ink-steel);padding:48px 32px;display:flex;align-items:center;gap:32px;
  border-bottom:1px solid var(--line);
}
.hero-img{flex-shrink:0;max-width:320px}
.hero h1{margin:0 0 6px;font-size:34px;font-weight:800;color:var(--ink-steel);letter-spacing:.3px}
.hero h1 .o{color:var(--accent)}
.hero .tag{font-style:italic;color:var(--accent);font-size:15px;margin:2px 0 8px;font-weight:700;letter-spacing:.3px}
.hero .meta{color:var(--muted);font-size:12.5px}
.hero .badges{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.hero .badge{background:#f5f6f8;border:1px solid var(--line);color:var(--ink-steel);
  padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.3px}
.hero .badge.b{background:var(--accent);border-color:var(--accent);color:#0a0a0a}

/* =================== INNER PAGE HEADERS =================== */
.page-header{
  background:#fff;color:var(--ink-steel);padding:24px 32px;border-bottom:4px solid var(--accent);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.page-header .crumb{font-size:12px;color:var(--muted);margin:0 0 6px}
.page-header .crumb a{color:var(--ink-steel)}
.page-header .crumb a:hover{color:var(--accent)}
.page-header .crumb .sep{margin:0 6px;color:var(--chrome-2)}
.page-header .pre{font-family:Consolas,Menlo,monospace;font-size:12.5px;color:var(--accent);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.page-header h1{margin:4px 0 6px;font-size:26px;color:var(--ink-steel);letter-spacing:.2px}
.page-header .pdesc{font-size:13.5px;color:var(--muted);max-width:780px;margin:0}

/* =================== MAIN =================== */
main{max-width:1280px;margin:0 auto;padding:24px 32px 40px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 22px;margin:14px 0;border-left:4px solid var(--accent);box-shadow:var(--shadow)}
.panel h2{margin:0 0 8px;font-size:16px;color:var(--ink-steel);
  border-bottom:2px solid var(--accent);display:inline-block;padding-bottom:4px;letter-spacing:.2px}
.panel .desc{color:var(--muted);font-size:13px;margin:6px 0 12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* KPI tiles */
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.kpi .val{font-size:26px;font-weight:800;color:var(--ink-steel);display:flex;align-items:baseline;gap:8px}
.kpi .val .dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--ok)}
.kpi.amber .val .dot{background:var(--warn)}
.kpi.red .val .dot{background:var(--bad)}
.kpi .sub{font-size:11.5px;color:var(--muted)}

/* Tables */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th, table.data td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{background:#0a0a0a;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  border-bottom:2px solid var(--accent);font-weight:700}
table.data tr:hover td{background:#fff7ef}
.abbrev{font-family:Consolas,Menlo,monospace;font-weight:700;color:var(--ink-steel);white-space:nowrap}
.abbrev::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);
  border-radius:50%;margin-right:6px;vertical-align:middle}
.open-btn{background:var(--ink-steel);color:#fff;padding:5px 12px;border-radius:4px;font-size:11.5px;font-weight:700;
  text-decoration:none;display:inline-block;border:1px solid var(--ink-steel);transition:all .15s}
.open-btn:hover{background:var(--accent);border-color:var(--accent);color:#0a0a0a;text-decoration:none}
.btn{background:var(--ink-steel);color:#fff;border:1px solid var(--ink-steel);padding:8px 16px;border-radius:5px;
  font:700 12.5px "Segoe UI",Roboto,Arial,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#0a0a0a;text-decoration:none}
.btn.alt{background:#fff;color:var(--ink-steel)}
.btn.alt:hover{background:#fff7ef;color:var(--accent);border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.btn.primary:hover{background:#0a0a0a;color:#fff;border-color:#0a0a0a}

.status{font-size:10.5px;padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:.3px}
.s-ok{background:#e3f5ea;color:var(--ok)}
.s-warn{background:#fff3df;color:var(--warn)}
.s-bad{background:#fbe4e1;color:var(--bad)}
.s-info{background:#e3eefc;color:#1769aa}
.s-mono{background:#1a1a1a;color:#fff}

.pill{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:.3px}
.pill.new{background:#e3f5ea;color:var(--ok)}
.pill.upd{background:#ffe9d2;color:var(--accent)}
.pill.rev{background:#1a1a1a;color:#fff}

/* Subfolder cards (chapter pages) */
.sub-card{background:#fafbfd;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;margin:10px 0;overflow:hidden}
.sub-card .sh{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.sub-card .sh:hover{background:#fff7ef}
.sub-card .sh .ab{font-family:Consolas,Menlo,monospace;color:var(--ink-steel);font-size:14px;font-weight:700;min-width:80px}
.sub-card .sh .nm{font-weight:600;color:var(--ink-steel);font-size:14px}
.sub-card .sh .ds{color:var(--muted);font-size:12.5px;flex:1}
.sub-card .sh .toggle{margin-left:auto;color:var(--accent);font-size:18px;transition:transform .2s}
.sub-card.open .sh .toggle{transform:rotate(180deg)}
.sub-card .body{display:none;padding:0 14px 14px;border-top:1px solid var(--line-soft)}
.sub-card.open .body{display:block}
.sub-card .l3{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.sub-card .l3 a{font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:4px 9px;color:var(--ink-steel);font-family:Consolas,Menlo,monospace;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.sub-card .l3 a:hover{border-color:var(--accent);background:#fff7ef;color:var(--accent)}
.sub-card .l3 a .t{font-family:"Segoe UI",sans-serif;color:var(--muted);font-size:11px;font-weight:400}
.sub-card .l3 a:hover .t{color:var(--accent)}
.sub-card h4{margin:14px 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.sub-card .file-list{font-size:13px}
.sub-card .file-list li{padding:5px 0;border-bottom:1px dashed var(--line-soft);list-style:none;
  display:flex;align-items:center;gap:8px}
.sub-card .file-list .icon{color:var(--accent);width:18px;text-align:center}
.sub-card .file-list .meta{color:var(--muted);font-size:11.5px;margin-left:auto;font-family:Consolas,Menlo,monospace}
.sub-card ul{padding:0;margin:0}

/* Tooltip */
.tip-host{position:relative;cursor:help}
.tip{position:absolute;z-index:200;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  background:#fff;border-radius:6px;border-top:3px solid var(--accent);
  box-shadow:0 14px 30px rgba(0,0,0,.18);padding:10px 14px;width:300px;display:none;
  text-align:left;font-size:12.5px;color:var(--ink-steel);font-weight:400}
.tip.show{display:block}
.tip .ab{font-family:Consolas,Menlo,monospace;font-weight:800;color:var(--accent);font-size:13px}
.tip .nm{font-weight:700;font-size:13px;color:var(--ink-steel);margin:2px 0 4px}
.tip .ds{color:var(--muted);font-size:12px;line-height:1.4}
.tip .pa{margin-top:6px;font-family:Consolas,Menlo,monospace;font-size:11px;color:var(--muted);word-break:break-all}
.tip .ax{display:flex;gap:6px;margin-top:8px}

/* Latest updates */
.upd-list{display:grid;grid-template-columns:90px 90px 1fr;gap:6px 14px;font-size:13px}
.upd-list .uhdr{font-weight:700;font-size:10.5px;color:#fff;background:var(--ink-steel);padding:5px 9px;
  border-radius:3px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--accent)}

/* Chapter cards */
.chap-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.chap-tile{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:12px 14px;border-radius:6px;text-decoration:none;color:var(--ink-steel);transition:all .15s}
.chap-tile:hover{transform:translateX(2px);background:#fff7ef;border-left-color:var(--ink-steel);text-decoration:none}
.chap-tile b{display:block;font-family:Consolas,Menlo,monospace;font-size:13px;color:var(--accent);font-weight:700}
.chap-tile span{font-size:13px;color:var(--ink-steel);font-weight:700;display:block;margin-top:2px}
.chap-tile small{color:var(--muted);font-size:11.5px;display:block;margin-top:3px}

/* Footer */
footer.site-foot{
  background:#0a0a0a;color:#cfd1d5;padding:22px 24px 18px;text-align:center;
  border-top:4px solid var(--accent);font-size:12px;
}
footer.site-foot .wm{display:inline-block;margin-bottom:8px}
footer.site-foot .wm img{height:28px}
footer.site-foot .wm-text{font-weight:900;font-size:15px;letter-spacing:.5px}
footer.site-foot .wm-text .o{color:var(--accent)}
footer.site-foot .wm-text .d{color:#fff}
footer.site-foot .l1{color:#fff;font-weight:600}
footer.site-foot .l1 .pipe{color:rgba(255,106,0,.6);margin:0 8px}
footer.site-foot .l1 .tag{font-style:italic;color:#e6e7ea}
footer.site-foot .l1 .reg{color:#9aa0a6;font-family:Consolas,Menlo,monospace}
footer.site-foot .l2{margin-top:5px}
footer.site-foot .l2 .b{color:var(--accent);font-weight:800;letter-spacing:.3px}
footer.site-foot .l2 .cn{color:#9aa0a6;font-family:Consolas,Menlo,monospace}
footer.site-foot .copy{margin-top:12px;color:#6a6f78;font-size:10.5px}
footer.site-foot .copy a{color:#9aa0a6}
footer.site-foot .tm{color:var(--accent-2);font-size:9px;vertical-align:super}
footer.site-foot .legal{margin-top:6px;color:#6a6f78;font-size:10.5px;max-width:920px;margin-left:auto;margin-right:auto}

/* Mobile drawer */
.drawer{display:none;background:#fff;border-top:1px solid var(--line);padding:14px;
  position:absolute;top:72px;left:0;right:0;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:55}
.drawer.show{display:block}
.drawer details{margin:6px 0;border:1px solid var(--line);border-radius:6px;padding:8px 12px}
.drawer details[open]{border-left:3px solid var(--accent)}
.drawer summary{cursor:pointer;font-weight:700;color:var(--ink-steel);font-size:14px;list-style:none}
.drawer summary::after{content:"▾";float:right;color:var(--accent)}
.drawer .chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
.drawer .chips a{font-size:11.5px;background:#fff7ef;color:var(--ink-steel);padding:3px 8px;border-radius:4px;
  text-decoration:none;font-family:Consolas,Menlo,monospace;border:1px solid var(--accent)}

/* Audit-prep wizard */
.aw{background:linear-gradient(135deg,#fff 0%,#fff7ef 100%);border:1px solid var(--accent);
  border-left:4px solid var(--accent);border-radius:8px;padding:18px;margin:14px 0}
.aw h3{margin:0 0 8px;font-size:16px;color:var(--ink-steel)}
.aw .countdown{font-size:32px;font-weight:900;color:var(--accent);margin:6px 0}
.aw .step{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.aw .step b{font-family:Consolas,monospace;color:var(--ink-steel)}

/* =================== MOBILE =================== */
@media (max-width: 980px){
  main{padding:18px 16px 32px}
  .topbar{padding:0 16px;height:64px}
  .topbar .ham{display:block}
  .topbar nav.main{display:none}
  .topbar .right-tools{display:none}
  .lockup .mfw{height:38px}
  .lockup .metfab{height:24px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:10px}
  .chap-tiles{grid-template-columns:1fr 1fr;gap:8px}
  .hero{flex-direction:column;align-items:flex-start;gap:14px;padding:28px 18px}
  .hero h1{font-size:24px}
  .page-header{padding:18px 16px}
  .page-header h1{font-size:20px}
  .panel{padding:14px;margin:10px 0}
  .panel h2{font-size:15px}
  table.data thead{display:none}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:6px;margin:8px 0;padding:8px;background:#fff}
  table.data tr:hover td{background:transparent}
  table.data td{padding:4px 0;border:none;font-size:13px}
  table.data td:before{content:attr(data-label) ": ";font-size:11px;color:var(--muted);
    text-transform:uppercase;letter-spacing:.5px;font-weight:700;display:inline-block;min-width:90px}
  table.data td.abbrev:before{display:none}
  .upd-list{grid-template-columns:1fr}
  .upd-list .uhdr{display:none}
  footer.site-foot{padding:18px 14px}
  footer.site-foot .l1 .pipe{display:none}
  footer.site-foot .l1 > span{display:block;margin:2px 0}
  footer.site-foot .l2 .pipe{display:none}
  footer.site-foot .l2 > span{display:block;margin:2px 0}
  .mega{position:static;width:auto;box-shadow:none;border:none;display:block !important;padding:0;margin-top:6px}
  .mega.tools, .mega.about{width:auto}
}

/* =================== AUDITOR MODE =================== */
body.mode-audit nav.main > div:not(.vda),
body.mode-audit .right-tools .search-mini{display:none}
body.mode-audit .hero .badges,
body.mode-audit .hero .tag,
body.mode-audit #updates{display:none}
body.mode-audit{font-size:1.05em}
body.mode-audit .page-header h1{font-size:30px}

/* =================== CAPABILITY MODE =================== */
body.mode-capability nav.main,
body.mode-capability #updates,
body.mode-capability #setup,
body.mode-capability .crumb a[href*="chapters"]{display:none}

/* =================== PRINT =================== */
@media print{
  .topbar,.drawer,.right-tools,.open-btn{display:none}
  .panel,.sub-card{break-inside:avoid;box-shadow:none;border:1px solid #000}
  body{background:#fff}
  footer.site-foot{background:#fff;color:#000;border-top:2px solid var(--accent)}
}

/* ====== AUTH / ROLE GATE ====== */
html.role-viewer .admin-only { display: none !important; }
html.role-viewer .admin-edit { pointer-events: none; opacity: .5; }
.role-bar{display:flex;align-items:center;gap:8px;margin-left:14px}
.role-pill{font-size:11px;font-weight:800;padding:5px 10px;border-radius:12px;letter-spacing:.3px}
.role-pill.admin{background:var(--accent);color:#0a0a0a}
.role-pill.viewer{background:#353F47;color:#fff}
.role-link{color:var(--ink-steel);font-size:18px;text-decoration:none;padding:4px 8px;border-radius:4px}
.role-link:hover{background:#fff7ef;text-decoration:none}
.role-logout{background:transparent;border:1px solid var(--line);color:var(--ink-steel);
  padding:4px 10px;border-radius:4px;cursor:pointer;font:600 11.5px "Segoe UI",Roboto,Arial,sans-serif}
.role-logout:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
@media(max-width:980px){.role-bar{margin-left:auto;margin-right:8px}.role-pill{font-size:10px;padding:3px 7px}.role-logout{padding:3px 8px;font-size:11px}}