/* Settings: the sections as tabs under the title at every width (ui.js tabs, as a run's), the settings as rows on
   hairlines under a rule of ink with the save bar under them while there are edits, the invite, token and session
   tables, and the coding-tool steps (styles.css .steps). Every rule is under the page, so nothing here reaches another
   page; the one rule for a dialog (which sits outside the page) is under its own class, .settings-days. Tokens from
   styles.css only. */

/* min-width 0: in the page's own grid, the tables' full width would otherwise widen the page past a phone */
.page[data-page="settings"] .settings-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; align-content: start; margin-top: -6px; }
.page[data-page="settings"] .settings-main > .page-sub { margin-top: 0; }
/* the first group under the tabs opens on their own rule, with no rule of ink of its own; a notice there (what this
   session may not do) the same */
.page[data-page="settings"] .settings-access > :nth-child(1 of :not([hidden])) { border-top: 0; }
.page[data-page="settings"] .settings-main > .notice:first-child { border-top: 0; padding-top: 0; }

/* the settings: one row each, its name (the checkbox that turns it on hanging before it, in a gutter every row keeps,
   so the names line up), its sentence under it, its fields under them, a setting that is one choice among them */
.page[data-page="settings"] .setting {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px 32px; padding: 16px 0;
}
.page[data-page="settings"] .setting + .setting { border-top: 1px solid var(--rule); }
.page[data-page="settings"] .setting-main { display: grid; gap: 3px; min-width: 0; padding-left: 26px; }
.page[data-page="settings"] .setting-head { position: relative; display: flex; align-items: center; min-height: 20px; }
.page[data-page="settings"] .setting-check { position: absolute; left: -26px; top: 50%; margin-top: -7.5px; cursor: pointer; }
.page[data-page="settings"] .setting-name { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.page[data-page="settings"] .setting-name label { cursor: pointer; }
.page[data-page="settings"] .setting-check:disabled + .setting-name label { cursor: default; }
.page[data-page="settings"] .setting-about { color: var(--ink-2); max-width: 72ch; line-height: 1.5; }
/* a setting's fields: their labels in the label cut, each number a short line with its unit after it; they start on
   the name's edge, under the policy they belong to */
.page[data-page="settings"] .setting-fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 32px; padding-left: 26px; }
.page[data-page="settings"] .setting-fields .field { gap: 2px; }
.page[data-page="settings"] .setting-fields .field > label {
  font-size: 12.5px; font-weight: 500; font-stretch: var(--label-stretch); color: var(--ink-3);
}
.page[data-page="settings"] .setting-fields .field > label .muted { color: var(--ink-3); }
.page[data-page="settings"] .setting-fields select { width: auto; min-width: 168px; }
.page[data-page="settings"] .setting-fields .unit-input input { width: 88px; }
.page[data-page="settings"] .setting-wide { flex: 1 1 100%; max-width: 480px; }
.page[data-page="settings"] .setting-fields .check:has(input:disabled) { cursor: default; color: var(--ink-3); }

/* the save bar: under the settings while there is something to save, held at the bottom of the screen */
.page[data-page="settings"] .settings-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: sticky; bottom: 16px; z-index: 5; padding: 10px 10px 10px 16px;
  border: 1px solid var(--rule-2); border-radius: var(--radius-float); background: var(--raised); box-shadow: var(--shadow);
}
.page[data-page="settings"] .settings-bar-text { color: var(--ink); font-weight: 550; font-variant-numeric: tabular-nums; }
/* the controller's refusal of a save, beside Save until the next save, Undo or edit */
.page[data-page="settings"] .settings-bar > .notice { flex: 1 1 100%; border-top: 0; padding-top: 2px; }

/* access: a panel per kind of credential (tokens, sessions): its title and its one action on the rule of ink, a
   note, its table */
.page[data-page="settings"] .settings-access { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; min-width: 0; }
.page[data-page="settings"] .settings-group { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.page[data-page="settings"] .settings-group > .panel-head { align-items: center; }
.page[data-page="settings"] .settings-group > .note { margin: -2px 0 12px; }
/* an empty table's sentence follows the note: the group's own rule of ink is above its title already */
.page[data-page="settings"] .settings-group .table-empty { border-top: 0; padding-top: 0; }
.page[data-page="settings"] .settings-cell-action { text-align: right; width: 1%; }
/* the Invite dialog (outside the page): how long the link lasts, its words starting on the fields' edge */
.dialog .settings-days .segmented { margin-left: -8px; }

/* this browser's own session: said in words after its name */
.page[data-page="settings"] .settings-this {
  margin-left: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-stretch: var(--label-stretch);
}

/* agents: the console's steps (styles.css .steps); the token's way in one line under them; then what the tools do,
   each tool's names, what it does and the access it takes, a row each */
.page[data-page="settings"] .agents-token { margin-top: -4px; }
.page[data-page="settings"] .agents-token .btn-link { font-size: inherit; font-weight: 550; color: var(--ink-2); }
.page[data-page="settings"] .agents-tools { display: grid; font-size: 13.5px; }
.page[data-page="settings"] .agents-tool {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 10rem; column-gap: 24px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule); line-height: 1.5;
}
.page[data-page="settings"] .agents-tool:last-child { border-bottom: 0; }
.page[data-page="settings"] .agents-names code { font-size: 12.5px; }
.page[data-page="settings"] .agents-does { color: var(--ink-2); }
.page[data-page="settings"] .agents-access { color: var(--ink-3); font-size: 12.5px; text-align: right; }

@media (max-width: 599px) {
  /* the tools read down the page: each tool's names, then what it does and its access under them */
  .page[data-page="settings"] .agents-tool { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .page[data-page="settings"] .agents-access { text-align: left; }
  .page[data-page="settings"] .setting { gap: 12px 20px; }
  .page[data-page="settings"] .setting-fields { gap: 12px 24px; }
  .page[data-page="settings"] .setting-fields select, .page[data-page="settings"] .setting-fields .pick { min-width: 0; width: 100%; }
  .page[data-page="settings"] .setting-fields .field:has(select) { flex: 1 1 100%; }
}

/* Account details and deletion actions use the console's existing type and hairlines. */
.page[data-page="settings"] .personal-account { display: grid; gap: 32px; min-width: 0; max-width: 860px; }
.page[data-page="settings"] .personal-group { display: grid; gap: 18px; min-width: 0; }
.page[data-page="settings"] .personal-group-head { display: grid; gap: 5px; border-top: 1px solid var(--rule-2); padding-top: 15px; }
.page[data-page="settings"] .personal-group-head h2 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.page[data-page="settings"] .personal-group-head .note { max-width: 70ch; }
.page[data-page="settings"] .personal-group > .btn { justify-self: start; }
.page[data-page="settings"] .personal-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px 18px; }
.page[data-page="settings"] .personal-facts dt { color: var(--ink-3); font-size: 13px; }
.page[data-page="settings"] .personal-facts dd { overflow-wrap: anywhere; }
.page[data-page="settings"] .personal-account-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media (max-width: 599px) {
  .page[data-page="settings"] .personal-facts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .page[data-page="settings"] .personal-facts dd + dt { margin-top: 12px; }
}