/* StudyPulse responsive containment guard
   Additive safety layer only: preserves each approved portal design while
   preventing content, controls, media and long text from escaping containers. */

:root { --sp-safe-gutter: clamp(12px, 3vw, 28px); }

html,
body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

:where(main, section, article, aside, header, footer, nav, form, fieldset, div) {
  min-width: 0;
}

:where(.card, [class*="-card"], [class*="_card"], [class*=" card"],
       [class*="panel"], [class*="tile"], [class*="widget"],
       .modal-content, .section-card, fieldset) {
  max-width: 100%;
  min-width: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend,
       strong, small, span, a, button, td, th, figcaption) {
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(img, video, canvas, svg, iframe, embed, object) {
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

:where(input, select, textarea, button) {
  max-width: 100%;
  min-width: 0;
}

:where(pre, code) {
  max-width: 100%;
}

pre {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.table-responsive, .table-scroll, .table-wrap, .data-table-wrap,
       [class*="table-scroll"], [class*="table-wrap"]) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

:where(.row, [class*="grid"], [class*="layout"], [class*="columns"],
       [class*="column"], [class*="split"], [class*="content"],
       [class*="body"], [class*="copy"]) > * {
  min-width: 0;
}

/* StudyFetch/Universal shared shell: keep every header action reachable on
   narrow screens without pushing the main page outside the viewport. */
@media (max-width: 767px) {
  #studyfetchWorkspace > section > header {
    gap: 8px;
  }

  #studyfetchWorkspace > section > header [data-language-host="dashboard-header"] {
    flex: 1 1 auto;
    width: auto;
    max-width: calc(100vw - 68px);
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  #studyfetchWorkspace > section > header [data-language-host="dashboard-header"]::-webkit-scrollbar {
    display: none;
  }

  #studyfetchWorkspace > section > header [data-language-host="dashboard-header"] > * {
    flex: 0 0 auto;
  }

  .sf-role-head,
  .sf-page-head,
  .sf-page-header,
  .content-header,
  .standalone-head,
  .section-title,
  .rich-card-head,
  .card-head {
    min-width: 0;
  }

  .sf-role-actions,
  .page-actions,
  .form-actions,
  .modal-footer,
  .wizard-footer,
  .toolbar,
  .filter-bar,
  [class*="filter-actions"],
  [class*="toolbar-actions"] {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .sf-library-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    align-items: stretch;
  }

  .sf-library-controls > * {
    width: 100%;
    min-width: 0 !important;
  }

  .sf-library-controls > :first-child {
    grid-column: 1 / -1;
  }

  .sf-library-controls .sf-switch-row {
    align-items: center;
  }

  .sf-library-controls .sf-switch-title {
    white-space: normal;
    line-height: 1.25;
  }

  :where(table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  :where(.modal-dialog, [role="dialog"]) {
    max-width: calc(100vw - 20px);
  }

  :where(.modal-body, .modal-header, .modal-footer) {
    min-width: 0;
  }

  :where(.btn, .sf-btn, .btn-hrp, .btn-main, button) {
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .sf-library-controls {
    grid-template-columns: 1fr;
  }

  .sf-library-controls > :first-child {
    grid-column: auto;
  }
}

/* Confirmed credential-vault overflow fixes. */
@media (max-width: 700px) {
  .credential-vault-page .topbar,
  body:has(.credential-vault-shell) .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .temp-access-head {
    flex-direction: column;
    align-items: stretch;
  }

  .temp-access-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .temp-access-grid > *,
  .temp-access-grid form,
  .temp-access-grid button {
    width: 100%;
    min-width: 0;
  }

  .temp-access-copy {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .group-head,
  .section-header,
  .audit-item {
    min-width: 0;
  }

  .audit-item {
    flex-wrap: wrap;
  }

  .audit-time {
    white-space: normal !important;
  }
}

/* Confirmed public enrollment brand-row overflow fixes. */
@media (max-width: 540px) {
  body[data-sp-public-enroll] .org-bar,
  .sp-public-enroll .org-bar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body[data-sp-public-enroll] .org-info,
  .sp-public-enroll .org-info {
    flex: 1 1 calc(100% - 62px);
  }

  body[data-sp-public-enroll] .org-meta,
  .sp-public-enroll .org-meta {
    flex-wrap: wrap;
  }

  body[data-sp-public-enroll] .powered,
  .sp-public-enroll .powered {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Confirmed Higher Education topbar one-letter wrapping fix. */
@media (max-width: 560px) {
  [data-sp-experience="higher_education"] .topbar {
    gap: 4px;
    padding-inline: 7px !important;
  }

  [data-sp-experience="higher_education"] .top-left,
  [data-sp-experience="higher_education"] .institution-id,
  [data-sp-experience="higher_education"] .institution-id > div,
  [data-sp-experience="higher_education"] .identity,
  [data-sp-experience="higher_education"] .identity > div {
    min-width: 0;
  }

  [data-sp-experience="higher_education"] .institution-id,
  [data-sp-experience="higher_education"] .identity {
    gap: 7px;
  }

  [data-sp-experience="higher_education"] .institution-id strong,
  [data-sp-experience="higher_education"] .identity strong {
    display: block;
    max-width: clamp(105px, 35vw, 145px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  [data-sp-experience="higher_education"] .institution-id span,
  [data-sp-experience="higher_education"] .identity span {
    display: block;
    max-width: clamp(105px, 35vw, 145px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  [data-sp-experience="higher_education"] .top-actions {
    flex: 0 0 auto;
    gap: 0 !important;
  }

  [data-sp-experience="higher_education"] .top-icon {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Public Website CMS rows retain all controls while avoiding compressed titles. */
@media (max-width: 640px) {
  .sp-public-cms-page .sp-public-cms-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .sp-public-cms-page .sp-public-cms-actions > * {
    width: 100%;
    justify-content: center;
  }

  .sp-public-cms-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px !important;
  }

  .sp-public-cms-row > .sp-public-cms-status {
    grid-column: 2;
    justify-self: start;
  }

  .sp-public-cms-row > .sp-public-cms-edit {
    grid-column: 2;
    width: fit-content;
  }

  .sp-public-cms-row > .sp-public-cms-preview {
    grid-column: 3;
    grid-row: 1 / span 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}

/* Repository-wide mobile hardening confirmed by the exhaustive template audit. */
@media (max-width: 767px) {
  /* Conversation rows and headers must retain readable names instead of
     collapsing text into one-character columns. */
  .sp-chat-center {
    padding-inline: 10px;
  }

  .sp-chat-center-grid {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .sp-chat-thread-list > a {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding-inline: 8px;
  }

  .sp-chat-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .sp-chat-thread-list > a > span:nth-child(2),
  .sp-chat-conversation > header > div,
  .sp-chat-conversation > header > div > span:last-child {
    min-width: 0;
  }

  .sp-chat-conversation > header {
    height: auto;
    min-height: 68px;
    padding: 10px 12px;
    gap: 8px;
  }

  .sp-chat-conversation header strong,
  .sp-chat-conversation header small {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  .sp-chat-status {
    flex: 0 0 auto;
    max-width: 92px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  .sp-chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sp-chat-composer button {
    padding-inline: 12px;
  }

  /* Notes and content-library filter regions become true single-column
     controls on phones instead of retaining a desktop intrinsic width. */
  .sp-library-context {
    align-items: stretch;
    flex-direction: column;
  }

  .sp-library-context-left,
  .sp-library-toolbar,
  .sp-library-filter-row,
  .sp-library-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .sp-library-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .sp-library-filter-row > *,
  .sp-library-select,
  .sp-library-search input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Organization action clusters remain inside their table cell/card and
     every control remains reachable. */
  .oa-mobile-stack,
  .oa-actions {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 7px;
  }

  .oa-mobile-stack > *,
  .oa-actions > * {
    min-width: 0;
    max-width: 100%;
  }

  .oa-mobile-stack form {
    display: inline-flex;
    max-width: 100%;
    margin: 0;
  }

  /* Imported-package rows and other detail-list actions wrap instead of
     extending past the card edge. */
  #packageList > [data-package-id] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start !important;
    gap: 10px;
  }

  #packageList > [data-package-id] > .d-flex {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Higher Education user identity remains a fixed avatar plus a safely
     truncated text column. */
  .he-user-chip {
    min-width: 0;
    max-width: min(210px, 44vw);
    flex: 0 1 auto;
  }

  .he-user-chip > span:last-child {
    min-width: 0;
    max-width: 100%;
  }

  .he-user-chip strong,
  .he-user-chip small {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  .he-avatar {
    min-width: 40px;
    flex: 0 0 40px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  /* Public API route strings wrap as route strings, never as one-character
     columns, while preserving method and chevron alignment. */
  .endpoint-header {
    min-width: 0;
  }

  .ep-path {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .ep-desc {
    min-width: 0;
  }

  /* Badges may contain tenant-defined labels. Prevent those labels from
     escaping their card while retaining the approved pill appearance. */
  :where(.sf-badge, .oa-badge, .badge, [class*="status-badge"], [class*="-pill"]) {
    max-width: 100%;
    min-width: 0;
  }

  /* Credential vault group totals may contain translated or large values. */
  .credential-vault-page .group-count,
  body:has(.credential-vault-shell) .group-count {
    max-width: 100%;
    white-space: normal !important;
    text-align: end;
  }

  /* Tables remain horizontally scrollable inside their own card, never the
     document. */
  .oa-card:has(table),
  .hrp-card:has(table),
  .sf-card:has(table),
  .he-workspace-card:has(table) {
    overflow: hidden;
  }
}

@media (max-width: 540px) {
  .sp-chat-center-head,
  .sp-chat-org-filter {
    width: 100%;
    min-width: 0;
  }

  .sp-chat-org-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .sp-chat-org-filter select {
    width: 100%;
  }

  .sp-chat-messages {
    padding: 14px 10px;
  }

  .sp-chat-messages article {
    max-width: 88%;
  }

  .sp-chat-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-chat-composer button {
    width: 100%;
    justify-content: center;
  }

  .he-user-chip {
    max-width: 42px;
    padding-left: 0;
  }

  .endpoint-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px !important;
    align-items: center;
  }

  .endpoint-header .ep-desc {
    grid-column: 1 / -1;
    padding-left: 0;
  }
}

/* Higher Education planner/research panels: their approved wide schedule is a
   horizontal rail, and hero actions remain clipped to the panel boundary. */
[data-sp-experience="higher_education"] .study-schedule {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

[data-sp-experience="higher_education"] .research-hero {
  max-width: 100%;
  overflow: hidden;
}

[data-sp-experience="higher_education"] .research-hero > div,
[data-sp-experience="higher_education"] .research-hero a {
  min-width: 0;
  max-width: 100%;
}

/* Higher Education planner task overflow menu remains inside its 20px grid
   track on narrow kanban cards. */
[data-sp-experience="higher_education"] .task-card {
  min-width: 0;
  overflow: hidden;
}

[data-sp-experience="higher_education"] .task-card > button {
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  display: grid;
  place-items: center;
  justify-self: end;
  overflow: hidden;
}

/* Legacy-approved RLikes landing composition: preserve its visual language but
   contain invisible Webflow animation tracks and decorative card media so
   they cannot enlarge the document or escape cards. */
html:has(body.sp-landing-page),
body.sp-landing-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.sp-landing-page .sp-managed-showcase {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin-inline: 0 !important;
  transform: none !important;
}

.sp-landing-page .platform-card,
.sp-landing-page .platform-card.ptfcrdtxt3,
.sp-landing-page .card {
  max-width: 100%;
  overflow: hidden !important;
}

.sp-landing-page :is(.image-11, .image-13, .image-244, .image-247, .image-248) {
  max-width: 100% !important;
}

@media (max-width: 767px) {
  .sp-landing-page :is(.main, .main-data, .projects, .freedom-wrapper, .freedom, .platform, .minds) {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .sp-landing-page .div-block-63 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: 14px;
  }

  .sp-landing-page .users,
  .sp-landing-page .button-7 {
    max-width: 100vw !important;
  }

  .sp-landing-page .button-7[style*="opacity:0"],
  .sp-landing-page .button-7[style*="opacity: 0"] {
    display: none !important;
  }

  .sp-landing-page .cardline,
  .sp-landing-page .div-block-60,
  .sp-landing-page .div-block-61 {
    max-width: none;
  }

  .sp-landing-page .image-13 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}

/* Organization workspace actions use a readable full-width stack on small
   screens so translated/tenant-defined labels never collapse vertically. */
@media (max-width: 640px) {
  [data-sp-experience="organization"] .wf-tool-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  [data-sp-experience="organization"] .wf-tool-actions > .btn,
  [data-sp-experience="organization"] .wf-tool-actions > a,
  [data-sp-experience="organization"] .wf-tool-actions > button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}

/* Study planner toolbar: preserve the approved controls while preventing the
   explanatory label from being compressed into one-letter lines when several
   tenant-defined controls are present. */
.sp-plan-controls {
  flex-wrap: wrap;
}

.sp-plan-controls > span {
  flex: 1 1 180px;
  min-width: min(180px, 100%);
  margin-right: 0;
  overflow-wrap: anywhere;
}

.sp-plan-controls .sp-plan-control {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

.sp-plan-controls .sp-plan-control select {
  max-width: 100%;
}