/* ── Portal Tools: Membership Committee flyout ── */
.tools-sub { position: relative; }
.tools-sub-trigger { display: flex; align-items: center; gap: 6px; }
.tools-caret { color: var(--gray-400); font-size: 12px; margin-right: 2px; }
.tools-sub:hover > .tools-sub-trigger, .tools-sub.open > .tools-sub-trigger { background: var(--gray-100); }
/* Opens to the left: the Portal Tools menu sits at the right edge of the screen.
   The padding-right bridges the gap so hover doesn't drop moving across. */
.tools-submenu { display: none; position: absolute; right: 100%; top: -6px; padding-right: 6px; z-index: 51; }
.tools-submenu-inner { background: white; border-radius: 8px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 250px; display: flex; flex-direction: column; }
.tools-sub:hover > .tools-submenu, .tools-sub:focus-within > .tools-submenu, .tools-sub.open > .tools-submenu { display: block; }
.tools-sep { height: 1px; background: var(--gray-200); margin: 6px 8px; }
.tools-label { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gray-400); padding: 4px 12px 2px; }
@media (max-width: 640px) {
  .tools-submenu { position: static; padding: 0 0 0 10px; }
  .tools-submenu-inner { box-shadow: none; padding: 0; min-width: 0; border-left: 2px solid var(--gray-200); border-radius: 0; }
  .tools-caret { transform: rotate(-90deg); }
}

/* ── Membership Committee Playbook ── */
main.guide-mode { max-width: 1120px; }
.guide-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; }
.guide-nav-item { display: flex; align-items: center; gap: 10px; background: none; border: none; text-align: left; padding: 9px 10px; border-radius: 6px; font-size: 14px; color: var(--gray-800); cursor: pointer; }
.guide-nav-item:hover { background: var(--gray-100); }
.guide-nav-item.active { background: var(--red-light); color: var(--red-dark); font-weight: 600; }
.guide-nav-icon { width: 20px; text-align: center; }
.guide-nav-select { display: none; }
.guide-content { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px; min-width: 0; }
.guide-title { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.guide-lead { font-size: 15px; color: var(--gray-600); margin-bottom: 18px; max-width: 70ch; }
.guide-h { font-size: 15px; font-weight: 700; margin: 22px 0 8px; }
.guide-p { font-size: 14px; margin: 8px 0; max-width: 75ch; }
.guide-callout { font-size: 14px; background: #fff6e5; color: #7a4a00; border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.guide-list { font-size: 14px; padding-left: 22px; margin: 6px 0 10px; max-width: 78ch; }
.guide-list li { margin: 5px 0; }
.guide-table-wrap { overflow-x: auto; margin: 8px 0 14px; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.guide-table th { text-align: left; font-weight: 700; background: var(--gray-100); padding: 8px 10px; border-bottom: 1px solid var(--gray-200); }
.guide-table td { padding: 8px 10px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.guide-card { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
.guide-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.guide-card-head h4 { font-size: 15px; font-weight: 700; }
.guide-card-btns { display: flex; gap: 6px; }
.guide-name { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--gray-600); }
.guide-name input { flex: 1; max-width: 320px; padding: 7px 10px; border: 1.5px solid var(--gray-200); border-radius: 6px; font-size: 14px; }
.guide-checks { display: flex; flex-direction: column; gap: 6px; }
.guide-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; padding: 4px 0; }
.guide-check input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--red); }
.guide-check input:checked + span { color: var(--gray-400); text-decoration: line-through; }
.guide-q-group h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gray-600); margin: 14px 0 6px; }
.guide-q { padding: 8px 0; border-top: 1px solid var(--gray-100); }
.guide-q-text { font-size: 14px; margin-bottom: 6px; }
.guide-q-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.guide-q-colhead span { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.guide-q textarea { width: 100%; resize: vertical; min-height: 34px; padding: 7px 10px; border: 1.5px solid var(--gray-200); border-radius: 6px; font: inherit; font-size: 13.5px; overflow: hidden; }
.guide-q textarea:focus, .guide-name input:focus, .guide-letter-fields input:focus { outline: none; border-color: var(--red); }
.guide-note { font-size: 12.5px; color: var(--gray-600); margin-top: 10px; }
.guide-letters { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 8px; }
.guide-letter-list { display: flex; flex-direction: column; gap: 6px; }
.guide-letter-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: white; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13.5px; color: var(--gray-800); }
.guide-letter-pick small { color: var(--gray-600); font-size: 12px; line-height: 1.35; }
.guide-letter-pick:hover { border-color: var(--gray-400); }
.guide-letter-pick.active { border-color: var(--red); background: var(--red-light); }
.guide-badge { font-size: 10.5px; font-weight: 700; color: #7a4a00; background: #fff6e5; border-radius: 10px; padding: 1px 7px; margin-top: 3px; }
.guide-letter-edit { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.guide-letter-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.guide-letter-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--gray-600); }
.guide-letter-fields input { padding: 7px 10px; border: 1.5px solid var(--gray-200); border-radius: 6px; font-size: 14px; font-weight: 400; color: var(--gray-800); }
.guide-letter-preview { white-space: pre-wrap; font-size: 14px; line-height: 1.6; background: var(--gray-100); border-radius: 8px; padding: 16px 18px; }
.guide-letter-preview mark { background: #fde8eb; color: var(--red-dark); border-radius: 3px; padding: 0 2px; }
.guide-filled { background: #e3f6ea; border-radius: 3px; padding: 0 2px; }
.guide-letter-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .guide-layout, .guide-letters { grid-template-columns: 1fr; }
  .guide-nav { position: static; padding: 0; background: none; box-shadow: none; }
  .guide-nav-item { display: none; }
  .guide-nav-select { display: block; width: 100%; padding: 10px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: 15px; background: white; }
  .guide-content { padding: 20px 16px; }
}
@media print {
  header, .back-btn, .view-header .pipe-toolbar, .guide-nav, .guide-card-btns, .guide-letter-list, .guide-letter-actions { display: none !important; }
  .guide-layout { display: block; }
  .guide-content { box-shadow: none; padding: 0; }
}

/* Room for "Membership Committee" on one line */
.tools-menu { min-width: 240px; }
.tools-item { white-space: nowrap; }
@media (max-width: 640px) { .tools-item { white-space: normal; } }