/* Settings (#/settings): screen-only styles (D88).
   Owned by the settings screen builder. Rules: tokens only (no raw hex; colours
   come from var(--…) or color-mix of them), prefix every selector with the
   screen class .scr-settings (set it on your outermost wrapper) so nothing leaks
   into other screens, and reuse the components in style.css before adding new
   ones. Breakpoint: max-width 640px is the phone.

   Layout: the classic settings page. On a wide screen each section is two
   columns, its title and one-line description on the left and the panel on
   the right, so a short panel never stretches across 1,100 px of empty width.
   Under 960 px the title sits above the panel like every other screen. */

/* ======================================================================= two-column sections */
.scr-settings .set-sec { margin-top: var(--s6); }
.scr-settings .page-head + .set-sec { margin-top: 0; }
@media (min-width: 961px) {
  .scr-settings .set-sec { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: var(--s7);
    align-items: start; }
  .scr-settings .set-sec > .section-head { display: block; margin: 0; padding-top: var(--s4); }
  .scr-settings .set-sec .section-desc { font-size: var(--fs-small); margin-top: var(--s1); max-width: 30ch; }
}
.scr-settings .set-sec .section-desc { max-width: 68ch; }
.scr-settings .set-sec > .panel { min-width: 0; }

/* shared bits inside the panels */
.scr-settings .set-h3 { font-size: var(--fs-body); font-weight: 600; margin: 0 0 var(--s2); }
.scr-settings .set-note { margin: var(--s3) 0 0; color: var(--text-2); font-size: var(--fs-small); max-width: 68ch; }
.scr-settings .set-sub { display: block; margin-top: 2px; color: var(--text-2); font-size: var(--fs-small); }
.scr-settings .set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.scr-settings .panel > .set-actions, .scr-settings .dl + .set-actions,
.scr-settings .radio-cards + .set-actions { margin-top: var(--s4); }
.scr-settings .set-actions > .t2 { flex: 1 1 16rem; min-width: 0; }
.scr-settings .dl dd { max-width: 68ch; }
@media (min-width: 641px) {
  .scr-settings .dl-row { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); }
}
.scr-settings .dl dd .status { vertical-align: -1px; }

/* ======================================================================= trading mode */
.scr-settings .set-real { margin-top: var(--s4); display: grid; gap: var(--s4);
  border-left: 3px solid color-mix(in srgb, var(--down) 70%, transparent); }
.scr-settings .set-real-k { margin: 0 0 var(--s2); font-weight: 600; }
.scr-settings #mode-typed { max-width: 100%; }
.scr-settings #settings-wallet { min-width: 0; }

/* ======================================================================= stop switch */
.scr-settings .set-stop-state { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4);
  flex-wrap: wrap; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.scr-settings .set-stop-now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); min-width: 0; }
.scr-settings .set-stop-now .status { font-weight: 600; }
.scr-settings .set-stop-now .sdot { align-self: center; }
.scr-settings .set-stop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6);
  margin-top: var(--s4); }
.scr-settings .set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.scr-settings .set-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start;
  color: var(--text); }
.scr-settings .set-list .ico { margin-top: 3px; color: var(--text-3); }
@media (max-width: 760px) {
  .scr-settings .set-stop-grid { grid-template-columns: 1fr; }
}

/* ======================================================================= AI budget */
.scr-settings .set-bars { display: grid; gap: var(--s4); }
.scr-settings .set-bars .pbar-head { font-size: var(--fs-body); color: var(--text); }
.scr-settings .set-bars .pbar-val { font-weight: 600; }
.scr-settings .set-bars .pbar { height: 10px; }
.scr-settings #set-budget .notice { margin-bottom: var(--s4); }
.scr-settings #set-budget .dl { margin-top: var(--s4); border-top: 1px solid var(--line); }
.scr-settings #set-budget .dl-row:first-child { border-top: 0; }

/* ======================================================================= AI model */
.scr-settings .rc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.scr-settings .set-model-id { color: var(--text-2); font-size: var(--fs-micro); }

/* ======================================================================= wallet rules */
.scr-settings #set-rules .dl dd b { font-weight: 600; }
.scr-settings .set-more-fold { margin-top: var(--s3); }
.scr-settings .set-more { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: var(--s2); color: var(--text-2); max-width: 68ch; }
.scr-settings .set-more li::marker { color: var(--text-3); }

/* ======================================================================= recent simulation costs */
.scr-settings #set-costs .row { min-height: 48px; }
.scr-settings #set-costs .row-key { font-weight: 600; }
.scr-settings #set-costs .row-key-sub:empty { display: none; }
.scr-settings .set-unit { display: none; }
@media (max-width: 640px) {
  .scr-settings .set-unit { display: inline; }
}

/* ======================================================================= technical details */
.scr-settings .set-tech { margin-top: var(--s7); }
.scr-settings .set-tech .set-h3 { margin-top: var(--s5); }
.scr-settings .set-tech .fold-body > .set-h3:first-child { margin-top: var(--s2); }
.scr-settings .set-env-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s2)); }
.scr-settings .set-env { width: 100%; min-width: 620px; border-collapse: collapse; }
.scr-settings .set-env th, .scr-settings .set-env td { padding: 8px var(--s2); font-size: var(--fs-small); vertical-align: top; }
.scr-settings .set-env td:first-child { white-space: nowrap; }
.scr-settings .set-env td:nth-child(2) { white-space: nowrap; color: var(--text); }
.scr-settings .set-env code { font-size: 12px; }

@media (max-width: 640px) {
  .scr-settings .set-sec { margin-top: var(--s6); }
  .scr-settings .set-tech { margin-top: var(--s6); }
  .scr-settings .set-actions > .btn { flex: none; }
  .scr-settings #mode-typed { width: 100% !important; }
  .scr-settings .set-actions > .input { flex: 1 1 100%; }
}