/* Shared info-drawer styles — used by templates/components/arduino_interface.html
   and templates/try_it_builder.html. Keep this the single source of truth;
   don't re-add #drawer-* or .drawer-* rules to either template's inline <style>. */

/* Anchored to #workspace (position:relative, set per-host-template), not
   #main-content-wrapper — the step-nav bar above #workspace is 0px when hidden
   and a variable height when a guided step is active, so a top offset guessed
   from #main-content-wrapper's box (previously a hardcoded 48px) drifts out of
   sync with where the block builder actually starts. Anchoring to #workspace
   itself means the drawer always spans exactly the BB's own height. */
#drawer-tab {
  position: absolute; right: 0; top: 0; bottom: 0; width: 32px;
  background: #163d73; border-left: 1px solid #0f2c54;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 100; user-select: none; transition: all 0.2s;
}
#drawer-tab:hover { background: #1c4a8a; width: 36px; }
#drawer-tab span {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; color: #ffffff;
  text-transform: uppercase; transform: rotate(180deg);
}
#drawer-panel {
  position: absolute; right: 32px; top: 0; bottom: 0; width: 0;
  background: #f5f7fb; border-left: 1px solid #d8e0eb;
  overflow: hidden; z-index: 99; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; box-shadow: -4px 0 15px rgba(0,0,0,0.15);
}
#drawer-panel.open { width: 600px; }
#drawer-inner { width: 600px; height: 100%; display: flex; flex-direction: column; flex-shrink: 0; }

.drawer-title {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700; color: #163d73; text-transform: uppercase;
  letter-spacing: .1em; flex-shrink: 0; border-bottom: 1px solid #d8e0eb;
  padding: 16px 20px; background: #e8edf4;
}
.drawer-tip {
  background: #dfe9f5; border-left: 3px solid #163d73; border-bottom: 1px solid #cddcee;
  padding: 10px 20px; font-size: 12px; color: #163d73; line-height: 1.6; flex-shrink: 0;
}
/* Collapsed while a circuit_interaction (Try It) tab is active — that tab
   already fights for vertical space (diagram + track slider + serial
   console), and the tip is only ever relevant to the explain/howto/logic
   tabs it isn't shown for. See the drawer-wide toggle this mirrors in
   switchTab()/updateDrawer(). */
.drawer-tip.drawer-tip-collapsed { display: none; }
.drawer-tabs {
  display: flex; flex-shrink: 0; gap: 4px; margin: 12px 16px 4px;
  padding: 4px; background: #e1e7ef; border-radius: 10px;
}
.drawer-tab-btn {
  flex: 1; padding: 8px 8px; font-size: 11px; font-family: inherit; font-weight: 600;
  background: none; border: none; border-radius: 7px;
  color: #626b78; cursor: pointer; text-align: center; transition: background 0.2s, color 0.2s;
}
.drawer-tab-btn:hover { background: #d3ddea; color: #163d73; }
.drawer-tab-btn.active { background: #f5f7fb; color: #163d73; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

.drawer-tab-panels {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #a9b7c9 #e8edf4;
  /* direction:rtl flips the scrollbar to the left edge; direction:ltr on the
     panel children undoes the reading-order flip so drawer content stays normal. */
  direction: rtl;
  /* iOS Safari only computes momentum-scroll physics (and, with it, the
     correct max scrollTop) for a container once this is set — without it,
     content set via innerHTML can render fine but the browser's natural
     scroll stops just short of the real bottom. Found live 2026-09-04: user
     could only see the drawer's last line by rubber-band-overscrolling past
     the (too-short) computed limit, which snapped back and re-hid it on
     release — a normal scroll never reached that point at all. */
  -webkit-overflow-scrolling: touch;
}
.drawer-tab-panels > * { direction: ltr; }
.drawer-tab-panels::-webkit-scrollbar { width: 9px; }
.drawer-tab-panels::-webkit-scrollbar-track { background: #e8edf4; }
.drawer-tab-panels::-webkit-scrollbar-thumb { background: #a9b7c9; border-radius: 5px; }
.drawer-tab-panels::-webkit-scrollbar-thumb:hover { background: #163d73; }

.drawer-tab-panel { display: none; padding: 20px 22px; font-family: 'Inter', -apple-system, sans-serif; color: #101114; }
.drawer-tab-panel.active { display: block; }
/* Extra breathing room below the last line on touch devices — a safety
   margin on top of the -webkit-overflow-scrolling fix above, in case a
   touch browser's computed scroll extent still lands a few px short of the
   true content bottom. Touch-only so desktop's drawer spacing is unchanged. */
@media (hover: none) and (pointer: coarse) {
  .drawer-tab-panel { padding-bottom: 48px; }
}

/* ---- content typography ---- */
.drawer-tab-panel p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.drawer-tab-panel h3 {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #101114; margin: 4px 0 14px;
}
.drawer-tab-panel h3::before { content: "// "; color: #163d73; }
.drawer-tab-panel h4 { font-size: 13.5px; font-weight: 700; color: #101114; margin: 20px 0 8px; }
.drawer-tab-panel b, .drawer-tab-panel strong {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 600; color: #101114; background: #e3e9f2;
  padding: 1px 6px; border-radius: 3px;
}
.drawer-tab-panel em, .drawer-tab-panel i { color: #163d73; font-style: italic; }
.drawer-tab-panel hr {
  border: none; height: 1px; margin: 20px 0;
  background: repeating-linear-gradient(90deg, #163d73 0 6px, transparent 6px 12px);
  opacity: .5;
}
.drawer-tab-panel ul, .drawer-tab-panel ol { margin: 0 0 12px; padding-left: 22px; }
.drawer-tab-panel li { font-size: 15px; line-height: 1.6; margin-bottom: 7px; }
.drawer-tab-panel code {
  display: inline-block; font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12.5px; color: #101114; background: #e3e9f2; border: 1px solid #d8e0eb;
  border-radius: 3px; padding: 1px 6px;
}
.drawer-tab-panel pre {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; color: #101114; background: #e8edf4;
  border: 1px solid #d8e0eb; border-radius: 6px; padding: 12px 14px; margin: 0 0 12px;
  overflow-x: auto; white-space: pre;
}
.drawer-tab-panel pre code { background: none; border: none; padding: 0; }
.drawer-tab-panel img {
  width: 100%; border-radius: 8px; border: 1px solid #d8e0eb; margin-top: 8px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
}

/* Mouseover zoom on in-drawer circuit diagrams (SVG rendered by CircuitRenderer).
   Scaling the child rather than the wrapper keeps overflow:hidden clipping to the
   diagram's own footprint instead of spilling into surrounding drawer content. */
.circuit-zoom-wrap { overflow: hidden; position: relative; }
.circuit-zoom-wrap > div {
  transition: transform 0.15s ease-out;
  transform-origin: center center;
}
/* (hover:hover)+(pointer:fine) = a real mouse. Without this gate, touch
   browsers fire a synthetic "hover" right after a tap (so hover-dependent
   sites still work) — which meant a single tap here was still triggering
   this rule even after pinch_zoom.js was wired in as the touch mechanism,
   since nothing had actually turned :hover off on touch. Found live
   2026-09-03: user reported tapping still zoomed after the pinch work
   landed — this unconditional :hover rule, not the new code, was why. */
@media (hover: hover) and (pointer: fine) {
  .circuit-zoom-wrap:hover > div {
    transform: scale(2.2);
    cursor: crosshair;
  }
}
/* Touch equivalent of :hover above is real two-finger pinch-to-zoom
   (static/js/pinch_zoom.js), not a CSS rule — it drives this same
   transform directly via inline style, and suspends the transition above
   while pinching so the scale tracks fingers in real time instead of
   animating 0.15s behind each touchmove frame (plans/
   MOBILE_TABLET_BUILD_EXPERIENCE_PLAN.md Phase 4, finding 4). */

/* Optional badge convention for paired distinctions (e.g. input/output).
   Opt-in per project — see /lesson-drawer-audit. */
.drawer-tab-panel .badge {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; margin-right: 4px; display: inline-block;
}
.drawer-tab-panel .badge-a { background: #d8e5f4; color: #163d73; }
.drawer-tab-panel .badge-b { background: #ffe9d1; color: #a3540a; }

/* Mobile/tablet build-experience plan, Phase 4
   (plans/MOBILE_TABLET_BUILD_EXPERIENCE_PLAN.md, finding 3): 32px is a
   mouse-sized hit target; widen it on touch. #drawer-panel's `right`
   offset has to track the same value so it stays flush against the tab
   instead of leaving a gap or overlapping it. The Phase 3 full-width
   override in arduino_interface.html's own inline <style>
   (`calc(100% - Npx)`) uses this same 48px — kept in sync manually since
   it lives in a different file; update both together if this changes. */
@media (hover: none) and (pointer: coarse) {
  #drawer-tab { width: 48px; }
  #drawer-panel { right: 48px; }
}