/* Project Maya UI - the Settings dialog: its pages in groups on the left (General, Integrations, Usage, Privacy, About), the
   open one on the right as inset groups of rows - fills, not outlines (on a phone: full screen, the list of pages first,
   each page with a way back). */

.settings { width: min(960px, 100%); height: min(720px, calc(100vh - 48px)); max-height: none; background: var(--st-bg); }
.settings > .dialog__head { padding-left: 24px; }
.settings > .dialog__head h2 { font-size: var(--st-fs-xl); letter-spacing: -.01em; margin-right: auto; }
.set-back { display: none; }
.settings__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 256px minmax(0, 1fr); }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 16px; background: transparent; overflow-y: auto; }
.set-nav__group { padding: 14px 10px 4px; font-size: var(--st-fs-xs); font-weight: 600; color: var(--st-ink-muted); }
.set-nav__group:first-child { padding-top: 4px; }
.set-nav__items { display: flex; flex-direction: column; gap: 2px; }
.set-nav .nav-item { position: relative; height: 40px; border-radius: var(--st-r-md); font-weight: 500; }
.set-nav .nav-item .st-icon { width: 18px; height: 18px; color: var(--st-ink-muted); }
.set-nav .nav-item[aria-current="page"] { background: var(--st-card); }
.set-nav .nav-item[aria-current="page"] .st-icon { color: var(--st-accent-text); }
.set-nav .nav-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
                                                  border-radius: 2px; background: var(--st-accent); }
.set-nav .nav-item .set-nav__chev { display: none; }
.set-body { min-height: 0; overflow-y: auto; padding: 4px 32px 40px 24px; color: var(--st-ink); }
.set-page { max-width: 660px; display: flex; flex-direction: column; gap: 22px; }
.set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.set-head__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.set-body h3 { margin: 0; font-size: var(--st-fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.set-intro { margin: 0; font-size: var(--st-fs-md); line-height: 1.45; color: var(--st-ink-muted); }
/* supporting Maya: one warm line on About; under an update its own violet-tinted row, a little larger */
.set-support { margin: 0; font-size: var(--st-fs-sm); line-height: 1.5; color: var(--st-ink-muted); }
.set-support .support-link { display: inline; font-weight: 700; color: var(--st-accent-text); }   /* (the violet accent, both themes) */
.set-note { margin: 0; padding: 12px 14px; border-radius: var(--st-r-md); background: var(--st-card); font-size: var(--st-fs-sm); color: var(--st-ink-muted); }

/* an inset group: a fill with rounded corners, its rows split by a hairline; a caption above it, a note under it */
.set-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.set-cap { padding: 0 4px; font-size: var(--st-fs-xs); font-weight: 600; color: var(--st-ink-muted); }
.set-foot-note { margin: 0; padding: 0 4px; font-size: var(--st-fs-xs); line-height: 1.4; color: var(--st-ink-muted); }
.set-group { display: flex; flex-direction: column; padding: 0 16px; border-radius: var(--st-r-lg); background: var(--st-card); min-width: 0; }
.set-group > * { border: 0 !important; margin-top: 0 !important; }
.set-group > * + * { box-shadow: inset 0 1px 0 var(--st-hair); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; padding: 12px 0; }
.set-row--top { align-items: flex-start; padding: 14px 0; }
.set-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.4; }
.set-row__text label, .set-row__label { font-size: var(--st-fs-md); font-weight: 500; }
.set-row__sub { font-size: var(--st-fs-sm); color: var(--st-ink-muted); }
.set-row__ctl { flex: none; display: flex; align-items: center; gap: 8px; }
.set-row__ctl--two { flex-wrap: wrap; justify-content: flex-end; }
.set-block { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.set-split { display: flex; justify-content: space-between; gap: 16px; font-size: var(--st-fs-md); font-weight: 500; }
.set-split b { font-weight: 600; }
.set-split--muted { font-size: var(--st-fs-xs); font-weight: 400; color: var(--st-ink-muted); }
.set-caption { font-size: var(--st-fs-xs); font-weight: 500; color: var(--st-ink-muted); }
.set-slider { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; align-items: center; gap: 16px; min-height: 56px; padding: 10px 0; }
.set-slider label { display: flex; flex-direction: column; line-height: 1.35; font-size: var(--st-fs-md); font-weight: 500; }
.set-slider label .set-row__sub { font-size: var(--st-fs-xs); font-weight: 400; }
.set-slider b { text-align: right; font-size: var(--st-fs-md); font-weight: 600; }
.set-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 14px 0; }
.set-pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }   /* (the penalties) */
.set-block--pens { gap: 12px; }
.set-group .set-block > .set-block, .set-group .set-block > label.field { padding: 0; }
.set-foot { display: flex; }
.set-body textarea { margin: 0; background: var(--st-card); }
.set-sec > label.set-cap { cursor: default; }
.set-group--keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.set-group--keys > * + * { box-shadow: none; }
.set-group--keys > :nth-child(n+3) { box-shadow: inset 0 1px 0 var(--st-hair); }
.keys__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; font-size: var(--st-fs-sm); color: var(--st-ink-soft); }
.model-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 0; }
.model-card .model-logo { background: var(--st-fill); }
.model-card > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.model-card b { font-size: var(--st-fs-base); font-weight: 600; }
.model-card span span { font-size: var(--st-fs-sm); color: var(--st-ink-muted); overflow-wrap: anywhere; }
.mcp { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.mcp__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcp__head b { font-size: var(--st-fs-base); font-weight: 600; }
.mcp__head .muted { font-size: var(--st-fs-sm); }
.mcp__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.addr { display: grid; grid-template-columns: 160px minmax(0, 1fr) 32px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; }
.addr span { font-size: var(--st-fs-md); font-weight: 500; color: var(--st-ink); }
.addr code { font-family: var(--st-font-mono); font-size: var(--st-fs-sm); color: var(--st-ink-soft); overflow-wrap: anywhere; }
.tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: var(--st-r-md); background: var(--st-fill); flex-wrap: wrap; }
.tabs__tab { height: 32px; padding: 0 12px; border: 0; border-radius: var(--st-r-sm); background: transparent; color: var(--st-ink-muted);
             font-size: var(--st-fs-sm); font-weight: 500; }
.tabs__tab:hover { color: var(--st-ink); }
.tabs__tab[aria-selected="true"] { background: var(--st-seg-on); color: var(--st-ink); box-shadow: var(--st-seg-shadow); }
.set-block .code { margin: 0; }
.set-block .code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.update { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 16px; border-radius: var(--st-r-lg); background: var(--st-card); }
.update > .st-icon { color: var(--st-ink-muted); align-self: flex-start; margin-top: 2px; }
.update--ok > .st-icon { color: var(--st-ok); }
.update--accent { background: var(--st-accent-tint); }
.update--accent > .st-icon { color: var(--st-accent-text); }
.update--danger { background: var(--st-danger-tint); color: var(--st-danger-text); }
.update--danger > .st-icon { color: var(--st-danger); }
.update__text { flex: 1 1 260px; display: flex; flex-direction: column; line-height: 1.4; font-size: var(--st-fs-sm); }
.update__text b { font-size: var(--st-fs-md); font-weight: 600; color: var(--st-ink); }
.update__text span { color: var(--st-ink-muted); }
.update--danger .update__text span, .update--danger .update__text b { color: var(--st-danger-text); }
.update__how { margin-top: 4px; }
.update__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.facts { margin: 0; display: flex; flex-direction: column; font-size: var(--st-fs-md); }
.facts__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 11px 0; }
.facts__row + .facts__row { box-shadow: inset 0 1px 0 var(--st-hair); }
.facts dt { color: var(--st-ink-muted); }
.facts dd { margin: 0; color: var(--st-ink-soft); overflow-wrap: anywhere; }
.report { margin: 0 0 14px; max-height: 360px; overflow: auto; padding: 12px 14px; border-radius: var(--st-r-md); background: var(--st-code-bg);
          color: var(--st-code-ink); font-family: var(--st-font-mono); font-size: var(--st-fs-xs); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .dialog-scrim:has(.settings) { padding: 0; }
  .settings { width: 100%; height: 100%; border-radius: 0; }
  .settings > .dialog__head { padding-left: 16px; }
  .settings__main { display: block; overflow-y: auto; }
  /* the list of pages: an inset group per group of pages, full width; a page: the list hidden, a way back in the head */
  .settings.is-list .set-body { display: none; }
  .settings:not(.is-list) .set-nav { display: none; }
  .settings:not(.is-list) .set-back { display: inline-flex; margin-left: -8px; }
  .settings:not(.is-list) .set-back .st-icon { transform: rotate(180deg); }
  .settings:not(.is-list) > .dialog__head h2 { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--st-fs-base); }
  .settings > .dialog__head { position: relative; }
  .set-nav { padding: 0 16px 32px; overflow: visible; }
  .set-nav__group { padding: 18px 4px 6px; }
  .set-nav__items { gap: 0; padding: 0 4px 0 14px; border-radius: var(--st-r-lg); background: var(--st-card); }
  .set-nav .nav-item { height: 50px; border-radius: 0; padding: 0 8px 0 0; background: transparent !important; }
  .set-nav .nav-item + .nav-item { box-shadow: inset 0 1px 0 var(--st-hair); }
  .set-nav .nav-item::before { display: none; }
  .set-nav .nav-item .set-nav__chev { display: block; color: var(--st-ink-muted); }
  .set-body { padding: 4px 16px 40px; overflow: visible; }
  .set-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .set-row__ctl { justify-content: flex-start; flex-wrap: wrap; }
  /* the choices (Theme, Presets, Thinking ...) across the whole width, their buttons equal */
  .set-row__ctl > .seg { display: flex; width: 100%; }
  .set-row__ctl > .seg button { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  /* (MiniMax's seven thinking levels: Off and Auto on the first row, its five efforts on the second - no holes) */
  .set-row__ctl > .seg--many { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); width: 100%; }
  .set-row__ctl > .seg--many button { grid-column: span 2; padding: 0 2px; }
  .set-row__ctl > .seg--many button:nth-child(-n+2) { grid-column: span 5; }
  .set-slider { grid-template-columns: minmax(0, 1fr) 56px; }
  .set-slider label { grid-column: 1 / -1; }
  .set-pair, .set-pair--3 { grid-template-columns: minmax(0, 1fr); }
  .addr { grid-template-columns: minmax(0, 1fr) 32px; gap: 2px 12px; }
  .addr span { grid-column: 1 / -1; }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .input--key { width: 100%; }
}

/* Savings: each model's API prices */
.prices { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.price { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--st-r-lg); background: var(--st-card); }
.price__head { display: flex; align-items: center; gap: 12px; }
.price__head .model-logo { border-radius: var(--st-r-sm); background: var(--st-fill); flex: none; }
.price__head > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.price__head b { font-size: var(--st-fs-base); font-weight: 600; }
.price__head span span { font-size: var(--st-fs-sm); color: var(--st-ink-muted); }
.price__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.price__in { display: flex; align-items: center; gap: 6px; }
.price__in > span { flex: none; font-size: var(--st-fs-sm); color: var(--st-ink-muted); }
.price__in .input--num { width: 100%; min-width: 0; }
.price__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--st-fs-xs); color: var(--st-ink-muted); }
.price__foot > span { flex: 1 1 200px; line-height: 1.4; }