/* Settings and admin in Arc's manner (piece 21, group C; review §4.18).
 *
 * Settings (Arc example-settings):
 * - The section nav reads like the left menu: 30px rows, 8px radius,
 *   secondary ink, a quiet hover tint, and no box around the current row:
 *   one highlight (.st-glide, placed by arc_settings.js) glides to it on
 *   the morph spring with a short ink tick. Emoji marks are muted at rest.
 * - Sections are titled groups separated by hairlines, not nested cards;
 *   form rows sit on a 4px grid; the staged-save bar is a plain row.
 * - Buttons are .oc-btn and switches .oc-switch (group A's components).
 * Admin (users, orgs, teams, feedback, helm, philosophy, org policy,
 * restricted, budget, routing, cost):
 * - The page header is a plain title and a description.
 * - Tables are dense data grids: 28px rows, 12px sentence-case headers in
 *   secondary ink, hairline rows, a hover tint, tabular numbers.
 * - The Arc confirm sheet (OceanusSheet.confirm, arc_settings.js) replaces
 *   the native dialogs.
 */

/* ======================================================================
   Settings
   ====================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-header {
  padding: 0 0 var(--arc-space-6) !important;
  margin-bottom: var(--arc-space-6);
  border: 0 !important;
  border-bottom: 1px solid var(--arc-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-title {
  font-size: var(--arc-text-display);
  font-weight: var(--arc-weight-strong);
  letter-spacing: -0.015em;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-subtitle {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-grid {
  grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--arc-space-8);
}

/* ---- Section nav --------------------------------------------------------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav {
  position: sticky;
  gap: 2px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn {
  position: relative;
  z-index: 1;
  min-height: 30px;
  gap: calc(var(--arc-space-2) + 2px);
  padding: 0 calc(var(--arc-space-2) + 2px);
  border: 0 !important;
  border-radius: var(--arc-radius-control) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight);
  letter-spacing: var(--arc-tracking);
  -webkit-tap-highlight-color: transparent;
  transform: none !important;
  transition:
    background-color 140ms var(--arc-ease),
    color 140ms var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn .nb-icon {
  width: 16px;
  font-size: var(--arc-text-sm);
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--arc-dur-fast) var(--arc-ease), opacity var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn.active {
  color: var(--arc-foreground) !important;
  font-weight: var(--arc-weight-strong);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn.active .nb-icon { filter: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn:hover:not(.active) {
    background: var(--arc-hover) !important;
    color: var(--arc-foreground) !important;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn:hover .nb-icon { opacity: .9; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn:focus-visible {
  outline: 2px solid var(--arc-focus) !important;
  outline-offset: -2px !important;
}
/* Before the script places the highlight (or without it), the row carries it. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav:not(.st-arc) .settings-nav-btn.active {
  background: var(--arc-selected) !important;
}
.settings-nav .st-glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: var(--arc-radius-control);
  background: var(--arc-selected);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
}
.settings-nav .st-glide.is-on { opacity: 1; }
.settings-nav .st-glide.is-moving {
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    width var(--arc-dur-morph) var(--arc-spring),
    height var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur-fast) var(--arc-ease);
}
.settings-nav .st-glide::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--arc-foreground) 72%, transparent);
  transform: translateY(-50%);
}
@media (max-width: 900px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-grid { grid-template-columns: minmax(0, 1fr); gap: var(--arc-space-4); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav {
    position: relative;
    padding-bottom: var(--arc-space-2) !important;
    border-bottom: 1px solid var(--arc-border) !important;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn { min-height: var(--arc-control-touch); }
  .settings-nav .st-glide::before { top: auto; bottom: 3px; left: 50%; width: 14px; height: 2px; transform: translateX(-50%); }
}

/* ---- Panes: titled groups separated by hairlines ------------------------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pane-head {
  margin-bottom: var(--arc-space-4);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pane-head h2 {
  margin: 0 0 var(--arc-space-1);
  color: var(--arc-foreground);
  font-size: var(--arc-text-title);
  font-weight: var(--arc-weight-strong);
  letter-spacing: -0.01em;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pane-sub {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content .cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content > section .card {
  margin: 0;
  padding: var(--arc-space-6) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--arc-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content > section > .card + .card,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content > section > .cards + .card { margin-top: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content .card-head {
  margin-bottom: var(--arc-space-4);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content .card-head h3 {
  margin: 0 0 var(--arc-space-1);
  color: var(--arc-foreground);
  font-size: var(--arc-text-md);
  font-weight: var(--arc-weight-strong);
  letter-spacing: var(--arc-tracking);
  text-transform: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content .card-head p {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
}
/* The danger zone is a group like the others; its title carries the status. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content .card-danger {
  border-top-color: color-mix(in srgb, var(--arc-danger) 40%, transparent) !important;
  background: transparent !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-content .card-danger .card-head h3 { color: var(--arc-danger); }

/* ---- Form rows on a 4px grid ------------------------------------------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .form-grid {
  gap: var(--arc-space-4) var(--arc-space-4);
  max-width: 640px;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .field { gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .field-label {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
  text-transform: none;
  letter-spacing: var(--arc-tracking);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .field-hint {
  margin-top: calc(var(--arc-space-1) * -1);
  color: var(--arc-text-muted);
  font-size: var(--arc-text-xs);
  line-height: 1.45;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .field .oc-field__msg { margin-top: calc(var(--arc-space-2) * -1); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .form-actions {
  gap: var(--arc-space-2);
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .prefs-grid { gap: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pref-row {
  gap: var(--arc-space-6);
  min-height: 56px;
  padding: var(--arc-space-3) 0;
  border-bottom: 1px solid var(--arc-border-subtle);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pref-row:last-child { border-bottom: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pref-label h4 {
  margin: 0 0 2px;
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
  text-transform: none;
  letter-spacing: var(--arc-tracking);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pref-label p {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-xs);
  line-height: 1.45;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .pref-control button.oc-select { min-width: 200px; }
/* Staged save: a plain row that stays in view, no panel around it. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .prefs-save-bar {
  gap: var(--arc-space-2);
  padding: var(--arc-space-2) 0;
  margin-bottom: var(--arc-space-2);
  border: 0 !important;
  border-bottom: 1px solid var(--arc-border-subtle) !important;
  border-radius: 0 !important;
  background: var(--arc-background) !important;
  box-shadow: none !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .form-status { font-size: var(--arc-text-xs); }

/* ======================================================================
   Admin pages
   ====================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.au-shell, .ao-shell, .ab-shell, .ac-shell, .tk-shell, .hm-shell, .ap-shell, .rl-shell, .ar-shell) > h1 {
  margin: 0 0 var(--arc-space-1);
  color: var(--arc-foreground);
  font-size: var(--arc-text-title);
  font-weight: var(--arc-weight-strong);
  letter-spacing: -0.01em;
  text-transform: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.au-shell, .ao-shell, .ab-shell, .ac-shell, .tk-shell, .hm-shell, .ap-shell, .rl-shell, .ar-shell) > p.sub,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .admin-teams > .adm-explainer {
  max-width: 76ch;
  margin: 0 0 var(--arc-space-5);
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-sm) !important;
  line-height: 1.5;
}
/* The grid's frame: a card on its hairline, no resting shadow (C1). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.au-card, .ao-card, .ab-card, .ac-card, .tk-card, .hm-card, .rl-card, .ar-card) {
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-radius-card) !important;
  background: var(--arc-surface) !important;
  box-shadow: none !important;
}

/* ---- Data grids ---------------------------------------------------------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(table.au-tbl, table.ao-tbl, table.ab-tbl, table.ac-tbl, table.tk-tbl, table.hb-tbl, table.hm-tbl, table.rl-tbl, table.ar-tbl) {
  border-collapse: collapse;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  font-variant-numeric: tabular-nums;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(table.au-tbl, table.ao-tbl, table.ab-tbl, table.ac-tbl, table.tk-tbl, table.hb-tbl, table.hm-tbl, table.rl-tbl, table.ar-tbl) th {
  height: var(--arc-row);
  padding: 0 var(--arc-space-2);
  border-bottom: 1px solid var(--arc-border) !important;
  background: transparent !important;
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-xs) !important;
  font-weight: var(--arc-weight-strong) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  vertical-align: middle;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(table.au-tbl, table.ao-tbl, table.ab-tbl, table.ac-tbl, table.tk-tbl, table.hb-tbl, table.hm-tbl, table.rl-tbl, table.ar-tbl) td {
  height: var(--arc-row);
  padding: 2px var(--arc-space-2);
  border-bottom: 1px solid var(--arc-border-subtle) !important;
  vertical-align: middle;
  transition: background-color var(--arc-dur-instant) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(table.au-tbl, table.ao-tbl, table.ab-tbl, table.ac-tbl, table.tk-tbl, table.hb-tbl, table.hm-tbl, table.rl-tbl, table.ar-tbl) tbody tr:last-child td { border-bottom: 0 !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(table.au-tbl, table.ao-tbl, table.ab-tbl, table.ac-tbl, table.tk-tbl, table.hb-tbl, table.hm-tbl, table.rl-tbl, table.ar-tbl) tbody tr:hover { background: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(table.au-tbl, table.ao-tbl, table.ab-tbl, table.ac-tbl, table.tk-tbl, table.hb-tbl, table.hm-tbl, table.rl-tbl, table.ar-tbl) tbody tr:hover > td { background: var(--arc-hover) !important; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) table.au-tbl .au-row.dirty > td { background: var(--arc-accent-subtle) !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) table.au-tbl .au-av { width: 24px; height: 24px; font-size: var(--arc-text-xs); font-weight: var(--arc-weight-strong); border-color: var(--arc-border); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) table.au-tbl .au-row .uname { color: var(--arc-foreground); font-size: var(--arc-text-sm); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) table.au-tbl .au-row .dname { color: var(--arc-text-muted); font-size: var(--arc-text-xs); }

/* ---- Confirm sheet (OceanusSheet.confirm) -------------------------------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-confirm .oc-sheet__panel.oc-confirm__panel {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 32px);
  overflow: auto;
  gap: var(--arc-space-4);
  padding: var(--arc-space-5);
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-radius-sheet) !important;
  background: var(--arc-surface-raised) !important;
  box-shadow: var(--arc-shadow-floating) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translate(-50%, -50%);
  animation: oc-confirm-in var(--arc-dur) var(--arc-ease-enter) both;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-confirm.is-leaving .oc-sheet__panel.oc-confirm__panel {
  animation: oc-confirm-out var(--arc-dur-exit) var(--arc-ease-exit) both;
}
.oc-confirm.is-leaving .oc-sheet__backdrop { opacity: 0; transition: opacity var(--arc-dur-exit) var(--arc-ease-exit); }
@keyframes oc-confirm-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.97); } }
@keyframes oc-confirm-out { to { opacity: 0; transform: translate(-50%, calc(-50% + 4px)) scale(.98); } }
.oc-confirm__title {
  margin: 0;
  color: var(--arc-foreground);
  font-size: var(--arc-text-lg);
  font-weight: var(--arc-weight-strong);
  letter-spacing: -0.01em;
}
.oc-confirm__msg {
  margin: 0;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.oc-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--arc-space-2);
  margin-top: var(--arc-space-1);
}
@media (max-width: 560px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-confirm .oc-sheet__panel.oc-confirm__panel {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: var(--arc-radius-sheet) var(--arc-radius-sheet) 0 0 !important;
    right: 0;
    transform: none;
    border-bottom: 0 !important;
    padding-bottom: max(var(--arc-space-5), env(safe-area-inset-bottom));
    animation-name: oc-confirm-up;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-confirm.is-leaving .oc-sheet__panel.oc-confirm__panel { animation-name: oc-confirm-down; }
  .oc-confirm__actions > * { flex: 1 1 0; min-height: var(--arc-control-touch); }
}
@keyframes oc-confirm-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes oc-confirm-down { to { transform: translateY(16px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .settings-nav .st-glide, .settings-nav .st-glide.is-moving,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .settings-shell .settings-nav-btn { transition: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-confirm .oc-sheet__panel.oc-confirm__panel,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-confirm.is-leaving .oc-sheet__panel.oc-confirm__panel { animation: none; }
}