/* The creator dock: fixed to the bottom of the home page (ported from the template's React dock).
   Plain CSS on the page's own tokens; dock.js runs it. Logical properties only. */
:root{--dock-cta:#c2410c;--dock-cta-hover:#a3360a}
.fa-dock{--dock-muted:color-mix(in srgb,var(--muted) 78%,var(--ink))}
body{padding-block-end:var(--dock-space,104px)}
.fa-dock{position:fixed;inset-block-end:max(18px,env(safe-area-inset-bottom));inset-inline:20px;margin-inline:auto;inline-size:calc(100% - 40px);max-inline-size:740px;z-index:60;box-sizing:border-box;padding:8px;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 14px 60px #0002,0 2px 8px #0001;font-family:var(--font);font-size:14px;line-height:1.5;transition:max-inline-size .5s cubic-bezier(.22,1,.36,1),border-radius .4s,box-shadow .4s}
.fa-dock[data-expanded=true]{max-inline-size:860px;border-radius:26px;box-shadow:0 20px 70px #0003}
.fa-dock *,.fa-dock *::before,.fa-dock *::after{box-sizing:border-box}
.fa-dock-inner{max-block-size:min(60dvh,480px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.fa-dock :where(button){font:inherit;cursor:pointer}
.fa-dock svg{inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fa-dock button:focus-visible,.fa-dock summary:focus-visible,.fa-dock input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Collapsed and expanded parts */
.fa-dock-intro,.fa-dock-options{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.fa-dock-intro>div,.fa-dock-options>div{overflow:hidden;min-block-size:0}
.fa-dock[data-expanded=true] .fa-dock-intro,.fa-dock[data-expanded=true] .fa-dock-options{grid-template-rows:1fr;opacity:1}
.fa-dock-title{display:flex;align-items:center;gap:8px;margin:0;padding:10px 10px 5px;font-size:12px;font-weight:500;line-height:1.4}
.fa-live-dot{inline-size:7px;block-size:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 12%,transparent);flex:none}
.fa-dock-how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:18px 10px;padding:0}
.fa-dock-how li{display:grid;grid-template-columns:32px 1fr;align-items:center;column-gap:9px;row-gap:3px}
.fa-dock-how li>span{grid-row:span 2;display:grid;place-items:center;inline-size:32px;block-size:40px;border-radius:10px;background:var(--soft);color:var(--orange-text);animation:fa-dock-step 6s infinite}
.fa-dock-how li:nth-child(2)>span{animation-delay:2s}.fa-dock-how li:nth-child(3)>span{animation-delay:4s}
.fa-dock-how svg{inline-size:18px;block-size:18px}
.fa-dock-how strong{font-size:13px;font-weight:600;line-height:1.3}
.fa-dock-how small{font-size:12px;color:var(--dock-muted);line-height:1.4}
@keyframes fa-dock-step{0%,30%,100%{background:var(--soft);transform:none}12%,22%{background:color-mix(in srgb,var(--orange) 18%,var(--soft));transform:translateY(-3px)}}

/* The compose row: photos, idea, toggle, Make my free ad */
.fa-dock-compose{display:flex;align-items:center;gap:10px;min-block-size:54px;margin:0;padding:3px 4px;border-radius:17px}
.fa-dock-compose:has(textarea:focus-visible){outline:2px solid color-mix(in srgb,var(--orange) 75%,transparent)}
.fa-dock-compose textarea{flex:1;min-inline-size:0;min-block-size:40px;max-block-size:96px;margin:0;padding:9px 0;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font:400 14px/1.5 var(--font)}
.fa-dock-compose textarea::placeholder{color:var(--dock-muted);opacity:1}
.fa-dock-upload{display:grid;place-items:center;inline-size:44px;block-size:44px;flex:none;padding:0;border:0;border-radius:11px;background:var(--soft);color:var(--ink);position:relative}
.fa-dock-upload[data-count]::after{content:attr(data-count);position:absolute;inset-block-start:-4px;inset-inline-end:-4px;min-inline-size:18px;block-size:18px;padding-inline:4px;border-radius:9px;background:var(--dock-cta);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
.fa-dock-upload[aria-busy=true] svg{animation:fa-dock-spin 1s linear infinite}
.fa-dock-toggle{display:grid;place-items:center;inline-size:36px;block-size:44px;flex:none;padding:0;border:0;border-radius:10px;background:transparent;color:var(--dock-muted)}
.fa-dock-toggle svg{transition:transform .4s}
.fa-dock[data-expanded=true] .fa-dock-toggle svg{transform:rotate(180deg)}
.fa-dock-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;min-block-size:44px;block-size:44px;margin:0;padding:10px 18px;border:0;border-radius:15px;background:var(--dock-cta);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 3px 8px #ab371518;transition:background .2s,transform .2s}
.fa-dock-primary:hover{background:var(--dock-cta-hover);transform:translateY(-1px)}
.fa-dock-primary:active{transform:none}
.fa-dock-primary[aria-busy=true]{opacity:.7;cursor:wait}
@keyframes fa-dock-spin{to{transform:rotate(360deg)}}

/* Options: photos and the optional business details */
.fa-dock-photos{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 10px 0;padding:0}
.fa-dock-photos[hidden]{display:none}
.fa-dock-photos li{display:flex;align-items:center;gap:8px;max-inline-size:220px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.fa-dock-photos img{inline-size:40px;block-size:40px;border-radius:8px;object-fit:cover;flex:none}
.fa-dock-photos span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--dock-muted)}
.fa-dock-photos button{display:grid;place-items:center;inline-size:44px;block-size:44px;flex:none;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink)}
.fa-dock-photos button svg{inline-size:16px;block-size:16px}
.fa-dock-optional{margin:7px 10px 10px;font-size:13px;color:var(--dock-muted)}
.fa-dock-optional summary{display:flex;align-items:center;inline-size:fit-content;min-block-size:44px;padding:0 4px;list-style:none;cursor:pointer;color:var(--ink)}
.fa-dock-optional summary::-webkit-details-marker{display:none}
.fa-dock-optional summary::before{content:'+';inline-size:1em;margin-inline-end:6px}
.fa-dock-optional[open] summary::before{content:'\2212'}
.fa-dock-optional summary span{margin-inline-start:6px;color:var(--dock-muted)}
.fa-dock-optional>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-block-start:6px}
.fa-dock-optional label{display:grid;gap:4px;color:var(--ink);font-size:12px;font-weight:500}
.fa-dock-optional input{inline-size:100%;min-block-size:44px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font:400 14px/1.4 var(--font)}
.fa-dock-error{margin:4px 10px 6px;font-size:13px;color:var(--orange-text);line-height:1.4}
.fa-dock-error:empty{display:none}

@media (max-width:767px){
  body{padding-block-end:var(--dock-space,84px)}
  .fa-dock{inset-block-end:max(12px,env(safe-area-inset-bottom));inset-inline:10px;inline-size:calc(100% - 20px);padding:6px;border-radius:21px}
  .fa-dock[data-expanded=true]{border-radius:23px}
  .fa-dock-inner{max-block-size:56dvh}
  .fa-dock-compose{gap:6px;min-block-size:50px;padding:2px}
  .fa-dock-compose textarea{font-size:16px;min-block-size:40px;line-height:1.35;padding:9px 0}
  .fa-dock-primary{inline-size:44px;min-inline-size:44px;padding:0;gap:0;font-size:0;border-radius:13px}
  .fa-dock-toggle{inline-size:36px}
  .fa-dock-title{font-size:12px;padding:9px 8px 5px}
  .fa-dock-how{gap:10px;margin:12px 8px}
  .fa-dock-how li{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
  .fa-dock-how li>span{inline-size:30px;block-size:32px}
  .fa-dock-how strong{font-size:12px}
  .fa-dock-optional{margin:6px 8px 8px}
  .fa-dock-optional>div{grid-template-columns:1fr}
  .fa-dock-optional input{font-size:16px}
  .fa-dock-photos{margin-inline:8px}
}
@media (prefers-reduced-motion:reduce){
  .fa-dock,.fa-dock-intro,.fa-dock-options,.fa-dock-toggle svg,.fa-dock-primary{transition:none}
  .fa-dock-how li>span,.fa-dock-upload[aria-busy=true] svg{animation:none}
}
html[data-motion-active=false] .fa-dock-how li>span{animation-play-state:paused}
@media print{.fa-dock{display:none}body{padding-block-end:0}}