/* Accountability groups (stage A1, 8 October): shared look of Nicolas's Groups page and the client's page,
   following the approved mock-ups (plans/screens/accountability/ MU3, MU4, MU6). The brand header's
   watercolour band and monogram come from atelier-brand-header.css. */
:root{--bg:#FBF7F1;--panel:#fffdf9;--soft:#f3ede4;--line:#e6ded2;--ink:#2F2F33;--muted:#7a746c;--terra:#D06F56;--ochre:#E4B458;--sage:#7EACA2;--plum:#75586B;--dark:#2f3a40;--dark-ink:#FBF7F1;
--green:#3f9a5b;--green-soft:#e2f1e6;--green-ink:#2f6f43;--amber:#e3a21a;--amber-soft:#fbefd2;--amber-ink:#8a5d00;--red:#c0392b;--red-soft:#f8e1dd;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}
html[data-theme="dark"]{--bg:#1f1e22;--panel:#29282d;--soft:#33313a;--line:#3d3a43;--ink:#eee7dc;--muted:#a59e94;--dark:#e9e2d7;--dark-ink:#1f1e22;--green-soft:#22382a;--green-ink:#8fd0a2;--amber-soft:#3d3220;--amber-ink:#f0c76a;--red-soft:#43272a;--plum:#9b7a90}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.4 var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sp{flex:1}
.muted{color:var(--muted)}

/* Header: monogram, title, then the actions on the right (MU3). */
header.acc-head{flex:none;height:var(--atelier-header-h,72px);display:flex;align-items:center;gap:12px;padding:0 18px 0 28px;background:var(--bg)}
header.acc-head .ttl{font:normal 25px var(--serif);letter-spacing:-1px;white-space:nowrap}
.hb{font:13px var(--sans);height:37px;padding:0 12px;border:1px solid #deded9;background:#fff;color:#242423;border-radius:7px;white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none}
.hb:hover{background:#eeeee9}
html[data-theme="dark"] .hb{background:#2a292e;border-color:#45424b;color:#eee7dc}
html[data-theme="dark"] .hb:hover{background:#394345}
/* The purple, oddly rounded button from Nicolas's own dashboard. */
.otp{display:inline-flex;align-items:center;height:37px;padding:0 16px;border-radius:22px 8px 20px 9px;background:#d06f56;border:1px solid #d06f56;color:#fff8ee;font:600 12px var(--sans);white-space:nowrap;text-decoration:none}
.otp:hover{background:#b85a43;border-color:#b85a43}
html[data-theme="dark"] .otp{background:#dd8a6f;border-color:#dd8a6f;color:#fff}
.picker{font:13px var(--sans);height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);margin-left:6px;max-width:260px}

/* Shared parts. */
.b{height:32px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font:13px var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.b:hover{border-color:var(--muted)}
.b.dark{background:var(--dark);border-color:var(--dark);color:var(--dark-ink)}
.b.plum{background:var(--plum);border-color:var(--plum);color:#fff}
.b.green{background:var(--green);border-color:var(--green);color:#fff}
.b[disabled]{opacity:.45;cursor:not-allowed}
.lbl{font:600 10.5px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.n{background:var(--red);color:#fff;border-radius:999px;font:600 11px/18px var(--sans);min-width:18px;text-align:center;padding:0 5px;display:inline-block}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill.g{background:var(--green-soft);color:var(--green-ink)}.pill.a{background:var(--amber-soft);color:var(--amber-ink)}.pill.r{background:var(--red-soft);color:var(--red)}.pill.n2{background:var(--soft);color:var(--muted)}
.av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:600 12px var(--sans);flex:none}
.err{color:var(--red);font-size:12.5px;min-height:1em}
.empty{color:var(--muted);font-size:13px;padding:6px 0}
.diff{display:inline-flex;gap:2px;vertical-align:middle}
.diff i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.diff i.on{background:var(--terra)}

/* Gate (signed out, loading, not allowed). */
.gate{min-height:calc(100% - 72px);display:grid;place-items:center;padding:24px}
.gate-card{width:min(440px,100%);padding:26px;display:flex;flex-direction:column;gap:12px;text-align:left}
.gate-card h1{font:400 24px var(--serif);margin:0}
.gate-card p{margin:0;color:var(--muted)}

/* Dialogs. */
dialog.acc-dialog{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);padding:22px 24px;width:min(460px,calc(100vw - 32px))}
dialog.acc-dialog::backdrop{background:rgba(20,18,16,.35)}
dialog.acc-dialog h2{font:400 22px var(--serif);margin:0 0 12px}
dialog.acc-dialog label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
.fieldx{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
textarea.fieldx{resize:vertical;min-height:70px}
.row2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.checks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.checks label{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;color:var(--ink)!important;font-size:13px!important}
.pick-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;margin-top:8px}
.pick-list label{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:6px 8px;border:1px solid var(--line);border-radius:10px;color:var(--ink)!important;font-size:13.5px!important}

/* Task cards (client and Nicolas): the plum edge is Nicolas's task, ochre the client's own, sage a protocol. */
.tk{border:1px solid var(--line);border-left:4px solid var(--plum);border-radius:10px;background:var(--bg);padding:7px 9px;display:flex;flex-direction:column;gap:4px;position:relative}
.tk.mine{border-left-color:var(--ochre)}
.tk.pro{border-left-color:var(--sage)}
.tk h5{margin:0;font:400 14px/1.2 var(--serif);padding-right:16px}
.tk .grip{position:absolute;right:8px;top:8px;color:var(--muted);font-size:10px;letter-spacing:-2px}
.tk .meta{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center}
.dots{display:flex;gap:3px;flex-wrap:wrap}
.dots i{width:12px;height:12px;border-radius:3px;background:var(--line)}

/* Scrollbars stay hidden (Nicolas scrolls with the trackpad). */
.noscroll{scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}
/* Line icons (Nicolas, 9 October: no emoji). */
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:none}