/* Zeal Publishers — the free tools (templates/landing/tools/, Job 2 Part B).
 * C = the tool UI (fast, focused, phone-first): compact light hero, the tool card on a
 *     deep-green stage (B's band), real-button controls.
 * A = results and reports: when a result is showing, the card becomes a page from a book.
 * Each tool keeps its own component rules, scoped under .tl (scripts/j2_tools_convert);
 * this file supplies the shared chrome those rules used to share.                     */

/* ---------- Legacy variable names, pointed at the brand palette ---------- */
.tl {
  --emerald: var(--z-green); --emerald2: var(--z-green-600); --green: var(--z-green);
  --navy: var(--z-green); --navy2: var(--z-green-600); --plum: var(--z-green-800);
  --amber: var(--z-amber); --gold: var(--z-amber); --purple: var(--z-purple); --red: var(--z-red);
  --cream: var(--z-cream); --parch: var(--z-parchment); --bg: var(--z-cream);
  --ink: var(--z-charcoal); --mut: var(--z-ink-muted); --ok: #1E7D49;
  --tl-w: 720px;
}

/* ---------- Hero (C, compact) ---------- */
.tl-hero { position: relative; overflow: hidden; padding-block: clamp(1.75rem, 1rem + 3vw, 3.75rem) clamp(4.5rem, 3.5rem + 4vw, 7rem); background: var(--z-white); text-align: center; }
.tl-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(6,69,48,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(6,69,48,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 20%, #000 15%, transparent 72%); mask-image: radial-gradient(70% 80% at 50% 20%, #000 15%, transparent 72%);
}
.tl-hero__in { position: relative; max-width: calc(46rem + 2 * var(--z-gutter)); }
.tl .hero .eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem .35rem; border-radius: 999px;
  border: 1px solid rgba(6,69,48,.14); background: var(--z-green-50); color: var(--z-green);
  font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tl .hero h1 { margin-top: 1.1rem; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); font-weight: 500; line-height: 1.06; letter-spacing: -.03em; color: var(--z-green); text-wrap: balance; }
.tl .hero p { max-width: 36rem; margin: 1rem auto 0; font-size: var(--z-fs-md); line-height: 1.55; color: var(--z-ink-muted); }
.tl .hero .gold, .tl .hero b { color: var(--z-amber-ink); }
@media (max-width: 759px) { .tl .hero p { font-size: var(--z-fs-base); } }

/* ---------- The stage (B band) holding the tool ---------- */
.tl-stage { position: relative; padding-block: 0 clamp(3rem, 2rem + 4vw, 5.5rem); background-image: radial-gradient(60% 50% at 50% 0%, rgba(239,154,16,.1), transparent 70%); }
.tl-wrap { max-width: calc(var(--tl-w) + 2 * var(--z-gutter)); }
.tl-stage > .tl-wrap > :first-child { margin-top: clamp(-3.75rem, -2.5rem - 2vw, -2.5rem); }
.tl-stage p, .tl-stage li { text-wrap: pretty; }

/* ---------- The card (C): white, green rule, amber offset shadow ---------- */
.tl .card {
  --bg: var(--z-white); --fg: var(--z-charcoal); --fg-strong: var(--z-green); --fg-muted: var(--z-ink-muted);
  --accent-ink: var(--z-amber-ink); --link: var(--z-green); --link-hover: var(--z-amber-ink);
  --line: rgba(40,40,40,.14); --line-strong: rgba(40,40,40,.26); --focus: var(--z-green);
  position: relative; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: 14px;
  background: var(--z-white); color: var(--z-charcoal); border: 1.5px solid var(--z-green);
  box-shadow: 12px 12px 0 0 var(--z-amber), 0 40px 80px -36px rgba(0,0,0,.55);
}
.tl .card + .card { margin-top: 1.5rem; }
@media (max-width: 759px) { .tl .card { box-shadow: 7px 7px 0 0 var(--z-amber), 0 30px 60px -30px rgba(0,0,0,.5); } }
.tl h2 { font-size: var(--z-fs-xl); }
.tl h3 { font-size: var(--z-fs-lg); }
.tl .card h2, .tl .card h3, .tl .card h4 { color: var(--z-green); }

/* ---------- Form controls (were global rules in each tool) ---------- */
.tl label { display: block; margin-bottom: .45rem; font-size: var(--z-fs-sm); font-weight: 600; color: var(--fg-strong); }
.tl input:not([type=range]):not([type=radio]):not([type=checkbox]):not([type=hidden]), .tl textarea, .tl select {
  display: block; width: 100%; min-height: 50px; margin-bottom: 14px; padding: .75rem .9rem .65rem;
  border: 1.5px solid rgba(40,40,40,.26); border-radius: 8px; background: var(--z-white); color: var(--z-charcoal);
  font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color var(--z-dur-2), box-shadow var(--z-dur-2);
}
.tl textarea { min-height: 96px; resize: vertical; }
.tl select { padding-right: 2.2rem; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--z-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23064530' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .7rem center / 16px; }
.tl input:hover, .tl textarea:hover, .tl select:hover { border-color: var(--z-sage); }
.tl input:focus, .tl textarea:focus, .tl select:focus { outline: none; border-color: var(--z-green); box-shadow: 0 0 0 4px rgba(239,154,16,.35); }
.tl input::placeholder, .tl textarea::placeholder { color: #8A857C; }
.tl input[type=range] { width: 100%; accent-color: var(--z-amber); }
.tl input[type=radio], .tl input[type=checkbox] { accent-color: var(--z-green); }
.tl .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
@media (max-width: 520px) { .tl .row2 { grid-template-columns: 1fr; } }
.tl .phone-row { display: flex; gap: .5rem; margin-bottom: 14px; }
.tl .phone-row select { flex: 0 0 7.5rem; margin: 0; }
.tl .phone-row input { flex: 1; min-width: 0; margin: 0 !important; }
.tl .fine { margin-top: .8rem; text-align: center; font-size: var(--z-fs-xs); line-height: 1.45; color: var(--z-ink-muted); }
.tl .err { margin-top: .6rem; text-align: center; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-red-ink); }
.tl .stage-on-dark .err, .tl-stage > .tl-wrap > .err { color: #FFB4B4; }

/* ---------- Buttons (C) ---------- */
.tl .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 54px;
  padding: .6rem 1.25rem .5rem; border: 0; border-radius: 4px; background: var(--z-amber); color: var(--z-green-950);
  font-family: var(--z-font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  transition: transform var(--z-dur-2) var(--z-ease-out), box-shadow var(--z-dur-2) var(--z-ease-out), background-color var(--z-dur-2);
}
.tl .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(239,154,16,.7); }
.tl .btn:active { transform: none; }
.tl .btn:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.tl .spin {
  display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: tl-spin .8s linear infinite;
}
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* ---------- The in-result offer panel (.cta2), house style ---------- */
.tl .cta2 {
  --fg: var(--z-cream); --fg-strong: var(--z-white); --link: var(--z-cream); --link-hover: var(--z-amber);
  margin-top: 1.25rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: 8px; text-align: center;
  background: var(--z-green); color: var(--z-cream);
  background-image: radial-gradient(70% 90% at 0% 100%, rgba(239,154,16,.18), transparent 60%);
}
.tl .cta2 b { font-family: var(--z-font-display); font-weight: 600; }
.tl .cta2 a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: .9rem; padding: .55rem 1.4rem .45rem;
  border-radius: 4px; background: var(--z-amber); color: var(--z-green-950); font-weight: 600; text-decoration: none;
  transition: transform var(--z-dur-2) var(--z-ease-out);
}
.tl .cta2 a:hover { color: var(--z-green-950); transform: translateY(-2px); }

/* ---------- A: a result is a page from a book ----------
   The tools reveal results by setting style="display:block" on .results/.result, so the
   card restyles itself the moment that happens (:has). Older browsers keep the C card. */
.tl .card:has(> .results[style*="block"]), .tl .card:has(> .result[style*="block"]),
.tl .card:has(> #results[style*="block"]) {
  border: 1px solid rgba(40,40,40,.16); border-radius: 4px;
  background-color: #FBF8F1;
  background-image: repeating-linear-gradient(transparent 0 1.9rem, rgba(6,69,48,.045) 1.9rem calc(1.9rem + 1px));
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 40px 80px -36px rgba(0,0,0,.6);
  padding-top: clamp(3rem, 2.4rem + 1.5vw, 3.75rem);
}
.tl .card:has(> .results[style*="block"])::before, .tl .card:has(> .result[style*="block"])::before,
.tl .card:has(> #results[style*="block"])::before {
  content: "Zeal Publishers \00B7  Your result"; position: absolute; left: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); right: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); top: 1.1rem;
  padding-bottom: .55rem; border-bottom: 1px solid rgba(40,40,40,.16);
  font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--z-ink-muted);
}
.tl .results h2, .tl .results h3, .tl .result h2, .tl .result h3 { font-family: var(--z-font-display); font-weight: 500; }
.tl .results p, .tl .results li, .tl .result p, .tl .result li { line-height: 1.6; }

/* ---------- Content that sits on the stage, outside the card ---------- */
.tl-stage .tl-wrap > :not(.card):not(.th-grid) h2, .tl-stage .tl-wrap > :not(.card):not(.th-grid) h3 { color: var(--z-white); }
.tl-stage .tl-wrap > :not(.card):not(.th-grid):not(.th-foot) a:not(.btn):not(.z-btn) { color: var(--z-amber); }

/* ---------- After every tool: the call (C) ---------- */
.tl-call { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); background: var(--z-cream); }
.tl-call__in { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .tl-call__in { grid-template-columns: minmax(0, 1.25fr) auto; gap: 4rem; } }
.tl-call__title { margin-top: .8rem; font-size: var(--z-fs-2xl); }
.tl-call__text { margin-top: .8rem; max-width: 36rem; color: var(--z-ink-muted); }
.tl-call__actions { display: grid; gap: .9rem; justify-items: start; }
.tl-call__phone { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--z-font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.02em; color: var(--z-green); text-decoration: none; }
.tl-call__phone svg { width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 50%; background: var(--z-amber); color: var(--z-green-950); flex: none; }
.tl-call__phone:hover { color: var(--z-amber-ink); }
@media (max-width: 520px) { .tl-call__actions, .tl-call__actions .z-btn { width: 100%; } }

/* ---------- The hub (/tools): an A catalog ---------- */
.th-grid { display: grid; gap: 1rem; list-style: none; padding: 0; }
@media (min-width: 700px) { .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .th-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.th-card {
  position: relative; display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.35rem 1.5rem 1.4rem;
  border: 1px solid rgba(40,40,40,.12); border-radius: 4px; color: var(--z-charcoal); text-decoration: none;
  background-color: var(--z-white);
  background-image: linear-gradient(transparent 3.2rem, rgba(140,83,0,.4) 3.2rem, rgba(140,83,0,.4) calc(3.2rem + 1px), transparent calc(3.2rem + 1px)),
                    repeating-linear-gradient(transparent 0 1.7rem, rgba(6,69,48,.045) 1.7rem calc(1.7rem + 1px));
  transition: transform var(--z-dur-3) var(--z-ease-out), box-shadow var(--z-dur-3) var(--z-ease-out);
}
.th-card:hover { color: var(--z-charcoal); transform: translateY(-5px) rotate(-.35deg); box-shadow: 0 30px 50px -28px rgba(0,0,0,.7); }
.th-card--key { box-shadow: inset 0 0 0 1.5px var(--z-amber); }
.th-card .tag { padding-right: 3.6rem; margin-bottom: 1rem; font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--z-amber-ink); }
.th-card h3 { font-size: var(--z-fs-lg); font-weight: 500; color: var(--z-green); }
.th-card p { flex: 1; font-size: var(--z-fs-sm); color: var(--z-ink-muted); }
.th-card .go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-weight: 600; color: var(--z-green); }
.th-card .go svg { width: 1em; height: 1em; transition: transform var(--z-dur-2) var(--z-ease-out); }
.th-card:hover .go svg { transform: translateX(4px); }
.th-call-n { position: absolute; top: 1.35rem; right: 1.5rem; font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .14em; color: var(--z-ink-muted); }
.th-foot { margin-top: 2.5rem; text-align: center; }
/* "Play" (Job 4): the game sits first, as one wide card above the tools grid */
.tl-stage .tl-wrap .th-sec { margin: 0 0 1rem; font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; color: var(--z-white); }
.tl-stage .tl-wrap .th-sec:not(:first-child) { margin-top: 2.25rem; }
.th-play__grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .th-play__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.th-card--fl:hover .th-fl-t { animation: th-ink .6s ease-out; }
@keyframes th-ink { 40% { transform: translateY(1px); opacity: .7; } }
.th-play .th-card--play { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
.th-card--play > :not(.th-play__art) { grid-column: 2; }
.th-play__art { grid-row: 1 / span 4; width: 7.5rem; height: auto; margin-top: .25rem; }
.th-rp-loop { stroke-dasharray: 1; stroke-dashoffset: 0; }
.th-card--rp:hover .th-rp-loop { animation: th-loop .7s ease-out; }
@keyframes th-loop { from { stroke-dashoffset: 1; } }
.tl-stage .tl-wrap .th-play .th-card--play h3 { font-size: var(--z-fs-xl); color: var(--z-green); }
.th-play { padding-top: clamp(1.75rem, 3vw, 2.75rem); }
.th-card--play:hover .th-play__art circle:first-of-type { animation: th-stamp .7s var(--z-ease-spring); transform-box: fill-box; transform-origin: center; }
@keyframes th-stamp { 0% { transform: scale(1.8); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } }
@media (max-width: 600px) { .th-play .th-card--play { grid-template-columns: 1fr; } .th-card--play > * { grid-column: 1 !important; } .th-play__art { grid-row: auto; width: 7rem; } }
/* three games: a column each from 1100px, art above the text */
@media (min-width: 1100px) { .th-play__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .th-play .th-card--play { grid-template-columns: 1fr; } .th-card--play > * { grid-column: 1 !important; } .th-play__art { grid-row: auto; width: 7rem; margin-bottom: .2rem; } .tl-stage .tl-wrap .th-play .th-card--play h3 { font-size: var(--z-fs-lg); } }

/* ---------- The 2026 Cost Report: a dark cover (B), pages (A) ---------- */
.tl-report .top { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(2.75rem, 2rem + 3vw, 4.5rem); text-align: center;
  background: radial-gradient(80% 90% at 70% 20%, #0B5C40 0%, var(--z-green-900) 55%, var(--z-green-950) 100%); }
.tl-report .top h1 { margin: .9rem auto 0; max-width: 18em; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); font-weight: 500; line-height: 1.06; color: var(--z-cream); text-wrap: balance; }
.tl-report .top .sub { margin-top: 1rem; }
.tl-report .body { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); background: var(--z-parchment); }
.tl-report .panel {
  --fg-strong: var(--z-green); border-radius: 4px; border-color: rgba(40,40,40,.14);
  background-color: #FBF8F1; background-image: repeating-linear-gradient(transparent 0 1.9rem, rgba(6,69,48,.04) 1.9rem calc(1.9rem + 1px));
  box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 24px 50px -30px rgba(2,29,19,.45);
}
.tl-report .panel h2 { font-weight: 500; }
.tl-report .gate { --fg-strong: var(--z-white); border-radius: 8px; }
.tl-report .gate .err { color: #FFB4B4; }
.tl-report .gate .fine { color: #B9CDC2; }
.tl-report .cta { border-radius: 8px; }
.tl-report .cta a { border-radius: 4px; }
.tl-report table { display: block; overflow-x: auto; }
@media (min-width: 600px) { .tl-report table { display: table; } }