/* MicroPort ICD casebook -- additions to reader.css, which every casebook shares and keeps
   identical. A MicroPort case reads as the book does: sections, figures that open full
   screen, the question as a quiz, and three buttons at the foot of the page. */
.cb.mp{--mp-box:#E7EFFA;--mp-box-line:#CBDBF0;--mp-ok:#12864a;--mp-ok-soft:#e3f5ea;
  --mp-ko:#c8233f;--mp-ko-soft:#fcebee;--mp-navy:#0C2A73}
@media (prefers-color-scheme:dark){.cb.mp:not([data-theme="light"]){--mp-box:#12233B;--mp-box-line:#223E66;
  --mp-ok:#3ddc84;--mp-ok-soft:#0f2418;--mp-ko:#ff5c7a;--mp-ko-soft:#2a1219;--mp-navy:#2B4FA8}}
.cb.mp[data-theme="dark"]{--mp-box:#12233B;--mp-box-line:#223E66;
  --mp-ok:#3ddc84;--mp-ok-soft:#0f2418;--mp-ko:#ff5c7a;--mp-ko-soft:#2a1219;--mp-navy:#2B4FA8}

/* ---------- sections ---------- */
.mp-sec{margin:0 0 20px}
.cb h2.mp-h{display:block;font-size:18.5px;line-height:1.3;font-weight:700;letter-spacing:-.005em;
  text-transform:none;color:var(--ink);margin:26px 0 10px}
.cb h2.mp-h::after{display:none}
.mp-p{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0 0 12px}
.mp-p.mp-strong{color:var(--ink);font-weight:600}
.mp-p.mp-aside{font-family:var(--f-ui);font-size:14px;line-height:1.5;color:var(--ink-3)}
/* numbered points, in the chip style of the other casebooks' marker lists */
.mp-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.mp-list li{position:relative;padding-left:38px;font-size:16px;line-height:1.56;color:var(--ink-2)}
.mp-list li::before{content:attr(data-n);position:absolute;left:0;top:0;min-width:26px;height:25px;
  padding:0 5px;border-radius:8px;background:var(--chip);color:var(--chip-ink);font-family:var(--f-ui);
  font-weight:700;font-size:12.5px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.mp-bul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.mp-bul li{position:relative;padding-left:18px;font-size:16px;line-height:1.56;color:var(--ink-2)}
.mp-bul li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--accent)}
.mp-patient .mp-p{font-size:17px;line-height:1.55;color:var(--ink);margin:0}
.mp-patient .mp-p+.mp-p{margin-top:10px}
/* the book's light-blue boxes (take-home messages) */
.cb-card.mp-box{background:var(--mp-box);border-color:var(--mp-box-line);box-shadow:none}
.mp-box .mp-h{margin-top:0}
.mp-box .mp-p{color:var(--ink)}
.mp-box>:last-child{margin-bottom:0}
.mp-box .mp-list li,.mp-box .mp-bul li{color:var(--ink)}

/* ---------- figures ---------- */
.mp-fig{margin:4px 0 16px}
.mp-fig[style]{margin-left:auto;margin-right:auto}   /* printed narrower than the column */
.js .mp-fig img{cursor:zoom-in}

/* ---------- the question ---------- */
.mp-quiz{margin:26px 0 22px}
.cb-card.mp-q{padding:16px 16px 15px;border-left:4px solid var(--accent)}
.mp-qlabel{font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 5px}
.cb h2.mp-qh{display:block;font-size:18px;line-height:1.32;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ink);margin:0 0 12px}
.cb h2.mp-qh::after{display:none}
.mp-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mp-opts li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:10px 12px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-size:16px;line-height:1.45;
  color:var(--ink);transition:border-color .15s,background .15s}
/* .cb-card li::before (reader.css) draws an absolutely placed dot: undo it for the options */
.mp-opts li::before{content:attr(data-n);position:static;flex:0 0 auto;width:auto;min-width:26px;height:26px;
  border-radius:8px;background:var(--sunk);color:var(--ink-2);font-family:var(--f-ui);font-weight:700;
  font-size:13px;display:grid;place-items:center}
.mp-opts li .mp-ot{flex:1;min-width:0}
.mp-live .mp-opts li{cursor:pointer;-webkit-user-select:none;user-select:none}
.mp-live .mp-opts li:hover{border-color:var(--ink-3)}
.mp-opts li.sel{border-color:var(--accent);background:var(--accent-soft)}
.mp-opts li.sel::before{background:var(--accent);color:#fff}
.mp-opts li.ok{border-color:var(--mp-ok);background:var(--mp-ok-soft)}
.mp-opts li.ok::before{background:var(--mp-ok);color:#fff}
.mp-opts li.ko{border-color:var(--mp-ko);background:var(--mp-ko-soft)}
.mp-opts li.ko::before{background:var(--mp-ko);color:#fff}
.mp-opts li.miss{border-color:var(--mp-ok);border-style:dashed}
.mp-opts li.miss::before{background:transparent;color:var(--mp-ok);box-shadow:inset 0 0 0 1.5px var(--mp-ok)}
.mp-tag{flex:0 0 auto;align-self:center;font-family:var(--f-ui);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.ok>.mp-tag,.miss>.mp-tag{color:var(--mp-ok)}
.ko>.mp-tag{color:var(--mp-ko)}
.mp-qhint{font-family:var(--f-ui);font-size:12.5px;color:var(--ink-3);margin:10px 0 0}
.mp-qbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:12px}
.cb .mp-btn{border-radius:11px;padding:10px 16px;font-family:var(--f-ui);font-weight:700;font-size:14px;
  background:var(--accent);color:#fff;line-height:1.2}
.cb .mp-btn:disabled{opacity:.4;cursor:not-allowed}
.cb .mp-btn.ghost{background:var(--card);color:var(--ink-2);border:1.5px solid var(--line);padding:8.5px 14px}
.cb .mp-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.mp-qres{font-family:var(--f-ui);font-size:14px;font-weight:600;line-height:1.4;color:var(--ink-2)}
.mp-qres.good{color:var(--mp-ok)}
/* the answer line printed in the book */
.mp-answer{display:flex;gap:10px;align-items:center;margin:14px 0 18px;padding:11px 14px;border-radius:12px;
  border:1.5px solid var(--mp-ok);background:var(--mp-ok-soft);font-family:var(--f-ui);font-weight:700;
  font-size:15px;line-height:1.4;color:var(--ink)}
.mp-answer::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:var(--mp-ok) no-repeat center/13px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.mp-answer[hidden]{display:none!important}
.cb .mp-reveal{display:inline-flex;margin:14px 0 18px}

/* ---------- full-screen figure ---------- */
.mp-lb{position:fixed;inset:0;z-index:90;background:rgba(6,10,20,.97);touch-action:none;overflow:hidden;
  -webkit-user-select:none;user-select:none}
.mp-lb img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;background:#fff;
  will-change:transform;-webkit-user-drag:none;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.mp-lb-tools{position:absolute;right:12px;top:max(12px,env(safe-area-inset-top));display:flex;gap:8px;z-index:2}
.cb .mp-lb-tools button,.mp-lb-tools button{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:rgba(20,30,49,.8);color:#fff;display:grid;place-items:center;font:700 20px/1 var(--f-ui,sans-serif);
  cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mp-lb-tools svg{width:18px;height:18px}
.mp-lb-cap{position:absolute;left:64px;right:64px;bottom:max(12px,env(safe-area-inset-bottom));z-index:2;
  font:500 13px/1.4 var(--f-ui,sans-serif);color:rgba(255,255,255,.72);text-align:center;pointer-events:none}
.mp-lb-cap b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
/* previous / next figure of the page */
.cb .mp-lb-nav,.mp-lb-nav{position:absolute;top:50%;z-index:2;width:46px;height:46px;margin-top:-23px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(20,30,49,.82);color:#fff;display:grid;place-items:center;
  cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mp-lb-nav.prev{left:10px}
.mp-lb-nav.next{right:10px}
.mp-lb-nav svg{width:20px;height:20px}
.mp-lb-nav:disabled{opacity:.25;cursor:default}
.mp-lb-nav[hidden]{display:none}

/* ---------- Talk: only the patient and the figures stay, then the recorder ----------
   reader.js puts .cb-talk-mode on the root. Everything that explains the screens (the
   headings, the interpretation, the question, the answer, the comments) goes; the
   recorder comes after the last figure. */
.cb.mp.cb-talk-mode article{display:flex;flex-direction:column}
.cb.mp.cb-talk-mode article>*{order:1}
.cb.mp.cb-talk-mode article>.cb-crumb,.cb.mp.cb-talk-mode article>.cb-kicker,
.cb.mp.cb-talk-mode article>h1{order:-3}
/* the patient card goes first, then every figure (a screen that follows the card in its
   section keeps its place: display:contents lets it order on its own), then the recorder,
   which already sits after the sections in the page */
.cb.mp.cb-talk-mode article>.mp-pt{display:contents}
.cb.mp.cb-talk-mode .mp-pt>.mp-patient{order:-2}
.cb.mp.cb-talk-mode article>#talk{margin-top:10px}
/* reader.css hides the whole #discussion in Talk (text only in the other books); here the
   comments can carry figures, which must stay */
.cb.mp.cb-talk-mode #discussion{display:block!important}
.cb.mp.cb-talk-mode .mp-sec{margin:0}
.cb.mp.cb-talk-mode .mp-sec>:not(.mp-fig):not(.mp-patient){display:none!important}
.cb.mp.cb-talk-mode .mp-fig{margin:0 0 16px}
.cb.mp.cb-talk-mode .mp-fig figcaption{display:none}
/* Read: no recorder. The section only shows to hold the grading results, which reader.js
   reveals (in Read) once an evaluation is done. :has() for current browsers; the class,
   set by microport.js, keeps the heading out of the way in older ones. */
.cb.mp:not(.cb-talk-mode) #talk-panel{display:none!important}
.cb.mp:not(.cb-talk-mode) #talk:not(:has(#talk-results:not([hidden]))){display:none}
.cb.mp:not(.cb-talk-mode) #talk:not(.mp-has-results) #talk-heading{display:none}

/* ---------- third footer button: MicroPort Academy ---------- */
/* three buttons: Amazon, Cardiocases, MicroPort Academy -- as many equal columns as fit */
.cb.mp .cb-actions{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));width:100%}
.cb .cb-actions a.cb-mpa{margin:0;width:auto;max-width:none}
.cb a.cb-mpa{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;border-radius:14px;
  background:linear-gradient(180deg,#1D418F,var(--mp-navy));color:#fff;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 14px rgba(12,42,115,.28)}
.cb-mpa .cb-mpa-ico{flex:0 0 24px;width:24px;height:24px}
.cb-mpa .cb-order-t{flex:1;min-width:0}
.cb-mpa .cb-order-t i{opacity:.8}
.cb-mpa .cb-mpa-ext{flex:0 0 15px;width:15px;height:15px;opacity:.7}
.cb a.cb-mpa:hover{filter:brightness(1.12)}