/* ---------- The two form pages: settings.html and admin.html ----------
   Everything here is a form. The rest of the app shows numbers that arrived from somewhere;
   these two pages are where somebody types something in — their own password on one, and on
   the other what other people can reach. So they are deliberately plainer: one column of
   labelled fields per card, no charts, and the destructive controls kept apart from the
   ordinary ones.

   One stylesheet for both because they are the same kind of page, and the `st-` prefix is
   from before the back office moved out of settings.html. Renaming ~200 references would
   bury a real change under a mechanical one; it means "these two", not "settings". */

.st-page { padding-bottom: 8px; }

/* ---------- tabs ---------- */
.st-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.st-tabs button {
  position: relative;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 9px 14px 8px;
  color: #5b6578;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.st-tabs button:hover { color: var(--blue); }
.st-tabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 600; }
.st-tabs button:focus-visible { outline: 2px solid #bed2ff; outline-offset: -2px; }

.st-tabpanel:focus-visible { outline: none; }

/* ---------- cards ---------- */
/* Two columns, counted rather than fitted. `auto-fit` with a 330px minimum made three of
   them on a 1156px workspace, and every panel here has either two cards or five — so the
   row ended one short and the cards stopped two thirds of the way across, above a wide card
   that ran the whole width. Ragged on the right for no reason anybody could act on. The gap
   is the app's 13px, which this had at 10. */
.st-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px; }
.st-card { padding: 16px 18px 18px; }
.st-card-wide { grid-column: 1 / -1; }
.st-card h2 { margin: 0; font-size: 16.5px; }
.st-subhead { margin-top: 18px !important; }
.st-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.st-hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.st-hint code { border-radius: 4px; background: #f1f4f9; padding: 1px 5px; font-size: 12px; }

/* ---------- fields ---------- */
.st-form { display: grid; gap: 12px; margin-top: 14px; }
.st-form-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.st-field { display: grid; gap: 5px; min-width: 0; }
.st-field > span { color: #505a6d; font-size: 13px; }
.st-field small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.st-field input[type="text"], .st-field input[type="email"], .st-field input[type="password"],
.st-field input[type="number"], .st-field select {
  width: 100%;
  height: 36px;
  border: 1px solid #dde3ec;
  border-radius: 7px;
  background: #fff;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
}
.st-field input:focus, .st-field select:focus { outline: 2px solid #bed2ff; outline-offset: -1px; border-color: var(--blue); }
.st-field input:disabled { background: #f6f8fb; color: #7b8495; }
.st-field input[type="number"] { text-align: right; }

.st-password-row { display: flex; gap: 8px; }
.st-password-row input { flex: 1; min-width: 0; }
.st-inline-btn { width: auto; padding: 0 14px; }

.st-fieldset { display: grid; gap: 8px; border: 0; margin: 14px 0 0; padding: 0; }
.st-fieldset legend { padding: 0; color: #505a6d; font-size: 13px; }
.st-fieldset label { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.st-fieldset input[type="radio"], .st-fieldset input[type="checkbox"] { margin: 0; accent-color: var(--blue); }
.st-inline { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.st-fieldset label.st-disabled { color: #a7aebc; cursor: not-allowed; }

.st-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.st-actions .primary-btn { width: auto; padding: 0 18px; }
.st-form-row .st-actions, .st-form-row .st-error { grid-column: 1 / -1; }

.st-add { display: flex; width: auto; align-items: center; gap: 7px; padding: 0 14px; white-space: nowrap; }
.st-add svg { width: 15px; height: 15px; }
.st-link-btn { margin-top: 14px; }

.st-error { margin: 0; border-radius: 7px; background: #fff2f2; color: #b3242d; padding: 8px 11px; font-size: 13px; line-height: 1.5; }
.st-wide-error { margin-top: 10px; }
.st-saved { margin: 10px 0 0; color: var(--green); font-size: 13px; }
/* Not an error: the setting saved, it just cannot reach anybody yet. */
.st-warn { margin: 10px 0 0; border-radius: 7px; background: #fff8ec; color: #8a5a10; padding: 8px 11px; font-size: 13px; line-height: 1.5; }
.st-readonly { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; border-radius: 7px; background: #fff7ec; color: #94601c; padding: 9px 12px; font-size: 13px; }
.st-readonly svg { width: 15px; height: 15px; flex: none; }
.st-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- lists of plain facts ---------- */
.st-facts, .st-account-list, .st-todo { margin: 14px 0 0; padding: 0; list-style: none; }
.st-facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-soft); padding: 8px 0; font-size: 13.5px; }
.st-facts li:last-child { border-bottom: 0; }
.st-facts span { color: var(--muted); }
.st-facts strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.st-facts strong[data-tone="bad"] { color: var(--red); }
.st-facts strong[data-tone="warn"] { color: var(--orange); }
.st-facts strong[data-tone="ok"] { color: var(--green); }

.st-account-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); padding: 9px 0; font-size: 14px; }
.st-account-list li:last-child { border-bottom: 0; }
.st-account-list small { color: var(--muted); font-size: 12px; }

.st-todo { list-style: disc; padding-left: 20px; }
.st-todo li { padding: 4px 0; color: #4b5468; font-size: 13.5px; }
.st-todo code { border-radius: 4px; background: #f1f4f9; padding: 1px 5px; font-size: 12px; }

/* ---------- the pages the ads run from (admin.html only) ----------
   These lived in styles.css as `st-page` until 2026-09-07, next to a `st-page` that means
   the whole page on this file and on settings.html. One row of one list therefore handed
   both pages `display: flex`, a border and a radius: the tabs lay down beside the cards,
   inside a frame, and every card was squeezed into what was left. Named for the page that
   owns it — the same `ax` its ids use — and kept in the stylesheet that page loads. */
.ax-page-list { display: grid; gap: 9px; margin: 11px 0 0; }
.ax-page-account { font-size: 12px; color: var(--muted); }
.ax-page {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 11px;
}
.ax-page img, .ax-page .page-blank { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
/* The chip on the overview gives its own blank a background; this one was inheriting only a
   size, so a page with no picture left a 34px hole. */
.ax-page .page-blank { background: var(--line-soft); }
.ax-page-id { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; color: var(--muted); }
.ax-page-ads { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.ax-page input { width: 220px; height: 32px; font-size: 13px; }

/* ---------- the user table ----------
   Scrolls inside its own box rather than pushing the page sideways: the account column
   holds a chip per grant and the owner has six of them. */
.st-table-wrap { overflow-x: auto; margin-top: 4px; }
.st-table { min-width: 720px; margin-top: 10px; font-size: 13.5px; }
.st-table th, .st-table td { height: auto; padding: 10px 10px 10px 0; text-align: left; white-space: normal; vertical-align: top; }
.st-table th { border-bottom: 1px solid var(--line); color: #737c8f; font-size: 11.5px; }
.st-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.st-table tbody tr:last-child { border-bottom: 0; }
.st-table td { font-weight: 400; }
.st-table .st-actions-col, .st-table td.st-row-actions { padding-right: 0; text-align: right; white-space: nowrap; }
.st-empty { color: var(--muted); padding: 18px 0 !important; text-align: center !important; }

.st-who strong { display: block; font-size: 14px; }
.st-who small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.st-you { display: inline-block; margin-left: 6px; border-radius: 5px; background: var(--blue-soft); color: var(--blue); padding: 1px 6px; font-size: 11px; font-weight: 600; }

.st-role { display: inline-block; border-radius: 6px; background: #f0f2f6; color: #4b5468; padding: 2px 9px; font-size: 12px; white-space: nowrap; }
.st-role[data-role="owner"] { background: #ecf0ff; color: #2b4fbe; }
.st-role[data-role="admin"] { background: #f3e9ff; color: #6b34ad; }

.st-chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 320px; }
.st-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 12px; }
.st-chip[data-edit="1"] { border-color: #cfe3d3; background: #f2fbf4; }
.st-chip i { font-style: normal; color: var(--green); }
.st-chip-none { color: var(--muted); font-size: 12.5px; }

.st-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.st-state[data-off] { color: var(--muted); }
.st-state[data-off] .st-dot { background: #b9c0cd; }
.st-sessions { display: block; color: var(--muted); font-size: 12px; }

.st-row-actions .st-menu { display: inline-block; }
.st-row-actions .icon-btn { width: 32px; height: 32px; }
/* Fixed, not absolute: the table scrolls sideways inside its own box, and a menu positioned
   inside a scroll container is clipped by it — invisibly, for the last row. settings.js
   places it against the viewport instead and flips it above the button when the space below
   runs out, measuring with clientWidth so the corner under a scrollbar is never the target
   (the rule docs/decisions.md sets for every popover in this app). */
.st-row-menu {
  position: fixed;
  z-index: 90;
  display: none;
  grid-auto-rows: min-content;
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(20, 32, 58, .14);
  background: #fff;
  overflow: hidden;
  text-align: left;
}
.st-row-menu.open { display: grid; }
.st-row-menu button { border: 0; background: #fff; padding: 9px 12px; text-align: left; font: inherit; font-size: 13.5px; cursor: pointer; }
.st-row-menu button:hover { color: var(--blue); background: #f5f7fb; }
.st-row-menu button.st-danger:hover { color: var(--red); background: #fff4f4; }
.st-locked { color: var(--muted); font-size: 12.5px; }

/* ---------- dialogs ---------- */
.st-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(16, 23, 37, .38); }
.st-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 70;
  display: flex;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  flex-direction: column;
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(16, 28, 54, .22);
  background: #fff;
  transform: translate(-50%, -50%);
}
.st-modal-narrow { width: min(420px, calc(100vw - 32px)); }
.st-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 14px 18px; }
.st-modal-head h2 { margin: 0; font-size: 17px; }
.st-modal-body { display: grid; gap: 13px; overflow-y: auto; padding: 16px 18px; }
.st-modal-body p { margin: 0; font-size: 14px; line-height: 1.6; }
.st-modal-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding: 12px 18px; }
.st-modal-foot .primary-btn { width: auto; padding: 0 18px; }

.st-grants { border-top: 1px solid var(--line-soft); padding-top: 13px; }
.st-grant-list { display: grid; gap: 2px; margin-top: 4px; }
.st-grant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  border-radius: 8px;
  padding: 7px 9px;
}
.st-grant:hover { background: #f7f9fc; }
.st-grant > label:first-child { flex: 1; min-width: 160px; }
.st-grant-edit { color: var(--muted); font-size: 12.5px; }
.st-grant-none { color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .st-columns { grid-template-columns: minmax(0, 1fr); }
  .st-card-head { flex-direction: column; }
  .st-add { align-self: stretch; justify-content: center; }
}

/* The shared stylesheet drops the greeting line on a narrow screen, because on the other
   pages it competes with the date range and the download button for the same row. Neither of
   these two has anything in that row, so the sentence stays and the bar is not 80px of
   nothing. */
@media (max-width: 420px) {
  body[data-page="settings"] .greeting-bar > div:first-child p,
  body[data-page="admin"] .greeting-bar > div:first-child p { display: block; }
}