/* page: ads — owned by the ads page task. Shared tokens and classes live in ../styles.css. */
.ads-feed { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 20px; align-items: flex-start; }
.ads-feed-main { flex: 3 1 520px; min-width: 0; }
.ads-feed-side { flex: 2 1 320px; min-width: 0; }
.ads-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); }
.ads-legend > span { display: flex; align-items: center; gap: 6px; }
.ads-sw { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.ads-seg-posts { background: var(--heat-3); }
.ads-seg-reels { background: var(--data); }
.ads-seg-ads { background: var(--stamp); }
.ads-readout { margin-top: 12px; }
.ads-readout .readout { display: block; }
.ads-bars { display: flex; align-items: flex-end; gap: 14px; height: 240px; margin-top: 14px; border-bottom: 1px solid var(--rule-strong); }
.ads-day {
  flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 2px; padding: 0; border: 0; background: transparent; cursor: default; min-width: 0;
}
.ads-day.on { background: #f1e4df; }
.ads-day:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
.ads-day-n { font-size: 12px; color: var(--ink-2); margin-bottom: 2px; }
.ads-day .ads-seg { display: block; width: 100%; max-width: 44px; }
.ads-day .ads-seg-ads { border-radius: 4px 4px 0 0; }
.ads-days { display: flex; gap: 14px; margin-top: 6px; }
.ads-days > span { flex: 1 1 0; text-align: center; font-size: 12px; color: var(--ink-3); }
.ads-handle { font-size: 12px; }
.ads-authors { margin-top: 24px; }
.ads-authors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 6px 40px; margin-top: 10px; }
.ads-author { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ads-author-name { flex: 0 0 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-author-bar { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ads-author-fill { display: block; height: 14px; background: var(--data); border-radius: 0 4px 4px 0; }
.ads-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 16px; margin-top: 20px; }
.ads-theme { padding: 18px 20px; background: var(--input-bg); border: 1px solid var(--rule); }
.ads-theme-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ads-theme-name { font: 600 20px/1.2 var(--cond); }
.ads-theme-n { font: 600 26px/1 var(--cond); }
.ads-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ads-phrases { gap: 6px; margin-top: 8px; }
.ads-chips .tag.notable { font-weight: 600; border-color: var(--ink); }
.ads-more { margin-top: 10px; }
.ads-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px 32px; margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--ink); }
.ads-gap { margin-top: 22px; }
.ads-off { margin-top: 14px; border-top: 2px solid var(--ink); }
.ads-off-row { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.ads-off-top { display: flex; justify-content: space-between; gap: 12px; }
.ads-off-top b { font-size: 15px; }
.ads-off-top .mono { font-size: 13px; }
.ads-off-ev { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.ads-buy { margin-top: 8px; font-size: 11px; padding: 2px 7px; transform: rotate(-2deg); }
.ads-link { flex-direction: column; gap: 2px; }
.ads-profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 24px; margin-top: 4px; }
@media (max-width: 720px) {
  .ads-bars, .ads-days { gap: 6px; }
  .ads-author-name { flex-basis: 120px; }
}