/* GENERATED from web/learn/style.css by scripts/fow_web/build_site_assets.js — do not edit; change the source and re-run. */
/* =====================================================================
   Learn portal styles — inherits FOW dark theme vars from parent pages
   ===================================================================== */
:root{
  --bg:#0d0d0f;--panel:#17171a;--panel2:#1e1e22;
  --border:#2a2a2e;--text:#f2f2f4;--muted:#9a9aa0;
  --accent:#4ea1ff;--green:#26d07c;--red:#ff5b5b;
  --gold:#f5c842;--orange:#f2a93b;
  --learn-sidebar:280px;
  --learn-font:clamp(15px,1.6vw,17px);
  --learn-head:clamp(22px,3vw,30px);
}

/* ── global resets ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:var(--learn-font);line-height:1.7}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── nav (shared topnav pattern) ── */
/* Nav states its own font rather than inheriting the page's — see the note in
   shared/menu.css. No visual change on learn pages, which already use this
   stack; it is here so the two copies of the nav cannot drift apart. */
.topnav{display:flex;align-items:center;flex-wrap:nowrap;background:#0a0a0c;border-bottom:1px solid var(--border);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.topnav a,.topnav .dropbtn{color:#cfd2d6;padding:10px 11px;font-size:13px;font-weight:600;text-decoration:none;background:none;border:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.topnav a:hover,.topnav .dropdown:hover .dropbtn{background:#1c1c20;color:#fff}
.topnav a.active{color:var(--accent)}
.topnav .brand{font-weight:800;color:#fff;font-size:16px;letter-spacing:.5px}
.topnav .navdt{margin-left:auto;color:var(--muted);font-size:12px;padding:0 14px;white-space:nowrap}
.dropdown{position:relative}
.dropdown-content{display:none;position:absolute;left:0;top:100%;min-width:210px;background:var(--panel);
  border:1px solid var(--border);border-radius:0 0 8px 8px;box-shadow:0 10px 24px rgba(0,0,0,.55);z-index:40}
.dropdown-content a{display:block;padding:10px 14px;font-weight:500}
.dropdown-content a:hover{background:#26262b;color:#fff}
.dropdown:hover .dropdown-content,.dropdown.open .dropdown-content{display:block}
.topnav .icon{display:none}
/* The nav is flex-wrap:nowrap, and the hamburger did not arrive until 820px,
   so every width from 821px up to the nav's content width overflowed the
   viewport horizontally — a 1280px laptop scrolled sideways on every learn
   page. Same defect, same fix and the SAME TWO NUMBERS as shared/menu.css, so
   the learn pages and the rest of the site now break identically:
     below 1400px  drop the date, the least load-bearing item
     below 1280px  fall back to the hamburger

   Measured, not chosen — see the note in shared/menu.css before changing
   either number, and keep the two files in step.

   Only the breakpoints changed. The rules inside are exactly as they were —
   note in particular that the learn hamburger renders its dropdowns already
   expanded (display:block), which differs from shared/menu.css's tap-to-open
   and is left alone deliberately. */
@media(max-width:1400px){
  .topnav .navdt{display:none}
  /* The date is what carries margin-left:auto, so hiding it collapses the
     theme switch back against the last menu item. Hand the auto margin over.
     (theme.css does this for the rest of the site, but learn pages do not
     load theme.css — they carry their own light-theme block instead.) */
  .topnav .theme-switch{margin-left:auto}
}
@media(max-width:1280px){
  .topnav .navdt{display:none}
  .topnav>a:not(.brand):not(.icon),.topnav .dropdown{display:none}
  .topnav .icon{display:block;margin-left:auto}
  .topnav.responsive>a,.topnav.responsive .dropdown{display:block;width:100%}
  .topnav.responsive .dropdown-content{position:static;display:block;border:none;box-shadow:none;background:#141417}
  .topnav.responsive .dropdown-content a{padding-left:28px}
}

/* ── portal layout: sidebar + content ── */
.learn-shell{display:flex;min-height:calc(100vh - 46px)}

/* sidebar */
.learn-sidebar{
  width:var(--learn-sidebar);min-width:var(--learn-sidebar);
  background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:calc(100vh - 46px);overflow:hidden;
  flex-shrink:0;
}
.sidebar-search{padding:14px 12px 8px;border-bottom:1px solid var(--border)}
.sidebar-search input{
  width:100%;background:#0d0d0f;border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:9px 12px;font-size:14px;
  outline:none;transition:border-color .2s;
}
.sidebar-search input:focus{border-color:var(--accent)}
.sidebar-search input::placeholder{color:var(--muted)}

.sidebar-filters{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.filter-chip{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--muted);
  transition:all .15s;white-space:nowrap;
}
.filter-chip:hover{border-color:var(--accent);color:var(--accent)}
.filter-chip.active{background:var(--accent);color:#08233f;border-color:var(--accent)}

.sidebar-toc{flex:1;overflow-y:auto;padding:8px 0}
.sidebar-toc::-webkit-scrollbar{width:4px}
.sidebar-toc::-webkit-scrollbar-track{background:transparent}
.sidebar-toc::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.toc-domain{margin-bottom:2px}
.toc-domain-header{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:8px 14px 4px;cursor:pointer;display:flex;align-items:center;gap:6px;
}
.toc-domain-header:hover{color:var(--text)}
.toc-caret{transition:transform .2s;display:inline-block}
.toc-domain.collapsed .toc-caret{transform:rotate(-90deg)}
.toc-domain.collapsed .toc-items{display:none}
.toc-items{}
.toc-item{
  display:flex;align-items:center;gap:8px;padding:7px 14px 7px 22px;
  font-size:13px;color:var(--muted);cursor:pointer;border-left:2px solid transparent;
  transition:all .12s;line-height:1.3;
}
.toc-item:hover{background:#1e1e22;color:var(--text);border-left-color:var(--border)}
.toc-item.active{background:#1a2a3a;color:var(--accent);border-left-color:var(--accent);font-weight:600}
.toc-badge{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:auto;
  opacity:.7;white-space:nowrap;
}
.badge-beginner{background:#1a4a2a;color:#4dbb6a}
.badge-intermediate{background:#3a2a12;color:#f2a93b}
.badge-advanced{background:#3a1a2a;color:#e080b0}
.badge-geo{background:#1a2a4a;color:#4ea1ff;margin-left:4px}

/* random button */
.sidebar-random{padding:10px 12px;border-top:1px solid var(--border)}
.btn-random{
  width:100%;padding:9px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--border);
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s;
}
.btn-random:hover{background:var(--accent);color:#08233f;border-color:var(--accent)}

/* ── main content area ── */
.learn-main{flex:1;min-width:0;display:flex;flex-direction:column}

/* welcome / home screen */
.learn-home{padding:40px 32px;max-width:900px}
.learn-home h1{font-size:var(--learn-head);font-weight:800;margin-bottom:8px;line-height:1.2}
.learn-home .tagline{font-size:18px;color:var(--muted);margin-bottom:32px}
.domain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:32px}
.domain-card{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:18px 16px;cursor:pointer;transition:all .15s;
}
.domain-card:hover{border-color:var(--accent);background:#1a2a3a;transform:translateY(-1px)}
.domain-card .icon{font-size:28px;margin-bottom:8px}
.domain-card .name{font-weight:700;font-size:15px;margin-bottom:4px}
.domain-card .count{font-size:12px;color:var(--muted)}

/* quick picks */
.quick-picks{margin-bottom:32px}
.quick-picks h2{font-size:16px;font-weight:700;color:var(--muted);margin-bottom:12px;letter-spacing:.04em}
.picks-row{display:flex;flex-wrap:wrap;gap:8px}
.pick-tag{
  font-size:13px;padding:6px 14px;border-radius:20px;cursor:pointer;
  border:1px solid var(--border);color:var(--muted);background:transparent;
  transition:all .15s;
}
.pick-tag:hover{border-color:var(--accent);color:var(--accent)}

/* search results overlay */
.search-results{
  position:absolute;left:0;right:0;top:100%;z-index:100;
  background:var(--panel);border:1px solid var(--border);border-top:none;
  border-radius:0 0 10px 10px;max-height:320px;overflow-y:auto;
}
.search-results .sr-item{
  padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;gap:10px;
}
.search-results .sr-item:hover{background:#1e1e22}
.search-results .sr-item:last-child{border-bottom:none}
.sr-name{font-size:14px;font-weight:600}
.sr-meta{font-size:11px;color:var(--muted);margin-top:2px}
.sr-summary{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.no-results{padding:16px 14px;color:var(--muted);font-size:13px;text-align:center}

/* ── topic page ── */
.topic-page{padding:28px 32px;max-width:820px;display:none;flex-direction:column;gap:24px}
.topic-page.visible{display:flex}

.topic-header{border-bottom:1px solid var(--border);padding-bottom:20px}
.topic-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.meta-pill{
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
  border:1px solid var(--border);color:var(--muted);
}
.topic-header h1{font-size:var(--learn-head);font-weight:800;line-height:1.2;margin-bottom:8px}
.topic-header .summary{font-size:18px;color:var(--muted);line-height:1.5}
.topic-header .aliases{font-size:12px;color:var(--muted);margin-top:8px;opacity:.7}

.read-time{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:10px}

/* section blocks */
.topic-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px}
.topic-section h2{font-size:18px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.topic-section h2 .s-icon{font-size:20px}
.topic-section p{font-size:var(--learn-font);line-height:1.7;margin-bottom:12px}
.topic-section p:last-child{margin-bottom:0}

/* key takeaways */
.takeaway-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.takeaway-list li{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--panel2);border-radius:8px;padding:10px 14px;font-size:var(--learn-font);
}
.takeaway-list li::before{content:"✓";color:var(--green);font-weight:800;margin-top:1px;flex-shrink:0}

/* India vs US comparison table */
.compare-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.compare-table th{background:var(--panel2);padding:10px 12px;text-align:left;font-weight:700;
  border-bottom:2px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.compare-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.compare-table tr:last-child td{border-bottom:none}
.compare-table .india{color:#ff9933}
.compare-table .us{color:#4ea1ff}

/* FAQ accordion */
.faq-list{display:flex;flex-direction:column;gap:6px}
.faq-item{background:var(--panel2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.faq-q{
  padding:13px 16px;cursor:pointer;font-weight:600;font-size:var(--learn-font);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  transition:background .15s;
}
.faq-q:hover{background:#26262b}
.faq-caret{transition:transform .2s;flex-shrink:0;color:var(--muted)}
.faq-item.open .faq-caret{transform:rotate(180deg)}
.faq-a{display:none;padding:0 16px 14px;font-size:15px;color:var(--muted);line-height:1.6}
.faq-item.open .faq-a{display:block}

/* See Also cards */
.see-also-grid{display:flex;flex-wrap:wrap;gap:8px}
.sa-card{
  background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;cursor:pointer;transition:all .15s;min-width:140px;flex:1;max-width:220px;
}
.sa-card:hover{border-color:var(--accent);background:#1a2a3a}
.sa-card .sa-name{font-weight:600;font-size:13px;color:var(--accent)}
.sa-card .sa-summary{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}

/* quiz skeleton */
.quiz-block{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:16px}
.quiz-q{font-weight:600;font-size:var(--learn-font);margin-bottom:12px}
.quiz-options{display:flex;flex-direction:column;gap:6px}
.quiz-opt{
  padding:9px 14px;border-radius:8px;border:1px solid var(--border);
  cursor:pointer;font-size:14px;transition:all .15s;background:transparent;color:var(--text);text-align:left;
}
.quiz-opt:hover{border-color:var(--accent);background:#1a2a3a}
.quiz-opt.correct{border-color:var(--green);background:#0d2a18;color:var(--green)}
.quiz-opt.wrong{border-color:var(--red);background:#2a0d0d;color:var(--red)}
.quiz-explain{margin-top:10px;font-size:13px;color:var(--muted);display:none;line-height:1.5}
.quiz-explain.show{display:block}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.quiz-progress{font-size:12px;color:var(--muted)}
.btn-quiz{
  padding:7px 18px;border-radius:8px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.btn-quiz:hover{background:var(--accent);color:#08233f;border-color:var(--accent)}

/* live data placeholder */
.live-widget{background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  padding:20px;text-align:center;color:var(--muted);font-size:13px}
.live-widget .lw-icon{font-size:32px;margin-bottom:8px}

/* breadcrumb */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.4}

/* placeholder content blocks */
.placeholder-block{background:var(--panel2);border:1px solid var(--border);border-radius:12px;
  padding:32px;text-align:center;color:var(--muted)}
.placeholder-block p{font-size:14px;line-height:1.6;max-width:460px;margin:0 auto}

/* light theme overrides */
:root[data-theme="light"]{
  --bg:#f4f5f7;--panel:#ffffff;--panel2:#eef0f3;
  --border:#d8dbe0;--text:#1c2128;--muted:#6b7280;
  --accent:#1f6fe0;--green:#1a9f54;--red:#d83a3a;
  --gold:#b8860b;
}
:root[data-theme="light"] .topnav{background:#fff;border-bottom-color:#d8dbe0}
:root[data-theme="light"] .topnav a,:root[data-theme="light"] .topnav .dropbtn{color:#374151}
:root[data-theme="light"] .topnav a:hover,:root[data-theme="light"] .topnav .dropdown:hover .dropbtn{background:#f3f4f6;color:#111}
:root[data-theme="light"] .sidebar-search input{background:#f9fafb;border-color:#d8dbe0;color:#1c2128}
:root[data-theme="light"] .toc-item:hover{background:#eef0f3}
:root[data-theme="light"] .toc-item.active{background:#dbeafe}
:root[data-theme="light"] .dropdown-content{background:#fff}
:root[data-theme="light"] .dropdown-content a:hover{background:#f3f4f6;color:#111}
:root[data-theme="light"] .sa-card:hover,:root[data-theme="light"] .quiz-opt:hover{background:#dbeafe}

/* responsive */
@media(max-width:820px){
  .learn-sidebar{width:100%;min-width:0;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border)}
  .learn-shell{flex-direction:column}
  .learn-sidebar{max-height:60vh}
  .topic-page,.learn-home{padding:20px 16px}
}

/* ── the completion control ──────────────────────────────────────────────
   Added 7 Sep 2026. Every course renders this same button, from
   FOWProgress.buttonHTML(), in the same place with the same words — before
   this, three courses drew their own green button inline, two drew a
   generic .btn toggle and two had none at all.

   It stays VISIBLE once done and becomes the undo, because completion is
   reversible in every course now. The old markup hid it on completion,
   which is why "undo" needed a control that was not there. */
.btn-complete{
  padding:10px 22px;border-radius:8px;background:var(--green);color:#04301c;
  border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;margin-bottom:18px
}
.btn-complete:hover{filter:brightness(1.06)}
.btn-complete.on{
  background:transparent;color:var(--muted);border-color:var(--border);font-weight:500
}
.btn-complete.on:hover{border-color:var(--red);color:var(--red);filter:none}
:root[data-theme="light"] .btn-complete{color:#fff}

/* ── the filter note ─────────────────────────────────────────────────────
   Added 7 Sep 2026 with sidebar search. Shown only while a search or level
   chip is narrowing the list, because a suddenly short sidebar otherwise
   reads as a course that has lost lessons rather than one being filtered.
   .sidebar-search, .sidebar-filters and .filter-chip already existed here
   for the topic portal and are reused unchanged. */
.filter-note{
  padding:8px 14px;font-size:11px;color:var(--muted);
  border-bottom:1px solid var(--border);line-height:1.5
}
.filter-note button{
  background:none;border:none;color:var(--accent);font:inherit;font-size:11px;
  cursor:pointer;text-decoration:underline;padding:0;margin-left:5px
}