/*
 * fetcher-settings.css
 * Settings-page-only layout and motion. Full keeps the playful spring language;
 * Reserved keeps the same spatial cues with shorter, non-overshooting motion.
 */
.main{flex:1;height:100%;display:flex;overflow:hidden;}

.settings-nav{
  flex:0 0 220px;width:220px;height:100%;overflow-y:auto;
  border-right:1px solid var(--border);padding:34px 22px;
  transition:border-color var(--dur-base) var(--ease);
}
.settings-nav-head{margin-bottom:22px;}
.settings-eyebrow{display:block;font-size:11px;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:4px;}
.settings-nav-head h1{font-size:18px;font-weight:600;letter-spacing:-.01em;}
.settings-nav-list{display:flex;flex-direction:column;gap:2px;position:relative;}
.settings-nav-thumb{
  position:absolute;top:0;left:0;z-index:0;background:var(--ink);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);pointer-events:none;
  transition:transform var(--dur-base) var(--ease-bounce),width var(--dur-base) var(--ease-bounce),height var(--dur-base) var(--ease-bounce);
}
.settings-nav-item{
  display:block;width:100%;text-align:left;border:none;background:transparent;color:var(--ink-soft);
  font-family:inherit;font-size:14px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;position:relative;z-index:1;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.settings-nav-item:not([aria-current="true"]):hover{background:var(--rail);color:var(--ink);}
.settings-nav-item[aria-current="true"]{color:var(--bg);font-weight:500;}

.settings-content{flex:1;height:100%;overflow-y:auto;position:relative;padding:34px 40px 60px;}
.settings-content-inner{max-width:560px;position:relative;}
.saved-flash{
  position:absolute;top:2px;right:0;font-size:12px;color:var(--success);opacity:0;
  transition:opacity 420ms ease;pointer-events:none;display:flex;align-items:center;gap:5px;
}
.saved-flash.show{opacity:1;}

.settings-panel{display:none;}
.settings-panel.active{display:block;animation:settings-panel-in-fwd var(--dur-base) var(--ease-bounce);}
.settings-panel.active.back{animation-name:settings-panel-in-back;}
@keyframes settings-panel-in-fwd{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}
@keyframes settings-panel-in-back{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}

.field{margin-bottom:36px;}.field:last-child{margin-bottom:0;}
.field-label{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px;}
.field-copy{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-top:10px;max-width:52ch;}
.settings-seg{
  position:relative;display:flex;gap:2px;background:var(--rail);border-radius:var(--r-md);padding:4px;
  transition:background var(--dur-base) var(--ease);
}
.settings-seg .thumb{
  position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:9px;background:var(--ink);z-index:0;
  transition:transform var(--dur-base) var(--ease-bounce),width var(--dur-base) var(--ease-bounce);
}
.settings-seg-btn{
  position:relative;z-index:1;flex:1;border:none;background:transparent;border-radius:9px;padding:9px 10px;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;text-align:center;transition:color var(--dur-fast) var(--ease);
}
.settings-seg-btn:hover{color:var(--ink);}.settings-seg-btn[aria-pressed="true"]{color:var(--bg);}
.info-row{
  display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;background:var(--surface);transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.info-row-label{font-size:13.5px;color:var(--ink-soft);}
.info-row-value{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--rail);padding:4px 10px;border-radius:999px;}
.preview-list{
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.preview-row{display:flex;align-items:center;gap:12px;padding:13px 14px;}.preview-row + .preview-row{border-top:1px solid var(--border);}
.preview-icon{width:32px;height:32px;border-radius:8px;flex:0 0 auto;background:var(--rail);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;}
.preview-text{min-width:0;}.preview-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 160ms var(--ease);}.preview-sub{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}

/* Reserved keeps the same interaction model but removes spring overshoot. */
html[data-motion="reserved"] .settings-nav-thumb,
html[data-motion="reserved"] .settings-seg .thumb{
  transition-duration:180ms!important;
  transition-timing-function:var(--ease)!important;
}
html[data-motion="reserved"] .settings-panel.active,
html[data-motion="reserved"] .settings-panel.active.back{
  animation-duration:180ms!important;
  animation-timing-function:var(--ease)!important;
}

/* Reduced leaves state changes readable while suppressing panel travel. */
html[data-motion="reduced"] .settings-panel.active,
html[data-motion="reduced"] .settings-panel.active.back{
  animation:settings-panel-fade 100ms linear both!important;
}
@keyframes settings-panel-fade{from{opacity:.55;}to{opacity:1;}}

@media (max-width:820px){
  .main{flex-direction:column;overflow-y:auto;}
  .settings-nav{
    width:100%;height:auto;flex:0 0 auto;overflow:visible;
    border-right:none;border-bottom:1px solid var(--border);padding:20px;
  }
  .settings-nav-list{flex-direction:row;flex-wrap:wrap;}
  .settings-content{
    width:100%;height:auto;flex:0 0 auto;overflow:visible;
    padding:24px 20px 40px;
  }
}