/* Competitor Watch: the Monday digest owns the screen. Tracked accounts and
   the post log that feeds it sit below. Layouts follow the card's width. */

.cw { display: grid; gap: 20px; }
.cw .section { margin-top: 0; }
.cw h3 { display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
.cw h3 .count { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cw-stack { display: grid; gap: 2px; min-width: 0; }
.cw-stack .sub { max-width: 68ch; }

/* ---------- Hero: the Monday digest ---------- */
.cw-digest { container: digest / inline-size; }
.cw-block { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cw-note { display: flex; gap: 10px; align-items: flex-start; max-width: 80ch; margin-bottom: 24px; color: var(--ink-2); }
.cw-note .ic { margin-top: 3px; color: var(--ink-3); }
.cw-split { display: grid; gap: 32px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
@container digest (min-width: 900px) { .cw-split { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 40px; } }

/* 3 ideas side by side. Subgrid keeps each part on the same line across columns. */
.cw-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 16px; }
.cw-idea { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 12px; min-width: 0; }
.cw-idea-draft { align-content: start; gap: 10px; padding: 12px 14px 16px 16px; }
.cw-idea-draft .draft-head { min-height: 36px; }
.cw-idea-draft .tag { background: var(--surface); box-shadow: var(--ring); }
.cw-idea-hook { font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -0.006em; }
.cw-idea-hook mark.cw-need { background: var(--amber-wash); color: var(--amber-ink); border-radius: 4px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cw-idea-gap { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--amber-ink); font-weight: 500; }
.cw-idea-meta { display: grid; gap: 10px; align-content: start; padding: 0 2px; }
.cw-idea-meta div { display: grid; gap: 2px; }
.cw-idea-meta dt { font-size: 14px; color: var(--ink-3); }
.cw-idea-meta dd { color: var(--ink-2); }

/* Top posts: who, why it worked, the post itself, then its numbers. */
.cw-tops { display: grid; }
.cw-tp { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: var(--hair) solid var(--line-strong); }
.cw-tp:first-child { border-top: 0; padding-top: 0; }
.cw-tp:last-child { padding-bottom: 0; }
.cw-tp-body { display: grid; gap: 8px; min-width: 0; max-width: 760px; }
.cw-tp-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cw-tp-name { font-weight: 600; }
.cw-tp-text { margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink-2); }
.cw-tp-text p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cw-tp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font-size: 14px; }
.cw-tp-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); }
.cw-tp-stats b { color: var(--ink); font-weight: 600; }
.cw-tp-src { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.cw-tp-foot .out { color: var(--ink-2); text-decoration: none; }
.cw-tp-foot .out:hover { color: var(--ink); }
/* Compact links for a mouse on a wide window. Touch and narrow windows keep the 44px from app.css. */
@media (pointer: fine) and (min-width: 961px) { .cw-tp-foot .out { min-height: 32px; } .cwl-post .out { min-height: 28px; } }

/* Recurring topics: name, trend in words and an icon, share of posts. */
.cw-topics { display: grid; gap: 4px; }
.cw-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name trend" "bar n"; gap: 8px 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); }
.cw-topic-name { grid-area: name; font-weight: 600; }
.cw-topic .cw-trend { grid-area: trend; background: var(--surface); box-shadow: var(--ring); }
.cw-topic .cw-trend.good { background: var(--green-wash); color: var(--green-ink); box-shadow: none; }
.cw-topic .cw-trend.cw-fade { color: var(--ink-3); }
.cw-topic-bar { grid-area: bar; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cw-topic-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink-2); transform-origin: left; }
.cw-topic-n { grid-area: n; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
main.enter .cw-topic-bar i { animation: grow var(--duration-very-slow) var(--ease-smooth-out) var(--duration-fast) both; }

/* First run: what feeds the digest, and where you stand. */
.cw-first { display: grid; gap: 20px; }
.cw-first .lede { font-size: 16px; }
.cw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.cw-step { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 18px; border-radius: var(--r-md); background: var(--sunken); }
.cw-step-ic { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 11px; background: var(--surface); color: var(--ink-2); box-shadow: var(--ring); }
.cw-step-t { font-weight: 600; font-size: 16px; }
.cw-step-b { color: var(--ink-2); }
.cw-step-s { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.cw-step-s .ic { color: var(--ink-3); }
.cw-step.cw-done .cw-step-s { color: var(--green-ink); }
.cw-step.cw-done .cw-step-s .ic { color: var(--green-ink); }

/* ---------- Tracked accounts ---------- */
.cw-accounts { container: accts / inline-size; }
.cw-progress { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-bottom: 20px; }
.cw-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; }
.cw-meter i { width: 5px; border-radius: 2px; background: var(--line-strong); }
.cw-meter i.cw-tgt:not(.on) { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.cw-meter i.on { background: var(--primary); }
main.enter .cw-meter i { animation: eq-up var(--duration-slow) var(--ease-bounce) both; }
.cw-count { display: flex; align-items: baseline; gap: 6px; font: 600 22px/1 var(--font); letter-spacing: -0.015em; }
.cw-count .cw-of { font: 500 15px/1 var(--font); font-variant-numeric: tabular-nums lining-nums; color: var(--ink-3); letter-spacing: 0; }
.cw-status { display: flex; align-items: center; gap: 6px; color: var(--ink-2); padding-bottom: 1px; }
.cw-status.cw-good { color: var(--green-ink); font-weight: 500; }
.cw-status.cw-warn { color: var(--amber-ink); font-weight: 500; }
.cw-hint { display: flex; gap: 8px; align-items: flex-start; max-width: 80ch; margin: -6px 0 18px; font-size: 14px; color: var(--ink-2); }
.cw-hint .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.cw-accounts .form { margin-bottom: 16px; }
/* 44px targets on touch and narrow windows. app.css means to do this, but its base input rule
   comes later in that file and wins, so this tab sets it again for its own forms. */
@media (pointer: coarse), (max-width: 960px) {
  .cw-accounts .form input, .cw-accounts .form select, .cw-accounts .form textarea,
  .cw-log .form input, .cw-log .form select, .cw-log .form textarea { min-height: 44px; }
}

.cw-accts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.cw-acct { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 16px 16px 10px; border-radius: var(--r-md); background: var(--sunken); min-width: 0; }
.cw-acct-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cw-acct .av.c4 { --av-bg: var(--surface); box-shadow: var(--ring); }
.cw-acct-id { display: grid; gap: 1px; min-width: 0; }
.cw-acct-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-acct-name a { text-decoration-color: transparent; }
.cw-acct-name a:hover { text-decoration-color: currentColor; }
.cw-acct-sub { font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-acct-notes { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cw-acct-foot { align-self: end; display: grid; gap: 6px; min-width: 0; }
.cw-acct-skip { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; font-weight: 500; color: var(--amber-ink); }
.cw-acct-skip .ic { flex: none; margin-top: 2px; }
.cw-acct-act { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -8px; }
/* 8px side padding lines the icons up with the tile text and keeps both buttons on 1 row at 390px. */
.cw-acct-act .btn.quiet { padding: 0 8px; }
.cw-acct-act .btn.quiet:hover { background: var(--surface); }
.cw-acct.cw-off { background: transparent; box-shadow: inset 0 0 0 var(--hair) var(--line-strong); }
.cw-acct.cw-off .cw-acct-name, .cw-acct.cw-off .cw-acct-notes { color: var(--ink-3); }
.cw-acct.cw-off .tag { background: var(--sunken); }
.cw-acct-form { grid-column: 1 / -1; }
.cw-acct-form .form { margin-bottom: 0; }

/* ---------- Post log ----------
   Wide: one line per post with the 4 numbers in columns. Narrow: a card per post. */
.cw-log { container: plog / inline-size; }
.cw-log .section-head { align-items: flex-start; }
.cw-log .form { margin-bottom: 20px; }
.cwl-cols, .cwl-row {
  display: grid; column-gap: 14px;
  grid-template-columns: 60px minmax(200px, 1.1fr) minmax(260px, 2.2fr) 84px 68px 68px 72px 44px;
  grid-template-areas: "date who post views likes replies reposts act";
}
.cwl-cols { padding-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.cwl-cols .cwl-r { text-align: right; }
.cwl-c-date { grid-area: date; } .cwl-c-acct { grid-area: who; } .cwl-c-post { grid-area: post; }
.cwl-row {
  padding: 14px 0; align-items: start; border-top: var(--hair) solid var(--line-strong);
  grid-template-areas: "date who post views likes replies reposts act" "date who post src src src src act";
  grid-template-rows: auto 1fr;
}
.cwl-date { grid-area: date; padding-top: 1px; color: var(--ink-2); white-space: nowrap; }
.cwl-who { grid-area: who; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.cwl-id { display: grid; min-width: 0; }
.cwl-name { font-weight: 600; }
.cwl-sub { font-size: 14px; color: var(--ink-3); }
.cwl-when { display: none; }
.cwl-post { grid-area: post; display: grid; gap: 4px; justify-items: start; min-width: 0; padding-top: 1px; }
.cwl-topic { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cwl-t { font-weight: 600; }
.cwl-topic .tag { height: 22px; }
.cwl-text { color: var(--ink-2); max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cwl-post .out { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.cwl-post .out:hover { color: var(--ink); }
.cwl-nums { display: contents; }
.cwl-views { grid-area: views; } .cwl-likes { grid-area: likes; } .cwl-replies { grid-area: replies; } .cwl-reposts { grid-area: reposts; }
.cwl-n { text-align: right; padding-top: 1px; min-width: 0; }
.cwl-k { display: none; }
/* Where the numbers came from, right under them. */
.cwl-src { grid-area: src; justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding-top: 6px; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.cwl-act { grid-area: act; display: flex; justify-content: flex-end; }
.cwl-act .btn.quiet { color: var(--ink-3); }
.cwl-act .btn.quiet:hover { color: var(--ink); }
.cwl-err { grid-column: 1 / -1; padding-top: 6px; }
/* While a remove waits for its confirm, the button moves under the numbers so its words fit. */
.cwl-row.cwl-confirming .cwl-act { grid-row: 2; grid-column: views-start / act-end; padding-top: 4px; }
.cwl-row.cwl-confirming .cwl-src { visibility: hidden; }
.cwl-more { margin-top: 12px; }

@container plog (max-width: 899px) {
  .cwl-cols { display: none; }
  .cwl-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; row-gap: 12px; padding: 18px 0;
    grid-template-areas: "who act" "post post" "nums nums" "src src";
  }
  .cwl-src { justify-self: start; padding-top: 0; margin-top: -4px; white-space: normal; }
  .cwl-row.cwl-confirming .cwl-act { grid-area: act; padding-top: 0; }
  .cwl-row.cwl-confirming .cwl-src { visibility: visible; }
  .cwl-row:first-of-type { border-top: 0; padding-top: 4px; }
  .cwl-date { display: none; }
  .cwl-when { display: inline; }
  .cwl-nums { grid-area: nums; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .cwl-n { grid-area: auto; display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; background: var(--sunken); }
  .cwl-k { display: block; font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cwl-n .num { font-weight: 600; }
}
@container plog (max-width: 380px) {
  .cwl-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}