/* Drop 10a: Projects tab. Colors only use the theme variables (--c-*), so every theme in Settings > Appearance restyles it. */
#pane-projects { background: var(--c-chat); color: var(--c-text); font-family: var(--font, inherit); }
#pane-projects { scrollbar-color: var(--c-deep) var(--c-side); }
.pj-root { position: relative; flex: 1; min-width: 0; height: 100%; display: grid; grid-template-columns: var(--pj-l, 290px) minmax(0, 1fr) var(--pj-r, 268px); }
.pj-root[data-has="0"] { grid-template-columns: var(--pj-l, 290px) minmax(0, 1fr); }
.pj-root button { font-family: inherit; }

/* left: project list */
.pj-side { min-height: 0; overflow-y: auto; background: var(--c-side); border-right: 1px solid var(--c-line); padding: 14px 10px 24px; }
.pj-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 10px; }
.pj-side-head h2 { margin: 0; font-size: 16px; color: var(--c-strong); }
.pj-plus { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--c-muted); }
.pj-plus:hover { background: var(--c-hover); color: var(--c-strong); }
.pj-ico { display: inline-grid; place-items: center; line-height: 0; }
.pj-list { list-style: none; margin: 0; padding: 0; }
.pj-item { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: 8px; background: transparent; color: var(--c-muted); font-size: 15px; font-weight: 600; text-align: left; }
.pj-item:hover { background: var(--c-hover); color: var(--c-text); }
.pj-item.active { background: var(--c-sel); color: var(--c-strong); }
.pj-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pj-tree { margin: 4px 0 10px 22px; padding-left: 10px; border-left: 1px solid var(--c-line); display: grid; gap: 2px; }
.pj-sec { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 6px; background: transparent; color: var(--c-muted); font-size: 14px; text-align: left; }
.pj-sec:hover { background: var(--c-hover); color: var(--c-text); }
.pj-sec.active { background: var(--c-hover); color: var(--c-accent); font-weight: 600; }
.pj-sec-add { color: var(--c-muted2); }
.pj-label { margin: 16px 6px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--c-muted); }
.pj-empty { margin: 12px 8px; color: var(--c-muted); font-size: 14px; line-height: 1.4; }
.pj-sub { font-size: 13px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* icons and avatars */
.pj-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 15px; }
.pj-icon.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.pj-icon.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 21px; }
.pj-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; }

/* buttons */
.pj-btn { min-height: 34px; padding: 0 14px; border-radius: 6px; background: var(--c-btn2); color: var(--c-strong); font-size: 14px; font-weight: 600; }
.pj-btn:hover { filter: brightness(1.12); }
.pj-btn:disabled { opacity: .6; cursor: default; }
.pj-btn.primary { background: var(--c-accent); color: #fff; }
.pj-btn.ok { background: var(--c-green); color: #fff; }
.pj-btn.danger { background: var(--c-red); color: #fff; }

/* invites waiting for you */
.pj-invite { margin: 0 4px 8px; padding: 10px; border: 1px solid var(--c-accent); border-radius: 10px; background: var(--c-chat); }
.pj-invite-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pj-invite-text { min-width: 0; }
.pj-invite-name { font-weight: 700; color: var(--c-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-invite-acts { display: flex; gap: 8px; margin-top: 10px; }

/* middle: project page */
.pj-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pj-head { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--c-line); }
.pj-head-text { min-width: 0; flex: 1; }
.pj-head h1 { margin: 0; font-size: 20px; color: var(--c-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-gear, .pj-back, .pj-people-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--c-muted); flex: none; }
.pj-gear:hover, .pj-back:hover, .pj-people-btn:hover { background: var(--c-hover); color: var(--c-strong); }
.pj-back, .pj-people-btn { display: none; }
.pj-page { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 40px; display: grid; gap: 16px; align-content: start; }
.pj-card { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-side); }
.pj-card h2 { margin: 0 0 10px; font-size: 16px; color: var(--c-strong); }
.pj-desc { margin: 0 0 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-desc.muted { color: var(--c-muted); }
.pj-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.pj-meta dt { color: var(--c-muted); }
.pj-meta dd { margin: 0; color: var(--c-text); }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pj-tile { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-chat); color: var(--c-text); text-align: left; }
.pj-tile:hover { border-color: var(--c-accent); }
.pj-tile strong { color: var(--c-strong); font-size: 14px; }
.pj-tile span { color: var(--c-muted); font-size: 13px; line-height: 1.35; }
.pj-tile em, .pj-tag { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--c-sel); color: var(--c-muted); font-size: 12px; font-style: normal; font-weight: 600; }
.pj-soon p { margin: 0 0 12px; color: var(--c-muted); }
.pj-welcome { margin: auto; max-width: 440px; padding: 32px 24px; text-align: center; }
.pj-welcome h2 { margin: 0 0 8px; color: var(--c-strong); }
.pj-welcome p { margin: 0 0 18px; color: var(--c-muted); line-height: 1.5; }

/* right: members */
.pj-members { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; background: var(--c-side); border-left: 1px solid var(--c-line); padding: 14px 10px; }
.pj-members-top { display: none; align-items: center; gap: 8px; }
.pj-members-title { font-weight: 700; color: var(--c-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-person { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; }
.pj-person:hover { background: var(--c-hover); }
.pj-person.pending { opacity: .8; }
.pj-person-text { min-width: 0; flex: 1; }
.pj-person-name { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-strong); min-width: 0; }
.pj-person-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-crown { color: #f0b132; }
.pj-kick { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--c-muted); opacity: 0; flex: none; }
.pj-person:hover .pj-kick, .pj-kick:focus-visible { opacity: 1; }
.pj-kick:hover { background: var(--c-darkest); color: var(--c-red); }
.pj-members-foot { margin-top: auto; padding-top: 14px; display: grid; }
.pj-invite-btn { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; border-radius: 8px; background: transparent; color: var(--c-text); font-size: 15px; font-weight: 600; border: 1px dashed var(--c-line); }
.pj-invite-btn:hover { background: var(--c-hover); border-color: var(--c-accent); }

/* invite dialog */
.pj-pick { margin-top: 12px; max-height: 50dvh; overflow-y: auto; display: grid; gap: 4px; }
.pj-pick-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 6px; }
.pj-pick-row:hover { background: var(--c-hover); }
.pj-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* red count on the Projects tab */
.pill .pj-badge { margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--c-red); color: #fff; font-size: 11px; font-weight: 700; }

/* phones: one screen at a time (list -> project -> people) */
@media (max-width: 760px) {
  .pj-root, .pj-root[data-has="0"] { grid-template-columns: minmax(0, 1fr); }
  .pj-root[data-view="list"] .pj-main, .pj-root[data-view="list"] .pj-members { display: none; }
  .pj-root[data-view="project"] .pj-side, .pj-root[data-view="project"] .pj-members { display: none; }
  .pj-root[data-view="people"] .pj-side, .pj-root[data-view="people"] .pj-main { display: none; }
  .pj-back, .pj-people-btn { display: grid; }
  .pj-members-top { display: flex; margin-bottom: 4px; }
  .pj-side { border-right: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .pj-members { border-left: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .pj-head { padding: 12px 12px; gap: 10px; }
  .pj-page { padding: 14px 12px calc(30px + env(safe-area-inset-bottom)); }
  .pj-kick { opacity: 1; }
  .pj-item, .pj-sec { min-height: 44px; }
}

/* ---------- Drop 10b: notes ---------- */
.pj-page.flush { padding: 0; display: flex; overflow: hidden; }
.nt { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--nt-l, 300px) minmax(0, 1fr); }
.nt-list { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--c-line); background: var(--c-side); }
.nt-list-top { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--c-line); }
.nt-search { width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-input); color: var(--c-text); font-size: 15px; font-family: inherit; }
.nt-items { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: grid; gap: 4px; align-content: start; }
.nt-item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: transparent; color: var(--c-text); text-align: left; min-width: 0; }
.nt-item:hover { background: var(--c-hover); }
.nt-item.active { background: var(--c-sel); }
.nt-item-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c-strong); min-width: 0; }
.nt-item-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-pin { color: var(--c-accent); }
.nt-item-prev { font-size: 13px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-edit { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--c-chat); }
.nt-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--c-line); }
.nt-meta { flex: 1; min-width: 0; }
.nt-tool { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--c-muted); flex: none; }
.nt-tool:hover { background: var(--c-hover); color: var(--c-strong); }
.nt-tool.on { color: var(--c-accent); }
.nt-tool.danger:hover { color: var(--c-red); }
.nt-save { flex: none; }
.nt-conflict { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--c-sel); border-bottom: 2px solid var(--c-red); font-size: 14px; }
.nt-conflict span { flex: 1; }
.nt-title { width: 100%; box-sizing: border-box; padding: 16px 24px 6px; border: 0; background: transparent; color: var(--c-strong); font-size: 24px; font-weight: 700; font-family: inherit; outline: none; }
.nt-body { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; padding: 8px 24px 24px; border: 0; resize: none; background: transparent; color: var(--c-text); font-size: 16px; line-height: 1.6; font-family: inherit; outline: none; overflow-y: auto; }
.nt-title.ro { margin: 0; }
.nt-body.ro { white-space: pre-wrap; overflow-wrap: anywhere; }
.nt-blank { margin: auto; text-align: center; color: var(--c-muted); }
.nt-blank .pj-ico { display: grid; place-items: center; margin-bottom: 8px; }
@media (max-width: 760px) {
  .nt { grid-template-columns: minmax(0, 1fr); }
  .nt[data-view="list"] .nt-edit, .nt[data-view="edit"] .nt-list { display: none; }
  .nt-title { padding: 14px 14px 4px; font-size: 21px; }
  .nt-body { padding: 6px 14px calc(20px + env(safe-area-inset-bottom)); }
  .nt-bar { padding: 8px 8px; }
  .nt-item { min-height: 44px; }
  .pj-main:has(.nt[data-view="edit"]) .pj-head .pj-back { display: none; }
}

/* ---------- Drop 10b2: drag-to-resize panels ---------- */
.pj-grip { position: absolute; top: 0; bottom: 0; width: 7px; z-index: 5; cursor: col-resize; touch-action: none; background: transparent; }
.pj-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background 0.12s; }
.pj-grip:hover::after, .pj-grip:focus-visible::after, .pj-dragging > .pj-grip::after { background: var(--c-accent); }
.pj-grip:focus-visible { outline: none; }
.pj-grip[data-k="l"] { left: calc(var(--pj-l, 290px) - 3px); }
.pj-grip[data-k="r"] { right: calc(var(--pj-r, 268px) - 3px); }
.pj-grip[data-k="n"] { left: calc(var(--nt-l, 300px) - 3px); }
.pj-dragging { cursor: col-resize; user-select: none; -webkit-user-select: none; }
@media (max-width: 760px) { .pj-grip { display: none; } }

/* ---------- Drop 10c: panel menu (three dots), pop-up menu, Files ---------- */
.pj-dots { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--c-muted); flex: none; }
.pj-dots:hover { background: var(--c-hover); color: var(--c-strong); }
.pj-side-head { gap: 4px; }
.pj-side-head h2 { flex: 1; min-width: 0; padding-left: 4px; }
.pj-dots-main { display: none; }
@media (min-width: 761px) {
  .pj-root[data-hl="1"] .pj-dots-main { display: grid; }
  .pj-root[data-hl="1"] .pj-side, .pj-root[data-hr="1"] .pj-members { padding: 0; border: 0; overflow: hidden; visibility: hidden; }
  .pj-root[data-hl="1"] .pj-grip[data-k="l"], .pj-root[data-hr="1"] .pj-grip[data-k="r"] { display: none; }
}
@media (max-width: 760px) { .pj-dots { display: none; } }

.pj-menu { position: fixed; z-index: 1000; min-width: 170px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-side); box-shadow: 0 8px 28px rgba(0, 0, 0, .4); font-family: var(--font, inherit); }
.pj-menu-item { min-height: 34px; padding: 0 12px; border-radius: 6px; background: transparent; color: var(--c-text); text-align: left; font: inherit; font-size: 14px; }
.pj-menu-item:hover, .pj-menu-item:focus-visible { background: var(--c-hover); color: var(--c-strong); outline: none; }
.pj-menu-item.danger { color: var(--c-red); }

.pf { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--pf-t, 240px) minmax(0, 1fr); }
.pf-tree { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--c-line); background: var(--c-side); }
.pf-find { position: relative; padding: 12px; border-bottom: 1px solid var(--c-line); }
.pf-find .pf-ico { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.pf-search { width: 100%; box-sizing: border-box; min-height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-input); color: var(--c-text); font-size: 14px; font-family: inherit; }
.pf-folders { flex: 1; min-height: 0; overflow: auto; padding: 8px 6px 16px; }
.pf-trow { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.pf-trow:hover { background: var(--c-hover); }
.pf-trow.active { background: var(--c-sel); }
.pf-twist { width: 20px; height: 28px; display: grid; place-items: center; background: transparent; color: var(--c-muted); flex: none; }
.pf-twist:disabled { opacity: 0; cursor: default; }
.pf-twist.open .pf-ico { transform: rotate(90deg); }
.pf-tgo { flex: 1; min-width: 0; min-height: 28px; display: flex; align-items: center; gap: 6px; background: transparent; color: var(--c-text); text-align: left; font: inherit; font-size: 14px; }
.pf-tgo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-trow.active .pf-tgo { color: var(--c-strong); font-weight: 600; }
.pf-ico { display: inline-grid; place-items: center; flex: none; }
.pf-tgo .pf-ico, .pf-ico.dir { color: var(--c-accent); }
.pf-ico.file { color: var(--c-muted); }

.pf-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--c-chat); container-type: inline-size; }
.pf-main.drop { outline: 2px dashed var(--c-accent); outline-offset: -6px; }
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--c-line); }
.pf-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; color: var(--c-strong); font-size: 15px; }
.pf-crumb { background: transparent; color: var(--c-accent); font: inherit; padding: 2px 4px; border-radius: 4px; }
.pf-crumb:hover { background: var(--c-hover); text-decoration: underline; }
.pf-sep { color: var(--c-muted); }
.pf-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-btn { display: inline-flex; align-items: center; gap: 6px; }
.pf-up { color: var(--c-muted); font-size: 13px; }
.pf-body { flex: 1; min-height: 0; overflow: auto; }
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 80px 110px 36px; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--c-line); font-size: 14px; color: var(--c-muted); }
.pf-row:not(.head):hover { background: var(--c-hover); }
.pf-row.head { min-height: 34px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; background: var(--c-side); z-index: 1; }
.pf-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-size { text-align: right; }
.pf-cell-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; color: var(--c-strong); font: inherit; font-weight: 600; text-align: left; padding: 6px 0; }
.pf-name:hover { color: var(--c-accent); text-decoration: underline; }
.pf-where { color: var(--c-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-more { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--c-muted); }
.pf-more:hover { background: var(--c-hover); color: var(--c-strong); }
.pf-edit { flex: 1; min-width: 0; min-height: 30px; padding: 0 8px; border: 1px solid var(--c-accent); border-radius: 6px; background: var(--c-input); color: var(--c-text); font: inherit; }
.pf-foot { padding: 8px 16px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 12px; }
.pj-grip[data-k="t"] { left: calc(var(--pf-t, 240px) - 3px); }

@container (max-width: 700px) {
  .pf-row { grid-template-columns: minmax(0, 1fr) 80px 100px 36px; }
  .pf-by { display: none; }
}
@container (max-width: 460px) {
  .pf-row { grid-template-columns: minmax(0, 1fr) 70px 36px; }
  .pf-when { display: none; }
}
@media (max-width: 760px) {
  .pf { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pf-tree { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .pf-folders, .pf-folder-btn { display: none; }
  .pf-row { grid-template-columns: minmax(0, 1fr) 70px 36px; padding: 0 8px 0 12px; min-height: 48px; }
  .pf-by, .pf-when { display: none; }
  .pf-bar { padding: 10px 12px; }
}

/* ---------- Drop 10d: microcontrollers (connect) ---------- */
.pm { display: grid; gap: 16px; align-content: start; }
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pm-head h2 { margin: 0; font-size: 18px; color: var(--c-strong); }
.pm-state { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 14px; }
.pm-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c-sel); border: 1px solid var(--c-line); }
.pm-dot[data-on="1"] { background: var(--c-green); border-color: var(--c-green); box-shadow: 0 0 8px var(--c-green); }
.pm-card { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-side); display: grid; gap: 12px; justify-items: start; }
.pm-card h3 { margin: 0; font-size: 15px; color: var(--c-strong); text-transform: uppercase; letter-spacing: .04em; }
.pm-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--c-text); font-size: 14px; line-height: 1.5; }
.pm-go { min-width: 120px; }
.pm-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.pm-meta dt { color: var(--c-muted); }
.pm-meta dd { margin: 0; color: var(--c-text); }
.pm-note { margin: 0; color: var(--c-text); font-size: 14px; }
.pm-warn { margin: 0; padding: 10px 14px; border: 1px solid var(--c-red); border-radius: 8px; color: var(--c-text); font-size: 14px; }
.pm-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-choice { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-input); color: var(--c-text); text-align: left; font-size: 13px; }
.pm-choice strong { color: var(--c-strong); font-size: 14px; }
.pm-choice span { color: var(--c-muted); }
.pm-choice[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-sel); }
.pm-choice:disabled { opacity: .5; cursor: default; }
.pm-hint { margin: 0; color: var(--c-muted); font-size: 13px; }
@media (max-width: 760px) {
  .pm-choices { grid-template-columns: 1fr; }
  .pm-go, .pm-choice { min-height: 44px; }
}