/* Brocare Studio, phase 5 pages: Funnels and links, Campaigns, Creative lab, Ads, Community, Offline, Onboarding,
   Team and audit, Billing, Settings. Tokens only (tokens.css); blues only, words always; no new motion. */

/* ---------- Shared bits ---------- */
.code { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.pad-b { padding: 0 var(--space-5) var(--space-5); }
.pad-x { padding: 0 var(--space-5) var(--space-4); }
.tag.req { background: var(--white); color: var(--navy-950); box-shadow: none; }
ul.rule-list { list-style: none; padding: 0; }
ul.rule-list > li { padding: 10px 0 10px var(--space-4); border-top: 1px solid var(--line-soft); color: var(--text-body); font-size: var(--fs-small); line-height: 1.5; position: relative; text-wrap: pretty; }
ul.rule-list > li:first-child { border-top: 0; }
ul.rule-list > li::before { content: ""; position: absolute; left: 0; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--ice-400); }
.ref-steps { margin: 0 0 var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-3); }
.ref-steps li { color: var(--text-body); font-size: var(--fs-small); line-height: 1.5; padding-left: var(--space-1); }
.ref-steps li::marker { color: var(--ice-400); font-weight: 700; }
.ref-steps b { display: block; color: var(--text-strong); }
.ref-steps span { color: var(--text-muted); text-wrap: pretty; }
.sub-h { margin-top: var(--space-4); }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 var(--space-3); }
.check-field.is-off { color: var(--text-dim); cursor: not-allowed; }
.check-field span { display: grid; gap: 2px; }
.check-field small { color: var(--text-dim); font-size: var(--fs-label); line-height: 1.35; }
.check-field.compact { min-height: 44px; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-label, fieldset.field > legend { display: block; margin-bottom: var(--space-2); color: var(--text-strong); font-size: var(--fs-small); font-weight: 600; padding: 0; }
.pick-scroll { max-height: min(46dvh, 420px); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-1); }
dialog.sheet.wide { --sheet-w: 640px; }
@media (min-width: 768px) { dialog.sheet.wide { width: min(640px, 100vw); max-width: 640px; } }

/* ---------- Off states (Ads, Community, Offline, Billing) ---------- */
.off-card { box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 2px transparent; }
.off-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.off-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--line-control); color: var(--text-muted); }
.off-card h2 { margin-bottom: var(--space-2); }
.off-card .reasons { margin: var(--space-3) 0; }
.need-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: need; }
.need-list li { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--line); }
.need-h { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--text-strong); }
.need-list small { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 767px) { .off-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }

/* ---------- Funnels and links ---------- */
.fn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.fn-head { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); }
.fn-head h3 { margin: 0; text-wrap: balance; }
.fn-head small { display: block; margin-top: 2px; font-size: var(--fs-label); overflow-wrap: anywhere; }
.lk-list { list-style: none; margin: 0; padding: 0; display: grid; }
.lk-row { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.lk-row:first-child { border-top: 0; padding-top: 0; }
.lk-main { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lk-plat { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--text-strong); }
.lk-code { padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--line-control); color: var(--text-strong); font-size: var(--fs-label); font-weight: 600; }
.lk-url { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-muted); font-size: var(--fs-small); line-height: 1.45; overflow-wrap: anywhere; word-break: break-all; }
.lk-url.inline { display: inline; padding: 0; background: none; }
.lk-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; color: var(--text-muted); font-size: var(--fs-small); }
.lk-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lb-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
#lb-out { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
#lb-out .lk-list { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line-accent); }

/* ---------- Campaigns ---------- */
.camp-t td:first-child { min-width: 200px; }
.use-cell { min-width: 150px; }
.use-cell .meter { margin-bottom: var(--space-1); }
.back-link { display: inline-flex; gap: var(--space-1); align-items: center; min-height: 44px; color: var(--text-link); font-size: var(--fs-small); text-decoration: none; }
.back-link:hover { color: var(--text-strong); }
.tl { display: grid; gap: var(--space-4); }
.tl-lane h3 { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-2); font-size: var(--fs-small); color: var(--text-strong); }
.tl-items { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.tl-items::before { content: ""; position: absolute; left: 0; top: var(--space-1); bottom: var(--space-1); width: 1px; background: var(--line); } /* the channel's time rail */
.tl-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); color: var(--text-body); text-decoration: none; font-size: var(--fs-small); }
.tl-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tl-chip .num { color: var(--text-dim); }
@media (hover: hover) and (pointer: fine) { .tl-chip:hover { background: var(--surface-hover); } }
.tl-empty { font-size: var(--fs-small); padding: var(--space-2) 0; }
@media (max-width: 767px) { .tl-chip { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Creative lab and test log ---------- */
.test-list, .win-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.test-head { display: flex; gap: var(--space-3); justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); }
.test-head h3 { margin: var(--space-2) 0 2px; text-wrap: balance; }
.test-head .tag { margin-right: var(--space-1); }
.test-head small { font-size: var(--fs-label); }
.test-t tr.is-winner th, .test-t tr.is-winner td { background: var(--ice-400-a07); color: var(--text-strong); }
.test-t th[scope="row"] { white-space: nowrap; }
.test-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.win-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.win-row .glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--ice-400-a14); color: var(--ice-400); }
.win-row small { display: block; color: var(--text-muted); font-size: var(--fs-small); }
.var-block { border: 0; margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: var(--space-3); }
.var-block > legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
#ts-vars { display: grid; gap: var(--space-3); }
@media (max-width: 767px) {
  .test-head { flex-direction: column; }
  .win-row { grid-template-columns: 40px minmax(0, 1fr); }
  .win-row > .btn { grid-column: 1 / -1; justify-self: start; }
  .field-row.three { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Onboarding ---------- */
.ob-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ob-steps { position: sticky; top: calc(64px + var(--space-4)); }
.ob-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ob-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 var(--space-2); width: 100%; min-height: 44px; padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--text-muted); text-align: left; font: inherit; font-size: var(--fs-small); cursor: pointer; }
.ob-step .ob-n { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-control); font-size: var(--fs-label); font-weight: 600; }
.ob-step .ob-t { color: var(--text-body); font-weight: 600; }
.ob-step small { color: var(--text-dim); font-size: var(--fs-label); }
.ob-step[aria-current="step"] { background: var(--surface-selected); }
.ob-step[aria-current="step"] .ob-n { background: var(--ice-400); color: var(--navy-950); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .ob-step:hover { background: var(--surface-hover); } }
.ob-card h2 { margin: var(--space-4) 0 var(--space-2); }
.ob-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; color: var(--text-dim); font-size: var(--fs-small); }
.ob-form { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.q-label { color: var(--text-strong); font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.q-label .tag { margin-left: var(--space-1); vertical-align: 1px; }
.ob-q .help { color: var(--text-dim); }
.ob-q .field-error { display: flex; gap: var(--space-1); align-items: flex-start; }
.yn { display: inline-flex; flex-wrap: wrap; }
.yn-opt { position: relative; }
.yn-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.yn-opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full); color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }
.yn-opt input:checked + span { background: var(--surface-raised); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line-accent); }
.yn-opt input:focus-visible + span { outline: 2px solid var(--ice-400); outline-offset: 2px; }
.row-editor { display: grid; gap: var(--space-3); }
.re-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) 44px; gap: var(--space-2) var(--space-3); align-items: end; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--line); }
.re-cell { display: grid; gap: var(--space-1); min-width: 0; }
.re-cell > label { color: var(--text-dim); font-size: var(--fs-label); font-weight: 600; }
.re-drop { justify-self: end; }
.row-editor > .btn { justify-self: start; }
.ob-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.ob-nav .fine { flex: 1 1 160px; margin: 0; }
.ob-block { margin-top: var(--space-5); }
.ob-block h3 { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.ob-block.done { padding: var(--space-4); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line-accent); background: var(--ice-400-a07); }
.nc-card { padding: 0; margin-bottom: var(--space-5); }
.nc-card > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; color: var(--text-strong); }
.nc-card > summary::-webkit-details-marker { display: none; }
.nc-card > summary span { display: inline-flex; gap: var(--space-2); align-items: center; }
.nc-card[open] > summary .chev { transform: rotate(180deg); }
.nc-card > :not(summary) { margin-left: var(--space-5); margin-right: var(--space-5); }
.nc-card > .dlg-actions { margin-bottom: var(--space-5); }
.ready-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ready-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.ready-row:first-child { border-top: 0; }
.ready-name { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--text-strong); }
.ready-miss { grid-column: 1 / -1; margin: 0; padding-left: var(--space-6); color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
.ready-row .fine { grid-column: 1 / -1; margin: 0; padding-left: var(--space-6); }
@media (max-width: 1099px) {
  .ob-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-steps { position: static; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ob-steps ol { display: flex; gap: var(--space-2); }
  .ob-step { width: auto; white-space: nowrap; grid-template-columns: 28px auto; }
  .ob-step small { display: none; }
  .ob-step .ob-n { grid-row: auto; }
}
@media (max-width: 767px) {
  .re-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .re-row .re-cell { grid-column: 1; }
  .re-row .re-drop { grid-column: 2; grid-row: 1; align-self: start; }
  .ob-nav .btn { flex: 1 1 auto; }
  .ob-nav .fine { order: 3; flex-basis: 100%; }
}

/* ---------- Team and audit ---------- */
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tool-list li { display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.tool-list li:first-child { border-top: 0; }
.tool-list li > span { display: grid; gap: 2px; min-width: 0; }
.tool-list small { color: var(--text-dim); font-size: var(--fs-label); line-height: 1.4; }
.au-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(200px, 1.4fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.au-filters > .field { min-width: 0; }
.au-filters .input { width: 100%; min-width: 0; max-width: 100%; }
.au-t td:first-child { width: 1%; }
@media (max-width: 1099px) { .au-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .au-filters { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Settings ---------- */
.set-t td:first-child { min-width: 220px; }
.set-t td:last-child { white-space: nowrap; }

/* ---------- Quality pass (2026-10-27): 44px targets everywhere ---------- */
.nav-item { min-height: 44px; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.top .m-brand { min-height: 44px; min-width: 44px; }
.fine a:not(.btn), .intel-card a:not(.btn) { display: inline-block; min-height: 24px; padding-block: 2px; }
/* Library thumbnails: the hook as art text, not a heading (no skipped heading level). */
.slide .slide-h { margin: 0; font: 700 clamp(20px, 7.4cqi, 30px)/1.08 var(--font-display); letter-spacing: -.01em; color: var(--white); }
.media .slide .slide-h { font-size: clamp(14px, 11cqi, 26px); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
/* Platform chrome buttons keep a visible keyboard focus. */
.li-see:focus-visible, .ig-caption .cap-more:focus-visible { outline: 2px solid var(--ice-400); outline-offset: 2px; border-radius: 4px; }
.nc-card { margin-top: var(--space-5); margin-bottom: 0; }
/* Segmented controls and switches: 44px targets (quality pass). */
.seg > button, .seg > a { min-height: 44px; }
.toggle::before { content: ""; position: absolute; inset: -8px -2px; }
/* Text links inside copy and tables: at least 24px tall (WCAG 2.5.8). */
.linkish { display: inline-block; min-height: 24px; line-height: 24px; }
#main p a:not(.btn), #main small a:not(.btn), #main td a:not(.btn), #main li > a:not(.btn):not(.row):not(.tl-chip) { display: inline-block; min-height: 24px; line-height: 24px; }
.li-see, .ig-caption .cap-more { min-height: 24px; line-height: 24px; }
.card-head a.meta, .live-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.toast .btn-sm { min-height: 36px; }
@media (max-width: 767px) { .day a, .day [role="button"], .slot { min-height: 24px; } }
/* The 44px hit area of small buttons is a ::before outside the button: only the primary button clips (its sweep). */
.btn:not(.btn-primary) { overflow: visible; }
/* The check step keeps its place while the preview loads, so the buttons below it do not jump. */
#ob-check.is-loading { min-height: 640px; display: grid; gap: var(--space-4); align-content: start; }
/* The audit list never widens the page on a phone: its table scrolls inside its card. */
#au-box { display: grid; min-width: 0; }
#au-box > * { min-width: 0; max-width: 100%; }
.au-t td { overflow-wrap: anywhere; }
.slide.still .slide-h { font-size: clamp(22px, 8.6cqi, 34px); }