/* ══════════════════════════════════════════════════════════════════
   Bio sayfasında randevu çekmecesi (dolvy.app/c/{slug})
   Çekmece sektör sitesinin çekmecesidir (landing.js, aynı akış ve aynı uçlar);
   buradaki kurallar landing.css'in çekmece ve form kurallarının .drawer altına
   alınmış kopyasıdır. Bio'nun kendi sınıfları (.btn, .slot, .pkg-name) çekmeceye
   sızmasın diye her kural .drawer ile başlar. Renk, yazı ve köşe Bio temasından
   gelir: landing'in tokenları burada Bio değişkenlerine bağlanır.
   landing.css'te çekmece kuralı değişirse buraya da taşıyın.
   ══════════════════════════════════════════════════════════════════ */
.drawer{
  --surface:var(--card); --ink:var(--fg); --ink-2:color-mix(in srgb,var(--fg) 72%,var(--card)); --ink-3:var(--muted);
  --bg-2:color-mix(in srgb,var(--fg) 7%,var(--card)); --line:var(--border); --line-2:color-mix(in srgb,var(--fg) 20%,var(--card));
  --accent:var(--c); --accent-ink:color-mix(in srgb,var(--c) 82%,#000); --on-accent:#fff; --accent-soft:color-mix(in srgb,var(--c) 12%,var(--card));
  --nude:color-mix(in srgb,var(--c) 22%,var(--card));
  --ok:#1f8a5b; --ok-soft:color-mix(in srgb,#1f8a5b 14%,var(--card)); --err:#c2333f; --err-soft:color-mix(in srgb,#c2333f 12%,var(--card));
  --shadow:0 10px 40px -12px rgba(0,0,0,.35);
  --f-display:var(--hfont); --f-body:var(--font); --f-mono:var(--font);
  --r-s:calc(var(--r) * .4); --r-m:calc(var(--r) * .6); --r-l:calc(var(--r) + 6px);
  position:fixed;inset:0;z-index:90;color:var(--ink);font:400 16px/1.5 var(--f-body);text-align:left
}
.drawer [hidden]{display:none!important}
.drawer p,.drawer h2,.drawer h3{margin:0}
.drawer :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-s)}
.drawer .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drawer .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.drawer .btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h);padding:0 22px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--f-body);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s;white-space:nowrap}
.drawer .btn-primary{background:var(--accent);color:var(--on-accent)}
.drawer .btn-primary:hover{background:var(--accent-ink)}
.drawer .btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.drawer .btn-ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.drawer .btn-link{background:none;border:0;padding:0;min-height:0;color:var(--cem,var(--accent));font:600 15px var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.drawer .btn:active{transform:translateY(1px)}
.drawer .btn[disabled],.drawer .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.drawer .btn-sm{--h:38px;padding:0 16px;font-size:14px}
.drawer .fld{display:grid;gap:6px}
.drawer .fld + .fld{margin-top:14px}
.drawer .fld label,.drawer .fld legend,.drawer .flabel{font:600 14px/1.3 var(--f-body)}
.drawer .hint{font-size:13px;color:var(--ink-3);font-weight:400}
.drawer .inp{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink);font:400 16px var(--f-body)}
.drawer textarea.inp{min-height:96px;resize:vertical}
.drawer .inp:hover{border-color:var(--ink-3)}
.drawer .inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.drawer .inp[aria-invalid="true"]{border-color:var(--err);background:var(--err-soft)}
.drawer .err{font-size:13px;color:var(--err);font-weight:500}
.drawer .err:empty{display:none}
.drawer .chk{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.drawer .chk input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.drawer .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.drawer .seg{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.drawer .seg input,.drawer .shapes input{position:absolute;opacity:0;pointer-events:none}
.drawer .seg label{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font:500 14px var(--f-body);cursor:pointer}
.drawer .seg input:checked + label{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.drawer .seg input:focus-visible + label,.drawer .shapes input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.drawer .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.drawer .row2 .fld + .fld{margin-top:0}
.drawer .form-status{padding:14px 16px;border-radius:var(--r-m);font-size:14.5px;background:var(--err-soft);color:var(--err)}
@media (max-width:600px){.drawer .row2{grid-template-columns:1fr}}
.drawer .drawer-scrim{position:absolute;inset:0;background:rgba(14,10,12,.5);animation:bk-fade .2s}
.drawer .sheet{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);display:grid;grid-template-rows:auto 1fr auto;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);animation:bk-slide .28s cubic-bezier(.2,.8,.2,1)}
@keyframes bk-slide{from{transform:translateX(24px);opacity:.4}}
@keyframes bk-fade{from{opacity:0}}
.drawer .sheet-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.drawer .sheet-hd h2{font:400 26px/1.1 var(--f-display)}
.drawer .steps{display:flex;gap:6px;margin-top:6px}
.drawer .steps i{width:22px;height:3px;border-radius:2px;background:var(--line-2)}
.drawer .steps i.on{background:var(--accent)}
.drawer .sheet-bd{overflow:auto;padding:20px;overscroll-behavior:contain}
.drawer .sheet-ft{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg)}
@media (max-width:620px){.drawer .sheet{top:auto;width:100%;max-height:94svh;border-radius:var(--r-l) var(--r-l) 0 0;animation-name:bk-up}@keyframes bk-up{from{transform:translateY(30px);opacity:.4}}}
.drawer .book-lbl{display:flex;justify-content:space-between;align-items:center;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px}
.drawer .book-lbl:first-child{margin-top:0}
.drawer .book-lbl .wk{display:inline-flex;align-items:center;gap:4px}
.drawer .wk-btn{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);font:400 16px/1 var(--f-body);cursor:pointer}
.drawer .wk-btn:disabled{opacity:.35;cursor:default}
.drawer .svc-pick{display:grid;gap:6px}
.drawer .svc-opt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.drawer .svc-opt:hover{border-color:var(--line-2);background:var(--bg)}
.drawer .svc-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.drawer .radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center}
.drawer .svc-opt[aria-pressed="true"] .radio{border-color:var(--accent)}
.drawer .svc-opt[aria-pressed="true"] .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.drawer .tick{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);display:grid;place-items:center}
.drawer .svc-opt[aria-pressed="true"] .tick{border-color:var(--accent);background:var(--accent)}
.drawer .svc-opt[aria-pressed="true"] .tick::after{content:"";width:9px;height:5px;border:solid var(--surface);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.drawer .svc-opt .nm{font-weight:600;font-size:15px;line-height:1.25}
.drawer .svc-opt .mt{display:block;font:400 12.5px/1.3 var(--f-mono);color:var(--ink-3);margin-top:2px}
.drawer .svc-opt .pr{font:500 14px var(--f-mono);white-space:nowrap}
.drawer .more{margin-top:8px;font:500 13.5px var(--f-body)}
.drawer .staff-pick{display:flex;flex-wrap:wrap;gap:6px}
.drawer .staff-pick button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:500 14px var(--f-body);cursor:pointer}
.drawer .staff-pick button.any,.drawer .staff-pick button:not(:has(i)){padding-left:14px}
.drawer .staff-pick button i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--nude);font:normal 600 12px var(--f-body)}
.drawer .staff-pick button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.drawer .staff-pick button i.dot{width:10px;height:10px;margin-left:8px;background:var(--ink-3)}
.drawer .book-note{margin:8px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.45}
.drawer .book-note .btn-link{font-size:inherit}
.drawer .book-note + #bookForm{margin-top:14px}
.drawer .skel.wide{display:block;height:58px;margin-bottom:6px}
.drawer .slot.wait{animation:bk-sh 1.1s linear infinite;background:linear-gradient(90deg,var(--bg-2),var(--bg),var(--bg-2));background-size:200% 100%}
.drawer .slot:disabled{cursor:progress}
.drawer .day.held:not([aria-pressed="true"]){border-color:var(--ok)}
.drawer .days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.drawer .day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border:1px solid var(--line);border-radius:var(--r-m);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.drawer .day small{font:500 10.5px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.drawer .day b{font:500 18px/1.1 var(--f-display)}
.drawer .day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.drawer .day[aria-pressed="true"] small{color:inherit;opacity:.75}
.drawer .day:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.drawer .day.full:disabled{text-decoration:none}
.drawer .slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:84px;align-content:start}
.drawer .slot{height:40px;border:1px solid var(--line);border-radius:var(--r-m);background:transparent;color:var(--ink);font:500 14px var(--f-mono);cursor:pointer}
.drawer .slot:hover{border-color:var(--ok)}
.drawer .slot[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.drawer .more-slots{grid-column:1/-1;justify-self:start;margin-top:4px;font-size:13.5px}
.drawer .skel{height:40px;border-radius:var(--r-m);background:linear-gradient(90deg,var(--bg-2),var(--bg),var(--bg-2));background-size:200% 100%;animation:bk-sh 1.1s linear infinite}
@keyframes bk-sh{to{background-position:-200% 0}}
.drawer .empty{grid-column:1/-1;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-m);font-size:14px;color:var(--ink-2)}
.drawer .book-sum{font-size:13.5px;color:var(--ink-2);line-height:1.35;min-width:0}
.drawer .book-sum b{color:var(--ink);font-weight:600;display:block;font-size:14.5px}
.drawer .back{background:none;border:0;padding:0;color:var(--ink-2);font:500 13.5px var(--f-body);cursor:pointer}
.drawer .back:hover{color:var(--ink)}
.drawer .recap{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:12px 14px;background:var(--bg);border-radius:var(--r-m);font-size:14px;margin:12px 0 18px}
.drawer .recap dt{font:500 11px/1.9 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.drawer .recap dd{margin:0;font-weight:600}
.drawer .hold-note{margin:-6px 0 16px;font:400 12.5px var(--f-mono);color:var(--ink-3)}
.drawer .hold-note.late{color:var(--err)}
.drawer .book-sum [data-cd]{font-family:var(--f-mono)}
.drawer .fld .opt{font-weight:400;color:var(--ink-3);font-size:12.5px}
.drawer #bookForm .chk{margin-top:14px}
.drawer #bookForm .row2 + .fld{margin-top:14px}
.drawer .bk-coupon{margin-top:16px}
.drawer .coupon-row{display:flex;gap:8px}
.drawer .coupon-row .inp{flex:1;min-width:0;text-transform:uppercase}
.drawer .coupon-row .btn{flex:none}
.drawer .ok-t{font-size:13px;color:var(--ok);font-weight:500}
.drawer .bk-coupon .ok-t{margin-top:8px}
.drawer .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m)}
.drawer .total span{font-weight:600}
.drawer .total small{font-weight:400;color:var(--ink-3)}
.drawer .total b{font:500 18px var(--f-mono)}
.drawer .total s{color:var(--ink-3);font-size:14px;margin-right:6px}
.drawer .id-gate{padding:16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.drawer .id-t{margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.45}
.drawer .id-t b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:4px}
.drawer .id-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.drawer .recap.prog{margin-top:16px}
.drawer .sheet .form-status{margin-bottom:12px}
.drawer .series{margin-top:14px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-m)}
.drawer .series b{color:var(--ink)}
.drawer .series-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.drawer .series select{width:auto;min-height:40px}
.drawer .series p{flex-basis:100%;margin-top:2px;font:400 12.5px var(--f-mono);color:var(--ink-3)}
.drawer .series.intent{margin:0 0 14px;border-style:solid;border-color:var(--accent);background:var(--accent-soft);font-size:14px;line-height:1.5;color:var(--ink-2)}
.drawer .series p.warn{font:500 13px var(--f-body);color:var(--err);margin-top:6px}
.drawer .series>p.warn:first-child{margin-top:0}
.drawer .series .chk{margin-top:8px}
.drawer .series small{color:var(--ink-3)}
.drawer .pkg-name{font:400 28px/1.15 var(--f-display);margin:2px 0 4px}
.drawer .pkg-price{font-size:20px;color:var(--ink);margin-bottom:4px}
.drawer .done .ok{width:46px;height:46px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin-bottom:16px}
.drawer .done h3{font:400 30px/1.1 var(--f-display)}
.drawer .done p{color:var(--ink-2);margin-top:8px}
.drawer .done ul{margin:16px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--ink-2);display:grid;gap:6px}
.drawer .done li::before{content:"— ";color:var(--ink-3)}
.drawer .sheet-ft .btn-ghost{color:var(--ink);border-color:var(--line-2)}
.drawer .x{background:none;border:0;width:36px;height:36px;border-radius:50%;color:var(--ink-2);cursor:pointer;font-size:22px;line-height:1;flex:none}
.drawer .x:hover{background:var(--bg)}
.drawer .sheet-bd fieldset.fld{border:0;padding:0;margin:0 0 14px;min-width:0}
.drawer .sheet-bd fieldset.fld legend{padding:0;margin-bottom:6px}
/* Hizmet soruları: formun başında, sayaçlı sayı alanı (landing.css'teki kuralın eşi) */
.drawer .bk-qs{margin-bottom:18px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.drawer .bk-qs > .fld,.drawer .sheet-bd .bk-qs > fieldset.fld{margin:0 0 14px}
.drawer .qty{display:inline-flex;align-items:center;justify-self:start;border:1px solid var(--line-2);border-radius:999px}
.drawer .qty button{width:40px;height:40px;border:0;background:none;color:inherit;font-size:18px;cursor:pointer;border-radius:50%}
.drawer .qty output{min-width:28px;text-align:center;font-weight:600}
/* Dar ekran: çekmece ekrandan taşmasın (landing.css'teki kuralın eşi) */
.drawer .sheet{grid-template-columns:minmax(0,1fr)}
.drawer .recap{grid-template-columns:auto minmax(0,1fr)}
.drawer .recap dd{overflow-wrap:anywhere}
.drawer .sheet-ft{flex-wrap:wrap}
.drawer .sheet-ft>*{min-width:0}
.drawer .sheet-ft .btn{white-space:normal;text-align:center;line-height:1.2}
.drawer .sheet-ft:not(:has(.book-sum)) .btn{flex:1 1 auto}
/* Bio'nun .btn ve .slot kuralları çekmecenin düğmelerine taşmasın */
.drawer .btn{width:auto;min-height:var(--h);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-transform:none;letter-spacing:normal}
.drawer .btn:hover{transform:none}
.drawer .slot{display:block;padding:0}
/* Çekmece açıkken köşede yüzen düğmeler (AI sohbet, form) çekmecenin alt çubuğunu örtmesin */
html.bk-open .dsw-launcher,html.bk-open .dsw-panel,html.bk-open .df-launcher{display:none!important}

/* ── Ürün penceresi ve sepet (landing.css "Mağaza" kurallarının .drawer altındaki kopyası) ──
   Bio'nun katalog kartı da .prod sınıfını taşıdığı için kurallar yalnız çekmecenin içine yazılır. */
.cart-btn{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:72;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:999px;border:0;background:var(--fg);color:var(--card);font:600 15px var(--font);box-shadow:0 10px 40px -12px rgba(0,0,0,.35);cursor:pointer}
.cart-btn[hidden]{display:none}
html.bk-open .cart-btn{display:none}
.drawer .pv-gal{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px 18px;padding:0 20px;overscroll-behavior-x:contain}
.drawer .pv-gal img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-m);scroll-snap-align:start;background:var(--bg-2)}
.drawer .pv-gal.one{grid-auto-columns:100%}
.drawer .pv-price{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:20px}
.drawer .pv-price s{font-size:15px;color:var(--ink-3)}
.drawer .pv-desc{color:var(--ink-2);font-size:15px;line-height:1.55;white-space:pre-line;margin:0 0 18px}
.drawer .pv-stock{font-size:13.5px;color:var(--err);margin:4px 0 14px}
.drawer .pv-more{margin-top:18px}
.drawer .cart-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px}
.drawer .cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center}
.drawer .cart-item .ph{width:64px;aspect-ratio:4/5;border-radius:var(--r-s);overflow:hidden;background:var(--bg-2);display:grid;place-items:center;color:var(--ink-3)}
.drawer .cart-item .ph img{width:100%;height:100%;object-fit:cover}
.drawer .cart-item b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.drawer .cart-item small{display:block;color:var(--ink-3);font-size:13px}
.drawer .cart-item .qty button{width:32px;height:32px;font-size:16px}
.drawer .cart-sum{display:grid;gap:6px;padding:14px 0;border-top:1px solid var(--line);margin:0 0 18px}
.drawer .cart-sum div{display:flex;justify-content:space-between;gap:12px}
.drawer .cart-sum .tot{font-weight:700;font-size:17px}
.drawer .cart-sum .hint{margin:0}
.drawer .cart-sum .cp-line{font-weight:500;font-size:15px;color:var(--ok)}
.drawer .cp-row{display:flex;gap:8px;align-items:center}
.drawer .cp-row .inp{flex:1;min-width:0;text-transform:uppercase}
.drawer .fld .hint.err{color:var(--err)}
.drawer .cart-empty{text-align:center;padding:40px 0;color:var(--ink-2)}
.drawer .cart-done{text-align:center;padding:12px 0}
.drawer .cart-done .ok{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);font-size:28px}
.drawer .cart-done h3{font:400 26px/1.15 var(--f-display);margin:0 0 6px}
.drawer .cart-done p{color:var(--ink-2);margin:0 0 16px}
.drawer .cart-done .btn{margin:6px 4px 0}
.drawer #shopForm fieldset.fld{border:0;padding:0;margin-left:0;margin-right:0;min-width:0}
.drawer #shopForm fieldset.fld legend{padding:0;margin-bottom:6px}
.drawer #shopForm > * + *{margin-top:14px}
.drawer .sheet-bd fieldset.fld{border:0;padding:0;margin:0 0 14px;min-width:0}
.drawer .sheet-bd fieldset.fld legend{padding:0;margin-bottom:6px}

/* Grup dersi kaydı çekmecede (landing.js openClass) */
.drawer .book-note + #clsForm{margin-top:14px}
.drawer #clsForm .chk{margin-top:14px}
.drawer #clsForm .row2 + .fld,.drawer #clsForm .fld + .row2{margin-top:14px}
.drawer .recap .opt{font-weight:400;color:var(--ink-3);font-size:12.5px}
.drawer .cls-pick{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;width:100%;padding:12px 14px;margin-bottom:6px;border:1px solid var(--line);border-radius:var(--r-m);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.drawer .cls-pick:hover{border-color:var(--ok)}
.drawer .cls-pick .t{font:500 15px/1.2 var(--f-mono)}
.drawer .cls-pick .t small,.drawer .cls-pick .n small{display:block;font-size:12px;color:var(--ink-3)}
.drawer .cls-pick .n{min-width:0}
.drawer .cls-pick .n b{display:block;font-weight:600;font-size:14.5px}
.drawer .cls-pick .s{font:500 12px var(--f-mono);color:var(--ink-2);white-space:nowrap}
.drawer .cls-pick .s.low{color:var(--accent)}
.drawer .cls-pick .s.full{color:var(--err)}
.drawer .cls-pick.full{opacity:.75}
.drawer .staff-pick + .book-lbl{margin-top:22px}