/* ── семья и роли (лист 28, js/family.js) ── */
.fam-card{position:relative; border-radius:16px; padding:12px 16px; margin-top:8px;
  background:var(--paper2); display:flex; flex-direction:column; gap:2px;}
.fam-card::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
.fam-card .top{display:flex; align-items:center; gap:8px;}
.fam-card .nm{font-family:'Caveat',cursive; font-weight:700; font-size:24px; flex:1;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fam-card .ed{position:relative; width:40px; height:40px; flex:none; border:none;
  background:none; cursor:pointer; color:var(--graphite-soft); border-radius:10px;
  display:flex; align-items:center; justify-content:center;}
.fam-card .ed::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.fam-card .ed svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;}
.fam-card .mt{font-size:12px; color:var(--meta);}
.fam-card .gh{font-size:12px; color:var(--ink-blue);}
.fam-rename{font-family:'Caveat',cursive; font-weight:700; font-size:24px; flex:1;
  min-width:0; border:none; background:var(--marker); border-radius:6px; padding:0 6px;
  color:var(--graphite); outline:none;}
.fam-seccap{margin-top:12px; min-height:24px; display:flex; align-items:flex-end;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--meta);}
.fam-row .col{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.fam-row .sc{font-size:12px; color:var(--meta);}
/* чип роли 24 R6 — слово (владелец = маркер), цвет не единственный признак */
.fam-row .rolechip{flex:none; min-height:24px; padding:0 8px; border-radius:6px;
  display:inline-flex; align-items:center; font-size:12px; color:var(--graphite-soft);
  border:1.5px solid var(--pencil-faint);}
.fam-row .rolechip.own{background:var(--marker); color:var(--graphite);
  border-color:var(--graphite); font-weight:700;}
.fam-row .more{position:relative; flex:none; width:40px; height:40px; border:none;
  background:none; cursor:pointer; font-size:18px; color:var(--graphite-soft);
  border-radius:10px;}
.fam-row .more::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--pencil-faint); border-radius:10px; filter:url(#squiggle);}
.fam-foot{margin-top:16px; display:flex; flex-direction:column; gap:4px;}
.fam-leave{position:relative; min-height:40px; border-radius:10px; background:none;
  border:none; cursor:pointer; font-family:'Neucha',cursive; font-size:14px;
  color:var(--red-t);}
.fam-leave::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:10px; filter:url(#squiggle);}
.fam-leave.ghosted{color:var(--meta); cursor:default;}
.fam-leave.ghosted::before{border-color:var(--pencil-faint);}
.fam-leavehint{font-size:12px; color:var(--meta); text-align:center;}
/* лист участника (28·2) */
#member-dialog{width:min(420px, calc(100vw - 24px)); border:none; padding:0;
  background:var(--paper2); border-radius:16px; color:var(--graphite);}
#member-dialog::backdrop{background:rgba(44,42,38,.3);}
.mb-frame{position:relative; padding:0 16px 16px;}
.mb-frame::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
.mb-x{position:absolute; top:10px; right:10px;}
#member-body{display:flex; flex-direction:column; gap:8px; padding-top:4px;}
.mb-head{display:flex; align-items:center; gap:12px; min-height:56px; padding-right:44px;}
.mb-head .ava{width:56px; height:56px;}
.mb-head .col{min-width:0; display:flex; flex-direction:column; gap:2px;}
.mb-head .nm{font-family:'Caveat',cursive; font-weight:700; font-size:22px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mb-head .sc{font-size:12px; color:var(--meta);}
.mb-cap{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--meta);}
.mb-hint{font-size:12px; color:var(--meta);}
.mb-transfer{position:relative; min-height:48px; border-radius:12px; background:var(--paper);
  border:none; cursor:pointer; font-family:'Neucha',cursive; font-size:15px;
  color:var(--graphite);}
.mb-transfer::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.mb-remove{position:relative; min-height:40px; border-radius:10px; background:none;
  border:none; cursor:pointer; font-family:'Neucha',cursive; font-size:14px;
  color:var(--red-t);}
.mb-remove::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:10px; filter:url(#squiggle);}
/* чипы вопроса «что с задачами» в sk-modal */
.fam-rmq .q{font-size:13px; color:var(--graphite-soft); margin-bottom:8px;}
.fam-rmq .chips{display:flex; gap:8px; flex-wrap:wrap;}
.fam-rmq .chips button{position:relative; min-height:32px; padding:0 10px;
  border-radius:8px; background:var(--paper); border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:12px; color:var(--graphite);}
.fam-rmq .chips button::before{content:""; position:absolute; inset:0;
  pointer-events:none; border:1.5px solid var(--pencil-faint); border-radius:8px;
  filter:url(#squiggle);}
.fam-rmq .chips button.on{background:var(--marker); font-weight:700;}
.fam-rmq .chips button.on::before{border-color:var(--graphite);}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;}
:root[data-theme="dark"] .fam-card, :root[data-theme="dark"] .mb-transfer,
:root[data-theme="dark"] .fam-rmq .chips button{background:var(--card);}