/* ===========================================================================
   DydactK — the shared system.
   ---------------------------------------------------------------------------
   Loaded by every page on the site, including the two halls, which keep their
   own interiors. Everything here is prefixed `dk-` so it can sit on top of the
   investing chapters' own stylesheet without a single collision.

   The palette and the type are the Investing Academy's, promoted to the whole
   school: they were the more developed system and the one the owner asked to
   keep. The library's mahogany and gilt survive as the Library hall's accent
   rather than as a second, competing scheme.
   =========================================================================== */

:root {
  --dk-paper: #f6f7f4;
  --dk-panel: #ffffff;
  --dk-tint: #e7f0e9;
  --dk-tint-2: #f0f4ee;
  --dk-ink: #17332b;
  --dk-green: #1e5a46;
  --dk-green-soft: #3e7a62;
  --dk-brass: #a97e2f;
  --dk-brass-tint: #f3e7ce;
  --dk-coral: #c4552f;
  --dk-coral-tint: #f7e8e0;
  --dk-muted: #5c6b62;
  --dk-line: #d8dfd6;
  --dk-line-strong: #b9c4b8;

  /* The Library hall, kept from the bookshelf it grew out of. */
  --dk-room: #241e19;
  --dk-room-deep: #17120e;
  --dk-mahogany: #5a3423;
  --dk-mahogany-light: #74452e;
  --dk-ivory: #eae1cf;
  --dk-gilt: #c9a24b;

  --dk-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --dk-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --dk-r: 12px;
  --dk-r-lg: 18px;
  --dk-shadow: 0 1px 2px rgba(23, 51, 43, 0.06), 0 8px 24px -12px rgba(23, 51, 43, 0.18);
  --dk-shadow-lift: 0 2px 4px rgba(23, 51, 43, 0.08), 0 16px 36px -14px rgba(23, 51, 43, 0.26);
  --dk-bar-h: 52px;
}

/* ------------------------------------------------------------------ reset --
   `border-box` was missing, and its absence is invisible until something has
   both `width: 100%` and padding — at which point it is 44px wider than its
   parent and the whole page scrolls sideways. The Academy's own stylesheet
   always had this; the shared one did not, so every page written against the
   shared one inherited the bug.

   Scoped to our own pages and our own components so the halls' interiors, which
   set their own, are untouched. */
.dk-page,
.dk-page *,
.dk-page *::before,
.dk-page *::after,
.dk-bar,
.dk-bar * { box-sizing: border-box; }

/* --------------------------------------------------------------- language --
   The same mechanism the investing chapters already use, lifted to the shell so
   one toggle switches the whole site at once: both halves of every string are
   in the markup, and the body attribute decides which is shown. It works with
   no JavaScript, inside SVG, and without a round trip. */
/*
   Written as "hide the wrong one" rather than "hide, then un-hide", and with
   the class tripled on purpose.

   The obvious form — `.dk-es { display: none }` plus a `display: revert` to
   bring it back — has bitten this site three times. Any ordinary page rule that
   happens to target the element, `.figures span { display: block }` or
   `.hall .t span { display: block }`, out-specifies a single class and prints
   BOTH languages at once. It looks like a content mistake rather than a CSS
   one, which is why it kept getting through.

   `.dk-es.dk-es.dk-es` is (0,3,0) and beats anything a page is likely to write.
   And because each span is only ever HIDDEN, never un-hidden, the visible one
   keeps whatever display the page gave it — no `revert`, nothing to undo.
*/
body:not([data-lang="es"]) .dk-es.dk-es.dk-es { display: none; }
body[data-lang="es"] .dk-en.dk-en.dk-en { display: none; }

/* ------------------------------------------------------------------ shell -- */

.dk-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--dk-bar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: rgba(23, 51, 43, 0.97);
  color: var(--dk-paper);
  font-family: var(--dk-text);
  font-size: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@supports (backdrop-filter: blur(10px)) {
  .dk-bar { background: rgba(23, 51, 43, 0.9); }
}

.dk-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  font-family: var(--dk-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.dk-brand svg { width: 26px; height: 26px; display: block; }
.dk-brand b { font-weight: 600; }
.dk-brand i { font-style: normal; color: var(--dk-brass); }

.dk-halls { display: flex; gap: 2px; margin-left: 10px; min-width: 0; }
.dk-halls a {
  color: rgba(246, 247, 244, 0.68);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.dk-halls a:hover { color: var(--dk-paper); background: rgba(246, 247, 244, 0.1); }
.dk-halls a[aria-current="page"] { color: #fff; background: rgba(201, 162, 75, 0.22); }

.dk-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.dk-lang {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(246, 247, 244, 0.8);
  background: transparent;
  border: 1px solid rgba(246, 247, 244, 0.24);
  border-radius: 99px;
  padding: 5px 11px;
  cursor: pointer;
  transition: 0.15s;
}
.dk-lang:hover { color: #fff; border-color: rgba(246, 247, 244, 0.5); }

.dk-account { position: relative; }
.dk-account > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--dk-paper);
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 4px;
  border-radius: 99px;
  cursor: pointer;
}
.dk-account > button:hover { background: rgba(246, 247, 244, 0.1); }
.dk-avatar {
  position: relative;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dk-green-soft);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  flex: 0 0 auto;
}
.dk-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.dk-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 218px;
  background: var(--dk-panel);
  color: var(--dk-ink);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-r);
  box-shadow: var(--dk-shadow-lift);
  padding: 6px;
  display: none;
}
.dk-menu[data-open="true"] { display: block; }
.dk-menu .dk-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--dk-line);
  margin-bottom: 6px;
}
.dk-menu .dk-menu-head b { display: block; font-family: var(--dk-display); font-size: 14.5px; }
.dk-menu .dk-menu-head span { display: block; font-size: 12px; color: var(--dk-muted); word-break: break-all; }
.dk-menu a,
.dk-menu button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--dk-ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.dk-menu a:hover,
.dk-menu button:hover { background: var(--dk-tint-2); color: var(--dk-green); }

.dk-signin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--dk-ink);
  background: var(--dk-paper);
  border: 0;
  border-radius: 99px;
  padding: 7px 14px;
  cursor: pointer;
  transition: 0.15s;
}
.dk-signin:hover { background: #fff; box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.3); }
.dk-signin svg { width: 15px; height: 15px; }

/* A thin brass hairline under the bar — the only ornament, and it does work:
   it separates the shell from a hall interior of any colour. */
.dk-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dk-brass), transparent);
  opacity: 0.55;
}

/* ------------------------------------------------------------ page basics -- */

.dk-page {
  font-family: var(--dk-text);
  color: var(--dk-ink);
  background: var(--dk-paper);
  font-size: 17px;
  line-height: 1.68;
  margin: 0;
}
.dk-wrap { max-width: 1020px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }
.dk-narrow { max-width: 720px; }

.dk-page h1,
.dk-page h2,
.dk-page h3 { font-family: var(--dk-display); font-weight: 600; line-height: 1.14; letter-spacing: -0.012em; }

.dk-kicker {
  font-family: var(--dk-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--dk-brass);
  margin-bottom: 10px;
}
.dk-sub { color: var(--dk-muted); font-size: 18.5px; max-width: 60ch; }

.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 99px;
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.16s;
}
.dk-btn-primary { background: var(--dk-green); color: #fff; }
.dk-btn-primary:hover { background: #17493a; box-shadow: var(--dk-shadow-lift); transform: translateY(-1px); }
.dk-btn-ghost { background: var(--dk-panel); color: var(--dk-green); border-color: var(--dk-line-strong); }
.dk-btn-ghost:hover { border-color: var(--dk-green); box-shadow: var(--dk-shadow); }
.dk-btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.dk-btn-google:hover { box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3); background: #f8f9fa; }
.dk-btn-google svg { width: 18px; height: 18px; }
.dk-btn[disabled] { opacity: 0.55; pointer-events: none; }

.dk-note {
  margin: 18px 0;
  padding: 14px 18px;
  background: var(--dk-tint-2);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-r);
  font-size: 15px;
  max-width: 68ch;
}
.dk-note.dk-warn { background: var(--dk-coral-tint); border-color: #e4c3b4; }
.dk-note.dk-good { background: var(--dk-tint); border-color: #bcd6c6; }
.dk-note b { font-family: var(--dk-display); color: var(--dk-green); }
.dk-note.dk-warn b { color: var(--dk-coral); }

/* ----------------------------------------------------------------- footer -- */

.dk-foot {
  margin-top: 90px;
  border-top: 1px solid var(--dk-line);
  background: var(--dk-tint-2);
  font-size: 13.5px;
  color: var(--dk-muted);
}
.dk-foot .dk-wrap { padding-top: 34px; padding-bottom: 46px; display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: baseline; }
.dk-foot a { color: var(--dk-muted); text-decoration: none; }
.dk-foot a:hover { color: var(--dk-green); text-decoration: underline; }
.dk-foot .dk-foot-brand { font-family: var(--dk-display); font-size: 15px; color: var(--dk-ink); }
.dk-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.dk-foot .dk-foot-fine { flex-basis: 100%; font-size: 12.5px; opacity: 0.85; max-width: 74ch; }

/* --------------------------------------------------- living with a hall --
   The Investing Academy has its own sticky chapter bar, and the Library has its
   own dark room. Neither is rewritten to accommodate the shell; the shell
   accommodates them. Two bars both pinned to `top: 0` would sit on top of each
   other, so the hall's bar is pushed down by exactly the height of the shell's. */
body.dk-has-bar .topbar { top: var(--dk-bar-h); }
body.dk-has-bar { margin: 0; }

/* The Academy's chapter nav is a FIXED left sidebar pinned at `top: 60px` — the
   height of its own bar, hard-coded there long before this shell existed. With
   the shell above it, 60px lands inside that bar and the sidebar clips the
   chapter title. Both numbers move down together, from here, so the Academy's
   own stylesheet stays untouched and keeps working on its own. */
body.dk-has-bar .topbar .in .topnav {
  top: calc(60px + var(--dk-bar-h));
  height: calc(100vh - 60px - var(--dk-bar-h));
}
body.dk-has-bar .topbar.open::after { inset: calc(60px + var(--dk-bar-h)) 0 0 0; }

/* One language control per page. The Academy has its own button from before the
   shell owned the language; it still works (the shell forwards its click) but
   two toggles side by side invite the reader to wonder which one is real. */
body.dk-has-bar .langbtn { display: none; }

/* ---------------------------------------------------------------- utility -- */

.dk-hide { display: none !important; }
:where(.dk-page) :focus-visible { outline: 2px solid var(--dk-green); outline-offset: 2px; border-radius: 6px; }
.dk-bar :focus-visible { outline: 2px solid var(--dk-gilt); outline-offset: 2px; }

@media (max-width: 640px) {
  /* Everything in the bar stays at least 32px tall. A thumb is about 45px
     across and these are the only controls on some pages. */
  .dk-halls a { padding: 8px 11px; font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
  .dk-brand span.dk-brand-word { display: none; }
  .dk-lang { padding: 8px 11px; min-height: 32px; }
  .dk-signin { padding: 9px 14px; min-height: 34px; }
}