/*
 * Settings, Exchange accounts, What's new, Status and the admin pages
 * fitted to the window (owner's request, 2026-10-17: "every page should
 * take care in not scrolling as much"). Loaded after setup.css and fit.css.
 */

/* Settings: one tab at a time, the groups side by side on a wide screen. */
@media (min-width: 1101px) {
  .set-page { max-width: 1320px; }
}
.set-tabs button[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.set-tabs button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.set-panel[hidden] { display: none !important; }
.set-panel > .set-section { margin-bottom: 0; }
.set-account { gap: var(--space-4); }

.set-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.set-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (min-width: 1101px) {
  /* The switches (or the devices) in a narrow column, the long grid beside them. */
  .set-cols { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
  .set-cols > .set-sub, .set-ai-cols > .set-col > .set-sub:first-child { border-top: 0; padding-top: 0; }
  /* The three AIs to choose from side by side: each choice is a line or two. */
  #ai-active { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2) var(--space-3); }
  #ai-active > small { grid-column: 1 / -1; }
}

/* A section's Save stays in view at the bottom of the window while its group scrolls by. */
.set-page .set-save-row {
  position: sticky; bottom: 0; z-index: 3;
  margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
@media (max-width: 768px) {
  /* Above the phone's bottom bar. */
  .set-page .set-save-row { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .set-tabs button { min-height: 44px; }
}

/* Exchange accounts: the add form and the accounts in two columns on a wide screen. */
.ex-add-cols { gap: var(--space-4); }
.ex-add-cols > * { min-width: 0; }
/* Until an exchange is chosen the right column is empty: the choice takes the width. */
.ex-add-cols:not(:has(#create-account-form:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1101px) {
  .ex-add-pick .ex-reassure { margin-bottom: var(--space-3); }
}
.ex-layout:has(> #account-fees:empty) { grid-template-columns: minmax(0, 1fr); }
.ex-layout #account-fees > h2:first-child { margin-top: 0 !important; }
.ex-layout .ex-cards { margin-bottom: 0; }

/* What's new: a reading column, the versions beside it. */
.rl-page { max-width: 1200px; }
.rl-cols { gap: var(--space-4); }
.rl-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; min-width: 0; }
.rl-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-jump { display: inline-flex; align-items: center; min-height: 32px; font-size: 0.75rem; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); color: var(--color-text-muted); text-decoration: none; }
.rl-jump:hover { color: var(--color-text); border-color: var(--color-accent, #6366f1); }
.rl-jump:focus-visible { outline: 2px solid var(--color-accent, #6366f1); outline-offset: 2px; }
.rl-jump-v { font-family: monospace; }
.rl-jump-title { display: none; }
@media (max-width: 768px) {
  .rl-jump { min-height: 44px; }
}
@media (min-width: 1101px) {
  .rl-cols { grid-template-columns: minmax(0, 820px) minmax(260px, 340px); }
  .rl-nav { order: 2; position: sticky; top: var(--space-4); flex-direction: column; flex-wrap: nowrap; max-height: calc(100dvh - 120px); overflow: auto; }
  .rl-jump { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; }
  .rl-jump-title { display: block; font-size: 0.8rem; color: var(--color-text); overflow-wrap: anywhere; }
}

/* Status: the services beside the past incidents, which scroll in their own box. */
.st-page { max-width: 1400px; }
.st-cols { gap: var(--space-5); }
.st-day-quiet { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; }
.st-day-quiet h3 { margin: 0; }
@media (min-width: 1101px) {
  .st-cols { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
  .st-past-list { max-height: calc(100dvh - 220px); overflow: auto; padding-right: 4px; }
}

/* Users: the first heading on a tab needs no space above it. */
#au-tabs > section > .au-h2:first-child { margin-top: 0; }
#au-tabs .fit-table { border-radius: var(--radius-md); }

/* Operations: the panels are tabs now, with no space above. */
#ops-tabs > .ops-card { margin-top: 0; }
@media (min-width: 1101px) {
  /* Each list's box ends at the window's foot, under the filters and headings above it. */
  #au-tabs #users-list.fit-table, #au-tabs #gs-list.fit-table { max-height: max(360px, calc(100dvh - 400px)); }
  #au-tabs #contact-requests.fit-table, #au-tabs #audit-list.fit-table { max-height: max(360px, calc(100dvh - 300px)); }
}