/* GOAT Path · Settings control deck · 2026.10.05.0006
   Dedicated settings surface: substantial UI concern, kept separate from the global visual system.
   All selectors are scoped to #v-data / .settings-surface so no other screen can drift. */

#v-data{--set-gap:10px}
#v-data .subtabs{
  max-width:680px;margin:0 auto 14px;padding:4px;gap:4px;
  border:1px solid var(--line);border-radius:17px;background:var(--glass2);
  -webkit-backdrop-filter:saturate(160%) blur(22px);backdrop-filter:saturate(160%) blur(22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 28px -22px rgba(0,0,0,.35)
}
#v-data .subtab{
  min-height:44px;padding:6px 10px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;opacity:.72
}
#v-data .subtab.on{
  opacity:1;background:var(--acc);color:#fff;
  box-shadow:0 8px 18px -10px var(--accGlow)
}
#v-data .subtab .st-main{font:700 13px/1 var(--disp)}

.settings-surface{
  position:relative;isolation:isolate;max-width:900px;margin:0 auto;padding-bottom:4px
}
.settings-surface:before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(680px,90%);height:180px;left:50%;top:-44px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--accT14),transparent 68%);
  filter:blur(28px);opacity:.65
}
.settings-surface>.bento{display:flex;flex-direction:column;gap:10px}
.settings-fold{
  position:relative;isolation:isolate;width:100%;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;background:var(--glass2);
  -webkit-backdrop-filter:saturate(155%) blur(22px);backdrop-filter:saturate(155%) blur(22px);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 32px -24px rgba(0,0,0,.4);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.settings-fold[open]{
  border-color:var(--accT22);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 38px -25px var(--accGlow)
}
.settings-fold-summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:11px;
  min-height:54px;padding:10px 15px;cursor:pointer;color:var(--ink);
  user-select:none;-webkit-user-select:none
}
.settings-fold-summary::-webkit-details-marker{display:none}
.settings-fold-summary:before{
  content:"";width:7px;height:7px;border-radius:999px;background:var(--mut);
  opacity:.45;flex:none;box-shadow:0 0 0 5px var(--soft2)
}
.settings-fold[open]>.settings-fold-summary:before{
  background:var(--acc);opacity:1;box-shadow:0 0 0 5px var(--accT14)
}
.settings-fold-title{font:700 14px/1.2 var(--disp);letter-spacing:-.01em;flex:1}
.settings-fold-chev{
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:999px;background:var(--soft2);color:var(--mut);
  font:700 15px/1 var(--body);transform:rotate(0deg);
  transition:transform .18s ease,background .18s ease,color .18s ease
}
.settings-fold[open]>.settings-fold-summary .settings-fold-chev{
  transform:rotate(180deg);background:var(--accSoft);color:var(--ink)
}
.settings-fold-summary:focus-visible{outline:2px solid var(--acc);outline-offset:-3px;border-radius:16px}
.settings-fold-body{padding:14px 15px 15px;border-top:1px solid var(--line);animation:setReveal .18s ease both}
@keyframes setReveal{from{opacity:.35;transform:translateY(-3px)}to{opacity:1;transform:none}}

.settings-surface .seg{padding:3px;gap:2px;border:1px solid var(--line);border-radius:12px;background:var(--soft2)}
.settings-surface .seg button{min-height:42px;padding:6px 8px;border-radius:9px;font-size:12px}
.settings-surface .seg button.on{box-shadow:0 2px 7px rgba(0,0,0,.09)}
.settings-surface .btn{min-height:42px;padding:7px 11px;border-radius:12px;font-size:12.5px;box-shadow:none}
.settings-surface .btn:hover{transform:none;filter:brightness(1.03)}
.settings-surface .btn.pri{box-shadow:0 8px 18px -12px var(--accGlow)}
.settings-surface .btn.sm{min-height:38px;padding:6px 10px;font-size:11.5px}
.settings-surface input:not([type=range]):not([type=checkbox]),
.settings-surface select,.settings-surface textarea{min-height:42px;padding:8px 10px;border-radius:11px}
.settings-surface label.f{font-size:9.5px;margin-bottom:4px;letter-spacing:.08em}
.settings-surface .sp{height:8px}
.settings-surface .hr{margin:10px 0}
.settings-surface .kicker{margin-bottom:8px}

/* Profile: guided setup becomes a quiet utility pill; accordions carry the hierarchy. */
.settings-profile>.row{justify-content:flex-end!important;margin:0 0 9px!important}
.settings-profile>.row .btn{min-height:38px;padding:6px 12px;border-radius:999px;font-size:11.5px}

/* Account: password lives inside Cloud sync as a compact sub-panel. */
.settings-password-slot{
  margin-top:11px;padding:11px;border:1px solid var(--line);
  border-radius:13px;background:var(--soft2)
}
.settings-password-slot>.card{
  padding:0;background:transparent;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;animation:none
}
#authPasswordTitle{font:700 12.5px var(--disp);margin-bottom:8px!important}
#authPasswordMsg:empty{display:none}
#syncMsg{
  display:inline-flex!important;align-items:center;min-height:26px;
  margin-top:9px!important;padding:4px 8px;border:1px solid var(--line);
  border-radius:999px;background:var(--soft2);font-size:10.5px!important;line-height:1!important
}

/* The label + choice already explain anonymous usage sharing. Remove the two lecture paragraphs. */
.settings-account .settings-fold[data-settings-key="account-0"]>.settings-fold-body>.mut:has(+ .seg){display:none}
.settings-account .settings-fold[data-settings-key="account-0"]>.settings-fold-body>.seg + .mut{display:none}

/* Imported history: retain provenance and controls, remove the essay from Settings. */
.settings-account .provcard>.mut{display:none}
.settings-account .provcard{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;
  margin-top:10px!important;padding:10px 11px!important;border:1px solid var(--line);
  border-left:1px solid var(--line);border-radius:12px;background:var(--soft2);box-shadow:none
}
.settings-account .provcard .kicker{margin:0}
.settings-account .provcard .btn{width:auto!important;min-height:36px;margin:0!important;padding:5px 9px}
.settings-account .impbatch{gap:5px}
.settings-account .impbrow{min-height:42px;padding:7px 9px}
.settings-account .impbrow .btn{min-height:34px!important;padding:5px 9px}

/* Destructive controls should be unmistakable without being visually loud. */
.settings-account .settings-fold[data-settings-key="account-2"]>.settings-fold-summary:before{
  background:var(--bad);box-shadow:0 0 0 5px var(--badSoft);opacity:1
}
.settings-account .settings-fold[data-settings-key="account-2"] .settings-fold-title{color:var(--bad)}

/* About reads as system metadata rather than another prose card. */
.settings-app .settings-fold[data-settings-key="app-2"] .settings-fold-body>.mut:first-child{
  font-family:var(--mono);font-size:11.5px
}

@media(max-width:699px){
  #v-data .subtabs{max-width:none;margin-bottom:11px;border-radius:15px}
  #v-data .subtab{min-height:44px;padding:6px 4px}
  #v-data .subtab .st-main{font-size:12.5px}
  .settings-surface{width:100%}
  .settings-surface>.row{margin-bottom:8px!important}
  .settings-fold{border-radius:16px}
  .settings-fold-summary{min-height:52px;padding:9px 12px}
  .settings-fold-title{font-size:13.5px}
  .settings-fold-body{padding:11px 12px 12px}
  .settings-surface .seg button{min-height:44px;padding:5px 6px;font-size:11.5px}
  .settings-surface .btn{min-height:44px;padding:7px 9px;font-size:12px}
  .settings-surface .btn.sm{min-height:40px}
  .settings-account .provcard{grid-template-columns:1fr}
  .settings-account .provcard .btn{width:100%!important}
}
@media(prefers-reduced-motion:reduce){
  .settings-fold,.settings-fold-chev{transition:none}
  .settings-fold-body{animation:none}
}