/* ============================================================
   POTENTIATION DEMONSTRATOR — component stylesheet.

   Lifted VERBATIM from the approved prototype. Every rule is prefixed
   with the root class `.potdemo` so nothing here leaks onto a page and
   no page rule reaches in. Scoping is the ONLY change to the ported
   rules: not one colour, size, radius or font-size has been altered.

   The prototype's `body` rule carried the font stack and ink colour for
   its content; those move onto `.potdemo` itself, which is the
   component root — same values, same effect. Its margin/padding are
   dropped because the component is not the page.

   TWO ADDITIONS, both required by the build prompt and both marked:
     §4.3 the narrow-screen floor + horizontal scroll
     §4.5 the reduced-motion bar transition
   ============================================================ */

.potdemo, .potdemo * { box-sizing: border-box; }

.potdemo {
    background: #FFFFFF; color: #111111;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.potdemo .wrap { max-width: 980px; margin: 0 auto; }
.potdemo h1 { font-size: 21px; margin: 0 0 4px; }
.potdemo .sub { font-size: 14px; margin: 0 0 20px; }

.potdemo .panel { border: 2px solid #D8D2C7; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.potdemo .k { font-size: 11px; font-weight: 700; margin-bottom: 10px; }

.potdemo .agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .potdemo .agents { grid-template-columns: 1fr; } }
.potdemo button.agent {
    font: inherit; text-align: left; cursor: pointer;
    padding: 12px 14px; border-radius: 10px;
    background: #FFFFFF; color: #111111; border: 2px solid #B8B8B8; border-left-width: 6px;
}
.potdemo button.agent .n { font-size: 15px; font-weight: 700; }
.potdemo button.agent .r { font-size: 11px; margin-top: 2px; }
.potdemo button.agent .s { font-size: 11px; font-weight: 700; margin-top: 6px; }
.potdemo button.agent.on { background: #FBF3E4; }
.potdemo button.agent:disabled { opacity: .5; cursor: default; }

.potdemo .drugs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.potdemo button.drug {
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 8px 15px; border-radius: 9px; cursor: pointer;
    background: #FFFFFF; color: #111111; border: 2px solid #B8B8B8;
}
.potdemo button.drug.on { background: #FAEDEC; border-color: #B4362F; }

.potdemo .plot { position: relative; height: 210px; margin: 8px 0 4px; }
.potdemo .axis { position: absolute; left: 0; right: 0; bottom: 28px; border-bottom: 2px solid #111111; }
.potdemo .bars { position: absolute; left: 40px; right: 20px; bottom: 30px; height: 170px; display: flex; gap: 48px; align-items: flex-end; }
.potdemo .barwrap { flex: 1 1 0; position: relative; height: 100%; display: flex; align-items: flex-end; }
.potdemo .bar { width: 100%; border-radius: 6px 6px 0 0; transition: height .18s ease; }
.potdemo .bar.actual { background: #B4362F; }
.potdemo .bar.ghost { background: transparent; border: 3px dashed #8C8C8C; }
.potdemo .blab { position: absolute; bottom: 4px; width: 100%; text-align: center; font-size: 12px; font-weight: 700; }
.potdemo .bval { position: absolute; width: 100%; text-align: center; font-size: 13px; font-weight: 700; }

.potdemo .gap { border: 2px solid #4B7B3F; background: #EFF4EC; border-radius: 10px; padding: 11px 14px; margin-top: 10px; }
.potdemo .gap .h { font-size: 13px; font-weight: 700; }
.potdemo .gap .b { font-size: 13px; margin-top: 3px; }
.potdemo .gap.flat { border-color: #8C8C8C; background: #F3F3F3; }

.potdemo .explain { border: 2px solid #C9922A; background: #FFF1D2; border-radius: 10px; padding: 13px 15px; margin-top: 16px; }
.potdemo .explain .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.potdemo .explain .b { font-size: 14px; }

.potdemo .locked { border: 2px solid #B4362F; background: #FAEDEC; border-radius: 10px; padding: 13px 15px; margin-top: 20px; }
.potdemo .locked .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.potdemo .locked ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.potdemo .locked li { margin-bottom: 5px; }
.potdemo .foot { font-size: 12px; margin-top: 8px; }

/* ============================================================
   §4.3 ADDITION — FLOOR AT 560px AND SCROLL, LIKE THE FIGURES

   The defect being fixed: the two existing interactives are canvas and
   inline-SVG with fixed coordinate spaces, so a narrow column scales
   them to ~0.29 and their labels land near 3.4px. The authored page
   figures avoid that by flooring at 640px inside a horizontally
   scrolling band (.mk-fig--dense), and this component is required to
   behave like the figures rather than like the interactives.

   Worth recording WHY the failure mode differs here: this component is
   plain HTML and CSS, so its text never scales — it reflows at its real
   px size. The thing that actually breaks on a narrow column is the
   two-bar plot: .bars reserves 40px + 20px of gutter and a 48px gap, so
   at a 299px column each bar column falls to roughly 80px, and the
   absolutely-positioned captions ("if they simply added up" / "what
   actually happens") wrap onto three or four lines and collide with the
   bar above them.

   560px is the floor because it is the narrowest width at which each
   bar column clears ~210px and both captions sit on a single line.
   Below 560px the host scrolls horizontally instead of compressing. The
   agent grid is already 1-column under 720px, so at the floor the three
   agent buttons are full-width and comfortably readable.
   ============================================================ */
@media (max-width: 600px) {
    .potdemo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .potdemo > .wrap { min-width: 560px; }
}

/* ============================================================
   §4.5 ADDITION — the bar height transition is the component's only
   motion, so it is removed under prefers-reduced-motion. The bars then
   jump straight to their new heights and every control still works.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .potdemo .bar { transition: none; }
}