@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#2774AE;--dark:#1a5276;--blue:#2774AE;--gold:#FFD100;--red:#c0392b;--green:#27ae60;--orange:#e67e22;--white:#fff;--light:#f0f4ff;--gray:#8899aa;--border:#e0e4ea}
html{font-family:'Inter',sans-serif;color:#222;background:#f5f6fa}
body{min-height:100vh}
a{color:var(--blue);text-decoration:none}

/* ── Layout ── */
.container{max-width:960px;margin:0 auto;padding:0 16px}
.page-header{background:linear-gradient(135deg,var(--navy),#0d1b2a);color:var(--white);padding:20px 0;position:sticky;top:0;z-index:100}
.page-header .container{display:flex;align-items:center;justify-content:space-between}
.page-header h1{font-size:18px;font-weight:800;letter-spacing:-0.3px}
.page-header .subtitle{color:var(--gold);font-size:12px;font-weight:600;margin-top:2px}
.page-header .user-badge{background:rgba(255,209,0,0.15);color:var(--gold);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;border:1px solid rgba(255,209,0,0.3)}

/* ── Stats Bar ── */
.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 0}
.stat-card{background:var(--white);border-radius:10px;padding:16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.stat-card .stat-num{font-size:32px;font-weight:900;line-height:1}
.stat-card .stat-label{font-size:11px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
.stat-card.green .stat-num{color:var(--green)}
.stat-card.blue .stat-num{color:var(--blue)}
.stat-card.gold .stat-num{color:var(--orange)}

/* ── Category Sections ── */
.category{margin:20px 0}
.category-header{font-size:14px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:0.5px;padding:8px 0;border-bottom:2px solid var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.category-header .cat-count{background:var(--blue);color:var(--white);font-size:11px;padding:2px 8px;border-radius:10px;font-weight:700}

/* ── Module Cards ── */
.module-card{background:var(--white);border-radius:10px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:14px;box-shadow:0 1px 3px rgba(0,0,0,0.04);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;border-left:4px solid var(--border)}
.module-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.module-card:active{transform:scale(0.99)}
.module-card.completed{border-left-color:var(--green)}
.module-card.failed{border-left-color:var(--red)}
.module-card.in-progress{border-left-color:var(--orange)}
.module-card .mc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.module-card .mc-icon.not-started{background:#f0f0f0;color:#999}
.module-card .mc-icon.completed{background:rgba(39,174,96,0.1);color:var(--green)}
.module-card .mc-icon.failed{background:rgba(192,57,43,0.1);color:var(--red)}
.module-card .mc-icon.in-progress{background:rgba(230,126,34,0.1);color:var(--orange)}
.module-card .mc-body{flex:1;min-width:0}
.module-card .mc-title{font-size:15px;font-weight:700;line-height:1.3}
.module-card .mc-meta{font-size:12px;color:var(--gray);margin-top:2px}
.module-card .mc-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;flex-shrink:0;white-space:nowrap}
.mc-badge.passed{background:rgba(39,174,96,0.1);color:var(--green)}
.mc-badge.failed{background:rgba(192,57,43,0.1);color:var(--red)}
.mc-badge.started{background:rgba(230,126,34,0.1);color:var(--orange)}

/* ── Slideshow Overlay ── */
.slideshow-overlay{position:fixed;inset:0;background:var(--dark);z-index:1000;display:none;flex-direction:column}
.slideshow-overlay.active{display:flex}
.ss-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(0,0,0,0.3)}
.ss-header .ss-title{color:var(--white);font-size:14px;font-weight:700}
.ss-header .ss-close{background:none;border:none;color:var(--gray);font-size:24px;cursor:pointer;padding:4px 8px}
.ss-progress{height:3px;background:rgba(255,255,255,0.1)}
.ss-progress-fill{height:100%;background:var(--gold);transition:width 0.5s ease}
.ss-content{flex:1;overflow-y:auto;padding:24px 20px}
.ss-nav{display:flex;gap:10px;padding:12px 16px;background:rgba(0,0,0,0.3);justify-content:center}
.ss-nav button{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:var(--white);padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.ss-nav button:hover{background:rgba(255,255,255,0.2)}
.ss-nav button.primary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.ss-nav .ss-counter{color:var(--gray);font-size:13px;display:flex;align-items:center}

/* ── Slide Styles (inside overlay) ── */
.slide-content{color:var(--white);max-width:800px;margin:0 auto}
.slide-content h2{font-size:28px;font-weight:800;margin-bottom:8px}
.slide-content h3{font-size:20px;font-weight:700;color:var(--gold);margin:16px 0 8px}
.slide-content p{font-size:16px;line-height:1.6;margin:8px 0;opacity:0.9}
.slide-content ul{margin:8px 0 8px 20px;font-size:16px;line-height:1.6}
.slide-content li{margin:6px 0}
.slide-content strong{color:var(--gold)}
.slide-content .gold-line{width:60px;height:3px;background:var(--gold);margin:10px 0 16px;border-radius:2px}
.slide-content .callout{background:rgba(255,209,0,0.08);border-left:4px solid var(--gold);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0}
.slide-content .danger{background:rgba(192,57,43,0.12);border-left:4px solid var(--red);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0}
.slide-content .danger strong{color:var(--red)}
.slide-content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.slide-content th{background:var(--blue);color:var(--white);padding:8px 12px;text-align:left;font-weight:700}
.slide-content td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.08)}

/* ── Quiz Styles ── */
.quiz-container{max-width:700px;margin:0 auto;color:var(--white)}
.quiz-container h2{font-size:24px;font-weight:800;margin-bottom:20px;text-align:center}
.quiz-q{background:rgba(255,255,255,0.05);border-radius:10px;padding:16px;margin-bottom:16px}
.quiz-q .q-text{font-size:16px;font-weight:700;margin-bottom:10px}
.quiz-q .q-num{color:var(--gold);font-size:13px;font-weight:800;margin-bottom:4px}
.quiz-q label{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:15px;transition:background 0.15s}
.quiz-q label:hover{background:rgba(255,255,255,0.05)}
.quiz-q input[type=radio]{margin-top:3px;accent-color:var(--gold)}
.quiz-submit{display:block;margin:20px auto;background:var(--gold);color:var(--navy);border:none;padding:14px 40px;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit}
.quiz-submit:hover{filter:brightness(1.1)}
.quiz-result{text-align:center;padding:40px 20px}
.quiz-result .result-icon{font-size:64px;margin-bottom:16px}
.quiz-result .result-score{font-size:48px;font-weight:900}
.quiz-result .result-label{font-size:18px;font-weight:600;margin-top:8px}
.quiz-result.passed .result-score{color:var(--green)}
.quiz-result.failed .result-score{color:var(--red)}

/* ── Training Content (original doc styles for slideshow) ── */
.training-content{color:var(--white);max-width:800px;margin:0 auto;font-size:14px;line-height:1.5}
.training-content h1{font-size:26px;font-weight:800;margin-bottom:8px;color:var(--white)}
.training-content h2,.training-content .section-header{font-size:22px;font-weight:800;margin-bottom:8px;color:var(--white)}
.training-content .section-header{background:var(--blue);color:var(--white);padding:10px 16px;font-size:15px;font-weight:700;border-left:5px solid var(--gold);margin:0 -20px 14px;border-radius:0 4px 4px 0}
.training-content .sub-header{background:var(--gold);color:var(--navy);padding:8px 14px;font-size:14px;font-weight:700;margin:14px 0 10px;border-radius:4px}
.training-content .title-banner{background:linear-gradient(135deg,var(--blue),#1a5276);color:var(--white);padding:18px 22px;border-left:6px solid var(--gold);margin:0 -20px 16px;border-radius:0 6px 6px 0}
.training-content .title-banner h1{font-size:24px;font-weight:800;color:var(--white)}
.training-content .title-banner .subtitle{font-size:13px;color:var(--gold);margin-top:4px;font-weight:600}
.training-content p{margin:6px 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,0.9)}
.training-content ul,.training-content ol{margin:6px 0 6px 20px;font-size:14px;line-height:1.6;color:rgba(255,255,255,0.9)}
.training-content li{margin-bottom:4px}
.training-content strong{color:var(--gold)}
.training-content em{color:rgba(255,255,255,0.7)}
.training-content table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
.training-content th{background:var(--blue);color:var(--white);padding:8px 10px;text-align:left;font-weight:700}
.training-content td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.9)}
.training-content tr:nth-child(even) td{background:rgba(255,255,255,0.03)}
.training-content .callout{background:rgba(255,209,0,0.08);border-left:5px solid var(--gold);padding:10px 14px;margin:10px 0;border-radius:0 6px 6px 0}
.training-content .callout-title{font-weight:800;color:var(--gold);text-transform:uppercase;font-size:12px;margin-bottom:4px}
.training-content .danger-callout{background:rgba(192,57,43,0.12);border-left:5px solid var(--red);padding:10px 14px;margin:10px 0;border-radius:0 6px 6px 0}
.training-content .danger-callout .callout-title{color:var(--red)}
.training-content .info-callout{background:rgba(39,116,174,0.1);border-left:5px solid var(--blue);padding:10px 14px;margin:10px 0;border-radius:0 6px 6px 0}
.training-content .info-callout .callout-title{color:var(--blue)}
.training-content .diagram-container{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:14px;margin:12px 0;text-align:center}
.training-content .diagram-title{font-weight:700;color:var(--gold);font-size:13px;margin-bottom:10px;text-transform:uppercase}
.training-content .dot-placard-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:100%;margin:0 auto}
.training-content .dot-card{text-align:center;padding:4px}
.training-content .dot-card img{width:80px;height:80px;max-width:100%}
.training-content .dot-card .dot-label{font-size:9px;font-weight:700;color:var(--gold);margin-top:2px}
.training-content .dot-card.primary{border:2px solid var(--red);border-radius:6px;padding:4px;background:rgba(192,57,43,0.1)}
.training-content .ghs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:100%;margin:0 auto}
.training-content .ghs-card{text-align:center}
.training-content .ghs-card img{width:80px;height:80px;max-width:100%}
.training-content .ghs-card .ghs-label{font-size:10px;font-weight:700;color:var(--gold);margin-top:4px}
.training-content .photo-block{margin:10px 0;border:1px solid rgba(255,255,255,0.15);border-radius:6px;overflow:hidden;background:rgba(255,255,255,0.03)}
.training-content .photo-block img{width:100%;height:auto;display:block;max-height:300px;object-fit:contain;background:rgba(0,0,0,0.2)}
.training-content .photo-caption{padding:8px 12px;font-size:11px;color:rgba(255,255,255,0.7);background:rgba(0,0,0,0.2);border-top:2px solid var(--gold)}
.training-content .photo-caption strong{color:var(--gold);font-size:12px}
.training-content .photo-caption .photo-credit{font-style:italic;color:rgba(255,255,255,0.4);font-size:10px}
.training-content .photo-hero{margin:10px 0;border:2px solid var(--blue);border-radius:6px;overflow:hidden}
.training-content .photo-hero img{width:100%;height:auto;display:block;max-height:250px;object-fit:contain;background:rgba(0,0,0,0.2)}
.training-content .photo-hero .photo-caption{background:var(--blue);color:var(--white);border-top:2px solid var(--gold);padding:8px 12px;font-size:11px}
.training-content .photo-hero .photo-caption strong{color:var(--gold)}
.training-content .flow-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0;flex-wrap:wrap}
.training-content .flow-box{background:var(--blue);color:var(--white);padding:10px 14px;border-radius:6px;font-size:12px;font-weight:700;text-align:center;min-width:100px}
.training-content .flow-box.orange{background:var(--gold);color:var(--navy)}
.training-content .flow-box.red{background:var(--red)}
.training-content .flow-box.green{background:var(--green)}
.training-content .flow-box.blue{background:#2563eb}
.training-content .flow-arrow{font-size:20px;color:var(--gold);font-weight:900}
.training-content img{max-width:100%;height:auto;border-radius:4px}
@media(max-width:600px){
  .training-content .dot-placard-grid{grid-template-columns:repeat(3,1fr)}
  .training-content .ghs-grid{grid-template-columns:repeat(2,1fr)}
  .training-content .flow-row{flex-direction:column}
  .training-content .flow-arrow{transform:rotate(90deg)}
  .training-content table{font-size:11px}
  .training-content th,.training-content td{padding:5px 6px}
}

/* ── 404 ── */
.page-404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center}
.page-404 h1{font-size:64px;color:var(--blue);font-weight:900}
.page-404 p{color:var(--gray);font-size:18px;margin-top:8px}

/* ── Admin ── */
.admin-header{background:linear-gradient(135deg,var(--navy),#0d1b2a);color:var(--white);padding:20px 24px}
.admin-header h1{font-size:22px;font-weight:800}
.admin-header .subtitle{color:var(--gold);font-size:13px;margin-top:4px}
.admin-tabs{display:flex;gap:0;background:var(--white);border-bottom:2px solid var(--border);overflow-x:auto}
.admin-tabs button{background:none;border:none;padding:12px 20px;font-size:14px;font-weight:600;color:var(--gray);cursor:pointer;border-bottom:3px solid transparent;font-family:inherit;white-space:nowrap}
.admin-tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}
.admin-tabs a.tab-link{display:inline-block;background:none;border:none;padding:12px 20px;font-size:14px;font-weight:600;color:var(--gray);cursor:pointer;border-bottom:3px solid transparent;text-decoration:none;white-space:nowrap}
.admin-tabs a.tab-link:hover{color:var(--blue)}
.admin-panel{padding:20px 24px}

/* ── Training Matrix (admin) ── */
.matrix-wrapper{overflow-x:auto;margin:16px 0}
.matrix{border-collapse:collapse;font-size:12px;width:max-content;min-width:100%}
.matrix th,.matrix td{padding:6px 10px;border:1px solid var(--border);text-align:center;white-space:nowrap}
.matrix th{background:var(--navy);color:var(--white);position:sticky;top:0;font-weight:700;font-size:11px}
.matrix th.module-col{writing-mode:horizontal-tb;text-orientation:initial;padding:6px 4px;font-size:10px;min-width:65px;white-space:nowrap;line-height:1.3}
.matrix td.name-cell{text-align:left;font-weight:700;position:sticky;left:0;background:var(--white);z-index:5;min-width:140px}
.matrix td.pass{background:#d4edda;color:var(--green);font-weight:700}
.matrix td.fail{background:#f8d7da;color:var(--red);font-weight:700}
.matrix td.started{background:#fff3cd;color:var(--orange);font-weight:700}
.matrix td.empty{background:#f8f8f8;color:#ccc}

/* ── Admin: Recent Activity ── */
.activity-list{list-style:none}
.activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.activity-item .a-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.activity-item .a-icon.pass{background:rgba(39,174,96,0.1);color:var(--green)}
.activity-item .a-icon.fail{background:rgba(192,57,43,0.1);color:var(--red)}
.activity-item .a-icon.start{background:rgba(39,116,174,0.1);color:var(--blue)}
.activity-item .a-time{color:var(--gray);font-size:12px;margin-left:auto;white-space:nowrap}

/* ── Admin: Add Crew ── */
.form-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.form-row input,.form-row select{padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;flex:1;min-width:200px}
.form-row button{background:var(--blue);color:var(--white);border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.crew-links{margin-top:16px}
.crew-link-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.crew-link-row .link-name{font-weight:700;min-width:160px}
.crew-link-row .link-url{color:var(--blue);font-family:monospace;font-size:12px;flex:1;word-break:break-all}
.crew-link-row .link-copy{background:var(--gold);color:var(--navy);border:none;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer}

/* ── Login ── */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--navy),var(--dark))}
.login-box{background:var(--white);padding:40px;border-radius:16px;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.login-box h1{font-size:24px;font-weight:900;color:var(--navy);margin-bottom:4px}
.login-box .login-sub{color:var(--gray);font-size:13px;margin-bottom:24px}
.login-box input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:10px;font-size:16px;font-family:inherit;margin-bottom:16px;text-align:center}
.login-box input:focus{outline:none;border-color:var(--blue)}
.login-box button{width:100%;padding:12px;background:var(--blue);color:var(--white);border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.login-box .error{color:var(--red);font-size:13px;margin-top:8px;display:none}

/* ── Print ── */
@media print{
  .page-header,.admin-tabs,.ss-nav,.no-print{display:none!important}
  .matrix th,.matrix td{font-size:9px;padding:3px 5px}
  body{background:#fff}
}

/* ── Responsive ── */
@media(max-width:600px){
  .stats-bar{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .stat-card .stat-num{font-size:24px}
  .module-card{padding:12px}
  .module-card .mc-title{font-size:14px}
  .slide-content h2{font-size:22px}
  .admin-panel{padding:12px}
}

/* ── C52 Mobile accessibility — module content responsive rules (2026-04-13) ── */
/* Targets per-module inline CSS classes used across all 49 modules.        */
/* Uses !important to override module-level inline <style> cascade.         */
@media (max-width: 768px) {
  /* Flex containers stack vertically on phones */
  .flow-row,
  .slide-content .flow-row,
  .photo-row,
  .two-col,
  .three-col {
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Photo blocks full-width, cap height for phone screens */
  .photo-block,
  .photo-hero {
    width: 100% !important;
    margin: 10px 0 !important;
  }
  .photo-block img,
  .photo-hero img {
    width: 100% !important;
    max-height: 260px !important;
    object-fit: contain !important;
  }
  .photo-caption {
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 8px 10px !important;
  }
  /* Tables: enable horizontal scroll instead of crushing columns */
  .slide-content table,
  .slide-content .inspection-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }
  .slide-content table th,
  .slide-content table td {
    padding: 8px 10px !important;
  }
  /* Diagrams: shrink padding, allow overflow scroll */
  .diagram-container {
    padding: 10px !important;
    overflow-x: auto !important;
  }
  .diagram-title {
    font-size: 12px !important;
  }
  /* Callouts: tighter padding, bigger min font for readability */
  .callout,
  .danger-callout,
  .info-callout {
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .callout-title {
    font-size: 13px !important;
  }
  /* Section/sub headers: touch-friendly size */
  .section-header {
    font-size: 14px !important;
    padding: 10px 14px !important;
    line-height: 1.4 !important;
  }
  .sub-header {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  /* Title banner: responsive font */
  .title-banner {
    padding: 14px 18px !important;
  }
  .title-banner h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .title-banner .subtitle {
    font-size: 12px !important;
  }
  /* Body paragraphs: larger base font for outdoor/sunlit reading */
  .slide-content p,
  .slide-content li {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  /* Doc meta header strip: stack */
  .doc-meta {
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  /* Ensure the slideshow container doesn't clip */
  .slide-content {
    padding: 16px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Extra-small phones (≤380px) — further tighten */
@media (max-width: 380px) {
  .title-banner h1 { font-size: 18px !important; }
  .slide-content table { font-size: 12px !important; }
  .photo-block img, .photo-hero img { max-height: 200px !important; }
}