/* Size follows the CSS viewport, including OS/browser scaling and split windows.
   Keep root rem and editor font preferences independent of the UI size ramp. */
:root {
  /* One centered frame: laptop floor, proportional desktop, brand-sized cap.
     The 1488px frame includes two 24px gutters around 1440px of content. */
  --oj-shell-width: clamp(1008px, 70vw, 1488px);
  --oj-page-gutter: clamp(16px, 2.5vw, 24px);
  --oj-body-font: 15px;
  --oj-frontend-font: clamp(15px, 0.15vw + 14px, 16px);
  --oj-ui-font: 14px;
  --oj-small-font: 12px;
  --oj-label-font: 13px;
  --oj-control-height: 44px;
}

.oj-page { width: 100%; padding-inline: var(--oj-page-gutter); }
.oj-main { container: oj-page / inline-size; }
/* Coding and administrator preview keep room for reading, code and results. */
.oj-problem-page {
  --oj-shell-width: none;
  --oj-page-gutter: clamp(16px, 2.5vw, 48px);
}
.oj-account-confirmation { max-width: 760px; }
.oj-manage-content { min-width: 0; }
.oj-manage-sidebar { top: calc(var(--oj-management-header, 64px) + 16px); }

/* Large-screen type grows gently between 1440 and 2560 CSS pixels, then stops.
   Narrow/mobile typography and the compact coding toolbar keep their own rules. */
@media (min-width: 1440px) {
  :root {
    --oj-body-font: clamp(16px, calc(13.428571px + 0.178571vw), 18px);
    --oj-frontend-font: var(--oj-body-font);
    --oj-ui-font: clamp(14px, calc(11.428571px + 0.178571vw), 16px);
    --oj-small-font: clamp(12px, calc(10.714286px + 0.089286vw), 13px);
    --oj-label-font: clamp(13px, calc(11.714286px + 0.089286vw), 14px);
    --oj-control-height: clamp(44px, calc(38.857143px + 0.357143vw), 48px);
  }
  .oj-navbar .nav-link,
  .oj-footer,
  .oj-main :is(.table, .oj-table, .oj-problem-table, .oj-submission-table),
  .oj-main :is(.oj-filter-bar, .oj-filter-grid, .oj-problem-filter-grid),
  .oj-manage-sidebar .nav-link { font-size: var(--oj-ui-font); }
  .oj-main :is(.form-label, .oj-text-tags, .oj-problem-card-tags) { font-size: var(--oj-label-font); }
  .oj-main .oj-practice-problem-topics,
  .oj-user-menu-caption { font-size: var(--oj-small-font); }
  .oj-main :is(.oj-announcement-body, .oj-editorial-document, .oj-discussion-post),
  .oj-main .oj-rich-content { font-size: var(--oj-body-font); }
  .oj-main :is(.oj-compact-list-title, .oj-practice-problem-title),
  .oj-practice-intro > p,
  .oj-practice-section-heading p { font-size: var(--oj-body-font); }
  .oj-catalog-page .oj-problem-table :is(th, td),
  .oj-practice-context,
  .oj-practice-all-link { font-size: var(--oj-ui-font); }
  .oj-catalog-page .oj-problem-table .oj-cell-primary { font-size: var(--oj-body-font); }
  .oj-practice-problem-topics { font-size: var(--oj-small-font); }
  body:not(.oj-problem-page) :is(.btn, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    font-size: var(--oj-body-font);
  }
  body:not(.oj-problem-page) .btn-sm { font-size: var(--oj-ui-font); }
  body:not(.oj-problem-page) :is(.btn, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
    min-height: var(--oj-control-height);
  }
  .oj-main :is(.table, .oj-problem-table, .oj-submission-table) > :not(caption) > * > * {
    padding-block: clamp(12px, 0.85vw, 18px);
  }
  .oj-management-page .oj-manage-layout { gap: clamp(16px, 1.25vw, 32px); grid-template-columns: clamp(220px, 10vw, 240px) minmax(0, 1fr); }
  .oj-main :is(.oj-filter-bar, .oj-filter-grid, .oj-problem-filter-grid) { gap: clamp(12px, 0.85vw, 20px); }
}