/* Loopline public pages: shared extras on top of site.css + design-system.css
   (tokens, header, footer, buttons, chips, panels and the player live there).
   Used by /tools, /templates, /create, /clips, the account pages and guides. */

/* Tag chip used as a section eyebrow in the Revid-format layout. */
.ll-tag{width:max-content;max-width:100%}

/* Big search field (tools, templates) */
.ll-search{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 12px 0 20px;border:1px solid var(--line-2);border-radius:18px;background:var(--raised);box-shadow:var(--shadow-card);transition:border-color .15s,box-shadow .15s}
.ll-search:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 4px var(--accent-soft)}
.ll-search svg{width:18px;height:18px;color:var(--ink-2);flex:none}
.ll-search input{flex:1;min-width:0;height:56px;border:0;background:transparent;outline:0;font-size:17px;color:var(--ink)}
.ll-search input::placeholder{color:var(--ink-3)}
.ll-search input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
.ll-search kbd{font:500 12px var(--font-mono);padding:4px 8px;border:1px solid var(--line-2);border-radius:6px;color:var(--ink-2)}
@media (max-width:760px){.ll-search kbd{display:none}.ll-search{min-height:54px}.ll-search input{height:50px;font-size:16px}}

/* Horizontally scrolling chip rows */
.ll-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.ll-chips::-webkit-scrollbar{display:none}
.ll-chips .ll-chip{flex:none}
.ll-chip .n{font:500 12px var(--font-ui);color:var(--ink-3)}

/* Sample label under a video: says how it was made. */
.ll-label{display:flex;align-items:flex-start;gap:7px;margin-top:10px;font:500 11.5px/1.45 var(--font-mono);color:var(--ink-2)}
.ll-label::before{content:"";width:6px;height:6px;margin-top:5px;border-radius:50%;background:var(--accent);flex:none}

/* FAQ accordions */
.ll-faq details{border-bottom:1px solid var(--line)}
.ll-faq details:first-child{border-top:1px solid var(--line)}
.ll-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font:700 17px/1.35 var(--font-display);letter-spacing:-.02em}
.ll-faq summary::-webkit-details-marker{display:none}
.ll-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--raised);color:var(--ink-2);font:500 18px/1 var(--font-ui)}
.ll-faq details[open] summary::after{content:"–";background:var(--accent-soft);color:var(--accent)}
.ll-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ll-faq details p{padding:0 44px 22px 0;color:var(--ink-2);font-size:15px;line-height:1.65}

/* Closing CTA panel with a soft accent glow from below */
.ll-close{margin-block:clamp(48px,7vw,96px) 0;padding:clamp(44px,6vw,88px) clamp(20px,5vw,72px);text-align:center;overflow:hidden;background:radial-gradient(60% 90% at 50% 125%,rgba(255,91,46,.24),transparent 70%),var(--panel)}
.ll-close .ll-tag{margin-inline:auto}
.ll-close h2{font-size:clamp(32px,4.2vw,56px);max-width:820px;margin:18px auto 0}
.ll-close>p:not(.ll-fine):not(.ll-tag){max-width:520px;margin:14px auto 0;color:var(--ink-2)}
.ll-close .ll-btn{margin-top:28px}
.ll-close .ll-fine{margin-top:14px}

/* Page-level primary CTA on the dark pages: white pill + orange glow. */
.ll-btn-glow.ll-btn-primary .ll-disc{background:var(--bg);color:var(--accent)}

/* A sticky mobile CTA used on detail pages. */
.ll-sticky{display:none}
@media (max-width:760px){
  .ll-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:block;padding:8px;border:1px solid var(--line-2);border-radius:18px;background:color-mix(in srgb,var(--panel) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.9)}
  .ll-sticky .ll-btn{width:100%}
  body:has(.ll-sticky) .ll-footer{padding-bottom:110px}
}

/* Arrow disc: existing markup writes `<span aria-hidden="true">↗</span>` as the
   last child of a button; render it as the design-system disc. */
.ll-btn>span[aria-hidden]:last-child:not(.ll-disc){display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--accent);font-size:14px;line-height:1;transition:transform .18s var(--ease)}
.ll-btn:has(>span[aria-hidden]:last-child){padding-right:6px}
.ll-btn-sm>span[aria-hidden]:last-child:not(.ll-disc){width:30px;height:30px;font-size:12px}
.ll-btn-sm:has(>span[aria-hidden]:last-child){padding-right:4px}
.ll-btn-ghost>span[aria-hidden]:last-child:not(.ll-disc),.ll-btn-soft>span[aria-hidden]:last-child:not(.ll-disc){background:var(--raised);color:var(--ink)}
.ll-btn:hover>span[aria-hidden]:last-child:not(.ll-disc){transform:rotate(45deg)}
@media (max-width:360px){.ll-header .ll-btn>span[aria-hidden]{display:none}.ll-header .ll-btn{padding:0 13px}}
@media (max-width:760px){.ll-panel-ticks{background-image:none}.ll-panel-ticks::before,.ll-panel-ticks::after{display:none}}

/* Labels read as plain words. Monospace is kept for timecodes and
   `input → output` recipe lines only; no uppercase micro-labels. */
.ll-eyebrow{font:600 13px/1.3 var(--font-ui);letter-spacing:0;text-transform:none}
.ll-idx{font:600 12.5px/1.3 var(--font-ui);letter-spacing:0;text-transform:none}
.ll-status{font:600 12px/1.3 var(--font-ui);letter-spacing:0;text-transform:none}
.ll-bar button{font:600 12px/1 var(--font-ui);letter-spacing:0;text-transform:none}
.ll-label{font:500 12.5px/1.45 var(--font-ui)}