/* Board settings drawer. The dialog reuses .send-dialog's frame. */
.settings-open{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;margin-left:8px;flex:none;background:transparent}
.settings-open svg{width:20px;height:20px}
body.surface-zoom .settings-open{margin-left:4px}
.settings-dialog{width:min(520px,calc(100vw - 32px))}
/* Design pass (Kellan, 10/1): a title row, then one section per setting --
   title, a line of help, a segmented control -- on an even 16px rhythm. */
.settings-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px}
.settings-head h2{font-size:20px;letter-spacing:-.2px;margin:0}
.settings-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:36px;padding:0;border-radius:8px;border-color:transparent;background:transparent;font-size:22px;line-height:1;color:var(--muted)}
.settings-close:hover{color:var(--ink);background:var(--paper)}
.settings-row{border:0;border-top:1px solid var(--line);margin:0;padding:16px 0;min-width:0}
.settings-row legend{float:left;width:100%;padding:0;margin:0 0 8px;font-size:14px;font-weight:650;color:var(--ink)}
.settings-help{clear:both;margin:-4px 0 10px;font-size:13px;line-height:1.45;color:var(--muted)}
.settings-seg{clear:both;display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.settings-opt{position:relative;display:inline-flex}
.settings-opt input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.settings-btn{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border:1px solid transparent;border-radius:6px;font-size:13px;font-weight:550;color:var(--muted);white-space:nowrap}
.settings-opt:hover .settings-btn{color:var(--ink)}
.settings-opt input:checked+.settings-btn{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:0 1px 3px #1c332214}
.settings-opt input:focus-visible+.settings-btn{outline:2px solid #f15a36;outline-offset:2px}
/* The tip: below the button and inside the dialog (its edges clip), on hover or keyboard focus. */
.settings-opt[data-tip]:hover::after,.settings-opt[data-tip]:has(input:focus-visible)::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;width:max-content;max-width:220px;padding:6px 9px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:500;line-height:1.35;white-space:normal;pointer-events:none;box-shadow:0 4px 14px #0003}
.settings-opt[data-tip]:first-child:hover::after,.settings-opt[data-tip]:first-child:has(input:focus-visible)::after{left:0;transform:none}
.settings-opt[data-tip]:last-child:hover::after,.settings-opt[data-tip]:last-child:has(input:focus-visible)::after{left:auto;right:0;transform:none}
.settings-admin{border-top:1px solid var(--line);padding:16px 0}
.settings-admin h3{font-size:14px;font-weight:650;margin:0 0 8px}
.settings-admin .settings-help{margin:-4px 0 12px}
.settings-link{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;font-weight:600;text-decoration:none}
.settings-link:hover{border-color:var(--muted)}
/* People: the members, then the invite field and its button on one line. */
.settings-members{list-style:none;margin:0 0 12px;padding:0;font-size:13px}
.settings-members li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.settings-members li span:first-child{overflow-wrap:anywhere}
.settings-role{color:var(--muted)}
.settings-invite{display:flex;gap:8px}
.settings-invite input{flex:1;min-width:0;font-size:13px}
.settings-people #invite-status{margin:8px 0 0}
.settings-foot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin:0;font-size:12px;color:var(--muted)}
.settings-version{font-family:var(--mono)}
:root[data-pulse="off"] .card.is-new,:root[data-pulse="off"] .card.is-changed{animation:none}