/* Subscription portal: onboarding modal, tier cards, brands, team. */

/* Classes like .navb set display:flex, which beats the hidden attribute. */
[hidden]{display:none !important}

/* ---- onboarding modal ---- */
.ob-scrim{position:fixed;inset:0;background:rgba(10,37,64,.55);z-index:100;display:flex;
  align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px}
.ob-scrim[hidden]{display:none}
body.modal-open{overflow:hidden}
.ob-card{background:#fff;border-radius:18px;width:100%;max-width:560px;padding:30px 28px 26px;
  box-shadow:0 24px 60px rgba(10,37,64,.3)}
.ob-card h2{font-size:1.35rem;color:var(--navy);margin:0 0 6px}
.ob-dots{display:flex;gap:6px;margin-bottom:18px}
.ob-dots span{height:5px;flex:1;border-radius:3px;background:var(--border)}
.ob-dots span.on{background:var(--indigo)}
.ob-dots span.done{background:#A5B4FC}
.ob-msg{color:#991B1B;font-size:.88rem;min-height:1.2em;margin:0 0 8px}
.ob-next{width:100%;justify-content:center;margin-top:6px}
.ob-found{font-size:.88rem;margin:8px 0 16px;color:var(--slate)}
.ob-found.good{color:#065F46}
.ob-found.bad{color:#9A3412}
.ob-card .tiers{grid-template-columns:1fr 1fr}

/* yes/no toggle */
.seg{display:flex;gap:8px;margin-bottom:16px}
.seg button{flex:1;padding:12px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;
  font-family:inherit;font-size:.9rem;font-weight:600;color:var(--slate);cursor:pointer}
.seg button.on{border-color:var(--indigo);background:#EFF6FF;color:var(--indigo)}

/* ---- tier cards ---- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 20px}
.tier{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column}
.tier.top{border-color:var(--indigo)}
.tier.current{border:2px solid var(--indigo);background:#F5F8FF}
.tier h3{font-size:1rem;color:var(--navy);margin:0 0 8px}
.tprice{font-size:1.7rem;font-weight:800;color:var(--navy);letter-spacing:-.5px}
.tprice span{font-size:.85rem;font-weight:600;color:var(--slate);letter-spacing:0}
.tgst{font-size:.75rem;color:var(--slate);margin-bottom:10px}
.tier ul{padding-left:18px;margin:0 0 14px;font-size:.84rem;line-height:1.7;color:var(--slate);flex:1}
.tier .btn{width:100%;justify-content:center}
.tcur{text-align:center;font-weight:700;color:var(--indigo);font-size:.88rem;padding:10px 0}

.paybox{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.linkb{background:none;border:0;padding:2px 4px;color:var(--indigo);font-weight:600;font-family:inherit;
  font-size:.85rem;cursor:pointer;text-decoration:underline}
.linkb.danger{color:#B91C1C}
.invite-banner{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:14px;padding:16px 18px;
  margin-bottom:20px;font-size:.92rem;line-height:1.55;color:var(--navy)}

/* ---- brands ---- */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:16px}
.brand{background:#fff;border:1px solid var(--border);border-top:4px solid var(--border);border-radius:13px;padding:14px 16px}
.blogo{height:54px;display:flex;align-items:center;margin-bottom:10px}
.blogo img{max-height:54px;max-width:100%;object-fit:contain}
.nologo{font-size:.8rem;color:var(--slate)}
.bname{font-weight:700;color:var(--navy);font-size:.95rem}
.bmeta{font-size:.8rem;color:var(--slate);margin-top:4px;line-height:1.5;word-break:break-word}
.bact{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.brandform .two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.brandform .colour{height:46px;padding:4px}
.logo-drop{display:flex;align-items:center;gap:14px;border:1px dashed var(--border);border-radius:12px;
  padding:12px 14px;margin-bottom:16px}
.logo-drop img{max-height:52px;max-width:160px;object-fit:contain}
.logo-drop span{font-size:.85rem;color:var(--slate);flex:1}
.logo-drop label{margin-left:auto;cursor:pointer}
#brand-edit{margin-top:18px}

@media (max-width:560px){
  .brandform .two{grid-template-columns:1fr}
  .ob-card{padding:24px 18px}
  .ob-card .tiers{grid-template-columns:1fr}
}

/* ---- sign-in extras ---- */
.sso{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.sso a{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border:1px solid var(--border);
  border-radius:10px;font-weight:600;color:var(--navy);text-decoration:none;font-size:.94rem;background:#fff}
.sso a:hover{background:var(--cloud)}
.or-line{display:flex;align-items:center;gap:12px;color:var(--slate);font-size:.8rem;margin:16px 0}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--border)}

/* No complete-library pitch anywhere inside the portal (Joseph 2026-09-28). */
body.portal-on.subs-beta .nav-links a[href="complete-library.html"]{display:none}

/* ---- create ---- */
.allow{background:#fff;border:1px solid var(--border);border-radius:13px;padding:14px 16px;margin-bottom:16px;
  font-size:.9rem;color:var(--navy);line-height:1.6}
.meter{height:7px;background:var(--cloud);border-radius:4px;overflow:hidden;margin:8px 0 2px}
.meter span{display:block;height:100%;background:var(--indigo);border-radius:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#EFF6FF;color:var(--indigo);font-weight:700;
  font-size:.82rem;border-radius:999px;padding:5px 6px 5px 12px}
.chip button{border:0;background:#fff;color:var(--indigo);border-radius:999px;width:22px;height:22px;cursor:pointer;
  font-size:1rem;line-height:1}
.fine3{font-size:.82rem;color:var(--slate);margin:8px 0 0}
.pill.done{background:#DCFCE7;color:#166534}
#cr-results .rows{max-height:340px;overflow-y:auto}
.chks{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.chk{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--navy);cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--indigo)}
textarea.co-input{resize:vertical;font-family:inherit}
@media (max-width:560px){ #create-body .two{grid-template-columns:1fr !important} }
/* build your own */
.mth{border-bottom:1px solid var(--border);padding:8px 0}
.mcounts{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0 2px 25px}
.numin{font-size:.84rem;color:var(--slate);display:flex;align-items:center;gap:6px}
.numin input{width:64px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;font-family:inherit}
.meter-box{background:#F8FAFC;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:14px 0}
.mhead{font-weight:700;color:var(--navy);font-size:.9rem;margin-bottom:8px}
.mrow{display:grid;grid-template-columns:170px 1fr 110px;align-items:center;gap:10px;font-size:.84rem;margin:5px 0}
.mbar{height:8px;background:#E2E8F0;border-radius:4px;overflow:hidden}
.mbar span{display:block;height:100%;border-radius:4px}
@media (max-width:560px){ .mrow{grid-template-columns:1fr 70px} .mrow .mbar{display:none} }
/* over-allowance upsell */
.upsell{margin-top:14px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:13px;padding:14px 16px;font-size:.92rem;color:var(--navy);line-height:1.55}
.up-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:2px solid var(--indigo);
  border-radius:12px;padding:14px 16px;margin-top:12px;flex-wrap:wrap}
.up-name{font-weight:800;font-size:1.05rem}
.up-price{font-size:1.5rem;font-weight:800;letter-spacing:-.5px}
.up-price span{font-size:.8rem;font-weight:600;color:var(--slate);letter-spacing:0}
.up-what{font-size:.84rem;color:var(--slate)}
.same-free{font-size:.78rem;color:var(--slate);line-height:1.5;margin:0 0 14px;padding-top:8px;border-top:1px dashed var(--border)}
.tier ul{flex:0 0 auto}
.tier .same-free{flex:1}
/* four-item menu for subscription accounts */
.navb.new-nav, .side-foot.new-nav{display:none}
body.subs-beta .navb.new-nav{display:flex}
body.subs-beta .side-foot.new-nav{display:block}
body.subs-beta .navb.old-nav{display:none !important}
.side-foot{border-top:1px solid var(--border);margin-top:10px;padding:12px 13px 4px}
.side-status{font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.4}
.side-status span{display:block;font-weight:500;color:var(--slate)}
.side-links{font-size:.8rem;color:var(--slate)}
.side-links a,.side-links button{color:var(--slate);background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.settings-tabs{max-width:380px;margin-bottom:6px}
body.subs-beta #panel-billing{margin-top:34px}
.mhint{font-size:.78rem;color:var(--slate);margin:2px 0 2px 25px;line-height:1.4}
.always{font-size:.72rem;font-weight:700;color:#166534;background:#DCFCE7;border-radius:999px;padding:1px 8px;margin-left:6px}
.chk input:disabled{accent-color:#16A34A}
.numin input[data-pct]{width:58px}
.pct-total{font-size:.8rem;font-weight:700;align-self:center}
.pct-total.ok{color:#16A34A}.pct-total.bad{color:#B45309}
.lvl{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.lvl button{border:0;background:#fff;padding:6px 14px;font:inherit;font-size:.82rem;font-weight:600;color:var(--slate);cursor:pointer}
.lvl button+button{border-left:1px solid var(--border)}
.lvl button.on{background:var(--indigo);color:#fff}

/* ================================================================
   Calm portal (Joseph 2026-09-28: "it's hurting my eyes … I see buttons
   and don't think they're buttons"). Subscription accounts only.
   Rules: soft background, fewer lines, bigger text, ONE solid blue
   button per screen, and anything clickable has a border + hover.
   ================================================================ */
body.subs-beta.portal-on{background:#F4F6FA}
body.subs-beta .p-main{font-size:1rem}
body.subs-beta .p-side .card{border:0;box-shadow:none;background:transparent;padding:0}
body.subs-beta .navb{font-size:1rem;padding:12px 14px;color:#334155;border-radius:12px}
body.subs-beta .navb:hover{background:#E9EDF5;color:var(--navy)}
body.subs-beta .navb.on{background:#fff;color:var(--indigo);box-shadow:0 1px 3px rgba(15,23,42,.08),inset 3px 0 0 var(--indigo)}
body.subs-beta .whoami{background:transparent;border:0;padding:0 2px;margin-bottom:14px;font-size:.88rem}
body.subs-beta .rows,body.subs-beta .paybox,body.subs-beta .tier,body.subs-beta .brand,body.subs-beta .tile{border-color:#E3E8EF;box-shadow:0 1px 2px rgba(15,23,42,.04)}

/* Buttons that look like buttons. */
body.subs-beta .btn{cursor:pointer}
body.subs-beta .btn-ghost{background:#fff;color:var(--navy);border:1.5px solid #C5CEDB;box-shadow:0 1px 2px rgba(15,23,42,.06)}
body.subs-beta .btn-ghost:hover{border-color:var(--indigo);color:var(--indigo);background:#F5F8FF}
body.subs-beta .btn:disabled{opacity:.6;cursor:default;transform:none}
.btn-sm{padding:8px 16px !important;font-size:.86rem !important}
body.subs-beta .linkb{display:inline-flex;align-items:center;background:#fff;border:1.5px solid #C5CEDB;border-radius:9px;
  padding:6px 12px;margin:2px 4px 2px 0;text-decoration:none;color:var(--navy);font-size:.85rem;box-shadow:0 1px 2px rgba(15,23,42,.06)}
body.subs-beta .linkb:hover{border-color:var(--indigo);color:var(--indigo)}
body.subs-beta .linkb.danger{color:#B91C1C}
body.subs-beta .linkb.danger:hover{border-color:#B91C1C}
body.subs-beta .row a:not(.btn){display:inline-flex;background:#fff;border:1.5px solid #C5CEDB;border-radius:9px;padding:6px 12px;text-decoration:none}
body.subs-beta .row a:not(.btn):hover{border-color:var(--indigo)}
body.subs-beta .side-links a,body.subs-beta .side-links button{text-decoration:underline}

/* ---- home ---- */
.home-h{font-size:1.6rem;color:var(--navy);margin:0 0 16px;letter-spacing:-.3px}
body.subs-beta .allow{border:0;box-shadow:0 1px 2px rgba(15,23,42,.05);border-radius:14px;padding:14px 18px}
.al-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.al-top span{color:var(--slate);font-size:.88rem}
body.subs-beta .allow .btn{margin-top:10px}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 30px}
.act{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;background:#fff;border:1.5px solid #D5DCE6;
  border-radius:16px;padding:20px 18px 18px;cursor:pointer;font-family:inherit;box-shadow:0 1px 3px rgba(15,23,42,.06);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.act:hover{border-color:var(--indigo);box-shadow:0 8px 20px -8px rgba(37,99,235,.35);transform:translateY(-2px)}
.act:focus-visible{outline:3px solid #A5B4FC;outline-offset:2px}
.act-ic{font-size:1.7rem;line-height:1;width:48px;height:48px;border-radius:12px;background:#EFF6FF;color:var(--indigo);display:flex;align-items:center;justify-content:center}
.act-t{font-size:1.08rem;font-weight:700;color:var(--navy)}
.act-d{font-size:.9rem;color:var(--slate);line-height:1.5;flex:1}
.act-go{margin-top:6px;font-weight:700;color:#fff;background:var(--indigo);border-radius:9px;padding:8px 16px;font-size:.9rem}
.tag{font-size:.7rem;font-weight:700;background:#FEF3C7;color:#92400E;border-radius:999px;padding:2px 8px;vertical-align:2px}
@media (max-width:860px){.acts{grid-template-columns:1fr}.act{flex-direction:column}}

/* recent builds */
.builds .row{align-items:center;padding:14px 18px}
.builds .name{display:flex;flex-direction:column;gap:2px}
.b-kind{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.b-meta{font-size:.84rem;color:var(--slate);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}

/* ---- step-by-step flow ---- */
.wz{max-width:720px}
.wz-exit{margin-bottom:14px}
.wz-steps{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:.86rem;color:#94A3B8;margin-bottom:8px}
.wz-steps .on{color:var(--indigo);font-weight:700}
.wz-steps .done{color:var(--navy)}
.wz-bar{height:6px;background:#E2E8F0;border-radius:3px;margin-bottom:20px;overflow:hidden}
.wz-bar span{display:block;height:100%;background:var(--indigo);border-radius:3px;transition:width .25s}
.wz-card{background:#fff;border-radius:16px;padding:24px 24px 20px;box-shadow:0 1px 3px rgba(15,23,42,.07)}
.wz-q{font-size:1.3rem;color:var(--navy);margin:0 0 6px}
.wz-sub{font-size:1rem;color:var(--navy);margin:22px 0 10px}
.wz-card .sub{margin-bottom:16px}
.wz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.wz-nav .btn{min-width:140px;justify-content:center}
.wz .two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.wz .two{grid-template-columns:1fr}.wz-card{padding:18px 16px}.wz-nav .btn{min-width:0;flex:1}}

.bigsearch{display:flex;align-items:center;gap:10px;border:1.5px solid #C5CEDB;border-radius:12px;padding:4px 14px;background:#fff;margin-bottom:12px}
.bigsearch:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px #DBEAFE}
.bigsearch input{flex:1;border:0;outline:0;font:inherit;font-size:1.02rem;padding:11px 0;background:transparent;min-width:0}
.results{max-height:340px;overflow-y:auto}
.results .row{align-items:center}
body.subs-beta .chip{font-size:.9rem;padding:7px 8px 7px 14px}
body.subs-beta .chip button{width:26px;height:26px;border:1.5px solid #BFDBFE}
body.subs-beta .chip button:hover{background:#FEE2E2;border-color:#FCA5A5;color:#B91C1C}

/* option cards: the whole card is the control */
.opts{display:flex;flex-direction:column;gap:10px}
.opts.three{display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.opts.three{grid-template-columns:1fr}}
.opt{display:flex;align-items:flex-start;gap:12px;border:1.5px solid #D5DCE6;border-radius:12px;padding:14px 16px;cursor:pointer;
  background:#fff;transition:border-color .12s,background .12s;position:relative}
.opt:hover{border-color:#A5B4FC}
.opt.on{border:2px solid var(--indigo);background:#F5F8FF;padding:13px 15px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt input:focus-visible + .opt-box{outline:3px solid #A5B4FC;outline-offset:2px}
.opt-box{width:22px;height:22px;border:2px solid #94A3B8;border-radius:6px;flex-shrink:0;margin-top:1px;background:#fff;
  display:flex;align-items:center;justify-content:center}
.opt input[type=radio] + .opt-box{border-radius:50%}
.opt.on .opt-box{border-color:var(--indigo);background:var(--indigo)}
.opt.on .opt-box::after{content:"✓";color:#fff;font-size:.8rem;font-weight:800}
.opt.on input[type=radio] + .opt-box::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.opt-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.opt-t{font-weight:700;color:var(--navy);font-size:.98rem}
.opt.on .opt-t{color:var(--indigo)}
.opt-d{font-size:.88rem;color:var(--slate);line-height:1.45}
.opt-wrap.row-x{display:flex;align-items:center;gap:10px}
.opt-wrap.row-x .opt{flex:1}
.opt-extra{margin:-4px 0 4px 0;padding:12px 16px 14px 50px;background:#F8FAFC;border:1.5px solid #E2E8F0;border-top:0;
  border-radius:0 0 12px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.opt-extra.solo{margin:0;padding:14px 16px;border-top:1.5px solid #E2E8F0;border-radius:12px}
.lvl-l{font-size:.84rem;font-weight:700;color:var(--navy)}
body.subs-beta .lvl{border:1.5px solid #C5CEDB;border-radius:10px;flex-wrap:wrap}
body.subs-beta .lvl button{padding:8px 14px;font-size:.86rem;color:var(--navy)}
body.subs-beta .lvl button:hover:not(.on){background:#EFF6FF}
.mix-note{flex-basis:100%;font-size:.84rem;color:var(--slate)}
.mix-custom{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}

/* check-and-create summary */
.sum{border:1.5px solid #E2E8F0;border-radius:12px;overflow:hidden;margin-bottom:16px}
.sumrow{display:flex;gap:14px;padding:12px 16px;border-top:1px solid #EEF1F5;font-size:.94rem;align-items:baseline}
.sumrow:first-child{border-top:0}
.sk{width:120px;flex-shrink:0;color:var(--slate);font-weight:600;font-size:.88rem}
.sv{flex:1;color:var(--navy);line-height:1.5;min-width:0}
.sv .btn{margin-left:8px}
@media (max-width:560px){.sumrow{flex-direction:column;gap:2px}.sk{width:auto}}
.covbox{background:#F8FAFC;border:1.5px solid #E2E8F0;border-radius:12px;padding:14px 16px;margin-top:18px}
.cov{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--navy);margin:6px 0}
.cov-i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0}
.cov-i.ok{background:#16A34A}.cov-i.bad{background:#F59E0B}
body.subs-beta .msg{font-size:.95rem;border-radius:12px}
body.subs-beta .p-main section.panel{padding:0 0 36px}
body.subs-beta .p-main section.panel h1{font-size:1.6rem;margin-bottom:12px}
/* .row a (account.html) paints list links indigo — keep real buttons white-on-blue. */
body.subs-beta .row a.btn{text-decoration:none;font-size:.86rem}
body.subs-beta .row a.btn-primary,body.subs-beta .row a.btn-primary:hover{color:#fff}
.builds .side{flex-shrink:0}

/* ---- iPhone / small screens (Joseph 2026-10-06) ---- */
@media (max-width:860px){
  /* Back / Continue / Create stay in reach, just above the tab bar. */
  .wz-nav{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));z-index:20;margin:16px -16px 0;padding:10px 16px;
    background:rgba(245,248,252,.96);backdrop-filter:blur(8px);border-top:1px solid var(--border)}
  .results .row{cursor:pointer;-webkit-tap-highlight-color:rgba(37,99,235,.08)}
  .results .row [data-pick],.btn-sm{min-height:40px;padding-left:14px;padding-right:14px}
  .chip button{width:30px;height:30px}
  .results,#cr-results .rows{max-height:none;overflow:visible}
  .home-h{font-size:1.45rem}
  .tiers{gap:14px}
}