.stage2-page{display:flex;flex-direction:column;gap:16px}
.stage2-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #d8e3ef;border-radius:24px;padding:18px 20px;box-shadow:0 10px 28px rgba(21,61,101,.06)}
.stage2-page-head h2{margin:0 0 6px;color:#163a63}.stage2-page-head p{margin:0;color:#5c7188}
.stage2-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stage2-toolbar .ghost,
.stage2-filter-menu>summary.ghost,
.stage2-filter-actions .ghost,
.stage2-filter-actions .stage2-apply-btn,
.stage2-pill-btn,
.stage2-primary-btn,
.stage2-editor-toolbar button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  min-height:40px;
  line-height:1;
  border:1px solid #c8d5e6;
  background:#fff;
  color:#163a63;
  cursor:pointer;
  box-shadow:none;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease;
}

.stage2-primary-btn{background:#163a63;color:#fff;border-color:#163a63}

.stage2-toolbar .ghost:hover,
.stage2-filter-menu>summary.ghost:hover,
.stage2-filter-actions .ghost:hover,
.stage2-filter-actions .stage2-apply-btn:hover,
.stage2-pill-btn:hover,
.stage2-primary-btn:hover,
.stage2-editor-toolbar button:hover{
  background:#eef4fb;
  border-color:#bfd0e3;
  transform:translateY(-1px);
}

.stage2-primary-btn:hover{background:#1d4d82;border-color:#1d4d82;color:#fff}

.stage2-toolbar .ghost:active,
.stage2-filter-menu>summary.ghost:active,
.stage2-filter-actions .ghost:active,
.stage2-filter-actions .stage2-apply-btn:active,
.stage2-pill-btn:active,
.stage2-primary-btn:active,
.stage2-editor-toolbar button:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}

.stage2-toolbar .ghost:focus-visible,
.stage2-filter-menu>summary.ghost:focus-visible,
.stage2-filter-actions .ghost:focus-visible,
.stage2-filter-actions .stage2-apply-btn:focus-visible,
.stage2-pill-btn:focus-visible,
.stage2-primary-btn:focus-visible,
.stage2-editor-toolbar button:focus-visible{
  outline:3px solid rgba(22,58,99,.18);
  outline-offset:2px;
}

/* rectangular buttons: keep shape, add feedback only */
.dialog-card .ghost,
.stage2-template-library-item .ghost,
.stage2-zoom-item .ghost{
  cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease;
}

.dialog-card .ghost:hover,
.stage2-template-library-item .ghost:hover,
.stage2-zoom-item .ghost:hover{
  background:#eef4fb;
  border-color:#bfd0e3;
  transform:translateY(-1px);
}

.dialog-card .ghost:active,
.stage2-template-library-item .ghost:active,
.stage2-zoom-item .ghost:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}

.dialog-card .ghost:focus-visible,
.stage2-template-library-item .ghost:focus-visible,
.stage2-zoom-item .ghost:focus-visible{
  outline:3px solid rgba(22,58,99,.18);
  outline-offset:2px;
}

.stage2-filter-menu{position:relative}.stage2-filter-menu>summary{list-style:none;cursor:pointer}.stage2-filter-menu>summary::-webkit-details-marker{display:none}
.stage2-filter-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(94vw,430px);max-width:min(94vw,430px);background:#fff;border:1px solid #d8e3ef;border-radius:20px;padding:14px;box-shadow:0 14px 34px rgba(21,61,101,.12);display:flex;flex-direction:column;gap:14px}
.stage2-filter-section{display:flex;flex-direction:column;gap:10px}.stage2-filter-section strong{color:#163a63;font-size:.95rem}.stage2-filter-section input,.stage2-filter-section select,.stage2-builder input,.stage2-builder select,.stage2-builder textarea{padding:10px 12px;border:1px solid #c8d5e6;border-radius:12px;background:#fff;width:100%}
.stage2-filter-name-row{display:flex;gap:8px;align-items:center}.stage2-filter-name-row input{flex:1}.stage2-filter-chip-list{display:flex;flex-wrap:wrap;gap:8px}.stage2-filter-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:#eef4fb;border:1px solid #d6e2ef;color:#163a63;font-size:.9rem}.stage2-filter-chip button{border:none;background:transparent;color:#163a63;cursor:pointer;padding:0;line-height:1;font-size:1rem}
.stage2-filter-checklist{display:flex;flex-direction:column;gap:8px}.stage2-check-row{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-items:start}.stage2-check-row input{margin:2px 0 0 0}.stage2-check-row span{line-height:1.25;color:#32506f}
.stage2-filter-custom-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stage2-filter-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}.stage2-filter-detail-row.is-hidden{display:none}
.stage2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.stage2-card{background:#fff;border:1px solid #d8e3ef;border-radius:20px;padding:16px;box-shadow:0 10px 28px rgba(21,61,101,.06);display:flex;flex-direction:column;gap:10px}.stage2-card h3,.stage2-card h4{margin:0;color:#163a63}.stage2-card-sub{color:#5c7188;font-size:.92rem}
.stage2-activity-card{cursor:pointer}.stage2-meta-row{display:flex;flex-wrap:wrap;gap:8px}.stage2-meta-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#eef4fb;border:1px solid #d6e2ef;color:#32506f;font-size:.86rem}
.stage2-builder{display:flex;flex-direction:column;gap:16px}.stage2-builder-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.stage2-contact-head{display:flex;flex-wrap:wrap;gap:8px;color:#5c7188}.stage2-builder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stage2-builder-grid .field-wide{grid-column:1/-1}.stage2-builder .field{display:flex;flex-direction:column;gap:6px}.stage2-builder label>span,.stage2-builder .field>span{color:#163a63;font-weight:700}
.stage2-presets{display:flex;flex-direction:column;gap:8px}.stage2-presets-hint{color:#163a63;font-weight:700}.stage2-preset-row{display:flex;flex-wrap:wrap;gap:8px}.stage2-preset-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:14px;border:1px solid #c8d5e6;background:#f4f8fd;color:#163a63;font-weight:700;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .12s ease}.stage2-preset-btn:hover{background:#eaf2fb;border-color:#bfd0e3;transform:translateY(-1px)}.stage2-preset-btn:active{transform:translateY(0)}.stage2-preset-btn.is-active{background:#163a63;border-color:#163a63;color:#fff}
.stage2-variable-row{display:flex;flex-wrap:wrap;gap:8px}.stage2-variable-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 10px;border:1px solid #d6e2ef;background:#f8fbff;color:#163a63;cursor:pointer;font-size:.86rem;transition:background .12s ease,border-color .12s ease,transform .12s ease}.stage2-variable-chip:hover{background:#eef4fb;border-color:#bfd0e3;transform:translateY(-1px)}
.stage2-preview{border:1px solid #d8e3ef;border-radius:16px;background:#fafcff;padding:12px;white-space:pre-wrap;min-height:80px;overflow:auto}
.stage2-advanced{border:1px solid #d8e3ef;border-radius:18px;background:#fff}.stage2-advanced>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:700;color:#163a63}.stage2-advanced>summary::-webkit-details-marker{display:none}.stage2-advanced-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}
.stage2-appt-list{display:flex;flex-direction:column;gap:10px}.stage2-appt-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.stage2-appt-row .wide{grid-column:1/-1}
.stage2-builder-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.stage2-editor-shell{border:1px solid #d8e3ef;border-radius:18px;overflow:hidden;background:#fff}.stage2-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-bottom:1px solid #e4edf5;background:#f8fbff}.stage2-editor-toolbar button.is-active{background:#163a63;border-color:#163a63;color:#fff}.stage2-editor{min-height:240px;padding:14px;outline:none}.stage2-editor:empty:before{content:attr(data-placeholder);color:#94a3b8}
.stage2-attachments{display:flex;flex-direction:column;gap:10px}
.stage2-template-two-pane{display:grid;grid-template-columns:280px 1fr;gap:14px}.stage2-template-library{display:flex;flex-direction:column;gap:10px}.stage2-template-library-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}.stage2-template-library-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid #d8e3ef;border-radius:14px;background:#fff}.stage2-template-library-item.is-active{border-color:#163a63;background:#eef4fb}.stage2-template-library-title{font-weight:700;color:#163a63;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage2-zoom-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto auto;gap:8px;align-items:center}
.stage2-calendar-layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:16px}.stage2-agenda-panel{background:#fff;border:1px solid #d8e3ef;border-radius:20px;padding:16px;box-shadow:0 10px 28px rgba(21,61,101,.06);display:flex;flex-direction:column;gap:10px}.stage2-calendar-grid-wrap{background:#fff;border:1px solid #d8e3ef;border-radius:20px;padding:16px;box-shadow:0 10px 28px rgba(21,61,101,.06);display:flex;flex-direction:column;gap:12px}.stage2-calendar-month-title{font-weight:800;color:#163a63;font-size:1.1rem}.stage2-calendar-week-head,.stage2-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.stage2-calendar-week-head div{text-align:center;color:#5c7188;font-weight:700}.stage2-calendar-cell{min-height:122px;border:1px solid #dce7f1;border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fafcff}.stage2-calendar-cell.is-outside{opacity:.55}.stage2-calendar-date{font-weight:800;color:#163a63}.stage2-calendar-cell-list{display:flex;flex-direction:column;gap:6px;min-width:0}.stage2-appt-chip{border:1px solid #d8e3ef;background:#fff;border-radius:12px;padding:7px 9px;text-align:left;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .12s ease,background .12s ease}.stage2-appt-chip:hover{transform:translateY(-1px);background:#f8fbff}.stage2-calendar-more{font-size:.82rem;color:#5c7188}
.stage2-calendar-legend{display:flex;flex-wrap:wrap;gap:10px}.stage2-legend-item{display:flex;align-items:center;gap:6px;font-size:.9rem;color:#32506f}.stage2-color-dot{width:12px;height:12px;border-radius:999px;display:inline-block}.color-callback,.stage2-appt-chip.color-callback{background:#f1f8ff}.stage2-color-dot.color-callback{background:#6aa9ff}.color-first_class,.stage2-appt-chip.color-first_class{background:#fff7e8}.stage2-color-dot.color-first_class{background:#f0bd4f}.color-followup_class,.stage2-appt-chip.color-followup_class{background:#eef9f2}.stage2-color-dot.color-followup_class{background:#65c28f}.color-state_exam,.stage2-appt-chip.color-state_exam{background:#f9eef9}.stage2-color-dot.color-state_exam{background:#c78bc7}.color-contracting,.stage2-appt-chip.color-contracting{background:#fff0ed}.stage2-color-dot.color-contracting{background:#f28d76}.color-troubleshooting,.stage2-appt-chip.color-troubleshooting{background:#eef4fb}.stage2-color-dot.color-troubleshooting{background:#84a7d4}.color-external,.stage2-appt-chip.color-external{background:#f0f0f0}.stage2-color-dot.color-external{background:#979797}
.stage2-empty{background:#fff;border:1px dashed #c8d5e6;border-radius:18px;padding:22px;text-align:center;color:#5c7188}
.stage2-mobile-list{display:flex;flex-direction:column;gap:12px}
.stage2-template-header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stage2-toast-region{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:10px;pointer-events:none}.stage2-toast{background:#163a63;color:#fff;padding:12px 14px;border-radius:14px;box-shadow:0 10px 24px rgba(21,61,101,.22);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;max-width:min(90vw,420px)}.stage2-toast.is-visible{opacity:1;transform:translateY(0)}.stage2-toast.is-success{background:#166534}.stage2-toast.is-error{background:#9f1239}.stage2-toast.is-warn{background:#a16207}
@media (min-width:901px){#contactSearch{width:320px;min-width:320px;max-width:320px;height:54px;padding:0 16px;font-size:1rem;}}
@media (max-width:900px){.stage2-builder-grid,.stage2-template-two-pane,.stage2-calendar-layout,.stage2-filter-custom-range,.stage2-appt-row,.stage2-zoom-item{grid-template-columns:1fr}.stage2-calendar-cell{min-height:96px}.stage2-filter-panel{left:0;right:auto;width:min(94vw,420px)}.stage2-page-head{padding:16px}.stage2-builder-actions{justify-content:stretch}.stage2-template-library-list{max-height:none}.stage2-preset-row{flex-direction:column}.stage2-preset-btn{width:100%;min-height:52px;font-size:1rem}}
.stage2-calendar-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.stage2-calendar-layout-mobile{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Convergence (Brief 08): calendar/activity polished for phones in the single
   responsive app. The 7-column month grid can't collapse to one column without
   losing the week structure, so under 760px it stays a 7-wide grid but scrolls
   horizontally inside its card with legible minimum cell widths. Toolbar +
   agenda stack to one column (touch-first), matching the quiz-tracker pattern. */
@media (max-width:760px){
  .stage2-calendar-layout{grid-template-columns:1fr;gap:14px}
  .stage2-toolbar{width:100%}
  .stage2-page-head .stage2-toolbar .ghost{flex:1 1 auto;min-width:0}
  .stage2-calendar-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stage2-calendar-week-head,
  .stage2-calendar-grid{min-width:560px;gap:6px}
  .stage2-calendar-cell{min-height:96px;padding:7px}
  .stage2-calendar-grid-wrap .stage2-calendar-month-title,
  .stage2-calendar-grid-wrap .stage2-calendar-legend{position:sticky;left:0}
  .stage2-appt-chip{padding:6px 7px;font-size:.82rem}
  .stage2-grid{grid-template-columns:1fr}
}

.stage2-appt-chip.is-cancelled,
.stage2-appt-chip.is-cancelled .stage2-appt-chip-title{
  text-decoration: line-through;
  opacity:0.75;
}
.stage2-contact-log-btn{
  margin-left:8px;
  padding:6px 10px;
  min-height:32px;
  background:#163a63;
  color:#fff;
  border:1px solid #163a63;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease;
}

.stage2-contact-log-btn:hover{
  background:#1d4d82;
  border-color:#1d4d82;
  color:#fff;
  transform:translateY(-1px);
}

.stage2-contact-log-btn:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}

.stage2-contact-log-btn:focus-visible{
  outline:3px solid rgba(22,58,99,.18);
  outline-offset:2px;
}

.note-tracker-bubble{
  position:absolute;
  z-index:9999;
  width:min(320px, 38vw);
  min-width:240px;
  max-width:320px;
  background:#fff;
  border:1px solid #d9e5f2;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(22,58,99,.16);
  padding:10px 12px;
  pointer-events:none;
}
.note-tracker-bubble.is-hidden{display:none}
.note-tracker-line1{
  font-size:.9rem;
  font-weight:600;
  color:#163a63;
  line-height:1.3;
  margin-bottom:4px;
}
.note-tracker-line2{
  font-size:.88rem;
  color:#33506e;
  line-height:1.35;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.note-tracker-logger-block{
  margin:8px 0 12px;
  padding:8px 10px;
  border:1px solid #d9e5f2;
  border-radius:12px;
  background:#f8fbff;
  min-height:48px;
}
.note-tracker-spinner-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:28px;
}
.note-tracker-spinner-wrap.is-hidden{display:none}
.note-tracker-spinner{
  width:18px;
  height:18px;
  border:2px solid #c6d8eb;
  border-top-color:#163a63;
  border-radius:50%;
  display:inline-block;
  animation:noteTrackerSpin 0.9s linear infinite;
}

@keyframes noteTrackerSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}