/* The Ads manager page (ads-agent/ads-agent.js; docs/ads-agent.md), in the calm redesign. Loaded after styles.css, so a rule here wins over
   the same rule there. Docs/Hub design standard.md has the rules. Colours only from the tokens in styles.css (light and dark alike). */

.aa-src { margin: 8px 0 0; font: 400 .85rem/1.4 var(--rt-body); color: var(--text-2); }

.aa-card { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 16px; }
.aa-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.aa-chan { font: 600 .8rem/1.4 var(--rt-body); color: var(--text-2); }
.aa-exp { font: 600 .8rem/1.4 var(--rt-body); color: var(--text-2); font-variant-numeric: tabular-nums; }
.aa-chat { font: 600 .75rem/1.4 var(--rt-body); color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; margin-right: auto; }
.aa-title { margin: 0; font: 700 1.1rem/1.3 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.aa-what { margin: 0; font: 400 .95rem/1.4 var(--rt-body); color: var(--text); }
.aa-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.aa-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 4px 12px; }
.aa-row dt { font: 600 .85rem/1.4 var(--rt-body); color: var(--text-2); }
.aa-row dd { margin: 0; font: 400 .95rem/1.4 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
/* An edit's new text, headline, place...: as Meta will get it, line breaks kept. */
.aa-details dd { white-space: pre-line; }
@media (max-width: 520px) { .aa-row { grid-template-columns: 1fr; } }

.aa-learn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--r-box); font: 400 .9rem/1.4 var(--rt-body); }
.aa-learn .ic { flex: none; margin-top: 2px; }
.aa-learn.ok { background: var(--rt-ok-bg); color: var(--rt-ok); }
.aa-learn.warn { background: var(--rt-neutral-bg); color: var(--text); }
.aa-learn.bad { background: var(--rt-bad-bg); color: var(--rt-bad); }
.aa-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; font: 400 .95rem/1.4 var(--rt-body); color: var(--text); }

.aa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.aa-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.aa-ask { margin: 4px 0 0; font: 600 .95rem/1.4 var(--rt-body); color: var(--text); }
.aa-sure-l { display: flex; flex-direction: column; gap: 4px; font: 400 .9rem/1.4 var(--rt-body); color: var(--text); }
.aa-sure, .aa-num, .aa-mail { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--surface); color: var(--text); font: 400 1rem/1.3 var(--rt-body); min-height: 44px; }
.aa-num { width: 6rem; }
.aa-mail { min-width: 0; flex: 1; }

.aa-note { margin: 0; font: 400 .9rem/1.4 var(--rt-body); }
.aa-note.ok { color: var(--rt-ok); }
.aa-note.warn { color: var(--text); }
.aa-note.bad { color: var(--rt-bad); }

.aa-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.aa-done { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.aa-done:first-child { border-top: 0; }
.aa-done-t { min-width: 0; font: 600 .95rem/1.35 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.aa-done-s { font: 600 .85rem/1.35 var(--rt-body); text-align: right; }
.aa-done-s.ok { color: var(--rt-ok); }
.aa-done-s.bad { color: var(--rt-bad); }
.aa-done-s.quiet { color: var(--text-2); }
.aa-done-m { grid-column: 1 / -1; font: 400 .85rem/1.4 var(--rt-body); color: var(--text-2); }

.aa-review { padding: 10px 0; border-top: 1px solid var(--border); }
.aa-review:first-child { border-top: 0; }
.aa-review-h { margin: 0; font: 400 .9rem/1.4 var(--rt-body); }
.aa-review-line { margin: 4px 0 0; font: 600 .95rem/1.4 var(--rt-body); color: var(--text); }
.aa-review-text { margin: 4px 0 0; font: 400 .9rem/1.5 var(--rt-body); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

.aa-sw { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.aa-sw:first-child { border-top: 0; }
.aa-sw-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aa-inline { display: flex; align-items: center; gap: 8px; flex: none; max-width: 60%; }
.aa-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.aa-links .btn { display: inline-flex; align-items: center; gap: 6px; }