/* ==========================================================================
   Plandorabox Tools - brand layer for every tool page (not the homepage).
   Source of truth: _brand/brand.css. Copied into each vertical's assets/
   folder by _brand/sync.py. Edit here, then run `python _brand/sync.py`.
   Loaded AFTER each vertical's site.css so it wins the cascade.
   Palette + type follow the Visual & Typography Developer Guide.
   ========================================================================== */

:root{
  /* Brand tokens (guide section 7) */
  --black:#1D1D14; --white:#EEEEEE; --yellow:#EBE9A0;
  --grey-50:#F7F7F5; --grey-100:#EBEBE8; --grey-200:#D4D4D0; --grey-300:#B8B8B2;
  --grey-400:#7A7A73; --grey-500:#6B6B64; --grey-600:#4A4A44; --grey-700:#2D2D27;
  --black-900:#12120D;
  --font-brand:'Comfortaa',system-ui,sans-serif;

  /* Semantic tokens - light mode (guide section 5) */
  --pbx-bg:var(--white);
  --pbx-surface:var(--grey-50);
  --pbx-surface-2:var(--grey-100);
  --pbx-input:#FFFFFF;
  --pbx-border:var(--grey-200);
  --pbx-ink:var(--black);
  --pbx-ink-strong:var(--black-900);
  --pbx-on-ink:var(--white);
  --pbx-muted:var(--grey-500);
  --pbx-faint:var(--grey-400);
  --pbx-disabled:var(--grey-300);
  --pbx-deco:var(--grey-200);
  --pbx-yellow-hover:#E1DE8C;
  --pbx-error:#C74A4A;
  --pbx-error-bg:#FFF1F1;
  --pbx-error-border:#E57373;
  --pbx-shadow:0 1px 2px rgba(0,0,0,.04);

  /* Legacy tokens used by every vertical's site.css, re-pointed at the brand */
  --bg:var(--pbx-bg);
  --card:var(--pbx-surface);
  --green:var(--pbx-ink);
  --green-dark:var(--pbx-ink-strong);
  --navy:var(--pbx-ink);
  --olive:var(--pbx-surface-2);
  --olive-text:var(--pbx-ink);
  --text:var(--pbx-ink);
  --muted:var(--pbx-muted);
  --border:var(--pbx-border);
  --radius:16px;
  color-scheme:light;
}

/* Dark mode (guide section 6): explicit choice, or system preference */
:root[data-theme="dark"]{
  --pbx-bg:var(--black-900);
  --pbx-surface:var(--black);
  --pbx-surface-2:var(--grey-700);
  --pbx-input:var(--black-900);
  --pbx-border:var(--grey-600);
  --pbx-ink:var(--white);
  --pbx-ink-strong:#F7F7F5;
  --pbx-on-ink:var(--black);
  --pbx-muted:var(--grey-300);
  --pbx-faint:var(--grey-400);
  --pbx-disabled:var(--grey-600);
  --pbx-deco:var(--grey-700);
  --pbx-error:#F09A9A;
  --pbx-error-bg:#2A1717;
  --pbx-error-border:#8A3B3B;
  --pbx-shadow:none;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pbx-bg:var(--black-900);
    --pbx-surface:var(--black);
    --pbx-surface-2:var(--grey-700);
    --pbx-input:var(--black-900);
    --pbx-border:var(--grey-600);
    --pbx-ink:var(--white);
    --pbx-ink-strong:#F7F7F5;
    --pbx-on-ink:var(--black);
    --pbx-muted:var(--grey-300);
    --pbx-faint:var(--grey-400);
    --pbx-disabled:var(--grey-600);
    --pbx-deco:var(--grey-700);
    --pbx-error:#F09A9A;
    --pbx-error-bg:#2A1717;
    --pbx-error-border:#8A3B3B;
    --pbx-shadow:none;
    color-scheme:dark;
  }
}

/* ---------- Base type (guide section 3) ---------- */
body{
  font-family:var(--font-brand);
  background:var(--pbx-bg);
  color:var(--pbx-ink);
  font-size:16px;
  line-height:1.5;
}
button,input,select,textarea{font-family:inherit;}
b,strong{font-weight:700;}
::placeholder{color:var(--pbx-faint);opacity:1;}
:focus-visible{outline:2px solid var(--pbx-ink);outline-offset:2px;}

/* ---------- Header ---------- */
.pbx-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 32px;background:var(--pbx-bg);border-bottom:1px solid var(--pbx-border);
  position:relative;z-index:50;
}
.pbx-logo{display:flex;align-items:center;gap:10px;color:var(--pbx-ink);text-decoration:none;flex:0 0 auto;}
.pbx-logo-mark{width:36px;height:36px;display:block;flex:0 0 auto;}
.pbx-logo-word{font-weight:700;font-size:17px;line-height:.95;letter-spacing:-.01em;}
.pbx-nav{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;}
.pbx-nav-link{padding:8px 12px;border-radius:12px;color:var(--pbx-ink);text-decoration:none;white-space:nowrap;}
.pbx-nav-link:hover{background:var(--pbx-surface-2);}
.pbx-ext{font-size:.85em;margin-left:2px;}
.pbx-icon-btn{
  width:40px;height:40px;border-radius:12px;border:none;background:transparent;color:var(--pbx-ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.pbx-icon-btn:hover{background:var(--pbx-surface-2);}
.pbx-icon-btn svg{width:20px;height:20px;}
.pbx-theme-dark{display:none;}
:root[data-theme="dark"] .pbx-theme-dark{display:block;}
:root[data-theme="dark"] .pbx-theme-light{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pbx-theme-dark{display:block;}
  :root:not([data-theme="light"]) .pbx-theme-light{display:none;}
}
.pbx-signin{margin-left:8px;padding:10px 22px !important;}

/* Search popover */
.pbx-search{
  position:absolute;right:32px;top:calc(100% + 8px);width:min(420px,calc(100vw - 32px));
  background:var(--pbx-surface);border:1px solid var(--pbx-border);border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);padding:12px;display:none;
}
.pbx-search.open{display:block;}
.pbx-search input{
  width:100%;border:1px solid var(--pbx-border);background:var(--pbx-input);color:var(--pbx-ink);
  border-radius:12px;padding:12px 14px;font-size:15px;
}
.pbx-search ul{list-style:none;margin:8px 0 0;padding:0;max-height:320px;overflow:auto;}
.pbx-search li a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--pbx-ink);}
.pbx-search li a span{color:var(--pbx-faint);font-weight:400;font-size:12px;}
.pbx-search li a:hover,.pbx-search li a.active{background:var(--pbx-surface-2);}
.pbx-search .pbx-search-empty{padding:12px;font-size:13px;color:var(--pbx-muted);}

/* ---------- Buttons (guide section 4) ---------- */
.pbx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;line-height:1.2;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s;
}
.pbx-btn-primary,
.btn-primary,
.btn-secondary{
  background:var(--yellow) !important;color:var(--black) !important;border:1px solid var(--yellow) !important;
  font-weight:700;border-radius:12px;box-shadow:none;
}
.pbx-btn-primary:hover,
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled){background:var(--pbx-yellow-hover) !important;border-color:var(--pbx-yellow-hover) !important;}
.btn-primary{font-size:16px;padding:14px 18px;}
.btn-primary:disabled,.btn-secondary:disabled{
  background:var(--pbx-surface-2) !important;border-color:var(--pbx-border) !important;color:var(--pbx-faint) !important;cursor:not-allowed;
}
.pbx-btn-outline,
.btn-outline,
.btn-chip{
  background:transparent;color:var(--pbx-ink);border:1px solid var(--pbx-border);border-radius:12px;font-weight:600;
}
.pbx-btn-outline:hover,
.btn-outline:hover,
.btn-chip:hover{background:var(--pbx-surface-2);}

/* ---------- Page layout: rails + centre column ---------- */
.layout{
  grid-template-columns:260px minmax(0,780px) 260px;
  gap:28px;max-width:1440px;padding:28px 24px 80px;
}
main.center{min-width:0;}

.pbx-rail{display:flex;flex-direction:column;gap:20px;}
.pbx-promo{
  position:relative;overflow:hidden;background:var(--pbx-surface);
  border:1px solid var(--pbx-border);border-radius:16px;padding:22px 20px 20px;
  display:flex;flex-direction:column;gap:14px;
}
.pbx-promo-tall{min-height:600px;justify-content:space-between;padding:28px 22px;}
.pbx-promo-title{
  position:relative;z-index:1;margin:0;font-weight:700;color:var(--pbx-ink);
  font-size:22px;line-height:1.2;letter-spacing:-.01em;
}
.pbx-promo-tall .pbx-promo-title{font-size:34px;line-height:1.12;margin-top:96px;}
.pbx-promo-title span{color:var(--pbx-faint);}
.pbx-promo-foot{position:relative;z-index:1;margin:0;font-size:12px;line-height:1.5;color:var(--pbx-muted);}
.pbx-promo-foot b{display:block;color:var(--pbx-ink);font-size:13px;}
.pbx-promo .pbx-btn{position:relative;z-index:1;width:100%;padding:10px 14px;font-size:13px;}
/* Decorative block pattern echoing the logo mark */
.pbx-deco{position:absolute;inset:0;pointer-events:none;}
.pbx-deco i{position:absolute;background:var(--pbx-deco);border-radius:6px;}
.pbx-promo-tall .pbx-deco i:nth-child(1){width:44px;height:44px;left:18px;top:18px;}
.pbx-promo-tall .pbx-deco i:nth-child(2){width:44px;height:44px;left:62px;top:52px;opacity:.6;}
.pbx-promo-tall .pbx-deco i:nth-child(3){width:34px;height:70px;left:0;top:330px;opacity:.75;}
.pbx-promo-tall .pbx-deco i:nth-child(4){width:34px;height:34px;left:34px;top:400px;opacity:.5;}
.pbx-promo-tall .pbx-deco i:nth-child(5){width:44px;height:44px;right:0;bottom:120px;opacity:.6;}
.pbx-promo-sm{padding-right:40px;}
.pbx-promo-sm .pbx-btn{width:calc(100% + 20px);}
.pbx-promo-sm .pbx-deco i:nth-child(1){width:22px;height:22px;right:14px;top:16px;}
.pbx-promo-sm .pbx-deco i:nth-child(2){width:22px;height:22px;right:0;top:38px;opacity:.6;}
.pbx-promo-sm .pbx-deco i:nth-child(3){width:14px;height:36px;right:0;top:96px;opacity:.5;}

/* Breadcrumb (moved out of the header into the page) */
.pbx-crumb{font-size:12px;color:var(--pbx-muted);margin:0 0 10px;}
.pbx-crumb a{color:var(--pbx-muted);}
.pbx-crumb a:hover{color:var(--pbx-ink);text-decoration:underline;}
.pbx-crumb b{color:var(--pbx-ink);font-weight:700;}

/* ---------- Headings ---------- */
.page-head{margin-bottom:24px;}
.page-head h1{
  font-size:clamp(32px,4vw,44px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--pbx-ink);margin:0 0 12px;
}
.page-head p{font-size:15px;line-height:1.6;color:var(--pbx-muted);}

/* ---------- Cards ---------- */
.card,.article-block,.step-card,.hub-card{
  background:var(--pbx-surface);border:1px solid var(--pbx-border);border-radius:16px;box-shadow:var(--pbx-shadow);
}
.card h2,.result-label,.customize-label,.related-label,.hub-card .hub-kicker{
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--pbx-ink);text-transform:uppercase;
}
.related-label,.hub-card .hub-kicker{color:var(--pbx-muted);}
.article-block h2{font-size:22px;line-height:1.3;font-weight:700;color:var(--pbx-ink);margin-bottom:12px;text-transform:none;letter-spacing:0;}
.article-block p{font-size:15px;line-height:1.7;}
.hub-card h3,.step-card h3{font-size:17px;font-weight:700;line-height:1.35;}
.hub-card:hover{border-color:var(--pbx-ink);}

/* "How it works" lists render as numbered step cards, like the QR page */
.article-block ol{
  list-style:none;counter-reset:pbx-step;padding:0;margin:0 0 16px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
}
.article-block ol li{
  counter-increment:pbx-step;margin:0;background:var(--pbx-bg);border:1px solid var(--pbx-border);
  border-radius:14px;padding:16px;font-size:14px;line-height:1.55;color:var(--pbx-ink);
}
.article-block ol li::before{content:counter(pbx-step);}
.article-block ol li::before,
.step-badge{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;margin-bottom:10px;
  background:var(--pbx-surface-2) !important;color:var(--pbx-ink) !important;border:1px solid var(--pbx-border);font-weight:700;font-size:13px;
}
.article-block .worked-example{background:var(--pbx-bg);border:1px solid var(--pbx-border);border-radius:12px;}
.article-block .worked-example b{color:var(--pbx-ink);}

/* ---------- Tabs / chips ---------- */
.tab-btn{
  background:var(--pbx-surface-2);color:var(--pbx-ink);border:1px solid transparent;
  font-weight:600;font-size:13px;padding:9px 18px;border-radius:999px;
}
.tab-btn:hover:not(.active){background:var(--pbx-border);}
.tab-btn.active{background:var(--pbx-ink);color:var(--pbx-on-ink);}

/* ---------- Inputs (default / focus / error / disabled) ---------- */
input[type="text"],input[type="url"],input[type="tel"],input[type="email"],input[type="number"],
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="search"],
select,textarea{
  background-color:var(--pbx-input);color:var(--pbx-ink);border-color:var(--pbx-border);border-radius:12px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--yellow) !important;box-shadow:0 0 0 3px rgba(235,233,160,.45);}
input:disabled,select:disabled,textarea:disabled{background:var(--pbx-surface-2);color:var(--pbx-faint);}
input[aria-invalid="true"]{border-color:var(--pbx-error-border) !important;background:var(--pbx-error-bg);}
.upload-zone{border-color:var(--pbx-border);background:var(--pbx-input);border-radius:14px;}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--pbx-ink);background:var(--pbx-surface-2);}

/* ---------- Results ---------- */
.result-panel{background:var(--pbx-bg);border-color:var(--pbx-border);border-radius:14px;}
.result-panel.empty{color:var(--pbx-faint);}
.result-value{color:var(--pbx-ink-strong);font-weight:700;}
.progress-fill{background:var(--pbx-ink);}

/* ---------- FAQ: one card per question ---------- */
.faq{background:none;border:none;border-radius:0;overflow:visible;display:grid;gap:10px;}
.faq-item{background:var(--pbx-surface);border:1px solid var(--pbx-border) !important;border-radius:14px;overflow:hidden;}
.faq-q{font-size:15px;font-weight:700;color:var(--pbx-ink);padding:18px 20px;}
.faq-q .plus{color:var(--pbx-ink);font-size:20px;}
.faq-a{color:var(--pbx-muted);padding:0 20px;}
.faq-item.open .faq-a{padding:0 20px 18px;}

/* ---------- Related tools (neutral, never yellow: guide section 2) ---------- */
.related-pill{background:var(--pbx-surface);border:1px solid var(--pbx-border);border-radius:12px;font-weight:600;color:var(--pbx-ink);}
.related-pill:hover{border-color:var(--pbx-ink);background:var(--pbx-surface);}
.related-pill .arrow{color:var(--pbx-ink);}
.related-pill.current{background:var(--pbx-surface-2);color:var(--pbx-muted);}
.pbx-related .related-label{margin:4px 0 10px;}
.pbx-related .related-pills{flex-direction:column;flex-wrap:nowrap;gap:8px;margin:0;}
.pbx-related .related-pill{padding:11px 14px;font-size:13px;gap:12px;}
.pbx-related .related-pill .arrow{margin-left:auto;}
.pbx-ico{
  flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--pbx-surface-2);
  display:inline-flex;align-items:center;justify-content:center;
}
.pbx-ico::before{
  content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;
}

/* ---------- Misc components ---------- */
[hidden]{display:none !important;}
.article-block{padding:24px 26px;margin-bottom:20px;}
.customize-row{flex-wrap:nowrap;gap:8px;}
.customize-row select{flex:1 1 auto;min-width:0;font-size:12px;padding:9px 6px;border-radius:10px;}
.customize-row .swatch,.customize-row .swatch-btn{flex:0 0 auto;}
#logoRow{flex-wrap:wrap;}
.qr-actions{flex-wrap:nowrap;}
.qr-actions .btn-secondary,.qr-actions .btn-outline{padding:10px 10px;min-width:0;font-size:13px;line-height:1.25;}
.qr-actions .btn-secondary{flex:1.2;}
.notice{background:var(--pbx-surface-2);border-color:var(--pbx-border);color:var(--pbx-ink);border-radius:12px;}
.result-panel.error{background:var(--pbx-error-bg);border-color:var(--pbx-error-border);color:var(--pbx-error);}
.qr-preview-frame{background:#FFFFFF;border-radius:14px;}
.swatch,.swatch-btn{border-radius:8px;border:1px solid var(--pbx-border);}
.swatch-btn{background:var(--grey-400) !important;}
.copy-feedback{color:var(--pbx-muted);}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .layout{grid-template-columns:minmax(0,780px) 260px;}
  .pbx-rail-left{display:none !important;}
}
@media (max-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr);}
  .pbx-rail{display:flex !important;}
  .pbx-rail-left{display:none !important;}
  .pbx-rail-right .pbx-promo{display:none;}
}
@media (max-width:720px){
  .pbx-header{padding:12px 16px;gap:8px;}
  .pbx-nav-link.pbx-hide-sm{display:none;}
  .pbx-signin{margin-left:2px;padding:9px 14px !important;}
  .pbx-search{right:16px;}
  .layout{padding:20px 16px 60px;}
  .customize-row,.qr-actions{flex-wrap:wrap;}
  .customize-row select{flex:1 1 140px;}
  .cards-row > .card{min-width:0;}
}
@media (max-width:420px){
  .pbx-logo-word{display:none;}
}