/* Consent banner, tracked-link highlight and the creator's Tracking page. Tokens come from base.css. */

/* ---- Asking first ---- */
/* The outer box only places the banner, so the mascot can sit on top of the card; the card inside scrolls. */
.signal-consent{position:fixed;z-index:70;left:16px;right:16px;bottom:16px;max-width:880px;margin:0 auto;animation:signal-in .25s ease}
.signal-consent-card{max-height:calc(100dvh - 20px);overflow-y:auto;display:flex;align-items:center;gap:24px;padding:22px 24px;border-radius:20px;background:var(--white);border:1px solid #d5dbc8;box-shadow:0 10px 40px #151b1526}
/* Decorative: sits on the card's top edge, its ground shadow resting on the border. */
.signal-consent-mascot{position:absolute;z-index:1;left:26px;bottom:calc(100% - 9px);width:116px;height:auto;pointer-events:none;user-select:none;transform-origin:50% 100%;animation:signal-mascot .55s .2s cubic-bezier(.34,1.56,.64,1) both,signal-munch 4.5s 2.5s ease-in-out infinite}
/* He chomps whichever answer you point at, the same for every button: he has no favourite. */
.signal-consent:has(.signal-consent-actions .btn:hover,.signal-consent-actions .btn:focus-visible) .signal-consent-mascot{animation:signal-chomp .36s ease-in-out infinite alternate}
.signal-consent h2{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.signal-consent p{font-size:.8125rem;line-height:1.6;color:var(--secondary);max-width:58ch}
.signal-consent p a{color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:color .15s}.signal-consent p a:hover,.signal-consent p a:focus-visible{color:var(--ink,#151b15)}
.signal-consent-options{display:grid;gap:10px;margin-top:14px}.signal-consent-options[hidden]{display:none}
.signal-consent-options label{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;line-height:1.55;color:var(--secondary);cursor:pointer}
.signal-consent-options input{accent-color:#5d743a;margin-top:3px;flex-shrink:0;width:16px;height:16px;cursor:pointer}
.signal-consent-options strong{color:var(--ink,#151b15);font-weight:600}
.signal-consent-actions{display:flex;gap:10px;flex-shrink:0}
/* Both answers carry the same weight: same size, same style, side by side. */
.signal-consent-actions .btn{min-width:124px}
@keyframes signal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes signal-munch{0%,86%,100%{transform:none}89%{transform:translateY(-3px) rotate(-3deg)}92%{transform:translateY(0) rotate(2deg)}95%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes signal-chomp{from{transform:scale(1,1)}to{transform:scale(1.06,.94) rotate(-2deg)}}
@keyframes signal-mascot{from{opacity:0;transform:translateY(-16px) scale(.86) rotate(-6deg)}to{opacity:1;transform:none}}
@media(max-width:900px){.signal-consent{left:10px;right:10px;bottom:10px}.signal-consent-card{flex-direction:column;align-items:stretch;gap:16px;padding:20px}.signal-consent-mascot{left:auto;right:18px;width:92px;bottom:calc(100% - 7px)}.signal-consent-actions .btn{flex:1;min-width:0;padding-inline:8px;white-space:nowrap;font-size:.8125rem}}

/* The reward a tracked link points at. */
.signal-linked{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--media-radius)}

/* ---- Tracking page ---- */
.sg-page{max-width:1180px;padding-bottom:110px}
.sg-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:35px 0 28px;flex-wrap:wrap}
.sg-heading h1{font-size:clamp(2.5rem,6vw,4.6rem);letter-spacing:-.06em;line-height:1.04;margin:15px 0}
.sg-heading p{color:var(--muted)}
.sg-heading-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sg-range{display:inline-flex;padding:4px;border-radius:14px;background:#e9eade}
.sg-range button{min-height:38px;padding:8px 14px;border-radius:10px;background:transparent;font-size:.75rem;font-weight:600;color:var(--secondary);transition:background .18s ease,color .18s ease}
.sg-range button:hover{background:#dfe2d2}
.sg-range button[aria-pressed="true"]{background:var(--ink);color:var(--white)}

.sg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.sg-card{padding:26px;border:1px solid #d5dbc8;border-radius:20px;background:var(--white);margin-bottom:18px;min-width:0}
.sg-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:20px}
.sg-card-head h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.sg-card-head p{font-size:.75rem;line-height:1.6;color:var(--muted);max-width:62ch}
.sg-empty{font-size:.8125rem;line-height:1.7;color:var(--muted);padding:6px 0 4px;max-width:64ch}

.sg-funnel{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sg-funnel li{display:grid;gap:7px}
.sg-funnel-bar{height:10px;border-radius:6px;background:#eceee2;overflow:hidden}
.sg-funnel-bar span{display:block;height:100%;border-radius:6px;background:var(--ink);transition:width .3s ease}
.sg-funnel li:last-child .sg-funnel-bar span{background:#7c9a2e}
.sg-funnel-text{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sg-funnel-text strong{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sg-funnel-text span{font-size:.8125rem;font-weight:600}
.sg-funnel-text small{font-size:.6875rem;color:var(--muted);flex-basis:100%}
.sg-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.sg-card-head + .sg-totals{margin-top:0;padding-top:0;border-top:0}
.sg-totals div{min-width:0}
.sg-totals dt{font-size:.6875rem;color:var(--muted);margin-bottom:4px}
.sg-totals dd{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.sg-chart{display:block;width:100%;height:190px;overflow:visible}
.sg-bar{fill:#c9cfb9}.sg-bar-pledge{fill:#7c9a2e}
.sg-chart g:hover .sg-bar,.sg-chart g:hover .sg-bar-pledge{fill:var(--ink)}
.sg-axis{stroke:var(--line);stroke-width:.25}
.sg-chart-range{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--muted);margin-top:8px}
.sg-key{display:inline-block;width:9px;height:9px;border-radius:3px;margin:0 5px 0 10px;vertical-align:baseline}
.sg-key-visits{background:#c9cfb9;margin-left:0}.sg-key-pledges{background:#7c9a2e}

.sg-table-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px}
.sg-table{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.sg-table th,.sg-table td{padding:11px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.sg-table thead th{font-size:.6875rem;font-weight:600;color:var(--muted);padding-top:0}
.sg-table th:first-child,.sg-table td:first-child{text-align:left;padding-left:0}
.sg-table tbody th{font-weight:600;white-space:normal;word-break:break-word;min-width:130px}
.sg-table tbody tr:last-child th,.sg-table tbody tr:last-child td{border-bottom:0}
.sg-log td{text-align:left;white-space:normal}.sg-log td small{display:block;color:var(--muted);font-size:.6875rem;margin-top:3px}

.sg-links{list-style:none;margin:0 0 6px;padding:0}
.sg-link{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:14px 22px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.sg-link:first-child{padding-top:0}
.sg-link:last-child{border-bottom:0}
.sg-link h3{font-size:.9375rem;font-weight:600;margin-bottom:3px}
.sg-link-url{font-size:.75rem;color:var(--secondary);word-break:break-all}
.sg-link-tags{font-size:.6875rem;color:var(--muted);margin-top:3px;line-height:1.6}
.sg-link-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.sg-link-stats dt{font-size:.625rem;color:var(--muted)}
.sg-link-stats dd{margin:0;font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.sg-link-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sg-link-archived .sg-link-main,.sg-link-archived .sg-link-stats{opacity:.62}

.sg-disclosure{border-top:1px solid var(--line);padding:4px 0}
.sg-disclosure:first-of-type{margin-top:6px}
.sg-disclosure>summary,.sg-pixel>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;font-size:.8125rem;font-weight:600;list-style:none;border-radius:8px}
.sg-disclosure>summary::-webkit-details-marker,.sg-pixel>summary::-webkit-details-marker{display:none}
.sg-disclosure>summary::after,.sg-pixel>summary::after{content:'+';font-size:1.125rem;font-weight:400;color:var(--muted);margin-left:auto;padding-left:12px}
.sg-disclosure[open]>summary::after,.sg-pixel[open]>summary::after{content:'–'}
.sg-form{padding:10px 0 16px}
.sg-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.sg-wide{grid-column:1/-1}

.sg-pixels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sg-pixel{border-top:1px solid var(--line)}
.sg-pixel-name{flex:1;min-width:0}
.sg-pixel>summary::after{margin-left:0}
.sg-pixel-body{padding:6px 0 4px}
.sg-status{display:inline-block;padding:3px 9px;border-radius:999px;background:#ecede4;color:var(--secondary);font-size:.6875rem;font-weight:600;white-space:nowrap}
.sg-status-on{background:#e1efc0;color:#35490f}
.sg-status-part{background:#f1e8d8;color:#665030}
.sg-status-bad{background:#f9e8e2;color:#932f25}
.sg-check{display:flex;align-items:center;gap:9px;font-size:.75rem;margin:-8px 0 18px;cursor:pointer}
.sg-check input{width:17px;height:17px;accent-color:var(--ink)}
.sg-fieldset{border:0;padding:0;margin:0;min-width:0}
.sg-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 14px}
.sg-results{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.sg-results li{display:flex;gap:9px;align-items:flex-start;padding:11px 14px;border-radius:12px;font-size:.75rem;line-height:1.6}
.sg-results svg{flex-shrink:0;margin-top:2px}
.sg-ok{background:#e9efda;color:var(--secondary)}.sg-bad{background:#f9e8e2;color:#7a2a21}
.sg-ask{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.sg-ask h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.sg-ask p{font-size:.8125rem;line-height:1.6;color:var(--secondary);max-width:62ch}
.sg-ask .btn{flex-shrink:0}
.sg-qr{display:block;width:240px;height:240px;margin:6px auto 22px;border-radius:var(--media-radius-small);border:1px solid var(--line)}

@media(max-width:1023px){.sg-grid,.sg-pixels{grid-template-columns:minmax(0,1fr)}.sg-link{grid-template-columns:minmax(0,1fr)}.sg-link-actions{justify-content:flex-start}}
@media(max-width:640px){.sg-card{padding:20px 18px}.sg-fields{grid-template-columns:minmax(0,1fr)}.sg-heading{padding-top:24px}.sg-heading-actions{width:100%;justify-content:space-between}.sg-chart{height:150px}}
/* No room above the card on short screens. */
@media(max-height:560px){.signal-consent-mascot{display:none}}
@media(prefers-reduced-motion:reduce){.signal-consent,.signal-consent .signal-consent-mascot,.signal-consent:has(.btn) .signal-consent-mascot{animation:none}.sg-funnel-bar span,.sg-range button{transition:none}}

/* Ad spend */
.sg-spend-table{margin-top:22px}
.sg-card .tiny-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;padding:1px 5px;border-radius:5px;background:#ecede4;word-break:break-all}