/*
 * commission.css：只給「委託」頁（commission.php）用的外觀。
 * 由 commission.php 透過 page_start(['css' => ['assets/commission.css']]) 載入，排在 style.css 後面，
 * 所以顏色、字型都直接沿用 style.css 的變數（--paper、--ink、--sticker…），深色模式會自動跟著變。
 * 版面：每一區都是一張紙條（.slip），在右欄由上往下疊，間隔 14px。
 * 標題下面的分頁（委託單／排單表）是 .cm-tabs；排單表的樣式在「排單表」那一段。
 */

/* 單選鈕、勾選框的顏色：淺色模式用墊子的深夜藍，深色模式用貼紙橘（深夜藍在深色底上看不清楚）
   --cm-past：排單進度條上「已經過的階段」的顏色，同樣的理由深色模式改用淡橘 */
:root { --cm-accent: var(--mat); --cm-past: var(--mat); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cm-accent: var(--sticker); --cm-past: color-mix(in srgb, var(--sticker) 45%, var(--paper)); }
}
:root[data-theme="dark"] { --cm-accent: var(--sticker); --cm-past: color-mix(in srgb, var(--sticker) 45%, var(--paper)); }

/* ---------- 頁首：標題直接寫在墊子上 ---------- */

.cm-head { margin: 0 0 20px; color: var(--on-mat); }
.cm-title {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.25;
}

/* 分頁（委託單／排單表）：墊子上一條深色膠囊，目前這頁是橘色貼紙，跟左邊選單同一種橘 */
.cm-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 16px 0 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--mat-deep);
  box-shadow: inset 0 0 0 1px var(--mat-line-strong);
}
.cm-tab {
  padding: 4px 18px 5px;
  border-radius: 999px;
  color: var(--on-mat);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
}
.cm-tab:hover { background: color-mix(in srgb, var(--on-mat) 10%, transparent); }
.cm-tab.is-active { background: var(--sticker); color: var(--sticker-ink); }

/* 標題列：標題和接案狀態排在同一行，狀態靠在標題右邊；太窄時自動換行 */
.cm-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
/* 接案狀態：狀態膠囊＋（登入後）切換按鈕 */
.cm-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--on-mat-soft);
  font-size: 15px;
}
.cm-pill {
  padding: 2px 14px 3px;
  border-radius: 999px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
.cm-open { background: var(--sticker); color: var(--sticker-ink); }
/* 休假中：不用紅色（不是出錯），用墊子深色加一圈細框，看起來比較放鬆 */
.cm-closed { background: var(--mat-deep); color: var(--on-mat); box-shadow: inset 0 0 0 1px var(--on-mat-soft); }
.cm-toggle { margin: 0; }
.cm-toggle-btn { min-height: 30px; padding: 0 12px; font-size: 13px; }

/* 管理動作做完的提示：左邊一條橘線（出錯時是紅線） */
.slip.cm-card.cm-flash { padding: 12px 18px; border-left: 4px solid var(--sticker); }
.cm-flash p { margin: 0; font-size: 15px; }
.cm-flash.is-err { border-left-color: var(--red); color: var(--red); }

/* ---------- 每一區的紙條 ----------
   style.css 的 .slip 是「頭像＋內容」兩欄，這裡改回一般的一欄 */

.slip.cm-card { display: block; margin-bottom: 14px; padding: 22px 24px 24px; }
.slip.cm-card:last-child { margin-bottom: 0; }
.cm-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}
.cm-muted { margin: 0; color: var(--ink-soft); font-size: 14px; }
.cm-muted a { color: var(--ink); text-underline-offset: 3px; margin-left: 4px; }

/* 擅長風格：淡橘色的小標籤 */
.cm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.cm-chips li {
  padding: 1px 12px 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sticker) 40%, transparent);
  font-family: var(--font-hand);
  font-size: 16px;
}

/* ---------- 方案與價格：手機一張一列，寬一點的螢幕三張並排 ---------- */

.cm-plans { display: grid; gap: 10px; }
.cm-plan { padding: 14px 16px; border: 1px solid var(--rule); border-radius: 6px; }
.cm-plan h3 { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 18px; line-height: 1.3; }
.cm-price {
  margin: 2px 0 6px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.cm-price small, .cm-pick-price small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.cm-plan-note { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

/* ---------- 製作階段：橘色圓圈數字，中間用細線串起來（真的有先後順序） ---------- */

.cm-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.cm-steps li { position: relative; padding-left: 42px; counter-increment: step; }
.cm-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sticker);
  color: var(--sticker-ink);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.cm-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 32px;
  bottom: -14px;
  width: 1px;
  background: var(--rule);
}
.cm-steps strong { display: block; font-size: 16px; line-height: 28px; }
.cm-steps p { margin: 2px 0 0; font-size: 15px; line-height: 1.7; }

/* ---------- 注意事項：最後一條紅字 ---------- */

.cm-notes { display: grid; gap: 6px; margin: 0; padding-left: 1.2em; font-size: 15px; }
.cm-notes li::marker { color: var(--ink-soft); }
.cm-hl { color: var(--red); }

/* ---------- 送出成功 ---------- */

.cm-done { border-left: 4px solid var(--sticker); }
.cm-done-title { margin: 0 0 4px; font-family: var(--font-hand); font-weight: 700; font-size: 22px; line-height: 1.35; }

/* ---------- 委託單 ---------- */

.cm-form { display: grid; gap: 20px; margin-top: 18px; }
.cm-row { display: grid; gap: 20px; }
/* 一列裡的欄位全部被藏起來時（例如還沒選方案），整列也收起來，不留空白 */
.cm-row:not(:has(> :not([hidden]))) { display: none; }
[hidden] { display: none !important; }

fieldset.cm-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.cm-field > label, .cm-field > legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-weight: 500;
  font-size: 15px;
}
.cm-opt { margin-left: 4px; color: var(--ink-soft); font-weight: 400; font-size: 13px; }
.cm-hint { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.cm-count:empty { display: none; }

/* 輸入框：跟登入頁的輸入框同一個樣子（.cm-aform = 排單的管理表單，也用同一套） */
.cm-form input[type="text"],
.cm-form input[type="email"],
.cm-form input[type="number"],
.cm-form input[type="date"],
.cm-form textarea,
.cm-aform input[type="text"],
.cm-aform input[type="number"],
.cm-aform select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 35%, var(--rule));
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.cm-form textarea { min-height: 150px; line-height: 1.7; resize: vertical; }
.cm-form input::placeholder, .cm-form textarea::placeholder { color: var(--ink-soft); opacity: .8; }
.cm-form input:focus, .cm-form textarea:focus,
.cm-aform input:focus, .cm-aform select:focus { outline: 3px solid var(--sticker); outline-offset: 0; border-color: var(--mat); }
.cm-aform input::placeholder { color: var(--ink-soft); opacity: .8; }
.cm-aform select { cursor: pointer; }
/* 有錯的欄位：紅框（aria-invalid 是 commission.php 依錯誤清單加上的） */
.cm-form [aria-invalid="true"] { border-color: var(--red) !important; }
fieldset.cm-field[aria-invalid="true"] .cm-pick { border-color: var(--red); }

/* 方案選擇：可以點的小卡，選中的變橘 */
.cm-picks { display: grid; gap: 8px; }
.cm-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 35%, var(--rule));
  border-radius: 6px;
  cursor: pointer;
}
.cm-pick:hover { background: var(--hover); }
.cm-pick input { grid-row: 1 / 3; width: 18px; height: 18px; margin: 0; accent-color: var(--cm-accent); }
.cm-pick-name { font-family: var(--font-hand); font-weight: 700; font-size: 17px; line-height: 1.3; }
.cm-pick-price { font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.cm-pick:has(input:checked) {
  border-color: var(--sticker);
  background: color-mix(in srgb, var(--sticker) 20%, var(--paper));
  box-shadow: inset 0 0 0 1px var(--sticker);
}
.cm-pick:has(input:focus-visible) { outline: 3px solid var(--sticker); outline-offset: 2px; }
.cm-pick input:focus-visible { outline: none; } /* 外框已經整張卡亮起來了，小圓點不用再框一次 */

/* 用途：一般的單選鈕，一行一個 */
.cm-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  font-size: 15px;
  cursor: pointer;
}
.cm-radio input, .cm-agree input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  accent-color: var(--cm-accent);
}

/* 三個關鍵字：並排三格 */
.cm-kws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
fieldset.cm-field > .cm-hint:first-of-type { margin-top: 0; }

/* 預估金額：像收據底部的小計 */
.cm-estimate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 12px;
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--hover);
}
.cm-est-label { font-weight: 500; font-size: 15px; }
.cm-est-value {
  justify-self: end;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cm-est-value.is-msg { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--ink-soft); }
.cm-est-formula, .cm-estimate .cm-hint { grid-column: 1 / -1; margin: 0; text-align: right; }
.cm-est-formula { color: var(--ink-soft); font-size: 14px; }
.cm-est-formula:empty { display: none; }

.cm-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}
.cm-agree a { color: inherit; text-underline-offset: 3px; }

.cm-submit { display: flex; justify-content: flex-end; }
.cm-submit .btn { min-height: 44px; padding: 0 26px; font-size: 16px; }

/* 錯誤清單：每一項可以點，跳到那一欄 */
.cm-errors { margin: 16px 0 0; font-size: 15px; }
.cm-errors p { margin: 0; }
.cm-errors ul { margin: 4px 0 0; padding-left: 1.2em; }
.cm-errors a { color: inherit; text-underline-offset: 3px; }
.cm-errors:focus { outline: none; } /* 是程式把焦點移過來的（給螢幕報讀軟體），不用再畫框 */

/* honeypot（擋機器人的隱藏欄位）：移到畫面外，真人看不到 */
.cm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 管理員：收到的委託 ---------- */

.cm-admin h2 small { margin-left: 6px; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.cm-admin-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sticker) 25%, transparent);
  font-size: 14px;
}
.cm-inbox { border-top: 1px solid var(--rule); }
.cm-item { border-bottom: 1px solid var(--rule); }
.cm-item summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 10px 4px;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.cm-item summary::-webkit-details-marker { display: none; }
.cm-item summary::before { content: "▸"; color: var(--ink-soft); transition: transform .15s; }
.cm-item[open] summary::before { transform: rotate(90deg); }
.cm-item summary:hover { background: var(--hover); }
.cm-item time { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.cm-item-name { font-weight: 700; }
.cm-item-plan { color: var(--ink-soft); }
.cm-item-est { margin-left: auto; font-variant-numeric: tabular-nums; }
.cm-flag {
  align-self: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-red);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}
.cm-dl {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0 0 14px;
  padding: 4px 4px 0 22px;
  font-size: 14px;
}
.cm-dl dt { color: var(--ink-soft); }
.cm-dl dd { margin: 0; overflow-wrap: anywhere; }
.cm-red { color: var(--red); }

/* 收到的委託 → 加入排單：展開後最下面那一排；加過的顯示淡橘色「已在排單」 */
.cm-item-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 14px;
  padding-left: 22px;
}
.cm-item-act form { margin: 0; }
.cm-item-act .cm-hint { margin: 0; }
.cm-inq {
  align-self: center;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sticker) 45%, transparent);
  color: var(--ink);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}
a.cm-inq { padding: 0 14px; font-size: 14px; line-height: 32px; }
a.cm-inq:hover { background: var(--sticker); color: var(--sticker-ink); }

/* ---------- 排單表 ---------- */

/* 標題列：左邊「排單表」，右邊「目前排單：N 件」，太窄時自動換行 */
.cm-q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}
.cm-card .cm-q-head h2 { margin: 0; }
.cm-q-sum { margin: 0; color: var(--ink-soft); font-size: 15px; }
.cm-q-sum strong { color: var(--ink); font-family: var(--font-hand); font-size: 22px; font-variant-numeric: tabular-nums; }

/* 沒有排單時：一個虛線框 */
.cm-q-empty {
  margin: 14px 0 0;
  padding: 20px 14px;
  border: 1px dashed color-mix(in srgb, var(--ink-soft) 40%, var(--rule));
  border-radius: 6px;
  color: var(--ink-soft);
  text-align: center;
}
.cm-q-empty a { margin-left: 6px; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }

/* 每一筆：左邊圓圈號碼，右邊名字、方案、進度條、備註；筆和筆之間一條細線 */
.cm-q-list { margin: 10px 0 0; padding: 0; list-style: none; }
.cm-q-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--rule);
}
.cm-q-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cm-q-body { min-width: 0; }
.cm-q-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 2px 0 10px;
  line-height: 1.4;
}
.cm-q-name { font-family: var(--font-hand); font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.cm-q-meta { color: var(--ink-soft); font-size: 14px; }
/* 公開備註：左邊一條細線，像貼在旁邊的便條 */
.cm-q-note {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* 進度條：五格一樣寬。上面是色條、下面是字
   已經過的 = 墊子深夜藍（深色模式淡橘）、現在的 = 貼紙橘＋粗體字、還沒到的 = 淡灰 */
.cm-prog {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.cm-prog li { position: relative; padding-top: 12px; white-space: nowrap; }
.cm-prog li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--rule);
}
.cm-prog .is-past::before { background: var(--cm-past); }
.cm-prog .is-now { color: var(--ink); font-weight: 700; font-size: 13px; }
.cm-prog .is-now::before { top: 0; height: 8px; background: var(--sticker); }

/* 已完成：收起來的清單，點「已完成（N）」展開 */
.cm-q-done { margin-top: 6px; border-top: 1px solid var(--rule); }
.cm-q-done > summary {
  padding: 12px 4px 4px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.cm-q-done > summary::-webkit-details-marker { display: none; }
.cm-q-done > summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.cm-q-done[open] > summary::before { transform: rotate(90deg); }
.cm-q-done > summary:hover { color: var(--ink); }
.cm-q-donelist { margin: 6px 0 0; padding: 0; list-style: none; }
.cm-q-donelist > li { padding: 8px 4px; border-top: 1px dashed var(--rule); }
.cm-q-donelist .cm-q-line { margin: 0; }
.cm-q-donelist .cm-q-name { font-size: 16px; }
.cm-q-date { margin-left: auto; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }

/* 管理員：每一筆底下的「編輯」「刪除這筆」是小膠囊按鈕，點了才展開 */
.cm-q-edit { margin-top: 12px; }
.cm-q-edit > summary, .cm-del > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.cm-q-edit > summary::-webkit-details-marker, .cm-del > summary::-webkit-details-marker { display: none; }
.cm-q-edit > summary:hover, .cm-q-edit[open] > summary { background: var(--hover); color: var(--ink); }
.cm-q-edit > .cm-aform { margin-top: 10px; padding: 14px; border-radius: 6px; background: var(--hover); }

/* 管理表單（排單的編輯、手動新增）：欄位間距比委託單小一點 */
.cm-aform { display: grid; gap: 14px; }
.cm-admin .cm-aform { margin-top: 14px; }
.cm-q-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.cm-q-actions .cm-hint { margin: 0 auto 0 0; }

/* 刪除：第一步展開紅色小框，第二步按裡面的「確定刪除」才真的刪 */
.cm-del { margin-top: 10px; }
.cm-del > summary { border-color: color-mix(in srgb, var(--red) 45%, var(--rule)); color: var(--red); }
.cm-del > summary:hover, .cm-del[open] > summary { background: color-mix(in srgb, var(--red) 10%, transparent); }
.cm-del-box {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  font-size: 14px;
}
.cm-del-box p { margin: 0 0 10px; overflow-wrap: anywhere; }
.cm-del-box form { margin: 0; }
.cm-btn-danger {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-red);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}
.cm-btn-danger:hover { background: var(--red-hover); }

/* ---------- 寬一點的螢幕（> 520px）：方案三張並排、兩個短欄位並排 ---------- */
@media (min-width: 521px) {
  .cm-plans, .cm-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 小手機（≤ 520px）：紙條內距小一點，送出鈕佔滿整行比較好按 ---------- */
@media (max-width: 520px) {
  .slip.cm-card { padding: 18px 16px 20px; }
  .cm-submit .btn { width: 100%; justify-content: center; }
  .cm-dl { grid-template-columns: 1fr; gap: 0; padding-left: 4px; }
  .cm-dl dd { margin-bottom: 6px; }
  .cm-item-act { padding-left: 4px; }
  .cm-q-row { gap: 10px; }
  .cm-q-edit > .cm-aform { padding: 12px; }
}

/* 系統設定「減少動態效果」的人：箭頭不轉動畫 */
@media (prefers-reduced-motion: reduce) {
  .cm-item summary::before, .cm-q-done > summary::before { transition: none; }
}

/* ---------- 委託聊天室：送出成功頁的連結／密碼、分頁上的未讀數 ---------- */
.cm-room { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 12px 0; padding: 12px 14px; border-radius: 8px; background: var(--hover); }
.cm-room dt { color: var(--ink-soft); font-size: 14px; }
.cm-room dd { margin: 0; overflow-wrap: anywhere; }
.cm-room-pass { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 20px; letter-spacing: .1em; }
.cm-unread { display: inline-block; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--red); color: var(--on-red); font-size: 12px; line-height: 20px; text-align: center; vertical-align: 2px; }