/* Tuva eier-app: Phase B of the tidy app (suggested services, quick hours questions, the «Popular with» pill). Only what the existing classes do not cover;
   colours and sizes come from the :root tokens of app.css. No inline styles (CSP). */
.tdsug{margin-bottom:12px}
.tdsug-h{margin:0 0 4px;font-size:18px}
.tdsug-list{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:2px}
.tdsug-l{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.tdsug-l{gap:4px}
/* the tick box: the control is the whole 44px square (a finger hits it anywhere), the drawn box inside it is 24px */
.tdsug-cb{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:44px;margin:0;background:transparent;cursor:pointer}
.tdsug-cb::before{content:"";position:absolute;inset:10px;border:2px solid var(--line-strong);border-radius:6px;background:var(--surface-2)}
.tdsug-cb:checked::before{background:var(--accent);border-color:var(--accent)}
.tdsug-cb:checked::after{content:"";position:absolute;left:17px;top:11px;width:6px;height:12px;border:solid var(--surface);border-width:0 3px 3px 0;transform:rotate(45deg)}
.tdsug-cb:focus-visible{outline:none}
.tdsug-cb:focus-visible::before{outline:3px solid var(--focus);outline-offset:2px}
.tdq-h{margin:14px 0 4px;font-size:16px}
.tdq-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.tdq-li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.tdq-t{flex:1 1 220px}
.tdq-b{display:flex;gap:8px}
.tdpill{display:inline-block;margin:4px 0 2px;padding:2px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);font-size:13px;font-weight:600}