/* ══════════════════════════════════════════════════════════════
   PROCEDURES — Prepare & practice layer + practice chat (2026-09-11i)
   Scoped additions on top of styles.css. Type follows the library
   conventions used everywhere else: DM Sans at .68–.8rem for body copy
   and buttons, JetBrains Mono for kickers and labels. Nothing here uses
   `font: inherit` (which drops buttons to the 16px browser default).
   ══════════════════════════════════════════════════════════════ */

/* ── Catalog (search results / specialty chips) ── */
#procedures .proc-result-count{width:100%;max-width:760px;margin:.1rem 0 .4rem;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
#procedures .proc-empty{width:100%;max-width:760px;margin:.3rem 0 .6rem;text-align:center;font-size:.74rem;color:var(--text-secondary);line-height:1.5;}
#procedures .ref-subcat-chips{justify-content:center;}
#procedures .ref-subcat-btn .proc-chip-spec{display:block;margin-top:.12rem;font-size:.58rem;font-weight:500;letter-spacing:.02em;color:var(--text-dim);}
#procedures .ref-subcat-btn.active .proc-chip-spec{color:inherit;opacity:.8;}

/* ── Detail card header: title + view tabs centred in every view ── */
#procedures .proc-detail{scroll-margin-top:1rem;}
#procedures .proc-detail > h4{text-align:center;margin-bottom:.6rem;overflow-wrap:anywhere;}
#procedures .proc-detail > .proc-view-tabs{display:flex;width:max-content;max-width:100%;margin:.1rem auto .7rem;}

/* ── Prepare & practice view — all copy centred ── */
#procedures .proc-view-brief{text-align:center;}
#procedures .proc-brief-indication{max-width:640px;margin:.2rem auto .8rem;font-size:.78rem;line-height:1.6;color:var(--text-secondary);}
#procedures .proc-prep-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:.6rem 0 .8rem;}
#procedures .proc-prep-grid section{padding:.75rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-secondary);}
#procedures .proc-prep-grid h5{margin:0 0 .4rem;font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-cyan);}
#procedures .proc-prep-grid p{margin:0;font-size:.76rem;line-height:1.55;color:var(--text-primary);}
#procedures .proc-rehearsal-actions{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 .8rem;}
#procedures .proc-rehearse-btn{padding:.5rem .95rem;border-radius:8px;border:1.5px solid var(--accent-green);background:rgba(34,197,94,.08);color:var(--accent-green);font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;transition:background .2s,transform .2s;}
#procedures .proc-rehearse-btn:hover{background:rgba(34,197,94,.18);transform:translateY(-1px);}
/* Purple marks the one button here that opens a full AI patient simulation. */
#procedures .proc-rehearse-btn-primary{border-color:var(--accent-purple);background:rgba(168,85,247,.10);color:var(--accent-purple);}
#procedures .proc-rehearse-btn-primary:hover{background:rgba(168,85,247,.20);}
#procedures .proc-recall{margin:.6rem 0;padding:.55rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-secondary);}
#procedures .proc-recall > summary{padding:.2rem 0;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;color:var(--text-primary);}
#procedures .proc-recall > p{margin:.45rem 0;font-size:.7rem;line-height:1.5;color:var(--text-secondary);}
#procedures .proc-recall ol{max-width:560px;margin:.3rem auto 0;padding:0;list-style:none;text-align:left;}
#procedures .proc-recall li{border-top:1px solid var(--border);}
#procedures .proc-recall li details summary{padding:.45rem .2rem;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;color:var(--accent-purple);}
#procedures .proc-recall li details p{margin:.1rem .2rem .5rem;font-size:.76rem;line-height:1.55;color:var(--text-secondary);}
#procedures .proc-learning-caption{max-width:640px;margin:.6rem auto 0;font-size:.68rem;line-height:1.5;color:var(--text-dim);}

/* ── Practice chat dialog ── */
#proc-chat-overlay .proc-chat-modal{height:80vh;height:80dvh;max-height:calc(100dvh - 2rem);}
#proc-chat-overlay .proc-chat-msgs{min-height:0;overscroll-behavior:contain;}
#proc-chat-overlay .proc-chat-msg.proc-chat-thinking{padding:.5rem .7rem;}
#proc-chat-overlay .proc-chat-input textarea{min-width:0;}
#proc-chat-overlay .proc-chat-input button:disabled{opacity:.5;cursor:wait;}
.proc-chat-retry{align-self:flex-start;margin-top:.1rem;padding:.4rem .8rem;border-radius:8px;border:1.5px solid var(--accent-green);background:rgba(34,197,94,.08);color:var(--accent-green);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;}
.proc-chat-retry:hover{background:rgba(34,197,94,.18);}

/* ── Materials quiz: options became real buttons (keyboard-operable) ── */
#mat-prac-overlay button.mat-prac-option{width:100%;text-align:left;font-family:'DM Sans',sans-serif;color:var(--text-primary);min-height:44px;}
#mat-prac-overlay button.mat-prac-option:disabled{opacity:1;cursor:default;}

@media(max-width:650px){
  #procedures .proc-prep-grid{grid-template-columns:1fr;}
  #procedures .proc-rehearse-btn{flex:1 1 100%;}
  #proc-chat-overlay{padding:.35rem;padding-bottom:max(.35rem,env(safe-area-inset-bottom));}
  #proc-chat-overlay .proc-chat-modal{height:92vh;height:92dvh;max-height:calc(100dvh - 1rem);}
  #proc-chat-overlay .proc-chat-input{flex-wrap:wrap;}
  #proc-chat-overlay .proc-chat-input textarea{flex-basis:100%;min-height:56px;}
  #proc-chat-overlay .proc-chat-input button{flex:1;min-height:40px;}
}


/* ══ SIMULATE THE PROCEDURE — step-recall drill modal (2026-09-14) ══
   Numbered free-text boxes the learner fills from memory, then submits
   for feedback (or for a cue when stuck). Type follows the library
   conventions: DM Sans for copy, JetBrains Mono for the step labels. */
.proc-drill-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10600;display:none;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .18s ease-out;}
.proc-drill-modal{background:var(--bg-secondary);border:1px solid var(--border);border-top:3px solid var(--accent-cyan);border-radius:14px;width:100%;max-width:660px;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.45);}
.proc-drill-hdr{padding:.7rem .9rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--bg-card);}
.proc-drill-hdr h3{margin:0;font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:600;color:var(--accent-cyan);overflow-wrap:anywhere;}
.proc-drill-hdr button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1.05rem;padding:.1rem .35rem;border-radius:6px;}
.proc-drill-hdr button:hover{color:var(--text-primary);background:var(--bg-primary);}
.proc-drill-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.95rem;}

.proc-drill-intro{font-family:'DM Sans',sans-serif;font-size:.77rem;line-height:1.55;color:var(--text-secondary);padding:.6rem .75rem;background:rgba(6,182,212,.08);border-left:3px solid var(--accent-cyan);border-radius:4px;}
.proc-drill-intro strong{color:var(--accent-cyan);}
.proc-drill-intro kbd{font-family:'JetBrains Mono',monospace;font-size:.66rem;padding:.05rem .3rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-primary);}
.proc-drill-meta{margin:.5rem 0 .3rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.proc-drill-error{margin:.35rem 0 .5rem;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--accent-amber);background:rgba(245,158,11,.10);font-family:'DM Sans',sans-serif;font-size:.74rem;line-height:1.5;color:var(--accent-amber);}

.proc-drill-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;}
.proc-drill-row{display:flex;align-items:flex-start;gap:.5rem;}
.proc-drill-num{flex:0 0 3.9rem;padding-top:.5rem;font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.03em;color:var(--accent-purple);white-space:nowrap;}
.proc-drill-input{flex:1;min-width:0;min-height:38px;resize:none;overflow:hidden;padding:.45rem .6rem;border:1.5px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;line-height:1.5;}
.proc-drill-input:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 0 2px rgba(6,182,212,.18);}
.proc-drill-input::placeholder{color:var(--text-dim);}
.proc-drill-row-actions{display:flex;gap:.15rem;padding-top:.15rem;}
.proc-drill-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;background:none;color:var(--text-dim);font-size:.8rem;line-height:1;cursor:pointer;}
.proc-drill-icon:hover{color:var(--accent-cyan);border-color:var(--border);background:var(--bg-card);}
.proc-drill-icon-del:hover{color:#ef4444;}

.proc-drill-list-actions{display:flex;justify-content:space-between;gap:.5rem;margin:.55rem 0 .2rem;}
.proc-drill-linkbtn{padding:.3rem .5rem;border:none;border-radius:6px;background:none;color:var(--accent-cyan);font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;}
.proc-drill-linkbtn:hover{background:rgba(6,182,212,.10);}
.proc-drill-linkbtn:disabled{opacity:.45;cursor:not-allowed;background:none;}

.proc-drill-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--border);}
.proc-drill-btn{flex:1 1 auto;min-height:44px;padding:.55rem .85rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease,opacity .15s ease;}
.proc-drill-btn:hover{transform:translateY(-1px);}
.proc-drill-btn:disabled{opacity:.5;cursor:wait;transform:none;}
.proc-drill-btn-submit{border-color:var(--accent-green);background:rgba(34,197,94,.12);color:var(--accent-green);}
.proc-drill-btn-submit:hover{background:rgba(34,197,94,.22);}
.proc-drill-btn-hint{border-color:var(--accent-amber);background:rgba(245,158,11,.12);color:var(--accent-amber);}
.proc-drill-btn-hint:hover{background:rgba(245,158,11,.22);}
.proc-drill-btn-revise,.proc-drill-btn-reset{border-color:var(--accent-cyan);background:rgba(6,182,212,.08);color:var(--accent-cyan);}
.proc-drill-btn-revise:hover,.proc-drill-btn-reset:hover{background:rgba(6,182,212,.18);}
.proc-drill-btn-close{border-color:var(--border);color:var(--text-primary);}
.proc-drill-btn-close:hover{border-color:var(--text-primary);}

.proc-drill-caption{margin:.7rem 0 0;font-family:'DM Sans',sans-serif;font-size:.68rem;line-height:1.5;color:var(--text-dim);}
.proc-drill-thinking{margin-top:.8rem;padding:.5rem .7rem;}

.proc-drill-result-hdr{margin-bottom:.55rem;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-cyan);}
.proc-drill-feedback{font-family:'DM Sans',sans-serif;font-size:.79rem;line-height:1.62;color:var(--text-primary);}
.proc-drill-feedback p{margin:.45rem 0;}
.proc-drill-feedback ul{margin:.3rem 0 .5rem;padding-left:1.1rem;}
.proc-drill-feedback li{margin:.2rem 0;}
.proc-drill-feedback strong{color:var(--accent-cyan);}
.proc-drill-yours,.proc-drill-reference{margin-top:.6rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);}
.proc-drill-yours > summary,.proc-drill-reference > summary{cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;color:var(--text-secondary);}
.proc-drill-yours ol,.proc-drill-reference ol{margin:.5rem 0 .15rem;padding-left:1.25rem;}
.proc-drill-yours li,.proc-drill-reference li{margin:.25rem 0;font-family:'DM Sans',sans-serif;font-size:.76rem;line-height:1.55;color:var(--text-secondary);}

@media(max-width:650px){
  .proc-drill-overlay{padding:.35rem;padding-bottom:max(.35rem,env(safe-area-inset-bottom));}
  .proc-drill-modal{max-height:94vh;max-height:94dvh;}
  .proc-drill-body{padding:.7rem;}
  /* Narrow screens: the step label and its ＋/✕ share one line, with the
     box full width underneath — `order` keeps the box from pushing the
     row buttons onto a third line. */
  .proc-drill-row{flex-wrap:wrap;gap:.15rem .45rem;align-items:center;}
  .proc-drill-num{order:1;flex:0 0 auto;padding-top:0;}
  .proc-drill-row-actions{order:2;margin-left:auto;padding-top:0;}
  .proc-drill-input{order:3;flex:1 1 100%;font-size:16px;}
  .proc-drill-list{gap:.5rem;}
  .proc-drill-icon{width:32px;height:32px;}
  .proc-drill-btn{flex:1 1 100%;}
}