/* Enfluencer design system — warm studio for Indian creators. Kaptaan stays the coral pirate;
   saffron and indigo do the highlighting. Tokens below are the only colours, type, and motion. */
:root {
  --bg: #FBF6EE;
  --bg-2: #F3EBDD;
  --card: #FFFFFF;
  --ink: #1A140F;
  --ink-2: #3A322C;
  --muted: #4E463E;           /* ≥ 7:1 on --bg */
  --faint: #5E564C;           /* ≥ 4.5:1 on white and --bg */
  --line: #E6DCCE;
  --accent: #C73D28;          /* coral deep enough for white button text */
  --accent-soft: #FDECE7;
  --accent-ink: #8E2A18;
  --navy: #1C2438;
  --gold: #A56B12;
  --gold-soft: #FBF3DE;
  --saffron: #E8A317;
  --good: #146B42;
  --good-soft: #E3F5EB;
  --warn: #8A5A10;
  --dark: #14110E;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(26,20,15,.05), 0 10px 28px rgba(26,20,15,.06);
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--accent-ink);

  /* motion — three curves and four durations cover the whole app */
  --ease-quart: cubic-bezier(.25, 1, .5, 1);     /* reveals, loops */
  --ease-expo: cubic-bezier(.19, 1, .22, 1);     /* entrances, draws */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* toasts, sheets, pops */
  --d-fast: .14s;
  --d-press: .2s;
  --d-panel: .26s;
  --d-reveal: .34s;
}

* { -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--ink); }
html { scroll-behavior: smooth; }
body {
  font-family: "Manrope", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 380px at 0% -8%, rgba(232, 163, 23, .18), transparent 58%),
    radial-gradient(820px 320px at 100% 0%, rgba(199, 61, 40, .08), transparent 52%),
    var(--bg);
}
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 80; background: var(--ink); color: #fff;
  padding: .7rem 1rem; border-radius: 999px; font-weight: 700; }
.skip-link:focus { top: 12px; }
.serif { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.01em; }
.eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.eyebrow.accent { color: var(--accent-ink); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-flat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card-dark { background: var(--dark); color: #fff; border-radius: 28px; }
.soft { background: #FAF8F3; border: 1px solid var(--line); border-radius: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 700; border-radius: 999px;
  padding: .7rem 1.35rem; min-height: 44px; transition: transform var(--d-fast) var(--ease-quart), background var(--d-fast) ease, opacity var(--d-fast);
  cursor: pointer; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #12182A; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-ink); }
.btn-ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: #FBF6EE; }
.btn-sm { padding: .45rem .95rem; min-height: 40px; font-size: 14px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--ink); }
.icon-btn:hover { background: rgba(255,255,255,.75); }

.input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1.1rem;
  font-size: 16px; outline: none; transition: border-color var(--d-fast), box-shadow var(--d-fast); }
.input:focus, .input:focus-visible { outline: none; border-color: #E7A090; box-shadow: 0 0 0 4px var(--accent-soft); }
textarea.input { resize: vertical; min-height: 96px; }
label.lbl { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: .4rem; }

.chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .35rem .85rem; font-size: 13px;
  font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-reel { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .12rem .7rem; background: #fff;
  color: var(--accent-ink); font-weight: 600; text-decoration: none; vertical-align: .1em; border: 1px solid #F6CFC7;
  font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.5; font-style: normal; letter-spacing: 0; }
.chip-reel::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--accent); }
.chip-reel:hover { background: var(--accent-soft); }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
.badge-good { background: var(--good-soft); color: var(--good); }
.badge-dark { background: var(--ink); color: #fff; }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-gold { background: var(--gold-soft); color: #8A6114; }
.badge-muted { background: var(--bg-2); color: var(--muted); }

/* progress dashes (onboarding) */
.dashes { display: flex; gap: 8px; }
.dashes span { width: 30px; height: 4px; border-radius: 4px; background: #E2DED4; }
.dashes span.done { background: var(--ink); }
.dashes span.now { background: var(--accent); width: 46px; }

/* app shell */
.sidebar { width: 288px; background: #F3F0E8; border-right: 1px solid var(--line); }
.nav-item { display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem; border-radius: 14px; color: var(--ink-2);
  font-weight: 600; font-size: 15.5px; }
.nav-item:hover { background: rgba(255,255,255,.7); }
.nav-item.active { background: #fff; color: var(--ink); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.nav-item svg { width: 20px; height: 20px; stroke-width: 1.8; flex-shrink: 0; }
.nav-sect { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--faint); padding: 0 .9rem; margin: 1.1rem 0 .35rem; }

/* chat */
.bubble-user { background: var(--ink); color: #fff; border-radius: 24px; padding: .8rem 1.3rem; max-width: 75%; font-size: 16.5px; }
.composer { background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 10px 40px rgba(17,17,17,.06); }
.composer.busy { border-color: #F2B6AA; box-shadow: 0 0 0 4px var(--accent-soft); }
.step-done { color: var(--muted); }
.step-active { color: var(--ink); font-weight: 600; }
.tick { width: 22px; height: 22px; border-radius: 99px; background: var(--good-soft); color: var(--good); display: inline-grid; place-items: center; flex-shrink: 0; }
.dots { display: inline-flex; gap: 3px; width: 22px; justify-content: center; }
.dots i { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); animation: blink 1.2s infinite both; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2 } 40% { opacity: 1 } }
.caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; background: #F4A99C; border-radius: 3px; animation: blink 1s infinite; }

.reel-tile { width: 132px; flex-shrink: 0; cursor: pointer; }
.reel-tile .thumb { width: 132px; height: 186px; border-radius: 20px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--line); transition: transform var(--d-fast) var(--ease-quart); }
.reel-tile:hover .thumb { transform: translateY(-3px); }
.reel-tile.sel .thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.hscroll { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; }
.hscroll::-webkit-scrollbar { display: none; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* score bars */
.bar { height: 6px; border-radius: 6px; background: #EEEAE1; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; }
.lock-blur { filter: blur(6px); user-select: none; pointer-events: none; }
.skel { border-radius: 6px; height: 10px; background: linear-gradient(90deg, #EEEAE1 25%, #F7F4ED 37%, #EEEAE1 63%);
  background-size: 220% 100%; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0 } }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(40,38,34,.38); backdrop-filter: blur(6px); z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal { background: #FBFAF6; border-radius: 30px; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.25); }

/* mascot */
.mascot { image-rendering: auto; user-select: none; -webkit-user-drag: none; }
.float { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.fade-in { animation: fadein var(--d-reveal) var(--ease-quart) both; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.tbl tr:last-child td { border-bottom: 0; }

.flash { border-radius: 16px; padding: .8rem 1.1rem; font-weight: 600; font-size: 14.5px; }
.flash-ok { background: var(--good-soft); color: var(--good); }
.flash-err { background: var(--accent-soft); color: var(--accent-ink); }

[x-cloak] { display: none !important; }
/* Must stay in step with Tailwind's md (768px): the hamburger and close button are md:hidden, so if the
   drawer kicked in above 768px there would be a band of widths with no way to open navigation at all. */
/* Tailwind's .sticky is injected after this file, so position has to win explicitly or the
   drawer stays in the flex row and the page scrolls sideways on a phone. */
@media (max-width: 767.98px) {
  aside.sidebar { position: fixed !important; z-index: 50; inset: 0 auto 0 0; width: min(288px, 88vw);
    transform: translateX(-100%); transition: transform var(--d-panel) var(--ease-quart); }
  aside.sidebar.open { transform: none; }
  #main { max-width: 100%; overflow-x: auto; }
}
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(40,38,34,.38); backdrop-filter: blur(2px); }

/* Touch devices get thumb-sized targets; pointer devices keep the denser desktop spacing.
   Only interactive chips grow — display-only <span class="chip"> labels are left alone. */
@media (pointer: coarse) {
  button.chip, a.chip, .btn, .btn-sm { min-height: 44px; }
  button.chip, a.chip { padding-top: .5rem; padding-bottom: .5rem; }
  .nav-item { padding-top: .75rem; padding-bottom: .75rem; }
  .footer-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .3rem; }
}

/* A short block that says what a feature does, why it helps, and what happens next. */
.explain { background: linear-gradient(180deg, #FFF8EC, #fff); border: 1px solid var(--line); border-radius: 18px; padding: .9rem 1rem; font-size: 14.5px; line-height: 1.5; }
.explain p + p { margin-top: .35rem; }
.kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--accent-ink); }
.page-lead { color: var(--muted); font-size: 16.5px; line-height: 1.55; max-width: 42rem; margin-top: .55rem; }
.path { display: grid; gap: 10px; }
@media (min-width: 768px) { .path-3 { grid-template-columns: repeat(3, 1fr); } }
.path-step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: .85rem .95rem; box-shadow: var(--shadow); display: flex; gap: .75rem; align-items: flex-start; }
.path-num { width: 28px; height: 28px; border-radius: 99px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1rem 1.05rem; text-align: left; box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 100%; }
.feature:hover { border-color: #E7B2A6; }
.empty { text-align: center; padding: 2.25rem 1.25rem; }
.empty h2 { font-family: Fraunces, Georgia, serif; font-size: 1.7rem; font-weight: 600; line-height: 1.15; }
.dock { position: sticky; bottom: 0; z-index: 20; padding-top: 1.5rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, transparent); }

/* ---------------------------------------------------------------- Kaptaan, animated
   Each pose moves in character; matched on the image file so every existing <img class="mascot"> picks it up.
   Feet stay planted (transform-origin bottom), he pops in once on load, wiggles on hover, and everything stops for
   people who asked their device to reduce motion. Small round avatars stay still unless he's busy (.k-busy). */
img.mascot { transform-origin: 50% 92%; will-change: transform; }
img.mascot[src*="/wave."]      { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-wave 2.6s ease-in-out .7s infinite; }
img.mascot[src*="/telescope."] { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-scan 5s ease-in-out .7s infinite; }
img.mascot[src*="/treasure."]  { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-cheer 1.8s cubic-bezier(.3,.7,.4,1) .7s infinite; }
img.mascot[src*="/laptop."]    { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-type .9s steps(2) .7s infinite; }
img.mascot[src*="/map."]       { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-point 2.2s ease-in-out .7s infinite; }
img.mascot[src*="/thinking."]  { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-think 3.2s ease-in-out .7s infinite; }
img.mascot[src*="/sleepy."]    { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-breathe 4.5s ease-in-out .7s infinite; }
img.mascot[src*="/head."]      { animation: k-pop .7s cubic-bezier(.34,1.56,.64,1) both, k-breathe 3.6s ease-in-out .7s infinite; }
img.mascot.k-busy              { animation: k-talk .45s ease-in-out infinite alternate !important; transform-origin: 50% 80%; }
img.mascot:not([src*="head_sm"]):hover { animation: k-wiggle .6s ease-in-out !important; }

@keyframes k-pop     { 0% { opacity: 0; transform: translateY(14px) scale(.85) } 60% { opacity: 1 } 100% { opacity: 1; transform: none } }
@keyframes k-wave    { 0%,100% { transform: rotate(0) } 15% { transform: rotate(-5deg) } 30% { transform: rotate(4deg) }
                       45% { transform: rotate(-3deg) } 60% { transform: rotate(0) translateY(-3px) } }
@keyframes k-scan    { 0%,100% { transform: rotate(-3deg) translateX(-3px) } 50% { transform: rotate(3deg) translateX(3px) } }
@keyframes k-cheer   { 0%,100% { transform: translateY(0) scale(1, 1) } 12% { transform: translateY(0) scale(1.06, .94) }
                       40% { transform: translateY(-16px) scale(.97, 1.04) } 70% { transform: translateY(0) scale(1.04, .96) } }
@keyframes k-type    { 0% { transform: translateY(0) } 100% { transform: translateY(-2px) } }
@keyframes k-point   { 0%,100% { transform: rotate(0) } 50% { transform: rotate(-2.5deg) translateY(-4px) } }
@keyframes k-think   { 0%,100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) translateY(-3px) } }
@keyframes k-breathe { 0%,100% { transform: scale(1, 1) } 50% { transform: scale(1.015, 1.035) translateY(-2px) } }
@keyframes k-talk    { from { transform: rotate(-4deg) translateY(0) } to { transform: rotate(4deg) translateY(-2px) } }
@keyframes k-wiggle  { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-6deg) scale(1.04) } 75% { transform: rotate(6deg) scale(1.04) } }

/* ---------------------------------------------------------------- Confirmations, reveals, surfaces
   The moments a long job lands: a tick that draws itself, results that cascade in rather than
   appearing all at once, and surfaces that spring instead of blink. */

/* A tick pops, then draws its stroke — used wherever a step or a win is confirmed. */
.tick { animation: tick-pop .22s var(--ease-spring) both; }
.tick svg path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: tick-draw .26s var(--ease-quart) .1s forwards; }
@keyframes tick-pop  { 0% { opacity: 0; transform: scale(.55) } 100% { opacity: 1; transform: none } }
@keyframes tick-draw { to { stroke-dashoffset: 0 } }

/* The big one: a ring draws, then a tick draws inside it. For a finished audit or check. */
.draw-check { display: block; }
.draw-check .ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-ring .42s var(--ease-quart) forwards; }
.draw-check .mark { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-mark .26s var(--ease-quart) .34s forwards; }
@keyframes draw-ring { to { stroke-dashoffset: 0 } }
@keyframes draw-mark { to { stroke-dashoffset: 0 } }

/* Put .stagger on a parent and its children rise in sequence, 90ms apart. */
.stagger > * { animation: fadein var(--d-reveal) var(--ease-quart) both; }
.stagger > *:nth-child(1) { animation-delay: .04s }
.stagger > *:nth-child(2) { animation-delay: .13s }
.stagger > *:nth-child(3) { animation-delay: .22s }
.stagger > *:nth-child(4) { animation-delay: .31s }
.stagger > *:nth-child(5) { animation-delay: .40s }
.stagger > *:nth-child(6) { animation-delay: .49s }
.stagger > *:nth-child(7) { animation-delay: .58s }
.stagger > *:nth-child(8) { animation-delay: .67s }
.stagger > *:nth-child(n+9) { animation-delay: .76s }

/* Surfaces. Flashes and modals spring; the scrim behind them just fades. */
.flash { animation: toast-in .28s var(--ease-spring) both; }
@keyframes toast-in { 0% { opacity: 0; transform: translateY(10px) scale(.97) } 100% { opacity: 1; transform: none } }
.overlay { animation: scrim-in .18s linear both; }
@keyframes scrim-in { 0% { opacity: 0 } 100% { opacity: 1 } }
.modal { animation: sheet-in .32s var(--ease-spring) both; }
@keyframes sheet-in { 0% { opacity: 0; transform: translateY(14px) scale(.985) } 100% { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  img.mascot, img.mascot.k-busy, img.mascot:hover, .float { animation: none !important; }
  .skel, .tick, .tick svg path, .draw-check .ring, .draw-check .mark,
  .stagger > *, .flash, .overlay, .modal, .fade-in { animation: none !important; }
  .tick svg path, .draw-check .ring, .draw-check .mark { stroke-dashoffset: 0 !important; }
}