/* ============================================================
   dual-track.css — shared "two-track" learning layout for every
   hardware / deep-dive chapter across all six brand academies.

   • A "NEW TO THIS?" (beginner) panel and a "GO DEEPER" (advanced)
     panel, visually distinct, side by side.
   • Engagement callouts: analogy, a 10-second decision hint, and a
     common-mistake warning.

   Everything is coloured through each academy's own CSS variables
   (--line, --ink, --paper, --mint, --blue, --grape, --yellow,
   --coral …), so the same file re-skins itself per brand.
   ============================================================ */

.dtwrap{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; align-items:stretch }
@media (max-width:860px){ .dtwrap{ grid-template-columns:1fr } }

.dt{ border:3px solid var(--line); border-radius:20px; box-shadow:7px 7px 0 var(--line);
     overflow:hidden; display:flex; flex-direction:column; background:var(--paper) }
.dt-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:3px solid var(--line);
          font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; font-size:16px; line-height:1.12 }
.dt-head .ic{ font-size:22px; line-height:1 }
.dt-head .lvl{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:10px;
               letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border:2px solid var(--line);
               border-radius:999px; background:rgba(255,255,255,.6); color:var(--ink) }
.dt.beg .dt-head{ background:var(--mint); color:var(--ink) }
.dt.adv .dt-head{ background:var(--blue); color:#fff }

.dt-body{ padding:18px 20px; flex:1 1 auto; color:var(--ink) }
.dt-body > * + *{ margin-top:13px }
.dt-body p{ margin:0; font-size:14.5px; line-height:1.55; font-weight:500 }
.dt-lead{ font-weight:800 !important; font-size:15.5px !important; line-height:1.45 !important }
.dt-note{ font-size:13px !important; color:var(--ink-soft); font-weight:600 !important }
.dt-note b{ color:var(--ink) }

.dt-li{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.dt-li li{ position:relative; padding-left:20px; font-size:14px; line-height:1.48; font-weight:500 }
.dt-li li::before{ content:"\25B8"; position:absolute; left:2px; top:0; color:var(--coral); font-weight:800; line-height:1.48 }
.dt-li li b{ font-weight:800 }

.dt-spec{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:12px;
          background:rgba(0,0,0,.06); border:2px solid var(--line); border-radius:7px; padding:1px 6px; white-space:nowrap }

/* dotted-underline jargon term with a hover definition */
.jdef{ border-bottom:2px dotted var(--coral); cursor:help; font-weight:700 }

/* ---- engagement callouts ---- */
.kbox{ display:flex; gap:14px; align-items:flex-start; border:3px solid var(--line); border-radius:16px;
       background:var(--paper); box-shadow:5px 5px 0 var(--line); padding:15px 18px; margin-top:18px;
       border-left-width:11px; color:var(--ink) }
.kbox .kic{ font-size:25px; line-height:1; flex:0 0 auto }
.kbox .kt{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px; letter-spacing:.1em;
           text-transform:uppercase; margin:0 0 5px; color:var(--ink-soft) }
.kbox .kbody{ font-size:14.5px; line-height:1.55; font-weight:500 }
.kbox .kbody b{ font-weight:800 }
.kbox.analogy{ border-left-color:var(--grape) }
.kbox.decide{ border-left-color:var(--yellow) }
.kbox.mistake{ border-left-color:var(--signal, #E5384B) }

/* 10-second decision flow inside a decide box */
.dt-10{ display:flex; flex-direction:column; gap:8px; margin-top:9px }
.dt-10 .step{ display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:600; line-height:1.45 }
.dt-10 .step .q{ font-family:"JetBrains Mono",monospace; font-weight:800; background:var(--yellow);
                 border:2px solid var(--line); border-radius:8px; padding:2px 8px; flex:0 0 auto; font-size:12px; color:var(--ink) }

/* keep panels light (dark text) even in midnight theme, like the .card family */
html.dark .dt, html.dark .dt-body, html.dark .kbox, html.dark .kbox .kbody,
html.dark .dt-body p, html.dark .dt-li li{ color:var(--ink) }
html.dark .dt.beg .dt-head{ color:var(--ink) }
html.dark .dt, html.dark .kbox{ box-shadow:6px 6px 0 #02090b }

/* section intro label reused on static pages */
.dt-eyebrow{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:12px; letter-spacing:.1em;
             text-transform:uppercase; color:var(--ink-soft) }