:root{
  --bg:#0b1220; --panel:#111a2e; --line:#223054; --text:#e9f0ff; --muted:#9bb1d8;
  --cta:#0c1426;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#070c16 0%,#0b1220 60%,#070c16 100%);color:var(--text)}
a{color:inherit;text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:14px;display:grid;gap:12px}
.topbar{border:1px solid var(--line);background:rgba(17,26,46,.78);border-radius:18px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand b{font-size:14px}
.brand span{font-size:12px;color:var(--muted)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--cta);padding:9px 12px;border-radius:14px;font-weight:800;font-size:12.5px;display:inline-block}
.btn:hover{border-color:#2f437a}
.panel{border:1px solid var(--line);background:rgba(17,26,46,.78);border-radius:18px;overflow:hidden}
.hd{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.kicker{color:var(--muted);font-size:12px}
.bd{padding:14px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(max-width:900px){.grid{display:grid;grid-template-columns:1fr;gap:12px}}
.hero{display:grid;gap:10px}
h1{margin:0;font-size:18px}
h2{margin:0;font-size:15px}
p{margin:0;color:var(--muted);line-height:1.5;font-size:13px}
.cardlist{display:grid;gap:10px}
.modcard{border:1px solid var(--line);background:rgba(12,20,38,.55);border-radius:16px;padding:12px;display:grid;gap:8px}
.modcard b{font-size:13px}
.meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.pill{border:1px solid var(--line);background:#0c1426;border-radius:999px;padding:4px 10px}
.figure{background:#eaf2f8;border-radius:16px;overflow:hidden;border:1px solid #d6deea}
.figure img{display:block;width:100%;height:auto}

/* Figure helpers for text/diagram cards */
.figPad{padding:14px}
.miniDiagram{display:grid;gap:10px;color:#0b1220}
.miniDiagram .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.miniDiagram .tag{font-weight:900;font-size:12px;background:rgba(255,255,255,.75);border:1px solid #d6deea;border-radius:999px;padding:6px 10px}
.miniDiagram .note{font-size:12px;line-height:1.35;color:#0b1220;opacity:.85}
.miniDiagram .arrow{font-size:22px;font-weight:900;letter-spacing:2px}
.caption{display:grid;gap:8px;padding:12px}
.caption h2{font-size:16px}
.block{border:1px dashed #2a3a64;background:rgba(12,20,38,.55);border-radius:16px;padding:12px;display:grid;gap:8px}
.small{font-size:12px;color:var(--muted);line-height:1.45}
.footer{padding:10px 14px;color:var(--muted);font-size:12px;text-align:center}

.thumbRow{display:flex;gap:10px;align-items:center}
.thumb{width:92px;min-width:92px;height:62px;border-radius:12px;overflow:hidden;border:1px solid #d6deea;background:#eaf2f8}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.modcard .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}


/* --- Mobile-first enhancements --- */
:root{ --radius:18px; }
.wrap{padding:12px; gap:10px}
.topbar{border-radius:var(--radius)}
.panel{border-radius:var(--radius)}
.btn{min-height:44px; padding:10px 14px; font-size:13px; border-radius:14px; touch-action:manipulation}
.btnrow{gap:10px}
.hd{padding:10px 12px}
.bd{padding:12px}
.figure{border-radius:16px}
.caption{padding:12px}
.caption h2{font-size:16px; line-height:1.25}
.small{font-size:13px; line-height:1.55}
.thumb{width:112px; min-width:112px; height:76px; border-radius:14px}
.pill{padding:5px 10px}
/* Make landing grid stack on mobile (already does), improve spacing */
@media(max-width:900px){
  .wrap{padding:10px}
  .topbar{padding:12px}
  .grid{display:grid;grid-template-columns:1fr;gap:12px}
}
/* Sticky bottom nav for card pages */
.bottomNav{
  position:sticky; bottom:0; z-index:50;
  padding:10px max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  background:rgba(11,18,32,.92);
  border-top:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.bottomNavInner{max-width:980px;margin:0 auto;display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.bottomNavInner .btn{flex:1; text-align:center}
@media(min-width:700px){
  .bottomNavInner{justify-content:flex-end}
  .bottomNavInner .btn{flex:0}
}
/* Make modcards more thumb-friendly on small screens */
.modcard{padding:12px}
.thumbRow{align-items:flex-start}
.thumbRow > div:last-child{min-width:0}
.modcard b{font-size:14px; line-height:1.25}


/* Dropdown sections on Module Home */
.drop{border:1px solid var(--line);background:rgba(17,26,46,.55);border-radius:14px;overflow:hidden}
.drop + .drop{margin-top:12px}
.drop>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:800}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary:after{content:"▾";color:var(--muted);font-weight:700}
.drop[open]>summary:after{content:"▴"}
.dropBody{padding:10px 10px 2px;display:grid;gap:10px}

/* DP Operations list: text-only (hide thumbnails) */
.dp-ops .thumb{display:none !important;}
.dp-ops .thumbRow{gap:0;}


/* Learn more link (used on each card) */
.learnMore{
  margin: 14px 0 6px;
  text-align: center;
}
.learnMoreLink{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  text-decoration: none;
  font-weight: 600;
}
.learnMoreLink:hover{
  text-decoration: underline;
}



/* Keep topbar tidy on small screens */
@media (max-width:520px){
  .topbar .brand{align-items:flex-start}
  .oa-logo img{height:38px}
  .oa-badge{font-size:11px;padding:5px 9px}
}


/* Seafarer-portal style header for Educational Modules */
.topbar .brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.oaAppBrand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.oaIcon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  letter-spacing:.3px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  flex:0 0 auto;
}
.oaBrandText{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
}
.oaBrandTitle{
  font-weight:800;
  font-size:16px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.oaBrandOffshore{color:rgba(255,255,255,.92);}
.oaBrandAtlas{color:#4aa3ff;}
.oaBrandSub{
  font-size:12px;
  color:rgba(255,255,255,.60);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile tweaks */
@media (max-width:520px){
  .oaIcon{width:32px;height:32px;border-radius:11px}
  .oaBrandTitle{font-size:15px}
  .oaBrandSub{font-size:11px}
}


/* Mobile layout refinements */
@media (max-width:520px){
  .topbar{padding:10px 12px}
  .btnrow{gap:6px}
  .btnrow .link{padding:8px 10px;font-size:12px}
  .wrap{padding:12px}
}