/* Targeted Pro portal polish: the detail-view scope card, the New collection
   date window and the confirmation summary. Loaded after every portal
   stylesheet. No inline styles: motion is the Web Animations API in the
   modules or CSS here, and reduced motion removes it. The palette follows the
   existing Targeted Pro hero and the website's "Introducing Targeted Pro". */
.tpx-scope-card[hidden], .tpx-review-scope[hidden], .tpx-date-step[hidden],
.tpx-categories[hidden], .tpx-categories [hidden],
label.tpx-category[hidden], label.tpx-app-choice[hidden] { display: none !important; }

/* Brand line: "Targeted" with a gradient "Pro". */
.tpx-pro-brand { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
.tpx-pro-gradient { background: linear-gradient(100deg, #b4f1f5, #64d4ec 45%, #5ee7c9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Chips and app badges on the dark Targeted Pro surfaces. */
.tpx-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 30px; box-sizing: border-box; padding: 5px 12px; border: 1px solid rgba(139, 233, 242, .36); border-radius: 999px; background: rgba(139, 233, 242, .09); color: #ecf9fc; font-size: 12.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tpx-chip svg { flex: none; width: 15px; height: 15px; color: #64d4ec; }
.tpx-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tpx-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; box-sizing: border-box; margin: 0; padding: 4px 11px 4px 5px; border: 1px solid rgba(160, 214, 232, .25); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #e9f3f8; font-size: 12px; font-weight: 650; line-height: 1.3; }
.tpx-badge-icon { flex: none; width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.tpx-badge-glyph { flex: none; width: 22px; height: 22px; box-sizing: border-box; padding: 3px; border-radius: 6px; background: rgba(139, 233, 242, .13); color: #64d4ec; }

/* ---- Detail view: the agreed-scope card ---------------------------------- */
html #detail-view .tpx-scope-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 16px; min-width: 0;
  margin: 0 0 26px; padding: 22px 24px 20px;
  border: 1px solid #1f4a63; border-radius: 18px;
  color: #f3f8fc;
  background: radial-gradient(ellipse at 100% 0, rgba(27, 83, 103, .66), transparent 58%), linear-gradient(125deg, #0e2136, #133754);
  box-shadow: 0 14px 34px rgba(8, 28, 44, .18);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
html #detail-view .tpx-scope-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background: linear-gradient(125deg, transparent 63%, rgba(113, 211, 226, .1) 63%, rgba(113, 211, 226, .03) 81%, transparent 81%); }
.tpx-scope-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 82% 18%, rgba(94, 231, 201, .34), transparent 62%); box-shadow: inset 0 0 0 1px rgba(139, 233, 242, .55); }
.tpx-scope-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.tpx-scope-titles { min-width: 0; }
.tpx-scope-card .tpx-pro-brand { color: #fff; }
html #detail-view .tpx-scope-card .tpx-scope-title { margin: 7px 0 5px; padding: 0; border: 0; color: #fff; font-size: 22px; font-weight: 720; letter-spacing: -.4px; line-height: 1.15; }
html #detail-view .tpx-scope-card .tpx-scope-lead { margin: 0; color: #b4c9d7; font-size: 12.5px; line-height: 1.55; }

.tpx-seal-wrap { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 112px; text-align: center; }
.tpx-seal { position: relative; display: grid; place-items: center; width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%; }
.tpx-seal > svg { grid-area: 1 / 1; width: 30px; height: 30px; }
.tpx-seal-ring { position: absolute; inset: -8px; border: 1px solid rgba(94, 231, 201, .6); border-radius: 50%; opacity: 0; pointer-events: none; }
.tpx-seal[data-sealed="true"] { color: #fff; background: radial-gradient(circle at 34% 28%, #8af3dc, #22b89c 58%, #11806f); box-shadow: 0 0 0 6px rgba(94, 231, 201, .13), 0 0 36px rgba(94, 231, 201, .3), 0 10px 22px rgba(4, 30, 26, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
.tpx-seal[data-sealed="true"] .tpx-seal-check { stroke-width: 2.7; }
.tpx-seal[data-sealed="true"] .tpx-seal-pending, .tpx-seal[data-sealed="false"] .tpx-seal-check { display: none; }
.tpx-seal[data-sealed="false"] { color: #7fb3c6; border: 1.5px dashed rgba(143, 195, 214, .5); background: rgba(255, 255, 255, .03); }
.tpx-seal[data-sealed="false"] > svg { width: 26px; height: 26px; }
html #detail-view .tpx-seal-label { margin: 10px 0 0; color: #fff; font-size: 13.5px; font-weight: 760; letter-spacing: .01em; line-height: 1.25; }
html #detail-view .tpx-seal-detail { margin: 0; color: #9ef0da; font-size: 10.5px; font-weight: 650; letter-spacing: .03em; line-height: 1.4; }
html #detail-view .tpx-seal-wrap[data-sealed="false"] .tpx-seal-label { color: #c9dbe6; font-size: 12px; font-weight: 650; }
html #detail-view .tpx-seal-wrap[data-sealed="false"] .tpx-seal-detail { max-width: 124px; color: #84a3b7; font-weight: 500; }

html #detail-view .tpx-facts { display: grid; margin: 0; padding: 0; border-top: 1px solid rgba(160, 214, 232, .18); }
html #detail-view .tpx-fact { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 8px 16px; align-items: start; margin: 0; padding: 13px 0; border-bottom: 1px solid rgba(160, 214, 232, .18); }
html #detail-view .tpx-fact-term { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 7px; color: #8fc3d6; font-size: 10.5px; font-weight: 760; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.tpx-fact-term svg { flex: none; width: 15px; height: 15px; color: #64d4ec; }
html #detail-view .tpx-fact-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; margin: 0; }
html #detail-view .tpx-fact-note { color: #b4c9d7; font-size: 12px; line-height: 1.5; }

.tpx-verification { display: grid; gap: 9px; min-width: 0; }
.tpx-verification-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.tpx-verification-label { color: #fff; font-size: 13.5px; font-weight: 720; }
.tpx-scope-card[data-state="verified"] .tpx-verification-label { color: #9ef0da; }
.tpx-scope-card[data-state="attention"] .tpx-verification-label, .tpx-scope-card[data-state="expired"] .tpx-verification-label { color: #ffc1b6; }
.tpx-verification-time { color: #b4c9d7; font-size: 12px; }
.tpx-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 19px; }
.tpx-track-step { position: relative; display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .13); }
.tpx-track-step.filled { background: linear-gradient(90deg, #64d4ec, #5ee7c9); }
.tpx-track-step.current { background: linear-gradient(90deg, rgba(100, 212, 236, .35), #64d4ec 50%, rgba(100, 212, 236, .35)); background-size: 200% 100%; animation: tpx-current 2.4s linear infinite; }
html #detail-view .tpx-track-step .collection-stage-label { position: absolute; top: 9px; left: 0; display: block; transform: none; color: #7e9bb0; font-size: 10px; font-weight: 650; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; }
html #detail-view .tpx-track-step.filled .collection-stage-label { color: #c4ecf4; }
html #detail-view .tpx-verification-caption { margin: 0; color: #b4c9d7; font-size: 12px; line-height: 1.55; }
@keyframes tpx-current { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 560px) {
  html #detail-view .tpx-scope-card { gap: 14px; margin-bottom: 22px; padding: 18px 16px 16px; border-radius: 16px; }
  html #detail-view .tpx-scope-card .tpx-scope-title { font-size: 19px; }
  .tpx-seal-wrap { min-width: 84px; }
  .tpx-seal { width: 52px; height: 52px; }
  .tpx-seal > svg { width: 24px; height: 24px; }
  html #detail-view .tpx-seal-wrap[data-sealed="false"] .tpx-seal-detail { display: none; }
  html #detail-view .tpx-fact { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 11px 0; }
  html #detail-view .tpx-fact-term { padding-top: 0; }
}

/* ---- New collection: data choices as cards -------------------------------- */
html dialog.tpx-flow .targeted-request-details.tpx-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html dialog.tpx-flow .targeted-request-details.tpx-categories > * { grid-column: 1 / -1; order: 2; }
html dialog.tpx-flow .targeted-request-details.tpx-categories > legend { order: -1; }
html dialog.tpx-flow .targeted-request-details.tpx-categories > .hint,
html dialog.tpx-flow .targeted-request-details.tpx-categories > .request-warning { order: 0; margin-bottom: 0; }
html dialog.tpx-flow .targeted-request-details.tpx-categories > label.tpx-category {
  position: relative; grid-column: auto; order: 1;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; align-items: center; gap: 10px 12px;
  min-height: 66px; box-sizing: border-box; margin: 0; padding: 12px 14px;
  border: 1px solid #cfe0ea; border-radius: 13px; background: #fff; color: #16384e;
  font-weight: 650; text-align: left; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
html dialog.tpx-flow .targeted-request-details > label.tpx-category:hover { border-color: #8fcbe0; box-shadow: 0 6px 16px rgba(14, 52, 75, .07); }
html dialog.tpx-flow .targeted-request-details > label.tpx-category:has(input:checked) { border-color: #1f9cc0; background: linear-gradient(180deg, #f4fbfe, #eaf7fb); box-shadow: 0 0 0 3px rgba(100, 212, 236, .22); }
html dialog.tpx-flow .targeted-request-details > label.tpx-category:has(input:focus-visible) { outline: 3px solid #68cae7; outline-offset: 2px; }
html dialog.tpx-flow label.tpx-category > .tpx-category-icon { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #eaf5fa; color: #0b6f8c; transition: background-color .16s ease, color .16s ease; }
html dialog.tpx-flow label.tpx-category > .tpx-category-icon svg { width: 20px; height: 20px; }
html dialog.tpx-flow label.tpx-category:has(input:checked) > .tpx-category-icon { background: linear-gradient(135deg, #123552, #0f2a40); color: #8be9f2; }
html dialog.tpx-flow label.tpx-category > .tpx-category-copy { grid-column: 2; grid-row: 1; display: grid; gap: 2px; min-width: 0; }
html dialog.tpx-flow label.tpx-category > .tpx-category-copy > span { color: #10314a; font-size: 14px; font-weight: 700; line-height: 1.3; }
html dialog.tpx-flow label.tpx-category .tpx-category-note { color: #5c7487; font-size: 11.5px; font-weight: 500; line-height: 1.35; }
html dialog.tpx-flow label.tpx-category > input[type=checkbox] { grid-column: 3; grid-row: 1; justify-self: end; width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; accent-color: #0b84a5; cursor: pointer; }
html dialog.tpx-flow label.tpx-app-choice { align-items: center; }
html dialog.tpx-flow .tpx-app-choice-icon { flex: none; width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }

/* ---- New collection: the date window step --------------------------------- */
html dialog.tpx-flow .targeted-pro-scope .refined-choices.tpx-single { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
html dialog.tpx-flow .tpx-date-step { margin: 18px 0 6px; padding: 18px 18px 16px; border: 1px solid #c3e2ed; border-radius: 15px; background: linear-gradient(180deg, #f6fcfe, #edf7fb); box-shadow: 0 6px 18px rgba(14, 52, 75, .05); transition: border-color .2s ease, box-shadow .2s ease; }
html dialog.tpx-flow .tpx-date-step[data-mode="range"] { border-color: #8dd0e4; box-shadow: 0 0 0 3px rgba(100, 212, 236, .16), 0 8px 22px rgba(14, 52, 75, .06); }
html dialog.tpx-flow .tpx-date-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
html dialog.tpx-flow .tpx-date-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #123552, #0f2a40); color: #8be9f2; }
html dialog.tpx-flow .tpx-date-icon svg { width: 21px; height: 21px; }
html dialog.tpx-flow .tpx-date-titles { min-width: 0; }
html dialog.tpx-flow .tpx-date-eyebrow { margin: 0; color: #0b7d9c; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
html dialog.tpx-flow .tpx-date-title { margin: 1px 0 0; padding: 0; color: #0d2a3f; font-size: 17px; font-weight: 750; letter-spacing: -.2px; line-height: 1.25; }
html dialog.tpx-flow .tpx-date-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #0f2a40; color: #b4f1f5; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
html dialog.tpx-flow .tpx-date-badge svg { width: 13px; height: 13px; }
html dialog.tpx-flow .tpx-date-lead { margin: 12px 0 14px; color: #4f6a7d; font-size: 12.5px; line-height: 1.6; }
html dialog.tpx-flow .targeted-pro-scope .tpx-date-step > label { display: flex; flex-direction: column; gap: 7px; max-width: 440px; margin: 0; color: #365568; font-size: 12px; font-weight: 650; }
html dialog.tpx-flow .targeted-pro-scope .tpx-date-step .refined-date-range { margin: 14px 0 0; }
html dialog.tpx-flow .tpx-date-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 30px; margin: 14px 0 0; padding-top: 13px; border-top: 1px dashed #c9e0ea; }
html dialog.tpx-flow .tpx-date-summary .tpx-chip { border-color: #0f2a40; background: #0f2a40; color: #ecf9fc; }
html dialog.tpx-flow .tpx-date-meta { color: #4f6a7d; font-size: 12.5px; font-weight: 600; }
html dialog.tpx-flow .tpx-date-summary[data-state="order"] .tpx-date-meta { color: #b3412f; }

/* ---- New collection: the confirmation summary ---------------------------- */
html dialog.tpx-flow .tpx-review-scope {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 14px; margin: 16px 0 18px; padding: 20px 22px;
  border: 1px solid #1f4a63; border-radius: 18px; color: #f3f8fc;
  background: radial-gradient(ellipse at 100% 0, rgba(27, 83, 103, .66), transparent 58%), linear-gradient(125deg, #0e2136, #133754);
  box-shadow: 0 14px 32px rgba(8, 28, 44, .16);
}
html dialog.tpx-flow .tpx-review-scope::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background: linear-gradient(125deg, transparent 66%, rgba(113, 211, 226, .1) 66%, rgba(113, 211, 226, .03) 82%, transparent 82%); }
html dialog.tpx-flow .tpx-review-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
html dialog.tpx-flow .tpx-review-scope .tpx-pro-brand { color: #fff; }
html dialog.tpx-flow .tpx-review-title { margin: 6px 0 0; padding: 0; color: #fff; font-size: 20px; font-weight: 720; letter-spacing: -.35px; line-height: 1.2; }
html dialog.tpx-flow .tpx-review-mark { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid rgba(139, 233, 242, .36); border-radius: 14px; background: linear-gradient(135deg, rgba(94, 231, 201, .22), rgba(100, 212, 236, .12)); color: #9ef0da; }
html dialog.tpx-flow .tpx-review-mark svg { grid-area: 1 / 1; width: 28px; height: 28px; }
html dialog.tpx-flow .tpx-review-mark .tpx-review-check { width: 13px; height: 13px; stroke-width: 2.8; }
html dialog.tpx-flow .tpx-review-lead { max-width: 660px; margin: 0; color: #c3d6e2; font-size: 13px; line-height: 1.6; }
html dialog.tpx-flow .tpx-review-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html dialog.tpx-flow .tpx-review-row { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(160, 214, 232, .18); border-radius: 12px; background: rgba(255, 255, 255, .04); }
html dialog.tpx-flow .tpx-review-row:first-child { grid-column: 1 / -1; }
html dialog.tpx-flow .tpx-review-term { display: flex; align-items: center; gap: 7px; margin: 0; color: #8fc3d6; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
html dialog.tpx-flow .tpx-review-term svg { width: 14px; height: 14px; color: #64d4ec; }
html dialog.tpx-flow .tpx-review-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
html dialog.tpx-flow .tpx-review-note { flex-basis: 100%; color: #b4c9d7; font-size: 11.5px; line-height: 1.45; }
html dialog.tpx-flow .tpx-review-foot { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(160, 214, 232, .16); color: #b4c9d7; font-size: 12px; line-height: 1.5; }
html dialog.tpx-flow .tpx-review-foot svg { flex: none; width: 14px; height: 14px; color: #8be9f2; }

@media (max-width: 620px) {
  html dialog.tpx-flow .targeted-request-details.tpx-categories { grid-template-columns: minmax(0, 1fr); }
  html dialog.tpx-flow .tpx-date-step { padding: 16px 14px 14px; }
  html dialog.tpx-flow .tpx-date-head { grid-template-columns: 40px minmax(0, 1fr); }
  html dialog.tpx-flow .tpx-date-badge { grid-column: 1 / -1; justify-self: start; }
  html dialog.tpx-flow .tpx-review-scope { padding: 18px 16px; }
  html dialog.tpx-flow .tpx-review-rows { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tpx-scope-card, .tpx-scope-card *, .tpx-flow label.tpx-category, .tpx-flow label.tpx-category *,
  .tpx-date-step, .tpx-date-step *, .tpx-review-scope, .tpx-review-scope * { animation: none !important; transition: none !important; }
}