/*
 * ISOTOPE Hadron - overflow guard: the last-resort net against text that spills out of its box.
 *
 * Loaded after every other stylesheet. Each rule is global, cannot move a layout that already fits, and names the
 * case it catches. Component fixes (ellipsis with the full text in a title, min-width: 0 on a specific flex child,
 * a max-width on one dialog) belong in that component's stylesheet; this file only keeps hostile text - a 220-char
 * token, a long URL or path, CJK without spaces, a dotted id - from leaving the screen where nobody fixed it yet.
 * Pinned by semantic/tests/test_carbon_overflow_shell.py.
 */

/* 1. Any word longer than its line breaks instead of running past the box (a repository name, a path, a URL, a
 *    token in a drawer paragraph, a toast, a dialog). `break-word` only acts on a word that would overflow, and
 *    does not change min-content sizes, so nothing that fits today moves. Elements that truncate on purpose
 *    (white-space: nowrap + ellipsis) and code that scrolls (pre) are unaffected. */
html {
  overflow-wrap: break-word;
}

/* 2. Popups and inspector drawers never scroll sideways, so inside them a long word may also break when it sits in
 *    a flex or grid item (whose min-content would otherwise be the whole word and push the box wider: the sign-in
 *    error, a toast with a URL, a stacked notification with a Windows path, the identity flyout's principal, a
 *    Framework control drawer's statement, check head and crosswalk list). */
[role="dialog"],
[role="alertdialog"],
[role="tooltip"],
[role="alert"],
cds-modal,
cds-inline-notification,
cds-toast-notification,
cds-actionable-notification,
.cds--inline-notification,
.hadron-flyout-panel,
.nx-drawer {
  overflow-wrap: anywhere;
}

/* 3. A chip or pill in a drawer or popup is one line by design (white-space: nowrap) and has no ellipsis; one whose
 *    text is wider than the drawer (a related control or crosswalk label holding a path, an RTL or emoji run) wraps
 *    inside its own rounded box instead. A chip that fits keeps its one line and its 20px height. */
.nx-drawer :is(.nx-chip, .nx-pill),
[role="dialog"] :is(.nx-chip, .nx-pill) {
  max-width: 100%;
  height: auto;
  min-height: 20px;
  white-space: normal;
}

/* 4. A modal's label and heading never run under its close button (a 44px target placed absolutely in the top-right
 *    corner): at 320px the sign-in dialog's "Enterprise Identity & Access Management" ran beneath the X. */
cds-modal-header > cds-modal-label,
cds-modal-header > cds-modal-heading {
  padding-right: 44px !important;
}

/* 5. On a phone a tag is never wider than its column, and its text wraps rather than running off the screen: a page
 *    header's tag ("Socratic architectural reasoning", "Dense vector + BM25, reranked", the Overview's
 *    "Degraded (Neo4j not answering, ...)") kept the desktop 280px cap and one line, and was cut off at 320px. */
@media (max-width: 671px) {
  #view-container :is(cds-tag, .cds--tag, .carbon-tag) {
    max-width: 100%;
    height: auto;
    min-height: 18px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* 6. A suggested-question chip is a 24px target (WCAG 2.2 target size): at 320px the Ask AI chips were 20px apart. */
#view-container .hadron-chip-tag { min-height: 24px; display: inline-flex; align-items: center; }

/* 7. An estate's summary strip scrolls sideways on a phone, so it takes focus (a keyboard can scroll it); show where. */
.nx-kpis:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }