/* The pad in the call window (Rob, 26 October, from his mock-up): a cream notepad under the call state on every website
   call. oc.js draws the rows (padConfirm); these are their styles. They live in a stylesheet because the page's content
   policy refuses styles a script adds at run time (the first pad showed as bare text). Loaded by every page that has the
   call window. --pad-c is the pad's colour: green on the site, the business's own on a story page (ai/story.css). */
.cb-pad{--pad-c:#0E7C3A;--pad-ink:#111418;width:100%;box-sizing:border-box;margin-top:18px;text-align:left;background:#FBF8EF;color:var(--pad-ink);border-radius:18px;padding:14px 14px 12px;display:grid;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);font-family:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.4}
.cb-pad[hidden]{display:none}
.cb-pad-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.cb-pad-h{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pad-c)}
.cb-pad-h svg{width:15px;height:15px;flex:none}
.cb-pad-who{margin:0;font-size:12px;color:#5B6068;text-align:right}
.cb-pad-list{display:grid;gap:10px}
.cb-pad-row{display:grid;gap:10px;background:#fff;border:1px solid #E3E1D9;border-radius:12px;padding:10px 12px;margin:0}
.cb-pad-row.open{border:2px solid var(--pad-c);padding:12px;box-shadow:0 0 0 4px color-mix(in srgb,var(--pad-c) 14%,transparent)}
.cb-pad-row.done{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.cb-pad-row.new{animation:cb-pad-in .7s ease-out}
@keyframes cb-pad-in{0%{background:color-mix(in srgb,var(--pad-c) 18%,#fff)}100%{background:#fff}}
.cb-pad-f{display:grid;gap:2px;min-width:0}
.cb-pad-lab{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5B6068}
.cb-pad-val{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:17px;font-weight:600;color:var(--pad-ink);background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:2px 0;margin:0;min-width:0;width:100%;outline:none;overflow-wrap:anywhere;box-shadow:none}
.cb-pad-val:not([readonly]){border-bottom-color:var(--pad-c);background:#fff;padding:4px 6px;border-radius:6px}
.cb-pad-row.done .cb-pad-val{color:var(--pad-c)}
.cb-pad-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cb-pad-yes,.cb-pad-edit{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;margin:0;padding:0 14px;font-family:inherit;font-size:16px;font-weight:700;line-height:1;border-radius:999px;cursor:pointer;box-shadow:none}
.cb-pad-yes{background:var(--pad-c);color:#fff;border:0}
.cb-pad-yes svg{width:17px;height:17px}
.cb-pad-edit{background:transparent;color:var(--pad-ink);border:2px solid var(--pad-ink)}
.cb-pad-edit[hidden]{display:none}
.cb-pad-ok{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--pad-c);white-space:nowrap}
.cb-pad-ok i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pad-c);color:#fff;font-style:normal}
.cb-pad-ok svg{width:15px;height:15px}
.cb-pad-help{margin:0;padding:0 2px;font-size:13px;line-height:1.4;color:#5B6068}