/* T-005 "Keep an eye on" (watch-*) and "Add a provider" (addprov-*). Tokens only, so light and dark both work. */

/* ───────── Themes: Keeping an eye on ───────── */
.watch { margin-top: 20px; display: flex; flex-direction: column; }
.watch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; min-height: 32px; }
.watch-list { display: flex; flex-direction: column; }
.watch-row, .watch-pending, .watch-req {
  display: grid; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 8px 0;
  border-top: 1px solid var(--line);
  text-align: left; color: inherit;
}
.watch-list > :first-child { border-top: 0; }
.watch-row { grid-template-columns: minmax(0, 1fr) 64px 40px 14px; border-radius: 0; transition: background-color var(--t-fast) var(--ease-std); }
@media (hover: hover) { .watch-row:hover .watch-name b { text-decoration: underline; text-underline-offset: 3px; } }
.watch-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.watch-pending, .watch-req { grid-template-columns: minmax(0, 1fr) auto; }
.watch-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.watch-name b { font-size: var(--t-sm); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.watch-name small { font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.watch-spark { display: flex; align-items: center; justify-content: flex-end; }
.watch-spark svg { display: block; }
.watch-net { text-align: right; font-weight: 600; font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--ink); }
.watch-net.neg { color: var(--neg-text); }
.watch-chev { color: var(--ink-3); }
.watch-sub { margin: 14px 0 2px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.watch-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.watch-empty { margin: 4px 0 0; font-size: var(--t-sm); color: var(--ink-3); text-wrap: pretty; }
.watch-note { display: flex; gap: 6px; align-items: flex-start; margin: 12px 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.watch-note .ico { flex: none; margin-top: 1px; }

/* ───────── Sheets (drawer on desktop, bottom sheet on phone) ───────── */
.watch-lead { margin: 0; color: var(--ink-2); font-size: var(--t-sm); text-wrap: pretty; }
.watch-try { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: -4px; }
.watch-try > span { font-size: var(--t-xs); color: var(--ink-3); margin-right: 2px; }
.watch-ex {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface);
  transition: background-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std);
}
.watch-ex:hover { color: var(--ink); background: var(--surface-2); }
@media (hover: hover) { .watch-ex:active { transform: scale(0.96); } }
.watch-ex.pressing { transform: scale(0.96); }
.watch-preview { display: flex; flex-direction: column; gap: 14px; }
.watch-preview:empty { display: none; }
.watch-hint { margin: 0; font-size: var(--t-sm); color: var(--ink-3); padding: 14px; border-radius: var(--r-md); border: 1px dashed var(--line-2); text-wrap: pretty; }
.watch-found { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-xs); }
.watch-stats .v { font-size: var(--t-md); }
.watch-sub-note { margin: -4px 0 2px; font-size: var(--t-xs); color: var(--ink-3); }
.watch-var { align-items: center; min-height: 44px; padding: 4px 10px 4px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); }
.watch-var input { width: 20px; height: 20px; margin: 0; }
.watch-var-t { flex: 1; min-width: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.watch-var-n { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.watch-var-n::after { content: " posts"; }
.watch-var:has(input:not(:checked)) .watch-var-t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.watch-srcs { display: flex; flex-direction: column; gap: 6px; }
.watch-src { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--ink-2); }
.watch-src-n { flex: 1; min-width: 0; }
.watch-src b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.watch-src.more { font-size: var(--t-xs); color: var(--ink-3); padding-left: 36px; }
.watch-save { margin-top: 0; }
.watch-consequence { font-size: var(--t-xs); color: var(--ink-3); flex: 1 1 180px; min-width: 0; text-wrap: pretty; }
.watch-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.watch-off { color: var(--ink-3); text-decoration: line-through; }
.watch-detail .chart { min-height: 160px; }

/* ───────── Providers toolbar: Add provider + starting tonight ───────── */
.addprov-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; margin-left: auto; }
.addprov-pending { max-width: 100%; min-width: 0; gap: 5px; }
.addprov-pending-t { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addprov-pending-s { display: none; }

/* Goal context: 28 now, 50 is the goal */
/* A site with no listing: plain status text (it happens on its own), not a chip that looks like a button */
.addprov-auto { font-size: var(--t-xs); color: var(--ink-3); text-align: right; max-width: 180px; text-wrap: pretty; }
.addprov-goal { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.addprov-goal-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); }
.addprov-goal-top b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.addprov-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.addprov-bar span { display: block; height: 100%; background: var(--brand); }
.addprov-bar .addprov-bar-new { background: color-mix(in srgb, var(--brand) 45%, transparent); }
.addprov-goal-sub { font-size: var(--t-xs); color: var(--ink-3); }
.addprov-help { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
.addprov-err { margin: 0; font-size: var(--t-xs); color: var(--neg-text); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.addprov-err .text-btn { margin: 0; padding: 4px 8px; font-size: var(--t-xs); color: var(--ink); }
.addprov-who { padding-bottom: 2px; }
.addprov-matches { display: flex; flex-direction: column; gap: 8px; }
.addprov-match {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2);
}
.addprov-m-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.addprov-m-txt b { font-size: var(--t-sm); font-weight: 600; }
.addprov-m-txt small { font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.addprov-m-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.addprov-m-row { grid-column: 2 / -1; justify-content: space-between; }
.addprov-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addprov-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.addprov-catb {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std), transform var(--t-med) var(--spring);
}
.addprov-catb i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
@media (hover: hover) { .addprov-catb:active { transform: scale(0.96); } }
.addprov-catb.pressing { transform: scale(0.96); }
.addprov-catb[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--brand); }
.addprov-yn { display: inline-flex; gap: 4px; }
.addprov-yn button {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std), transform var(--t-med) var(--spring);
}
@media (hover: hover) { .addprov-yn button:active { transform: scale(0.94); } }
.addprov-yn button.pressing { transform: scale(0.94); }
.addprov-yn .addprov-yes[aria-pressed="true"] { background: var(--pos-soft); color: var(--pos-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 45%, transparent); }
.addprov-yn .addprov-no[aria-pressed="true"] { background: var(--neg-soft); color: var(--neg-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 40%, transparent); }
.addprov-cat { align-self: flex-start; max-width: 100%; }
.addprov-foot { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--t-xs); color: var(--ink-3); }
.addprov-foot .ico { flex: none; margin-top: 1px; }
.addprov-done, .addprov-list { display: flex; flex-direction: column; gap: 14px; }
.addprov-ok { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-md); background: var(--pos-soft); }
.addprov-ok > .ico { color: var(--pos-text); flex: none; }
.addprov-ok b { display: block; color: var(--ink); font-weight: 600; }
.addprov-ok span { display: block; font-size: var(--t-sm); color: var(--ink-2); }
.addprov-steps .kv-row, .addprov-steps .x-kv-row { align-items: center; }
.addprov-steps .kv-row > span:first-child, .addprov-steps .x-kv-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.addprov-steps b { color: var(--ink); font-weight: 600; }
.addprov-steps small { font-size: var(--t-xs); color: var(--ink-3); }
.addprov-steps .kv-row > span:last-child, .addprov-steps .x-kv-row > span:last-child { color: var(--ink-3); display: inline-flex; }
.addprov-entry { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.addprov-remove { align-self: flex-start; margin-left: -12px; }

/* Phone: one thumb, 44 px targets */
@media (max-width: 767px) {
  .watch-row { grid-template-columns: minmax(0, 1fr) 56px 36px 12px; gap: 10px; min-height: 52px; }
  .watch-add, .watch-actions .btn, .addprov-tools .btn, .addprov-remove { min-height: 44px; }
  .watch-pending { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .watch-actions { justify-content: flex-start; }
  .watch-ex { min-height: 44px; padding: 0 14px; }
  .addprov-tools { width: 100%; }
  .addprov-tools .addprov-add { margin-left: auto; }
  .addprov-m-row { grid-column: 1 / -1; }
  .addprov-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addprov-catb { height: 44px; justify-content: flex-start; font-size: var(--t-sm); }
  .watch-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .watch-stats .meta-cell, .watch-stats .x-meta-cell { padding: 10px; }
  .addprov-yn button { height: 44px; padding: 0 16px; }
  .addprov-pending-t, .addprov-pending-l { display: none; }
  .addprov-pending-s { display: inline; }
}