/* Touch points (widgets/touchpoints/touchpoints.js) */
.tp { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; background: var(--tile-bg); }
.tp__top { display: flex; flex-direction: column; gap: 2px; min-height: 38px; }
.tp__eyebrow { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tp__read { font-size: 13px; color: var(--ink); }
.tp__table { flex: 1; min-height: 0; display: grid; grid-template-rows: auto; grid-auto-rows: 1fr; }
.tp__row { display: grid; grid-template-columns: minmax(90px, 1.6fr) repeat(var(--cols), minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--line); }
.tp__row--head { border-top: 0; align-items: end; }
.tp__ch { height: 86px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; cursor: default; }
.tp__ch i { writing-mode: vertical-rl; transform: rotate(180deg); font-style: normal; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); transition: color .2s ease; }
.tp__name { font-size: 13px; color: var(--ink); cursor: default; padding-right: 8px; }
.tp__cell { display: grid; place-items: center; height: 100%; transition: background .2s ease; }
.tp__cell b { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .25s ease, background .25s ease; }
.tp__cell.is-yes b { background: var(--ink-2); box-shadow: none; }
.tp.is-focus .tp__cell b { opacity: .45; }
.tp__cell.is-lit { background: var(--bg); }
.tp.is-focus .tp__cell.is-lit b { opacity: 1; }
.tp__cell.is-lit.is-yes b { background: var(--mark); transform: scale(1.15); }
.tp__ch.is-lit i { color: var(--mark); }
@container (max-width: 560px) { .tp__name { font-size: 11.5px; } .tp__cell b { width: 10px; height: 10px; } }