/* Brand analysis (presence.js), inside the Brand Kit (settings.html) and the brief's first card (app.html).
   Everything is under .pa* so it can't touch the page around it. Colours fall back for pages without shell.css. */
.pa{--pa-ok:var(--ok,#13915A);--pa-bad:var(--bad,#D6334F);--pa-warn:var(--warn,#B7791F);--pa-fb:var(--fb,#0866FF)}

/* the link rows */
.pa-links{min-width:0}
.pa-lk-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.pa-lk{display:flex;align-items:center;gap:10px;min-width:0;background:#fff;border:1px solid var(--sand);border-radius:14px;padding:5px 6px 5px 12px;transition:border-color .15s,box-shadow .15s}
.pa-lk:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(114,50,242,.14)}
.pa-lk .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--soft);color:var(--ink-3)}
.pa-lk .ico svg{width:18px;height:18px}
.pa-lk input{flex:1;min-width:0;border:0;outline:0;background:transparent;height:34px;font-size:14.5px;direction:ltr;text-align:right;box-shadow:none;padding:0}
.pa-lk input::placeholder{color:var(--faint);direction:rtl}
.pa-lk .det{font-size:11.5px;font-weight:600;color:var(--stone);white-space:nowrap}
.pa-lk .det.ok{color:var(--pa-ok)}.pa-lk .det.bad{color:var(--pa-bad)}
.pa-lk .rm{width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--faint);display:grid;place-items:center;flex:none;cursor:pointer}
.pa-lk .rm svg{width:16px;height:16px}
.pa-lk .rm:hover{background:var(--soft);color:var(--ink)}
.pa-lk-add{margin-top:8px;border:0;background:transparent;color:var(--primary);font-weight:600;font-size:13.5px;padding:4px 2px;cursor:pointer}
.pa-lk-add small{color:var(--stone);font-weight:500}
/* connecting Facebook + Instagram */
.pa-meta{margin-top:14px;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:#F4F7FF;box-shadow:inset 0 0 0 1px #E1E8FF}
.pa-meta.done{background:#F1FBF6;box-shadow:inset 0 0 0 1px #D3F0E1}
.pa-meta .mb-txt{flex:1;min-width:0;display:grid;gap:2px}
.pa-meta .mb-txt b{font-size:13.5px}
.pa-meta .mb-txt small{color:var(--stone);font-size:12.5px;line-height:1.5}
.pa-accs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pa-accs:empty{display:none}
.pa-accs li{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;background:#fff;border-radius:99px;padding:2px 10px 2px 4px;box-shadow:0 0 0 1px var(--line)}
.pa-accs li .ico{width:20px;height:20px;border-radius:50%;display:grid;place-items:center}.pa-accs li .ico svg{width:11px;height:11px}
.pa-accs li.warn{color:var(--pa-warn)}

/* reading */
.pa-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:start}
.pa-steps li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--faint);transition:color .3s}
.pa-steps li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--line-strong)}
.pa-steps li.on{color:var(--ink);font-weight:600}
.pa-steps li.on::before{box-shadow:inset 0 0 0 2px var(--primary);animation:pa-spin .9s linear infinite;background:conic-gradient(var(--primary) 0 25%,transparent 0)}
.pa-steps li.ok{color:var(--pa-ok)}
.pa-steps li.ok::before{background:var(--pa-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:none}
@keyframes pa-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pa-steps li.on::before{animation:none}}

/* the report */
.pa-chip{font-size:12px;font-weight:600;border-radius:99px;padding:2px 10px;background:var(--primary-soft);color:var(--primary);white-space:nowrap}
.pa-chip.ok{background:var(--ok-soft);color:var(--pa-ok)}.pa-chip.warn{background:var(--warn-soft);color:var(--pa-warn)}.pa-chip.off{background:var(--soft);color:var(--stone)}
.pa-chip[hidden]{display:none}
.pa-rep-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pa-an{display:grid;gap:14px}
.pa-sum{margin:0;font-size:15px;line-height:1.8}
.pa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pa-box{border-radius:var(--r-lg);padding:16px;background:#FAFAFB;box-shadow:inset 0 0 0 1px var(--line)}
.pa-box h4{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px;margin:0 0 6px}
.pa-box h4 i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:12px}
.pa-box.good h4 i{background:var(--ok-soft);color:var(--pa-ok)}.pa-box.gap h4 i{background:var(--warn-soft);color:var(--pa-warn)}.pa-box.who h4 i,.pa-box.what h4 i{background:var(--primary-soft);color:var(--primary)}
.pa-box p{margin:0;font-size:13.5px;color:var(--ink-2)}
.pa-box ul{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}
.pa-tags{display:flex;flex-wrap:wrap;gap:6px}
.pa-tags span{font-size:12.5px;background:#fff;border-radius:99px;padding:2px 10px;box-shadow:inset 0 0 0 1px var(--sand)}
.pa-empty{margin:0;font-size:14px;color:var(--stone)}

.pa-sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:16px}
.pa-sources:empty{display:none}
.pa-src{display:grid;gap:12px;align-content:start;background:#fff;border-radius:18px;padding:16px;box-shadow:0 0 0 1px var(--line)}
.pa-src.dim{background:var(--panel)}
.pa-src .src-h{display:flex;align-items:center;gap:10px}
.pa-src .src-h .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--soft)}
.pa-src .src-h .ico svg{width:20px;height:20px}
.pa-src .src-h .who{flex:1;min-width:0;display:grid;line-height:1.35}
.pa-src .src-h .who b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-src .src-h .who small{font-size:12px;color:var(--stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
.pa-src .src-note{margin:0;font-size:13px;color:var(--ink-2)}
.pa-src .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.pa-src .kpi{background:var(--panel);border-radius:12px;padding:8px 10px;box-shadow:inset 0 0 0 1px var(--line);display:grid}
.pa-src .kpi b{font-family:var(--font-ui);font-size:18px;line-height:1.2}
.pa-src .kpi small{font-size:11.5px;color:var(--stone)}
.pa-src .mix{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--soft)}
.pa-src .mix i{display:block;height:100%}
.pa-src .mix-l{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--stone)}
.pa-src .mix-l span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:5px;background:var(--c)}
.pa-src .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pa-src .post{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--soft);display:grid;place-items:center;color:var(--faint);text-decoration:none}
.pa-src .post img{width:100%;height:100%;object-fit:cover}
.pa-src .post .eng{position:absolute;inset:auto 0 0 0;padding:14px 6px 4px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));display:flex;gap:8px;justify-content:center}
.pa-src .post .k{position:absolute;top:5px;left:5px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);border-radius:6px;padding:0 5px}
.pa-src .post svg{width:26px;height:26px}
.pa-src .fix{justify-self:start}

.pa-ideas{margin-top:16px}
.pa-ideas h4{font-size:14px;font-weight:700;margin:0}
.pa-ideas p{margin:2px 0 10px;font-size:13px}
.pa-ideas ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.pa-idea{display:flex;align-items:center;gap:10px;width:100%;text-align:start;border:0;border-radius:14px;padding:12px 14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:14px;line-height:1.5;cursor:pointer;color:var(--ink);transition:background .15s,box-shadow .15s}
.pa-idea:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--primary)}
.pa-idea span{flex:1}
.pa-idea b{flex:none;font-size:12.5px;color:var(--primary)}

/* platform colours last: they win over the neutral icon tiles above */
.pa .ico.website,.pa-lk .ico.website{background:var(--info-soft);color:#2E40FF}
.pa .ico.instagram,.pa-lk .ico.instagram{background:linear-gradient(135deg,#FEDA75,#FA7E1E 30%,#D62976 60%,#962FBF 85%);color:#fff}
.pa .ico.facebook,.pa-lk .ico.facebook{background:#0866FF;color:#fff}
.pa .ico.tiktok,.pa-lk .ico.tiktok,.pa .ico.x,.pa-lk .ico.x,.pa .ico.threads,.pa-lk .ico.threads{background:#111;color:#fff}
.pa .ico.youtube,.pa-lk .ico.youtube{background:#FF0033;color:#fff}
.pa .ico.linkedin,.pa-lk .ico.linkedin{background:#0A66C2;color:#fff}
.pa .ico.snapchat,.pa-lk .ico.snapchat{background:#FFFC00;color:#111}
.pa .ico.whatsapp,.pa-lk .ico.whatsapp{background:#25D366;color:#fff}


/* the brief's card in the narrow chat column */
.lcard .pa-lk .det{display:none}
.lcard .pa-lk{gap:8px;padding-inline-start:8px}
.lcard .pa-lk input{font-size:13.5px}
.lcard .pa-steps li{font-size:13px}

@media (max-width:760px){
  .pa-meta{flex-direction:column;align-items:stretch}
  .pa-meta .btn{justify-content:center}
  .pa-lk .det{display:none}
}