/* Front-office layout only. Management retains its own density and controls. */
.oj-frontend {
  --oj-page-gutter: clamp(16px, 2.5vw, 48px);
  --oj-layout-gap: clamp(16px, 1.8vw, 32px);
  --oj-panel-padding: clamp(16px, 2vw, 32px);
  overflow-x: visible;
  font-size: clamp(15px, 0.15vw + 14px, 16px);
}
.oj-frontend :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--oj-link);
  outline-offset: 3px;
}
.oj-frontend :is(.oj-panel, .oj-page-heading, .oj-profile-identity, .oj-profile-name,
  .oj-user-menu-toggle, .oj-user-menu-identity, .oj-compact-list-main) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.oj-frontend .oj-panel:is(.p-4, .p-lg-5) {
  padding: var(--oj-panel-padding) !important;
}
.oj-frontend .oj-user-menu-wrap { min-width: 0; }
.oj-frontend .oj-user-menu-identity { max-width: 220px; }
.oj-frontend .oj-user-menu-name { white-space: normal; }
.oj-frontend .oj-user-menu-dropdown-toggle { flex: 0 0 44px; }
.oj-frontend .oj-theme-toggle { flex-shrink: 0; }
.oj-frontend .oj-footer-inner,
.oj-frontend .oj-footer-links { flex-wrap: wrap; }
.oj-frontend :is(.oj-profile-tabs, .oj-problem-tabs) {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.oj-frontend :is(.oj-profile-tab, .oj-problem-tabs .nav-item) { flex-shrink: 0; }
.oj-frontend :is(.oj-rich-content, .tab-pane, .oj-discussion-post, .oj-discussion-comment) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.oj-frontend .oj-rich-content :is(pre, table, mjx-container[display="true"]) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.oj-frontend :is(.oj-rich-content img, .oj-rich-content video) { max-width: 100%; height: auto; }
.oj-frontend :is(.oj-pre, .oj-code-pre) { max-width: 100%; overflow-x: auto; }
.oj-frontend .oj-text-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  min-width: 0;
}
.oj-frontend .oj-text-tags > * {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.oj-frontend .oj-text-tags a {
  color: var(--oj-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.oj-frontend .oj-text-tags a:is(:hover, :focus-visible) {
  color: var(--oj-link);
  text-decoration-color: currentColor;
}
.oj-frontend .oj-problem-card-tags { line-height: 1.6; }

@media (max-width: 991.98px) {
  .oj-frontend .oj-user-menu-identity { max-width: none; }
  .oj-frontend :is(.oj-navbar .nav-link, .oj-footer-links a, .oj-profile-tab, .oj-problem-tabs .nav-link) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .oj-frontend .oj-text-tags { gap: 4px 12px; }
  .oj-frontend .oj-text-tags a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767.98px) {
  .oj-frontend .oj-panel:is(.p-3, .p-4, .p-lg-5),
  .oj-frontend :is(.oj-settings-section, .oj-profile-hero, .oj-public-profile-card,
    .oj-public-profile-activity, .oj-auth-card, .oj-practice-panel, .oj-home-hero-copy, .oj-problem-card) {
    padding: 16px !important;
  }
  .oj-frontend :is(.oj-home-stat-grid, .oj-stat-grid, .oj-metric-strip) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .oj-frontend :is(.oj-home-hero, .oj-profile-content-grid, .oj-profile-activity-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  .oj-frontend :is(.btn, .oj-reference-link, .page-link, .oj-segmented button) { min-height: 44px; }
  .oj-frontend .btn { white-space: normal; }
  .oj-frontend :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    max-width: 100%;
    font-size: 16px;
  }
  .oj-frontend form .row > [class*="col-"] { width: 100%; }
  .oj-frontend .oj-public-solved-main { flex-wrap: wrap; }
  .oj-frontend .oj-public-solved-title { white-space: normal; overflow-wrap: anywhere; }
  .oj-frontend .oj-profile-identity { width: 100%; }
  .oj-frontend .oj-profile-identity > div { min-width: 0; }
  .oj-frontend .oj-profile-tabs { margin-inline: 0; padding-inline: 0; }
  .oj-frontend .oj-footer-links { gap: 4px 16px; }
}
.oj-frontend .oj-combobox-option { min-height: 44px; overflow-wrap: anywhere; }
.oj-frontend [data-problem-results] { scroll-margin-top: 88px; }

.oj-frontend .oj-status-code { flex-shrink: 0; white-space: nowrap; }

/* Keep navigation and footer stable; only the problem workspace expands. */
.oj-frontend .oj-page {
  width: 100%;
  max-width: 1440px;
  padding-inline: var(--oj-page-gutter);
}
.oj-frontend-wide .oj-main { max-width: none; }
.oj-frontend .oj-main { padding-block: clamp(20px, 2vw, 36px) clamp(32px, 3vw, 56px); }
.oj-frontend :is(.oj-home-shell, .oj-profile-content-grid, .oj-profile-activity-grid) { gap: var(--oj-layout-gap); }
.oj-frontend .oj-page-heading h1 { font-size: clamp(26px, 1.5vw + 18px, 40px); line-height: 1.3; }
/* Keep prose readable while code, formulas and tables retain the full column. */
.oj-frontend .oj-rich-content :is(p, ul, ol, blockquote, h2, h3, h4) {
  max-inline-size: 40em;
  max-inline-size: 40ic;
}
.oj-frontend :is(.oj-status-guide-copy, .oj-auth-subtitle) { max-inline-size: 40em; max-inline-size: 40ic; }
.oj-frontend .oj-home-hero-copy { padding: clamp(16px, 2.5vw, 36px); }
.oj-frontend .oj-home-title { font-size: clamp(30px, 2vw + 20px, 48px); }
.oj-frontend :is(.oj-practice-panel, .oj-home-stat, .oj-problem-card) { padding: var(--oj-panel-padding); }
.oj-frontend .oj-editorial-document :is(p, ul, ol) { max-inline-size: 40em; max-inline-size: 40ic; }
/* Optional syntax themes must not change block geometry after first paint. */
html[data-theme] .oj-frontend pre > code {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

.oj-frontend :is(.oj-page-heading h1, .oj-home-title, .oj-problem-title) { text-wrap: balance; }

/* Shared document layout: editor and public renderer use the same indent classes. */
.oj-rich-content .oj-indent-1 { margin-inline-start: 2em; }
.oj-rich-content .oj-indent-2 { margin-inline-start: 4em; }
.oj-rich-content .oj-indent-3 { margin-inline-start: 6em; }
.oj-rich-content .oj-indent-4 { margin-inline-start: 8em; }
.oj-rich-content .oj-indent-5 { margin-inline-start: 10em; }
.oj-rich-content .oj-indent-6 { margin-inline-start: 12em; }
.oj-rich-content .oj-indent-7 { margin-inline-start: 14em; }
.oj-rich-content .oj-indent-8 { margin-inline-start: 16em; }
.oj-rich-content details { border: 1px solid var(--bs-border-color,#ccd); padding: .65rem; margin-block: .8rem; border-radius: .35rem; }
.oj-rich-content summary { cursor: pointer; font-weight: 600; }
.oj-rich-content [data-oj-math="block"] { overflow-x: auto; margin-block: 1em; max-inline-size: 40em; max-inline-size: 40ic; }
.oj-rich-content [data-oj-math="block"] > .katex-display { margin: 0; }
.oj-rich-content li > p:last-child, .oj-rich-content td > p:last-child, .oj-rich-content th > p:last-child, .oj-rich-content dd > p:last-child { margin-bottom: 0; }