/* Shared page frames. Keep application-specific layouts and floating surfaces intact. */
:root {
  --ny-content-max: 1240px;
  --ny-content-gutter: 24px;
  --ny-content-mobile-gutter: 16px;
}

#main-content { min-width: 0; }

/* Ordinary reference and information pages use a readable, centered frame. */
#main-content > .shell,
#main-content .campus-shell,
#main-content .health-shell,
#main-content .campus-calendar,
#main-content .steward-shell:not(:has(>.hx-management-nav)) {
  box-sizing: border-box;
  width: min(var(--ny-content-max), calc(100% - 48px));
  max-width: var(--ny-content-max);
  margin-inline: auto;
}

/* Legacy shell width is shared by catalog, resource, and reader pages. */
#main-content > .shell { width: min(var(--ny-content-max), calc(100% - 48px)); }

/* The campus map and stewardship desk need a little more room for their tools. */
#main-content .campus-shell,
#main-content .steward-shell:not(:has(>.hx-management-nav)) {
  width: min(1360px, calc(100% - 48px));
  max-width: 1360px;
}

/* Workspace pages keep their multi-column layout, with a stable outer gutter. */
#main-content .journal-layout {
  box-sizing: border-box;
  width: min(var(--ny-content-max), calc(100% - 48px));
  max-width: var(--ny-content-max);
  margin-inline: auto;
}

#main-content .journal-layout.journal-workbench {
  width: min(1360px, calc(100% - 48px));
  max-width: 1360px;
}

/* Public reading measure stays narrower than its navigation/workbench frame. */
#main-content .journal-reading .journal-prose,
#main-content .journal-reading .journal-post-heading,
#main-content .journal-reading .reading-meta-line,
#main-content .journal-reading .reading-end,
#main-content .journal-reading .reading-toc {
  max-width: 760px;
}

/* The review app's shared main was previously an unbounded, zero-gutter block. */
.mc-page {
  box-sizing: border-box;
  width: min(var(--ny-content-max), calc(100% - 48px));
  max-width: var(--ny-content-max);
  margin-inline: auto;
  min-width: 0;
}

.manage-home {
  box-sizing: border-box;
  width: min(1200px, calc(100% - 48px));
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 36px);
}

.ra-shell {
  box-sizing: border-box;
  width: min(var(--ny-content-max), calc(100% - 48px));
  max-width: var(--ny-content-max);
  margin-inline: auto;
}

.chat-wrap {
  box-sizing: border-box;
  width: min(860px, calc(100% - 48px));
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 0;
}

.wh-page {
  box-sizing: border-box;
  width: min(var(--ny-content-max), calc(100% - 48px));
  max-width: var(--ny-content-max);
  margin-inline: auto;
}

.wh-page.wh-page-narrow { max-width: 780px; }

/* Preserve wide, purpose-built work surfaces while keeping safe page edges. */
.writer-wrap {
  box-sizing: border-box;
  width: min(1280px, calc(100% - 48px));
  max-width: 1280px;
  margin-inline: auto;
}

.annual-shell {
  box-sizing: border-box;
  width: min(1800px, calc(100% - 56px));
  margin-inline: auto;
}

.desktop-stage,
.campus-map-detail-grid,
.campus-map-pane,
.campus-inspector,
.campus-map-directory {
  min-width: 0;
}

/* Login and focused forms use the same 16px minimum gutter as other pages. */
.site-form,
.verify-page,
.login-page {
  box-sizing: border-box;
  max-width: min(620px, calc(100% - 48px));
  margin-inline: auto;
}

/* Calm, non-blocking context for a moderation explanation and reason label. */
.ra-explanation {
  margin: 12px 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--line, rgba(173, 209, 223, .13));
  border-inline-start: 2px solid var(--line-strong, rgba(173, 209, 223, .22));
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--paper-1, #0f1a20) 78%, transparent);
  color: var(--ink-1, #a7bac2);
}

.ra-explanation h2,
.ra-explanation h3 { margin: 0 0 8px; color: var(--ink-0, #ecf3f4); font-size: 1rem; }
.ra-explanation p { margin: 6px 0 0; line-height: 1.65; }
.ra-explanation dl {
  display: block;
  margin: 12px 0 0;
}
.ra-explanation dl > div {
  display: grid;
  grid-template-columns: minmax(7em, .4fr) minmax(0, 1fr);
  gap: 7px 14px;
  padding: 8px 0;
  border-top: 1px solid var(--line, rgba(173, 209, 223, .13));
}
.ra-explanation dt { color: var(--ink-2, #6e8791); font-size: .82rem; }
.ra-explanation dd { min-width: 0; margin: 0; color: var(--ink-1, #a7bac2); overflow-wrap: anywhere; }
.ra-explanation-technical { border-inline-start-color: var(--cyan, #4cd8e8); }
.ra-explanation-content { border-inline-start-color: var(--accent, #c8e791); }

.rq-row-reason {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0 6px 2px;
  color: var(--ink-2, #6e8791);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.reviewalice-reason {
  display: block;
  margin-top: 4px;
  color: var(--ink-2, #6e8791);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[data-theme="light"] .ra-explanation {
  border-color: var(--ny-line, rgba(28, 42, 48, .18));
  background: color-mix(in srgb, var(--ny-surface, #fdfefc) 88%, transparent);
  color: var(--ny-muted, #53646c);
}
html[data-theme="light"] .ra-explanation h2,
html[data-theme="light"] .ra-explanation h3 { color: var(--ny-text, #1d262b); }
html[data-theme="light"] .ra-explanation dt,
html[data-theme="light"] .ra-explanation dd,
html[data-theme="light"] .rq-row-reason,
html[data-theme="light"] .reviewalice-reason { color: var(--ny-muted, #53646c); }
html[data-theme="light"] .ra-explanation-technical { border-inline-start-color: var(--ny-focus, #2f8291); }
html[data-theme="light"] .ra-explanation-content { border-inline-start-color: var(--ny-accent, #5f7d1f); }

/* Avoid stacking container padding on top of the page frame gutters. */
.ra-shell { padding-inline: 16px; }
.manage-home { padding-inline: 0; }
.wh-page { padding-inline: 0; }
#main-content .health-shell,
#main-content .campus-calendar { padding-inline: 0; }
#main-content .steward-shell { padding-inline: 16px; }

@media (max-width: 560px) {
  .ra-explanation dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (max-width: 700px) {
  #main-content > .shell,
  #main-content .campus-shell,
  #main-content .health-shell,
  #main-content .campus-calendar,
  #main-content .steward-shell,
  #main-content .journal-layout,
  .mc-page {
    width: calc(100% - 32px);
  }

  .manage-home,
  .ra-shell,
  .chat-wrap,
  .wh-page { width: calc(100% - 32px); }

  .manage-home { padding-inline: 16px; }

  #main-content .journal-layout { margin-inline: auto; }

  #main-content .journal-layout.journal-workbench { width: calc(100% - 32px); }

  .writer-wrap { width: calc(100% - 32px); }

  .annual-shell { width: calc(100% - 32px); }

  .workspace-page .annual-shell { width: calc(100% - 32px); }

  .site-form,
  .verify-page,
  .login-page { max-width: calc(100% - 32px); }
}

/* The 16px mobile frame already supplies the needed inset. */
.manage-home { padding-inline: 0; }

/* Four-cell timers must shrink with the reading column on narrow screens. */
@media (max-width: 520px) {
  .ny-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ny-cd-cell { box-sizing: border-box; min-width: 0; padding: 10px 3px 8px; }
  .ny-cd-cell b { font-size: clamp(19px, 6vw, 24px); }
  .ny-cd-cell span { font-size: 9px; letter-spacing: .06em; }
}

/* The tree-note grid's normal 310px card minimum cannot fit 320px viewports. */
@media (max-width: 340px) {
  .wh-tree-grid, .wh-bottle-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.wh-tree-grid, .wh-bottle-grid) > :is(.note-card, .glass, .empty) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Compress the existing mobile navigation enough to keep every control in-frame. */
@media (max-width: 340px) {
  .ny-header.topbar { gap: 4px; padding-inline: 6px; }
  .ny-brand { gap: 4px; font-size: 12px; }
  .ny-brand-mark,
  .ny-brand-mark svg { width: 40px; }
  .ny-brand-rule { display: none; }
  .ny-header-links { flex: 1 1 auto; justify-content: flex-end; }
  .ny-menu > summary,
  .ny-login { gap: 3px; padding-inline: 5px; }
  .ny-theme { width: 26px; padding-inline: 4px; }
  .ny-account summary img { width: 20px; height: 20px; }
}