/* practice.css -- session 335: Practice the cleaner app (practice.js) and the practice band on a practice visit's office view.
   The platform's tokens and button styles (tokens.css .btn, .btn-p); a link styled as a button keeps the button's look. */
.prc{ max-width:760px; margin:0 auto; padding:24px 16px 40px }
.prc-h{ font-size:28px; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0 0 8px }
.prc-lead{ font-size:14px; line-height:1.5; color:var(--text); margin:0 0 16px }
.prc-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; margin:0 0 16px }
.prc-ct{ font-size:15px; font-weight:600; color:var(--ink); margin:0 0 8px }
.prc-ct2{ margin-top:16px }
.prc-sub{ font-size:13px; font-weight:600; color:var(--ink); margin:14px 0 4px }   /* session 350: a practice Quality Check's alerts */
.prc-p{ font-size:13.5px; line-height:1.5; color:var(--text); margin:8px 0 0 }
.prc-row{ display:flex; gap:12px; font-size:14px; color:var(--ink); padding:4px 0; flex-wrap:wrap }
.prc-k{ flex:0 0 72px; color:var(--muted); font-weight:500 }
.prc-row > span:last-child{ flex:1 1 200px; min-width:0 }
.prc-acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px }
.prc a.btn, .prc-band a.btn, a.btn.prc-a{ display:inline-flex; align-items:center; text-decoration:none }
.prc .btn:focus-visible, .prc-band .btn:focus-visible, .prc-opt:focus-visible, .prc-in:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.prc-big{ display:block; width:100%; min-height:52px; font-size:17px }
.prc-ask{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:var(--ink); background:var(--warn-bg); border-radius:var(--radius); padding:8px 12px }
.prc-msg{ font-size:13px; color:var(--green-text); margin-top:8px; min-height:1em }
.prc-seg{ display:inline-flex; border:1.5px solid var(--teal-dark); border-radius:var(--radius); overflow:hidden }
.prc-opt{ border:0; background:var(--white); color:var(--teal-dark); font:inherit; font-size:13.5px; font-weight:600; padding:8px 16px; cursor:pointer }
.prc-opt + .prc-opt{ border-left:1.5px solid var(--teal-dark) }
.prc-opt:hover{ background:var(--line-soft) }
.prc-opt.on{ background:var(--teal-dark); color:var(--white) }
.prc-qr{ margin:16px 0 8px; line-height:0 }
.prc-qr svg{ width:240px; height:240px; max-width:100%; border:1px solid var(--line); border-radius:var(--radius) }
.prc-lbl{ display:block; font-size:12.5px; font-weight:500; color:var(--muted); margin:8px 0 4px }
.prc-copy{ display:flex; gap:8px; flex-wrap:wrap }
.prc-in{ flex:1 1 280px; min-width:0; height:var(--input-h); padding:0 var(--input-pad-x); border:1px solid var(--line); border-radius:var(--radius); background:var(--input-readonly-bg); color:var(--text); font:inherit; font-size:13px }
.prc-alerts{ list-style:none; margin:0; padding:0 }
.prc-alerts li{ padding:8px 0; border-top:1px solid var(--line-soft) }
.prc-alerts li:first-child{ border-top:0 }
.prc-al{ font-size:13.5px; color:var(--ink); line-height:1.45 }
.prc-as{ font-size:12.5px; color:var(--muted); margin-top:2px }
/* The band at the very top of a practice visit's office view. */
.prc-band{ background:var(--warn-bg); border:1px solid var(--line); border-left:4px solid var(--amber-dot); border-radius:var(--radius-lg); padding:12px 16px; margin:0 0 16px }
.prc-bt{ font-size:15px; font-weight:600; color:var(--warn-text) }
.prc-bs{ font-size:13.5px; color:var(--ink); line-height:1.45; margin-top:4px }
@media (max-width: 600px){ .prc{ padding:16px 16px 32px } .prc-h{ font-size:24px } .prc-qr svg{ width:200px; height:200px } }
/* Session 349: on a phone a segment of three or four choices (Kind of clean has four since session 347) went 28 px past a 390 screen. There it is
   a grid, two to a row, one teal line between the choices. */
@media (max-width: 600px){
  .prc-seg{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.5px; background:var(--teal-dark); max-width:100% }
  .prc-seg .prc-opt + .prc-opt{ border-left:0 }
  .prc-seg .prc-opt{ min-height:44px; padding:8px 10px }
}
/* The Staff page's Practice link (cleaner-office.js). */
.cp-prc{ border-top:1px solid #dfe3e6; padding:12px 20px 14px }   /* as the card's own rows (shell.css .cp-form) */
.cp-prc .cp-note{ padding:6px 0 0; border-top:0 }
.cp-prc .cp-k{ font-size:13.5px; font-weight:600; color:var(--ink) }
.cp-prc-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.cp-prc .btn:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.cp-prc-qr{ margin:12px 0 4px; line-height:0 }
.cp-prc-qr svg{ width:200px; height:200px; border:1px solid var(--line); border-radius:var(--radius) }
.cp-prc-words{ width:100%; min-height:96px; resize:vertical; font:inherit; font-size:13px; line-height:1.4 }
/* Session 349: "How to test" on the practice page, its Slack alerts picker, and the guide page (#practice/how-to), printed on one page. */
.prc-howto{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0 0 16px }
.prc-howto .prc-p{ margin:0; flex:1 1 260px }
.prc-sel{ height:var(--input-h); padding:0 var(--input-pad-x); border:1px solid var(--line); border-radius:var(--radius); background:var(--white); color:var(--ink); font:inherit; font-size:13.5px; max-width:100% }
.prc-sel:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.prc-acts .prc-lbl{ margin:0 }
.prg{ max-width:820px; margin:0 auto; padding:24px 16px 40px }
.prg-bar{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0 0 16px }
.prg-bar .btn:focus-visible, .prg-bar .prc-opt:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.prg-doc{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 28px; color:var(--ink) }
.prg-h{ font-size:24px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px }
.prg-check{ display:inline-block; font-size:12px; font-weight:600; color:var(--warn-text); background:var(--warn-bg); border-radius:var(--radius); padding:2px 8px; margin:2px 0 6px }
.prg-sub{ font-size:13.5px; line-height:1.5; color:var(--text); margin:4px 0 12px }
.prg-steps{ margin:0; padding:0 0 0 22px }
.prg-steps > li{ margin:0 0 10px; padding-left:2px }
.prg-steps > li::marker{ font-weight:700; color:var(--teal-dark) }
.prg-st{ font-size:15px; font-weight:600; margin:0 0 2px }
.prg-steps p{ font-size:13.5px; line-height:1.5; color:var(--text); margin:0 0 4px }
.prg-steps ul{ margin:2px 0 4px; padding-left:18px }
.prg-steps ul li{ font-size:13.5px; line-height:1.45; color:var(--text); margin:0 0 3px }
.prg-steps b{ color:var(--ink); font-weight:600 }
@media (max-width: 600px){ .prg{ padding:16px 16px 32px } .prg-doc{ padding:16px } .prg-h{ font-size:21px } }
@media print {
  @page{ size:letter; margin:12mm 13mm }
  .sky-fix, .valley, .side, .side-scrim, .top, .topband, .prg-bar, #toast, .toast{ display:none !important }
  html, body{ background:#fff !important }
  .main{ margin-left:0 !important }
  .wrap{ padding:0 !important; max-width:none !important; margin:0 !important }
  .prg{ max-width:none; padding:0; margin:0 }
  .prg-doc{ border:0; border-radius:0; padding:0 }
  .prg-h{ font-size:17pt }
  .prg-sub, .prg-steps p, .prg-steps ul li{ font-size:9.2pt; line-height:1.32 }   /* session 350: one more step (Practice a Quality Check), still one page */
  .prg-st{ font-size:11pt }
  .prg-steps > li{ margin:0 0 6px; break-inside:avoid }
  .prg-check{ border:1px solid #c9752b }
}