/* RPM work timer — existing SmartCare tokens only. */

#rpm-timer {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 260px; background: var(--card, #fff);
  border: 1px solid var(--line); border-left: 4px solid var(--go);
  border-radius: var(--radius-sm); padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
#rpm-timer.paused { border-left-color: var(--warn); }

.tw-head { display: flex; align-items: center; gap: 8px; }
.tw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--go);
          flex: none; animation: tw-pulse 2s infinite; }
#rpm-timer.paused .tw-dot { background: var(--warn); animation: none; }
@keyframes tw-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.tw-patient { font-weight: 650; font-size: 13.5px; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.tw-clock { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums;
            letter-spacing: .01em; margin: 4px 0 2px; }
.tw-note { font-size: 12px; color: var(--warn); background: var(--warn-soft);
           padding: 6px 8px; border-radius: 6px; margin-bottom: 8px; }

.tw-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tw-chip { max-width: 100%; font-size: 11px; background: var(--surface); border: 1px solid var(--line);
           border-radius: 999px; padding: 2px 8px; color: var(--ink-soft); }
.tw-chip.live { background: var(--go-soft); color: var(--go); border-color: transparent; }

.tw-btns { display: flex; gap: 8px; }
.tw-btns .btn { flex: 1; }
.tw-discard { display: block; width: 100%; margin-top: 8px; background: none;
              border: none; color: var(--muted); font-size: 12px; cursor: pointer;
              text-decoration: underline; padding: 2px; }
.tw-discard:hover { color: var(--brand-red); }


/* Your styles.css line 93 applies `width: 100%` plus padding and a border to
   every input, checkboxes included -- so a checkbox stretches across its row.
   These rules put the checkboxes back to a checkbox. */
/* ---- stop dialog -------------------------------------------------------
   These rows deliberately avoid flexbox. A flex text item sizes from the
   space the container gives it, and when that collapsed the text wrapped one
   character per line. Absolute-positioned checkboxes over normal block text
   wrap the way ordinary paragraphs do, whatever width the modal turns out
   to be.
   ------------------------------------------------------------------------ */
.tw-h4 { font-size: 13px; font-weight: 650; text-transform: uppercase;
         letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }

.tw-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
             gap: 8px 16px; }
.tw-checks label { display: block; position: relative; padding-left: 26px;
                   font-size: 14px; line-height: 1.45; cursor: pointer; }
.tw-checks label input[type="checkbox"] { position: absolute; left: 0; top: 2px;
    margin: 0; width: 16px; height: 16px; min-width: 0; padding: 0;
    border: none; background: none; box-shadow: none; accent-color: var(--accent); }

.tw-live { display: block; position: relative; padding: 12px 14px 12px 40px;
           border: 1.5px solid var(--line); border-radius: var(--radius-sm);
           cursor: pointer; font-size: 14px; line-height: 1.45; }
.tw-live input[type="checkbox"] { position: absolute; left: 14px; top: 14px;
    margin: 0; width: 16px; height: 16px; min-width: 0; padding: 0;
    border: none; background: none; box-shadow: none; accent-color: var(--accent); }
.tw-live:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.tw-live-yes { background: var(--go-soft); color: var(--go); font-size: 14px;
               padding: 10px 13px; border-radius: var(--radius-sm); margin: 0;
               line-height: 1.45; }

.tw-soap { display: flex; flex-direction: column; gap: 10px; }
.tw-soap textarea { width: 100%; max-width: 100%; box-sizing: border-box;
                    resize: vertical; font: inherit; }

/* Nothing in the dialog may push the modal wider than it is. */
#modal-body .tw-checks, #modal-body .tw-live, #modal-body .tw-soap,
#modal-body .tw-live-yes { max-width: 100%; box-sizing: border-box; }
#modal-body .field input, #modal-body .field textarea { max-width: 100%;
                                                        box-sizing: border-box; }

@media (max-width: 640px) {
  #rpm-timer { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .tw-checks { grid-template-columns: 1fr; }
}

/* Automatic timer: month total (15 Oct 2026) */
.tw-month { margin: -2px 0 10px; font-size: 12.5px; }
.tw-mrow { display: flex; justify-content: space-between; align-items: baseline; }
.tw-mrow b { font-variant-numeric: tabular-nums; }
.tw-bar { height: 6px; border-radius: 3px; background: var(--line-soft); margin: 4px 0 4px; overflow: hidden; }
.tw-bar span { display: block; height: 100%; background: var(--go); border-radius: 3px; }
#rpm-timer.capped .tw-bar span, .tw-bar span[style*="width:100"] { background: var(--warn); }
.tw-mlive { font-size: 11.5px; color: var(--warn); }
.tw-mlive.ok { color: var(--go); }
#rpm-timer.capped .tw-btns, #rpm-timer.capped .tw-discard { display: none; }

/* Action-note templates in the Document dialog (19 Oct 2026) */
.tw-tpl-row .field { margin-bottom: 4px; }
.tw-tpl-row select { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.tw-tpl-row .t-sub { margin: 0 0 10px; }
.tw-tpl-row .t-sub:empty { display: none; }