/* ============================================================================
   FireballKaraoke brand design system — shared by the Public + Auth layouts.
   Self-contained (no external assets). Served statically from /includes/css/.
   ============================================================================ */
:root{
	--ink:#14100d; --ink-2:#1d1712; --card:#241c16; --line:#3a2c22;
	--fire:#ff6a00; --ember:#e11d1d; --gold:#ffb547;
	--cream:#f7f1ea; --muted:#b6a595; --muted-2:#8c7d6f;
	--radius:14px; --wrap:1120px;
	--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
	font-family:var(--sans); color:var(--cream); background:var(--ink);
	line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.25rem}

/* header */
.site-header{
	position:sticky; top:0; z-index:20; background:rgba(20,16,13,.9);
	backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-header .bar{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.6rem 1.25rem}
.brand{display:flex; align-items:center; gap:.6rem}
.brand img{height:44px; width:auto; display:block}
.brand b{font-size:1.05rem; letter-spacing:.02em; color:var(--cream)}
.nav{display:flex; gap:1.25rem; margin-left:.5rem; flex-wrap:wrap}
.nav a{color:var(--muted); font-weight:600; font-size:.95rem}
.nav a:hover{color:var(--cream); text-decoration:none}
.nav-cta{display:flex; gap:.6rem; margin-left:auto; flex-wrap:wrap}

/* buttons */
.btn{
	display:inline-block; font-weight:700; font-size:.95rem; cursor:pointer;
	padding:.62rem 1.15rem; border-radius:999px; border:1px solid transparent;
	background:linear-gradient(135deg,var(--fire),var(--ember)); color:#fff;
	box-shadow:0 6px 18px rgba(225,29,29,.28); transition:transform .08s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none; box-shadow:0 8px 22px rgba(225,29,29,.4)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--cream); box-shadow:none}
.btn-ghost:hover{border-color:var(--fire); color:var(--cream)}
.btn-lg{padding:.85rem 1.6rem; font-size:1.05rem}
.btn-block{display:block; width:100%; text-align:center; border:0}

/* hero */
.hero{position:relative; overflow:hidden; text-align:center; padding:3.5rem 0 3rem}
.hero::before{
	content:""; position:absolute; inset:-30% 0 auto 0; height:600px; z-index:0;
	background:radial-gradient(60% 60% at 50% 30%, rgba(255,106,0,.28), rgba(225,29,29,.08) 45%, transparent 70%);
	pointer-events:none;
}
.hero .inner{position:relative; z-index:1}
.hero img.emblem{width:min(320px,72vw); height:auto; filter:drop-shadow(0 12px 34px rgba(255,106,0,.35))}
h1.headline{font-size:clamp(2rem,5vw,3.25rem); line-height:1.08; margin:1.2rem 0 .5rem; letter-spacing:-.01em}
.headline .flame{background:linear-gradient(135deg,var(--gold),var(--fire) 55%,var(--ember)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--muted); max-width:42rem; margin:.5rem auto 1.6rem}
.hero .cta-row{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
.micro{color:var(--muted-2); font-size:.85rem; margin-top:.9rem}

/* sections */
section{padding:3rem 0}
.section-alt{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.eyebrow{color:var(--fire); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; margin:0 0 .5rem}
h2.section-title{font-size:clamp(1.5rem,3.5vw,2.1rem); margin:0 0 .4rem; letter-spacing:-.01em}
.section-sub{color:var(--muted); max-width:40rem; margin:0 0 1.8rem}
.center{text-align:center} .center .section-sub{margin-left:auto;margin-right:auto}
/* .center is often put ON the paragraph rather than a parent, in which case the rule above
   cannot match and the 40rem box stays left-aligned inside the wrap: centered text in an
   off-centre box. Cover that shape too. */
.section-sub.center{margin-left:auto; margin-right:auto}

/* grids + cards */
.grid{display:grid; gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
	background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
	padding:1.35rem; transition:transform .1s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px); border-color:var(--fire)}
.card h3{margin:.2rem 0 .4rem; font-size:1.12rem}
.card p{margin:0; color:var(--muted); font-size:.96rem}
.ico{font-size:1.6rem; line-height:1; display:block; margin-bottom:.35rem}
.tag{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.16rem .5rem; border-radius:6px}
.tag-free{background:rgba(88,196,110,.16); color:#7fe08f}
.tag-paid{background:rgba(255,106,0,.16); color:var(--gold)}

/* steps */
.steps{counter-reset:step; display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.step{position:relative; padding-left:3rem}
.step::before{
	counter-increment:step; content:counter(step); position:absolute; left:0; top:-.1rem;
	width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center;
	font-weight:800; color:#fff; background:linear-gradient(135deg,var(--fire),var(--ember));
}
.step h3{margin:.1rem 0 .3rem; font-size:1.05rem}
.step p{margin:0; color:var(--muted); font-size:.94rem}

/* pricing */
.price-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto}
.plan{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.75rem; display:flex; flex-direction:column}
.plan.featured{border-color:var(--fire); box-shadow:0 0 0 1px var(--fire), 0 18px 40px rgba(225,29,29,.18)}
.plan h3{margin:.2rem 0; font-size:1.3rem}
.plan .price{font-size:2.1rem; font-weight:800; margin:.4rem 0 .1rem}
.plan .price small{font-size:.9rem; font-weight:600; color:var(--muted)}
.plan ul{list-style:none; padding:0; margin:1rem 0 1.4rem}
.plan li{padding:.35rem 0 .35rem 1.6rem; position:relative; color:var(--cream)}
.plan li::before{content:""; position:absolute; left:0; top:.55rem; width:.8rem; height:.9rem; background:linear-gradient(135deg,var(--fire),var(--ember)); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M160.5-26.4c9.3-7.8%2023-7.5%2031.9%20.9%2012.3%2011.6%2023.3%2024.4%2033.9%2037.4%2013.5%2016.5%2029.7%2038.3%2045.3%2064.2%205.2-6.8%2010-12.8%2014.2-17.9%201.1-1.3%202.2-2.7%203.3-4.1%207.9-9.8%2017.7-22.1%2030.8-22.1%2013.4%200%2022.8%2011.9%2030.8%2022.1%201.3%201.7%202.6%203.3%203.9%204.8%2010.3%2012.4%2024%2030.3%2037.7%2052.4%2027.2%2043.9%2055.6%20106.4%2055.6%20176.6%200%20123.7-100.3%20224-224%20224S0%20411.7%200%20288c0-91.1%2041.1-170%2080.5-225%2019.9-27.7%2039.7-49.9%2054.6-65.1%208.2-8.4%2016.5-16.7%2025.5-24.2zM225.7%20416c25.3%200%2047.7-7%2068.8-21%2042.1-29.4%2053.4-88.2%2028.1-134.4-4.5-9-16-9.6-22.5-2l-25.2%2029.3c-6.6%207.6-18.5%207.4-24.7-.5-17.3-22.1-49.1-62.4-65.3-83-5.4-6.9-15.2-8-21.5-1.9-18.3%2017.8-51.5%2056.8-51.5%20104.3%200%2068.6%2050.6%20109.2%20113.7%20109.2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M160.5-26.4c9.3-7.8%2023-7.5%2031.9%20.9%2012.3%2011.6%2023.3%2024.4%2033.9%2037.4%2013.5%2016.5%2029.7%2038.3%2045.3%2064.2%205.2-6.8%2010-12.8%2014.2-17.9%201.1-1.3%202.2-2.7%203.3-4.1%207.9-9.8%2017.7-22.1%2030.8-22.1%2013.4%200%2022.8%2011.9%2030.8%2022.1%201.3%201.7%202.6%203.3%203.9%204.8%2010.3%2012.4%2024%2030.3%2037.7%2052.4%2027.2%2043.9%2055.6%20106.4%2055.6%20176.6%200%20123.7-100.3%20224-224%20224S0%20411.7%200%20288c0-91.1%2041.1-170%2080.5-225%2019.9-27.7%2039.7-49.9%2054.6-65.1%208.2-8.4%2016.5-16.7%2025.5-24.2zM225.7%20416c25.3%200%2047.7-7%2068.8-21%2042.1-29.4%2053.4-88.2%2028.1-134.4-4.5-9-16-9.6-22.5-2l-25.2%2029.3c-6.6%207.6-18.5%207.4-24.7-.5-17.3-22.1-49.1-62.4-65.3-83-5.4-6.9-15.2-8-21.5-1.9-18.3%2017.8-51.5%2056.8-51.5%20104.3%200%2068.6%2050.6%20109.2%20113.7%20109.2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.plan .foot{margin-top:auto}

/* prose (legal / help / blog) */
.prose{max-width:46rem; margin:0 auto}
.prose h1{font-size:clamp(1.8rem,4vw,2.4rem); margin:.2rem 0 .3rem}
.prose h2{font-size:1.25rem; margin:2rem 0 .5rem}
.prose p,.prose li{color:var(--cream)}
.prose .updated{color:var(--muted-2); font-size:.9rem; margin-bottom:1.5rem}
.prose .note{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--fire); border-radius:8px; padding:.85rem 1rem; color:var(--muted); font-size:.92rem}
.empty-state{text-align:center; padding:3rem 0; color:var(--muted)}
.empty-state .ico{font-size:2.6rem}

/* CTA band */
.cta-band{background:linear-gradient(135deg,rgba(255,106,0,.14),rgba(225,29,29,.14)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-band .inner{text-align:center; padding:2.4rem 0}

/* footer */
.site-footer{border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; padding:2rem 0}
.site-footer .cols{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; justify-content:space-between}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--cream)}
.foot-links{display:flex; gap:1.1rem; flex-wrap:wrap}
.powered-by{text-align:center; color:var(--muted-2); font-size:.82rem; margin-top:.6rem}
.powered-by a{color:var(--muted); font-weight:600}
.powered-by a:hover{color:var(--fire)}

/* ---- auth funnel (login / register / password) -------------------------- */
.auth-wrap{max-width:460px; margin:2.5rem auto; padding:0 1.25rem}
.auth-wide{max-width:520px}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:2rem; box-shadow:0 18px 40px rgba(0,0,0,.35)}
.auth-card h1{font-size:1.6rem; margin:0 0 .3rem; letter-spacing:-.01em}
.auth-sub{color:var(--muted); margin:0 0 1.5rem}
.auth-form{display:grid; gap:1rem}
.auth-field{display:grid; gap:.4rem; font-weight:600; font-size:.95rem}
.auth-field .opt{color:var(--muted-2); font-weight:400}
.auth-field input{
	padding:.7rem .8rem; border-radius:10px; border:1px solid var(--line);
	background:var(--ink-2); color:var(--cream); font-size:1rem; font-family:inherit;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.auth-field input:focus{outline:none; border-color:var(--fire); box-shadow:0 0 0 3px rgba(255,106,0,.18)}
.auth-alert{background:rgba(225,29,29,.12); border:1px solid rgba(225,29,29,.45); color:#ffb1a8; border-radius:10px; padding:.75rem 1rem; margin:0 0 1.25rem}
.auth-alert ul{margin:0; padding-left:1.2rem}
.auth-notice{background:rgba(88,196,110,.12); border:1px solid rgba(88,196,110,.4); color:#a7e8b3; border-radius:10px; padding:.75rem 1rem; margin:0 0 1.25rem}
.auth-links{margin:1.4rem 0 0; color:var(--muted); font-size:.95rem}
.auth-links a{color:var(--gold); font-weight:600}
.auth-sep{color:var(--muted-2); margin:0 .5rem}

/* slim auth layout header */
.auth-top{display:flex; justify-content:center; padding:1.6rem 1rem .4rem}
.auth-top img{height:120px; width:auto; filter:drop-shadow(0 8px 22px rgba(255,106,0,.3))}

/* ---- subscribe / checkout (Web Payments SDK) ---------------------------- */
.sub-toggle{display:flex; gap:.5rem; margin-bottom:1rem}
.sub-toggle button{flex:1; padding:.65rem; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--cream); font-weight:700; cursor:pointer; font-family:inherit}
.sub-toggle button.active{border-color:var(--fire); background:linear-gradient(135deg,rgba(255,106,0,.18),rgba(225,29,29,.14))}
.sub-toggle .price{display:block; font-size:.8rem; color:var(--muted); font-weight:600; margin-top:.15rem}
.sub-note{background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; margin-bottom:1rem; color:var(--muted); font-size:.9rem; text-align:center}
#card-container{background:#fff; border-radius:10px; padding:.55rem .75rem; min-height:52px; margin-bottom:1rem}
.sub-status{min-height:1.2rem; color:#ffb1a8; font-size:.9rem; text-align:center; margin-top:.6rem}

/* ============================================================================
   App shell — authenticated surfaces (host dashboard, admin, singer). Same brand
   tokens as the public/auth funnel, with an app nav + content chrome.
   ============================================================================ */
.app-body{display:flex; flex-direction:column; min-height:100vh}
.app-header{position:sticky; top:0; z-index:20; background:rgba(20,16,13,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.app-bar{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; max-width:var(--wrap); margin:0 auto; padding:.55rem 1.25rem}
.app-bar .brand img{height:38px; width:auto; display:block}
.app-nav{display:flex; gap:.3rem; margin-left:.6rem; flex-wrap:wrap}
.app-nav a{color:var(--muted); font-weight:600; font-size:.95rem; padding:.4rem .7rem; border-radius:8px}
.app-nav a:hover{color:var(--cream); background:var(--ink-2); text-decoration:none}
.app-nav a.active{color:var(--cream); background:linear-gradient(135deg,rgba(255,106,0,.18),rgba(225,29,29,.14))}
.app-user{display:flex; align-items:center; gap:.7rem; margin-left:auto}
.app-userchip{color:var(--muted); font-weight:600; font-size:.9rem}
.btn-sm{padding:.42rem .85rem; font-size:.85rem; box-shadow:none}
.app-main{flex:1 0 auto; width:100%; max-width:var(--wrap); margin:0 auto; padding:2rem 1.25rem}
.app-footer{border-top:1px solid var(--line); color:var(--muted-2); font-size:.85rem; padding:1.25rem 0; text-align:center}

/* page header (title + count / actions) */
.page-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem}
.page-head h1{font-size:clamp(1.5rem,3vw,2rem); margin:0; letter-spacing:-.01em}
.page-head .sub{color:var(--muted); margin:.3rem 0 0}
.page-head .count{color:var(--muted-2); font-size:.95rem; font-weight:600}

/* panel (content card) */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem}
.panel + .panel{margin-top:1rem}
.panel h2{margin:0 0 .4rem; font-size:1.15rem}
.panel p{color:var(--muted); margin:.4rem 0}
.panel p:last-child{margin-bottom:0}

/* in-app flash notice */
.app-notice{background:rgba(88,196,110,.12); border:1px solid rgba(88,196,110,.4); color:#a7e8b3; border-radius:10px; padding:.75rem 1rem; margin:0 0 1.25rem}

/* status pills */
.pill{display:inline-block; padding:.22rem .65rem; border-radius:999px; font-size:.78rem; font-weight:700; text-transform:capitalize}
.pill-ok{background:rgba(88,196,110,.16); color:#7fe08f}
.pill-warn{background:rgba(255,181,71,.18); color:var(--gold)}
.pill-off{background:rgba(225,29,29,.14); color:#ffb1a8}

/* label / value grid (plan detail) */
.meta-grid{display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; margin:.75rem 0 0}
.meta-grid dt{color:var(--muted-2); font-weight:600}
.meta-grid dd{margin:0; color:var(--cream)}

/* data table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
.data-table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:640px}
.data-table thead th{text-align:left; background:var(--ink-2); color:var(--muted); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; padding:.7rem .8rem; border-bottom:1px solid var(--line); white-space:nowrap}
.data-table tbody td{padding:.62rem .8rem; border-bottom:1px solid var(--line); color:var(--cream)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover td{background:rgba(255,255,255,.02)}
.data-table .muted{color:var(--muted-2); white-space:nowrap}
.data-table .empty{color:var(--muted-2); padding:1.1rem .8rem}
.inline-form{display:inline; margin:0}
.inline-form .btn{white-space:nowrap}

/* cancel-plan control (dashboard) */
.cancel-box{margin-top:1rem; border-top:1px solid var(--line); padding-top:1rem}
.cancel-box summary{cursor:pointer; color:var(--muted); font-weight:600; font-size:.92rem}
.cancel-box summary:hover{color:var(--cream)}
.cancel-form{display:grid; gap:.55rem; margin-top:.9rem}
.cancel-opt{display:flex; align-items:baseline; gap:.5rem; color:var(--cream); font-size:.92rem}
.cancel-hint{color:var(--muted-2); font-size:.85rem}
.cancel-form .btn{justify-self:start; margin-top:.3rem}

/* square log viewer (admin) */
.log-filter{display:flex; gap:.5rem}
.log-filter a{color:var(--muted); font-weight:600; font-size:.9rem; padding:.3rem .7rem; border:1px solid var(--line); border-radius:8px}
.log-filter a:hover{color:var(--cream); text-decoration:none}
.log-filter a.active{color:var(--cream); border-color:var(--fire); background:linear-gradient(135deg,rgba(255,106,0,.18),rgba(225,29,29,.14))}
.log-detail{color:var(--muted-2); font-size:.82rem; margin-top:.2rem; max-width:34rem}
.log-drawer > td{background:var(--ink-2); padding:1rem}
.log-panels{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
.log-block strong{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:.3rem}
.log-pre{background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:.7rem; font-size:.78rem; line-height:1.5; overflow:auto; max-height:420px; white-space:pre; margin:0; color:var(--cream)}
@media (max-width:820px){ .log-panels{grid-template-columns:1fr} }
.dir-tag{display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.05em; padding:.1rem .35rem; border-radius:5px; margin-right:.35rem; vertical-align:middle}
.dir-outbound{background:rgba(255,181,71,.16); color:var(--gold)}
.dir-inbound{background:rgba(88,196,110,.16); color:#7fe08f}

/* feature tiles (what's coming, on the dashboard) */
.feature-row{display:grid; gap:.85rem; grid-template-columns:repeat(4,1fr); margin-top:1rem}
.feature{background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:1rem; text-align:center}
.feature .ico{font-size:1.5rem; margin-bottom:.15rem}
.feature h3{margin:.15rem 0 .2rem; font-size:.98rem}
.feature p{margin:0; color:var(--muted-2); font-size:.85rem}
.feature .soon{display:inline-block; margin-top:.5rem; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold)}

@media (max-width:780px){
	.grid-2,.grid-3,.grid-4,.steps,.price-grid{grid-template-columns:1fr}
	.nav{width:100%; order:3; margin-left:0}
	.nav-cta{margin-left:0}
	.app-nav{order:3; width:100%; margin-left:0}
	.feature-row{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
	.feature-row{grid-template-columns:1fr}
}

/* ---- Backups: inline name + rename modal ---- */
.backup-namecell{display:inline-flex; align-items:center; gap:.5rem}
.backup-label{font-weight:600}
.icon-btn{padding:.28rem .5rem; line-height:1; font-size:.95rem}
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; z-index:60; padding:1rem}
.modal-backdrop.hidden{display:none}
.modal-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; width:min(420px,100%); box-shadow:0 24px 70px rgba(0,0,0,.55)}
.modal-card h2{margin:0 0 1rem; font-size:1.15rem}
.modal-label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:1.1rem}
.modal-label input{display:block; width:100%; margin-top:.4rem; padding:.55rem .7rem; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream); font-family:inherit; font-size:.95rem}
.modal-label input:focus{outline:none; border-color:var(--fire)}
.modal-actions{display:flex; gap:.6rem; justify-content:flex-end}

/* ---- Cloud host remote (slice 6b) — mirrors the plugin LAN host remote (ui/lan/host.html),
   mobile-first. All rules are scoped under .hr-page / .hr so no other site page is affected.
   Local ember tokens mirror host.html's palette exactly. ---- */
.hr-page{max-width:640px; --hr-bg:#14100d; --hr-panel:#241c16; --hr-panel2:#2b211a; --hr-line:#3a2c22;
  --hr-text:#f7f1ea; --hr-dim:#b6a595; --hr-accent:#ff6a00; --hr-ember:#e11d1d; --hr-gold:#ffb547;
  --hr-ok:#7fe08f; --hr-err:#e5484d; --hr-raise:#2e231b; --hr-grad:linear-gradient(135deg,#ff6a00,#e11d1d)}
/* cancel the marketing-site `section{padding:3rem 0}` on the remote's <section>: under the Portal
   layout, .pf-main's own phone-tight padding is the spacing (identical to the singer portal).
   NO negative margins here — the old App-layout -2rem hack pulled content under the sticky header. */
.hr-page{padding-block:0}

/* D.1.4 quick-menu drawer — full-screen slide-in from the right (phone-first; a right panel on
   wide screens). Lives OUTSIDE the CBWire root so the 2s morph never closes it. Inherits the
   scoped --hr-* palette from its .hr-page ancestor. */
.hr-drawer-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:60}
.hr-drawer-backdrop.open{opacity:1; visibility:visible}
.hr-drawer{position:fixed; top:0; right:0; height:100%; width:100%; max-width:420px; background:var(--hr-bg); color:var(--hr-text); border-left:1px solid var(--hr-line); box-shadow:-10px 0 40px rgba(0,0,0,.55); transform:translateX(100%); transition:transform .22s ease; z-index:61; display:flex; flex-direction:column}
.hr-drawer.open{transform:translateX(0)}
.hr-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--hr-line)}
.hr-drawer-title{font-weight:800; font-size:1.1rem; color:var(--hr-text)}
.hr-drawer-x{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:none; border:none; color:var(--hr-dim); font-size:1.35rem; cursor:pointer; line-height:1}
.hr-drawer-x:hover{color:var(--hr-text)}
.hr-drawer-body{flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem}
.hr-drawer-foot{padding:1.1rem; border-top:1px solid var(--hr-line)}
.hr-drawer-home{display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%; min-height:48px; padding:.8rem 1rem; border-radius:10px; background:var(--hr-raise); border:1px solid var(--hr-line); color:var(--hr-text); font-weight:700; text-decoration:none}
.hr-drawer-home:hover{border-color:var(--hr-accent); text-decoration:none}
body.hr-drawer-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .hr-drawer,.hr-drawer-backdrop{transition:none} }

/* quick-menu buttons inside the drawer (shared; D.1.6/7/9 reuse .hr-qmbtn) */
.hr-qmbtn{display:flex; align-items:center; gap:.7rem; width:100%; min-height:52px; padding:.85rem 1rem; border-radius:12px; background:var(--hr-panel); border:1px solid var(--hr-line); color:var(--hr-text); font-weight:700; font-size:1rem; cursor:pointer; text-align:left}
.hr-qmbtn:hover{border-color:var(--hr-accent)}
.hr-qmbtn .fk-icon{font-size:1.5rem; flex:none}

/* D.1.6 background-music group in the quick menu */
.hr-qmlabel{font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--hr-dim); margin:.5rem 0 .1rem}
.hr-bggroup{display:flex; flex-direction:column; gap:.5rem}
.hr-bgrow{display:flex; gap:.5rem}
.hr-bgrow .hr-bgtoggle{flex:1}
.hr-bgicon{flex:none; width:56px; justify-content:center; gap:0}
.hr-bgvocals.active{border-color:var(--hr-accent); background:rgba(255,106,0,.14); color:var(--hr-accent)}
.hr-bgvocals.active .fk-icon{color:var(--hr-accent)}

/* D.1.5 song-request QR modal — full-screen: logo + full-width QR (white quiet-zone frame) + URL */
.hr-qr-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.78); opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:70}
.hr-qr-backdrop.open{opacity:1; visibility:visible}
.hr-qr-modal{position:fixed; inset:0; z-index:71; display:none; flex-direction:column; align-items:center; gap:1rem; padding:2rem 1.25rem; overflow-y:auto; background:var(--hr-bg)}
.hr-qr-modal.open{display:flex}
.hr-qr-x{position:absolute; top:.8rem; right:.8rem; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:none; border:none; color:var(--hr-dim); font-size:1.5rem; cursor:pointer; line-height:1}
.hr-qr-x:hover{color:var(--hr-text)}
.hr-qr-logo{width:min(70%,240px); height:auto; margin-top:1rem}
.hr-qr-frame{width:min(100%,420px); background:#fff; border-radius:16px; padding:1.1rem}
.hr-qr-img{display:block; width:100%; height:auto}
.hr-qr-url{font-weight:800; font-size:1.15rem; color:var(--hr-text); word-break:break-all; text-align:center}
.hr-qr-note{color:var(--hr-dim); text-align:center; max-width:22rem}
.hr-qr-cta{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.7rem 1.4rem; border-radius:10px; background:var(--hr-grad); color:#fff; font-weight:800; text-decoration:none}

/* D.1.7 party group in the drawer + the two full-screen party modals (rendered by the wire when
   data.partyModal is set; the dance/sound content reuses the .hr-rrow / .hr-sbgrid / .hr-sbbtn styles) */
.hr-partygroup{display:flex; flex-direction:column; gap:.5rem}
.hr-modal{position:fixed; inset:0; z-index:65; display:flex; flex-direction:column; background:var(--hr-bg); color:var(--hr-text)}
.hr-modal-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:1rem 1.1rem; border-bottom:1px solid var(--hr-line)}
.hr-modal-title{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem}
.hr-modal-x{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:none; border:none; color:var(--hr-dim); font-size:1.35rem; cursor:pointer; line-height:1}
.hr-modal-x:hover{color:var(--hr-text)}
.hr-modal-body{flex:1; overflow-y:auto; padding:1rem 1.1rem}

/* D.1.9 emergency stop/mute — grouped + padded (accidental-tap guard) above the Back pill */
.hr-estop-group{margin-bottom:.7rem; padding:.7rem; border:1px solid var(--hr-line); border-radius:12px; background:rgba(225,29,29,.06)}
.hr-estop{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; min-height:56px; padding:1rem; border-radius:10px; border:1px solid var(--hr-ember); background:transparent; color:var(--hr-ember); font-weight:800; font-size:1.05rem; cursor:pointer}
.hr-estop .fk-icon{color:inherit; font-size:1.3rem}
.hr-estop.arming{background:rgba(225,29,29,.16)}
.hr-estop.arming::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--hr-ember); transform-origin:left; animation:hrEstopArm .6s linear forwards}
@keyframes hrEstopArm{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.hr-estop.active{background:var(--hr-ember); color:#fff; border-color:var(--hr-ember); animation:hrEstopPulse 1.4s ease-in-out infinite}
.hr-estop.active .fk-icon{color:#fff}
@keyframes hrEstopPulse{ 0%,100%{box-shadow:0 0 0 2px rgba(225,29,29,.30),0 0 10px rgba(225,29,29,.5)} 50%{box-shadow:0 0 0 2px rgba(225,29,29,.5),0 0 20px rgba(225,29,29,.85)} }
.hr-estop-help{margin:.5rem 0 0; font-size:.78rem; color:var(--hr-dim); text-align:center; line-height:1.3}
@media (prefers-reduced-motion:reduce){ .hr-estop.arming::after{animation:none;transform:scaleX(1)} .hr-estop.active{animation:none} }

/* rig switcher (page level, above the component) */
.hr-norigs{padding:1.4rem}
.hr-norigs p{color:var(--muted); margin:0 0 1rem}
.hr-switch{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 .9rem}
.hr-switchlab{color:var(--muted-2); font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em}
.hr-rigpill{display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border:1px solid var(--hr-line);
  border-radius:999px; color:var(--hr-text); font-weight:600; font-size:.92rem; background:var(--hr-panel); min-height:38px}
.hr-rigpill:hover{border-color:var(--hr-accent); text-decoration:none}
.hr-rigpill.active{background:var(--hr-panel2); border-color:var(--hr-accent)}
.hr-dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none}
.hr-dot.on{background:var(--hr-ok); box-shadow:0 0 0 3px rgba(127,224,143,.18)}
.hr-dot.off{background:var(--muted-2)}

/* the component shell */
.hr{background:var(--hr-bg); color:var(--hr-text); border:1px solid var(--hr-line); border-radius:14px;
  overflow:hidden; -webkit-tap-highlight-color:transparent}
.hr *{box-sizing:border-box}

/* NOW PERFORMING bar + countdown (host.html #nowBar) */
.hr-nowbar{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--hr-panel2);
  border-bottom:2px solid var(--hr-accent)}
.hr-nb{min-width:0; flex:1}
.hr-nblbl{font-size:10.5px; font-weight:800; letter-spacing:1.5px; color:var(--hr-accent); display:flex; gap:8px; align-items:center}
.hr-conn{font-size:9.5px; letter-spacing:.5px; padding:1px 6px; border-radius:7px}
.hr-conn.on{background:rgba(127,224,143,.16); color:var(--hr-ok)}
.hr-conn.off{background:rgba(229,72,77,.16); color:var(--hr-err)}
.hr-nbsinger{font-size:19px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hr-nbsong{font-size:13px; color:var(--hr-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.1em}
.hr-cd{flex:none; text-align:center; min-width:82px; padding:6px 10px; border-radius:10px; background:#1a120c; border:1px solid var(--hr-line)}
.hr-cd .hr-cdt{font-size:23px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1}
.hr-cd .hr-cdl{font-size:10px; color:var(--hr-dim); letter-spacing:1px}
.hr-cd.warn .hr-cdt{color:var(--hr-err)}
.hr-cd.idle .hr-cdt{color:var(--hr-ok); font-size:15px; padding:5px 0}

/* dormant / waiting */
.hr-dormant{padding:2.4rem 1.2rem; text-align:center; color:var(--hr-dim)}
.hr-dormicon{font-size:2rem; margin-bottom:.5rem}
.hr-dormsub{font-size:.85rem; margin-top:.3rem; color:var(--muted-2)}

/* tab bar (host.html #tabs) — sticky so switching never needs a scroll-up */
.hr-tabs{display:flex; background:var(--hr-panel2); border-bottom:1px solid var(--hr-line); position:sticky; top:0; z-index:5}
.hr-tabs button{flex:1; border:none; border-radius:0; background:none; color:var(--hr-dim); font-family:inherit;
  font-size:14px; font-weight:700; padding:12px 4px; border-bottom:3px solid transparent; cursor:pointer; min-height:46px; white-space:nowrap}
.hr-tabs button.active{color:var(--hr-accent); border-bottom-color:var(--hr-accent)}
.hr-tabs button.flash{animation:hrflash 1.2s ease-in-out infinite}
@keyframes hrflash{0%,100%{background:transparent}50%{background:linear-gradient(135deg,rgba(255,106,0,.28),rgba(225,29,29,.28))}}
.hr-badge{display:inline-block; min-width:1.15rem; padding:0 .35rem; background:var(--hr-ember); color:#fff;
  border-radius:999px; font-size:.72rem; text-align:center; vertical-align:1px}

.hr-main{padding:10px 12px}
.hr-empty{color:var(--hr-dim); text-align:center; padding:2.4rem 1rem}
.hr-section{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--hr-dim);
  margin:.9rem 2px .5rem; display:flex; align-items:center; gap:.5rem}
.hr-section:first-child{margin-top:.2rem}

/* rotation rows (host.html .rrow) */
.hr-rrow{display:flex; align-items:center; gap:10px; padding:10px 10px; margin-bottom:8px;
  background:var(--hr-panel); border:1px solid var(--hr-line); border-radius:10px}
.hr-rrow.next{border-color:var(--hr-ok)}
.hr-rrow.paused{opacity:.55; border-style:dashed}
.hr-pos{flex:none; width:24px; text-align:right; font-weight:800; color:var(--hr-accent); font-size:17px}
.hr-who{flex:1; min-width:0}
.hr-nm{font-size:16.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hr-newtag{font-size:13px}
.hr-sg{font-size:12.5px; color:var(--hr-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hr-sg.need{color:var(--hr-accent); font-style:italic; font-weight:700}
.hr-acts{flex:none; display:flex; gap:6px}
.hr-acts button{padding:10px 12px; font-size:15px; line-height:1; min-width:42px; min-height:42px; border:1px solid var(--hr-line);
  background:var(--hr-raise); color:var(--hr-text); border-radius:8px; cursor:pointer; font-family:inherit}
.hr-acts button:active{background:var(--hr-panel2)}
.hr-acts button.del{color:var(--hr-err)}
.hr-acts button:disabled{opacity:.4}

/* buttons */
.hr button.primary{background:var(--hr-grad); border:1px solid transparent; color:#fff; font-weight:700; box-shadow:0 4px 14px rgba(225,29,29,.28)}
.hr button.decl{color:var(--hr-err)}

/* freeze bar */
.hr-freeze{display:flex; align-items:center; gap:.7rem; padding:.4rem 2px .9rem}
.hr-freeze span{color:var(--hr-dim)}
.hr-freeze strong{color:var(--hr-text)}
.hr-freezebtn{margin-left:auto; padding:10px 14px; border:1px solid var(--hr-line); background:var(--hr-raise);
  color:var(--hr-text); border-radius:8px; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; min-height:42px}
.hr-freezebtn.frozen{background:var(--hr-accent); border-color:var(--hr-accent); color:#181206}

/* approval + dance cards (host.html .rmItem) */
.hr-item{background:var(--hr-panel); border:1px solid var(--hr-line); border-radius:12px; padding:12px; margin-bottom:10px}
.hr-item.claim{border-color:#3f6aa8}
.hr-item.leave{border-color:var(--hr-err)}
.hr-item.hr-dancing{border-color:var(--hr-accent)}
.hr-itemwho{font-weight:700; font-size:16px}
.hr-itemsong{font-size:13.5px; color:var(--hr-dim); margin-top:3px}
.hr-dim{color:var(--muted-2)}
.hr-note{color:var(--hr-gold); font-style:italic; display:block; margin-top:2px}
.hr-chip{font-size:10.5px; font-weight:800; border-radius:8px; padding:2px 7px; vertical-align:1px; margin-left:4px}
.hr-chip.claimc{background:#243447; color:#8fc7ff}
.hr-itemacts{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
.hr-itemacts button{flex:1; min-width:120px; min-height:44px; padding:11px 14px; border:1px solid var(--hr-line);
  background:var(--hr-raise); color:var(--hr-text); border-radius:8px; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600}

/* sound board — grid sized for a 360px phone (host.html sound board) */
.hr-stopall{margin-left:auto; padding:6px 12px; font-size:13px; font-weight:700; border:1px solid var(--hr-line);
  background:var(--hr-raise); color:var(--hr-text); border-radius:8px; cursor:pointer; font-family:inherit; min-height:34px}
.hr-sbglabel{font-size:12px; font-weight:700; color:var(--hr-dim); margin:.5rem 2px .35rem}
.hr-sbgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-bottom:.6rem}
.hr-sbbtn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:12px 6px;
  min-height:64px; border:1px solid var(--hr-line); background:var(--hr-raise); color:var(--hr-text); border-radius:10px;
  cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; text-align:center}
.hr-sbbtn:active{background:var(--hr-panel2)}
.hr-sbbtn.on{background:rgba(255,106,0,.18); border-color:var(--hr-accent); color:var(--hr-gold)}
.hr-sbemoji{font-size:1.35rem; line-height:1}
.hr-sblabel{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}

/* transient "sent" toast (host.html .toast) */
/* bordered toast — floats fixed at the bottom-center of the window (outlined like the top-bar
   Sign out button; solid dark fill so it stays readable over content, subtle lift shadow) */
.hr-toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60;
  background:var(--hr-panel2); color:var(--hr-text); border:1px solid var(--hr-line); font-weight:600;
  padding:9px 16px; border-radius:8px; font-size:13px; max-width:90vw; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}

@media (min-width:560px){
  .hr-sbgrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}
@media (max-width:360px){
  .hr-tabs button{font-size:12.5px; padding:12px 2px}
  .hr-nbsinger{font-size:17px}
  .hr-sbgrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
}

/* -----------------------------------------------------------------------------
   Singers / Roster dashboard page (slice 7d). Desktop-primary, responsive: the
   list + detail sit side by side on wide screens and stack on narrow ones. All
   rules scoped under .roster-page / .roster so no other page is affected. Reuses
   the ember palette vars (--card/--line/--fire/--muted/…).
----------------------------------------------------------------------------- */
.roster-lead{color:var(--muted); margin:.2rem 0 1.2rem}
.roster .dim{color:var(--muted-2)}
.roster .num{text-align:right; white-space:nowrap}
.roster .btn-warn{background:linear-gradient(135deg,var(--gold),var(--fire)); color:#241c16; border:0}
.roster .roster-flash{background:rgba(255,181,71,.14); border:1px solid var(--gold); color:var(--gold);
	border-radius:10px; padding:.6rem .9rem; margin:0 0 1rem; font-weight:700}

/* conflict inbox */
.roster-conflicts{margin:0 0 1.2rem; border-left:3px solid var(--gold)}
.roster-h2{font-size:1.15rem; margin:0 0 .3rem}
.roster-count{display:inline-block; min-width:1.4em; text-align:center; background:var(--ember); color:#fff;
	border-radius:999px; padding:.05rem .5rem; font-size:.8rem; vertical-align:middle}
.roster-sub{margin:0 0 1rem; font-size:.9rem}
.roster-conflict{border-top:1px solid var(--line); padding:.9rem 0}
.roster-conflict:first-of-type{border-top:0}
.roster-conflict-name{font-weight:800; color:var(--cream); margin-bottom:.35rem}
.roster-cands{margin:.2rem 0 .7rem; padding-left:1.1rem; color:var(--muted)}
.roster-cands li{margin:.1rem 0}
.roster-conflict-acts, .roster-rename{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.roster-rename input{flex:1 1 200px; min-width:0; background:var(--ink-2); border:1px solid var(--line);
	color:var(--cream); border-radius:8px; padding:.5rem .7rem; font-family:inherit}

/* list + detail layout */
.roster-main{display:flex; gap:1.2rem; align-items:flex-start; flex-wrap:wrap}
.roster-list{flex:1 1 340px; min-width:0}
.roster-detail{flex:1 1 340px; min-width:0}
.roster-search{display:flex; gap:.5rem; margin:0 0 1rem}
.roster-search input{flex:1; min-width:0; background:var(--ink-2); border:1px solid var(--line);
	color:var(--cream); border-radius:8px; padding:.55rem .8rem; font-family:inherit}
.roster-tablewrap{overflow-x:auto}
.roster-table, .roster-history{width:100%; border-collapse:collapse; font-size:.92rem}
.roster-table th, .roster-history th{text-align:left; color:var(--muted-2); font-size:.78rem;
	text-transform:uppercase; letter-spacing:.04em; font-weight:800; padding:.4rem .5rem; border-bottom:1px solid var(--line)}
.roster-table th.num, .roster-history th.num{text-align:right}
.roster-table td, .roster-history td{padding:.5rem .5rem; border-bottom:1px solid var(--line); color:var(--cream)}
.roster-table tr.sel td{background:rgba(255,106,0,.10)}
.roster-rowact{text-align:right; white-space:nowrap}
.roster-badge{display:inline-block; background:rgba(255,106,0,.18); color:var(--gold); border-radius:999px;
	padding:.05rem .5rem; font-size:.72rem; font-weight:800; vertical-align:middle}
/* Path A: a singer linked to a FireballKaraoke account (fire-gradient ID-card icon), on the
   dashboard roster (.acct-badge) and the host-remote rotation (.hr-acct). */
.acct-badge, .hr-acct{display:inline-flex; align-items:center; vertical-align:middle; margin-left:.3rem}
.acct-badge .fk-icon, .hr-acct .fk-icon{width:1em; height:1em}
.roster-detail-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.roster-notes-lab{display:block; color:var(--muted); font-size:.85rem; font-weight:700; margin:.6rem 0}
.roster-notes-lab textarea{display:block; width:100%; margin-top:.3rem; background:var(--ink-2);
	border:1px solid var(--line); color:var(--cream); border-radius:8px; padding:.55rem .7rem;
	font-family:inherit; resize:vertical}
.roster-detail-acts{display:flex; gap:.5rem; flex-wrap:wrap; margin:.2rem 0 1rem}
.roster-h3{font-size:.95rem; color:var(--muted); margin:1rem 0 .5rem}

/* ============================================================================
   PHONE FRAME (.pf-*) — the shared mobile-first design system for the patron/host
   phone surfaces: the live song-request PORTAL (cloud twin of ui/lan/singer.html)
   and, as a fast-follow, the cloud HOST REMOTE. Rendered by the dedicated `Portal`
   layout (app/layouts/Portal.cfm) with its OWN header + footer — deliberately
   separate from the marketing (.site-*) and dashboard (.app-*) chrome.

   Design intent (Mike, 2026-07-15): a FRESH, modern, responsive, interactive phone
   design that KEEPS the site color scheme. So every rule reuses the :root brand
   tokens (--fire/--ember/--gold/--ink/--card/--line/--cream/--muted); only a few
   semantic aliases (ok/err/grad) are defined locally under .pf. All rules are scoped
   under .pf-body / .pf so no other site page is affected. Mobile-first: base styles
   target a ~360-430px phone; a 560px step widens for small tablets, a 360px step
   tightens. Tap targets >= 44px. Matches the .hr-* remote block's conventions.
   ============================================================================ */
.pf-body{
	--pf-ok:#7fe08f; --pf-err:#e5484d; --pf-info:#8fc7ff;
	--pf-grad:linear-gradient(135deg,var(--fire),var(--ember));
	--pf-max:480px; --pf-headh:59px;  /* header height — the NOW ticker sticks just below it */
	display:flex; flex-direction:column; min-height:100svh; min-height:100vh;
	background:var(--ink); color:var(--cream); -webkit-tap-highlight-color:transparent;
	overflow-x:hidden;
}
/* the centered phone column — content never exceeds a comfortable phone width */
.pf-frame{width:100%; max-width:var(--pf-max); margin:0 auto; flex:1 0 auto; display:flex; flex-direction:column; min-height:0}

/* --- header (own chrome: logo + venue, live status, account menu, return-to-site) --- */
.pf-header{position:sticky; top:0; z-index:30; background:rgba(20,16,13,.94); backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line)}
.pf-header::after{content:""; position:absolute; inset:0 0 auto 0; height:2px;
	background:var(--pf-grad); opacity:.9}
.pf-hbar{display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; max-width:var(--pf-max); margin:0 auto}
.pf-brand{display:flex; align-items:center; gap:.5rem; min-width:0; text-decoration:none; color:var(--cream)}
.pf-brand img{height:30px; width:auto; display:block; filter:drop-shadow(0 3px 10px rgba(255,106,0,.35))}
.pf-venue{display:flex; flex-direction:column; min-width:0; line-height:1.15}
.pf-venue b{font-size:.98rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--cream)}
.pf-venue small{font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.pf-htools{display:flex; align-items:center; gap:.4rem; margin-left:auto}
/* live/offline status chip with a pulsing dot */
.pf-status{display:inline-flex; align-items:center; gap:.35rem; font-size:.66rem; font-weight:800; letter-spacing:.05em;
	text-transform:uppercase; padding:.24rem .5rem; border-radius:999px; white-space:nowrap}
.pf-status .pf-dot{width:8px; height:8px; border-radius:50%; flex:none}
.pf-status.live{background:rgba(127,224,143,.14); color:var(--pf-ok)}
.pf-status.live .pf-dot{background:var(--pf-ok); animation:pfpulse 1.8s ease-in-out infinite}
.pf-status.off{background:rgba(229,72,77,.14); color:var(--pf-err)}
.pf-status.off .pf-dot{background:var(--pf-err)}
@keyframes pfpulse{0%,100%{box-shadow:0 0 0 0 rgba(127,224,143,.5)}50%{box-shadow:0 0 0 5px rgba(127,224,143,0)}}
/* round icon button — home (return to main site) + account menu */
.pf-iconbtn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
	border-radius:12px; border:1px solid var(--line); background:var(--ink-2); color:var(--cream);
	font-size:1.1rem; line-height:1; cursor:pointer; text-decoration:none; transition:transform .08s ease, border-color .15s ease, background .15s ease}
.pf-iconbtn:hover{border-color:var(--fire); text-decoration:none}
.pf-iconbtn:active{transform:scale(.94); background:var(--card)}

/* --- NOW ticker (full-width band, sticky just under the header; twin of singer.html #strip) --- */
.pf-now{position:sticky; top:var(--pf-headh); z-index:20; display:flex; align-items:center; gap:.5rem;
	padding:.42rem .9rem; background:var(--ink-2); border-bottom:1px solid var(--line); font-size:.82rem}
.pf-now .lbl{font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fire); flex:none}
.pf-now .txt{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--cream)}
.pf-now .txt b{font-weight:800}

/* --- sticky tab bar (Request / My History, etc.) --- */
.pf-tabs{position:sticky; top:0; z-index:18; display:flex; background:var(--ink-2); border-bottom:1px solid var(--line)}
.pf-tabs button{flex:1; min-height:46px; padding:.7rem .4rem; border:0; border-bottom:3px solid transparent;
	background:none; color:var(--muted); font-family:inherit; font-size:.9rem; font-weight:800; letter-spacing:.01em;
	cursor:pointer; white-space:nowrap; transition:color .15s ease, border-color .2s ease}
.pf-tabs button.active{color:var(--fire); border-bottom-color:var(--fire)}
.pf-tabs button:active{background:rgba(255,106,0,.06)}
.pf-tabs .pf-badge{display:inline-block; min-width:1.15rem; padding:0 .35rem; margin-left:.2rem; background:var(--ember);
	color:#fff; border-radius:999px; font-size:.7rem; font-weight:800; vertical-align:1px}

/* --- main scroll region --- */
.pf-main{flex:1 0 auto; padding:.9rem .8rem 1.4rem; max-width:var(--pf-max); margin:0 auto; width:100%}
.pf-section{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
	margin:.2rem .15rem .55rem; display:flex; align-items:center; gap:.5rem}

/* --- cards --- */
.pf-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem; margin-bottom:.75rem;
	box-shadow:0 2px 10px rgba(0,0,0,.22)}
.pf-card.glow{border-color:var(--fire); box-shadow:0 0 0 1px rgba(255,106,0,.35), 0 10px 30px rgba(225,29,29,.16)}
.pf-card h2{margin:0 0 .3rem; font-size:1.1rem; letter-spacing:-.01em}
.pf-card p{margin:.2rem 0; color:var(--muted); font-size:.92rem}

/* --- buttons --- */
.pf-btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:46px; padding:.72rem 1.1rem;
	border-radius:12px; border:1px solid var(--line); background:var(--ink-2); color:var(--cream); font-family:inherit;
	font-size:.98rem; font-weight:700; cursor:pointer; text-decoration:none; text-align:center; line-height:1.1;
	transition:transform .08s ease, box-shadow .2s ease, border-color .15s ease, background .15s ease}
.pf-btn:hover{text-decoration:none}
.pf-btn:active{transform:translateY(1px) scale(.99)}
.pf-btn:disabled{opacity:.45; cursor:default}
.pf-btn.primary{background:var(--pf-grad); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(225,29,29,.3)}
.pf-btn.primary:hover{box-shadow:0 8px 24px rgba(225,29,29,.42)}
.pf-btn.ghost{background:transparent}
.pf-btn.ghost:hover{border-color:var(--fire)}
.pf-btn.danger{color:var(--pf-err); border-color:rgba(229,72,77,.4)}
.pf-btn.block{display:flex; width:100%}
.pf-btn.sm{min-height:40px; padding:.5rem .8rem; font-size:.86rem; border-radius:10px}
.pf-btn.wide{flex:1}

/* --- inputs --- */
.pf-field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:.75rem; font-weight:700; font-size:.86rem; color:var(--muted)}
.pf-field .opt{color:var(--muted-2); font-weight:500}
.pf-input,.pf-select{width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid var(--line);
	background:var(--ink-2); color:var(--cream); font-size:1rem; font-family:inherit;
	transition:border-color .15s ease, box-shadow .15s ease}
.pf-input:focus,.pf-select:focus{outline:none; border-color:var(--fire); box-shadow:0 0 0 3px rgba(255,106,0,.18)}
.pf-input::placeholder{color:var(--muted-2)}
.pf-searchrow{position:sticky; top:0; z-index:8; display:flex; gap:.5rem; padding:.2rem 0 .6rem; background:var(--ink)}

/* --- chips / brand-filter pills --- */
/* --- data & account (E7): the danger zone on /my/profile --- */
.acct-danger{margin-top:1.1rem; padding:.9rem 1rem; border:1px solid rgba(225,29,29,.45); border-radius:12px;
	background:rgba(225,29,29,.06)}
.acct-danger h3{margin:0 0 .4rem}
.acct-delform{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-top:.6rem}
.acct-delform label{display:flex; flex-direction:column; gap:.3rem; color:var(--muted); font-weight:600; font-size:.9rem}
.acct-delform input{background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream);
	padding:.55rem .7rem; min-height:44px}
.acct-delform input:focus{outline:none; border-color:#e11d1d}
.btn-danger{background:linear-gradient(135deg,#e11d1d,#a30f0f); box-shadow:0 6px 18px rgba(225,29,29,.28)}

/* --- notifications (E6): the App-header bell + the /my/notifications list --- */
.fk-bell{position:relative; display:inline-flex; align-items:center; padding:.35rem; font-size:1.15rem; text-decoration:none}
.fk-bell-count{position:absolute; top:-2px; right:-4px; min-width:1.05rem; height:1.05rem; padding:0 .2rem;
	display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
	background:linear-gradient(135deg,var(--fire),var(--ember)); color:#fff; font-size:.62rem; font-weight:800}
.nf-row.nf-unread{border-color:rgba(255,106,0,.55); background:rgba(255,106,0,.07)}
.nf-new{white-space:nowrap}
.fh-prefs{display:flex; gap:1rem; flex-wrap:wrap; margin-top:.55rem}
.fh-pref{display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.9rem; min-height:28px}
.fh-pref input{width:1.05rem; height:1.05rem; accent-color:var(--fire)}

/* --- followed hosts (E5): one card per host on /my/hosts + the public-profile Follow button --- */
.fh-list{display:flex; flex-direction:column; gap:.7rem}
.fh-card{background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem}
.fh-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.fh-name{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:1.05rem}
.fh-name a{color:var(--cream)}
.fh-live{white-space:nowrap; text-decoration:none}
.fh-shows{display:flex; flex-direction:column; gap:.3rem; margin-top:.55rem}
.fh-show{display:flex; gap:.6rem; flex-wrap:wrap}
.fh-date{font-weight:700; white-space:nowrap}
.fh-noshows{margin:.45rem 0 0}
.follow-form{display:inline-block; margin:0}

/* E4: the signed-in singer's favorites-in-tonight's-songbook strip (above search) */
.pf-favs{margin:.2rem 0 .9rem}
.pf-chips{display:flex; gap:.4rem; overflow-x:auto; padding:.1rem 0 .5rem; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.pf-chips::-webkit-scrollbar{display:none}
.pf-chip{flex:none; display:inline-flex; align-items:center; padding:.4rem .85rem; border-radius:999px; border:1px solid var(--line);
	background:var(--ink-2); color:var(--muted); font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; min-height:40px;
	transition:border-color .15s ease, color .15s ease, background .15s ease}
.pf-chip.active{color:#fff; background:var(--pf-grad); border-color:transparent}
.pf-chip:active{transform:scale(.96)}

/* --- list rows (rotation / queue / history / catalog results) --- */
.pf-row{display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; margin-bottom:.5rem;
	background:var(--card); border:1px solid var(--line); border-radius:12px}
.pf-row.next{border-color:var(--pf-ok)}
.pf-row .pf-pos{flex:none; min-width:1.6rem; text-align:right; font-weight:800; font-size:1.05rem; color:var(--fire)}
.pf-row .pf-rmain{flex:1; min-width:0}
.pf-row .pf-rtitle{font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-row .pf-rsub{font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-row .pf-rsub.need{color:var(--fire); font-style:italic; font-weight:700}
.pf-row .pf-racts{flex:none; display:flex; gap:.4rem}
/* live name-check hint under the register field (P3) */
.pf-namehint{font-size:.8rem; font-weight:600; margin-top:.1rem}
.pf-namehint.ok{color:#a7e8b3}
.pf-namehint.err{color:#ffb1a8}
/* history-row key stepper + remove (P1/P2) */
.pf-keyrow{display:flex; align-items:center; gap:.3rem}
.pf-keyval{font-size:.74rem; font-weight:700; color:var(--muted); min-width:3.2rem; text-align:center; white-space:nowrap}
.pf-keybtn{display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:44px; padding:0 .35rem;
	border-radius:9px; border:1px solid var(--line); background:var(--ink-2); color:var(--cream); cursor:pointer; font-size:.85rem;
	transition:border-color .15s ease, color .15s ease}
.pf-keybtn:disabled{opacity:.4}
.pf-keybtn:not(:disabled):active{transform:scale(.94)}
.pf-keybtn.danger{color:#ffb1a8; border-color:rgba(229,72,77,.4)}

/* --- banners (leave / claim / freeze / limit notices) --- */
.pf-banner{border-radius:12px; padding:.7rem .9rem; margin-bottom:.75rem; font-size:.9rem; font-weight:600; border:1px solid}
.pf-banner.info{background:rgba(143,199,255,.1); border-color:rgba(143,199,255,.4); color:var(--pf-info)}
.pf-banner.warn{background:rgba(255,181,71,.12); border-color:rgba(255,181,71,.4); color:var(--gold)}
.pf-banner.err{background:rgba(229,72,77,.12); border-color:rgba(229,72,77,.45); color:#ffb1a8}
.pf-banner.ok{background:rgba(127,224,143,.12); border-color:rgba(127,224,143,.4); color:#a7e8b3}

/* --- transient toast (dispatched from the wire, auto-clears after ~10s) --- */
.pf-toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);
	transform:translate(-50%, 1rem); z-index:1000; max-width:min(92vw, 30rem);
	padding:.8rem 1.1rem; border-radius:14px; background:rgba(127,224,143,.16);
	border:1px solid rgba(127,224,143,.5); color:#a7e8b3; font-size:.92rem; font-weight:600;
	text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.4);
	opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease}
.pf-toast.show{opacity:1; transform:translate(-50%, 0)}

/* --- empty / closed states --- */
.pf-empty{text-align:center; padding:2.6rem 1.2rem; color:var(--muted)}
.pf-empty .pf-emico{font-size:2.6rem; line-height:1; margin-bottom:.6rem; filter:drop-shadow(0 6px 18px rgba(255,106,0,.28))}
.pf-empty h2{margin:.2rem 0 .3rem; font-size:1.25rem; color:var(--cream); letter-spacing:-.01em}
.pf-empty p{margin:.2rem auto; max-width:22rem; font-size:.94rem}

/* the closed-portal hero card (show not started yet) */
.pf-closed{position:relative; overflow:hidden}
.pf-closed::before{content:""; position:absolute; inset:-40% 0 auto 0; height:220px; z-index:0;
	background:radial-gradient(60% 60% at 50% 20%, rgba(255,106,0,.22), rgba(225,29,29,.06) 45%, transparent 70%); pointer-events:none}
.pf-closed > *{position:relative; z-index:1}

/* --- toast --- */
.pf-toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60; max-width:90vw; white-space:nowrap;
	background:var(--card); color:var(--cream); border:1px solid var(--line); font-weight:600; font-size:.88rem;
	padding:.6rem 1rem; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* --- bottom sheet / modal --- */
.pf-backdrop{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center}
.pf-backdrop.center{align-items:center; padding:1rem}
.pf-sheet{width:100%; max-width:var(--pf-max); background:var(--card); border:1px solid var(--line);
	border-radius:18px 18px 0 0; padding:1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.pf-backdrop.center .pf-sheet{border-radius:18px}
.pf-sheet h2{margin:0 0 .8rem; font-size:1.15rem}
.pf-sheet-acts{display:flex; gap:.6rem; margin-top:1rem}

/* --- footer (own chrome: powered-by + return-to-site + legal) --- */
.pf-footer{flex:none; border-top:1px solid var(--line); padding:1.1rem .8rem calc(1.1rem + env(safe-area-inset-bottom));
	text-align:center; color:var(--muted-2); font-size:.8rem}
.pf-footer .pf-foothome{display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.5rem; padding:.5rem 1rem;
	border:1px solid var(--line); border-radius:999px; color:var(--muted); font-weight:700; font-size:.82rem}
.pf-footer .pf-foothome:hover{border-color:var(--fire); color:var(--cream); text-decoration:none}
.pf-footer .pf-footlinks{display:flex; gap:1rem; justify-content:center; margin-top:.35rem}
.pf-footer a{color:var(--muted-2)}
.pf-footer a:hover{color:var(--cream)}

/* small-tablet widen */
@media (min-width:560px){
	.pf-body{--pf-max:560px}
	.pf-main{padding-left:1rem; padding-right:1rem}
}
/* tight phones */
@media (max-width:360px){
	.pf-tabs button{font-size:.82rem}
	.pf-venue b{font-size:.9rem}
	.pf-btn{font-size:.92rem}
}
/* respect reduced-motion */
@media (prefers-reduced-motion:reduce){
	.pf-status.live .pf-dot{animation:none}
	.pf-btn,.pf-chip,.pf-iconbtn{transition:none}
}

/* ============================================================================
   G11b — the site header (.fk-nav), shared by the Public and App layouts
   (views/partials/_appMenu.cfm). Replaces the CC2 flat menu, which rendered
   every role group inline and expanded: an admin who is also a host met 33
   links on one level.

   Desktop: site links, a muted separator, then role dropdowns that open on
   hover AND :focus-within (so a keyboard needs no JS), plus an account menu on
   the right. Phone (<=900px): a drawer behind a CSS-checkbox burger, sections
   expanded by default so it works with scripting off; fk-menu.js adds the `js`
   class and folds them. 44px targets throughout.

   Scoped under .fk-nav only; never restyles the portal (.pf-) or remote (.hr-).
   ============================================================================ */
.fk-nav{display:flex; align-items:center; gap:1rem; flex:1 1 auto; min-width:0}
.fk-nav-toggle{display:none}
.fk-nav-burger{display:none; cursor:pointer; min-width:44px; min-height:44px; margin-left:auto;
	border:1px solid var(--line); border-radius:10px;
	flex-direction:column; justify-content:center; align-items:center; gap:4px}
.fk-nav-burger span{display:block; width:20px; height:2px; background:var(--cream); border-radius:2px}
.fk-nav-burger:hover{border-color:var(--fire)}

.fk-nav-panel{display:flex; align-items:center; gap:1rem; flex:1 1 auto; min-width:0}
.fk-nav-links{display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap}
.fk-nav-links a{display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-weight:600; font-size:.95rem}
.fk-nav-links a:hover{color:var(--cream); text-decoration:none}
.fk-nav-links a[aria-current="page"]{color:var(--cream)}

/* the separator that says "everything past here is your account" */
.fk-nav-sep{width:1px; align-self:stretch; margin:.55rem .25rem; background:var(--line)}

.fk-nav-roles{display:flex; align-items:center; gap:.25rem}
.fk-nav-role{position:relative}
.fk-nav-roletop,.fk-nav-accttop{display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
	padding:.35rem .7rem; border:0; border-radius:10px; background:none; cursor:pointer;
	color:var(--muted); font-weight:700; font-size:.95rem; font-family:inherit}
.fk-nav-roletop:hover,.fk-nav-accttop:hover{color:var(--cream); background:var(--ink-2)}
.fk-caret{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
	border-top:5px solid currentColor; opacity:.7}

.fk-nav-drop{position:absolute; top:100%; left:0; z-index:40; min-width:13rem; display:none;
	padding:.4rem; background:var(--card); border:1px solid var(--line); border-radius:12px;
	box-shadow:0 18px 40px rgba(0,0,0,.45)}
.fk-nav-role:hover .fk-nav-drop,
.fk-nav-role:focus-within .fk-nav-drop,
.fk-nav-role.is-open .fk-nav-drop,
.fk-nav-acct:hover .fk-nav-drop,
.fk-nav-acct:focus-within .fk-nav-drop,
.fk-nav-acct.is-open .fk-nav-drop{display:block}
.fk-nav-drop a{display:flex; align-items:center; min-height:40px; padding:.4rem .6rem; border-radius:8px;
	color:var(--muted); font-size:.92rem; font-weight:600}
.fk-nav-drop a:hover{color:var(--cream); background:var(--ink-2); text-decoration:none}
.fk-nav-drop a.active{color:var(--cream); background:linear-gradient(135deg,rgba(255,106,0,.18),rgba(225,29,29,.14))}

.fk-nav-right{display:flex; align-items:center; gap:.6rem; margin-left:auto}
.fk-nav-acct{position:relative}
.fk-nav-acctdrop{left:auto; right:0; min-width:17.5rem; padding:0}
.fk-avatar{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
	border-radius:999px; background:linear-gradient(135deg,var(--fire),var(--ember)); color:#fff;
	font-size:.78rem; font-weight:800; letter-spacing:.02em}
.fk-avatar-lg{width:40px; height:40px; font-size:.9rem}

.fk-acct-card{display:flex; gap:.7rem; padding:.9rem; border-bottom:1px solid var(--line)}
.fk-acct-who{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.fk-acct-who b{color:var(--cream)}
.fk-acct-mail{font-size:.8rem; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis}
.fk-acct-roles{display:flex; gap:.25rem; flex-wrap:wrap; margin-top:.15rem}
.fk-rolechip{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
	color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:.1rem .4rem}
.fk-acct-plan{display:flex; flex-direction:column; gap:.35rem; padding:.75rem .9rem; border-bottom:1px solid var(--line)}
.fk-acct-planrow{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.85rem}
.fk-acct-plan a{font-size:.85rem; font-weight:600}
.fk-planpill{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
	padding:.15rem .5rem; border-radius:999px; background:var(--ink-2); color:var(--muted)}
.fk-plan-active,.fk-plan-comped{background:rgba(127,224,143,.14); color:#7fe08f}
.fk-plan-trialing{background:rgba(255,181,71,.14); color:var(--gold)}
.fk-plan-grace{background:rgba(255,106,0,.16); color:var(--fire)}
.fk-plan-none,.fk-plan-canceled{background:rgba(225,29,29,.12); color:#ff9c9c}
.fk-acct-links{padding:.4rem}
.fk-acct-count{margin-left:auto; font-size:.72rem; font-weight:800; color:#fff; background:var(--ember);
	border-radius:999px; padding:.05rem .4rem}
.fk-acct-foot{padding:.4rem; border-top:1px solid var(--line)}
.fk-acct-foot a{display:flex; align-items:center; min-height:40px; padding:.4rem .6rem; border-radius:8px; font-weight:600}
.fk-acct-foot a:hover{background:var(--ink-2); text-decoration:none}

/* drawer-only pieces, hidden on desktop */
.fk-nav-drawercard,.fk-nav-drawerfoot{display:none}

.fk-impersonate{background:linear-gradient(135deg,var(--fire),var(--ember)); color:#fff;
	padding:.45rem .9rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.9rem}
.fk-impersonate-end{background:#1c1410; color:var(--gold)}

@media (max-width:900px){
	.fk-nav-burger{display:flex; order:3}
	.fk-nav-right{order:2; margin-left:auto}
	.fk-nav-panel{display:none; position:absolute; left:0; right:0; top:100%; z-index:30;
		background:rgba(20,16,13,.985); border-bottom:1px solid var(--line);
		padding:.6rem 1.25rem 1rem; flex-direction:column; align-items:stretch; gap:.2rem;
		max-height:calc(100vh - 60px); overflow:auto}
	.fk-nav-toggle:checked ~ .fk-nav-panel{display:flex}
	.fk-nav-links{flex-direction:column; gap:0; align-items:stretch}
	.fk-nav-links a{border-bottom:1px solid var(--line)}
	.fk-nav-sep{display:none}
	.fk-nav-roles{flex-direction:column; align-items:stretch; gap:0}
	.fk-nav-role{position:static}
	.fk-nav-roletop{width:100%; justify-content:space-between; color:var(--gold);
		text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; padding:.6rem .2rem}
	/* expanded by default so the drawer works with no JS; fk-menu.js adds .js and folds */
	.fk-nav-drop{position:static; display:block; border:0; box-shadow:none; background:none; padding:0 0 .4rem}
	.fk-nav.js .fk-nav-role:not(.is-open) .fk-nav-drop{display:none}
	.fk-nav-drop a{min-height:44px; padding-left:.6rem}
	.fk-nav-acctdrop{position:absolute; right:.5rem; left:auto; top:100%}
	.fk-nav.js .fk-nav-acct:not(.is-open) .fk-nav-drop{display:none}
	.fk-nav-drawercard{display:flex; align-items:center; gap:.7rem; padding:.3rem 0 .8rem; border-bottom:1px solid var(--line)}
	.fk-nav-who{display:flex; flex-direction:column; min-width:0}
	.fk-nav-who b{color:var(--cream)}
	.fk-nav-roleline{font-size:.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:.05em}
	.fk-nav-drawerfoot{display:block; margin-top:.5rem; padding-top:.6rem; border-top:1px solid var(--line)}
	.fk-nav-drawerfoot a{display:flex; align-items:center; min-height:44px; font-weight:700}
}

/* ============================================================================
   D8 — Shows page (.shows-, dashboard show scheduling: series + occurrences).
   App-layout page; reuses .panel/.btn. Scoped here only — never touches the
   portal (.pf-) or remote (.hr-) blocks.
   ============================================================================ */
.shows-lead{color:var(--muted); margin:.3rem 0 1.25rem}
.shows-flash{background:rgba(255,181,71,.12); border:1px solid rgba(255,181,71,.4); color:var(--gold);
	border-radius:10px; padding:.6rem .9rem; margin-bottom:1rem; font-weight:600}
.shows-flash.error{background:rgba(225,29,29,.12); border-color:rgba(225,29,29,.5); color:#ff9c9c}
.shows-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem}
.shows-head h2{margin:0}
.shows-occlist{display:flex; flex-direction:column}
.shows-occrow{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.6rem .2rem; border-bottom:1px solid var(--line)}
.shows-occrow:last-child{border-bottom:0}
.shows-occrow.is-canceled .shows-occwhen b, .shows-occrow.is-canceled .shows-occwhat{color:var(--muted-2); text-decoration:line-through}
.shows-occrow.is-canceled .shows-badge{text-decoration:none}
.shows-occwhen{min-width:11rem; display:flex; flex-direction:column}
.shows-occwhat{flex:1 1 14rem}
.shows-occacts{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-left:auto}
.shows-copyform{display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap}
.shows-actbtns{display:inline-flex; gap:.4rem}
.shows-badge{display:inline-block; margin-left:.45rem; padding:.1rem .55rem; border-radius:999px; font-size:.72rem;
	font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--ink-2); border:1px solid var(--line); color:var(--muted)}
.shows-badge.canceled{border-color:rgba(225,29,29,.5); color:#ff9c9c}
.shows-serieslist{display:flex; flex-direction:column}
.shows-seriescard{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.65rem .2rem; border-bottom:1px solid var(--line)}
.shows-seriescard:last-child{border-bottom:0}
.shows-seriescard.is-paused .shows-seriesmain b{color:var(--muted-2)}
.shows-seriesmain{flex:1 1 16rem; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.shows-next{font-size:.85rem}
.shows-seriesacts{display:flex; gap:.4rem; margin-left:auto}
.shows-form h2{margin-top:0}
.shows-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.1rem}
.shows-grid label{display:flex; flex-direction:column; gap:.3rem; color:var(--muted); font-weight:600; font-size:.9rem}
.shows-grid input, .shows-grid select{background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
	color:var(--cream); padding:.55rem .7rem; font-size:1rem; min-height:44px}
.shows-grid input:focus, .shows-grid select:focus{outline:none; border-color:var(--fire)}
.shows-venueadd{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; align-self:end}
.shows-venueadd input{background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream); padding:.5rem .7rem; min-height:44px}
.shows-formacts{display:flex; gap:.6rem; margin-top:1.1rem}
@media (max-width:640px){
	.shows-grid{grid-template-columns:1fr}
	.shows-occwhen{min-width:0; width:100%}
	.shows-occacts, .shows-seriesacts{margin-left:0; width:100%}
	.shows-occacts .btn, .shows-seriesacts .btn{min-height:44px}
}

/* ============================================================================
   D9 — host profile editor (.pe-, dashboard) + public host profile (.hostprof-).
   Scoped blocks only — never touches the portal (.pf-) or remote (.hr-).
   ============================================================================ */
.pe-lead{color:var(--muted); margin:.3rem 0 1.25rem}
.pe-flash{background:rgba(255,181,71,.12); border:1px solid rgba(255,181,71,.4); color:var(--gold);
	border-radius:10px; padding:.6rem .9rem; margin-bottom:1rem; font-weight:600}
.pe-flash.error{background:rgba(225,29,29,.12); border-color:rgba(225,29,29,.5); color:#ff9c9c}
.pe-slugrow{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.pe-slugprefix{color:var(--muted-2); font-weight:600}
.pe-slugrow input{flex:1 1 12rem; background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
	color:var(--cream); padding:.55rem .7rem; font-size:1rem; min-height:44px}
.pe-slugrow input:focus{outline:none; border-color:var(--fire)}
.pe-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.1rem}
.pe-grid label{display:flex; flex-direction:column; gap:.3rem; color:var(--muted); font-weight:600; font-size:.9rem}
.pe-grid .pe-full{grid-column:1 / -1}
/* All text-entry input types share the text-box look (email/password/url/tel/etc. were
   previously missed by a text-only selector). Widget types — checkbox/radio/file/range/
   color/submit — are intentionally excluded (they have their own rules, e.g. .pe-optin,
   .pe-upform), so this lists the text-like types rather than using a bare `input`. */
.pe-grid input[type="text"], .pe-grid input[type="email"], .pe-grid input[type="password"],
.pe-grid input[type="url"], .pe-grid input[type="tel"], .pe-grid input[type="search"],
.pe-grid input[type="number"], .pe-grid input[type="date"], .pe-grid input[type="datetime-local"],
.pe-grid input[type="month"], .pe-grid input[type="week"], .pe-grid input[type="time"],
.pe-grid textarea{background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
	color:var(--cream); padding:.55rem .7rem; font-size:1rem}
.pe-grid input[type="text"], .pe-grid input[type="email"], .pe-grid input[type="password"],
.pe-grid input[type="url"], .pe-grid input[type="tel"], .pe-grid input[type="search"],
.pe-grid input[type="number"], .pe-grid input[type="date"], .pe-grid input[type="datetime-local"],
.pe-grid input[type="month"], .pe-grid input[type="week"], .pe-grid input[type="time"]{min-height:44px}
.pe-grid input[type="text"]:focus, .pe-grid input[type="email"]:focus, .pe-grid input[type="password"]:focus,
.pe-grid input[type="url"]:focus, .pe-grid input[type="tel"]:focus, .pe-grid input[type="search"]:focus,
.pe-grid input[type="number"]:focus, .pe-grid input[type="date"]:focus, .pe-grid input[type="datetime-local"]:focus,
.pe-grid input[type="month"]:focus, .pe-grid input[type="week"]:focus, .pe-grid input[type="time"]:focus,
.pe-grid textarea:focus{outline:none; border-color:var(--fire)}
.pe-optin{flex-direction:row !important; align-items:center; gap:.6rem !important; grid-column:1 / -1; min-height:44px}
.pe-optin input{width:1.15rem; height:1.15rem; accent-color:var(--fire)}
.pe-acts{margin-top:1.1rem}
.pe-mediagrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.pe-mediacard h3{margin:.2rem 0 .6rem}
.pe-preview{display:block; max-width:100%; width:220px; height:auto; border-radius:12px; border:1px solid var(--line); margin-bottom:.7rem}
.pe-preview.logo{width:120px; background:var(--ink-2); padding:.5rem}
.pe-noimg{width:220px; max-width:100%; height:120px; display:flex; align-items:center; justify-content:center;
	border:1px dashed var(--line); border-radius:12px; color:var(--muted-2); margin-bottom:.7rem}
.pe-upform{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.pe-upform input[type="file"]{color:var(--muted); max-width:100%}
@media (max-width:640px){
	.pe-grid, .pe-mediagrid{grid-template-columns:1fr}
}

/* public host profile page */
.hostprof{padding:2.2rem 0 3rem}
.hostprof-live{display:flex; align-items:center; gap:.6rem; margin-bottom:1.4rem; padding:.85rem 1.1rem;
	border-radius:12px; border:1px solid rgba(255,106,0,.55); color:var(--cream); font-size:1.02rem;
	background:linear-gradient(135deg,rgba(255,106,0,.2),rgba(225,29,29,.16))}
.hostprof-live:hover{text-decoration:none; border-color:var(--fire)}
.hostprof-livedot{width:.65rem; height:.65rem; border-radius:50%; background:var(--fire); flex:none;
	box-shadow:0 0 0 0 rgba(255,106,0,.6); animation:hostprofPulse 1.6s infinite}
@keyframes hostprofPulse{ 70%{box-shadow:0 0 0 9px rgba(255,106,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,106,0,0)} }
.hostprof-hero{display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:1.8rem}
.hostprof-photo{width:200px; max-width:38vw; height:auto; border-radius:14px; border:1px solid var(--line)}
.hostprof-idblock{flex:1 1 18rem; min-width:0}
.hostprof-namerow{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.hostprof-namerow h1{margin:.1rem 0; font-size:clamp(1.6rem,4vw,2.3rem); letter-spacing:-.01em}
.hostprof-logo{height:44px; width:auto; border-radius:8px}
.hostprof-bio{color:var(--muted); white-space:pre-line; margin:.6rem 0 0; max-width:46rem}
.hostprof-socials{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.8rem}
.hostprof-socials a{color:var(--gold); font-weight:700; font-size:.92rem}
.hostprof-cols{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:1.4rem}
.hostprof-shows h2, .hostprof-map h2{font-size:1.2rem; margin:0 0 .7rem}
.hostprof-showrow{display:flex; gap:1rem; align-items:center; padding:.6rem .1rem; border-bottom:1px solid var(--line)}
.hostprof-showrow:last-child{border-bottom:0}
.hostprof-showdate{flex:none; width:3.6rem; text-align:center; background:var(--card); border:1px solid var(--line);
	border-radius:10px; padding:.35rem .2rem; display:flex; flex-direction:column; line-height:1.25}
.hostprof-showdate b{color:var(--fire); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase}
.hostprof-showdate span{font-weight:700; font-size:.92rem}
.hostprof-showinfo{display:flex; flex-direction:column; min-width:0}
.hostprof-map iframe{width:100%; aspect-ratio:4/3; border:1px solid var(--line); border-radius:12px; background:var(--ink-2)}
.hostprof-addr{margin:.5rem 0 0; font-size:.85rem}
.hostprof-404{padding:4rem 0}
@media (max-width:780px){
	.hostprof-cols{grid-template-columns:1fr}
	.hostprof-photo{width:150px}
}
.pe-delform{margin-top:.5rem}

/* ============================================================================
   D10 — Venues page (.venues-, dashboard venue CRUD + map preview). Reuses the
   .shows- flash/head/grid/actbtns primitives. Scoped; no .pf-/.hr- touches.
   ============================================================================ */
.venues-list{display:flex; flex-direction:column}
.venues-row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.65rem .2rem; border-bottom:1px solid var(--line)}
.venues-row:last-child{border-bottom:0}
.venues-main{flex:1 1 16rem; display:flex; flex-direction:column; gap:.15rem; min-width:0}
.venues-notes{font-size:.85rem}
.venues-count{font-size:.8rem}
.venues-acts{margin-left:auto}
.venues-confirm{display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:var(--gold); font-size:.9rem}
.venues-map{flex-basis:100%; width:100%; margin:.4rem 0 .2rem}
.venues-map iframe{width:100%; max-width:560px; aspect-ratio:16/10; border:1px solid var(--line); border-radius:12px; background:var(--ink-2)}
@media (max-width:640px){
	.venues-acts{margin-left:0; width:100%}
	.venues-acts .btn{min-height:44px}
}

/* D11v3 — stakeholder unsubscribe page bits (Auth layout) + series report settings */
.unsub-note{background:rgba(255,181,71,.12); border:1px solid rgba(255,181,71,.4); color:var(--gold);
	border-radius:10px; padding:.6rem .9rem; font-weight:600}
.unsub-stack{margin:.6rem 0 0}
.unsub-stack .btn{width:100%; text-align:center; border:1px solid var(--line)}
.shows-reportcfg{border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem}
.shows-reportcfg h3{margin:0 0 .2rem; font-size:1rem; color:var(--gold)}
.shows-reportcfg .dim{font-size:.85rem}
.shows-reportchecks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem .9rem; margin:.7rem 0}
.shows-reportchecks label{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:600; font-size:.9rem; min-height:36px}
.shows-reportchecks input{width:1.05rem; height:1.05rem; accent-color:var(--fire)}
.shows-reciprow{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.35rem 0; border-bottom:1px solid var(--line); font-size:.92rem}
.shows-reciprow:last-child{border-bottom:0}
.shows-recipbadge{display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.7rem; font-weight:800;
	letter-spacing:.06em; text-transform:uppercase; background:var(--ink-2); border:1px solid var(--line); color:var(--muted)}
.shows-recipbadge.warn{border-color:rgba(225,29,29,.5); color:#ff9c9c}
.shows-recipadd{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.shows-recipadd input{flex:1 1 16rem; background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
	color:var(--cream); padding:.5rem .7rem; min-height:44px}
@media (max-width:640px){ .shows-reportchecks{grid-template-columns:1fr} }

/* ============================================================================
   Working Rule 7 — the REUSABLE collapsible panel (.panel.fk-collapse).
   <details class="panel fk-collapse"><summary><h2>Title</h2></summary>
   <div class="fk-collapse-body">…</div></details>
   Top panel of a page renders `open`; the rest collapsed. Inside CBWire
   templates, add wire:click.prevent="togglePanel('x')" on the summary and
   render `open` from wire data so re-renders keep the user's state; outside
   wires, native <details> toggling is fine as-is.
   ============================================================================ */
/* consistent vertical rhythm regardless of nesting: the wire's wrapper div breaks
   the .panel + .panel adjacent-sibling rule, so every collapse panel carries its own
   top margin (same 1rem the .panel rule uses; equal values do not stack) */
details.fk-collapse{margin-top:1rem}
.panel.fk-collapse{padding:.25rem 1.5rem}
details.fk-collapse > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:32px}
details.fk-collapse > summary::-webkit-details-marker{display:none}
details.fk-collapse > summary h2{margin:0; font-size:1.15rem}
details.fk-collapse > summary::after{content:"\25BE"; color:var(--muted-2); font-size:3rem; line-height:1; transition:transform .15s ease, color .15s ease}
details.fk-collapse:not([open]) > summary::after{transform:rotate(-90deg)}
details.fk-collapse[open] > summary::after{color:var(--fire)}
/* margin-top gives a 1rem gap below the summary; the matching padding-bottom (+ the
   panel's own .25rem) gives the content the same 1rem breathing room above the panel edge,
   so the last element (e.g. a Save button) isn't flush against the bottom. */
details.fk-collapse > .fk-collapse-body{margin-top:1rem; padding-bottom:.75rem}
@media (prefers-reduced-motion:reduce){ details.fk-collapse > summary::after{transition:none} }

/* --- singer history (E2): searchable, host-filterable, paginated song list --- */
.hist-filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem}
.hist-search{flex:1 1 14rem; min-width:0; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream); padding:.55rem .7rem; font-size:1rem; min-height:44px}
.hist-host{flex:0 1 13rem; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream); padding:.55rem .7rem; font-size:1rem; min-height:44px}
.hist-search:focus, .hist-host:focus{outline:none; border-color:var(--fire)}
.hist-list{display:flex; flex-direction:column; gap:.5rem}
.hist-row{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem}
.hist-song{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.hist-song b{overflow-wrap:anywhere}
.hist-meta{display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; text-align:right; flex:0 0 auto}
.hist-host-label{font-weight:600}
.hist-key{white-space:nowrap}
.hist-pager{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:1rem; flex-wrap:wrap}

/* --- singer favorites (E4): add form, live-show banner, match badge, manual fix-up --- */
.fav-live{display:flex; align-items:center; gap:.5rem; background:rgba(255,106,0,.12); border:1px solid rgba(255,106,0,.4);
	border-radius:10px; padding:.6rem .9rem; margin-bottom:1rem}
.fav-add{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}
.fav-add input{flex:1 1 11rem; min-width:0; background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
	color:var(--cream); padding:.55rem .7rem; font-size:1rem; min-height:44px}
.fav-add input:focus{outline:none; border-color:var(--fire)}
.fav-note{display:block; color:var(--muted-2); font-size:.85rem}
.fav-avail{white-space:normal}
.fav-acts{display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; flex:0 0 auto}
.fav-noteedit, .fav-fixrow{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.35rem 0 .6rem}
.fav-noteedit input, .fav-fixrow input{flex:1 1 12rem; min-width:0; background:var(--ink-2); border:1px solid var(--line);
	border-radius:8px; color:var(--cream); padding:.55rem .7rem; min-height:44px}
.fav-noteedit input:focus, .fav-fixrow input:focus{outline:none; border-color:var(--fire)}
.fav-fix{background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; margin:.35rem 0 .6rem}
.fav-fixhits{display:flex; flex-direction:column; gap:.35rem}
.fav-fixhit{text-align:left; background:var(--ink); border:1px solid var(--line); border-radius:8px; color:var(--cream);
	padding:.55rem .7rem; min-height:44px; cursor:pointer}
.fav-fixhit:hover{border-color:var(--fire)}
@media (max-width:560px){
	.fav .hist-row{flex-direction:column}
	.fav-acts{justify-content:flex-start}
}
@media (max-width:560px){
	.hist-row{flex-direction:column; gap:.35rem}
	.hist-meta{align-items:flex-start; text-align:left}
}

/* D12 — tips panel bits (Profile) + public tip buttons (host profile page) */
.pe-tipadd{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.8rem}
.pe-tipadd select, .pe-tipadd input{background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream); padding:.5rem .7rem; min-height:44px}
.pe-tipadd input{flex:1 1 12rem}
.pe-tipshow{display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.85rem; font-weight:600; white-space:nowrap}
.pe-tipshow input{width:1rem; height:1rem; accent-color:var(--fire)}
.hostprof-tips{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.hostprof-tipbtn{display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:999px; font-weight:700; font-size:.92rem;
	border:1px solid rgba(255,181,71,.5); color:var(--gold); background:rgba(255,181,71,.08)}
.hostprof-tipbtn:hover{border-color:var(--gold); text-decoration:none; background:rgba(255,181,71,.16)}

/* ============================================================================
   D14 — dashboard home rollup (.dash-*): rig cards + paginated recent shows.
   Scoped; reuses .panel/.pill/.btn. Feature tiles became real links.
   ============================================================================ */
a.feature{color:inherit; display:block}
a.feature:hover{text-decoration:none; border-color:var(--fire)}
.dash-riggrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem}
.dash-rigcard{background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:1rem}
.dash-rigname{display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; min-width:0}
.dash-rigname b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dash-rigdot{width:.6rem; height:.6rem; border-radius:50%; background:var(--muted-2); flex:none}
.dash-rigdot.on{background:#2ecc71; box-shadow:0 0 6px rgba(46,204,113,.7)}
.dash-rigmeta{display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; margin:0; font-size:.9rem}
.dash-rigmeta dt{color:var(--muted-2)}
.dash-rigmeta dd{margin:0; color:var(--cream)}
.dash-showlist{display:flex; flex-direction:column}
.dash-showrow{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.55rem .2rem; border-bottom:1px solid var(--line)}
.dash-showrow:last-child{border-bottom:0}
.dash-showwhen{min-width:6.5rem; display:flex; flex-direction:column}
.dash-showwhat{flex:1 1 14rem; display:flex; flex-direction:column; min-width:0}
.dash-showtags{display:flex; align-items:center; gap:.5rem; margin-left:auto}
.dash-pager{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.8rem; flex-wrap:wrap}
.dash-pager .btn[disabled]{opacity:.4; cursor:default; pointer-events:none}

/* D13 — Blocked Names page bits (reuses .shows- rows/badges + .dash-pager) */
.blocked-add{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.9rem}
.blocked-add input{flex:1 1 14rem; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream); padding:.5rem .7rem; min-height:44px}
.blocked-add select{background:var(--ink-2); border:1px solid var(--line); border-radius:8px; color:var(--cream); padding:.5rem .7rem; min-height:44px}
.blocked-pass{color:#7ddf9a; font-weight:600}
.blocked-fail{color:#ff9c9c; font-weight:600}

/* === D.1.1 Font Awesome (self-hosted SVG) icon system — Working Rule 8 ===
   Themed FA icons via <use href="#fk-name"> against views/partials/_iconSprite.cfm,
   emitted by the icon() helper. Paths carry no fill attr so `fill` is CSS-driven:
   solid/glow use currentColor (--fire); gradient uses the sprite's #fkFire gradient. */
.fk-icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:none;line-height:1}
.fk-icon--solid{color:var(--fire)}
.fk-icon--gradient{fill:url(#fkFire)}
.fk-icon--glow{color:var(--fire); filter:drop-shadow(0 0 3px rgba(255,106,0,.6))}
.fk-icon--outline{color:var(--fire)}   /* pair with a regular-variant glyph from the registry */
.fk-icon--muted{color:var(--muted-2)}
.fk-icon--sm{font-size:.85em}
.fk-icon--md{font-size:1.15em}
.fk-icon--lg{font-size:1.5em}
/* On a SOLID (fire-gradient) button an accent-colored icon vanishes into the background —
   inherit the button's white instead (the plugin's `button.primary .fk-icon{color:#fff}`
   precedent). Ghost buttons keep the accent icon color.
   Any NEW fire-gradient surface has to be added here too: the landing page's cloud door
   (G2b) was built as its own class rather than a .btn and reproduced the exact bug this
   rule exists to prevent. */
.btn:not(.btn-ghost) .fk-icon--solid, .btn:not(.btn-ghost) .fk-icon--glow,
.home-door-cloud .fk-icon--solid, .home-door-cloud .fk-icon--glow{color:#fff}
.fk-icon--xl{font-size:2em}

/* --- F3 admin account forms (.adm-*): the admin pages' visible inputs/selects.
   .inline-form is display:inline only (built for hidden-input+button forms), so forms
   with real fields use this instead. NEW scoped block per the no-touch rule; the look
   mirrors .blocked-add. --- */
.adm-form{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 .9rem}
.adm-form input[type="text"], .adm-form input[type="email"], .adm-form input[type="search"]{
	flex:1 1 14rem; min-width:0; background:var(--ink-2); border:1px solid var(--line);
	border-radius:8px; color:var(--cream); padding:.5rem .7rem; min-height:44px;
	font-family:inherit; font-size:.95rem}
.adm-form select{background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
	color:var(--cream); padding:.5rem .7rem; min-height:44px; font-family:inherit; font-size:.95rem}
.adm-form input:focus, .adm-form select:focus{outline:none; border-color:var(--fire);
	box-shadow:0 0 0 3px rgba(255,106,0,.18)}
.adm-form input[type="checkbox"]{width:1.05rem; height:1.05rem; accent-color:var(--fire); flex:0 0 auto}
.adm-form .btn{white-space:nowrap}
.adm-check{display:inline-flex; align-items:center; gap:.35rem; color:var(--muted)}
/* Long unbreakable values (emails, display names) must never widen the accounts table
   past its container: cap + ellipsis, full value in the title tooltip / detail page.
   Block SPANS inside the cells, not td max-width — auto table layout ignores max-width
   on cells, but a block child's cap bounds the column's content width reliably.
   .adm-break is the two-column detail table's variant (wrap anywhere, nothing hidden). */
.adm-email{display:block; max-width:20rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.adm-name{display:block; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.adm-break{overflow-wrap:anywhere}
/* The accounts table is width-locked (table-layout:fixed) so it can NEVER outgrow its
   container, whatever lands in a cell; long values ellipsize via the .adm-email/.adm-name
   spans. Proportional column widths: Email/Name get the room, the rest stay compact. */
.adm-table{table-layout:fixed; width:100%}
.adm-table th:nth-child(1){width:24%}
.adm-table th:nth-child(2){width:14%}
.adm-table th:nth-child(3){width:9%}
.adm-table th:nth-child(4){width:9%}
.adm-table th:nth-child(5){width:10%}
.adm-table th:nth-child(6){width:11%}
.adm-table th:nth-child(7){width:11%}
.adm-table th:nth-child(8){width:12%}
.adm-table td{overflow:hidden; text-overflow:ellipsis}
.adm-table .adm-email, .adm-table .adm-name{max-width:100%}

/* ==================================================================================
   F7c — public blog (.blog-*): the /blog list + post pages. 2/3 content + 1/3
   sidebar per the blog spec, collapsing to one column at phone widths. Reuses the
   :root brand tokens + .panel/.empty-state/.prose; nothing here touches the
   portal (.pf-*) or host-remote (.hr-*) blocks.
   ================================================================================== */
.blog-layout{display:grid; grid-template-columns:2fr 1fr; gap:2rem; align-items:start}
.blog-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:1.5rem}
.blog-card .blog-card-body{padding:1.15rem 1.4rem 1.3rem}
.blog-card img.blog-hero{width:100%; max-height:280px; object-fit:cover; display:block}
.blog-card h2{margin:.25rem 0 .1rem; font-size:1.35rem; line-height:1.25}
.blog-card h2 a{color:var(--cream)}
.blog-meta{color:var(--muted-2); font-size:.88rem; display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:center}
.blog-meta a{color:var(--gold)}
.blog-pin{color:var(--gold); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.blog-excerpt{color:var(--muted); margin:.55rem 0 0; font-size:.96rem}
.blog-pager{display:flex; gap:.75rem; align-items:center; justify-content:center; margin:2rem 0 0; color:var(--muted)}
.blog-side .panel{margin-bottom:1.25rem; padding:1.1rem 1.25rem}
.blog-side h3{margin:0 0 .6rem; font-size:1rem}
.blog-side ul{list-style:none; margin:0; padding:0}
.blog-side li{margin:.45rem 0; font-size:.95rem}
.blog-cloud{display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:baseline}
.blog-cloud a.t1{font-size:.85rem}
.blog-cloud a.t2{font-size:1.05rem}
.blog-cloud a.t3{font-size:1.28rem}
.blog-post-hero{width:100%; max-height:420px; object-fit:cover; border-radius:var(--radius); display:block; margin-bottom:1.5rem}
.blog-tags{margin-top:2rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
@media (max-width:820px){
	.blog-layout{grid-template-columns:1fr}
}

/* ==================================================================================
   F7e — admin editor bits: the image-browser modal (.imb-*) + dark-theme overrides
   for the vendored EasyMDE editor (admin pages only; nothing public loads these).
   ================================================================================== */
.imb-backdrop{position:fixed; inset:0; background:rgba(10,7,5,.78); z-index:600; display:flex; align-items:center; justify-content:center; padding:1.25rem}
.imb-backdrop[hidden]{display:none} /* the class display:flex would override the UA [hidden] rule */
.imb-panel{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); width:min(920px,100%); max-height:90vh; display:flex; flex-direction:column; overflow:hidden}
.imb-head{display:flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--line)}
.imb-head h3{margin:0; margin-right:auto; font-size:1.05rem}
.imb-uploadbtn{cursor:pointer}
.imb-status{padding:.5rem 1.1rem; color:var(--muted)}
.imb-status.error{color:#ff8a8a}
.imb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.7rem; padding:1rem 1.1rem; overflow:auto}
.imb-empty{color:var(--muted); grid-column:1/-1; margin:.5rem 0}
.imb-item{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.45rem; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; color:var(--cream); text-align:left}
.imb-item img{width:100%; height:84px; object-fit:cover; border-radius:6px; background:var(--ink)}
.imb-item.selected{border-color:var(--fire); box-shadow:0 0 0 1px var(--fire)}
.imb-name{font-size:.72rem; word-break:break-all; color:var(--muted)}
.imb-size{font-size:.68rem; color:var(--muted-2)}
.imb-insert{display:flex; gap:1rem; align-items:flex-start; padding:1rem 1.1rem; border-top:1px solid var(--line)}
.imb-preview{max-width:160px; max-height:110px; object-fit:contain; border-radius:8px; background:var(--ink)}
.imb-fields{display:flex; flex-wrap:wrap; gap:.6rem .9rem; align-items:center; font-size:.9rem; color:var(--muted)}
.imb-fields input[type=text]{background:var(--ink); color:var(--cream); border:1px solid var(--line); border-radius:6px; padding:.35rem .5rem}
.imb-radio, .imb-dim{display:inline-flex; align-items:center; gap:.35rem}
@media (max-width:640px){ .imb-insert{flex-direction:column} }

/* EasyMDE on the ember theme (scoped under the wire:ignore wrapper) */
.fk-mde .EasyMDEContainer .CodeMirror{background:var(--ink); color:var(--cream); border:1px solid var(--line); border-radius:0 0 10px 10px; font-family:ui-monospace,monospace; font-size:.92rem}
.fk-mde .CodeMirror-cursor{border-left-color:var(--cream)}
.fk-mde .CodeMirror-selected{background:rgba(255,106,0,.25)}
.fk-mde .editor-toolbar{background:var(--card); border:1px solid var(--line); border-bottom:0; border-radius:10px 10px 0 0; opacity:1}
.fk-mde .editor-toolbar button{color:var(--cream)}
.fk-mde .editor-toolbar button .fk-icon{width:1em; height:1em; pointer-events:none}
.fk-mde .editor-toolbar button:hover, .fk-mde .editor-toolbar button.active{background:var(--ink-2); border-color:var(--line)}
.fk-mde .editor-toolbar i.separator{border-left:1px solid var(--line); border-right:0}
.fk-mde .editor-preview, .fk-mde .editor-preview-side{background:var(--ink-2); color:var(--cream)}

/* F7g — help hub category cards (clickable) + the category-page search box */
.help-cats a.card{display:block; color:inherit; text-decoration:none; transition:border-color .15s ease}
.help-cats a.card:hover{border-color:var(--fire); text-decoration:none}
.help-catcount{display:block; margin-top:.5rem; font-size:.8rem}
.help-catsearch input{width:100%; max-width:26rem; background:var(--ink-2); color:var(--cream); border:1px solid var(--line); border-radius:10px; padding:.6rem .9rem; font-size:1rem}
.help-catsearch input:focus{outline:none; border-color:var(--fire)}

/* G1c — the /plugin product page. Scoped .plg-* only (surface no-touch rule); everything
   else on the page reuses the existing Public-layout blocks (.hero, .card, .grid, .btn). */
.plg-hero .tag{margin-bottom:.75rem}
.plg-cta{margin-top:1.25rem}
.plg-meta{margin-top:.9rem}

.plg-compare{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; margin-top:1.75rem}
.plg-col{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem}
.plg-col-featured{border-color:var(--fire); box-shadow:0 0 0 1px rgba(255,106,0,.25), 0 12px 32px rgba(0,0,0,.35)}
.plg-colhead{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem}
.plg-colhead b{font-size:1.25rem}
.plg-list{list-style:none; margin:0 0 1.1rem; padding:0}
.plg-list li{display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--line)}
.plg-list li:last-child{border-bottom:0}
.plg-list .fk-icon{flex:0 0 auto; margin-top:.15rem}

.plg-changelog{display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem}
.plg-release{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.25rem}
.plg-relhead{display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.4rem}
.plg-relhead b{font-size:1.1rem; color:var(--gold)}
.plg-relnotes :first-child{margin-top:0}
.plg-relnotes :last-child{margin-bottom:0}

.plg-waitform{margin:1.25rem auto 0; max-width:32rem; text-align:left}
.plg-waitlabel{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.35rem}
.plg-waitrow{display:flex; gap:.6rem; flex-wrap:wrap}
.plg-waitrow input{flex:1 1 14rem; min-width:0; background:var(--ink-2); color:var(--cream); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; font-size:1rem}
.plg-waitrow input:focus{outline:none; border-color:var(--fire)}
.plg-waitrow .btn{flex:0 0 auto; min-height:44px}
.plg-flash{display:inline-flex; align-items:center; gap:.5rem; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.6rem 1rem; margin:0 auto}
.plg-flash-error{border-color:var(--ember); color:var(--cream)}
@media (max-width:520px){ .plg-waitrow .btn{width:100%} }

/* G1c screenshots — product shots on the /plugin page. Framed like a window sitting on the
   page rather than bleeding into it, because every shot already contains real macOS window
   chrome and needs a boundary to read as a screenshot and not as page furniture. */
.plg-shotwrap{padding:2.5rem 0 0}
.plg-shot{margin:0}
.plg-shot img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 44px rgba(0,0,0,.45)}
.plg-shot figcaption{margin-top:.6rem; color:var(--muted); font-size:.9rem; text-align:center}
.plg-shot-hero img{box-shadow:0 24px 60px rgba(0,0,0,.55)}
.plg-shot-wide{margin-top:2rem}

.plg-shotgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem; margin-top:2.5rem; text-align:left}

/* phone surfaces: narrow by nature, so cap them and centre rather than letting the grid
   stretch a 560px-wide capture across half the page */
.plg-phones{display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; margin-top:2.25rem}
.plg-shot-phone{flex:0 1 260px; max-width:260px}
.plg-shot-phone img{border-radius:22px}

/* G1c: the macOS early-access list. Sits directly under the hero when no macOS build is
   published, so it is deliberately quieter than the Windows section at the foot of the
   page: a card, not a full band, or it competes with the hero it belongs to. */
.plg-earlywrap{padding:1.5rem 0 0}
.plg-early{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.25rem; max-width:44rem; margin:0 auto}
.plg-early .section-sub{margin-bottom:1rem}

/* G2b — landing page. Two equal doors: same size and weight, different colour, so the
   choice reads as two ways in rather than a primary and an afterthought. */
.home-doors{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1.6rem}
.home-door{display:flex; flex-direction:column; gap:.25rem; align-items:center; text-decoration:none;
	min-width:15rem; padding:.95rem 1.6rem; border-radius:12px; border:1px solid var(--line);
	background:var(--card); color:var(--cream); transition:border-color .15s ease, transform .15s ease}
.home-door:hover{text-decoration:none; border-color:var(--fire); transform:translateY(-2px)}
.home-door-cloud{background:linear-gradient(135deg,var(--fire),var(--ember)); border-color:transparent}
.home-doorlabel{font-weight:700; font-size:1.05rem; display:inline-flex; align-items:center; gap:.5rem}
.home-doorsub{font-size:.82rem; color:var(--muted)}
.home-door-cloud .home-doorsub{color:rgba(255,255,255,.85)}
@media (max-width:520px){ .home-door{width:100%} }

/* the singer strip: present, deliberately quiet, not competing with the paid pitch */
.home-singers{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-2)}
.home-singers .inner{padding:1.6rem 0; display:flex; flex-direction:column; gap:.8rem; align-items:center}
.home-singerline{margin:0; color:var(--muted); max-width:46rem}
.home-singerline b{color:var(--cream)}

/* G3c — the admin icon picker. Results are inline SVGs (the page never loaded symbols for
   them), so sizing is on the button rather than a sprite class. */
.cp-iconpick{display:inline-flex; align-items:center; gap:.4rem}
.cp-iconpick code{font-size:.8rem; color:var(--muted)}
.cp-iconpanel{margin-top:.75rem}
.cp-iconhead{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.75rem}
.cp-iconsearch{flex:1; min-width:14rem; background:var(--ink-2); color:var(--cream); border:1px solid var(--line); border-radius:10px; padding:.5rem .8rem}
.cp-iconsearch:focus{outline:none; border-color:var(--fire)}
.cp-icongrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.5rem; max-height:22rem; overflow-y:auto}
.cp-iconbtn{display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.6rem .3rem;
	background:var(--ink-2); border:1px solid var(--line); border-radius:10px; color:var(--cream); cursor:pointer}
.cp-iconbtn:hover{border-color:var(--fire)}
.cp-iconbtn .fk-icon{width:1.6em; height:1.6em; font-size:1.1rem}
.cp-iconbtn span{font-size:.7rem; color:var(--muted); word-break:break-all; line-height:1.2}

/* G3d — article blocks on a help category page: icon left, title and blurb right, two up
   on a wide screen and one on a phone. Same card language as the hub, one level down. */
.help-artgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1rem}
.help-artblock{display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.25rem;
	background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
	color:var(--cream); text-decoration:none; transition:border-color .15s ease, transform .15s ease}
.help-artblock:hover{border-color:var(--fire); text-decoration:none; transform:translateY(-2px)}
.help-artico .fk-icon{width:1.9em; height:1.9em; font-size:1.35rem}
.help-arttext{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.help-arttext b{font-size:1.02rem; line-height:1.3}
.help-artdesc{color:var(--muted); font-size:.9rem; line-height:1.45}
@media (max-width:820px){ .help-artgrid{grid-template-columns:1fr} }

/* G3e — the help article page. The measure is the point: across the 1120px wrap, prose ran
   past 100 characters a line. `ch` measures a "0", which is wider than this font's average
   letter, so 58ch lands at about 72 real characters: the comfortable band for long-form. */
/* The measure lives on the TEXT, not on the article box. Capping the box meant an image
   could never be wider than the prose, because 100% of a 58ch box is 58ch. */
.help-article{max-width:none}
.help-article .prose > *{max-width:58ch}
.help-article .prose h2{margin-top:2rem}
.help-article .prose h3{margin-top:1.6rem}
.help-updated{margin-top:2rem; color:var(--muted-2); font-size:.85rem; display:flex; align-items:center; gap:.4rem}
.help-related{margin-top:3rem; border-top:1px solid var(--line); padding-top:1.75rem}
.help-related h2{font-size:1.15rem; margin:0}
.help-artfoot{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2.5rem}

/* G3f — screenshots inside article prose. An image paragraph is written as the image on one
   line and an italic caption on the next, so `img + em` styles the caption without asking
   the author for HTML. Images break out slightly wider than the text measure: UI frames stop
   being readable at 58ch. */
.help-article .prose img{display:block; width:auto; max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); margin:1.6rem auto .5rem}
.help-article .prose img + em{display:block; color:var(--muted-2); font-size:.85rem; font-style:normal; margin-bottom:1.6rem}
@media (min-width:1000px){
	/* Images break out past the 58ch text measure to the full width of their column. The
	   original rule broke out to 78ch, which was right when the article was the whole page
	   and overflowed into the sidebar once there was one. */
	.help-article .prose > p:has(img){max-width:none}
}

/* G-R4 — pricing. The monthly/annual swap is CSS only: the two radios are siblings of the
   two price blocks, so `:checked ~` can show one and hide the other. No script, works on a
   keyboard, and the page cannot get stuck showing a price nobody selected. */
.price-radio{position:absolute; opacity:0; pointer-events:none}
/* The bar stretches to the card, so the two labels split it evenly: content-width
   labels left a dead strip of track beside them, which read as a broken control. */
.price-toggle{display:flex; width:100%; gap:.25rem; padding:.25rem; margin:.25rem 0 1rem; background:var(--ink-2); border:1px solid var(--line); border-radius:999px}
.price-toggle label{flex:1 1 0; padding:.4rem 1.1rem; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--muted); cursor:pointer; min-height:44px; display:flex; align-items:center; justify-content:center}
.price-toggle label:hover{color:var(--cream)}
#planMonthly:checked ~ .price-toggle label[for="planMonthly"],
#planAnnual:checked ~ .price-toggle label[for="planAnnual"]{background:linear-gradient(135deg,var(--fire),var(--ember)); color:#fff}
.price-figure{display:none}
#planMonthly:checked ~ .price-monthly,
#planAnnual:checked ~ .price-annual,
.plan:not(.featured) .price-figure{display:block}
.price-note{color:var(--muted); font-size:.9rem; margin:.35rem 0 0; min-height:2.4em}

.price-plugband{display:flex; gap:1.25rem; align-items:flex-start; max-width:820px; margin-inline:auto}
.price-plugband .ico{flex:0 0 auto}
.price-plugband .ico .fk-icon{width:44px; height:44px}
.price-plugband h2{margin:0 0 .5rem; font-size:1.35rem}
.price-plugband p{color:var(--muted); margin:0 0 .75rem}

.faq-list{max-width:760px; margin:1.5rem auto 0; display:flex; flex-direction:column; gap:.5rem}
.faq-item{border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden}
.faq-item summary{cursor:pointer; padding:1rem 1.1rem; font-weight:600; list-style:none; min-height:44px; display:flex; align-items:center; gap:.6rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+"; color:var(--ember); font-weight:700; flex:0 0 1ch}
.faq-item[open] summary::before{content:"\2212"}
.faq-body{padding:0 1.1rem 1.1rem 2.7rem; color:var(--muted)}
.faq-body p{margin:0 0 .6rem}
@media (max-width:640px){
	.price-plugband{flex-direction:column; gap:.75rem}
	.faq-body{padding-left:1.1rem}
}

/* G-R3 — chrome. The skip link is off-screen until it is focused, which is the whole point:
   a keyboard visitor should not have to tab through the nav on every page. */
.skip-link{position:absolute; left:-9999px; top:0; z-index:100; padding:.75rem 1rem; background:var(--card); color:var(--cream); border:1px solid var(--line); border-radius:0 0 10px 0}
.skip-link:focus{left:0}
.site-header .nav a[aria-current="page"]{color:var(--cream)}
.site-header .nav a{display:inline-flex; align-items:center; min-height:44px}

/* G-R8 — auth funnel. The reassurance list answers the doubts that stop someone typing an
   email address, so it sits above the form rather than under it. */
.auth-reassure{list-style:none; margin:0 0 1.25rem; padding:0; display:flex; flex-direction:column; gap:.45rem}
.auth-reassure li{display:flex; align-items:flex-start; gap:.55rem; color:var(--muted); font-size:.92rem; line-height:1.45}
.auth-reassure .fk-icon{width:16px; height:16px; flex:0 0 16px; margin-top:.2rem; color:var(--fire)}
.auth-fine{margin:.9rem 0 0; font-size:.8rem; color:var(--muted-2); text-align:center}
.auth-fine a{color:var(--muted)}

/* The get-started ladder a new host lands on: paid, signed in, and nothing paired yet. */
.dash-start{display:flex; flex-direction:column; gap:.75rem; margin:0}
.dash-step{display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--ink-2)}
.dash-step .n{flex:0 0 28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:#fff; background:linear-gradient(135deg,var(--fire),var(--ember))}
.dash-step h3{margin:0 0 .2rem; font-size:1rem}
.dash-step p{margin:0 0 .5rem; color:var(--muted); font-size:.9rem}
.dash-step.done .n{background:none; border:1px solid var(--line); color:var(--muted)}

/* G6c — the host directory. Cards are links, so the whole tile is the tap target: this page
   is read on a phone by somebody standing outside a bar. */
.dir-search{display:flex; gap:.5rem; max-width:520px; margin:1.25rem auto 0}
.dir-search input{flex:1; min-height:48px; padding:.6rem .9rem; border-radius:999px; border:1px solid var(--line); background:var(--ink-2); color:var(--cream)}
/* the global .btn is 39px tall, under the phone tap-target floor: match the input */
.dir-search .btn{white-space:nowrap; min-height:48px}
.dir-cities{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 0 1.75rem}
.dir-citypill{display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.35rem .9rem; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--cream); font-size:.9rem}
.dir-citypill:hover{border-color:var(--fire)}
.dir-count{color:var(--muted-2); font-size:.8rem}
.dir-lede{text-align:center; color:var(--muted); margin:0 0 1.25rem; display:flex; align-items:center; justify-content:center; gap:.5rem}
.dir-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem}
.dir-card{display:flex; gap:.9rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--cream)}
.dir-card:hover{border-color:var(--fire)}
.dir-card.is-live{border-color:var(--fire)}
.dir-photo{width:64px; height:64px; flex:0 0 64px; border-radius:12px; object-fit:cover; background:var(--ink-2)}
.dir-photo-logo{object-fit:contain; padding:.35rem}
.dir-photo-blank{display:flex; align-items:center; justify-content:center; border:1px solid var(--line)}
.dir-photo-blank .fk-icon{width:26px; height:26px}
.dir-body{display:flex; flex-direction:column; gap:.2rem; min-width:0}
.dir-name{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.dir-livepill{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fire)}
.dir-livedot{width:7px; height:7px; border-radius:999px; background:var(--fire); box-shadow:0 0 0 0 rgba(255,106,0,.6); animation:dirpulse 1.8s infinite}
@keyframes dirpulse{70%{box-shadow:0 0 0 7px rgba(255,106,0,0)}100%{box-shadow:0 0 0 0 rgba(255,106,0,0)}}
.dir-where,.dir-next,.dir-bio{font-size:.86rem; color:var(--muted)}
.dir-where{display:flex; align-items:center; gap:.35rem}
.dir-where .fk-icon{width:13px; height:13px}
.dir-bio{color:var(--muted-2)}
.dir-empty{text-align:center; padding:2.5rem 1rem; border:1px dashed var(--line); border-radius:14px}
.dir-empty h2{margin:0 0 .5rem; font-size:1.2rem}
.dir-empty p{color:var(--muted); margin:0}
.dir-cta{margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--line); text-align:center}
.dir-cta h2{font-size:1.2rem; margin:0 0 .4rem}
.dir-cta p{color:var(--muted); margin:0 0 .9rem}
.dir-cta .btn{margin:0 .25rem}
.hostprof-more{margin-top:2rem; text-align:center}
@media (max-width:520px){
	.dir-search{flex-direction:column}
	.dir-grid{grid-template-columns:1fr}
}

/* G11c — the footer. Four columns plus a brand block and the signup; collapses to one
   column on a phone in the order a reader wants them. */
.site-footer .foot-top{display:grid; grid-template-columns:1.3fr 2.2fr 1.2fr; gap:2rem; padding:2.5rem 0 1.5rem}
.foot-brand img{max-width:120px; height:auto}
.foot-tag{color:var(--muted); font-size:.88rem; margin:.6rem 0 .8rem; max-width:26ch}
.foot-socials{display:flex; gap:.5rem; flex-wrap:wrap}
.foot-socials a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
	border:1px solid var(--line); border-radius:10px; color:var(--muted)}
.foot-socials a:hover{color:var(--cream); border-color:var(--fire)}
.foot-socials .fk-icon{width:16px; height:16px}
.foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
.foot-col{display:flex; flex-direction:column; gap:.4rem}
.foot-col h2{font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin:0 0 .2rem}
.foot-col a{color:var(--muted); font-size:.88rem}
.foot-col a:hover{color:var(--cream)}
.foot-signup h2{font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin:0 0 .35rem}
.foot-signup p{color:var(--muted); font-size:.85rem; margin:0 0 .6rem}
.foot-form{display:flex; gap:.4rem}
.foot-form input{flex:1; min-width:0; min-height:40px; padding:.45rem .7rem; border-radius:10px;
	border:1px solid var(--line); background:var(--ink-2); color:var(--cream); font-size:.88rem}
.foot-form .btn{min-height:40px; white-space:nowrap}
.foot-note{font-size:.82rem; margin:0 0 .5rem}
.foot-note.ok{color:#7fe08f}
.foot-note.err{color:#ff9c9c}
.site-footer .foot-bottom{display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap;
	padding:1.25rem 0; border-top:1px solid var(--line); color:var(--muted-2); font-size:.85rem}
.foot-contact{display:flex; flex-direction:column; gap:.2rem; text-align:right}
.foot-contact a{color:var(--muted)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media (max-width:900px){
	.site-footer .foot-top{grid-template-columns:1fr; gap:1.75rem}
	.foot-cols{grid-template-columns:repeat(2,1fr)}
	.site-footer .foot-bottom{flex-direction:column}
	.foot-contact{text-align:left}
}
@media (max-width:520px){
	.foot-cols{grid-template-columns:1fr}
	.foot-form{flex-direction:column}
	/* the footer form is on every page, so it meets the phone tap-target floor too */
	.foot-form input,.foot-form .btn{min-height:44px}
}

/* G11 — About, FAQ, and Contact. */
.about-body{max-width:62ch; margin:0 auto}
.about-body p{color:var(--muted); margin:0 0 1rem}
.about-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2.5rem 0}
.about-fact{padding:1.25rem; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.about-fact .ico .fk-icon{width:26px; height:26px}
.about-fact h2{font-size:1rem; margin:.6rem 0 .3rem}
.about-fact p{color:var(--muted); font-size:.9rem; margin:0}
.about-promise{max-width:62ch; margin:0 auto; padding-top:1rem; border-top:1px solid var(--line)}
.about-promise h2{font-size:1.2rem}
.about-promise p{color:var(--muted)}

.contact-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; align-items:start}
.contact-form{display:flex; flex-direction:column; gap:.9rem}
.contact-form label{display:flex; flex-direction:column; gap:.3rem; font-weight:600; font-size:.92rem}
.contact-form label .dim{font-weight:400; font-size:.85rem}
.contact-form input,.contact-form select,.contact-form textarea{
	min-height:46px; padding:.6rem .8rem; border-radius:10px; border:1px solid var(--line);
	background:var(--ink-2); color:var(--cream); font:inherit; font-weight:400}
.contact-form textarea{min-height:9rem; resize:vertical}
.contact-form .btn{align-self:flex-start; min-height:48px}
/* the honeypot: off-canvas rather than display:none, which some bots check for */
.contact-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-sent{display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem; margin-bottom:1.25rem;
	border:1px solid rgba(127,224,143,.4); background:rgba(127,224,143,.1); border-radius:12px}
.contact-sent h2{margin:0 0 .2rem; font-size:1.05rem}
.contact-sent p{margin:0; color:var(--muted)}
.contact-side{padding:1.25rem; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.contact-side h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin:0 0 .9rem}
.contact-way{display:flex; flex-direction:column; gap:.15rem; margin:0 0 1.1rem; font-size:.9rem}
.contact-way b{color:var(--cream); font-size:.85rem}
.contact-way .dim{font-size:.82rem}
@media (max-width:820px){
	.about-facts{grid-template-columns:1fr}
	.contact-grid{grid-template-columns:1fr}
}

/* G11e — the contact inbox (admin). */
.ci-filters{display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:.75rem; align-items:end}
.ci-filters label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; font-weight:600}
.ci-filters input{min-height:42px; padding:.45rem .7rem; border-radius:10px; border:1px solid var(--line);
	background:var(--ink-2); color:var(--cream); font:inherit}
.ci-filteracts{display:flex; gap:.4rem}
.ci-row{padding:.9rem 1.1rem}
.ci-head{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.ci-who{display:flex; flex-direction:column; min-width:0}
.ci-topic{font-size:.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:.05em}
.ci-meta{display:flex; flex-direction:column; gap:.15rem; font-size:.82rem; margin-left:auto; text-align:right}
.ci-ok{color:#7fe08f; display:inline-flex; align-items:center; gap:.3rem; justify-content:flex-end}
.ci-err{color:#ff9c9c; display:inline-flex; align-items:center; gap:.3rem; justify-content:flex-end}
.ci-ok .fk-icon,.ci-err .fk-icon{width:13px; height:13px}
.ci-acts{display:flex; gap:.4rem; flex-wrap:wrap}
.ci-body{margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line)}
.ci-message{white-space:pre-wrap; background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
	padding:.9rem 1rem; margin-bottom:.9rem}
.ci-facts{display:grid; grid-template-columns:8rem 1fr; gap:.3rem 1rem; font-size:.85rem; margin:0 0 .9rem}
.ci-facts dt{color:var(--muted-2)}
.ci-facts dd{margin:0; color:var(--muted); overflow-wrap:anywhere}
.ci-pager{display:flex; align-items:center; justify-content:space-between; gap:1rem}
@media (max-width:820px){
	.ci-filters{grid-template-columns:1fr 1fr}
	.ci-meta{margin-left:0; text-align:left}
	.ci-ok,.ci-err{justify-content:flex-start}
}

/* G-R10 — post footer: share, the product CTA, and what to read next. */
.blog-share{display:flex; align-items:center; gap:.6rem; margin-top:2rem}
.blog-share a{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
	border:1px solid var(--line); border-radius:10px; color:var(--muted)}
.blog-share a:hover{color:var(--cream); border-color:var(--fire)}
.blog-share .fk-icon{width:16px; height:16px}
.blog-cta{margin-top:2rem; padding:1.4rem 1.5rem; border:1px solid var(--line); border-radius:14px;
	background:linear-gradient(135deg,rgba(255,106,0,.10),rgba(225,29,29,.06))}
.blog-cta h2{margin:0 0 .35rem; font-size:1.15rem}
.blog-cta p{color:var(--muted); margin:0 0 .8rem}
.blog-cta .btn{margin:0 .3rem .3rem 0}
.blog-related{margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.25rem}
.blog-related h2{font-size:1.05rem; margin:0 0 .75rem}
.blog-relrow{display:flex; flex-direction:column; gap:.15rem; padding:.7rem .9rem; margin-bottom:.5rem;
	border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--cream)}
.blog-relrow:hover{border-color:var(--fire); text-decoration:none}
.blog-relrow .dim{font-size:.85rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* G-R10 — screenshots inside a post. Natural size capped by the column, not stretched to
   it: the phone frames are 560px and blowing them up to 780 makes them look like a mistake.
   Captions are the italic line under the image, same convention as help articles. */
.blog-main .prose img{display:block; width:auto; max-width:100%; height:auto; margin:1.6rem auto .5rem;
	border-radius:12px; border:1px solid var(--line)}
.blog-main .prose img + em{display:block; color:var(--muted-2); font-size:.85rem; font-style:normal;
	text-align:center; margin-bottom:1.6rem}

/* FIX 4 — the singer home tiles. Counts are the point: an empty tile that says "0 saved"
   reads as nothing yet, while a bare link reads as something that might be broken. */
/* Panels space themselves with `.panel + .panel`, an ADJACENT-sibling rule, so anything
   between two panels gets no margin and breaks the chain for the panel after it. The tiles
   carry their own margin on both sides, matching that 1rem rhythm. */
.my-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1rem 0}
.my-tile{display:flex; flex-direction:column; gap:.2rem; padding:1.1rem 1.2rem; border:1px solid var(--line);
	border-radius:14px; background:var(--card); color:var(--cream)}
.my-tile:hover{border-color:var(--fire); text-decoration:none}
.my-tile .ico .fk-icon{width:22px; height:22px}
.my-tile b{margin-top:.4rem}
.my-count{color:var(--gold); font-size:.85rem; font-weight:700}
.my-tile .dim{font-size:.85rem}

/* G-R11 follow-up — the help article gets the blog's two-column shape. The prose was capped
   at a readable measure (58ch) inside a 1120px wrap, which left 515px of empty space that
   read as a broken grid rather than as a deliberate column. The sidebar fills it with the
   thing a reader actually needs next: the rest of the category. */
.help-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:2.5rem; align-items:start}
.help-main{min-width:0}
.help-side{display:flex; flex-direction:column; gap:1rem; position:sticky; top:1.5rem}
.help-sidebox{padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.help-sidebox h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin:0 0 .7rem}
.help-sidebox p{margin:0 0 .8rem; font-size:.88rem}
.help-sidelist{display:flex; flex-direction:column}
.help-sidelist a{display:flex; align-items:center; min-height:44px; padding:.5rem .6rem; border-radius:8px; color:var(--muted); font-size:.9rem; line-height:1.35}
.help-sidelist a:hover{color:var(--cream); background:var(--ink-2); text-decoration:none}
/* the article you are on: marked rather than linked away from */
.help-sidelist a.here{color:var(--cream); font-weight:600; background:linear-gradient(135deg,rgba(255,106,0,.18),rgba(225,29,29,.14))}
.help-sidesearch{display:flex; gap:.4rem}
.help-sidesearch input{flex:1; min-width:0; min-height:40px; padding:.45rem .7rem; border-radius:10px;
	border:1px solid var(--line); background:var(--ink-2); color:var(--cream); font-size:.88rem}
.help-sidesearch .btn{min-height:40px}
/* the Contact button is a .btn-sm (37px); on a phone it is a real tap target */
@media (max-width:900px){ .help-sidebox .btn{min-height:44px} }
.help-sidesearch .fk-icon{width:14px; height:14px}
@media (max-width:900px){
	.help-layout{grid-template-columns:1fr; gap:1.75rem}
	/* stacked under the article, the sidebar becomes the "read next" block it replaced */
	.help-side{position:static}
}

/* ============================================================================
   Thumbnails + lightbox. Inserted by the admin image browser as
   <a class="fk-lb fk-lb-3" href="full"><img src="full" alt=""></a>.

   Sizing is by COLUMNS, not pixels (Mike's call): "3 across" fills a help column
   (740px) and a blog column (699px) exactly, where a fixed 220px would only ever
   be right in one of them. Thumbnails written on CONSECUTIVE markdown lines land
   in one paragraph, which becomes the flex row; a blank line between them makes
   separate paragraphs, and each thumb then sits alone at its fractional width.
   ============================================================================ */
/* The renderer tags thumbnail-only paragraphs `.fk-lbrow` and merges adjacent ones, so a
   run of thumbnails is one row whatever the spacing. A thumbnail inside a sentence keeps
   its paragraph and simply sits inline. */
.prose p.fk-lbrow{display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-start}
a.fk-lb{display:inline-block; flex:0 0 auto; vertical-align:top; padding:.4rem; border:1px solid var(--line); border-radius:10px;
	background:var(--ink-2); cursor:zoom-in; line-height:0}
a.fk-lb:hover{border-color:var(--fire)}
/* `.prose a.fk-lb img` on purpose: `.help-article .prose img` and `.blog-main .prose img`
   are two-class selectors, so a one-class `a.fk-lb img` LOSES to them and the article's
   image margins (1.6rem top, .5rem bottom, auto sides) leaked into every thumbnail. That is
   what made the padding look heavy on top, thin underneath, and absent at the sides. */
.prose a.fk-lb img{display:block; width:100%; height:auto; margin:0; border:0; border-radius:6px}
.fk-lb-2{width:calc(50% - .375rem)}
.fk-lb-3{width:calc(33.333% - .5rem)}
.fk-lb-4{width:calc(25% - .5625rem)}
@media (max-width:640px){
	/* three or four across is unreadable on a phone: everything drops to two */
	.fk-lb-3,.fk-lb-4{width:calc(50% - .375rem)}
	.fk-lb-2{width:100%}
}

.fk-lbox{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
	gap:1rem; padding:2.5rem 1rem; background:rgba(12,9,7,.94)}
/* Without this the overlay NEVER closes: `display:flex` above beats the user agent's
   [hidden]{display:none}, so close() cleared the picture and left the backdrop, arrows, and
   close button sitting there. The image browser's backdrop carries the same line for the
   same reason; I wrote this one without it and shipped the bug. */
.fk-lbox[hidden]{display:none}
body.fk-lbox-open{overflow:hidden}
.fk-lbox-fig{margin:0; max-width:min(1200px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:.6rem}
.fk-lbox-img{max-width:100%; max-height:80vh; object-fit:contain; border-radius:12px; border:1px solid var(--line)}
.fk-lbox-cap{color:var(--muted); font-size:.9rem; text-align:center}
.fk-lbox-close,.fk-lbox-prev,.fk-lbox-next{background:none; border:1px solid var(--line); color:var(--cream);
	border-radius:999px; cursor:pointer; font-family:inherit; line-height:1}
.fk-lbox-close{position:absolute; top:1rem; right:1rem; width:44px; height:44px; font-size:1.5rem}
.fk-lbox-prev,.fk-lbox-next{width:48px; height:48px; font-size:1.9rem; flex:0 0 48px}
.fk-lbox-close:hover,.fk-lbox-prev:hover,.fk-lbox-next:hover{border-color:var(--fire); background:var(--ink-2)}
.fk-lbox-count{position:absolute; bottom:1rem; left:0; right:0; text-align:center; color:var(--muted-2); font-size:.85rem}
@media (max-width:640px){
	.fk-lbox{padding:1rem .5rem}
	.fk-lbox-prev,.fk-lbox-next{position:absolute; bottom:3.5rem}
	.fk-lbox-prev{left:1rem}
	.fk-lbox-next{right:1rem}
}