/* Settings section: the Lists group (settings-lists.js): the switcher and the engagement list.
   Uses the Settings tokens from settings-view.css and console.css; every var() carries a fallback.
   Classes are lp- (switcher) and lst- (engagement list), so nothing here restyles another view.
   Phone first: rows are full-width tap targets, and every control is at least 44px tall. */

/* The switcher: one chip per list, with its count. Only the chosen list is drawn below it. */
.st-sec[data-sec="lists-pick"]{padding:var(--s3,.75rem)}
.lp-chips{display:flex;flex-wrap:wrap;gap:var(--s2,.5rem)}
.lp-chip{min-height:44px;padding:.4rem .9rem;border-radius:var(--r-pill,99px);font:inherit;font-size:var(--fs-sm,.8125rem);font-weight:600;
  border:1px solid var(--line-strong,#bbb);background:var(--surface,#fff);color:var(--fg,#111);cursor:pointer;white-space:nowrap}
.lp-chip.on{background:var(--accent,#333);border-color:var(--accent,#333);color:var(--on-accent,var(--surface,#fff))}
.lp-chip:focus-visible{outline:2px solid var(--focus,var(--accent,#333));outline-offset:2px}
.lp-n{opacity:.72;margin-left:.15rem;font-variant-numeric:tabular-nums}

.lst-pills{display:flex;flex-wrap:wrap;gap:var(--s2,.5rem);margin-top:var(--s3,.75rem)}
.lst-pill{min-height:44px;padding:.35rem .85rem;border-radius:var(--r-pill,99px);
  border:1px solid var(--line-strong,#bbb);background:var(--surface,#fff);color:var(--fg,#111);
  font:inherit;font-size:var(--fs-sm,.8125rem);cursor:pointer;white-space:nowrap}
.lst-pill.on{background:var(--accent,#333);border-color:var(--accent,#333);color:var(--on-accent,var(--surface,#fff))}
.lst-pill .lst-n{opacity:.72;margin-left:.15rem;font-variant-numeric:tabular-nums}
.lst-help{margin-top:var(--s2,.5rem)}
.lst-top{margin-top:var(--s2,.5rem)}

.lst-tools{display:flex;flex-wrap:wrap;gap:var(--s2,.5rem);align-items:center;margin-top:var(--s3,.75rem)}
.lst-tools input{flex:1 1 12rem;min-width:0}

.lst-add{margin-top:var(--s3,.75rem)}
.lst-add-head{margin:0}
.lst-ferr{margin:var(--s1,.25rem) 0 0;color:var(--warn,#a9482b);font-size:var(--fs-sm,.8125rem);line-height:var(--lead-tight,1.35)}

.lst-rows{margin-top:var(--s2,.5rem);border-top:1px solid var(--line,#ddd)}
.lst-row{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.25rem;width:100%;min-width:0;min-height:52px;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line,#ddd);
  padding:.7rem .25rem;font:inherit;color:inherit;cursor:pointer;border-radius:0}
.lst-row:hover,.lst-row:focus-visible{background:var(--surface-2,#f7f7f7)}
.lst-row:focus-visible{outline:2px solid var(--focus,var(--accent,#333));outline-offset:-2px}
.lst-main{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:.15rem .6rem;width:100%;min-width:0;text-align:left}
.lst-name{font-weight:600;font-size:var(--fs-body,1rem);overflow-wrap:anywhere}
.lst-link{font-size:var(--fs-meta,.75rem);color:var(--fg-dim,#555);overflow-wrap:anywhere}
.lst-grp{font-size:var(--fs-meta,.75rem);font-weight:600;color:var(--fg-dim,#555)}
.lst-note{font-size:var(--fs-sm,.8125rem);color:var(--fg-dim,#555);line-height:var(--lead-tight,1.35);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lst-match{color:var(--fg-faint,#777);font-size:var(--fs-meta,.75rem)}
.lst-row .st-chip{font-size:var(--fs-meta,.75rem)}
.lst-empty{color:var(--fg-dim,#555);padding:var(--s4,1rem) 0;margin:0}

.lst-edit{background:var(--surface-2,#f7f7f7);border:1px solid var(--line,#ddd);border-radius:var(--r,12px);
  padding:var(--s3,.75rem);margin:var(--s2,.5rem) 0;display:flex;flex-direction:column;gap:var(--s2,.5rem);min-width:0}
.lst-edit .st-field{margin-top:0}
.lst-edit .st-actions{margin-top:var(--s1,.25rem)}
.lst-edit .st-meta{margin:0}

.lst-check{margin-top:var(--s4,1rem);padding-top:var(--s4,1rem);border-top:1px solid var(--line,#ddd);min-width:0}
.lst-checkbox>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-family:inherit;font-size:var(--fs-body,1rem);
  font-weight:600;letter-spacing:normal;text-transform:none;color:var(--fg,#111);list-style:none}
.lst-checkbox>summary::-webkit-details-marker{display:none}
.lst-checkbox>summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-.15rem);margin-left:var(--s2,.5rem)}
.lst-checkbox[open]>summary::after{transform:rotate(225deg) translateY(-.15rem)}
.lst-checkbox[open]>summary{margin-bottom:var(--s1,.25rem)}
.lst-h3{font-size:var(--fs-body,1rem);font-weight:700;margin:0}
.lst-check .st-group{margin-top:var(--s4,1rem)}
.lst-res{display:flex;flex-wrap:wrap;gap:var(--s2,.5rem);align-items:center;justify-content:space-between;
  padding:var(--s2,.5rem) 0;border-top:1px solid var(--line,#ddd)}
.lst-res-main{min-width:0;flex:1 1 12rem;overflow-wrap:anywhere}
.lst-res-acts{display:flex;flex-wrap:wrap;gap:var(--s2,.5rem)}
.lst-active summary{cursor:pointer;color:var(--fg-dim,#555);font-size:var(--fs-sm,.8125rem);margin-top:var(--s3,.75rem);min-height:44px;display:flex;align-items:center}
.lst-activerow{margin:.2rem 0 0}

.lst-foot{margin-top:var(--s4,1rem);padding-top:var(--s4,1rem);border-top:1px solid var(--line,#ddd)}
.lst-foot .st-meta{margin-top:var(--s2,.5rem)}

.lst-flash{animation:lst-flash 1.4s ease-out}
@keyframes lst-flash{from{box-shadow:0 0 0 3px var(--focus,var(--accent,#333))}to{box-shadow:0 0 0 0 transparent}}


/* Tap targets: every control on this screen is at least 44px tall. The shell's 2.5rem buttons are
   overridden for these sections only. */
.st-sec[data-sec="lists-pick"] button,
.st-sec[data-sec="engagement"] button,
.st-sec[data-sec="engagement"] .st-link,
.st-sec[data-sec="engagement"] .st-more,
.st-sec[data-sec="engagement"] summary{min-height:44px}
.st-sec[data-sec="engagement"] input,
.st-sec[data-sec="engagement"] select{min-height:44px}
.st-sec[data-sec="engagement"] .st-link{display:inline-flex;align-items:center;padding:0 var(--s2,.5rem)}
.st-more{min-height:44px;margin-top:var(--s2,.5rem);width:100%;border:1px dashed var(--line-strong,#bbb);border-radius:var(--r-sm,8px);
  background:none;font:inherit;font-size:var(--fs-sm,.8125rem);color:var(--accent-ink,var(--fg,#111));cursor:pointer}

@media (max-width:480px){
  .lst-tools input{flex-basis:100%}
  .lst-tools .primary{flex:1 1 100%}
  .lst-pill{padding:.35rem .7rem}
  .lst-res-acts button{flex:1 1 auto}
  .lp-chips{display:grid;grid-template-columns:1fr 1fr}
  .lp-chip{padding:.4rem .5rem;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .lst-flash{animation:none}
}