/* Tasks. Styles for public/clientTasks.js: .ctk-* is the client screen, .ct-* the staff board. */

/* ---- Staff board (public/clientTasks.js, #screen-tasks) ---------------- */
.ct { max-width: 1240px; margin: 0 auto; }
.ct-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ct-h1 { font: 700 28px 'Space Grotesk', sans-serif; margin: 0; letter-spacing: -0.02em; }
.ct-sub { color: var(--text-muted); margin: 4px 0 0; }
.ct-btn { border: 0; border-radius: 12px; padding: 11px 18px; font: 600 13.5px Inter, sans-serif; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.ct-btn:disabled { opacity: 0.6; cursor: default; }
.ct-btn-primary { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #fff; box-shadow: 0 8px 20px -8px rgba(200, 16, 46, 0.6); }
.ct-btn-ghost { background: #fff; border: 1px solid var(--border); color: var(--text); }
.ct-btn-ok { background: var(--success); color: #fff; }
.ct-btn-white { background: #fff; color: var(--indigo-dark); margin-top: 14px; width: 100%; }

.ct-ov { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin: 24px 0 16px; }
.ct-pipe { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 20px 22px; }
.ct-pipe-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.ct-pipe-h b { font: 700 16px 'Space Grotesk', sans-serif; }
.ct-pipe-h span { color: var(--text-muted); font-size: 12.5px; }
.ct-seg { display: flex; gap: 4px; height: 16px; }
.ct-seg i { border-radius: 8px; display: block; min-width: 0; }
.ct-seg i[style*="flex:0;"] { display: none; }
.ct-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.ct-legend > div { font-size: 13px; color: var(--text-muted); }
.ct-legend b { font: 700 24px 'Space Grotesk', sans-serif; color: var(--text); margin-right: 4px; }
.ct-legend small { display: block; margin-top: 2px; color: var(--text-dim); font-size: 12px; min-height: 1em; }
.ct-pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.ct-attn { border-radius: 22px; padding: 20px 22px; color: #fff; background: radial-gradient(260px 160px at 100% 0, rgba(255, 255, 255, 0.22), transparent), linear-gradient(145deg, #7A0E17, #C8102E 65%, #E2384F); box-shadow: 0 20px 40px -24px rgba(160, 13, 37, 0.9); }
.ct-attn-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; font-weight: 600; }
.ct-attn-n { margin-top: 6px; font-size: 15px; }
.ct-attn-n b { font: 700 38px 'Space Grotesk', sans-serif; margin-right: 6px; vertical-align: -4px; }
.ct-attn-s { font-size: 12.5px; opacity: 0.85; margin-top: 4px; }
.ct-faces { display: flex; margin-top: 12px; }
.ct-faces .ct-av { margin-right: -8px; border: 2px solid #C8102E; }

.ct-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px Inter, sans-serif; color: #fff; }
.ct-av-w { background: #fff; color: #A10D25; }

.ct-tb { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 10px; margin-bottom: 20px; }
.ct-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: #F8F4F3; border-radius: 12px; padding: 0 12px; }
.ct-search input { border: 0; background: none; padding: 11px 0; outline: 0; font: 14px Inter, sans-serif; width: 100%; }
.ct-dd { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 7px 8px 7px 13px; font: 600 13px Inter, sans-serif; color: var(--text); display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ct-dd select { border: 0; background: none; font: 500 13px Inter, sans-serif; color: var(--text-muted); max-width: 190px; outline: 0; cursor: pointer; }
.ct-link { border: 0; background: none; color: var(--indigo); font: 600 13px Inter, sans-serif; cursor: pointer; padding: 6px; }

.ct-board { display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 18px; align-items: start; }
.ct-col { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--border); border-radius: 20px; padding: 14px; transition: box-shadow 0.3s; }
.ct-col-review { background: #FFFBF2; border-color: #F3E2BE; }
.ct-flash { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.35); }
.ct-col-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 12px; font-weight: 600; }
.ct-count { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.ct-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.ct-card h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.ct-card-review { border-left: 4px solid var(--amber); }
.ct-card-closed { opacity: 0.85; }
.ct-who { display: flex; align-items: center; gap: 10px; margin: 10px 0; min-width: 0; }
.ct-who > div { min-width: 0; }
.ct-who-n { font-weight: 500; }
.ct-who small { display: block; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.ct-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ct-tag { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.ct-tag-green { background: var(--success-light); color: var(--success); }
.ct-tag-gray { background: #F1ECEC; color: var(--text-muted); }
.ct-note { background: #FBF7F5; border-radius: 10px; padding: 9px 11px; font-size: 12.5px; color: #4a3f3f; margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-note strong { display: block; margin-bottom: 2px; }
.ct-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ct-acts .ct-btn { padding: 8px 13px; font-size: 12.5px; border-radius: 10px; flex: 1; }
.ct-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ct-empty { padding: 22px 8px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.ct-wide { grid-column: 1 / -1; }
.ct-more { width: 100%; border: 1px dashed var(--border); background: none; border-radius: 12px; padding: 9px; color: var(--text-muted); font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.ct-error { color: #DC2626; font-size: 13px; margin-top: 8px; }
.ct-error:empty { display: none; }

.ct-scrim { position: fixed; inset: 0; background: rgba(32, 23, 23, 0.35); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 900; }
.ct-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: #fff; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.4); transform: translateX(105%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); padding: 26px; overflow: auto; z-index: 901; visibility: hidden; }
body.ct-drawer-open .ct-scrim { opacity: 1; pointer-events: auto; }
body.ct-drawer-open .ct-drawer { transform: none; visibility: visible; }
.ct-drawer-h { font: 700 21px 'Space Grotesk', sans-serif; margin: 0 0 4px; }
.ct-x { float: right; border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 24px; line-height: 1; }
.ct-label { display: block; font-weight: 600; font-size: 12.5px; margin: 16px 0 6px; }
.ct-input { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; font: 14px Inter, sans-serif; background: #FCFAFA; }
.ct-row { display: flex; gap: 8px; }
.ct-row .ct-input { flex: 1; min-width: 0; }
.ct-found { display: flex; gap: 12px; align-items: center; background: var(--success-light); border: 1px solid #BFE8CF; border-radius: 14px; padding: 12px; margin-top: 10px; }
.ct-found small { color: var(--text-muted); }

@media (max-width: 900px) {
  .ct-ov { grid-template-columns: 1fr; }
  .ct-legend { grid-template-columns: 1fr; }
  .ct-board { grid-template-columns: 1fr; }
}

/* ---- Task templates ---------------------------------------------------- */
.ct-tag-blue { background: var(--blue-light, #EFF6FF); color: var(--blue, #2563EB); }


/* ---- Client Tasks screen (public/clientTasks.js, #clientScreenTasks) ---- */
.ctk-hero { border-radius: 24px; padding: 24px 26px 22px; color: #fff; background: radial-gradient(520px 200px at 95% -30%, rgba(255, 255, 255, 0.22), transparent), linear-gradient(135deg, #7A0E17, #C8102E 60%, #E2384F); box-shadow: 0 24px 46px -30px rgba(160, 13, 37, 0.9); }
.ctk-hero h1 { font: 700 28px 'Space Grotesk', sans-serif; margin: 0; letter-spacing: -0.02em; }
.ctk-hero p { margin: 6px 0 0; opacity: 0.88; }
.ctk-body { margin-top: 16px; }
.ctk-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 22px 24px; margin-bottom: 16px; box-shadow: 0 18px 36px -30px rgba(32, 23, 23, 0.5); }
.ctk-card h3 { margin: 0; font: 600 17px Inter, sans-serif; overflow-wrap: anywhere; }
.ctk-by { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.ctk-tag { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.ctk-tag-blue { background: var(--blue-light, #EFF6FF); color: var(--blue, #2563EB); }
.ctk-tag-amber { background: var(--amber-light); color: var(--amber); }
.ctk-tag-green { background: var(--success-light); color: var(--success); }
.ctk-prog { display: flex; align-items: center; margin: 20px 0 6px; }
.ctk-pt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); width: 92px; text-align: center; }
.ctk-pt i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EFE9E9; font-style: normal; font-size: 12px; color: #fff; }
.ctk-pt.done { color: var(--success); }
.ctk-pt.done i { background: var(--success); }
.ctk-pt.now { color: var(--indigo); }
.ctk-pt.now i { background: var(--indigo); box-shadow: 0 0 0 6px var(--indigo-light); }
.ctk-ln { flex: 1; height: 3px; background: #EFE9E9; margin: 0 -6px 20px; border-radius: 2px; }
.ctk-ln.done { background: var(--success); }
.ctk-alert { margin-top: 14px; background: var(--amber-light); border: 1px solid #F3DDA5; border-radius: 14px; padding: 12px 14px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ctk-alert b { color: var(--amber); }
.ctk-how { margin-top: 14px; border: 1px solid var(--border); border-radius: 16px; background: #FBF8F7; }
.ctk-how > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 14px; }
.ctk-how-body { padding: 0 18px 16px; font-size: 14px; }
.ctk-btn { border: 0; border-radius: 12px; padding: 12px 20px; font: 600 14px Inter, sans-serif; cursor: pointer; margin-top: 16px; background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #fff; box-shadow: 0 10px 22px -10px rgba(200, 16, 46, 0.7); }
.ctk-btn:disabled { opacity: 0.6; cursor: default; }
.ctk-btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.ctk-panel { margin-top: 4px; }
.ctk-label { display: block; font-weight: 600; font-size: 13px; margin: 16px 0 6px; }
.ctk-input { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; font: 14px Inter, sans-serif; background: #FCFAFA; }
.ctk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ctk-clear { background: var(--success-light); border: 1px solid #BFE8CF; border-radius: 18px; padding: 18px 20px; font-weight: 600; color: #166534; margin-bottom: 16px; }
.ctk-h { font: 700 13px Inter, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin: 24px 4px 10px; }
.ctk-more { width: 100%; border: 0; border-top: 1px solid var(--border); background: none; padding: 12px; color: var(--text-muted); font: 600 13px Inter, sans-serif; cursor: pointer; }
.ctask-empty { padding: 28px 8px; text-align: center; color: var(--text-muted); font-size: 14px; }
.ctask-error { color: #DC2626; font-size: 13px; margin-top: 8px; }
.ctask-error:empty { display: none; }
.ctask-details p { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ctask-details ol { margin: 2px 0 6px; padding-left: 20px; }
.ctask-details li { margin: 3px 0; overflow-wrap: anywhere; }
.ctask-details a { color: var(--indigo); font-weight: 600; }
.ctask-dh { font-weight: 700; margin: 12px 0 2px; }
@media (max-width: 600px) {
  .ctk-card { padding: 18px 16px; }
  .ctk-pt { width: 64px; font-size: 11px; }
  .ctk-actions .ctk-btn { flex: 1 1 auto; }
}

/* ---- Staff screen v2: full width, compact cards, popup, history -------- */
.ct { max-width: none; width: 100%; margin: 0; }
/* The board fills its page, so the page must be wide: this is one of the wide staff screens
   (Overview, Calls, Mail), capped at 1600px instead of the default narrow column. It lives here,
   not in the shared list in index.html, so a change to that list cannot drop it. */
#staffApp > main:has(#screen-tasks.active) { max-width: 1600px; }
.ct-ov { grid-template-columns: 1fr 340px; }
.ct-tag-amber { background: var(--amber-light); color: var(--amber); }
.ct-btn-danger { background: #fff; color: #B91C1C; border: 1px solid #F2B8B8; }
.ct-btn-danger:hover { background: #FEECEC; }
.ct-confirm { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ct-confirm span { color: var(--text-muted); }

/* The board fills the rest of the screen; each column scrolls inside. */
.ct-board { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); height: calc(100vh - 140px); min-height: 480px; align-items: stretch; }
.ct-col { display: flex; flex-direction: column; min-height: 0; }
.ct-col-body { overflow-y: auto; min-height: 0; padding-right: 2px; flex: 1; }
.ct-card .ct-acts .ct-btn { flex: 0 1 auto; }

/* History */
.ct-hist { min-height: 300px; }
.ct-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: auto; max-height: calc(100vh - 160px); }
.ct-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ct-table th { position: sticky; top: 0; background: #FBF8F7; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); padding: 12px 16px; font-weight: 600; z-index: 1; }
.ct-table td { padding: 12px 16px; border-top: 1px solid #F4EEEE; vertical-align: middle; }
.ct-table tr:hover td { background: #FCFAFA; }
.ct-table .ct-who { margin: 0; }
.ct-table .ct-btn { padding: 7px 14px; font-size: 12.5px; }

/* Details popup */
.ct-modal-scrim { position: fixed; inset: 0; z-index: 910; background: rgba(32, 23, 23, 0.45); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; }
.ct-modal { background: #fff; border-radius: 24px; width: min(760px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); overflow: hidden; }
.ct-modal-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 22px 26px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #FFF8F8, #fff); }
.ct-modal-h h2 { font: 700 21px 'Space Grotesk', sans-serif; margin: 10px 0 0; overflow-wrap: anywhere; }
.ct-modal-b { padding: 18px 26px; overflow-y: auto; flex: 1; }
.ct-modal-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--border); background: #FDFBFA; }
.ct-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ct-fact { background: #FBF8F7; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ct-fact small { display: block; color: var(--text-muted); font-size: 11.5px; }
.ct-fact b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ct-fact-s { font-weight: 400; color: var(--text-muted); }
.ct-sec { margin-top: 16px; }
.ct-sec-h { font: 700 12px Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.ct-sec .ctask-details { background: #FBF8F7; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.ct-sec .ct-note { margin-top: 0; font-size: 14px; }
.ct-ro { margin: 16px 0 0; color: var(--text-muted); font-size: 13px; }
body.ct-modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .ct-board { height: auto; grid-template-columns: 1fr; }
  .ct-col-body { overflow: visible; }
  .ct-table thead { display: none; }
  .ct-table, .ct-table tbody, .ct-table tr, .ct-table td { display: block; width: 100%; }
  .ct-table tr { border-top: 1px solid var(--border); padding: 10px 6px; }
  .ct-table td { border: 0; padding: 6px 12px; }
  .ct-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
  .ct-ov { grid-template-columns: 1fr; }
}

/* Board / History: underline tabs under the title */
.ct-tabs { display: flex; gap: 26px; border-bottom: 1.5px solid var(--border); margin-top: 12px; }
.ct-tabs button { border: 0; background: none; padding: 10px 2px; font: 600 14px Inter, sans-serif; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
.ct-tabs button:hover { color: var(--text); }
.ct-tabs button.on { color: var(--text); border-bottom-color: var(--indigo); }
.ct-tabs small { background: var(--indigo-light); color: var(--indigo-dark); border-radius: 9px; padding: 0 7px; margin-left: 6px; font-size: 11px; font-weight: 700; }


/* Client page, one aligned column: the header, every card and every row share one width. */
.ctk-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.ctk-stack { display: grid; gap: 14px; }
.ctk-card { margin-bottom: 0; padding: 20px 24px; }
.ctk-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1.2fr) auto; gap: 20px; align-items: center; }
.ctk-head .ctk-prog { margin: 0; }
.ctk-head .ctk-btn { margin-top: 0; white-space: nowrap; }
.ctk-head-l .ctk-tag { display: inline-block; margin-top: 8px; }
.ctk-pt { width: 80px; }
.ctk-pt i { width: 26px; height: 26px; }
.ctk-stack > .ctk-h { margin: 14px 4px -4px; }
.ctk-quiet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; background: #fff; border: 1px solid var(--border); border-radius: 18px; font-size: 14px; }
.ctk-quiet > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ctk-quiet small { color: var(--text-muted); }
.ctk-more { border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 12px; color: var(--text-muted); font: 600 13px Inter, sans-serif; cursor: pointer; }
@media (max-width: 900px) {
  .ctk-head { grid-template-columns: 1fr; gap: 14px; }
  .ctk-head .ctk-btn { justify-self: start; }
  .ctk-pt { width: 64px; font-size: 11px; }
}

/* Header pills: the counts, each scrolls to its section */
.ctk-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ctk-pill { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 999px; padding: 8px 16px; font: 600 13px Inter, sans-serif; cursor: pointer; }
.ctk-pill b { font: 700 15px 'Space Grotesk', sans-serif; margin-left: 6px; }
.ctk-pill:hover { background: rgba(255, 255, 255, 0.24); }
.ctk-pill.on { background: #fff; color: var(--indigo-dark); border-color: #fff; }

/* A list that stopped at the server's limit says so */
.ct-cutoff { background: var(--amber-light); border: 1px solid #F3DDA5; color: #7A4B06; border-radius: 12px; padding: 9px 14px; font-size: 13px; margin-bottom: 12px; }

/* Client page: search, and the sections (To do, In review, Completed) as dropdowns. */
.ctk-search { margin: 14px 0 4px; }
.ctk-search input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 14px; font: 500 14px Inter, sans-serif; background: #fff; }
.ctk-search input:focus { outline: none; border-color: var(--indigo); }
.ctk-sec { margin-top: 6px; }
.ctk-sec > summary { cursor: pointer; margin: 14px 4px 10px; list-style-position: inside; }
.ctk-sec-body { display: grid; gap: 14px; }
.ctk-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--indigo); text-decoration: underline; cursor: pointer; }

/* One line under the heading saying what the three sections mean. */
.ctk-hero p.ctk-legend { margin: 10px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.92; max-width: 640px; }
.ctk-legend b { font-weight: 700; }

/* Assign drawer: who the task is sent to. */
.ct-sendto { display: grid; gap: 8px; margin-bottom: 4px; }
.ct-pick { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; }
.ct-pick:has(input:checked) { border-color: var(--indigo); background: var(--indigo-light); }
.ct-pick input { margin-top: 3px; flex: none; }
.ct-pick em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 6px; }
.ct-pick small { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.ct-pick-off { opacity: 0.6; cursor: not-allowed; background: #FBF8F7; }
.ct-sendto-note { color: var(--text-muted); font-size: 12px; }