/* ============================================================
   11-plus.css
   Commandarium Plus (paywall, status card), the ad places and the
   legal links in the footer.
   ============================================================ */

/* ---------- the PLUS mark ---------- */
.pw-badge{
  align-self:flex-start; display:inline-flex; align-items:center;
  font-family:'Barlow Condensed','Inter',sans-serif; font-weight:700; font-size:13px; letter-spacing:.14em;
  color:var(--on-accent); background:linear-gradient(135deg,var(--accent-hi),var(--accent) 55%,var(--accent-deep));
  padding:3px 10px; border-radius:20px; line-height:1.3;
}

/* beside the name in the rail and the phone header, for subscribers only.
   Rail: small and closer to the name, so it keeps clear of the rail's edge.
   Phone: inside the one-line name and on its baseline, then lifted so the
   pill is centred on the capitals. Centring the boxes instead left it high
   on iPhones, where Cinzel's line box is measured differently. */
.brand-plus{display:none; flex:0 0 auto; align-self:center;
  font-size:9px; letter-spacing:.12em; padding:1px 6px; margin-left:-5px;}
body.is-plus .brand-plus{display:inline-flex;}
@media(max-width:960px){
  .mobile-head .brand-plus{font-size:11px; letter-spacing:.14em; padding:2px 8px; margin-left:4px;
    align-self:baseline; position:relative; top:-1px;}
}

/* ---------- the Plus banner and strips (free users) ----------
   body.plus-sell (plus.js paintPlusMark): the dashboard banner takes the
   hero's place on its artwork (04-dashboard.css), the strips sit on Decks
   and Collection. Until the stored status is read the hero only keeps its
   space, so a free user does not see it flash. */
.plus-promo, .plus-strip{display:none;}
body:not(.plus-ready) .hero{visibility:hidden;}
body.plus-sell .hero{display:none;}
body.plus-sell .plus-promo{display:flex;}
body.plus-sell .plus-strip{display:flex;}

.plus-promo{flex-direction:column; align-items:flex-start; gap:0; padding:28px 40px 28px; min-height:0;}
.plus-promo .pw-badge{margin-bottom:10px;}
.plus-promo h2{
  font-family:'Cinzel',Georgia,serif; font-size:clamp(22px,3vw,34px); font-weight:700;
  letter-spacing:.04em; line-height:1.1; color:var(--accent-hi); margin-bottom:8px;
  text-shadow:0 3px 22px rgba(var(--accent-rgb),.28);
}
.plus-promo .pp-lede{font-size:14px; color:var(--text-dim); margin-bottom:14px; max-width:520px;}
.plus-promo .pp-benefits{display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:5px 28px; margin-bottom:26px;}
.plus-promo .pp-benefits li{font-size:13.5px; line-height:1.3; align-items:center; gap:9px;}
.plus-promo .pp-benefits .pw-check{flex-basis:18px; width:18px; height:18px; font-size:10.5px; margin-top:0;}
.pp-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
/* the app's usual squared button, a little taller */
.pp-foot .btn{min-height:42px; padding:10px 22px; font-size:14.5px;}
.pp-price{font-size:13px; color:var(--text-dim); font-variant-numeric:tabular-nums;}
@media(max-width:960px){
  .plus-promo{padding:18px 18px 18px;}
  .plus-promo .pw-badge{margin-bottom:8px; font-size:11px; padding:2px 8px;}
  .plus-promo h2{font-size:21px; margin-bottom:12px;}
  .plus-promo .pp-lede{display:none;}
  .plus-promo .pp-benefits{grid-template-columns:minmax(0,1fr); gap:4px; margin-bottom:18px;}
  .plus-promo .pp-benefits li{font-size:13px;}
  .pp-foot{gap:12px;}
  .pp-foot .btn{min-height:40px; padding:9px 18px; font-size:14px;}
}

.plus-strip{
  width:100%; align-items:center; gap:12px; margin:-8px 0 18px; padding:8px 14px; min-height:40px;
  background:var(--accent-soft); border:1px solid var(--line-3); border-radius:var(--r2);
  color:var(--text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
  transition:border-color .16s, background .16s;
}
.plus-strip:hover{border-color:var(--accent);}
.plus-strip .pw-badge{align-self:center; flex:0 0 auto; font-size:10.5px; padding:1px 8px;}
.plus-strip .ps-text{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim);}
.plus-strip .ps-go{flex:0 0 auto; font-weight:600; color:var(--accent-hi); white-space:nowrap;}
@media(max-width:960px){
  .plus-strip{margin:-6px 0 14px; padding:7px 12px; gap:10px; font-size:13px;}
}

/* ---------- paywall ---------- */
.modal.paywall{gap:14px; overflow-y:auto; overscroll-behavior:contain; max-height:86vh; max-height:min(86vh,calc(100dvh - 24px));}
/* long languages (German) outgrow the screen: the buy button stays in view */
.modal.paywall .modal-foot.pw-foot{position:sticky; bottom:-24px; z-index:2; background:var(--surface);
  margin-bottom:-24px; padding:10px 0 24px; box-shadow:0 -10px 12px -8px var(--surface);}
@media(max-width:960px){
  .modal.paywall{max-height:calc(100dvh - 24px);}
  .modal.paywall .modal-foot.pw-foot{bottom:calc(-20px - env(safe-area-inset-bottom)); margin-bottom:calc(-20px - env(safe-area-inset-bottom));
    padding-bottom:calc(20px + env(safe-area-inset-bottom));}
}
.modal.paywall > h3{font-size:24px;}
.pw-reason{margin:0; font-size:14px; color:var(--text); background:var(--accent-soft);
  border:1px solid var(--line-3); border-radius:var(--r2); padding:10px 12px; line-height:1.5;}
.pw-benefits{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.pw-benefits li{display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.4;}
.pw-benefits li > span:last-child{display:flex; flex-direction:column; gap:1px; min-width:0;}
.pw-check{
  flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-hi); font-size:12px; font-weight:700; margin-top:1px;
}
.pw-sub{font-size:12.5px; color:var(--text-faint);}

.pw-plans{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pw-plan{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:var(--r2);
  padding:12px 14px; color:var(--text); min-height:84px;
}
.pw-plan:hover{border-color:var(--line-3);}
.pw-plan.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent);}
.pw-plan-title{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);}
.pw-plan-price{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;}
.pw-plan-note{font-size:12px; color:var(--accent-hi); font-weight:600; min-height:1.2em;}

.pw-legal{display:flex; flex-direction:column; gap:8px;}
.pw-consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--text-dim); cursor:pointer;
  padding:9px 11px; border-radius:var(--r1); border:1px solid transparent;}
.pw-consent input{margin-top:2px; width:17px; height:17px; flex:0 0 17px; accent-color:var(--accent);}
.pw-consent.pw-need{border-color:var(--warn); background:rgba(var(--warn-rgb),.08);}
.pw-fine{margin:0; font-size:12px; line-height:1.5; color:var(--text-faint);}
.pw-fine a{color:var(--text-dim); text-decoration:underline;}
.pw-status{font-size:13px; color:var(--warn); min-height:0;}
.pw-status:empty{display:none;}
/* the buy button first and full width, on every screen size */
.modal-foot.pw-foot{flex-direction:column; align-items:stretch; justify-content:flex-start;}
.pw-foot .pw-buy{min-height:48px; font-size:16px;}
.pw-foot .btn{width:100%; margin:0;}

@media(max-width:520px){
  .pw-plans{grid-template-columns:1fr;}
  .pw-plan{min-height:0;}
}

/* ---------- Settings: status card, own colour ---------- */
.plus-card{display:flex; align-items:center; gap:14px;}
.plus-card .pw-badge{align-self:center;}
.plus-card-text{display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13.5px; color:var(--text-dim);}
.plus-card-text strong{font-size:16px; color:var(--text);}
.plus-card:not(.on) .pw-badge{filter:grayscale(1); opacity:.6;}
.plus-sandbox{font-size:12px; color:var(--warn);}
.cfg-color{
  width:46px; height:34px; padding:2px; border-radius:var(--r1); border:1px solid var(--line-2);
  background:var(--surface-2); cursor:pointer;
}
.cfg-color:disabled{cursor:pointer; opacity:.45;}
.cfg-locked{cursor:pointer;}
.cfg-locked .cfg-hint::after{content:' \2192';}

/* ---------- ad places ----------
   Room is kept while an ad loads, so nothing below jumps. */
.ad-slot{margin:18px 0; min-height:100px; border-radius:var(--r2); overflow:hidden;}
.ad-slot[hidden]{display:none;}
#view-dashboard .ad-slot{margin:0 0 18px;}

/* ---------- legal links ---------- */
.legal-links{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; font-size:12px; color:var(--text-faint);}
.legal-links a{color:var(--text-faint);}
.legal-links a:hover{color:var(--text-dim);}
.rail-foot .legal-links{margin-top:8px; justify-content:center;}
.site-foot{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px;}
.site-foot p{margin:0; font-size:11.5px; line-height:1.5; color:var(--text-faint);}
@media(max-width:960px){
  .site-foot{margin-bottom:8px;}
}

/* ---------- contact form ---------- */
.contact-form{display:flex; flex-direction:column; gap:12px;}
.contact-field{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--text-dim);}
.contact-field input, .modal .contact-field textarea{
  font:inherit; font-size:14.5px; font-weight:400; color:var(--text); background:var(--bg-2);
  border:1px solid var(--line-2); border-radius:var(--r1); padding:10px 12px; width:100%;
}
.modal .contact-field textarea{min-height:130px; line-height:1.5; resize:vertical;}
.contact-field input:focus, .modal .contact-field textarea:focus{outline:none; border-color:var(--accent);}
.contact-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.contact-note{margin:0; font-size:12px; color:var(--text-faint);}
.contact-note a, .contact-status a{color:var(--text-dim); text-decoration:underline;}
.contact-status{font-size:13px; color:var(--warn);}
.contact-status:empty{display:none;}
@media(max-width:960px){
  .contact-field input, .modal .contact-field textarea{font-size:16px;}
}

/* ---------- Make it stronger (AI deck upgrades) ---------- */
.upgrade-panel{
  border:1px solid var(--line-3); background:linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
  border-radius:var(--r3); padding:20px 22px; margin-bottom:30px; display:flex; flex-direction:column; gap:12px;
}
.up-head{display:flex; align-items:center; gap:10px;}
.up-head h3{font-size:19px; text-transform:uppercase; letter-spacing:.06em;}
.up-head.clickable{cursor:pointer;}
.up-count{font-size:13px; color:var(--text-dim);}
.up-fold{margin-left:auto;}
.upgrade-panel.folded{padding-top:14px; padding-bottom:14px;}
.up-badge{font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--on-accent); background:var(--accent); padding:2px 8px; border-radius:20px;}
.upgrade-panel .sub{font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.up-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.up-bar .up-budget{flex:0 1 220px;}
.up-source{flex:0 0 auto;}
.up-source button{padding:8px 13px; white-space:nowrap;}
.up-source button:disabled{opacity:.45; cursor:not-allowed;}
.up-none{margin:0; font-size:13.5px; color:var(--text-dim);}
.up-from{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-label);}
.up-side .pr.owned{font-size:12px; font-weight:600; color:var(--text-label); text-transform:uppercase; letter-spacing:.08em;}
.up-status{font-size:13.5px; color:var(--accent-hi);}
.up-status:empty{display:none;}
.up-note{font-size:13px; color:var(--warn); background:rgba(var(--warn-rgb),.08); border-radius:var(--r1); padding:8px 11px;}
.up-summary{margin:0; font-size:14.5px; color:var(--text); line-height:1.55;}
.up-cat{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-label); margin-right:8px;}
.up-row{
  display:flex; gap:12px; align-items:flex-start; padding:10px; border-radius:var(--r2);
  background:var(--bg-2); border:1px solid var(--line); cursor:pointer;
}
.up-row:hover{border-color:var(--line-3);}
.up-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.up-row img{width:52px; flex:0 0 52px; border-radius:4px; display:block;}
.up-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.up-main .nm{font-weight:600; font-size:14.5px;}
.up-main .why{font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.up-main .cut{font-size:12.5px; color:var(--text-faint);}
.up-side{display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:0 0 auto;}
.up-side .pr{font-weight:600; font-variant-numeric:tabular-nums;}
.up-acts{display:flex; gap:6px; align-items:center;}
.up-foot{font-size:12px; color:var(--text-faint); line-height:1.5;}
.up-foot a{color:var(--text-dim); text-decoration:underline;}
@media(max-width:960px){
  .upgrade-panel{padding:16px 14px; margin-bottom:22px;}
  .up-bar .up-budget, .up-bar .btn, .up-bar .up-source{flex:1 1 100%;}
  .up-source button{flex:1;}
  .up-row{flex-wrap:wrap;}
  .up-row img{width:46px; flex-basis:46px;}
  .up-side{flex-direction:row; align-items:center; justify-content:space-between; flex:1 1 100%;}
}

/* ---------- Settings → Admin ---------- */
.adm-bar{display:flex; gap:8px; flex-wrap:wrap;}
.adm-input{flex:1 1 220px; min-width:0; font:inherit; font-size:14px; color:var(--text); background:var(--bg-2);
  border:1px solid var(--line-2); border-radius:var(--r1); padding:8px 11px;}
.adm-input:focus{outline:none; border-color:var(--accent);}
.adm-results{display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--text-dim);}
.adm-user{border:1px solid var(--line-2); border-radius:var(--r2); padding:12px 14px; background:var(--bg-2); display:flex; flex-direction:column; gap:10px;}
.adm-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.adm-top strong{color:var(--text); font-size:14.5px; word-break:break-all;}
.adm-plus{font-size:12px; font-weight:600; padding:2px 9px; border-radius:20px; border:1px solid var(--line-2); color:var(--text-dim);}
.adm-plus.on{color:var(--on-accent); background:var(--accent); border-color:var(--accent);}
.adm-facts{display:grid; grid-template-columns:max-content 1fr; gap:3px 14px; margin:0; font-size:12.5px;}
.adm-facts dt{color:var(--text-faint);}
.adm-facts dd{margin:0; color:var(--text-dim); word-break:break-all;}
@media(max-width:960px){ .adm-input{font-size:16px;} }

/* Settings → Admin → Cancellations */
.adm-plus.adm-open{color:var(--warn); border-color:var(--warn);}
.adm-plus.adm-ok{color:var(--ok); border-color:var(--ok);}
.adm-cancel.is-done{opacity:.8;}
.adm-cancel-acts{align-items:center;}
.adm-done-switch{display:inline-flex; align-items:center; gap:8px; margin-right:auto; font-size:13px; color:var(--text); cursor:pointer;}
.adm-done{display:block;}  /* not flex: Safari lays out <details> as a block */
.adm-done > summary{cursor:pointer; color:var(--text-faint); font-size:12.5px; padding:4px 0;}
.adm-done > .adm-user{margin-top:10px;}
/* a reason is prose: break between words, keep its line breaks */
.adm-cancel .adm-facts dd{word-break:normal; overflow-wrap:anywhere; white-space:pre-line;}