.tw-panel:not([hidden]){display:block}
.tw-note{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:30px 26px;text-align:center;max-width:560px;margin:0 auto}
.tw-note .tw-note-icon{font-size:26px;line-height:1;display:block;margin-bottom:10px}
.tw-note h2{font-size:20px;font-weight:600;margin:0 0 8px;font-family:var(--font-body)}
.tw-note p{font-size:14px;color:var(--muted-ink);margin:0 auto 4px;max-width:44ch}
.tw-note .tw-why{font-size:13px;color:var(--ink);background:var(--paper-dim);border-radius:10px;padding:10px 13px;margin:14px auto 0;max-width:44ch;text-align:left}
.tw-note .tw-note-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
#twDenied .tw-note-icon{color:var(--copper-text)}
#twFailed .tw-note-icon{color:var(--brick)}
#twLoading .tw-note-icon{color:var(--copper-text)}
#twManaged .tw-note-icon{color:var(--copper-text)}

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:11px 20px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  background:#29364a;color:#ffffff;transition:.15s;
}
.btn:hover{background:#29364a;color:#ffffff}
/* PRESSED FEEDBACK — the only confirmation a tap produces on a phone. Copied
   from the clients page: transform on .1s against .15s for colour. */
.btn:active:not(:disabled){transform:scale(.96)}
.btn:disabled{cursor:not-allowed}
/* NO OPACITY ON A DISABLED CONTROL. getComputedStyle() does not carry opacity,
   so a probe reading .color off a 45%-painted label reports full strength.
   Both states are full-strength colours that clear 4.5:1 on their own
   background. */
.btn:disabled{background:var(--paper-dim);color:#29364a;border-color:#e0e6e5}
.btn.quiet{background:var(--card);color:var(--ink);border-color:#e0e6e5}
.btn.quiet:hover{background:var(--paper-dim);color:var(--ink)}

/* ---- the tools row ------------------------------------------------------- */
.tw-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-bottom:18px}

/* ---- invite an advisor --------------------------------------------------- */
.tw-add{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.tw-add h2{font-size:17px;font-weight:600;margin:0 0 4px;font-family:var(--font-body)}
.tw-add > p{font-size:13px;color:var(--muted-ink);margin:0 0 16px}
.tw-field{margin-bottom:12px}
.tw-field label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink);margin-bottom:5px}
.tw-field input{
  width:100%;min-height:44px;padding:11px 13px;border-radius:10px;
  border:1px solid #e0e6e5;background:var(--card);color:var(--ink);
  font-family:inherit;font-size:14px;
}
.tw-field input:focus{outline:2px solid var(--copper-text);outline-offset:1px}
.tw-field select{
  width:100%;min-height:44px;padding:11px 13px;border-radius:10px;
  border:1px solid #e0e6e5;background:var(--card);color:var(--ink);
  font-family:inherit;font-size:14px;cursor:pointer;
}
.tw-field select:focus{outline:2px solid var(--copper-text);outline-offset:1px}
.tw-field-note{font-size:12.5px;color:var(--muted-ink);margin:7px 0 0;line-height:1.45;max-width:52ch}
.tw-add-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* Both 44px, by one rule — a 31px Cancel beside a 44px Create is the defect
   most likely to be repeated (N100). */
.tw-add-actions .btn{flex:0 0 auto}
.tw-msg{font-size:13.5px;padding:11px 14px;border-radius:10px;margin-bottom:14px;line-height:1.5}
.tw-msg.good{background:#e0e6e5;color:#29364a;border:1px solid #29364a}
.tw-msg.bad{background:#edc7d4;color:#29364a;border:1px solid #29364a}

/* ---- the roster table ---------------------------------------------------- */
.tw-card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.tw-card-head{padding:16px 20px;border-bottom:1px solid var(--line);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text);font-weight:700}
/* Wide content scrolls inside its own box; the PAGE never scrolls sideways. */
.tw-scroll{overflow-x:auto}
.tw-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.tw-table th:nth-child(1){width:24%}
.tw-table th:nth-child(2){width:40%}
.tw-table th:nth-child(3),.tw-table th:nth-child(4){width:18%}
.tw-table th{
  text-align:left;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding:14px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--paper);
}
.tw-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.tw-table tr:last-child td{border-bottom:none}
.tw-name{font-weight:700;color:var(--ink)}
.tw-email{color:var(--muted-ink)}
/* THE TINTS ARE NOT THE MESSAGE — every pill carries its word, and every pair
   below is copied from the clients page's measured set (each clears 4.5:1 on
   its own fill). No opacity anywhere, for the reason the .btn:disabled note
   records. */
.tw-pill{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.tw-role.admin{background:#edc7d4;color:#29364a}
.tw-role.lead{background:#e0e6e5;color:#29364a}
.tw-role.advisor{background:var(--paper-dim);color:#29364a}
.tw-state.active{background:#e0e6e5;color:#29364a}
.tw-state.off{background:#ffffff;color:#29364a}
/* Keep each status readable, with the same alignment even when invited. */
.tw-state{display:block;width:fit-content}
.tw-invited{display:block;width:fit-content;font-size:11.5px;font-weight:700;border-radius:999px;
  padding:4px 10px;white-space:nowrap;background:#edc7d4;color:#29364a;margin-top:6px}

/* ---- empty --------------------------------------------------------------- */
.tw-empty{padding:34px 24px;text-align:center}
.tw-empty .ti{font-size:26px;color:var(--copper-text);display:block;margin-bottom:10px}
.tw-empty h3{font-size:16px;font-weight:700;margin:0 0 6px}
.tw-empty p{font-size:13.5px;color:var(--muted-ink);margin:0 auto;max-width:42ch}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:820px){
  .hero-actions{right:4vw}
}

/* A four-column table does not fit a 390px phone, and a sideways-scrolling
   table is a worse answer than a stack of cards. Same pattern as the clients
   page: the header row leaves the layout and each cell carries its own label —
   the labels are COLUMN NAMES, which is why they can live in the markup. */
@media (max-width:899px){
  .wrap{padding:26px 14px 20px}
  .tw-card{border-radius:14px}
  .tw-scroll{overflow-x:visible}
  .tw-table{min-width:0}
  .tw-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tw-table,.tw-table tbody,.tw-table tr,.tw-table td{display:block;width:100%}
  .tw-table tbody tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .tw-table tbody tr:last-child{border-bottom:none}
  .tw-table td{padding:3px 0;border-bottom:none}
  .tw-table td::before{
    content:attr(data-label);display:block;font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--copper-text);font-weight:700;
  }
  .tw-table td.tw-name{font-size:16px;padding-bottom:6px}
  .tw-table td.tw-name::before{content:none}
  .tw-tools .btn{width:100%}
}