/* Potionpost's creative workbench. Checkout retains the shared panel structure. */
:root { --bg:#201c22; --bg-alt:#29242c; --taupe:#b6a68e; --pop:#ddae68; --pop-deep:#f2ca8b; }
.brew-work { grid-template-columns:minmax(0,1fr) 480px; }
.brew-work .stage { align-self:start; position:sticky; top:0; padding:32px 32px 28px; background:radial-gradient(ellipse at 50% 60%,#493a302b,transparent 70%),var(--bg); }
.brew-work .stage .intro { margin-bottom:12px; }
.brew-work .stage .intro .kick { font:10px/1.6 var(--mono); letter-spacing:.15em; color:#c2ab8a; }
.brew-work .stage .intro h1 { font-size:42px; line-height:1.04; font-style:normal; max-width:480px; margin:14px auto; }
.brew-work .stage .intro h1 em { display:block; color:#e2ba87; }
.brew-work .stage .intro p { font-size:15px; color:#ccbaa1; }
.brew-art-wrap { width:100%; display:flex; justify-content:center; }
.brew-work .postcard { width:min(400px,100%); padding:0; border:0; border-radius:45% 45% 8px 8px; box-shadow:none; background:var(--brew-paper) !important; }
.brew-work .postcard:after,.brew-work .postcard .corner,.brew-work .postcard .msg-divide { display:none; }
.brew-work .postcard .art { height:320px; margin:0; display:flex; align-items:center; justify-content:center; }
.brew-work .postcard .art svg { height:100%; width:100%; }
.brew-work .postcard .msg { font-size:23px; line-height:1.15; text-align:center; margin:0; min-height:0; color:#ecdbbb; overflow-wrap:anywhere; }
.brew-work .postcard .msg.placeholder { display:none; }
.brew-work .postcard .sig { margin:5px 0 0; font-size:18px; text-align:center; color:#e3ba7c; }
.brew-work .spec { display:none; }
.brew-reaction { font:italic 15px/1.4 var(--serif); color:#c6b49b; text-align:center; margin:12px 0 6px; min-height:22px; }
.brew-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.brew-actions button { color:#edddbd; background:transparent; border:1px solid #c3a97745; border-radius:5px; font:13px/1.3 var(--serif); min-height:44px; padding:8px 12px; cursor:pointer; }
.brew-actions button:hover { background:#dec29b14; border-color:#c3a977a0; }
.brew-actions button:disabled { opacity:.4; cursor:default; }
.brew-work .cabinet { --ink:#382e2a; --ink-soft:#66513c; --taupe:#715c47; --surface:#f3e8ce; --surface-2:#ece0c3; --line:#7d633329; --line-2:#7d633366; --pop:#6a4934; --pop-deep:#704936; --pop-tint:#9d643316; --bg-alt:#eadcbb; --bg:#eadcbb; background:#eadcbb; color:var(--ink); padding:0 25px 125px; overflow:visible; border-left:1px solid #8a724957; }
.bench-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 -25px; border-bottom:1px solid #90774845; padding:0 12px; }
.bench-tools button { padding:18px 4px 15px; min-height:60px; background:none; border:0; border-bottom:3px solid transparent; font:13px/1.2 var(--serif); color:#725d48; cursor:pointer; }
.bench-tools button[aria-pressed=true] { color:#3f322a; border-bottom-color:#8a4f38; }
.cabinet-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:23px 0 17px; }
.cabinet .cabinet-heading h2 { font-size:27px; font-style:normal; color:#3b3028; }
.cabinet-heading p { margin:5px 0 0; font:italic 14px/1.4 var(--serif); color:#76624d; }
.ingredient-count { font:12px var(--mono); color:#755f47; white-space:nowrap; }
.shelf-tabs { display:flex; gap:5px; margin-bottom:20px; flex-wrap:wrap; }
.shelf-tabs button { font:12px var(--mono); color:#70583e; min-height:40px; padding:8px 10px; background:transparent; border:1px solid #93784c55; border-radius:3px; cursor:pointer; }
.shelf-tabs button[aria-pressed=true] { background:#6d4d35; border-color:#6d4d35; color:#fff0d4; }
.ingredient-jars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 10px; }
.ingredient-jar { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; border:0; padding:3px 0 12px; border-bottom:2px solid #a484534f; background:transparent; color:#423326; font-family:var(--serif); cursor:pointer; }
.jar-glass { width:76px; height:77px; position:relative; display:grid; place-items:center; border:1.5px solid #8b7d6259; border-radius:12px 12px 16px 13px; background:linear-gradient(100deg,#fff8e44d,#b3b99926 70%,#7c8a681c); box-shadow:inset 4px 0 #fff8e452,inset -3px 0 #8a765716; margin:12px 0 10px; transition:transform .18s; }
.jar-glass:before { content:''; position:absolute; top:-11px; width:65px; height:14px; background:repeating-linear-gradient(90deg,#8a6b4f 0 6px,#987556 6px 8px); border:1px solid #684e3a; border-radius:3px 4px 2px 2px; }
.jar-glass svg { width:54px; height:54px; filter:drop-shadow(1px 2px 0 #6b503117); }
.ingredient-jar:nth-child(3n+1) .jar-glass { transform:rotate(-3deg); }
.ingredient-jar:nth-child(3n+2) .jar-glass { border-radius:9px 9px 21px 18px; }
.ingredient-jar:nth-child(3n) .jar-glass { transform:rotate(3deg); }
.ingredient-jar:hover .jar-glass { transform:translateY(-4px) rotate(-4deg); }
.ingredient-jar:disabled { opacity:.45; cursor:default; }
.jar-count { position:absolute; right:-4px; bottom:-4px; border-radius:50%; width:22px; height:22px; display:grid; place-items:center; background:#704735; color:#fbeccf; font:11px var(--mono); }
.jar-label { font-size:16px; line-height:1.1; }
.jar-aside { font:italic 12px/1.3 var(--serif); color:#79644d; margin-top:4px; }
.brew-inventory { padding-top:20px; margin-top:17px; border-top:1px solid #93784c45; }
.inventory-label { font:13px var(--serif); display:flex; justify-content:space-between; gap:8px; }
.inventory-label span { color:#7a654e; font-style:italic; }
.empty-brew { color:#7a654e; font:italic 14px var(--serif); }
.cabinet .chip { border-color:#a68b6255; background:#fbf0d480; color:#614b36; border-radius:4px; min-height:40px; font-size:14px; }
.surprise-link { border:0; background:transparent; color:#795039; padding:12px 0; min-height:44px; margin-top:14px; font:italic 14px var(--serif); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.bench-label { display:flex; justify-content:space-between; font:14px var(--serif); color:#685039; margin:23px 0 10px; }
.bench-label span { font:11px var(--mono); }
.cabinet .vessels { grid-template-columns:repeat(5,minmax(0,1fr)); }
.cabinet .vessel { border-radius:5px; }
.cabinet .vessel .nm { font-size:13px; }
.cabinet .brews { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cabinet .brew { height:60px; border-radius:5px; }
.cabinet .brew .lbl { font-size:13px; background:#1b192366; bottom:0; padding:5px; }
.cabinet .atmos { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cabinet .atm { min-height:70px; border-radius:5px; }
.cabinet .atm .nm { font-size:14px; }
.paper-choices { display:flex; gap:6px; flex-wrap:wrap; }
.paper-choices button { display:flex; align-items:center; gap:7px; padding:8px; min-height:44px; border:1px solid #9c835550; border-radius:4px; background:transparent; color:#604c35; font:13px var(--serif); cursor:pointer; }
.paper-choices button[aria-pressed=true] { border-color:#705136; background:#fff0d3; }
.paper-choices button span { width:19px; height:23px; border:1px solid #73553750; }
.cabinet textarea,.cabinet .from { font-size:21px; background:#fbf2dc; color:#4b352a; border:1px solid #a68a6055; border-radius:4px; }
.cabinet textarea { min-height:150px; }
.cabinet textarea::placeholder,.cabinet .from::placeholder { color:#957d64; }
.writing-note { font:italic 14px/1.5 var(--serif); color:#79614b; }
.brew-work .actionbar { width:480px; right:max(0px,calc((100vw - 1240px)/2)); border-color:#92754c55; background:#e0cba4; }
.brew-work .actionbar .sum { color:#654c36; font-size:13px; max-width:150px; }
.brew-work .actionbar .btn { background:#52392d; color:#fff0d6; min-height:48px; border-radius:5px; letter-spacing:.06em; }
.potion-proof { width:min(600px,calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:20px; border:1px solid #b3996b; border-radius:10px; background:#27212d; color:#eedcbb; }
.potion-proof::backdrop { background:#110c16d9; }
.proof-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.proof-heading h2 { font:24px/1.1 var(--display); margin:0; }
.proof-heading button { font:13px var(--serif); min-height:44px; padding:8px 12px; border:1px solid #ac906759; border-radius:4px; background:#382e3b; color:#f2dfbf; cursor:pointer; }
.potion-proof img { display:block; width:auto; max-width:100%; max-height:65dvh; margin:20px auto; border:1px solid #9d865251; }
.potion-proof p { font:15px/1.5 var(--serif); text-align:center; color:#c7b698; }
@keyframes potion-stir { 0%{transform:rotate(-2deg) translateY(-3px)} 45%{transform:rotate(2deg) translateY(2px)} 100%{transform:none} }
.brew-work .brew-art-wrap { animation:potion-stir .48s ease-out; }
@media(max-width:920px) {
  .brew-work { grid-template-columns:1fr; }
  .brew-work .stage { padding:12px 20px 10px; z-index:6; border-bottom:1px solid #a2895e4d; }
  .brew-work .stage .intro { display:none; }
  .brew-work .postcard { max-width:360px; }
  .brew-work .postcard .art { height:clamp(150px,24dvh,230px); }
  .brew-work .postcard .msg { max-height:48px; overflow:hidden; font-size:20px; }
  .brew-work .postcard .sig { display:none; }
  .brew-reaction { font-size:13px; margin:5px 0 4px; }
  .brew-actions { gap:7px; }
  .brew-actions button { min-height:44px; padding:6px 12px; font-size:13px; }
  .brew-work .cabinet { border-left:0; padding:0 20px 115px; }
  .bench-tools { margin:0 -20px; }
  .bench-tools button { min-height:52px; padding:12px 3px; }
  .cabinet-heading { margin-top:18px; }
  .cabinet .cabinet-heading h2 { font-size:25px; }
  .ingredient-jars { gap:15px 8px; }
  .brew-work .actionbar { width:100%; right:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .work:not(.brew-work) .stage { position:relative; }
}
@media(max-width:360px) {
  .topbar { padding:13px 16px; }
  .brew-work .cabinet { padding-left:15px; padding-right:15px; }
  .bench-tools { margin:0 -15px; }
  .bench-tools button { font-size:12px; }
  .shelf-tabs { gap:4px; }
  .shelf-tabs button { font-size:10px; padding:8px; }
  .jar-label { font-size:14px; }
  .jar-aside { font-size:11px; }
  .cabinet .vessels { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { .brew-work .brew-art-wrap { animation:none; } .jar-glass { transition:none; } }