/* Set up your clinic (setupguide.js): the guide page, its steps, and the strip on the settings screens. Classes sg-. */
.sg-wrap{max-width:860px;margin:0 auto;padding:26px 24px 48px;display:flex;flex-direction:column;gap:22px}
.sg-barr{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.sg-langseg{width:auto;min-width:180px}
.sg-langseg button{padding:5px 14px}
.sg-flip{flex:none}
:root[dir=rtl] .sg-flip{transform:scaleX(-1)}

/* the opening: progress ring, welcome, the rule */
.sg-hero{display:flex;gap:22px;align-items:center;padding:22px 24px;border-radius:18px;background:linear-gradient(135deg,#f3f8fb 0%,#f7f5fc 100%);border:1px solid #e6edf2}
.sg-ring{--p:0;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#0d5e6f calc(var(--p) * 1%), #dfe8ec 0);position:relative}
.sg-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.sg-ring span{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.sg-ring b{font-size:var(--fs-20);font-weight:650;font-variant-numeric:tabular-nums;color:#0d3d47}
.sg-ring small{font-size:var(--fs-11);color:var(--ink2)}
.sg-herot{min-width:0}
.sg-herot h1{margin:0 0 6px;font-size:var(--fs-20);font-weight:650;letter-spacing:-.01em;line-height:1.25}
.sg-prog{margin:0 0 8px;font-weight:600;color:#0d5e6f;font-variant-numeric:tabular-nums}
.sg-rule{margin:0;color:var(--ink2);line-height:1.5;max-width:560px}

.sg-ready{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:#e9f7ee;border:1px solid #c9ebd5;color:#145c2e}
.sg-ready>svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:#1d8a3c;color:#fff;box-sizing:content-box}
.sg-ready div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sg-ready span{color:#3d6b4c;font-size:var(--fs-12_5)}

/* a group of steps */
.sg-group{display:flex;flex-direction:column;gap:10px}
.sg-gh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 4px}
.sg-gh h2{margin:0;font-size:var(--fs-15);font-weight:650}
.sg-list{list-style:none;margin:0;padding:0;border:1px solid var(--sep);border-radius:16px;background:#fff;overflow:hidden}
.sg-step+.sg-step{border-top:1px solid var(--sep2)}
.sg-head{display:grid;grid-template-columns:28px minmax(0,1fr) auto 16px;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:start}
.sg-headc{grid-template-columns:28px minmax(0,1fr) auto}
button.sg-head:hover{background:#fafafb}
.sg-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f0f0f2;color:var(--ink3)}
.sg-tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sg-tt b{font-weight:600;font-size:var(--fs-13_5);display:flex;gap:8px;align-items:baseline}
.sg-tt small{color:var(--ink2);font-size:var(--fs-12_5);line-height:1.45}
.sg-n{color:var(--ink3);font-weight:600;font-size:var(--fs-12);font-variant-numeric:tabular-nums;min-width:16px}
.sg-chev{width:8px;height:8px;border-inline-end:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin-top:-4px;transition:transform .15s ease}
.sg-step.open .sg-chev{transform:rotate(225deg);margin-top:4px}

/* statuses: done, Sinn's suggestion, later, needed, optional, coming */
.sg-pill{font-size:var(--fs-11_5);font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;background:#f0f0f2;color:var(--ink2)}
.sg-p-done{background:#e6f6ec;color:#1d7a3a}
.sg-p-suggested{background:#e8f1f8;color:#0d5e6f}
.sg-p-later{background:#f3f0e8;color:#7a5b12}
.sg-p-needed{background:#fdeee6;color:#a3410b}
.sg-p-coming{background:#f2f0f8;color:#5b4b8a}
.sg-s-done .sg-ic{background:#1d8a3c;color:#fff}
.sg-s-suggested .sg-ic{background:#0d5e6f;color:#fff}
.sg-s-later .sg-ic{background:#f6efdc;color:#8a6516}
.sg-s-needed .sg-ic{background:#fdeee6;color:#d4570f}
.sg-s-coming .sg-ic{background:#f2f0f8;color:#7a6aa8}
.sg-s-coming .sg-tt b{color:var(--ink2)}
.sg-coming{margin-block:-4px 14px;margin-inline:calc(16px + 28px + 12px) 16px;font-size:var(--fs-12_5);color:#5b4b8a;line-height:1.45}

/* an open step */
.sg-body{padding:0 16px 16px;padding-inline-start:calc(16px + 28px + 12px);display:flex;flex-direction:column;gap:12px}
.sg-sug{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:#f3f8fb;border:1px solid #e1edf3;line-height:1.45}
.sg-sugl{display:inline-flex;align-items:center;gap:5px;font-weight:650;font-size:var(--fs-12);color:#0d5e6f;white-space:nowrap}
.sg-facts{color:var(--ink2);font-size:var(--fs-12_5);line-height:1.45}
.sg-note{color:#7a5b12;font-size:var(--fs-12_5)}
.sg-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sg-acts-in{gap:12px}
.sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;text-decoration:none;white-space:nowrap}
.go2.sg-btn{height:36px}
.sec2.sg-btn{height:36px}
.mini-btn.sg-btn{height:32px;font-weight:600;color:var(--ink)}
.sg-inrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sg-inrow .seg{width:auto;min-width:220px}
.sg-inrow .seg button{padding:5px 14px}
.sg-inhelp{display:block;margin-top:-6px}

/* choices asked on the guide itself: what the clinic treats, the ways to pay */
.sg-opts,.sg-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.sg-opt,.sg-way{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--sep);background:#fff;text-align:start;line-height:1.4}
.sg-opt small,.sg-way small{color:var(--ink2);font-size:var(--fs-12)}
.sg-opt:hover,.sg-way:hover:not(:disabled){border-color:#b9cdd6}
.sg-opt[aria-checked=true],.sg-way[aria-pressed=true]{border-color:#0d5e6f;background:#f3f8fb;box-shadow:0 0 0 3px rgba(13,94,111,.08)}
.sg-way:disabled{cursor:default;opacity:1}
.sg-way[aria-pressed=true] b::after,.sg-opt[aria-checked=true] b::after{content:" ✓";color:#0d5e6f}

.sg-foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:center;padding-top:4px}

/* the sidebar and the Clinic tab row */
.nav2 .sg-nav{color:#0d5e6f;font-weight:600}
.sg-tablink{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;margin-inline-start:14px;padding:4px 10px;border-radius:999px;font-size:var(--fs-12);font-weight:600;color:#0d5e6f;background:#eaf3f6;text-decoration:none}
.sg-tablink svg{width:12px;height:12px}
.sg-tablink-open{background:#fdeee6;color:#a3410b}

/* the strip on a settings screen while a step is being done there */
.sg-strip{margin:0 0 18px;padding:14px 16px;border-radius:14px;border:1px solid #d7e6ec;background:linear-gradient(180deg,#f5fafc,#fff);display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(13,94,111,.05)}
.sg-stop{display:flex;align-items:center;gap:10px;justify-content:space-between}
.sg-kick{font-size:var(--fs-11_5);font-weight:650;letter-spacing:.02em;color:#0d5e6f;text-transform:uppercase}
:root[lang=ar] .sg-kick{text-transform:none;letter-spacing:0}
.sg-stt{font-size:var(--fs-15);font-weight:650}
.sg-swhy,.sg-ssug,.sg-sdo{margin:0;line-height:1.5}
.sg-swhy{color:var(--ink2)}
.sg-sdo{font-weight:500}
.sg-strip .sg-acts{margin-top:6px}
.sg-snext{margin-inline-start:auto}

/* Clinic → Discounts & chairs: adding a chair; Clinic → Treatments: the price beside each treatment */
.chairadd{gap:10px}
.chairadd .chairin{flex:1;min-width:0}
.txc-fee input{width:84px}

@media (max-width:700px){
  .sg-wrap{padding:16px 16px 40px;gap:18px}
  .sg-hero{flex-direction:column;align-items:flex-start;padding:18px}
  .sg-ring{width:76px;height:76px}
  .sg-herot h1{font-size:var(--fs-18)}
  .sg-head{grid-template-columns:28px minmax(0,1fr) 16px;padding:12px 14px}
  .sg-head .sg-pill{grid-column:2;grid-row:2;justify-self:start}
  .sg-head .sg-chev{grid-row:1/3;grid-column:3}
  .sg-headc{grid-template-columns:28px minmax(0,1fr)}
  .sg-body{padding-inline:14px}
  .sg-coming{margin-block:0 12px;margin-inline:14px}
  .sg-langseg{min-width:0}
  .sg-snext{margin-inline-start:0}
  .sg-tablink{margin-inline-start:0}
}
/* the practice run and "We're open" (Practice.cs) */
.pr-box { display: grid; gap: 10px; }
.pr-on { padding: 10px 12px; border-radius: 10px; background: #eef5ff; border: 1px solid #c9dcf5; font-size: var(--fs-13); line-height: 1.6; }
.pr-pats { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.pr-pat { text-decoration: none; }
.pr-tries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pr-tries li { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px; background: #f6f6f8; font-size: var(--fs-13); color: var(--ink2); }
.pr-tries li.pr-done { background: #f2f8f3; color: #2e6b34; font-weight: 500; }
.pr-safe { display: block; line-height: 1.45; }
.pr-clear { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #f1c4bf; background: #fffafa; }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 10px; background: #fff; border: 1px solid var(--sep); }
.pr-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--sep2); font-size: var(--fs-13); }
.pr-list li:last-child { border-bottom: 0; }
.pr-list li > span { display: grid; gap: 2px; min-width: 0; }
.pr-list small { overflow-wrap: anywhere; }
.go2.pr-del { background: #b3261e; }
.pr-open { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 18px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #f2f8f3, #eef5ff); border: 1px solid #cfe3d3; }
.pr-open > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 260px; }
.pr-open b { font-size: var(--fs-17); }
.pr-open .go2 { width: auto; padding: 0 22px; }
.pr-banner { position: fixed; inset-inline-start: 12px; bottom: 12px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: min(560px, calc(100vw - 24px));
  padding: 8px 12px; border-radius: 12px; background: #8a4b00; color: #fff; font-size: var(--fs-12); box-shadow: 0 6px 20px rgba(20, 40, 80, .25); }
.pr-banner b { text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-12); background: rgba(255,255,255,.16); padding: 2px 7px; border-radius: 6px; }
.pr-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* the practice clinic: an amber line along the top of every screen, the sign-in page too (Practice.cs) */
body.pr-clinic { box-shadow: inset 0 4px 0 #8a4b00; }
body.pr-clinic .pr-banner { z-index: 1000; }
/* the practice clinic: anything printed from a screen says so across every page (server documents carry their own mark) */
@media print {
  body.pr-clinic::after { content: "PRACTICE — NOT VALID · عيادة تدريب — غير صالح"; position: fixed; inset: 40% 0 auto 0; text-align: center; transform: rotate(-30deg);
    font: 700 44px/1.3 sans-serif; color: rgba(200, 30, 30, .22); pointer-events: none; z-index: 2147483647; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* what a step still needs, said exactly (Codex review 9 #4) */
.sg-miss{color:#a3410b;font-weight:600}
/* the opening hours as Sinn suggests them, confirmed with "These are our hours" (#7) */
.sg-hours{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--sep);background:#fbfcfc}
.sg-hours-ask{border-style:dashed;border-color:#b9cdd6;background:#f7fafb}
.sg-week{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sg-week li{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-13)}
.sg-week b{min-width:170px;font-weight:600}
/* VAT: one question (#8) */
.sg-q{display:flex;flex-direction:column;gap:10px}
.sg-qt{font-size:var(--fs-14)}
.sg-vatf{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.sg-vatprev{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:#f6f6f8}
.sg-vatline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.sg-vatline>:nth-child(even){text-align:end}
.sg-vatline b{padding-top:4px;border-top:1px solid var(--sep)}
.sg-vatno{margin:0}
/* the first patient, or what stands in its way (#3) */
.sg-block{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border-radius:12px;background:#fdf3ec;border:1px solid #f6dccb}
.sg-block b{flex:1 1 240px;color:#8a3a0b;font-weight:600}
/* who works when: the chair each person gets before anything is filled in (#7) */
.sg-fill{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding:12px 14px;border-radius:12px;border:1px dashed #b9cdd6;background:#fff}
.sg-fillrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sg-fillrow b{min-width:140px}
.sg-fillrow select{min-width:160px;height:34px}
.sg-short{margin:0;font-size:var(--fs-12_5);line-height:1.45}
.sg-left{font-size:var(--fs-13)}
/* leaving with something not saved: save and go on, leave it, or stay (app.js leaveSheet) */
.lv-three{display:flex;flex-direction:column;gap:8px;padding:4px 16px 16px}
.lv-three .go2,.lv-three .sec2{width:100%;height:44px}
.lv-three .lv-discard{color:#b3261e}
.lv-three .lnk{align-self:center;padding:8px 12px}
@media (pointer:coarse){
  .sg-btn,.go2.sg-btn,.sec2.sg-btn,.mini-btn.sg-btn,.sg-opt,.sg-way,.sg-fillrow select,.sg-head{min-height:44px}
  .lv-three .lnk{min-height:44px}
}