/* =========================================================================
   1ClickReport — "Warm Paper / Claude-marker" design system (2026)
   Shared stylesheet extracted from the reskinned blog (safe-zones page).
   Link this on new pages/tools so the design language stays consistent
   instead of being re-pasted inline (which caused drift in the old blog).
   Pair with Tailwind CDN + fonts: Bricolage Grotesque, General Sans, JetBrains Mono.
   ========================================================================= */

:root{
  --paper:#faf9f5; --paper-2:#f3f1ea; --paper-3:#ece9e0; --white:#fff;
  --ink:#1c1917; --ink-2:#57534e; --ink-3:#8a8580;
  --line:rgba(28,25,23,.09); --line-strong:rgba(28,25,23,.16);
  --violet:#6d28d9; --violet-deep:#5b21b6; --violet-soft:rgba(109,40,217,.07); --claude:#d97757;
  --shadow-ink-sm:3px 3px 0 rgba(28,25,23,.92);
  --shadow-float:0 2px 4px rgba(28,25,23,.04),0 24px 64px -16px rgba(28,25,23,.18);
  /* legacy/compat names */
  --bg-primary:#faf9f5; --bg-secondary:#f3f1ea; --bg-tertiary:#ece9e0;
  --text-primary:#1c1917; --text-secondary:#57534e; --text-tertiary:#8a8580;
  --card-bg:#fff; --card-border:rgba(28,25,23,.09);
  --nav-bg:rgba(250,249,245,.85); --nav-border:rgba(28,25,23,.09);
  --font-sans:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Bricolage Grotesque','General Sans',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{ font-family:var(--font-sans); }
body{ background-color:var(--paper); color:var(--ink); }
h1,h2,h3,h4,h5,h6{ color:var(--ink); font-family:var(--font-display); letter-spacing:-.01em; }
h1{ font-weight:720; letter-spacing:-.02em; line-height:1.05; }
a{ color:var(--violet); text-decoration:none; }
a:hover{ color:var(--violet-deep); }
code{ background:var(--paper-3); border:1px solid var(--line); padding:.2rem .45rem; border-radius:6px; font-family:var(--font-mono); color:var(--ink); font-size:.92em; }
table{ border-color:var(--line); } th{ background-color:var(--paper-2); color:var(--ink); } td{ border-color:var(--line); color:var(--ink-2); }

/* paper grain overlay */
body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.02'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection{ background:rgba(109,40,217,.16); }

/* marker highlight */
.hl-marker{ background-image:linear-gradient(100deg,rgba(167,139,250,0) .6%,rgba(167,139,250,.5) 3.5%,rgba(167,139,250,.38) 96%,rgba(167,139,250,0) 99.4%);
  background-position:0 .14em; background-size:100% .86em; background-repeat:no-repeat; padding:0 .12em; margin:0 -.12em;
  border-radius:.25em .4em .3em .45em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* pill CTA — violet + ink offset shadow + hover lift */
.btn-primary{ display:inline-block; background:var(--violet); color:#fff !important; border-radius:100px; padding:.85rem 1.75rem;
  font-weight:700; box-shadow:var(--shadow-ink-sm); text-decoration:none;
  transition:transform .15s cubic-bezier(.22,1,.36,1),background .18s,box-shadow .15s; border:none; cursor:pointer; }
.btn-primary:hover{ background:var(--violet-deep); color:#fff !important; transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(28,25,23,.92); }
.btn-primary:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(28,25,23,.92); }

/* sketch card — ink border + float shadow */
.card{ background:var(--white); border:1.5px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow-float); }
.card:hover{ border-color:var(--violet); }
/* marker card — violet tint + hard ink offset */
.card-marker{ background:var(--violet-soft); border:1.5px solid var(--ink); border-radius:16px; box-shadow:var(--shadow-ink-sm); }
/* pill eyebrow badge */
.eyebrow{ display:inline-block; border-radius:100px; border:1.5px solid var(--ink); background:var(--white); box-shadow:2.5px 2.5px 0 rgba(28,25,23,.92);
  padding:.35rem 1rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em; color:var(--violet); font-size:.7rem; font-weight:600; }

/* form / tool inputs */
.tool-input{ width:100%; padding:.75rem 1rem; border:1.5px solid var(--line-strong); border-radius:12px; background:var(--white);
  color:var(--ink); font-size:1.05rem; font-family:var(--font-mono); transition:border-color .15s,box-shadow .15s; }
.tool-input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
.tool-label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.4rem; }
.tool-result{ font-family:var(--font-display); font-weight:720; color:var(--violet); letter-spacing:-.02em; }
nav{ background-color:var(--nav-bg) !important; border-bottom:1px solid var(--line) !important; backdrop-filter:blur(10px); }
footer{ background:var(--paper-2) !important; border-top:1px solid var(--line) !important; }

/* ── animated brand logo (matches landing page index-next.html) ──
   Markup: <a class="nav-logo"><span class="logo-click-part">…1Click…</span>
           <span class="logo-cycle"><span class="lc-word">Report</span>
           <span class="lc-bars"><i></i>×4</span><span class="lc-sparks"></span></span></a>
   Pair with the logo-cycle JS (Report → Ads → Agents → Report). */
.nav-logo{ font-family:var(--font-display); font-weight:760; font-size:1.1rem; letter-spacing:-.015em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:baseline; gap:.04rem; line-height:1.4; }
.nav-logo span, .footer-logo, .footer-logo span{ font-family:var(--font-display) !important; }
.logo-click-part{ display:inline-block; font-weight:760; }
.logo-click-part span{ display:inline-block; background:linear-gradient(135deg,var(--violet),var(--violet-deep)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.char-C{ animation:charC_click 8s ease-in-out infinite; transform-origin:bottom center; }
.char-l{ animation:charRipple1 8s ease-in-out infinite; transform-origin:bottom center; }
.char-i{ animation:charRipple2 8s ease-in-out infinite; transform-origin:bottom center; }
.char-c{ animation:charRipple3 8s ease-in-out infinite; transform-origin:bottom center; }
.char-k{ animation:charRipple4 8s ease-in-out infinite; transform-origin:bottom center; }
@keyframes charC_click{ 0%{transform:translateY(0) rotate(0)} 5%{transform:translateY(-50%) rotate(0)} 10%{transform:translateY(-50%) rotate(30deg)} 15%{transform:translateY(0) rotate(0)} 100%{transform:translateY(0) rotate(0)} }
@keyframes charRipple1{ 0%,10%{transform:translateY(0)} 12%{transform:translateY(-8px)} 14%{transform:translateY(0)} 100%{transform:translateY(0)} }
@keyframes charRipple2{ 0%,12%{transform:translateY(0)} 14%{transform:translateY(-8px)} 16%{transform:translateY(0)} 100%{transform:translateY(0)} }
@keyframes charRipple3{ 0%,14%{transform:translateY(0)} 16%{transform:translateY(-8px)} 18%{transform:translateY(0)} 100%{transform:translateY(0)} }
@keyframes charRipple4{ 0%,16%{transform:translateY(0)} 18%{transform:translateY(-8px)} 20%{transform:translateY(0)} 100%{transform:translateY(0)} }
.logo-cycle{ position:relative; display:inline-flex; align-items:baseline; }
.logo-cycle .lc-word{ font-weight:700; color:var(--ink); transition:opacity .35s,transform .35s,filter .35s; }
.logo-cycle .lc-word.out{ opacity:0; transform:translateY(-4px) scale(.96); filter:blur(2px); }
.logo-cycle .lc-bars{ display:inline-flex; align-items:flex-end; gap:2px; margin-left:5px; height:.72em; width:20px; opacity:1; overflow:hidden; transition:width .35s,opacity .35s; }
.logo-cycle .lc-bars.lc-hide{ width:0; opacity:0; }
.logo-cycle .lc-bars i{ width:4px; border-radius:2px 2px 0 0; background:linear-gradient(180deg,#6ee7b7,#34d399); transform:scaleY(1); transform-origin:bottom; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.logo-cycle .lc-bars.lc-hide i{ transform:scaleY(0); }
.logo-cycle .lc-bars i:nth-child(1){ height:42%; }
.logo-cycle .lc-bars i:nth-child(2){ height:72%; }
.logo-cycle .lc-bars i:nth-child(3){ height:100%; }
.logo-cycle .lc-bars i:nth-child(4){ height:60%; }
.logo-cycle .lc-sparks{ position:absolute; inset:0; pointer-events:none; }
.logo-cycle .lc-sparks .s{ position:absolute; color:var(--violet); opacity:0; font-size:.6em; filter:drop-shadow(0 0 3px rgba(124,58,237,.5)); }
.logo-cycle .lc-sparks .s.fire{ animation:lcspark .7s ease-out forwards; }
@keyframes lcspark{ 0%{opacity:0;transform:scale(.2)} 25%{opacity:1;transform:scale(1.1) rotate(20deg)} 100%{opacity:0;transform:scale(.3) translateY(-8px) rotate(50deg)} }