/* ============================================================
   Stocky — Settings (/settings)
   Layered on colors_and_type.css + components.css + dashboard.css
   (the island chrome, .term chat popover, modals, toasts all come
   from there). This file composes the four settings sections from
   the component layer: .input / .switch / .btn / .callout / .modal
   / .badge / .meter / .skel. No new colors or radii are invented.
   ============================================================ */

/* breadcrumb (mirrors the stock-detail crumb). Baseline-align so the Fira Code
   links and the Berkeley Mono current-page bold sit on one line. */
.sd-crumbs { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--text-muted); margin: 2px 0 14px; }
.sd-crumbs a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.sd-crumbs a:hover { color: var(--color-signal); }
.sd-crumbs .sep { color: var(--border-strong); }
.sd-crumbs b { font-family: var(--font-display); color: var(--text-secondary); font-weight: 600; }

/* page title: Berkeley Mono (display) per the brand H1 rule */
.page-h h1 { font-family: var(--font-display); letter-spacing: -0.5px; }

/* buttons rendered as <a> must not inherit the editorial amber link hover */
a.btn:hover { border-bottom-color: transparent; }
a.btn--primary:hover { color: var(--bg-primary); opacity: 0.88; }
a.btn--secondary:hover { color: var(--color-signal); border-color: var(--color-signal); }
a.acct-mail { color: var(--text-secondary); }

/* cap the reading column so long settings don't sprawl on wide screens */
.set-wrap { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 32px;
  align-items: start; max-width: 920px; margin-top: 18px; }

/* ----- left section index (sticky) ----- */
.set-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.set-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: var(--radius-sm); text-decoration: none;
  font-family: var(--font-ui); font-size: 13px; color: var(--text-muted);
  border-left: 2px solid transparent; }
.set-nav__row:hover { background: var(--bg-surface); color: var(--text-secondary); }
.set-nav__row.is-active { background: var(--signal-bg); color: var(--color-signal); border-left-color: var(--color-signal); }
.set-nav__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-nav__badge { font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-sm);
  flex: none; background: var(--bg-surface); color: var(--text-muted); }
.set-nav__badge.is-on  { background: var(--data-up-bg);   color: var(--data-up); }
.set-nav__badge.is-off { background: var(--data-warn-bg); color: var(--data-warn); }

/* ----- section cards ----- */
.set-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.set-card { border: 0.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-primary); overflow: hidden; scroll-margin-top: 82px; }
.set-card__head { padding: 18px 20px 0; }
.set-card__k { font-family: var(--font-ui); font-size: 10px; letter-spacing: 1.25px;
  text-transform: uppercase; color: var(--color-signal); margin: 0 0 6px; font-weight: 600; }
.set-card__ttl { font-family: var(--font-heading); font-size: 18px; font-weight: 600;
  color: var(--text-primary); margin: 0; letter-spacing: -0.3px; }
.set-card__sub { font-family: var(--font-body); font-size: 13px; line-height: 1.6;
  color: var(--text-muted); margin: 7px 0 0; max-width: 56ch; text-wrap: pretty; }
.set-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }

/* ===== Section A — API key ===== */
.keyrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 0.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); }
.keyrow__ic { flex: none; width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--bg-primary); border: 0.5px solid var(--border-default);
  color: var(--text-muted); }
.keyrow__ic.is-ok   { background: var(--data-up-bg);   color: var(--data-up);   border-color: transparent; }
.keyrow__ic.is-warn { background: var(--data-warn-bg); color: var(--data-warn); border-color: transparent; }
.keyrow__ic.is-err  { background: var(--data-down-bg); color: var(--data-down); border-color: transparent; }
.keyrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.keyrow__line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.key-fp { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-primary);
  letter-spacing: 0; word-break: break-all; }
.keyrow__meta { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); }
.keyrow__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.keyrow__actions .btn { font-size: 12px; padding: 7px 13px; }
.key-remove, a.key-remove { color: var(--data-down); }
.key-remove:hover, a.key-remove:hover { background: var(--data-down-bg); color: var(--data-down); }

/* no-key / empty figure (shared by history empty) */
.key-fig { display: flex; align-items: flex-start; gap: 14px; padding: 6px 2px; }
.key-fig__ic { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--bg-surface); color: var(--text-muted); border: 0.5px solid var(--border-default); }
.key-fig__t { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 3px 0 4px; }
.key-fig__m { font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 50ch; }

/* add / change form */
.key-form { display: none; flex-direction: column; gap: 14px; padding: 16px;
  border: 0.5px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); }
.key-form.is-open { display: flex; }
.key-field { max-width: none; }
.key-input { font-family: var(--font-display); letter-spacing: 0; }
.key-reveal .ic-hide { display: none; }
.key-reveal[aria-pressed="true"] .ic-show { display: none; }
.key-reveal[aria-pressed="true"] .ic-hide { display: inline-flex; }
.key-form__foot { display: flex; align-items: center; gap: 8px; }
.key-result:empty { display: none; }
.key-result { display: flex; flex-direction: column; gap: 10px; }

/* token usage (cost awareness) */
.usage { border-top: 0.5px solid var(--border-default); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.usage__note { font-family: var(--font-ui); font-size: 11px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.usage__note a { color: var(--color-signal); text-decoration: none; }
.usage__note a:hover { color: var(--color-highlight); }

/* ===== Section B — notification prefs ===== */
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 0.5px solid var(--border-default); }
.pref-row:last-child { border-bottom: 0; }
.pref-row__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pref-row__t { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pref-row__d { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.pref-row .switch { flex: none; }
.pref-sub { margin-left: 16px; padding-left: 16px; border-left: 0.5px solid var(--border-default); }
.pref-sub .pref-row { padding: 11px 0; }
.pref-sub.is-muted { opacity: 0.45; pointer-events: none; }
.pref-row--future { opacity: 0.7; }
.pref-soon { font-size: 9px; letter-spacing: 0.4px; padding: 3px 7px; }

/* ===== Section C — history ===== */
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hist-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist-row__t { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-primary); }
.hist-row__d { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }
.hist-row .btn { font-size: 12.5px; }

/* ===== Section D — account / generic rows ===== */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 0.5px solid var(--border-default); }
.set-row:last-child { border-bottom: 0; }
.set-row__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-row__t { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-row__d { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--text-muted); max-width: 44ch; }
.set-row__val { font-family: var(--font-display); font-size: 13px; color: var(--text-secondary); flex: none; }
.set-row__val.acct-mail { color: var(--text-primary); font-weight: 600; }
.set-row--danger .set-row__t { color: var(--data-down); }
.set-row .btn { flex: none; font-size: 12.5px; padding: 7px 14px; }

.confirm-modal { max-width: 400px; }
/* block, not the modal's default flex-column, so inline text + <b> flow as one paragraph */
.confirm-modal .modal__body { display: block; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.confirm-modal b { font-family: var(--font-display); color: var(--text-primary); }

/* ============================================================
   RESPONSIVE — tablet / phone (graceful, mobile-correct)
   ============================================================ */
@media (max-width: 760px) {
  .set-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* index becomes a horizontal scroll strip above the cards */
  .set-nav { position: static; flex-direction: row; gap: 6px; overflow-x: auto;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .set-nav__row { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px;
    background: var(--bg-surface); border-radius: var(--radius-sm); }
  .set-nav__row.is-active { border-left: 0; border-bottom-color: var(--color-signal); }
  .set-nav__badge { display: none; }
}

@media (max-width: 640px) {
  .set-card__head { padding: 16px 15px 0; }
  .set-card__body { padding: 15px; gap: 15px; }
  .set-card__ttl { font-size: 16.5px; }

  /* key status: stack actions under the fingerprint */
  .keyrow { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .keyrow__main { flex-basis: calc(100% - 52px); }
  .keyrow__actions { width: 100%; }
  .keyrow__actions .btn { flex: 1; justify-content: center; min-height: 42px; }

  /* rows: let the control drop below the label so nothing crushes */
  .pref-row, .set-row, .hist-row { flex-wrap: wrap; }
  .set-row .btn, .hist-row .btn { min-height: 42px; }
  .set-row__val { width: 100%; }
  .key-form__foot .btn { flex: 1; justify-content: center; min-height: 44px; }
}