/* Settings: layout and rail, sections, security, low-balance alerts, the activity log.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

/* Membership and invitation facts are actual aligned tables. On small screens
   the table scrolls inside its Settings column rather than widening the page. */
.settings-layout:not(.has-nav) .set-content { max-width: 840px; }
.set-time-zone-row { align-items: center; }
.set-time-zone-editor { display: grid; gap: var(--space-8); width: min(100%, 280px); min-width: 0; }
.set-time-zone-editor [role="status"] { margin: 0; }
.set-time-zone-editor [role="status"]:empty { display: none; }
.set-time-zone-editor .btn { justify-self: start; }
/* ————— settings ————— */
/* team.js and settings.js render only .set-content, no .set-nav sibling, so
   the layout is one column — a 200px/1fr grid put that lone child in the
   unstyled 200px track instead of the content column. */
.settings-layout {
  grid-template-columns: minmax(0, 1fr);
}
/* Settings with its rail (settings.js): the rail beside a column of the page's
   sections, which keep the gap the page always had. A narrow screen puts the
   rail above as a row that wraps. */
.settings-layout.has-nav { grid-template-columns: 200px minmax(0, 1fr); }
.set-body { display: grid; gap: var(--space-32); align-content: start; min-width: 0; }
/* A narrow screen makes the rail the landing list: choosing a section opens
   it alone with a Back to Settings, and the landing shows the list alone. */
.set-back { display: none; }
@media (max-width: 900px) {
  .settings-layout.has-nav { grid-template-columns: minmax(0, 1fr); }
  .settings-layout.has-nav.is-landing .set-body { display: none; }
  .settings-layout.has-nav:not(.is-landing) .set-nav { display: none; }
  .set-back {
      display: inline-flex; align-items: center; gap: var(--space-4);
      color: var(--text-faint); font-size: var(--text-13); justify-self: start;
    }
  .set-back:hover { color: var(--text-default); }
  .set-body { gap: var(--space-20); }
}
.set-nav-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-16); }
.set-nav-group-label { font-size: var(--text-12); color: var(--text-faint); padding: 0 var(--space-10) var(--space-4); }
/* The foot of the rail: the Activity log, then Sign out last, in the rail's
   own neutral text rather than red: leaving is not a danger. */
.set-nav-foot { display: flex; flex-direction: column; gap: var(--space-2); }
.set-nav-signout { color: var(--text-subtle); border: 0; background: transparent; font: inherit; font-size: var(--text-13); cursor: pointer; }
.set-nav-signout:hover { color: var(--text-default); }
.set-nav-signout:disabled { color: var(--text-faint); cursor: default; }
.set-section-stack { display: grid; gap: var(--space-32); min-width: 0; }
.set-section { display: grid; gap: var(--space-16); min-width: 0; }
.set-section > .set-head { margin: 0; }
.set-section-body { display: grid; gap: var(--space-12); padding-inline-start: var(--space-12); min-width: 0; }
/* In the single 375px column the body sitting in from its heading only narrows it, so a phone starts both at the same edge. */
@media (max-width: 640px) { .set-section-body { padding-inline-start: 0; } }
.set-section-body.option-row { display: flex; }
.set-section-body.set-group { margin: 0; }
.set-section-body .tx-toolbar { margin-bottom: 0; }
.sec-2fa-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.sec-2fa-row > p { margin: 0; }
.sec-turn-off { color: var(--negative-text); }
.set-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); }
.set-note { color: var(--text-subtle); font-size: var(--text-13); line-height: 1.5; }
.set-note p { margin: 0; }
.set-note p + p { margin-top: var(--space-8); }
/* Email notifications: grouped, each a row with an ink switch (the checkbox
   itself, drawn as ds .switch draws one, so it stays a real input). */
.set-section-body #notif-list { display: grid; gap: var(--space-24); }
.notif-group { display: grid; }
.notif-group > .set-group-head { margin: 0 0 var(--space-4); }
.notif-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 48px;
  cursor: pointer;
  font-size: var(--text-13);
}
.notif-pref .opt-name { color: var(--text-default); }
.notif-pref .opt-detail { display: block; font-size: var(--text-12); color: var(--text-faint); margin-top: var(--space-2); }
.notif-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 34px; height: 20px;
  margin: 0;
  border-radius: 999px;
  background: var(--bg-selected);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease);
}
.notif-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-snappy);
}
.notif-switch:checked { background: var(--ink); }
.notif-switch:checked::after { transform: translateX(14px); }
.notif-switch:disabled { cursor: default; opacity: 0.5; }
.notif-switch:disabled:checked { opacity: 0.4; }
.notif-pref:has(.notif-switch:disabled) { cursor: default; }
@media (prefers-reduced-motion: reduce) { .notif-switch, .notif-switch::after { transition: none; } }
.set-section-body > .btn { justify-self: start; }
.set-section-body .hint:empty, .set-section-body [role="status"]:empty { display: none; }
@media (max-width: 900px) {
  .set-section-stack { gap: var(--space-24); }
}
.set-head h2 {
  font-size: var(--text-16);
}
.set-head.set-session-row { gap: var(--space-16); flex-wrap: wrap; }
.set-group-head {
  font-weight: var(--w-medium);
}
/* The Company page: a constrained column, labels in a fixed column with the
   values beside them rather than at the far end of a wide pane (R5-21). */
.set-company-page { max-width: 640px; display: grid; gap: var(--space-24); }
.set-company-page .set-head { margin-bottom: 0; }
.set-company-page .set-group { margin-bottom: 0; }
.set-company-page .set-group + .set-group { margin-top: var(--space-32); }
.set-company-page .def-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--space-16); align-items: baseline; }
.set-company-page .def-value { text-align: left; }
/* ————— security and email settings (settings.js mounts them) ————— */
/* Low balance alerts (low-balance-settings.js): a currency, what its alert is,
   and for those who move money a field to set it. */
.lb-row { padding: var(--space-12) 0; }
.lb-line .opt-name, .lb-line .opt-detail { display: block; }
.lb-line .opt-detail { font-size: var(--text-12); color: var(--text-subtle); margin-top: var(--space-2); }
.lb-form { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; margin-top: var(--space-8); }
.lb-form .input { width: auto; flex: 1 1 140px; max-width: 220px; }
.sec-session { align-items: center; flex-wrap: wrap; }
.sec-ua { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-12); }
.sec-session-detail { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
/* On a phone a session is the device, then when, one under the other. */
@media (max-width: 640px) {
  .sec-session { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .sec-session .sec-ua { font-size: var(--text-13); color: var(--text-default); }
  .sec-session-detail { font-size: var(--text-12); color: var(--text-subtle); text-align: left; }
}
.sec-qr { width: 176px; margin-bottom: var(--space-16); }
.sec-qr .qr { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.sec-manual { margin-bottom: var(--space-16); }
.sec-secret { display: inline-block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-13); overflow-wrap: anywhere; user-select: all; }
.sec-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-24); margin: var(--space-16) 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--text-13); }
.sec-code-actions { display: flex; gap: var(--space-8); flex-wrap: wrap; }
/* The keep-them buttons and what happened ("Copied.") share one .set-actions row, the primary after it. */
.sec-code-actions .hint { margin: 0; }
/* The gate's own screen: one centred column, the codes in a single bordered panel of two tight columns, the three secondary
   actions in a row, the primary under them at the column's width. */
#two-factor-required-body { width: 100%; max-width: 46ch; display: flex; flex-direction: column; gap: var(--space-16); }
#two-factor-required-body .sec-recovery-codes { grid-template-columns: repeat(2, max-content); justify-content: center; gap: var(--space-8) var(--space-24); margin: 0; padding: var(--space-16) var(--space-24); border: 1px solid var(--border-faint); border-radius: var(--r-card); }
#two-factor-required-body .sec-code-actions { flex-direction: column; align-items: stretch; gap: var(--space-12); }
#two-factor-required-body .set-actions { justify-content: center; }
#two-factor-required-body #sec-codes-done { width: 100%; justify-content: center; }
#two-factor-required-body .sec-qr { margin-inline: auto; }
/* On a phone the three buttons wrap, and what happened stays beside Copy rather than wrapping after Print. */
@media (max-width: 640px) {
  #two-factor-required-body #sec-codes-copy { order: -2; }
  #two-factor-required-body #sec-codes-status { order: -1; }
}
#sec-two-factor form .btn, #sec-two-factor > .set-group > .btn { margin-right: var(--space-8); }
/* The activity log (activity.js): its short intro, the export period and Load more. */
.act-intro { margin-bottom: var(--space-16); }
.act-export-range { margin-bottom: var(--space-16); }
.act-more { padding: var(--space-16) 0; text-align: center; }
.act-row { grid-template-columns: minmax(170px, 1fr) minmax(160px, 1.1fr) minmax(220px, 1.8fr) 140px; column-gap: var(--space-12); }
/* Below 900px there is no room for four columns (they need about 730px plus the sidebar): each entry stacks as who and when,
   then what they did and its detail under the name. */
@media (max-width: 900px) {
  #act-table .table-header { display: none; }
  #act-table .row.act-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who when" "what what" "detail detail";
    row-gap: var(--space-2);
    padding-block: var(--space-12);
    align-items: baseline;
  }
  .act-row > .cell-main { grid-area: who; }
  .act-row > [data-act-action] { grid-area: what; padding-left: calc(var(--space-20) + var(--space-10)); color: var(--text-default); }
  .act-row > .desc { grid-area: detail; padding-left: calc(var(--space-20) + var(--space-10)); font-size: var(--text-12); color: var(--text-subtle); overflow-wrap: anywhere; }
  .act-row > .desc:empty { display: none; }
  .act-row > .act-when { grid-area: when; font-size: var(--text-12); color: var(--text-faint); white-space: nowrap; }
}