/* ============================================================
   Conference.care — Practice Admin Guide
   Guide-specific components layered on top of base.css tokens.
   (steps, screenshot frames, callouts, can/can't, compare, TOC,
    print stylesheet). No new colours — everything from :root.
   ============================================================ */

/* ---------- Guide hero (dark, deco) ---------- */
.guide-hero { position:relative; background:var(--grad-hero); color:#fff; overflow:hidden;
  padding:150px 0 84px; }
.guide-hero h1 { color:#fff; font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800; max-width:16ch; }
.guide-hero .lede { color:rgba(255,255,255,.86); font-size:1.18rem; max-width:60ch; margin:18px 0 0; }
.guide-hero .eyebrow { color:var(--cc-light); }
.guide-hero .rule { background:linear-gradient(90deg,var(--cc-light),#fff); margin-top:22px; }
.guide-meta { display:flex; flex-wrap:wrap; gap:10px 22px; margin:26px 0 0;
  color:rgba(255,255,255,.8); font-size:.95rem; font-weight:600; }
.guide-meta span { display:inline-flex; align-items:center; gap:8px; }
.guide-meta svg { width:17px; height:17px; opacity:.85; }
.guide-actions { display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 0; }

/* ---------- Section scaffolding ---------- */
.guide-section { padding:84px 0; }
.guide-section:nth-of-type(even){ background:linear-gradient(180deg,var(--cc-paler),#fff); }
.section-head.left { text-align:left; margin:0 0 40px; max-width:78ch; }
.section-head.left .rule { margin:18px 0 0; }
.part-tag { display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cc-accent); background:var(--cc-paler);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 14px; margin:0 0 14px; }
.lead-para { color:var(--cc-ink-soft); font-size:1.1rem; max-width:72ch; margin:0 0 26px; }

/* ---------- Table of contents / quick-jump ---------- */
.toc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.toc-card { display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px 24px; box-shadow:var(--sh-sm);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.toc-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--cc-light); }
.toc-card .n { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--grad-chip); color:#fff; font-weight:800; font-size:1.05rem; margin:0 0 14px; }
.toc-card h3 { font-size:1.18rem; font-weight:800; margin:0 0 8px; }
.toc-card p { color:var(--cc-ink-soft); font-size:.97rem; margin:0; }

/* ---------- Numbered steps ---------- */
.steps { list-style:none; counter-reset:step; margin:0; padding:0; }
.steps > li { position:relative; counter-increment:step; padding:0 0 30px 64px; }
.steps > li::before { content:counter(step); position:absolute; left:0; top:-2px;
  width:42px; height:42px; border-radius:50%; background:var(--grad-primary); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1.1rem; box-shadow:var(--sh-sm); }
.steps > li::after { content:""; position:absolute; left:20px; top:46px; bottom:6px; width:2px;
  background:var(--border); }
.steps > li:last-child::after { display:none; }
.steps > li h4 { font-size:1.12rem; font-weight:700; margin:6px 0 6px; color:var(--cc-navy); }
.steps > li p { color:var(--cc-ink-soft); margin:0 0 14px; max-width:68ch; }
.kbd { font:inherit; font-weight:700; color:var(--cc-navy); background:var(--cc-paler);
  border:1px solid var(--border); border-radius:var(--radius-xs); padding:1px 8px; white-space:nowrap; }

/* ---------- Screenshot frame (.shot) ---------- */
.shot { margin:8px 0 4px; max-width:880px; }
.shot-frame { position:relative; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--sh-lg); background:#fff; }
.shot-bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--cc-paler);
  border-bottom:1px solid var(--border); }
.shot-bar i { width:11px; height:11px; border-radius:50%; background:#cdd9e3; display:block; }
.shot-bar .url { margin-left:10px; font-size:.78rem; color:var(--cc-ink-soft); font-weight:600;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px 14px; }
.shot-frame > img { display:block; width:100%; height:auto; }
.shot figcaption { margin:12px 2px 0; font-size:.9rem; color:var(--cc-ink-soft); }
.shot figcaption strong { color:var(--cc-navy); }

/* numbered callout pills layered on a screenshot */
.shot .pin { position:absolute; width:28px; height:28px; border-radius:50%;
  background:var(--cc-accent); color:#fff; font-weight:800; font-size:.86rem;
  display:grid; place-items:center; box-shadow:0 0 0 3px #fff, var(--sh-sm); transform:translate(-50%,-50%); }

/* placeholder used in the shell before real screenshots land */
.shot-ph { aspect-ratio:16/10; display:grid; place-items:center; text-align:center;
  background:repeating-linear-gradient(135deg,var(--cc-paler),var(--cc-paler) 14px,#fff 14px,#fff 28px);
  color:var(--cc-ink-soft); }
.shot-ph .id { font-weight:800; color:var(--cc-accent); letter-spacing:.08em; font-size:.85rem; }
.shot-ph .desc { margin-top:8px; font-size:.95rem; max-width:46ch; padding:0 20px; }

/* ---------- Callouts ---------- */
.callout { display:flex; gap:16px; border-radius:var(--radius-md); padding:20px 22px;
  margin:24px 0; border:1px solid; }
.callout .ic { flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; }
.callout .ic svg { width:18px; height:18px; }
.callout h4 { margin:0 0 5px; font-size:1.02rem; font-weight:800; }
.callout p { margin:0; font-size:.97rem; }
.callout.info { background:var(--info-bg); border-color:var(--info-border); color:var(--info-fg); }
.callout.info .ic { background:var(--info-solid); color:#fff; }
.callout.tip  { background:var(--success-bg); border-color:var(--success-border); color:var(--success-fg); }
.callout.tip .ic { background:var(--success-solid); color:#fff; }
.callout.warn { background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-fg); }
.callout.warn .ic { background:var(--warn-solid); color:#fff; }
.callout h4 { color:inherit; }

/* ---------- Can / can't cards ---------- */
.cando { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cando .card { border-radius:var(--radius); padding:26px 26px 10px; border:1px solid; }
.cando .card h3 { display:flex; align-items:center; gap:10px; font-size:1.15rem; margin:0 0 14px; }
.cando .card h3 .badge { width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  color:#fff; flex:none; }
.cando .card ul { list-style:none; margin:0; padding:0; }
.cando .card li { position:relative; padding:0 0 14px 28px; font-size:.98rem; color:var(--cc-ink); }
.cando .card li::before { position:absolute; left:0; top:1px; font-weight:800; }
.cando .yes { background:var(--success-bg); border-color:var(--success-border); }
.cando .yes h3 { color:var(--success-fg); } .cando .yes h3 .badge { background:var(--success-solid); }
.cando .yes li::before { content:"✓"; color:var(--success-solid); }
.cando .no  { background:#f7f9fb; border-color:var(--border); }
.cando .no h3 { color:var(--cc-ink); } .cando .no h3 .badge { background:var(--cc-ink-soft); }
.cando .no li::before { content:"—"; color:var(--cc-ink-soft); }

/* ---------- Compare (two-way contrast) ---------- */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:8px 0; }
.compare .opt { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--sh-sm); background:var(--surface); }
.compare .opt .head { padding:18px 22px; color:#fff; }
.compare .opt.primary .head { background:var(--grad-deep); }
.compare .opt.guest .head { background:linear-gradient(135deg,var(--cc-mid),var(--cc-light)); }
.compare .opt .head h4 { color:#fff; margin:0; font-size:1.12rem; }
.compare .opt .head .sub { font-size:.86rem; opacity:.9; margin-top:3px; }
.compare .opt .body { padding:18px 22px; }
.compare .opt .body li { margin:0 0 9px; color:var(--cc-ink-soft); font-size:.96rem; }
.compare .opt .body .clock { font-weight:800; }
.compare .opt.primary .clock { color:var(--success-fg); }
.compare .opt.guest .clock { color:var(--warn-fg); }

.compare .opt.muted { box-shadow:none; }
.compare .opt.muted .head { background:#eef2f6; color:var(--cc-ink); }
.compare .opt.muted .head h4 { color:var(--cc-navy); }
.compare .opt.muted .head .sub { color:var(--cc-ink-soft); opacity:1; }
.compare .opt.muted .body li::marker { color:var(--cc-ink-soft); }

/* ---------- Menu reference grid (replaces run-on list) ---------- */
.menu-grid { list-style:none; margin:10px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.menu-grid li { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:15px 17px; box-shadow:var(--sh-sm); }
.menu-grid .mi { display:block; font-weight:700; color:var(--cc-navy); margin:0 0 3px; }
.menu-grid .md { color:var(--cc-ink-soft); font-size:.93rem; }

/* ---------- Who-does-what trio ---------- */
.trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:8px 0; }
.trio .card { border:1px solid var(--border); border-radius:var(--radius); padding:24px 22px; background:var(--surface); box-shadow:var(--sh-sm); }
.trio .card h4 { margin:0 0 13px; color:var(--cc-navy); font-size:1.06rem; display:flex; align-items:center; gap:9px; }
.trio .card .dot { width:10px; height:10px; border-radius:50%; flex:none; }
.trio .card.us .dot { background:var(--cc-accent); }
.trio .card.gp .dot { background:var(--success-solid); }
.trio .card.you .dot { background:var(--warn-solid); }
.trio .card ul { list-style:none; margin:0; padding:0; }
.trio .card li { padding:0 0 10px 19px; position:relative; color:var(--cc-ink-soft); font-size:.95rem; }
.trio .card li::before { content:"›"; position:absolute; left:2px; color:var(--cc-accent); font-weight:800; }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:12px; }
.faq details { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--sh-sm); overflow:hidden; }
.faq summary { cursor:pointer; padding:16px 20px; font-weight:700; color:var(--cc-navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-weight:800; color:var(--cc-accent); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { margin:0; padding:0 20px 18px; color:var(--cc-ink-soft); }

/* ---------- Glossary pill (in menu-grid) ---------- */
.menu-grid .mi .tag { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.04em;
  padding:2px 9px; border-radius:var(--radius-pill); margin-right:7px; vertical-align:middle; }
.tag.ok { background:var(--success-bg); color:var(--success-fg); }
.tag.warnt { background:var(--warn-bg); color:var(--warn-fg); }
.tag.info { background:var(--info-bg); color:var(--info-fg); }
.tag.dim { background:#eef2f6; color:var(--cc-ink-soft); }

/* ---------- Stub band (shell only) ---------- */
.stub { border:1.5px dashed var(--border-input); border-radius:var(--radius);
  padding:30px; text-align:center; color:var(--cc-ink-soft); background:#fbfdff; }
.stub strong { color:var(--cc-navy); }

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .cando, .compare { grid-template-columns:1fr; }
  .steps > li { padding-left:54px; }
  .guide-hero { padding:128px 0 64px; }
}

/* ---------- Clickable screenshots + lightbox ---------- */
.shot img { cursor:zoom-in; }
.shot-frame::after { content:"\2922  Enlarge"; position:absolute; bottom:12px; right:12px;
  background:rgba(34,82,120,.85); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  padding:5px 12px; border-radius:var(--radius-pill); opacity:0; transition:opacity .15s var(--ease);
  pointer-events:none; box-shadow:var(--sh-sm); }
.shot-frame:hover::after { opacity:1; }

.lightbox { position:fixed; inset:0; z-index:1000; background:rgba(20,40,56,.88);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center; padding:30px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:96vw; max-height:92vh; border-radius:12px; box-shadow:var(--sh-xl);
  cursor:zoom-out; background:#fff; }
.lightbox-close { position:fixed; top:18px; right:22px; width:48px; height:48px; border-radius:50%;
  border:0; background:rgba(255,255,255,.16); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .15s; }
.lightbox-close:hover { background:rgba(255,255,255,.3); }
.lightbox-hint { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7);
  font-size:.82rem; font-weight:600; }

/* ============================================================
   PRINT — flatten chrome, force everything visible, paginate.
   The same page becomes the PDF via headless-Chrome print.
   ============================================================ */
@media print {
  .nav, .site-foot, .scroll-progress, .cc-deco, .guide-actions, .nav-toggle, .lightbox { display:none !important; }
  .shot-frame::after { display:none !important; }
  .guide-hero { background:#fff !important; color:var(--cc-ink) !important; padding:0 0 24px; }
  .guide-hero h1, .guide-hero .lede, .guide-meta { color:var(--cc-ink) !important; }
  .guide-hero .eyebrow { color:var(--cc-accent) !important; }
  .guide-section { padding:22px 0; break-inside:avoid-page; }
  .guide-section:nth-of-type(even){ background:#fff; }
  .toc-grid { display:none; }                 /* TOC is interactive; drop from PDF */
  .shot, .callout, .compare .opt, .cando .card, .steps > li { break-inside:avoid; }
  a { color:var(--cc-ink) !important; text-decoration:none; }
  body { font-size:11pt; }
  @page { margin:16mm 14mm; }
}