/* The customer app's one stylesheet. Same look as brandonrutlidge.com: the colour tokens below are copied from the
   top of the site's assets/site.css (devtools/test.mjs checks they still match), plus a few app-only ones.
   Layout: a slim header (logo, My tools, Account), one centred column of cards, a footer with the small print. The
   Podcast Clip Generator's own pages use the admin panel's frame instead: an icon rail and the whole width. */
@font-face{font-family:Rubik;src:url(/assets/rubik.woff2) format('woff2');font-weight:300 900;font-display:swap}
/* ---- Tokens (copied from site.css) ---- */
:root{
--bg:#181818;--card:#212121;--raised:#303030;--line:#2c2c2c;--accent:#0173ef;--accent-2:#2a8bf7;--blue:#4da3ff;--text:#fff;--muted:#8c8c8c;--err:#ff8a80;
--card-ring:none;--radius:16px;
--font:Rubik,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,'Helvetica Neue',Arial,sans-serif;
color-scheme:dark}
[data-theme=light]{--bg:#f4f4f4;--card:#fff;--raised:#e8e8e8;--line:#dcdcdc;--blue:#0062cc;--text:#141414;--muted:#5c5c5c;--err:#c62828;--card-ring:0 0 0 1px #e2e2e2,0 1px 3px rgba(0,0,0,.05);color-scheme:light}
/* App-only tokens */
:root{--wash:rgba(77,163,255,.14);--warn:#ffd400;--rail:#1c1c1c;--on:rgba(1,115,239,.22)}
[data-theme=light]{--wash:rgba(0,98,204,.10);--warn:#8a6d00;--rail:#fff;--on:rgba(0,98,204,.12)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.5 var(--font);display:flex;flex-direction:column;min-height:100vh}
h1,h2,h3,p,ul,ol,dl,dd,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
a{color:var(--blue)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
p{max-width:65ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Frame ---- */
.top{display:flex;align-items:center;gap:16px;max-width:760px;width:100%;margin:0 auto;padding:18px 16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;text-decoration:none;margin-right:auto}
.logo{width:32px;height:32px;flex:none}
.top nav{display:flex;gap:4px}
.top nav a{padding:8px 12px;border-radius:12px;color:var(--muted);font-size:15px;font-weight:500;text-decoration:none}
.top nav a:hover{color:var(--text)}
.top nav a[aria-current=page]{background:var(--wash);color:var(--blue)}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:8px 16px 48px;display:grid;gap:20px;align-content:start}
.foot{max-width:760px;width:100%;margin:0 auto;padding:24px 16px 32px;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
.linkbtn{padding:0;border:0;background:none;color:var(--muted);font-size:14px;text-decoration:underline;cursor:pointer}

/* ---- Text ---- */
h1,h2,h3{font-weight:700;text-transform:uppercase;line-height:1.2;text-wrap:balance}
h1{font-size:28px}
h2{font-size:20px}
.small{font-size:14px;line-height:1.45;color:var(--muted)}
.lede{color:var(--muted)}
@media(min-width:700px){h1{font-size:36px}}

/* ---- Building blocks ---- */
.card{padding:20px;background:var(--card);border-radius:var(--radius);box-shadow:var(--card-ring);display:grid;gap:14px}
@media(min-width:700px){.card{padding:24px 28px}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 28px;border:0;border-radius:var(--radius);background:var(--accent);color:#fff;font:500 17px/1.3 var(--font);text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;transition:background-color .15s}
.btn:hover{background:var(--accent-2)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.ghost{background:var(--raised);color:var(--text)}
.btn.ghost:hover{background:var(--line)}
.btn.sm{min-height:40px;padding:0 16px;font-size:15px;border-radius:12px}
.btn.ghost.danger{color:var(--err)}
.btn.danger:not(.ghost){background:#c62828;color:#fff}
.btn.danger:not(.ghost):hover{background:#b71c1c}
.btn.wide{width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--wash);color:var(--blue);font-size:13px;font-weight:500;white-space:nowrap}
.pill.warn{background:rgba(255,212,0,.14);color:var(--warn)}
.pill.off{background:var(--raised);color:var(--muted)}
.note{padding:14px 18px;border-radius:14px;background:var(--wash);font-size:15px}
.note.err{background:rgba(255,138,128,.12);color:var(--err)}
.test{padding:6px 12px;border-radius:10px;background:rgba(255,212,0,.14);color:var(--warn);font-size:13px;font-weight:500;justify-self:start}

/* Start trial: plan picker and terms box */
.plans{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plans label{position:relative;display:grid;gap:2px;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer}
.plans label:has(input:checked){border-color:var(--accent)}
.plans input{position:absolute;opacity:0;inset:0;cursor:pointer}
.plans label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.plans .nm{color:var(--muted);font-size:15px}
.plans .pr{font-size:24px;font-weight:700}
.plans .pr small{font-size:14px;font-weight:400;color:var(--muted)}
.terms{list-style:none;display:grid;gap:8px}
.terms li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;font-size:16px}
.terms li::before{content:"✓";color:var(--blue);font-weight:700}
.choice{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.choice label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.choice input{width:18px;height:18px;accent-color:var(--accent);margin:0}
legend{font-weight:500}

/* My tools */
.tool{display:flex;gap:14px;align-items:center}
.icon{width:44px;height:44px;border-radius:12px;background:var(--raised);display:grid;place-items:center;flex:none}
.icon svg{width:22px;height:22px}
.meter{height:10px;border-radius:999px;background:var(--raised);overflow:hidden}
.meter i{display:block;height:100%;background:var(--blue);border-radius:999px}
.spread{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px}
.num{font-variant-numeric:tabular-nums}

/* Account */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;font-size:16px}
.kv dt{color:var(--muted)}
.kv dd{overflow-wrap:anywhere}

/* Sign-in page */
/* Only the card, in the middle of the screen both ways; a short screen scrolls */
body[data-page=signin]{min-height:100vh;min-height:100dvh}
body[data-page=signin] main{display:flex;flex-direction:column;padding-block:24px}
body[data-page=signin] .signin{margin:auto}
.signin{display:grid;gap:14px;max-width:440px;width:100%;justify-self:center;padding:32px 24px}
.signin .logo{width:48px;height:48px}
.signin .step{display:grid;gap:16px}
.field{display:grid;gap:6px;font-weight:500}
.field input{width:100%;min-height:52px;padding:12px 16px;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);font:400 17px/1.3 var(--font)}
.field input:focus{border-color:var(--blue);outline:0}
.pw{position:relative;display:block}
.pw input{padding-right:84px}
.show{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--raised);color:var(--text);font:500 15px/1 var(--font);cursor:pointer}
.signin .links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;font-size:15px}
.signin .links .linkbtn{font-size:15px;color:var(--blue)}
.signin .or{justify-self:center;color:var(--muted);font-size:15px;margin:-6px 0}
.signin .addr{font-weight:500;overflow-wrap:anywhere}
.signin .who{display:flex;flex-wrap:wrap;gap:4px 12px}

/* Terms and privacy */
.doc{display:grid;gap:12px}
.doc h2{margin-top:18px}
.doc ul{padding-left:20px;display:grid;gap:6px}
.draft{padding:12px 16px;border-radius:12px;background:rgba(255,212,0,.14);color:var(--warn);font-weight:500}
.gap{color:var(--warn);font-weight:500}
.card-in{display:grid;gap:12px}

/* Podcast Clip Generator: upload, progress, the clips */
.drop{display:grid;justify-items:center;gap:8px;padding:34px 20px;border:2px dashed var(--raised);border-radius:var(--radius);text-align:center;cursor:pointer}
.drop svg{width:44px;height:44px;color:var(--blue)}
.drop u{color:var(--blue)}
.drop.over,.drop:hover{border-color:var(--blue);background:var(--wash)}
.drop:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.steps{list-style:none;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center;font-size:16px}
.steps .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--raised);color:var(--muted)}
.steps .done .dot{background:rgba(95,211,141,.16);color:#5fd38d}
.steps .now .dot{background:var(--wash);color:var(--blue)}
.steps .wait{color:var(--muted)}
.steps .now{font-weight:500}
.results{display:grid;gap:16px}
.tabs,.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:12px;background:var(--raised)}
.tabs button,.seg button{padding:7px 14px;border:0;border-radius:10px;background:none;color:var(--muted);font-size:15px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--wash);color:var(--blue)}
.seg button[aria-pressed=true]{background:var(--accent);color:#fff}
.copyrow{display:grid;gap:6px;padding:8px 0;border-top:1px solid var(--line)}
.copyrow p{color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.copyrow .btn{justify-self:start}
.jobs{list-style:none;display:grid;gap:8px}
.jobs li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.jobs li:first-child{border-top:0}

/* Podcast Clip Generator: the tool's own frame, as Brandon's admin panel (brandonrutlidge-com admin/assets/panel.css):
   a slim icon rail on the left, a bottom tab bar on phones, and the whole width of the screen on a computer */
body.tool{display:block}
.app{display:flex;min-height:100vh}
.rail{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;flex:none;width:92px;height:100vh;padding:22px 0 20px;background:var(--rail);border-right:1px solid var(--line);z-index:10}
.rail .logo{display:block;width:36px;height:36px}
.rail .logo svg{width:100%;height:100%;display:block}
.rail .nav{display:grid;gap:6px;margin-top:28px}
.rail .nav a{display:grid;justify-items:center;gap:5px;width:72px;padding:10px 0 8px;border-radius:14px;color:var(--muted);font-size:12px;font-weight:500;text-decoration:none;text-align:center}
.rail .nav a:hover{color:var(--text)}
.rail .nav a[aria-current=page]{background:var(--on);color:var(--blue)}
.rail .ic{width:20px;height:20px}
.app>.body{flex:1;min-width:0;display:flex;flex-direction:column}
body.tool main{max-width:none;margin:0;padding:26px 36px 40px;gap:22px}
body.tool .foot{max-width:none;margin:0;padding:20px 36px 28px;flex:none;align-items:center;align-content:flex-start}
body.tool h1{font-size:26px}
/* The upload and making pages: the main card on the left, the hours and earlier episodes beside it (one column on
   phones and narrow windows, hours first). The clips page uses the whole width. The rail's colour runs the full height
   of the page. */
.app{background:linear-gradient(90deg,var(--rail) 0 91px,var(--line) 91px 92px,var(--bg) 92px)}
.rail{border-right:0}
.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px;align-items:start;max-width:1200px}
.bmain,.bside{display:grid;gap:22px;align-content:start;min-width:0}
.board:not(:has(section:not([hidden]),p:not([hidden]))){display:none}
.bside:not(:has(section:not([hidden]))){display:none}
.board:has(.bside:not(:has(section:not([hidden]))))>.bmain{grid-column:1/-1;max-width:820px}
body.tool .note{max-width:none}
@media(max-width:1023px){.board{display:flex;flex-direction:column;gap:18px;max-width:820px}.bmain,.bside{display:contents}#hours{order:-1}}
@media(max-width:760px){
.app{display:block;padding-bottom:76px;background:var(--bg)}
.rail{position:fixed;left:0;right:0;bottom:0;top:auto;flex-direction:row;justify-content:space-around;width:auto;height:auto;padding:6px 4px calc(8px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line)}
.rail .logo{display:none}
.rail .nav{display:flex;gap:4px;margin:0;width:100%;justify-content:space-around}
.rail .nav a{width:76px;padding:7px 0;font-size:11px}
body.tool main{padding:18px 16px 28px;gap:18px}
body.tool .foot{padding:18px 16px 24px}
body.tool h1{font-size:22px}
}
/* The clips: small stills, many to a row; one opens in the viewer */
.rhead{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.rhead p{margin:0;color:var(--muted)}
@media(max-width:760px){.rhead #zips{width:100%;flex-wrap:nowrap}.rhead #zips .btn{flex:1;min-height:48px;padding:0 10px;font-size:16px}}
.thumbs{display:grid;gap:12px 8px;grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
@media(min-width:700px){.thumbs{gap:14px 10px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
.thumbs.long{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.thumb{display:grid;gap:5px;align-content:start;padding:0;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;min-width:0;font:inherit}
.thumb .pic{position:relative;display:block;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#000;box-shadow:var(--card-ring)}
.thumb.wide .pic{aspect-ratio:16/9}
.thumb .pic img,.thumb .pic video{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover .pic,.thumb:focus-visible .pic{box-shadow:0 0 0 2px var(--accent)}
.thumb .rank{position:absolute;top:5px;left:5px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700}
.thumb .dot{position:absolute;bottom:5px;left:5px;padding:0 6px;border-radius:6px;background:var(--accent);color:#fff;font-size:11px;font-weight:500}
.thumb .tt{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thumb .tick{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.5)}
.thumb[aria-pressed=true] .pic{box-shadow:0 0 0 3px var(--accent)}
.thumb[aria-pressed=true] .tick{background:var(--accent);border-color:var(--accent)}
.thumb[aria-pressed=true] .tick::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sub{font-size:17px;margin:8px 0 0}
.rfoot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;max-width:none;padding-top:14px;border-top:1px solid var(--line)}
/* While picking: a bar fixed to the bottom of the screen (above the tab bar on phones) */
.pickbar{position:fixed;left:92px;right:0;bottom:0;z-index:9;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:center;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.pickbar .row{flex-wrap:nowrap}
body:has(.pickbar:not([hidden])) main{padding-bottom:120px}
@media(max-width:760px){.pickbar{left:0;bottom:calc(64px + env(safe-area-inset-bottom));padding:12px 16px;gap:8px}.pickbar #x-count{width:100%;text-align:center;font-size:15px}.pickbar .row{width:100%}.pickbar .btn{flex:1;min-height:48px;padding:0 12px;font-size:16px}}
.viewer{width:min(940px,100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:16px;background:var(--card);color:var(--text);overflow:auto}
.viewer::backdrop{background:rgba(0,0,0,.7)}
.viewer[open]{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.vmedia video{max-height:min(75dvh,640px)}.viewer[open]{grid-template-columns:minmax(0,320px) minmax(0,1fr)}.viewer:has(.vmedia.wide){width:min(1180px,100vw - 24px)}.viewer[open]:has(.vmedia.wide){grid-template-columns:minmax(0,1fr) minmax(0,340px)}.vmedia.wide video{max-height:min(70dvh,560px)}}
.vmedia{background:#000;display:flex;align-items:center;justify-content:center}
.vmedia video{width:100%;max-height:min(46dvh,640px);aspect-ratio:9/16;object-fit:contain;display:block}
.vmedia.wide video{aspect-ratio:16/9}
.vside{display:grid;gap:12px;align-content:start;justify-items:start;padding:16px 18px 20px;min-width:0}
.vside>.spread,.vside>#vtext,.vside>.vnav{justify-self:stretch;align-items:center}
.vhead{display:flex;align-items:flex-start;gap:10px;justify-self:stretch}
.vside h2{flex:1;min-width:0;font-size:19px;margin:0;text-transform:none;line-height:1.3}
.copy{flex:none;min-height:34px;padding:0 12px;border:0;border-radius:10px;background:var(--raised);color:var(--text);font:500 14px var(--font);cursor:pointer}
.copy:hover{background:var(--wash);color:var(--blue)}
.vside .copyrow{display:flex;align-items:flex-start;gap:10px;padding:10px 0 0}
.vside .copyrow p{flex:1;min-width:0;color:var(--muted);font-size:15px;overflow-wrap:anywhere}
.vx{width:40px;height:40px;border:0;border-radius:50%;background:var(--raised);color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.vnav{justify-content:space-between}

/* Podcast Clip Generator: changing one Short (captions and framing) */
.editor{display:grid;gap:16px}
.edlinks{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.edit{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:700px){.edit{grid-template-columns:minmax(0,260px) minmax(0,1fr)}}
.ctl{display:grid;gap:16px;min-width:0}
.lbl{display:block;margin-bottom:6px;font-size:14px;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--accent);color:#fff}
.capwrap{position:relative;max-width:260px;width:100%}
.capwrap video{width:100%;aspect-ratio:9/16;border-radius:12px;background:#000;display:block}
.capbox{position:absolute;left:6%;right:6%;text-align:center;pointer-events:none}
.capbox.at-top{top:12%}.capbox.at-middle{top:46%}.capbox.at-bottom{bottom:22%}
.capbox span{display:inline-block;padding:5px 9px;border-radius:9px;background:rgba(0,0,0,.72);color:#fff;font-size:15px;line-height:1.25}
.capbox b{font-weight:800}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.swatch[aria-pressed=true]{border-color:var(--text);outline:2px solid var(--bg);outline-offset:-5px}
.wordlist{display:flex;flex-wrap:wrap;gap:6px;max-height:280px;overflow:auto;padding:2px}
.word{padding:4px 9px;border:0;border-radius:8px;background:var(--raised);font-size:15px;cursor:pointer}
.word.fixed{outline:2px solid var(--warn)}
.wordlist input{font:inherit;font-size:15px;width:9em;padding:3px 8px;border:2px solid var(--warn);border-radius:8px;background:var(--bg);color:var(--text)}
.frame{display:grid;gap:12px}
.timeline{display:flex;gap:2px;height:44px;border-radius:10px;overflow:hidden}
.timeline .part{min-width:0;border:0;color:#111;font-size:13px;font-weight:500;cursor:pointer;opacity:.55;overflow:hidden;white-space:nowrap}
.timeline .part.sel{opacity:1;outline:3px solid var(--text);outline-offset:-3px}
.srcview{position:relative;width:100%;max-width:760px;border-radius:12px;overflow:hidden;background:#000}
.srcview video{width:100%;display:block;aspect-ratio:16/9}
.faces{position:absolute;inset:0}
.facebox{position:absolute;z-index:1;border:3px solid;border-radius:10px;background:rgba(0,0,0,.08);color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 3px #000;cursor:pointer;display:grid;place-items:start center;padding-top:2px}
.facebox.on{background:rgba(255,255,255,.12)}
.faces .crop{position:absolute;top:0;bottom:0;border:3px solid var(--blue);box-shadow:0 0 0 999px rgba(0,0,0,.45);pointer-events:none;border-radius:4px}
.who{border:2px solid transparent}
.who.on{background:var(--wash);color:var(--blue)}
.note.err{background:rgba(255,138,128,.12);color:var(--err)}

.editor>.tabs{justify-self:start}