/* v279: teacher-directory phone extension dialog. */
html body.page-teachers .directory-phone-dialog {
  width: min(440px, calc(100vw - 28px));
  max-width: 440px;
  padding: 0;
  color: var(--preps-text, #172033);
  background: var(--preps-surface, #fff);
  border: 1px solid var(--preps-line, #d7e2ee);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(21, 41, 66, .22);
}

html body.page-teachers .directory-phone-dialog::backdrop {
  background: rgba(16, 30, 48, .42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

html body.page-teachers .directory-phone-dialog .phone-dialog__panel {
  padding: 20px;
}

html body.page-teachers .directory-phone-dialog .phone-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

html body.page-teachers .directory-phone-dialog .phone-dialog__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--preps-muted, #64748b);
  font-size: .78rem;
  font-weight: 650;
}

html body.page-teachers .directory-phone-dialog h2 {
  margin: 0;
  color: var(--preps-blue, #15579a);
  font-size: 1.1rem;
  line-height: 1.25;
}

html body.page-teachers .directory-phone-dialog .phone-dialog__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--preps-muted, #52708f);
  background: color-mix(in srgb, var(--preps-blue, #15579a) 5%, transparent);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font: 400 24px/1 sans-serif;
  cursor: pointer;
}

html body.page-teachers .directory-phone-dialog .phone-dialog__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

html body.page-teachers .directory-phone-dialog .phone-extension {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 70px;
  padding: 12px 14px;
  color: var(--preps-blue, #15579a);
  background: color-mix(in srgb, var(--preps-blue, #15579a) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--preps-blue, #15579a) 18%, transparent);
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
}

html body.page-teachers .directory-phone-dialog .phone-extension:hover,
html body.page-teachers .directory-phone-dialog .phone-extension:focus-visible {
  background: color-mix(in srgb, var(--preps-blue, #15579a) 10%, transparent);
  border-color: color-mix(in srgb, var(--preps-blue, #15579a) 32%, transparent);
  outline: 0;
}

html body.page-teachers .directory-phone-dialog .phone-extension span {
  margin-bottom: 2px;
  color: var(--preps-muted, #6a7d93);
  font-size: .74rem;
  font-weight: 600;
}

html body.page-teachers .directory-phone-dialog .phone-extension strong {
  font-size: 1.15rem;
  line-height: 1.15;
}

html[data-theme="dark"] body.page-teachers .directory-phone-dialog {
  color: var(--preps-text, #edf3f8);
  background: var(--preps-surface, #182330);
  border-color: var(--preps-line, #354a60);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] body.page-teachers .directory-phone-dialog::backdrop {
  background: rgba(5, 10, 16, .72);
}

@media (max-width: 520px) {
  html body.page-teachers .directory-phone-dialog .phone-dialog__panel {
    padding: 16px;
  }

  html body.page-teachers .directory-phone-dialog .phone-dialog__actions {
    grid-template-columns: 1fr;
  }

  html body.page-teachers .directory-phone-dialog .phone-extension {
    min-height: 58px;
  }
}


/* v296: directory names are human-readable labels, not URLs. Wrap only at
   whitespace so Russian names are never split at arbitrary characters. */
html body.page-teachers .directory-name,
html body.page-teachers .directory-meta,
html body.page-audiences-v97 .audience-room__name.directory-name,
html body.page-audiences-v97 .directory-name,
html body.page-institutes .directory-name {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* ========================================================================
   v310 directory QA fixes
   ======================================================================== */

/* In teacher tile view each card in a grid row may have a different department
   height. Pin content to the top so all teacher names share one visual baseline. */
html body.page-teachers .directory-results[data-directory-view="grid"] .directory-card {
  align-content: start !important;
  align-items: start !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
html body.page-teachers .directory-results[data-directory-view="grid"] .directory-name {
  align-self: start !important;
  margin-top: 0 !important;
}

/* Audience list sections have one separator, not a card line immediately next
   to a section line. Keep the section divider slightly stronger for hierarchy. */
html body.page-audiences-v97 .audiences-results[data-directory-view="list"] .audience-location.directory-section {
  border-bottom: 2px solid #d4e0eb !important;
}
html body.page-audiences-v97 .audiences-results[data-directory-view="list"] .audience-location.directory-section:last-child {
  border-bottom: 0 !important;
}
html body.page-audiences-v97 .audiences-results[data-directory-view="list"] .audience-room-grid .audience-room.directory-card:last-child {
  border-bottom-color: transparent !important;
}
html[data-theme="dark"] body.page-audiences-v97 .audiences-results[data-directory-view="list"] .audience-location.directory-section {
  border-bottom-color: #35506a !important;
}

/* ========================================================================
   v312: teacher list alphabet sections use one separator, exactly like rooms
   ======================================================================== */
html body.page-teachers .directory-results[data-directory-view="list"] .directory-section {
  border-bottom: 2px solid #d4e0eb !important;
}
html body.page-teachers .directory-results[data-directory-view="list"] .directory-section:last-child {
  border-bottom: 0 !important;
}
html body.page-teachers .directory-results[data-directory-view="list"] .directory-grid .directory-card:last-child {
  border-bottom-color: transparent !important;
}
html[data-theme="dark"] body.page-teachers .directory-results[data-directory-view="list"] .directory-section {
  border-bottom-color: #35506a !important;
}

/* v395: list layout must never override search filtering. */
html body.page-teachers .directory-results[data-directory-view="list"] .directory-card.directory-card.is-hidden,
html body.page-teachers .directory-results[data-directory-view="grid"] .directory-card.directory-card.is-hidden,
html body.page-teachers .directory-results[data-directory-view="list"] .directory-section.directory-section.is-hidden,
html body.page-teachers .directory-results[data-directory-view="grid"] .directory-section.directory-section.is-hidden{
  display:none!important;
}
/* === /v395 === */


/* ========================================================================
   v413: teacher search/INO panel silhouette and uniform focused search rings.
   Desktop teacher controls are one rounded panel. On phones the panel joins
   the content below, so only the top corners stay rounded. Focus indication is
   drawn with an outline instead of a spread box-shadow; this keeps the stroke
   visually even through the rounded corners in both themes.
   ======================================================================== */
html body.page-teachers .directory-shell.directory-panel {
  border-radius: 14px !important;
  overflow: visible !important;
}

@media (max-width: 820px) {
  html body.page-teachers .directory-shell.directory-panel {
    border-radius: 14px 14px 0 0 !important;
  }
}

html body.page-teachers .directory-search input:focus,
html body.page-teachers .directory-search input:focus-visible {
  border-color: color-mix(in srgb, var(--preps-blue) 66%, transparent) !important;
  outline: 2px solid color-mix(in srgb, var(--preps-blue) 28%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: 0 5px 18px rgba(24, 46, 77, .05) !important;
}

html[data-theme="dark"] body.page-teachers .directory-search input:focus,
html[data-theme="dark"] body.page-teachers .directory-search input:focus-visible {
  outline-color: color-mix(in srgb, var(--preps-blue) 32%, transparent) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
}

html body.page-audiences-v97 .audiences-search input:focus,
html body.page-audiences-v97 .audiences-search input:focus-visible {
  border-color: #8db7df !important;
  outline: 2px solid rgba(39, 110, 177, .18) !important;
  outline-offset: 1px !important;
  box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .55) !important;
}

html[data-theme="dark"] body.page-audiences-v97 .audiences-search input:focus,
html[data-theme="dark"] body.page-audiences-v97 .audiences-search input:focus-visible {
  border-color: #547da5 !important;
  outline-color: rgba(116, 174, 226, .20) !important;
  box-shadow: none !important;
}

/* ========================================================================
   v416: keep the focused directory-search ring inside the mobile control.
   The v413 outer outline was correct on desktop, but on phone layouts the
   search input sits flush against the toolbar edge, so the outline's left and
   right pixels were clipped.  A border + inset ring has the same visual weight
   without painting outside the rounded rectangle.  Desktop styling is unchanged.
   ======================================================================== */
@media (max-width: 820px) {
  html body.page-teachers .directory-search input:focus,
  html body.page-teachers .directory-search input:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: color-mix(in srgb, var(--preps-blue) 68%, transparent) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--preps-blue) 28%, transparent),
      0 5px 18px rgba(24, 46, 77, .05) !important;
  }

  html[data-theme="dark"] body.page-teachers .directory-search input:focus,
  html[data-theme="dark"] body.page-teachers .directory-search input:focus-visible {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--preps-blue) 34%, transparent),
      0 8px 24px rgba(0, 0, 0, .16) !important;
  }

  html body.page-audiences-v97 .audiences-search input:focus,
  html body.page-audiences-v97 .audiences-search input:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: #78a9d7 !important;
    box-shadow:
      inset 0 0 0 1px rgba(39, 110, 177, .20),
      0 12px 30px -24px rgba(15, 23, 42, .55) !important;
  }

  html[data-theme="dark"] body.page-audiences-v97 .audiences-search input:focus,
  html[data-theme="dark"] body.page-audiences-v97 .audiences-search input:focus-visible {
    border-color: #5a88b2 !important;
    box-shadow: inset 0 0 0 1px rgba(116, 174, 226, .22) !important;
  }
}