/* =====================================================================
   Browns Digital Staff Panel — page styles
   Additive only. Every colour, radius, shadow, font, and spacing value
   references hig-tokens.css so the panel is pixel-consistent with
   Studio. No new design language — just the layout patterns Studio
   didn't need (tool grid, guides split view, mail client, roadmap).
===================================================================== */

/* ---------- auth extras ---------- */
.staff-auth-note{margin-top:14px;text-align:center}
.staff-role-select{
  width:100%;min-height:var(--hit-min);padding:0 var(--space-3);
  font:500 var(--type-subhead)/1 var(--font-text);color:var(--color-label-primary);
  background:var(--field);border:1px solid var(--color-border-field);border-radius:var(--r-input);
  box-shadow:var(--shadow-input-inset);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.staff-role-select:focus{outline:none;border-color:var(--color-tint);box-shadow:var(--shadow-focus-ring)}
.staff-role-select--sm{min-height:32px;width:auto;font-size:var(--type-footnote);padding-right:32px}
.staff-grant-row{
  display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end;
  margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle);
}
.staff-grant-row .field{flex:1 1 180px;margin:0}
.staff-grant-row .btn{flex:0 0 auto}
.staff-mail-local-field{display:flex;align-items:center;gap:8px}
.staff-mail-local-field input{flex:1}
.staff-mail-local-field .mono{color:var(--color-label-secondary);font-size:var(--type-footnote)}
.staff-mail-manage{margin-top:8px}

/* ---------- dashboard tool grid ---------- */
.staff-tool-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:var(--space-4);margin-top:var(--space-4);
}
.staff-tool-card{
  display:flex;flex-direction:column;gap:var(--space-3);margin-top:0;
  cursor:pointer;transition:transform var(--motion-micro),box-shadow var(--motion-hover);
}
.staff-tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.staff-tool-card:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring),var(--shadow-card)}
.staff-tool-ico{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--color-fill-tertiary);color:var(--color-tint);flex:0 0 auto;
}
.staff-tool-ico svg.lucide{width:19px;height:19px;stroke-width:1.8}
.staff-tool-body h2{font-size:var(--type-headline);font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.staff-tool-body p{font-size:var(--type-footnote);color:var(--color-label-secondary);line-height:1.5;margin:0}
.staff-tool-open{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--type-footnote);font-weight:600;color:var(--color-tint);
}
.staff-tool-card:hover .staff-tool-open svg.lucide{transform:translateX(2px)}
.staff-tool-open svg.lucide{transition:transform var(--motion-hover)}

/* ---------- find ---------- */
.staff-find-head h2{font-size:var(--type-title-3);font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.staff-find-field{margin-top:var(--space-4)}
.staff-find-input{
  display:flex;align-items:center;gap:10px;min-height:var(--hit-min);padding:0 var(--space-4);
  background:var(--field);border:1px solid var(--color-border-field);border-radius:var(--r-input);
  box-shadow:var(--shadow-input-inset);color:var(--color-label-tertiary);
}
.staff-find-input:focus-within{border-color:var(--color-tint);box-shadow:var(--shadow-focus-ring)}
.staff-find-input input{
  flex:1;min-width:0;border:none;background:none;outline:none;
  font:400 var(--type-callout)/1.3 var(--font-text);color:var(--color-label-primary);padding:10px 0;
}
.staff-find-input--sm{min-height:34px;padding:0 var(--space-3)}
.staff-find-input--sm input{font-size:var(--type-footnote);padding:7px 0}
.staff-find-label{margin:var(--space-5) 0 var(--space-2);padding:0}
.staff-find-row{cursor:pointer}
.staff-find-row:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.staff-find-row .lr-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.staff-find-row .lr-main em{font-style:normal;font-size:var(--type-caption-1);color:var(--color-label-tertiary)}
.staff-find-row > svg.lucide{margin-left:auto;color:var(--color-label-quaternary)}

/* ---------- guides split view ---------- */
.staff-guides{display:grid;grid-template-columns:280px 1fr;gap:0;padding:0;overflow:hidden}
.staff-guides-tree{
  border-right:1px solid var(--color-separator);background:var(--color-bg-inset);
  display:flex;flex-direction:column;min-height:520px;
}
.staff-guides-tree-head{
  display:flex;align-items:center;gap:8px;padding:var(--space-3);
  border-bottom:1px solid var(--color-separator);
}
.staff-guides-tree-head .staff-find-input--sm{flex:1;min-width:0;background:var(--color-bg-elevated)}
.staff-guides-tree-actions{display:flex;gap:4px}
#gd-tree-body{flex:1;overflow-y:auto;padding:var(--space-2)}
.staff-tree-folder{display:flex;flex-direction:column}
.staff-tree-row{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  min-height:34px;padding:6px 10px;padding-left:calc(10px + var(--depth,0) * 14px);
  border:none;background:none;border-radius:8px;cursor:pointer;
  font:500 var(--type-footnote)/1.3 var(--font-text);color:var(--color-label-primary);
  transition:background var(--motion-hover);
}
.staff-tree-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-tree-row:hover{background:var(--color-fill-primary)}
.staff-tree-row.on{background:var(--color-fill-primary);font-weight:600}
.staff-tree-row:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.staff-tree-folder-row{color:var(--color-label-secondary);font-weight:600;
  font-size:var(--type-caption-1);text-transform:uppercase;letter-spacing:.05em}
.staff-tree-folder-row svg.lucide{color:var(--color-label-tertiary)}
.staff-tree-guide .badge{flex:0 0 auto;padding:2px 8px}

.staff-guides-body{padding:var(--space-6);min-width:0;display:flex;flex-direction:column}
.staff-guide-head{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5)}
.staff-guide-meta{flex:1;min-width:0}
.staff-guide-meta h2{font-size:var(--type-title-2);font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.staff-guide-actions{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.staff-guide-title-input{
  flex:1;min-width:0;font:600 var(--type-title-2)/1.2 var(--font-display);letter-spacing:-.02em;
  color:var(--color-label-primary);background:var(--field);
  border:1px solid var(--color-border-field);border-radius:var(--r-input);padding:8px 12px;
}
.staff-guide-title-input:focus{outline:none;border-color:var(--color-tint);box-shadow:var(--shadow-focus-ring)}
.staff-guide-editor{
  flex:1;min-height:380px;resize:vertical;width:100%;
  font:400 13.5px/1.65 var(--font-mono);color:var(--color-label-primary);
  background:var(--field);border:1px solid var(--color-border-field);border-radius:var(--r-input);
  box-shadow:var(--shadow-input-inset);padding:var(--space-4);
}
.staff-guide-editor:focus{outline:none;border-color:var(--color-tint);box-shadow:var(--shadow-focus-ring)}
.staff-guide-foot{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-separator)}
.link-btn{
  border:none;background:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font:600 var(--type-footnote)/1 var(--font-text);color:var(--color-tint);
}
.link-btn:hover{color:var(--color-tint-hover)}
.link-btn.danger{color:var(--color-destructive)}

/* ---------- rendered markdown ---------- */
.staff-md{font-size:15px;line-height:1.7;color:var(--color-label-primary);max-width:72ch}
.staff-md h1{font:600 var(--type-title-1)/1.2 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--space-4)}
.staff-md h2{font:600 var(--type-title-3)/1.25 var(--font-display);letter-spacing:-.015em;margin:var(--space-6) 0 var(--space-3)}
.staff-md h3{font:600 var(--type-headline)/1.3 var(--font-text);margin:var(--space-5) 0 var(--space-2)}
.staff-md h4{font:600 var(--type-subhead)/1.3 var(--font-text);margin:var(--space-4) 0 var(--space-2)}
.staff-md p{margin:0 0 var(--space-3)}
.staff-md ul,.staff-md ol{margin:0 0 var(--space-3);padding-left:22px}
.staff-md li{margin:4px 0}
.staff-md a{color:var(--color-tint);text-decoration:none}
.staff-md a:hover{text-decoration:underline}
.staff-md code{
  font:500 12.5px/1.4 var(--font-mono);background:var(--color-fill-tertiary);
  padding:2px 6px;border-radius:6px;
}
.staff-md pre{
  background:var(--color-bg-inset);border:1px solid var(--color-separator);
  border-radius:var(--r-input);padding:var(--space-4);overflow-x:auto;margin:0 0 var(--space-4);
}
.staff-md pre code{background:none;padding:0;font-size:12.5px;line-height:1.6}
.staff-md blockquote{
  margin:0 0 var(--space-4);padding:var(--space-2) var(--space-4);
  border-left:3px solid var(--color-tint);background:var(--color-fill-quaternary);
  border-radius:0 var(--r-input) var(--r-input) 0;color:var(--color-label-secondary);
}
.staff-md blockquote p{margin:4px 0}
.staff-md hr{border:none;border-top:1px solid var(--color-separator);margin:var(--space-5) 0}
.staff-md-table{overflow-x:auto;border:1px solid var(--color-separator);border-radius:12px;margin:0 0 var(--space-4)}
.staff-md-table table{width:100%;border-collapse:collapse;font-size:var(--type-footnote)}
.staff-md-table th{
  text-align:left;font-size:var(--type-caption-2);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--color-label-tertiary);padding:10px 14px;border-bottom:1px solid var(--color-separator);background:var(--color-bg-inset);
}
.staff-md-table td{padding:11px 14px;border-bottom:1px solid var(--color-separator)}
.staff-md-table tr:last-child td{border-bottom:none}

/* ---------- guide sharing modal ---------- */
.staff-share-modes{display:flex;flex-direction:column;gap:8px;margin:var(--space-4) 0}
.staff-share-mode{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--color-border-subtle);border-radius:var(--r-input);
  transition:border-color var(--motion-hover),background var(--motion-hover);
}
.staff-share-mode:hover{background:var(--color-fill-quaternary)}
.staff-share-mode:has(input:checked){border-color:var(--color-tint);background:color-mix(in srgb,var(--color-tint) 5%,transparent)}
.staff-share-mode input{margin-top:3px;accent-color:var(--color-tint)}
.staff-share-mode-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.staff-share-mode-body strong{font-size:var(--type-subhead);font-weight:600}
.staff-share-mode-body em{font-style:normal;font-size:var(--type-caption-1);color:var(--color-label-secondary);line-height:1.45}
.staff-share-roles{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-4);
  padding:12px 14px;background:var(--color-bg-inset);border-radius:var(--r-input);
}
.staff-share-role{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font:500 var(--type-footnote)/1 var(--font-text);
  padding:6px 10px;border:1px solid var(--color-border-subtle);border-radius:var(--r-pill);
  background:var(--color-bg-elevated);
}
.staff-share-role:has(input:checked){border-color:var(--color-tint);color:var(--color-tint);background:color-mix(in srgb,var(--color-tint) 8%,transparent)}
.staff-share-role input{accent-color:var(--color-tint)}
.staff-share-link input{flex:1;min-width:0;font-family:var(--font-mono);font-size:12px}

/* modal action row (shared by all staff modals) */
.modal-actions{display:flex;align-items:center;gap:10px;margin-top:var(--space-5)}
.modal-actions .spacer{flex:1}
.modal-actions .note{font-size:var(--type-caption-1)}

/* ---------- mail client ---------- */
.staff-mail{
  display:grid;grid-template-columns:200px 320px 1fr;gap:0;padding:0;overflow:hidden;
  min-height:600px;
}
.staff-mail-side{
  border-right:1px solid var(--color-separator);background:var(--color-bg-inset);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);
}
.staff-mail-folders{display:flex;flex-direction:column;gap:2px}
.staff-mail-side .hint{margin-top:auto}
.staff-mail-list{border-right:1px solid var(--color-separator);display:flex;flex-direction:column;min-width:0}
.staff-mail-list-head{padding:var(--space-3);border-bottom:1px solid var(--color-separator)}
#ml-rows{flex:1;overflow-y:auto}
.staff-mail-row{
  display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  padding:12px 14px;border:none;background:none;cursor:pointer;
  border-bottom:1px solid var(--color-separator);
  font-family:var(--font-text);transition:background var(--motion-hover);
}
.staff-mail-row:hover{background:var(--color-fill-quaternary)}
.staff-mail-row.on{background:var(--color-fill-primary)}
.staff-mail-row:focus-visible{outline:none;box-shadow:inset var(--shadow-focus-ring)}
.staff-mail-row-top{display:flex;align-items:baseline;gap:8px}
.staff-mail-row-top strong{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--type-footnote);font-weight:500;color:var(--color-label-primary);
}
.staff-mail-row.unread .staff-mail-row-top strong{font-weight:700}
.staff-mail-row.unread::before{content:none}
.staff-mail-row-top time{font-size:var(--type-caption-2);color:var(--color-label-tertiary);flex:0 0 auto}
.staff-mail-row-sub{
  display:flex;align-items:center;gap:5px;
  font-size:var(--type-footnote);color:var(--color-label-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.staff-mail-row.unread .staff-mail-row-sub{font-weight:600}
.staff-mail-row-sub .star-on{color:var(--color-warning);fill:var(--color-warning)}
.staff-mail-row-snip{
  font-size:var(--type-caption-1);color:var(--color-label-tertiary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.staff-mail-read{padding:var(--space-5);min-width:0;overflow-y:auto;display:flex;flex-direction:column}
.staff-mail-read-head{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4)}
.staff-mail-read-head h2{flex:1;min-width:0;font-size:var(--type-title-3);font-weight:600;letter-spacing:-.015em;margin:0}
.staff-mail-read-actions{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.staff-mail-thread{display:flex;flex-direction:column;gap:var(--space-3)}
.staff-mail-msg{
  border:1px solid var(--color-border-subtle);border-radius:var(--r-card);
  padding:var(--space-4);background:var(--color-bg-elevated);
}
.staff-mail-msg.cur{border-color:color-mix(in srgb,var(--color-tint) 35%,transparent);box-shadow:var(--shadow-card)}
.staff-mail-msg-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-3)}
.staff-mail-msg-head time{margin-left:auto;font-size:var(--type-caption-1);color:var(--color-label-tertiary);flex:0 0 auto}
.staff-mail-msg-body{font-size:var(--type-subhead);line-height:1.65;color:var(--color-label-primary);word-break:break-word}
.staff-mail-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-3)}
.staff-mail-att{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  font:500 var(--type-caption-1)/1 var(--font-text);color:var(--color-label-primary);
  background:var(--color-fill-quaternary);border:1px solid var(--color-border-subtle);border-radius:var(--r-pill);
}
.staff-mail-att em{font-style:normal;color:var(--color-label-tertiary)}
.staff-mail-att button{
  border:none;background:none;cursor:pointer;padding:0 0 0 2px;
  font-size:14px;line-height:1;color:var(--color-label-tertiary);
}
.staff-mail-att button:hover{color:var(--color-destructive)}

/* ---------- rich text editor ---------- */
.staff-rte{border:1px solid var(--color-border-field);border-radius:var(--r-input);background:var(--field);overflow:hidden}
.staff-rte:focus-within{border-color:var(--color-tint);box-shadow:var(--shadow-focus-ring)}
.staff-rte-bar{
  display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--color-separator);
  background:var(--color-bg-inset);
}
.staff-rte-bar button{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:7px;cursor:pointer;color:var(--color-label-secondary);
  transition:background var(--motion-hover),color var(--motion-hover);
}
.staff-rte-bar button:hover{background:var(--color-fill-primary);color:var(--color-label-primary)}
.staff-rte-body{
  min-height:160px;max-height:320px;overflow-y:auto;padding:var(--space-3) var(--space-4);
  font:400 var(--type-subhead)/1.6 var(--font-text);color:var(--color-label-primary);outline:none;
}
.staff-rte-body a{color:var(--color-tint)}

/* ---------- roadmap ---------- */
.staff-roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.staff-roadmap-lane{display:flex;flex-direction:column;gap:8px;min-width:0}
.staff-roadmap-lane > .side-label{display:flex;align-items:center;gap:6px;padding:0;margin:0 0 4px}
.staff-roadmap-item{
  display:flex;flex-direction:column;gap:4px;padding:12px 14px;
  border:1px solid var(--color-border-subtle);border-radius:var(--r-input);
  background:var(--color-bg-elevated);box-shadow:var(--shadow-card);
}
.staff-roadmap-item[role="button"]{cursor:pointer;transition:transform var(--motion-micro),box-shadow var(--motion-hover)}
.staff-roadmap-item[role="button"]:hover{transform:translateY(-1px);box-shadow:var(--shadow-card-hover)}
.staff-roadmap-item[role="button"]:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.staff-roadmap-item strong{font-size:var(--type-subhead);font-weight:600}
.staff-roadmap-item em{font-style:normal;font-size:var(--type-caption-1);color:var(--color-label-secondary)}
.staff-roadmap-item .badge{align-self:flex-start;margin-top:2px}

/* ---------- stats spacing on staff pages ---------- */
.staff-stats{margin-top:var(--space-2)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .staff-mail{grid-template-columns:170px 260px 1fr}
}
@media (max-width:900px){
  .staff-guides{grid-template-columns:1fr}
  .staff-guides-tree{border-right:none;border-bottom:1px solid var(--color-separator);min-height:0;max-height:300px}
  .staff-mail{grid-template-columns:1fr;min-height:0}
  .staff-mail-side{border-right:none;border-bottom:1px solid var(--color-separator);flex-direction:row;align-items:center}
  .staff-mail-side .btn{width:auto}
  .staff-mail-folders{flex-direction:row;flex-wrap:wrap}
  .staff-mail-side .hint{display:none}
  .staff-mail-list{border-right:none;border-bottom:1px solid var(--color-separator);max-height:340px}
  .staff-roadmap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .staff-tool-card,.staff-roadmap-item[role="button"]{transition:none}
  .staff-tool-card:hover{transform:none}
}

/* =====================================================================
   v2 additions — Meridian-style guide article, mailbox switcher,
   user-menu separator, theme picker, clickable dashboard stats
===================================================================== */

/* user menu separator (Image 3) */
.um-sep{border:none;border-top:1px solid var(--color-separator);margin:6px 4px}

/* dashboard stats are buttons now */
.staff-dash-stat{cursor:pointer;text-align:left;font:inherit;color:inherit;background:none;border:none}
.staff-dash-stat:hover .dash-stat-n{color:var(--color-tint)}
.staff-dash-stat:focus-visible{outline:2px solid var(--color-tint);outline-offset:3px;border-radius:12px}

/* guide article (Image 1) */
.staff-guide-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:var(--space-4);color:var(--color-label-secondary)}
.staff-guide-back:hover{color:var(--color-tint)}
.staff-guide-hero{display:flex;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}
.staff-guide-ico{width:44px;height:44px;border-radius:12px;flex:0 0 auto}
.staff-guide-hero .staff-guide-meta{flex:1;min-width:220px}
.staff-guide-hero h2{font-size:var(--type-title-2);letter-spacing:-.02em;margin:0 0 4px}
.staff-guide-desc{font-size:var(--type-subhead);color:var(--color-label-secondary);margin:0 0 4px;line-height:1.55}
.staff-guide-meta-foot{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:1px solid var(--color-separator);
  font-size:var(--type-footnote);color:var(--color-label-tertiary);
}
.staff-guide-author{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  color:var(--color-label-secondary);
}
.staff-guide-author .avatar{width:24px;height:24px;font-size:11px}

/* mailbox switcher (Image 2 account dropdown) */
.staff-mail-side{position:relative}
.staff-mailbox-btn{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:10px;border-radius:12px;border:1px solid var(--color-border-subtle);
  background:var(--color-bg-elevated);cursor:pointer;
}
.staff-mailbox-btn:hover{background:var(--color-fill-quaternary)}
.staff-mailbox-btn .su-meta{flex:1;min-width:0}
.staff-mailbox-btn .su-meta strong{font-size:var(--type-footnote)}
.staff-mailbox-btn .su-meta em{font-size:var(--type-caption-1)}
.staff-mailbox-menu{
  position:absolute;top:calc(100% - 4px);left:var(--space-3);right:var(--space-3);z-index:30;
  border:1px solid var(--color-border-subtle);border-radius:14px;
  background:var(--color-bg-elevated);box-shadow:var(--shadow-menu, 0 12px 32px rgba(0,0,0,.18));
  padding:8px;display:flex;flex-direction:column;gap:4px;
}
.staff-mailbox-menu .side-label{padding:6px 8px 2px;margin:0}
.staff-mailbox-row{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:8px 10px;border-radius:9px;
}
.staff-mailbox-row:hover{background:var(--color-fill-quaternary)}
.staff-mailbox-row.on{background:var(--color-fill-primary)}
.staff-mailbox-row .su-meta{flex:1;min-width:0}
.staff-mailbox-row .su-meta strong{font-size:var(--type-footnote)}
.staff-mailbox-row .su-meta em{font-size:var(--type-caption-1)}
.staff-mailbox-row svg.lucide{color:var(--color-tint)}
.staff-mail-boxlabel{
  padding:6px 10px 0;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-top:1px solid var(--color-separator);padding-top:10px;
}
.staff-mail-compose{margin-top:auto}
.staff-mail-list-head{display:flex;gap:8px;align-items:center}
.staff-mail-list-head .staff-find-input{flex:1}
.staff-mail-back{display:none}
@media (max-width:1080px){
  .staff-mail-back{display:inline-flex}
}
@media (max-width:640px){
  .staff-mail-side{flex-direction:column}
  .staff-mailbox-menu{left:8px;right:8px}
}

/* theme picker (Customize) */
.staff-theme-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin:var(--space-4) 0;
}
.staff-theme-swatch{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:12px;border:1px solid var(--color-border-subtle);border-radius:14px;
  background:var(--color-bg-elevated);cursor:pointer;text-align:left;
  transition:border-color var(--motion-hover),transform var(--motion-micro);
}
.staff-theme-swatch:hover{transform:translateY(-1px)}
.staff-theme-swatch.on{border-color:var(--color-tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint) 18%,transparent)}
.staff-theme-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--color-separator)}
.staff-theme-name{font-size:var(--type-footnote);font-weight:600}
.staff-theme-tag{font-size:var(--type-caption-1);color:var(--color-label-tertiary)}
.staff-guide-updated{font-weight:500}

/* =====================================================================
   Compose modal v3 — templates dropdown, drag-drop zone, preview
===================================================================== */
.staff-compose-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--space-4)}
.staff-compose-head h2{margin:0}
.staff-compose-close{color:var(--color-label-secondary)}
.staff-compose-close:hover{color:var(--color-tint)}
.staff-compose-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}
@media (max-width:560px){ .staff-compose-grid{grid-template-columns:1fr} }
.staff-compose-foot{align-items:center;gap:8px}

/* templates button + menu inside the RTE toolbar */
.staff-rte-bar{flex-wrap:wrap}
.staff-rte-sep{width:1px;align-self:stretch;background:var(--color-separator);margin:2px 4px}
.staff-tpl-wrap{position:relative}
.staff-tpl-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:8px;border:1px solid var(--color-border-subtle);
  background:var(--color-bg-elevated);color:var(--color-label-primary);
  font-size:var(--type-footnote);font-weight:500;cursor:pointer;white-space:nowrap;
}
.staff-tpl-btn:hover{background:var(--color-fill-quaternary)}
.staff-tpl-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:260px;max-height:340px;overflow:auto;
  border:1px solid var(--color-border-subtle);border-radius:12px;
  background:var(--color-bg-elevated);box-shadow:var(--shadow-menu, 0 12px 32px rgba(0,0,0,.22));
  padding:8px;
}
.staff-tpl-menu .side-label{padding:8px 8px 2px;margin:0}
.staff-tpl-menu .side-label:first-child{padding-top:2px}
.staff-tpl-item{
  display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;
  font-size:var(--type-footnote);color:var(--color-label-primary);
}
.staff-tpl-item:hover{background:var(--color-fill-quaternary)}

/* contenteditable placeholder */
.staff-rte-body:empty::before{content:attr(data-placeholder);color:var(--color-label-tertiary);pointer-events:none}

/* drag-and-drop attachment zone */
.staff-drop{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:22px 16px;border:1.5px dashed var(--color-border-subtle);border-radius:14px;
  background:var(--color-bg-subtle, transparent);cursor:pointer;
  transition:border-color var(--motion-hover),background var(--motion-hover);
}
.staff-drop:hover,.staff-drop:focus-visible{border-color:var(--color-tint);outline:none}
.staff-drop.drag{border-color:var(--color-tint);background:color-mix(in srgb,var(--color-tint) 8%,transparent)}
.staff-drop strong{font-size:var(--type-subhead);color:var(--color-label-primary)}
.staff-drop span{font-size:var(--type-footnote);color:var(--color-label-tertiary)}
.staff-drop-ico{width:26px;height:26px;color:var(--color-label-tertiary);margin-bottom:2px}
.staff-mail-atts:not(:empty){margin-top:10px}

/* preview overlay */
.staff-preview-veil{z-index:1200}
.staff-prev-card{border:1px solid var(--color-border-subtle);border-radius:14px;overflow:hidden}
.staff-prev-head{padding:14px 16px;background:var(--color-bg-subtle, var(--color-fill-quaternary));border-bottom:1px solid var(--color-separator);display:flex;flex-direction:column;gap:5px}
.staff-prev-row{display:flex;gap:10px;font-size:var(--type-footnote)}
.staff-prev-k{flex:0 0 62px;color:var(--color-label-tertiary)}
.staff-prev-v{flex:1;color:var(--color-label-primary);word-break:break-word}
.staff-prev-body{padding:16px;line-height:1.6;min-height:80px}
.staff-prev-body blockquote{border-left:3px solid var(--color-separator);margin:8px 0;padding-left:12px;color:var(--color-label-secondary)}
.staff-prev-body pre{background:var(--color-fill-quaternary);padding:10px;border-radius:8px;overflow:auto}