/* Підказки «?» до річних накладних (assets/cost-hints.js): кабінет «Витратна частина» і крок 5 панелі на лендингу.
   Окремий файл, щоб кабінет не залежав від landing.css. Кольори — токени тем (у кабінеті через запасні --border-color / --text-muted). */
.tc-hint-btn { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; min-width: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--border, var(--border-color)); background: transparent; color: var(--muted, var(--text-muted)); font: 700 12px/1 var(--font-ui); cursor: pointer; position: relative; }
.tc-hint-btn::before { content: ''; position: absolute; inset: -11px; } /* ціль для пальця ≥ 44px */
.tc-hint-btn:hover, .tc-hint-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.tc-hint-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tc-hint-text { margin: 4px 0 8px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--border, var(--border-color)); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--muted, var(--text-muted)); font-size: 12px; line-height: 1.45; text-align: left; }
.tc-hint-text[hidden] { display: none; }

/* На телефоні body.layout-studio button { min-width: 40px } розтягував «?» (на 360px було 40×40) — і на лендингу, і в кабінеті.
   Тап-зона 44px лишається через ::before. */
#landing-screen .tc-hint-btn { width: 22px; height: 22px; min-height: 0; min-width: 22px; }
#cabinet-screen .tc-hint-btn { width: 22px; height: 22px; min-height: 0; min-width: 22px; }
#landing-screen .lp-hint-head { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }