/* ============================================================
   watchlist.components.css · "ตำบลที่ติดตาม" Tambon Watchlist
   Ported (subset) from docs/design/handoff_out/watchlist/watchlist.css — only the
   classes the LIVE surface uses (follow control on the supply panel + the followed-
   tambon list in notification settings). Prototype-only scaffold classes (.wl-wrap,
   .wl-flags, .wl-statepair, .wl-settingsframe) are NOT ported. Every value resolves
   to a supply.tokens.css variable — nothing minted; no shipped class restyled.
   ============================================================ */

/* ---- follow control on the supply panel (price lens, under .metricrow) ---- */
.wl-follow{ margin-top:var(--s4,14px); border:1px solid var(--line2,#e3d9c6); border-radius:var(--r,10px);
  padding:.7rem .8rem; display:flex; flex-direction:column; gap:.5rem; }
.wl-follow .wl-fbtn{ width:100%; justify-content:center; font-weight:var(--fw-bold,700); }
.wl-follow .wl-fbtn[disabled]{ opacity:.55; cursor:not-allowed; }
.wl-follow .wl-fcad{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs,.72rem);
  color:var(--muted,#8a7d63); line-height:1.4; }
.wl-follow.on{ border-color:var(--brand,#b8862f); background:var(--brand-soft,#f2e6cd); }
.wl-follow.on .wl-fstatus{ display:flex; align-items:center; gap:.5rem; }
.wl-follow.on .wl-fchk{ width:24px; height:24px; flex:0 0 24px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand,#b8862f); color:#fff; font-size:.8rem; font-weight:700; }
.wl-follow.on .wl-ftxt{ flex:1; min-width:0; }
.wl-follow.on .wl-ftxt b{ display:block; font-size:var(--fs-sm,.86rem); color:var(--brand-ink,#5e3f0f); font-weight:var(--fw-bold,700); }
.wl-follow.on .wl-ftxt small{ display:block; font-size:var(--fs-2xs,.72rem); color:var(--brand2,#8a6a24); }
.wl-follow .wl-funfollow{ align-self:flex-start; border:0; background:transparent; color:var(--brand2,#8a6a24);
  cursor:pointer; font:inherit; font-size:var(--fs-2xs,.72rem); padding:2px 0; text-decoration:underline; }
.wl-follow .wl-funfollow:hover{ color:var(--brand-ink,#5e3f0f); }

/* ---- the followed-tambon list (a section inside notification settings) ---- */
.wl-sec{ display:flex; flex-direction:column; }
.wl-listhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3,10px); flex-wrap:wrap; }
.wl-listhead h3{ margin:0; font-size:var(--fs-md,1rem); font-weight:var(--fw-bold,700); }
.wl-listsub{ font-size:var(--fs-2xs,.72rem); color:var(--muted,#8a7d63); margin-top:2px; }
.wl-cap{ display:flex; flex-direction:column; gap:.25rem; min-width:120px; align-items:flex-end; }
.wl-cap .wl-capfig{ font-family:var(--mono,ui-monospace,monospace); font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs,.78rem); color:var(--ink2,#5c5340); }
.wl-cap .wl-capfig b{ color:var(--ink,#2c2416); }
.wl-cap .wl-capbar{ width:120px; height:6px; border-radius:999px; background:var(--bg2,#efe7d6); overflow:hidden; }
.wl-cap .wl-capbar i{ display:block; height:100%; background:var(--brand,#b8862f); border-radius:999px; }
.wl-list{ display:flex; flex-direction:column; gap:var(--s3,10px); }
.wl-row{ display:grid; grid-template-columns:1fr auto; gap:var(--s4,14px); align-items:center;
  padding:.7rem .8rem; border:1px solid var(--line2,#e3d9c6); border-radius:var(--r,10px); background:var(--surface,#fbf7ee); }
.wl-row .wl-main{ min-width:0; }
.wl-row .wl-nm{ font-size:var(--fs-md,1rem); font-weight:var(--fw-bold,700); letter-spacing:-.005em; }
.wl-row .wl-read{ display:flex; align-items:center; gap:.4rem .7rem; flex-wrap:wrap; margin-top:.35rem; }
.wl-row .wl-read .wl-band{ font-family:var(--mono,ui-monospace,monospace); font-variant-numeric:tabular-nums;
  font-weight:var(--fw-bold,700); font-size:var(--fs-sm,.86rem); color:var(--ink,#2c2416); }
.wl-row .wl-read .wl-band .tilde{ color:var(--pv-est,#8a6a24); }
.wl-row .wl-read .wl-band .unit{ font-family:var(--font,inherit); font-size:var(--fs-2xs,.72rem);
  color:var(--muted,#8a7d63); font-weight:var(--fw-semi,600); }
/* the REAL last supply-change notice (honest v1) — only rendered when the weekly
   sweep actually fired for this tambon; absent otherwise. */
.wl-row .wl-change{ display:flex; align-items:baseline; gap:.35rem; margin-top:.3rem;
  font-size:var(--fs-xs,.78rem); color:var(--ink2,#5c5340); line-height:1.35; }
.wl-row .wl-change .wl-chtxt{ min-width:0; }
.wl-row .wl-change .wl-chwhen{ color:var(--muted,#8a7d63); white-space:nowrap; }
.wl-row .wl-change.unread{ color:var(--ink,#2c2416); font-weight:var(--fw-semi,600); }
.wl-row .wl-change .wl-dot{ flex:0 0 auto; width:.42rem; height:.42rem; border-radius:50%;
  background:var(--accent,#b8860b); align-self:center; }
.wl-row .wl-acts{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width:560px){
  .wl-row{ grid-template-columns:1fr; }
  .wl-row .wl-acts{ justify-content:flex-start; }
}