/* Marketing Tracker additions to lc.css: status chips for the marketing loop,
   star ratings, idea cards, the WhatsApp/Instagram phone simulator (from the
   loopclosers-website hero), the journey diagram, email previews. Same tokens,
   same 3px-ink-and-hard-shadow language. */

/* ---------- layout helpers ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px; align-items: start; }
.detail > .side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } .detail > .side { position: static; } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .grow { flex: 1; }
.toolbar select, .toolbar input { width: auto; min-width: 150px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted-2); font-weight: 600; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mono, .code-pill { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-pill { display: inline-block; background: var(--cream); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 8px; font-size: 12.5px; font-weight: 700; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.section-title { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 26px 0 12px; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hl { background: var(--lime); padding: 0 .18em; border-radius: 10px; display: inline-block; transform: rotate(-1.2deg); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: middle; }
.list-plain { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.list-plain li { display: flex; gap: 8px; align-items: baseline; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- status chips ---------- */
.cs-polling, .gs-pending_approval, .gs-submitted { background: var(--sun); }
.cs-awaiting_decision, .cs-awaiting_approval { background: var(--pink); }
.cs-assigned, .cs-drafting, .gs-tested, .gs-compiling, .gs-waiting { background: var(--cyan); }
.cs-in_feedback { background: #fff0a8; }
.cs-changes_requested, .gs-changes_requested, .gs-invalid, .gs-paused { background: var(--orange); }
.cs-ready, .gs-approved, .gs-connected, .gs-completed-ok { background: var(--lime); }
.cs-scheduled, .gs-scheduled, .gs-live, .gs-active, .gs-sending, .gs-launching, .gs-publishing { background: var(--blue); color: var(--cream); }
.cs-published, .gs-sent, .gs-completed, .gs-published, .gs-handed_off { background: var(--ink); color: var(--cream); }
.cs-rejected, .gs-rejected, .gs-failed, .gs-error, .gs-opted_out { background: var(--red); color: var(--cream); }
.cs-parked, .cs-archived, .gs-draft, .gs-cancelled, .gs-archived, .gs-retired, .gs-disconnected, .gs-abandoned,
.gs-expired { background: var(--soft); color: var(--muted-2); }
.ls-new { background: var(--cream); } .ls-engaged { background: var(--cyan); } .ls-mql { background: var(--sun); }
.ls-sql { background: var(--pink); } .ls-opportunity { background: var(--blue); color: var(--cream); }
.ls-won { background: var(--lime); } .ls-lost { background: var(--soft); color: var(--muted-2); }
.ms-booked { background: var(--sun); } .ms-held { background: var(--lime); } .ms-no_show { background: var(--orange); }
.ms-cancelled { background: var(--soft); color: var(--muted-2); }
.chip.bucket { background: var(--white); }
.chip.bucket .dot { width: 9px; height: 9px; }
.chip.ch { background: var(--paper); font-weight: 600; }
.chip.ghost { background: transparent; border-style: dashed; color: var(--muted-2); }

/* ---------- stars ---------- */
.stars { display: inline-flex; gap: 4px; }
.stars button { background: none; border: none; padding: 0 1px; font-size: 30px; line-height: 1; cursor: pointer; color: var(--soft);
  -webkit-text-stroke: 1.5px var(--ink); transition: transform .12s; }
.stars button:hover { transform: scale(1.12); }
.stars button.on { color: var(--sun); }
.stars button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.stars-ro { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.stars-ro .s { color: var(--sun); -webkit-text-stroke: 1px var(--ink); letter-spacing: 1px; }
.stars-ro .s .off { color: var(--soft); }
.rate-box { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r); padding: 16px; }
.rate-box textarea { margin-top: 10px; }

/* ---------- idea cards ---------- */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.idea-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); border-radius: 18px; padding: 14px 16px 14px 20px; box-shadow: 5px 5px 0 var(--ink); position: relative;
  transition: transform .12s, box-shadow .12s; overflow: hidden; }
.idea-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--bc, var(--sun)); border-right: 3px solid var(--ink); }
.idea-card:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.idea-card .t { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.2; }
.idea-card .s { font-size: 13.5px; color: var(--muted-2); }
.idea-card .foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; font-size: 12.5px; }
.idea-card .rank { position: absolute; right: 12px; top: 12px; font-family: var(--display); font-weight: 800; font-size: 13px;
  background: var(--lime); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; }
.idea-card.rated { box-shadow: 5px 5px 0 var(--lime); }
.idea-card .need { color: var(--pink); font-weight: 700; }
.score-big { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; }
.refs a { overflow-wrap: anywhere; }

/* ---------- Echo box ---------- */
.echo-box { background: var(--lime); border: 3px solid var(--ink); border-radius: 18px; padding: 16px; box-shadow: 5px 5px 0 var(--ink); }
.echo-box h3 { display: flex; gap: 8px; align-items: center; }
.echo-box .bot { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--lime); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--ink); }
.echo-box textarea { background: var(--white); margin-top: 10px; }

/* ---------- kanban widths ---------- */
.board.five { grid-template-columns: repeat(5, minmax(230px, 1fr)); }
.board.four { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
.board.seven { grid-template-columns: repeat(7, minmax(210px, 1fr)); }
.board.three { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
.pcard .who { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.pcard .who .avatar { width: 22px; height: 22px; font-size: 10px; }

/* ---------- calendar groups ---------- */
.g-content { --g: var(--sun); } .g-publish { --g: #c9f23a; } .g-campaigns { --g: #ff9bd6; }
.g-outbound { --g: #d8f6fa; } .g-meetings { --g: #e9e5ff; } .g-planning { --g: #ffb48f; }

/* ---------- phone simulator (WhatsApp / Instagram) ---------- */
.phone { width: 320px; max-width: 100%; background: var(--cream); border: 6px solid var(--ink); border-radius: 38px;
  box-shadow: 10px 10px 0 rgba(17, 16, 12, .35); overflow: hidden; display: flex; flex-direction: column; }
.wa-head { background: var(--lime); color: var(--ink); padding: 14px 16px 12px; display: flex; align-items: center; gap: 11px; border-bottom: 3px solid var(--ink); }
.phone.ig .wa-head { background: var(--pink); color: var(--cream); }
.wa-av { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); overflow: hidden; flex: none; }
.wa-av img { width: 30px; height: 30px; object-fit: contain; }
.wa-name { font-family: var(--display); font-weight: 800; font-size: 15px; }
.wa-status { font-size: 11px; font-weight: 600; }
.wa-body { padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; background: var(--cream); height: 460px; overflow-y: auto; }
.bub { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; border: 2px solid var(--ink);
  animation: lcBubIn .28s ease both; white-space: pre-wrap; overflow-wrap: anywhere; }
.bub.in { background: var(--blue); color: var(--cream); border-bottom-right-radius: 4px; align-self: flex-end; }
.bub.out { background: #fff; color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.bub.sys { align-self: center; background: transparent; border: 1.5px dashed var(--muted); color: var(--muted-2); font-size: 11.5px; padding: 4px 10px; }
.bub .bt { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .05em; }
.bub .cta { display: block; margin-top: 8px; text-align: center; font-weight: 700; border-top: 1.5px solid var(--line); padding-top: 6px; color: var(--blue); }
.bub .media { display: block; margin: -3px -6px 6px; border-radius: 9px; border: 2px solid var(--ink); background: var(--soft); height: 110px;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.qr { display: flex; gap: 6px; flex-wrap: wrap; align-self: flex-start; max-width: 92%; animation: lcBubIn .28s ease both; }
.qr button { background: var(--lime); border: 2px solid var(--ink); color: var(--ink); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; font-family: var(--body); }
.qr button:hover { background: var(--sun); }
.qr button:disabled { opacity: .45; cursor: default; background: var(--soft); }
.qr.list button { border-radius: 10px; width: 100%; text-align: left; }
.wa-input { display: flex; gap: 8px; padding: 10px; border-top: 3px solid var(--ink); background: var(--white); }
.wa-input input { min-height: 38px; border-radius: 999px; font-size: 14px; }
.wa-input button { flex: none; }
@keyframes lcBubIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- journey diagram ---------- */
.jd-wrap { overflow: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; max-height: 640px; }
.jd-wrap svg { display: block; }
.jd-node rect { stroke: var(--ink); stroke-width: 2.5; rx: 12; }
.jd-node text { font-family: var(--body); font-size: 12px; fill: var(--ink); }
.jd-node .ty { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; fill: var(--muted-2); }
.jd-node.sel rect { stroke: var(--pink); stroke-width: 4; }
.jd-node { cursor: pointer; }
.jd-edge { fill: none; stroke: var(--ink); stroke-width: 2; }
.jd-elabel { font-size: 10.5px; font-weight: 700; fill: var(--muted-2); }
.jd-count rect { fill: var(--ink); stroke: none; }
.jd-count text { fill: var(--lime); font-size: 11px; font-weight: 800; }
.t-message rect { fill: #fff; } .t-question rect { fill: #dcf8fb; } .t-condition rect { fill: #fff4d6; }
.t-link rect { fill: #e6f7b0; } .t-wait rect { fill: #e9e2d3; } .t-action rect { fill: #e9e5ff; }
.t-email rect { fill: #ffe3f3; } .t-wa_template rect { fill: #d8f6fa; } .t-handoff rect { fill: #ffd9c2; } .t-end rect { fill: var(--ink); }
.t-end text { fill: var(--cream); }
.node-list { display: flex; flex-direction: column; gap: 10px; }
.node-card { border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px 12px; background: var(--white); }
.node-card .h { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 13px; }
.node-card .b { font-size: 13px; margin-top: 6px; white-space: pre-wrap; color: var(--muted-2); }
.problems li { color: #c43d00; font-weight: 600; font-size: 13px; }

/* ---------- email preview ---------- */
.email-frame { width: 100%; height: 640px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; display: block; }
.email-meta { background: var(--paper); border: 3px solid var(--ink); border-bottom: none; border-radius: 14px 14px 0 0; padding: 10px 14px; font-size: 13px; }
.email-meta + .email-frame { border-radius: 0 0 14px 14px; }

/* ---------- integrations ---------- */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.int-card { background: var(--white); border: 3px solid var(--ink); border-radius: 18px; padding: 16px; box-shadow: 5px 5px 0 var(--ink); display: flex; flex-direction: column; gap: 10px; }
.int-card .h { display: flex; gap: 8px; align-items: center; }
.int-card .h h3 { flex: 1; }
.int-card .blurb { font-size: 13px; color: var(--muted-2); }

/* ---------- misc ---------- */
.not-connected { background: var(--paper); border: 2px dashed var(--ink); border-radius: var(--r); padding: 10px 14px; font-size: 13px; }
.not-connected strong { font-weight: 800; }
.big-num { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.05; }
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.metric { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; }
.metric .k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.metric .v { font-family: var(--display); font-weight: 800; font-size: 22px; }
.thumb-row { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb { width: 120px; border: 2.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--white); text-decoration: none; color: var(--ink); font-size: 11.5px; }
.thumb img, .thumb video { width: 100%; height: 90px; object-fit: cover; display: block; border-bottom: 2px solid var(--ink); }
.thumb .ph { height: 90px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--soft); border-bottom: 2px solid var(--ink); }
.thumb .n { padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone { border: 3px dashed var(--ink); border-radius: 16px; padding: 22px; text-align: center; background: var(--paper); cursor: pointer; }
.dropzone.over { background: var(--lime); }
.timeline-mini { list-style: none; border-left: 3px solid var(--ink); margin-left: 6px; padding-left: 14px; display: flex; flex-direction: column; gap: 10px; }
.timeline-mini li { position: relative; font-size: 13.5px; }
.timeline-mini li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--tl, var(--sun)); border: 2px solid var(--ink); }
.timeline-mini .w { font-size: 11.5px; color: var(--muted); font-weight: 600; }