/* ============================================================
   settings.css — Settings page, avatar menu, side-nav layout
============================================================ */
.st-wrap{ max-width:760px; margin:0 auto; padding-top:10px; }
.st-title{ font-family:'Sora',sans-serif; font-size:28px; font-weight:700; margin:18px 0 4px; }
.st-sub{ color:var(--ink-soft); font-size:14px; margin:0 0 22px; }
.st-card{ margin-bottom:18px; }

.st-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:14px 0; border:0; border-top:1px solid var(--line);
  background:none; color:inherit; font:inherit; text-align:left;
}
.card-head + .st-row{ border-top:0; padding-top:4px; }
.st-label{ min-width:0; }
.st-label b, .st-row > b{ display:block; font-size:14.5px; font-weight:600; }
.st-label small{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.st-muted{ color:var(--ink-soft); }

.st-group{ border-top:1px solid var(--line); padding:14px 0 0; }
.st-group > .st-row{ padding:11px 0 11px 14px; border-top:1px solid var(--line); }
.st-group > .st-row > b{ font-weight:500; }

.st-ic{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  display:grid; place-items:center; flex-shrink:0; color:var(--ink-soft);
  background:none; transition:background .2s, color .2s;
}
.st-ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.st-link{ cursor:pointer; }
.st-link:hover .st-ic, .st-btn-ic:hover{ background:var(--violet-100); color:var(--violet-600); }
.st-btn-ic{ cursor:pointer; }
.st-btn{ flex-shrink:0; }

.st-select{
  min-width:170px; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--white); color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer;
}
.seg{ display:inline-flex; padding:3px; border-radius:12px; background:var(--violet-100); border:1px solid var(--line); }
.seg button{
  border:0; background:none; padding:7px 14px; border-radius:9px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); transition:background .2s, color .2s;
}
.seg button.on{ background:var(--violet-600); color:#fff; box-shadow:0 4px 10px -4px var(--violet-600); }

.sw{
  position:relative; flex-shrink:0; width:44px; height:26px; border:0; border-radius:999px; cursor:pointer;
  background:color-mix(in srgb, var(--ink-soft) 45%, transparent); transition:background .2s;
}
.sw::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s;
}
.sw[aria-checked="true"]{ background:var(--green); }
.sw[aria-checked="true"]::after{ transform:translateX(18px); }
.sw:disabled{ opacity:.4; cursor:not-allowed; }

.st-panel{ margin:2px 0 10px; padding:12px 16px; border-radius:var(--radius-md); background:var(--violet-100); font-size:13.5px; line-height:1.6; }
.st-panel .st-row{ border-top-color:var(--line); }
.st-panel .st-row:first-child{ border-top:0; }
.st-soon{ margin-left:6px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; background:var(--amber-bg); color:var(--amber); vertical-align:1px; }

.st-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:200;
  padding:12px 18px; border-radius:14px; background:var(--violet-900); color:#fff; font-size:13.5px;
  box-shadow:0 16px 36px -12px rgba(36,26,77,.6); max-width:calc(100vw - 32px);
}

/* ---------- Font choice (Settings > Appearance) ---------- */
html[data-font="system"] :where(body, body *){ font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; }
html[data-font="serif"]  :where(body, body *){ font-family:Georgia, 'Times New Roman', serif !important; }
html[data-font="mono"]   :where(body, body *){ font-family:ui-monospace, 'Cascadia Code', Consolas, monospace !important; }

/* ---------- Side navigation (Settings > Appearance > Navigation) ---------- */
@media (min-width:721px){
  /* backdrop-filter would make the topbar the containing block of the fixed nav */
  html[data-nav="side"] .topbar{ grid-template-columns:1fr auto; -webkit-backdrop-filter:none; backdrop-filter:none; }
  html[data-nav="side"] .top-actions{ grid-column:2; }
  html[data-nav="side"] .navlinks{
    position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:40;
    flex-direction:column; padding:5px; border-radius:34px; overflow:visible;
  }
  html[data-nav="side"] .navlink{ min-width:0; width:78px; height:72px; border-radius:30px; }
  html[data-nav="side"] main{ padding-left:128px; }
}

@media (max-width:560px){
  .st-row{ flex-wrap:wrap; }
  .st-select{ width:100%; }
}