/* Settings drawer (settings makeover step 1, plans/settings-makeover.md). Colors come from the company theme tokens. */
.tb-sd-gear{display:inline-flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}
.tb-sd-gear svg{width:22px;height:22px}
.sd-shade{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9000;opacity:0;transition:opacity .18s}
.sd-panel{position:fixed;top:0;right:0;bottom:0;width:min(880px,100vw);background:var(--card);color:var(--ink);z-index:9001;display:flex;flex-direction:column;box-shadow:-8px 0 28px rgba(0,0,0,.22);transform:translateX(100%);transition:transform .2s ease}
.sd-open .sd-shade{opacity:1}.sd-open .sd-panel{transform:none}
.sd-head{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 10px 0 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.sd-head h2{margin:0;font-size:18px;font-weight:700;flex:1}
.sd-wrap .tile{min-width:44px;min-height:44px;border:0;background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;border-radius:10px}
.sd-wrap .tile:hover,.sd-wrap .tile:focus-visible{background:var(--bg)}
.sd-wrap .sd-bk{visibility:hidden}.sd-wrap .sd-bk.on{visibility:visible}
.sd-frame{flex:1 1 auto;border:0;width:100%;background:transparent}
html.sd-lock,html.sd-lock body{overflow:hidden}
@media (max-width:700px){
  .sd-panel{width:100vw;transform:translateY(100%)}
  .sd-head{padding-top:env(safe-area-inset-top)}
}
html.tt-sd .alert-banner{position:sticky;top:0;z-index:5}
/* Step 4: a widget's own settings flip (widgets.php widget_flip_html) */
.dw.dw-flipped .dw-in{display:none}
.dw .dw-back{flex:1;display:flex;flex-direction:column;gap:8px}.dw .dw-back[hidden]{display:none}
.dw .dw-back-strip{padding:6px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.dw .dw-back-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}