/* microlink-planning · the only styling added to the board.
   Everything is scoped under .plan- so no original rule is touched. It borrows
   the page's own tokens (mono type, warm rules, paper) so the presence row and
   the identity control read as part of the masthead, not bolted onto it. */

.plan-presence{display:flex;align-items:center;gap:8px;margin-left:auto}
.plan-faces{display:flex;align-items:center}
.plan-face{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.02em;color:#fff;
  border:2px solid var(--paper);margin-left:-6px;flex:0 0 auto;background:var(--warm2)}
.plan-face:first-child{margin-left:0}
.plan-face.me{box-shadow:0 0 0 2px var(--go)}
.plan-face.more{background:var(--paper2);color:var(--ink3);border-color:var(--paper);font-size:8.5px}
.plan-who{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.plan-who b{color:var(--ink2);font-weight:500}

.plan-link{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);background:none;border:none;border-bottom:1px solid var(--rule);padding:2px 0;margin-left:6px;cursor:pointer}
.plan-link:hover{color:var(--warm2);border-bottom-color:var(--warm)}

.plan-dot{width:6px;height:6px;border-radius:50%;background:var(--go);flex:0 0 auto}
.plan-dot.off{background:var(--stop)}
.plan-dot.wait{background:var(--warm)}

/* who-are-you dialog */
.plan-veil{position:fixed;inset:0;background:rgba(28,26,23,.55);z-index:400;display:flex;align-items:center;justify-content:center;padding:24px}
.plan-card{background:var(--paper);border:2px solid var(--ink);border-radius:8px;max-width:440px;width:100%;padding:28px 30px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.plan-card h3{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.plan-card p{font-size:13px;line-height:1.55;color:var(--ink3);margin:0 0 18px}
.plan-names{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.plan-name{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink2);background:var(--paper2);
  border:1px solid var(--rule);border-radius:5px;padding:8px 13px;cursor:pointer;transition:all .15s}
.plan-name:hover{border-color:var(--warm);color:var(--warm2)}
.plan-name.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.plan-other{display:flex;gap:8px;align-items:center;margin-bottom:20px}
.plan-other input{flex:1;font-family:inherit;font-size:13px;color:var(--ink);background:var(--paper2);
  border:1px solid var(--rule);border-radius:5px;padding:9px 11px}
.plan-other input:focus{outline:none;border-color:var(--warm)}
.plan-go{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--go);border:1px solid var(--go);border-radius:5px;padding:10px 20px;cursor:pointer}
.plan-go[disabled]{opacity:.4;cursor:default}
.plan-note{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink4)}

@media(max-width:760px){
  .plan-presence{margin-left:0;width:100%}
}