/* Client emails to check, their review window, their Settings, and Your email signature
   (js/views/clientmail.js; owner, 20 October 2026). Colours are the app's tokens (css/app.css), so
   light and dark follow; the phone rules there keep every control 44px and every box 16px. */

/* The line on the Email page, and the list. */
.cm-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--accent-soft); color: var(--ink); }
.cm-banner svg { width: 16px; height: 16px; vertical-align: -3px; }
.cm-views { margin: 0 0 12px; }
.cm-views .badge { margin-left: 4px; }
.cm-rows { display: flex; flex-direction: column; }
.cm-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.cm-row:last-child { border-bottom: 0; }
.cm-row[data-open] { cursor: pointer; }
.cm-row[data-open]:hover { background: var(--sunk); }
.cm-row-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cm-row-sub, .cm-row-items { margin-top: 2px; }
.cm-row-side { text-align: right; min-width: 0; max-width: 45%; overflow-wrap: anywhere; }
.cm-fail { color: var(--bad); margin-top: 4px; }
.cm-reason { margin-top: 4px; }
@media (max-width: 640px) {
  .cm-row { flex-direction: column; gap: 6px; }
  .cm-row-side { text-align: left; max-width: none; }
}

/* The review window: who, from where, and the email exactly as the client will get it. */
.cm-review .cm-head > div { min-width: 0; }
.cm-to, .cm-subject { overflow-wrap: anywhere; }
.cm-subject { font-weight: 600; }
.cm-problem { padding: 10px 12px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.cm-frame { min-height: 160px; }
.cm-edit textarea { width: 100%; }
.cm-picks { margin-bottom: 10px; }

/* Settings → Client emails. */
.cm-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-weight: 600; }
.cm-switch input { width: 22px; height: 22px; }
.cm-kind { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cm-kind > summary { cursor: pointer; padding: 10px 14px; list-style-position: inside; }
.cm-kind-h { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-kind-b { padding: 0 14px 14px; }
.cm-kind input[type=text], .cm-kind textarea, .cm-kind select { width: 100%; }
.cm-ph { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cm-ph .chip { font-family: var(--f-mono); font-size: 12.5px; }
.cm-live { border-top: 1px solid var(--line-2); padding-top: 10px; }
.cm-live .mail-frame { margin: 6px 0; }
.cm-warn { color: var(--warn); }

/* Settings → Your email signature. */
.sig-box { border-top: 1px solid var(--line-2); padding-top: 12px; }
.sig-box > .row { margin-bottom: 8px; }
.sig-frame { margin-bottom: 8px; }
.sig-frame .mail-frame { min-height: 120px; }
.sig-drop { min-height: 72px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--sunk); color: var(--muted); overflow-wrap: anywhere; }
.sig-drop:focus { color: var(--ink); }
.sig-paste textarea { width: 100%; font-family: var(--f-mono); }
@media (max-width: 900px), (pointer: coarse) { .sig-drop { font-size: 16px; } }

/* Round 21 (owner, 9 November 2026): a step email's settings, Ask me first or Send automatically side by side; Make the invoice. */
.cm-send { border: 0; padding: 0; margin: 0; min-width: 0; }
.cm-send-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-send-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.cm-send-opt input { margin-top: 3px; flex: none; }
.cm-send-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cm-send-opt .help { display: block; margin-top: 2px; }
.cm-notice { gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink); }
.inv-lines td { vertical-align: top; }
.inv-lines .money-wrap, .inv-lines .pct-wrap { min-width: 110px; }
.inv-desc { overflow-wrap: anywhere; }
.inv-box { gap: 10px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.inv-item { display: inline-flex; gap: 6px; align-items: center; margin-right: 12px; }
.inv-item svg { width: 15px; height: 15px; }
.logo-show { display: flex; align-items: center; justify-content: center; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #ffffff; }
.logo-show img { max-width: 220px; max-height: 90px; width: auto; height: auto; }
@media (max-width: 640px) { .cm-send-opts { grid-template-columns: 1fr; } }