/* Stack watch (L3-02): the tool picker on /stack and /app, the sticky "Watch them" bar, and My stack (L4-01) on /alerts/manage. */
.stack-head{padding-block:56px 28px}
.stack-head .display{max-width:880px}
.stack-head .lead{margin-bottom:10px}
.stack-body{padding-bottom:64px}
.stack-form{display:grid;gap:28px}
.stack-search,.stack-missing{display:grid;gap:10px;max-width:640px}
.stack-search>label,.stack-missing>label{font-weight:700}
.stack-search p,.stack-missing p{margin:0}
.stack-search-row,.stack-send-row{display:flex;gap:10px}
.stack-search-row input,.stack-send-row input{flex:1}
.stack-note{margin:0;color:var(--ink-2)}
.stack-picker{display:grid;gap:22px}
.stack-kept{margin:0;color:var(--ink-2)}
.stack-group{border:0;padding:0;margin:0;min-width:0}
.stack-group[hidden],.stack-tools li[hidden]{display:none}
.stack-group legend {
  font:500 12px/1.5 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:0;
  margin-bottom:10px;
}
.stack-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.stack-tool {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:60px;
  padding:8px 14px 8px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg-2);
  cursor:pointer;
  font-weight:600;
}
.stack-tools li{min-width:0}
.stack-tool:hover{border-color:var(--ink-3)}
.stack-tool input{flex:none;margin:0;accent-color:var(--ember-fill)}
.stack-tool .service-icon{width:36px;height:36px;border-radius:10px}
.stack-tool>span:not(.service-icon){min-width:0;overflow-wrap:anywhere}
.stack-tool:has(input:checked){border-color:var(--ember);background:var(--ember-wash)}
.stack-tool:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.stack-tool input:focus-visible{outline:none}
.stack-none{margin:0;color:var(--ink-2)}
.stack-none[hidden]{display:none}
.stack-send{display:grid;gap:12px;max-width:640px;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--bg-2)}
.stack-send h2,.stack-send p{margin:0}
.stack-body>.consent{max-width:640px}
.stack-bar{position:sticky;bottom:12px;z-index:5}
.stack-bar[hidden]{display:none}
.stack-bar-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:640px;
  padding:10px 10px 10px 20px;
  border-radius:16px;
  background:var(--band-bg);
  color:var(--band-ink);
  box-shadow:var(--shadow);
  font:500 14px var(--mono);
}
.stack-bar .btn-primary{background:var(--accent);color:var(--on-foam)}
/* Compact picker: the /app competitor form. */
.stack-picker-compact{gap:14px;max-height:420px;overflow:hidden auto;padding-right:6px}
.stack-picker-compact .stack-tools{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px}
.stack-picker-compact .stack-tool{min-height:48px;padding:6px 10px;font-size:14px;border-radius:12px}
.stack-picker-compact .stack-tool .service-icon{width:28px;height:28px;border-radius:8px}
.stack-compete{display:grid;gap:18px;margin-top:40px}
.stack-compete-copy p{margin:0}
.stack-compete-copy h2{margin-bottom:8px}
.stack-compete-form{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start}
.stack-compete-pick{border:0;padding:0;margin:0;min-width:0;display:grid;gap:12px}
.stack-compete-pick>legend{font-weight:700;padding:0;margin-bottom:10px}
.stack-compete-pick p{margin:0}
.stack-filter{display:grid;gap:6px}
.stack-filter[hidden],[data-stack-n][hidden]{display:none}
.stack-filter label{font-size:14px;font-weight:700}
.stack-compete-fields{display:grid;gap:8px}
.stack-compete-fields label{font-weight:700;font-size:14px;margin-top:6px}
.stack-compete-fields .btn{margin-top:10px}
.stack-compete-fields p{margin:0}
.stack-compete>.consent{margin:0}
/* "Email me my stack link": small on /stack, the main form on /my-stack and the expired-link page. */
.stack-link-ask{margin-top:4px;font-size:14px}
.stack-link-ask summary{cursor:pointer;color:var(--link);font-weight:700;width:max-content;max-width:100%;padding-block:11px}
.stack-link-ask>p{margin:0 0 8px}
.stack-link-ask .link-form{margin-top:4px}
.link-form{display:grid;gap:8px;max-width:520px}
.link-form label{font-weight:700;font-size:14px}
/* My stack (L4-01) on /alerts/manage. Rows never squeeze the name: it keeps one line and only an ellipsis can cut it. */
.mystack .lead{margin-bottom:20px}
.mystack .notice{margin:0 0 20px;max-width:860px}
.mystack-ask{display:grid;gap:16px}
.mystack-ask>*,.mystack-ask>.notice{margin:0;max-width:640px}
.mystack-summary {
  display:flex;
  flex-wrap:wrap;
  gap:0 6px;
  margin:0 0 14px;
  font:500 13px/1.6 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.mystack-summary .is-hot{color:var(--ember)}
.mystack-form{max-width:860px;margin-bottom:24px}
.mystack-list,.mystack-cats{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.mystack-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"tool remove" "status status";
  gap:8px 12px;
  align-items:center;
  padding:14px 12px 16px 16px;
  border-top:1px solid var(--line);
  border-left:3px solid transparent;
}
.mystack-row:first-child{border-top:0}
.mystack-row.is-attention{border-left-color:var(--tone-fill)}
.mystack-tool{grid-area:tool;display:flex;align-items:center;gap:12px;min-width:0}
.mystack-tool .service-icon{width:36px;height:36px;border-radius:10px}
.mystack-name {
  min-width:0;
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:normal;
  overflow-wrap:normal;
}
.mystack-name:hover{text-decoration:underline}
.mystack-status{grid-area:status;display:grid;gap:4px;min-width:0;padding-left:48px}
.mystack-status p{margin:0}
.mystack-level .level-mark{flex-direction:row;align-items:center;gap:10px}
.mystack-level .level-word{font-size:20px}
.mystack-level .level-bar i{width:22px;height:5px}
.mystack-q{font-weight:600;color:var(--ink);word-break:normal;overflow-wrap:break-word}
.mystack-when{font:500 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mystack-when a{color:var(--link)}
.mystack-quiet{color:var(--ink-2)}
.mystack-remove {
  grid-area:remove;
  min-height:44px;
  padding:0 6px;
  border:0;
  background:none;
  color:var(--ink-3);
  font:500 14px var(--sans);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  white-space:nowrap;
}
.mystack-remove:hover{color:var(--ember)}
.mystack-h{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:28px 0 10px}
.mystack-cats li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px 6px 16px;border-top:1px solid var(--line)}
.mystack-cats li:first-child{border-top:0}
.mystack-cats span{min-width:0;font-weight:600}
.mystack-empty{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.mystack-empty p{margin:0}
.mystack-art{width:110px;flex:none}
.stack-manage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
@media(min-width:760px) {
  .mystack-row{grid-template-columns:minmax(180px,240px) minmax(0,1fr) auto;grid-template-areas:"tool status remove";gap:16px 24px;padding:16px 16px 16px 20px}
  .mystack-status{padding-left:0}
}
@media(max-width:820px) {
  .stack-compete-form{grid-template-columns:1fr}
}
@media(max-width:560px) {
  .stack-head{padding-block:36px 18px}
  .stack-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stack-tool{min-height:52px;padding:6px 8px;gap:7px;font-size:13px}
  .stack-tool .service-icon{width:26px;height:26px;border-radius:8px}
  .stack-search-row,.stack-send-row{flex-direction:column}
  .stack-send{padding:18px}
  .stack-picker-compact .stack-tools{grid-template-columns:1fr}
  .stack-bar-row{padding-left:14px;font-size:13px}
}