/* ============================================================
   AdaLogic Workbench — edge-to-edge engineering shell.
   Deep-blue + white, 1px rules, monospace data. Left rail is
   collapsible; a reserved ad column sits on the right (desktop)
   or collapses to inline/anchor slots (mobile). No dead margins.
   NOTE: selectors carry body.family-safe to beat legacy rules.
   ============================================================ */

:root {
  --wb-blue: #1cb0f6;
  --wb-deep: #0f3557;
  --wb-ink: #16273a;
  --wb-mut: #5b7186;
  --wb-line: #d7e6f5;
  --wb-panel: #f5faff;
  --wb-mono: "Consolas", "Cascadia Mono", "Courier New", monospace;
  --wb-rail-w: 216px;
  --wb-adrail-w: 304px;
}

html { height: 100%; }
body.family-safe {
  margin: 0;
  min-height: 100%;
  background: #fff;
  padding-bottom: 0 !important; /* kill the old bottom-dock spacer */
}

/* Kill the old centered container — edge to edge. */
body.family-safe #container {
  display: grid;
  grid-template-columns: var(--wb-rail-w) minmax(0, 1fr) var(--wb-adrail-w);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "rail content ads"
    "rail footer ads";
  min-height: 100vh;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  overflow: visible;
  background: #fff;
}

/* ---------- left rail ---------- */
body.family-safe #header {
  grid-area: rail;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--wb-deep);
  color: #dbeafe;
  border-right: 1px solid #1e4a73;
  padding: 0;
  font-family: var(--wb-mono);
  font-size: 13px;
}
body.family-safe #header .fcbar {
  position: static !important;   /* beat alb-layout's sticky/fixed bars */
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;    /* adalogic.css docks it bottom-center via translateX(-50%) */
  z-index: auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.family-safe #header .fcbar .fcbrand {
  display: block !important;
  flex: 0 0 auto !important;
  padding: 14px 14px 12px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-decoration: none;
  border: 0 !important;
  border-bottom: 1px solid #1e4a73 !important;
  white-space: normal !important;
  background: transparent !important;
  font-family: var(--wb-mono) !important;
}
body.family-safe #header .fcnav { flex: 1; overflow-y: auto; align-self: stretch; }
body.family-safe #header .fcnav .fcmain {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}
body.family-safe #header .fcmain li { list-style: none; flex: 0 0 auto !important; min-width: 0; position: static !important; }
body.family-safe #header .fcbar .ftab {
  display: block !important;
  padding: 7px 14px !important;
  color: #b9d8f2 !important;
  text-decoration: none;
  font-size: 13px !important;
  font-family: var(--wb-mono) !important;
  letter-spacing: .02em !important;
  min-height: 0 !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
body.family-safe #header .fcbar .ftab:hover,
body.family-safe #header .fcbar .ftab:focus-visible {
  background: #164266 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.family-safe #header .fcbar .ftab.ftab-current,
body.family-safe #header .fcbar .ftab-current {
  color: #fff !important;
  border-left-color: var(--wb-blue) !important;
  background: #164266 !important;
  box-shadow: none !important;
}
body.family-safe #header .fcsys {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-top: 1px solid #1e4a73 !important;
  white-space: normal !important;
}
body.family-safe #header .language-switch select {
  width: 100%;
  min-width: 0;
  background: #0f3554;
  color: #cfe8fb;
  border: 1px solid #2c5f8f;
  border-radius: 4px;
  padding: 7px 8px;
  font-family: var(--wb-mono);
  font-size: 12px;
  cursor: pointer;
}
body.family-safe .locale-fallback-notice {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #d6a84b;
  background: #fff7dd;
  color: #5e430b;
  font-family: var(--wb-mono);
  font-size: 13px;
}
html[dir="rtl"] body.family-safe #content,
html[dir="rtl"] body.family-safe #footer {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] body.family-safe #header .fcmain {
  direction: rtl;
}
html[dir="rtl"] body.family-safe pre,
html[dir="rtl"] body.family-safe code,
html[dir="rtl"] body.family-safe .code,
html[dir="rtl"] body.family-safe input,
html[dir="rtl"] body.family-safe textarea {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] body.family-safe .language-switch select {
  direction: rtl;
  text-align: right;
}
body.family-safe #header .fcsys .skin-sysbtn,
body.family-safe #header .skin-sysbtn {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  background: #164266 !important;
  color: #cfe8fb !important;
  border: 1px solid #2c5f8f !important;
  border-radius: 4px !important;
  padding: 7px 10px !important;
  font-family: var(--wb-mono) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  cursor: pointer;
  box-shadow: none !important;
}
body.family-safe #header .skin-sysbtn:hover { background: var(--wb-blue) !important; color: #06283f !important; }

/* ---------- content column ---------- */
body.family-safe #content {
  grid-area: content;
  min-width: 0;
  padding: 22px 28px 40px;
  background: #fff;
}
body.family-safe #content .marquee {
  border: 1px solid var(--wb-line) !important;
  border-left: 4px solid var(--wb-blue) !important;
  border-radius: 0 !important;
  background: var(--wb-panel) !important;
  background-image: none !important;
  color: var(--wb-deep);
  font-family: var(--wb-mono);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 6px 12px;
  margin: 0 0 18px;
}
body.family-safe #content .marquee p { margin: 0; }
body.family-safe #content h1,
body.family-safe #content #pageTitleH1 {
  color: var(--wb-deep) !important;
  font-family: var(--wb-font, "Segoe UI", system-ui, sans-serif) !important;
  font-style: normal !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  border: 0 !important;
  border-bottom: 2px solid var(--wb-blue) !important;
  padding: 0 0 8px !important;
  margin: 0 0 12px !important;
}
body.family-safe #content h2 {
  color: var(--wb-deep);
  font-family: var(--wb-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wb-line);
  padding-bottom: 5px;
  margin: 28px 0 12px;
}
body.family-safe #content a { color: #0284c7; }

/* ---------- right ad rail ---------- */
body.family-safe #adRail {
  grid-area: ads;
  border-left: 1px solid var(--wb-line);
  background: var(--wb-panel);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wb-ad {
  border: 1px dashed #9cc4e4;
  background: #fff;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fb6d4;
  font-family: var(--wb-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wb-ad.wb-ad-sticky { position: sticky; top: 10px; }
.wb-ad[hidden], .wb-ad-inline[hidden] { display: none; }

/* ---------- footer ---------- */
body.family-safe #footer {
  grid-area: footer;
  padding: 0 28px 24px;
  color: var(--wb-mut);
  font-size: 13px;
  background: #fff;
}
body.family-safe #footer hr { border: 0; border-top: 1px solid var(--wb-line); }

/* ---------- rail toggle ---------- */
#railToggle {
  position: fixed;
  z-index: 60;
  left: 8px; bottom: 8px;
  width: 34px; height: 34px;
  border: 1px solid #2c5f8f;
  border-radius: 4px;
  background: var(--wb-deep);
  color: #cfe8fb;
  font-family: var(--wb-mono);
  font-size: 15px;
  cursor: pointer;
  display: none;
}
body.family-safe.rail-collapsed #container { grid-template-columns: 0 minmax(0, 1fr) var(--wb-adrail-w); }
body.family-safe.rail-collapsed #header { display: none; }
body.family-safe.rail-collapsed #railToggle { display: block; }

/* ============================================================
   Mobile / narrow: rail becomes a hidden drawer, ad rail folds
   into inline slots, sticky bottom anchor.
   ============================================================ */
@media (max-width: 1100px) {
  body.family-safe #container {
    display: block;
    min-height: 100vh;
  }
  body.family-safe #header {
    position: fixed;
    z-index: 70;
    left: 0; top: 0; bottom: 0;
    width: min(280px, 84vw);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,.25);
  }
  body.family-safe.rail-open #header { transform: translateX(0); }
  #railToggle {
    display: block;
    left: auto; right: 10px; bottom: 96px; /* sit above the anchor ad */
    width: 44px; height: 44px; font-size: 20px;
  }
  body.family-safe.rail-collapsed #railToggle { display: block; }
  #railScrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(8, 30, 50, .45);
    display: none;
  }
  body.family-safe.rail-open #railScrim { display: block; }
  body.family-safe #content { padding: 14px 14px 120px; }
  body.family-safe #footer { padding: 0 14px 120px; }
  body.family-safe #adRail { display: none; } /* in-flow inline slots + anchor instead */
  #anchorAd {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    min-height: 56px;
    border-top: 1px solid var(--wb-line);
    background: #fff;
    align-items: center;
  }
  body.family-safe.anchor-closed #anchorAd { display: none; }
}

@media (min-width: 1101px) {
  #anchorAd, #railScrim { display: none; }
  #railToggle { left: 8px; bottom: 8px; right: auto; }
}

/* Inline ad slot for use inside page flow */
.wb-ad-inline {
  border: 1px dashed #9cc4e4;
  background: var(--wb-panel);
  min-height: 90px;
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fb6d4;
  font-family: var(--wb-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.news-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:18px 0; }
.news-controls label { display:grid; gap:4px; }
.news-controls select { padding:9px; border:1px solid #9cc4e4; background:#fff; }
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.news-card { border:1px solid #9cc4e4; background:#fff; padding:14px; overflow:hidden; }
.news-preview { display:block; width:calc(100% + 28px); margin:-14px -14px 12px; padding:0; border:0; background:#dceaf4; aspect-ratio:16/9; overflow:hidden; cursor:pointer; }
.news-preview img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.news-preview:hover img, .news-preview:focus img { transform:scale(1.025); }
.news-card h2 { font-size:1rem; margin:5px 0; }
.news-meta { font-size:.76rem; color:#48657a; }
.news-card p { font-size:.88rem; }
.news-card video { width:100%; max-height:220px; }
.live { color:#b42318; font-weight:700; }
.news-status { padding:12px; background:#eef7ff; margin-bottom:14px; }
.news-source { font-weight:700; }
.news-watch { margin-top:8px; padding:8px 12px; border:1px solid #2c5f8f; background:#164266; color:#fff; cursor:pointer; }
.news-player[hidden] { display:none; }
.news-player { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.8); }
.news-player-panel { width:min(100%,960px); background:#fff; padding:12px; }
.news-player-close { float:right; margin-bottom:8px; padding:7px 12px; }
.news-player-frame { clear:both; aspect-ratio:16/9; background:#000; }
.news-player-frame iframe, .news-player-frame video { width:100%; height:100%; border:0; }
.news-player-fallback { margin:9px 0 0; }
.news-load-more { display:block; margin:18px auto; padding:10px 24px; border:1px solid #2c5f8f; background:#164266; color:#fff; cursor:pointer; }
.news-load-more[hidden] { display:none; }

/* ============================================================
   Legacy overrides: square off the bubbly bits so the whole
   site reads like one technical manual.
   ============================================================ */
body.family-safe #content .card,
body.family-safe #content .panel,
body.family-safe #content .widget,
body.family-safe #content .alb-hero,
body.family-safe #content .alb-quick > a,
body.family-safe #content .alb-ex-card,
body.family-safe #content .alb-showcase-card,
body.family-safe #content .alb-person,
body.family-safe #content .aw-card,
body.family-safe #content .learn-hero {
  border-radius: 4px !important;
  box-shadow: none !important;
}
body.family-safe #content .alb-hero,
body.family-safe #content .learn-hero {
  border: 1px solid var(--wb-line) !important;
  background: var(--wb-panel) !important;
  padding: 18px !important;
}
body.family-safe #content .alb-btn-primary,
body.family-safe #content .alb-btn,
body.family-safe #content .psx-btn,
body.family-safe #content button.begin {
  border-radius: 3px !important;
  font-family: var(--wb-mono);
}

/* ============================================================
   Learn engine overrides — the vanilla Academy (learn.html)
   drops the bubbly game shell for the workbench look:
   flat panels, square corners, mono labels, no sparkles.
   ============================================================ */
body.family-safe #content .learn-hero {
  border: 1px solid var(--wb-line) !important;
  background: var(--wb-panel) !important;
  color: var(--wb-ink) !important;
}
body.family-safe #content .learn-hero h1 { color: var(--wb-deep) !important; }
body.family-safe #content .learn-hero p { color: var(--wb-mut) !important; }
body.family-safe #content .learn-hero-sparkles { display: none !important; }
body.family-safe #content .learn-hero .mascot { image-rendering: auto; }
body.family-safe #content .learn-pill,
body.family-safe #content .learn-stat {
  border-radius: 3px !important;
  font-family: var(--wb-mono);
  background: #fff !important;
  border: 1px solid var(--wb-line) !important;
  box-shadow: none !important;
}
body.family-safe #content .learn-progress-track {
  border-radius: 0 !important;
  background: #e8eef4 !important;
  border: 1px solid var(--wb-line);
}
body.family-safe #content .learn-progress-fill {
  border-radius: 0 !important;
  background: var(--wb-blue) !important;
}
body.family-safe #content .learn-mode-btn,
body.family-safe #content .learn-prog-btn {
  border-radius: 3px !important;
  font-family: var(--wb-mono);
  font-size: 12px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--wb-line) !important;
  box-shadow: none !important;
  background: #fff !important;
  color: var(--wb-mut) !important;
}
body.family-safe #content .learn-mode-btn.on,
body.family-safe #content .learn-prog-btn.on {
  background: var(--wb-deep) !important;
  color: #fff !important;
  border-color: var(--wb-deep) !important;
}
body.family-safe #content .learn-btn {
  border-radius: 3px !important;
  box-shadow: none !important;
  font-family: var(--wb-mono);
}
body.family-safe #content .learn-btn-primary,
body.family-safe #content .learn-btn-ok {
  background: var(--wb-blue) !important;
  border-color: #0e8fd0 !important;
}
body.family-safe #content .learn-teach,
body.family-safe #content .learn-console,
body.family-safe #content .learn-guide,
body.family-safe #content .learn-path,
body.family-safe #content .topic-card,
body.family-safe #content .learn-feedback {
  border-radius: 4px !important;
  box-shadow: none !important;
  border: 1px solid var(--wb-line) !important;
}
body.family-safe #content .learn-path-list li {
  border-radius: 3px !important;
  box-shadow: none !important;
}
body.family-safe #content .learn-path-list li.on {
  border-left-color: var(--wb-blue) !important;
}
body.family-safe #content .learn-editor {
  font-family: var(--wb-mono) !important;
  border-radius: 0 !important;
}
body.family-safe #content .learn-gutter { border-radius: 0 !important; font-family: var(--wb-mono); }
body.family-safe #content .learn-output { font-family: var(--wb-mono); font-size: 12px; }
body.family-safe #content .learn-map-hud {
  font-family: var(--wb-mono);
  background: var(--wb-deep) !important;
  border-radius: 3px !important;
}
body.family-safe #content .learn-constellation,
body.family-safe #content .learn-arcade,
body.family-safe #content .learn-topic {
  border-top: 1px solid var(--wb-line);
}

/* Profile page — profile.css caps the app at a centered 780px card;
   the workbench takes it edge to edge and squares off the hero. */
body.family-safe #content .prof-app {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.family-safe #content .prof-hero {
  border-radius: 4px !important;
  box-shadow: none !important;
  border: 1px solid var(--wb-line) !important;
  margin: 0 0 18px !important;
}

/* learn/base.css carries an attribute selector that would beat the
   bare shell rules above — pin the learn page to the same grid. */
body.family-safe[data-page="learn"] #container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body.family-safe[data-page="learn"] #content {
  padding: 22px 28px 40px;
}
@media (max-width: 1100px) {
  body.family-safe[data-page="learn"] #container {
    padding-bottom: 0 !important;
  }
  body.family-safe[data-page="learn"] #content {
    padding: 14px 14px 120px;
  }
}