/* Creator depth: Stats / analytics / Live / deals / merch on the Clipt phone, plus the editor, result and summary extras.
   Light "Clipt" app inside the phone, dark studio in the editor. Uses the tokens from style.css. */

/* ---- tab bar: seven tabs ---- */
.ph-tabs { grid-template-columns: repeat(7, 1fr); padding-left: .2em; padding-right: .2em }
.ph-tabs button { font-size: .66em; letter-spacing: -.01em }
.ph-tabs svg { width: 2.15em; height: 2.15em }
.ph-tabs em { right: 12% }

/* ---- shared chips ---- */
.pol { display: inline-flex; align-items: center; gap: .4em; font-size: .78em; font-weight: 800; padding: .2em .7em .2em .25em; border-radius: 1.2em; background: #e7f6ec; color: #1e6b3a; white-space: nowrap }
.pol:not(:has(i)) { padding-left: .7em }
.pol i { font-style: normal; font-weight: 900; min-width: 1.7em; height: 1.7em; padding: 0 .25em; border-radius: 1em; display: inline-grid; place-items: center; background: #34a866; color: #fff; font-size: .9em }
.pol-warn { background: #fff1c9; color: #7a5a00 } .pol-warn i { background: #f2b51e; color: #3a2900 }
.pol-bad { background: #ffe1d8; color: #a43a1c } .pol-bad i { background: #e0483b; color: #fff }
.pol-limited i { border-radius: 50%; width: 1.7em; padding: 0 }
.mut { color: var(--clipt-mut) !important }
.cr-stats .bad { color: #c8442a }

/* ---- svg retention graph ---- */
.rgraph { width: 100%; height: auto; display: block; overflow: visible }
.rgraph .gl { stroke: #ecdcd2; stroke-width: 1 } .rgraph .gl.d { stroke-dasharray: 3 4 }
.rgraph .ln { fill: none; stroke: var(--pink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.1s .15s ease-out forwards }
.rgraph .ar { opacity: 0; animation: fade .6s .8s forwards }
.rgraph .ax { font: 600 7px var(--mono); fill: #b59ea9 }
.rgraph .mk { fill: #fff; stroke-width: 2.2 } .rgraph .mk.exit { stroke: #e0483b } .rgraph .mk.spike { stroke: #34a866 }
.rgraph .mkt { font: 800 8.5px var(--display); paint-order: stroke; stroke: #fff8f1; stroke-width: 3px } .rgraph .mkt.exit { fill: #c8442a } .rgraph .mkt.spike { fill: #1e8a4b }
.rgraph .rb, u.rb { fill: #e1d3ca; background: #e1d3ca } .rgraph .rb.v, u.rb.v { fill: #3cbcb3; background: #3cbcb3 } .rgraph .rb.big, u.rb.big { fill: var(--pink); background: var(--pink) }
.rgraph.mini .ln { stroke-width: 3 } .rgraph.mini { margin-top: .1em }
@keyframes draw { to { stroke-dashoffset: 0 } }
.rleg { display: flex; gap: .9em; font-size: .72em; color: var(--clipt-mut); font-weight: 700; margin-top: .1em } .rleg span { display: inline-flex; align-items: center; gap: .35em } .rleg u { width: 1.1em; height: .6em; border-radius: .2em; display: inline-block }
.lessons { margin: .2em 0 0; padding-left: 1.1em; display: grid; gap: .3em; font-size: .86em; color: #5c4a52 } .lessons li::marker { color: var(--pink) }

/* ---- videos tab ---- */
button.vid { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 7.6em 1fr; gap: .7em; align-items: start; background: #fff; border-radius: 1em; padding: .5em; box-shadow: 0 .1em 0 var(--clipt-line); animation: rise .4s both; width: 100%; transition: transform .12s, box-shadow .12s }
button.vid:hover { transform: translateY(-.1em); box-shadow: 0 .25em 0 var(--clipt-line) } button.vid:active { transform: translateY(.1em) }
button.vid:focus-visible { outline: .18em solid var(--pink) }
.vid .tags { display: flex; flex-wrap: wrap; gap: .3em; align-items: center } .vid .tg { font-size: .72em; font-weight: 800; background: #faf0e8; color: #6e5a62; border-radius: .8em; padding: .12em .6em } .vid .tg.upd { background: #d2f1ee; color: #17685f }
.vid .cr-spark { display: block; margin-top: .1em; opacity: .9 }
.vback { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .3em; font-weight: 800; font-size: .86em; color: var(--pink); padding: .2em .2em .2em 0; width: max-content } .vback:hover { text-decoration: underline }
.vhead { display: grid; grid-template-columns: 6.6em 1fr; gap: .7em; align-items: center } .vhead img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: .7em } .vhead b { line-height: 1.2; font-size: .95em; display: block } .vhead span { color: var(--clipt-mut); font-size: .8em }
.vstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em } .vstats > div { background: #fff; border-radius: .9em; padding: .5em .6em; box-shadow: 0 .1em 0 var(--clipt-line); display: grid } .vstats i { font-style: normal; font-size: .7em; color: var(--clipt-mut); font-weight: 700 } .vstats b { font-size: 1.25em; font-weight: 850; font-stretch: 78%; font-variant-numeric: tabular-nums }
.polcard p { margin-bottom: .2em }
.rcard .btn.small { justify-self: start; color: var(--cream) }
.tastes { display: grid; gap: .35em } .tb { display: grid; grid-template-columns: 5.2em 1fr; gap: .6em; align-items: center; font-size: .8em; font-weight: 700; color: #5c4a52 } .tb > div { height: .6em; border-radius: .4em; background: #f1e3e8; overflow: hidden } .tb u { display: block; height: 100%; border-radius: .4em; transition: width .6s cubic-bezier(.3, 1, .4, 1) } .tb small { color: var(--clipt-mut); font-weight: 600; margin-left: .3em }

/* ---- stats tab ---- */
.cr-stats { display: grid; gap: .8em }
.health .cr-hl { display: flex; justify-content: space-between; gap: .6em; align-items: center }
.health .stat { display: grid; gap: .05em } .health .stat b { font-size: 1.05em } .health .stat b.ok { color: #1e8a4b } .health .stat span { font-size: .8em; color: #6e5560 }
.strikes { display: flex; align-items: center; gap: .3em; flex: none } .strikes .lbl { font-size: .7em; font-weight: 800; color: var(--clipt-mut); margin-right: .2em }
.strikes u { width: 1.1em; height: 1.1em; border-radius: 50%; background: #efe3dc; box-shadow: inset 0 .08em .15em rgba(0, 0, 0, .12) } .strikes u.on { background: #e0483b; box-shadow: 0 0 0 .15em #ffd9d0 }
.audbar { display: flex; height: 1.5em; border-radius: .8em; overflow: hidden; gap: .12em; background: #fff } .audbar i { display: block; transition: width .7s cubic-bezier(.3, 1, .4, 1); min-width: .3em }
.aud-row { display: grid; grid-template-columns: .9em 1fr auto 2.6em; gap: .55em; align-items: center } .aud-row .sw { width: .9em; height: .9em; border-radius: .3em }
.aud-row b { font-size: .86em; display: block; line-height: 1.1 } .aud-row small { color: var(--clipt-mut); font-size: .72em; line-height: 1.2; display: block }
.aud-row em { font-style: normal; font-weight: 900; font-size: 1.05em; font-stretch: 80%; font-variant-numeric: tabular-nums } .aud-row .dl { font-size: .72em; font-weight: 800; color: var(--clipt-mut); text-align: right } .aud-row .dl.gain { color: #1e8a4b } .aud-row .dl.loss { color: #c8442a }
.rcard .cr-foot { font-size: .78em; color: #7a6670; line-height: 1.35 }
.fav { display: grid; grid-template-columns: 5em 1fr; gap: .6em; align-items: center; padding: .2em 0 } .fav .noimg { width: 100%; aspect-ratio: 16/9; border-radius: .6em; background: #efe3dc }
.fav img { width: 100%; aspect-ratio: 16/9; border-radius: .6em; object-fit: cover; background: #efe3dc }
.fav b { font-size: .88em; display: block; line-height: 1.15 } .fav b small { color: var(--clipt-mut); font-weight: 600; font-size: .8em } .fav span { font-size: .76em; color: var(--clipt-mut); display: block } .fav em { font-style: normal; font-size: .76em; font-weight: 800; color: #6e5560; display: block } .fav.ready em { color: #1e8a4b }

/* ---- inbox: deals and fan mail ---- */
.msg .ava.fan { background: #ffd2e1; color: var(--pink-d) } .msg .cr-tag { font-style: normal; font-size: .7em; font-weight: 800; background: #ffe1ec; color: var(--pink-d); border-radius: 1em; padding: .1em .6em; margin-left: .3em }
.msg .fit { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .5em; font-size: .78em; font-weight: 800; color: #17685f; margin-top: .2em } .msg .fit small { font-weight: 600; color: var(--clipt-mut); font-size: 1em }
.msg .terms { grid-column: 2; font-size: .78em; color: var(--clipt-mut); font-weight: 600 }
.negs { grid-column: 1 / -1; display: grid; gap: .4em; margin-top: .3em }
.negs button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .1em; background: #fff8f1; border: .12em solid #f0d8cc; border-radius: .9em; padding: .5em .7em; transition: transform .1s, border-color .15s }
.negs button:hover { border-color: var(--pink); background: #fff0f6 } .negs button:active { transform: translateY(.1em) } .negs button:focus-visible { outline: .18em solid var(--pink) }
.negs b { font-size: .88em } .negs small { font-size: .74em; color: #7a6670; line-height: 1.3 }

.msg .btn.ghost { box-shadow: none }

/* ---- gear: merch shelf ---- */
.merch { background: #fff; border-radius: 1.1em; padding: .8em; display: grid; gap: .5em; box-shadow: 0 .1em 0 var(--clipt-line) }
.merch h5 { margin: 0; font-size: .9em; display: flex; justify-content: space-between } .merch h5 small { color: var(--clipt-mut) } .merch p { margin: 0; font-size: .78em }
.design { display: grid; grid-template-columns: 2.6em 1fr auto; gap: .6em; align-items: center; background: #f4faf6; border-radius: .8em; padding: .4em .6em } .design .tee { width: 2.6em; height: 2.6em; background: #2b1e24; color: var(--amber); border-radius: .7em; display: grid; place-items: center; padding: .35em }
.design b { font-size: .85em; display: block; line-height: 1.15 } .design small { font-size: .72em; color: var(--clipt-mut) } .design em { font-style: normal; font-weight: 850; color: #1e6b3a; font-size: .8em }
.jokes { display: grid; gap: .4em }
.joke { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .25em; background: #fff8f1; border: .12em solid #f0d8cc; border-radius: .9em; padding: .5em .7em; transition: transform .1s, border-color .15s }
.joke:hover:not(:disabled) { border-color: var(--pink) } .joke:active:not(:disabled) { transform: translateY(.1em) } .joke:focus-visible { outline: .18em solid var(--pink) } .joke:disabled { opacity: .6; cursor: not-allowed }
.joke .jh { display: flex; justify-content: space-between; gap: .5em; align-items: baseline } .joke b { font-size: .86em } .joke em { font-style: normal; font-size: .72em; font-weight: 800; color: var(--pink); text-align: right } .joke:disabled em { color: var(--clipt-mut) }
.joke .jm { height: .4em; background: #f1e3e8; border-radius: .3em; overflow: hidden } .joke .jm u { display: block; height: 100%; background: var(--amber); border-radius: .3em } .joke small { font-size: .72em; color: var(--clipt-mut) }

/* ---- live tab ---- */
.cr-live { display: grid; gap: .7em }
.golive { background: linear-gradient(120deg, #2b1e24, #4a1f38); color: #fff; border-radius: 1.1em; padding: .8em .9em; display: grid; gap: .3em }
.golive .gl-top { display: flex; align-items: center; gap: .5em } .golive b { font-size: 1.15em; font-weight: 850; font-stretch: 80% } .golive small { margin-left: auto; color: #e8cbd8; font-weight: 700; font-size: .8em } .golive p { margin: 0; font-size: .8em; color: #e8cbd8 !important }
.livedot { width: .8em; height: .8em; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 .2em rgba(255, 59, 59, .3); animation: livepulse 1.4s infinite }
@keyframes livepulse { 50% { box-shadow: 0 0 0 .45em rgba(255, 59, 59, 0); opacity: .75 } }
.scards { display: grid; gap: .5em }
.scard { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .25em; background: #fff; border: .14em solid transparent; border-radius: 1em; padding: .6em .75em; box-shadow: 0 .1em 0 var(--clipt-line); transition: border-color .15s, transform .1s }
.scard:hover:not(:disabled) { border-color: #f4b6cf } .scard:active:not(:disabled) { transform: translateY(.1em) } .scard.on { border-color: var(--pink); background: #fff5f9 } .scard:disabled { opacity: .55; cursor: not-allowed } .scard:focus-visible { outline: .18em solid var(--pink) }
.scard .sh { display: flex; justify-content: space-between; gap: .5em; align-items: baseline } .scard b { font-size: .9em; line-height: 1.15 } .scard em { font-style: normal; font-size: .72em; font-weight: 850; color: #17685f; white-space: nowrap } .scard > span { font-size: .78em; color: #6e5560; line-height: 1.3 }
.sfit { display: grid; gap: .15em } .sfit .m { height: .4em; border-radius: .3em; background: #f1e3e8; overflow: hidden } .sfit .m u { display: block; height: 100%; background: #3cbcb3; border-radius: .3em } .sfit small { font-size: .7em; color: var(--clipt-mut); font-weight: 700 }
.hsel { display: flex; align-items: center; gap: .4em } .hsel span { font-size: .8em; font-weight: 800; color: var(--clipt-mut); margin-right: .2em }
.hsel button { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; text-align: center; font-weight: 850; font-size: .86em; padding: .45em 0; border-radius: .8em; background: #fff; box-shadow: 0 .1em 0 var(--clipt-line); border: .12em solid transparent } .hsel button.on { border-color: var(--pink); color: var(--pink); background: #fff5f9 } .hsel button:focus-visible { outline: .18em solid var(--pink) }
.golive-btn { justify-self: stretch; text-align: center; font-size: 1.05em !important }
.stream { display: grid; gap: .6em; grid-template-rows: auto minmax(8em, 1fr) auto }
.stv { background: #17110f; border-radius: 1.1em; overflow: hidden; color: #fff; position: relative }
.stv-top { display: flex; align-items: center; gap: .5em; padding: .5em .7em; background: linear-gradient(#000a, #0000); position: absolute; inset: 0 0 auto 0; z-index: 2; font-size: .8em } .stv-top b { font-weight: 800; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.livetag { background: #ff3b3b; font-weight: 900; font-size: .8em; padding: .1em .55em; border-radius: .4em; letter-spacing: .08em } .stv .vw { font-family: var(--mono); font-size: .9em } .stv .vw i { font-style: normal; font-weight: 700 }
.stv-art { height: 10em; background: radial-gradient(circle at 50% 60%, #6a3a50, #1c1218 70%); display: grid; place-items: center; position: relative } .stv-art svg { width: 4.4em; height: 4.4em; color: var(--pink); opacity: .85 }
.mishap { position: absolute; left: .6em; right: .6em; bottom: .6em; background: rgba(255, 255, 255, .95); color: #2b1e24; border-radius: .8em; padding: .45em .7em; font-size: .78em; font-weight: 700; line-height: 1.3; animation: pop .4s cubic-bezier(.3, 1.8, .5, 1) both; border-left: .4em solid #e0483b } .mishap.good { border-left-color: #34a866 }
.chat { background: #fff; border-radius: 1em; padding: .5em .6em; display: flex; flex-direction: column; justify-content: flex-end; gap: .25em; overflow: hidden; max-height: 14em; min-height: 8em; font-size: .8em; box-shadow: 0 .1em 0 var(--clipt-line) }
.chat .clx { animation: rise .25s both; line-height: 1.3; flex: none } .chat .clx b { font-weight: 800; margin-right: .3em } .chat .clx.joke { background: #fff1c9; border-radius: .5em; padding: .1em .4em; font-weight: 800 }
.chat .clx.super { background: linear-gradient(90deg, #f2c14e, #ffd979); color: #3a2900; border-radius: .6em; padding: .3em .5em } .chat .amt { background: #3a2900; color: #ffd979; border-radius: .5em; padding: 0 .4em; font-weight: 900 }
.live-sum { background: #fff; border-radius: 1em; padding: .7em; display: grid; gap: .5em; box-shadow: 0 .1em 0 var(--clipt-line); animation: rise .35s both } .live-sum[hidden] { display: none }
.live-sum .ls { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em } .live-sum .ls div { display: grid; text-align: center } .live-sum i { font-style: normal; font-size: .66em; color: var(--clipt-mut); font-weight: 700 } .live-sum b { font-size: 1.15em; font-weight: 850; font-stretch: 78% }
.live-sum ul { margin: 0; padding-left: 1.1em; font-size: .8em; color: #5c4a52; display: grid; gap: .2em } .live-sum li.bad { color: #c8442a } .live-sum .btn { color: #2a0c1a; justify-self: stretch; text-align: center }

/* ---- editor: audience and platform ---- */
#p-plat { display: grid; gap: .5em } #p-plat h4 { margin: 0 }
.plat-row { display: flex; align-items: center; gap: .6em; flex-wrap: wrap } .plat-row small { color: #a99db3; font-size: .8em }
#p-plat .pol { background: rgba(127, 211, 154, .14); color: #7fd39a } #p-plat .pol-warn { background: rgba(242, 193, 78, .15); color: #f2c14e } #p-plat .pol-bad { background: rgba(255, 122, 90, .15); color: #ff9c82 }
#p-plat .toggles button { padding: .45em .7em }
.tastes.dark .tb { color: #d9cde0; grid-template-columns: 7.6em 1fr } .tastes.dark .tb span { white-space: nowrap } .tastes.dark .tb > div { background: #2a2331 } .tastes.dark .tb small { color: #8f829a }

/* ---- result: graph, policy, audience ---- */
.pf-extra { background: rgba(255, 255, 255, .06); border-radius: .9em; padding: .6em .8em } .pf-extra:empty { display: none }
.rx-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .9em; align-items: start }
.rx-h { display: flex; justify-content: space-between; align-items: baseline; font-size: .88em } .rx-h small { color: #b9aca0 } .rx-less { margin: .2em 0 0; font-size: .78em; color: #cfc3b6; line-height: 1.3 }
.rx-side { display: grid; gap: .4em; justify-items: start; font-size: .9em } .rx-side small { color: #cfc3b6; font-size: .8em; line-height: 1.3 } .rx-side small.bad { color: #ff9c82 } .rx-side .aud { color: #b9aca0 }
.pf-extra .rgraph .gl { stroke: rgba(255, 255, 255, .14) } .pf-extra .rgraph .ax { fill: #9b8d92 } .pf-extra .rgraph .mkt { stroke: #1d1620 } .pf-extra .rgraph .mk { fill: #1d1620 } .pf-extra .rgraph .rb, .pf-extra u.rb { fill: #5a4f55 } .pf-extra .rgraph .rb.v { fill: #3cbcb3 } .pf-extra .rgraph .rb.big { fill: var(--pink) }
.pf-extra .pol { background: rgba(127, 211, 154, .16); color: #7fd39a } .pf-extra .pol-warn { background: rgba(242, 193, 78, .16); color: #f2c14e } .pf-extra .pol-bad { background: rgba(255, 122, 90, .16); color: #ff9c82 }
.pf-extra .btn.small { color: var(--cream) }

/* ---- day summary: channel ---- */
.sum-chan { display: grid; gap: .45em; background: rgba(255, 255, 255, .04); border-radius: .9em; padding: .6em .8em }
.sum-chan .sc-h { font-size: .72em; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.sc-aud { display: flex; flex-wrap: wrap; gap: .4em .9em; font-size: .88em; font-weight: 650 } .sc-aud .ac { display: inline-flex; align-items: center; gap: .4em } .sc-aud u { width: .75em; height: .75em; border-radius: .25em; display: inline-block } .sc-aud em { font-style: normal; font-weight: 850; font-size: .85em } .sc-aud em.gain { color: #7fd39a } .sc-aud em.loss { color: #ff9c82 }
.sc-line { display: flex; flex-wrap: wrap; gap: .5em .8em; align-items: center; font-size: .86em } .sc-line .jk { color: #cfc3b6 }
.sum-chan .pol { background: rgba(127, 211, 154, .16); color: #7fd39a } .sum-chan .pol-warn { background: rgba(242, 193, 78, .16); color: #f2c14e } .sum-chan .pol-bad { background: rgba(255, 122, 90, .16); color: #ff9c82 }

@media (prefers-reduced-motion: reduce) { .rgraph .ln { animation: none; stroke-dashoffset: 0 } .rgraph .ar { animation: none; opacity: 1 } .livedot { animation: none } }

/* live chat: the name sits on its own line above the message, so long handles never run into the text */
.chat .clx { display: block; padding: .15em .3em; border-radius: .4em }
.chat .clx b { display: block; font-size: .82em; line-height: 1.15; margin: 0 }
.chat .clx.super b { display: inline; margin-right: .4em }