/* =========================================================
   PARTY BOX — Balloon Arch Calculator
   Used by balloon-arch-calculator.html (on top of home.css)
   and embed/balloon-calculator.html (standalone). Tokens are
   re-declared with bc- names so the embed needs nothing else.
   ========================================================= */
:root{
  --bc-gold:#e7c073; --bc-gold-deep:#c79a45; --bc-gold-light:#fff0d2;
  --bc-ink:#2a1d12; --bc-ink-soft:#6a553c; --bc-cream:#fff8ef;
  --bc-paper:#fffdf8; --bc-line:#ead9bb; --bc-dark:#1a120c;
  --bc-serif:"Cormorant Garamond",Georgia,serif;
  --bc-sans:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- page hero ---------- */
.bc-hero{background:radial-gradient(120% 140% at 50% -20%,#3a2a1d 0%,#1a120c 55%,#120c08 100%);
  color:var(--bc-cream);padding:56px 0 120px;text-align:center}
.bc-hero h1{font-size:clamp(38px,6vw,64px);color:var(--bc-gold-light)}
.bc-hero h1 em{color:var(--bc-gold);font-style:italic}
.bc-hero p{max-width:640px;margin:14px auto 0;color:#e8d9bf;font-size:17px}
.bc-crumbs{font-size:13px;color:#b9a684;margin-bottom:18px}
.bc-crumbs a{color:#d9c6a2;text-decoration:none}
.bc-crumbs a:hover{color:var(--bc-gold)}
.bc-shell{max-width:1080px;margin:-90px auto 0;padding:0 16px;position:relative;z-index:2}

/* ---------- calculator card ---------- */
#bcalc{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;
  background:var(--bc-paper);border:1px solid var(--bc-line);border-radius:22px;padding:22px;
  box-shadow:0 30px 70px rgba(26,18,12,.22);font-family:var(--bc-sans);color:var(--bc-ink)}
#bcalc *{box-sizing:border-box}
.bc-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.bc-field{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.bc-field legend,.bc-field>span,.bc-pal>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--bc-gold-deep);padding:0;margin-bottom:7px}
.bc-field>span{margin-bottom:0}
.bc-row{display:flex;gap:12px;flex-wrap:wrap}
.bc-row>.bc-field{flex:1 1 160px}
.bc-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bc-seg button{font:700 14px var(--bc-sans);padding:10px 8px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--bc-line);background:#fff;color:var(--bc-ink);transition:all .15s}
.bc-seg button:hover{border-color:var(--bc-gold)}
.bc-seg button.on{background:linear-gradient(180deg,var(--bc-gold),var(--bc-gold-deep));border-color:var(--bc-gold-deep);color:#3a2a10}
#bcDensity{grid-template-columns:repeat(4,1fr)}
.bc-len{display:flex;flex-direction:column;gap:8px}
#bcalc input[type=number],#bcalc input[type=text],#bcalc select{font:700 16px var(--bc-sans);color:var(--bc-ink);
  border:1.5px solid var(--bc-line);border-radius:12px;padding:10px 12px;background:#fff;width:100%;min-width:0}
#bcalc input:focus-visible,#bcalc select:focus-visible,#bcalc button:focus-visible,#bcalc a:focus-visible{outline:2px solid var(--bc-gold-deep);outline-offset:2px}
#bcalc input[type=range]{width:100%;accent-color:var(--bc-gold-deep)}
.bc-pal{display:flex;flex-direction:column}
.bc-colors{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.bc-color{display:grid;grid-template-columns:44px minmax(0,1fr) 92px;gap:8px;align-items:center}
.bc-color input[type=color]{width:44px;height:42px;border:1.5px solid var(--bc-line);border-radius:12px;padding:3px;background:#fff;cursor:pointer}
.bc-ratio{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--bc-ink-soft);text-transform:uppercase}
.bc-ratio input{padding:10px 6px !important;text-align:center}
.bc-colbtns{display:flex;gap:8px;margin-top:4px}
.bc-mini{font:800 13px var(--bc-sans);padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--bc-line);background:#fff;color:var(--bc-ink)}
.bc-mini:hover:not(:disabled){border-color:var(--bc-gold-deep)}
.bc-mini:disabled{opacity:.4;cursor:default}

/* ---------- results ---------- */
.bc-out{min-width:0;display:flex;flex-direction:column;gap:16px;background:#fbf4e7;border-radius:18px;padding:18px}
.bc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:center}
.bc-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--bc-gold-deep)}
.bc-big{font-family:var(--bc-serif);font-weight:700;font-size:clamp(40px,6vw,58px);line-height:1;margin-top:6px;color:var(--bc-ink)}
.bc-sub{font-size:13.5px;color:var(--bc-ink-soft);margin-top:6px}
.bc-svg{width:100%;height:auto;display:block}
.bc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bc-table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border-radius:12px;overflow:hidden}
.bc-table caption{text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--bc-gold-deep);padding-bottom:8px}
.bc-table th,.bc-table td{padding:9px 10px;text-align:center;border-bottom:1px solid #f1e6d2;white-space:nowrap}
.bc-table thead th{font-size:12.5px;color:var(--bc-ink-soft);font-weight:800}
.bc-table tbody th,.bc-table tfoot th{text-align:left}
.bc-table tfoot td,.bc-table tfoot th{border-bottom:0;background:#fff8ec}
.bc-sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.bc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bc-stats>div{background:#fff;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:3px}
.bc-stats b{font-size:18px}
.bc-stats span{font-size:12.5px;color:var(--bc-ink-soft);line-height:1.35}
.bc-cta{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--bc-dark);color:#efe2cf;border-radius:16px;padding:16px 18px}
.bc-cta p{margin:4px 0 0;font-size:14.5px;max-width:460px}
.bc-cta b{color:var(--bc-gold-light)}
.bc-btn{display:inline-flex;align-items:center;font:800 15px var(--bc-sans);text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,var(--bc-gold),var(--bc-gold-deep));color:#3a2a10;border-radius:999px;padding:12px 20px;
  box-shadow:0 10px 26px rgba(199,154,69,.35)}
.bc-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bc-note{font-size:13px;font-weight:800;color:#2f7a4a}
.bc-fine{font-size:12.5px;color:var(--bc-ink-soft);margin:0}

/* ---------- guide + embed box (main page) ---------- */
.bc-guide{max-width:780px;margin:0 auto;padding:64px 16px 30px;font-size:17px}
.bc-guide h2{font-size:clamp(30px,4.4vw,40px);margin:46px 0 14px}
.bc-guide h3{font-family:var(--bc-sans);font-size:18px;font-weight:800;margin:24px 0 6px}
.bc-guide p,.bc-guide li{color:#3d2c1c}
.bc-guide table{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0 6px}
.bc-guide th,.bc-guide td{border-bottom:1px solid var(--bc-line);padding:8px 10px;text-align:left}
.bc-guide .bc-tablewrap{margin:8px 0}
.bc-faq details{border-bottom:1px solid var(--bc-line);padding:14px 0}
.bc-faq summary{cursor:pointer;font-weight:800;font-size:17px;list-style-position:outside}
.bc-faq details p{margin:10px 0 0}
.bc-embed{max-width:780px;margin:10px auto 70px;padding:0 16px}
.bc-embed-card{background:var(--bc-dark);color:#efe2cf;border-radius:20px;padding:24px}
.bc-embed-card h2{color:var(--bc-gold-light);font-size:30px;margin-bottom:6px}
.bc-embed-card p{margin:0 0 12px;color:#d9c6a2}
.bc-embed-card textarea{width:100%;min-height:118px;border-radius:12px;border:1px solid rgba(231,192,115,.35);
  background:#120c08;color:#fff0d2;font:13px/1.5 ui-monospace,Consolas,monospace;padding:12px;resize:vertical}
.bc-embed-card .bc-actions{margin-top:10px}
.bc-embed-card .bc-mini{background:transparent;color:var(--bc-gold-light);border-color:rgba(231,192,115,.45)}
.bc-embed-card .bc-note{color:#9fe0b3}

/* ---------- embed page ---------- */
.bc-embed-page{margin:0;background:var(--bc-cream);font-family:var(--bc-sans);color:var(--bc-ink)}
.bc-embed-page #bcalc{box-shadow:none;border-radius:16px;padding:14px;grid-template-columns:1fr}
.bc-embed-page .bc-embed-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px 8px;flex-wrap:wrap}
.bc-embed-page .bc-embed-top h1{font:700 22px var(--bc-serif);margin:0}
.bc-credit{font-size:13px;font-weight:800;color:var(--bc-gold-deep)}
.bc-credit:hover{color:var(--bc-ink)}
.bc-embed-page main{max-width:860px;margin:0 auto;padding:0 10px 12px}
@media(min-width:760px){.bc-embed-page #bcalc{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}

/* ---------- responsive ---------- */
@media(max-width:860px){
  #bcalc{grid-template-columns:1fr;padding:16px}
  .bc-shell{margin-top:-80px}
}
@media(max-width:560px){
  .bc-hero{padding:40px 0 100px}
  .bc-head{grid-template-columns:1fr}
  .bc-stats{grid-template-columns:1fr}
  .bc-out{padding:14px}
  .bc-cta .bc-btn{width:100%;justify-content:center}
  #bcDensity{grid-template-columns:1fr 1fr}
  .bc-color{grid-template-columns:44px minmax(0,1fr) 78px}
}

/* ---------- print: just the shopping list ---------- */
@media print{
  .nav,.drawer,.scrim,footer,.bc-hero p,.bc-guide,.bc-embed,.bc-form,.bc-actions,.bc-cta .bc-btn,.toast,.nav-search{display:none !important}
  body{background:#fff}
  .bc-hero{background:none;color:#000;padding:0 0 10px}
  .bc-hero h1{color:#000;font-size:28px}
  .bc-shell{margin:0}
  #bcalc{display:block;box-shadow:none;border:0;padding:0}
  .bc-out{background:#fff;padding:0}
  .bc-cta{background:#fff;color:#000;border:1px solid #ccc}
  .bc-table th,.bc-table td{border-bottom:1px solid #ccc}
}