/* Free tool pages: how a tool sits inside the landing page design (landing.css).
   Loaded after landing.css and the tool's own rules. Built pages: scripts/build-tools.mjs. */

/* Hero: landing hero, tool card in place of the paste box */
.tool-hero { padding-bottom: 64px; }
.tool-hero .t-crumbs { margin: 0 auto 4px; font-size: 13px; color: var(--muted); }
.tool-hero .t-crumbs a { color: var(--muted); }
.tool-hero .t-crumbs a:hover { color: var(--ink); }
.tool-hero .hero-intro { overflow: visible; }
.tool-hero .tool { max-width: 860px; margin: 0 auto; text-align: left; }
.tool-paste { margin-top: 30px; }

/* No folder tabs above the card, so round every corner */
.tool-hero .paste-card.tool-card { border-radius: 22px; }
.tool-hero .pc-go { width: 100%; justify-content: center; }
.tool-hero .pc-go[disabled] { opacity: .7; cursor: progress; }

/* Before a result the panel is invisible, the paste card is the card. After, the result gets a real card. */
body:not(.app-active) .tool-hero .panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
.tool-hero .panel .error { margin-top: 12px; }
.tool-hero .note, .tool-hero .loading { background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px -18px rgba(10,10,10,.25); }
.tool-hero .loading { margin-top: 14px; padding: 26px 20px; }
.tool-hero .note { margin-top: 14px; }
body.app-active .tool-hero .panel { background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 48px -20px rgba(10,10,10,.22), 0 2px 6px rgba(10,10,10,.05); }

/* Once a result is on screen, keep the focus on it */
body.app-active .tool-hero .tool-trust,
body.app-active .tool-hero .awards,
body.app-active .tool-hero .m-proof { display: none; }
body.app-active .tool-hero { padding-top: 28px; }
/* The collapsed intro (max-height 0) still overflows, and its h1 sat on top of the result's
   tabs and blocked clicks on them. Clip it and let clicks through. */
body.app-active .tool-hero .hero-intro { overflow: hidden; pointer-events: none; }

/* Custom tools (their own form, e.g. the timestamp link generator) keep their panel as a card */
.tool-hero-custom .panel { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 22px !important; box-shadow: 0 18px 48px -20px rgba(10,10,10,.22) !important; padding: 22px !important; }

.tool-trust a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,23,23,.3); }
.tool-trust a:hover { text-decoration-color: currentColor; }

/* Upgrade tiers: three cells from the landing .toolgrid */
.tool-tiers .toolcell { text-decoration: none; }
.tool-tiers .tc-d { max-width: none; }

/* Upgrade dock: the landing paste dock, holding a message and one button */
.tdock { gap: 12px; padding: 8px 8px 8px 10px; }
.tdock-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.tdock-t b { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdock-t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdock .pdock-go { text-decoration: none; }

@media (max-width: 720px) {
  .tool-hero .h1-l { white-space: normal; }
  .tool-hero .h1-rot { margin-top: .1em; }
  .tdock-t small { display: none; }
}

/* The old tool CSS boxed the input; the landing paste card input is borderless */
.tool-hero .pc-field input { border: 0; box-shadow: none; padding: 0; height: auto; min-height: 0; background: transparent; border-radius: 0; }
.tool-hero .pc-field input:focus { box-shadow: none; outline: 0; }

/* Funnel buttons (cards, gates) use the landing's blue primary, not the old black */
.tool-page a.btn[data-funnel-cta] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(59,130,217,.6); }
.tool-page a.btn[data-funnel-cta]:hover { background: var(--accent-d, #2f6bbb); border-color: var(--accent-d, #2f6bbb); }
.tool-page .tf-card { border-color: var(--accent-bd); }

/* landing.css's .tab.active uses an undefined --navy, which left the active tab label white on white */
.tool-page .tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,10,10,.12); }

/* Result copy buttons follow the landing's blue primary too */
.tool-page .app-cta .btn.js-copy, .tool-page .app .btn:not(.ghost):not(.on-dark-ghost) { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool-page .app-cta .btn.js-copy:hover, .tool-page .app .btn:not(.ghost):not(.on-dark-ghost):hover { background: var(--accent-d, #2f6bbb); border-color: var(--accent-d, #2f6bbb); }

/* Two buttons under the input: free run (left), full product trial (right) */
.tool-hero .pc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tool-hero .pc-actions .pc-go { margin-top: 0; width: 100%; text-decoration: none; }
.tool-hero .pc-go-free { background: #fff; color: var(--ink); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(10,10,10,.06); }
.tool-hero .pc-go-free:hover { background: #f6f6f6; opacity: 1; }
@media (max-width: 420px) { .tool-hero .pc-actions .pc-go { font-size: 14.5px; padding: 0 8px; } }