@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ── Mill & Folks Creative OS — Wise-inspired GREEN theme ───────────────────── */
/* Mains: green pale #e2f6d5 + green neutral #c5edab. CTA: Wise green #9fe870.   */
:root{
  /* Legacy names remain available to existing app styles. */
  --g-bright:var(--mf-primary); --g-active:var(--mf-primary-hover);
  --g-neutral:var(--mf-header); --g-pale:var(--mf-tint);
  --g-emerald:#2ead4b; --forest:#1b6b2e;
  --rausch:var(--mf-primary); --rausch-active:var(--mf-primary-hover);
  --primary:var(--mf-primary); --on-primary:var(--mf-on-primary);
  --ink:var(--mf-ink); --body:var(--mf-text); --mute:var(--mf-muted); --mute-soft:var(--mf-muted);
  --canvas:var(--mf-canvas); --canvas-soft:var(--mf-canvas); --surface-strong:var(--mf-tint);
  --hairline:var(--mf-border); --hairline-soft:var(--mf-border-soft);
  --radius-sm:var(--mf-radius-control); --radius-card:var(--mf-radius-card);
  --grad-brand:linear-gradient(135deg,#1b6b2e 0%,#2ead4b 55%,#7bd94f 100%);
  --grad-hero:linear-gradient(155deg,#f4faee 0%,#e8f4da 55%,#dcefca 100%);
  --grad-cta:linear-gradient(135deg,#37b356 0%,#2ead4b 100%);
  --shadow-card:var(--mf-shadow-card); --shadow-hover:var(--mf-shadow-float); --shadow-glow:var(--mf-shadow-float);
  --font-display:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-wordmark:'Inter','Helvetica Neue',Arial,sans-serif;
}
/* Brand wordmark — Wise-spirit font, always lowercase */
.mf-wordmark{ font-family:var(--font-wordmark)!important; text-transform:lowercase!important; font-weight:600!important; letter-spacing:-.02em!important; }
/* Foundations */
body,.bg-amber-50,.bg-slate-50,.bg-slate-100.min-h-screen,.bg-gray-50,.bg-gray-100{ background:var(--canvas)!important; color:var(--body); font-family:var(--font-display)!important; -webkit-font-smoothing:antialiased; }
/* Keep long text within its container; wide tables scroll locally. */
html,body{ max-width:100%; }
a,p,.break-anywhere{ overflow-wrap:anywhere; word-break:break-word; }
h1,h2,h3,h4{ font-weight:800!important; letter-spacing:-.025em; color:var(--ink); }
h1{ letter-spacing:-.035em; }
.font-bold{ font-weight:800!important; } .font-semibold{ font-weight:600!important; }
.text-slate-800,.text-slate-900,.text-gray-800,.text-gray-900{ color:var(--ink)!important; }
.text-slate-400,.text-slate-500,.text-gray-400,.text-gray-500{ color:var(--mute)!important; }
/* Signature ribbon → thin green accent */
body::before{ content:''; position:fixed; top:0; left:0; right:0; height:3px; background:linear-gradient(105deg,#1b6b2e 0%,#2ead4b 55%,#7bd94f 100%); z-index:9999; }
/* Radius (matches Knowledge): containers 12px, buttons/inputs 8px, pills round */
.rounded-3xl,.rounded-2xl{ border-radius:var(--radius-card)!important; }
.rounded-xl,.rounded-lg,.rounded-md,.rounded{ border-radius:var(--radius-sm)!important; }
.rounded-full{ border-radius:9999px!important; }
.shadow,.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl{ box-shadow:none!important; }
/* Cards → flat white, hairline border */
.bg-white{ background:var(--mf-surface)!important; }
.border-slate-100,.border-slate-200,.border-amber-100,.border-amber-200,.border-emerald-100,.border-gray-100,.border-gray-200{ border-color:var(--hairline)!important; }
/* Strong fills / primary / active → Wise bright-green button, ink text */
.bg-amber-600,.bg-amber-700,.bg-amber-500,.bg-amber-400,
.bg-emerald-600,.bg-slate-800,.bg-slate-900,
.bg-violet-600,.bg-indigo-600,.bg-blue-600,.bg-blue-700,
.bg-green-600,[class*="bg-[#6ACCB0]"],[class*="bg-[#6accb0]"]{ background:var(--rausch)!important; color:var(--on-primary)!important; border-color:transparent!important; box-shadow:0 1px 2px rgba(14,15,12,.06)!important; }
.bg-amber-600:hover,.bg-amber-700:hover,.bg-amber-500:hover,.bg-amber-400:hover,
.bg-emerald-600:hover,.bg-slate-800:hover,.bg-slate-900:hover,
.bg-violet-600:hover,.bg-indigo-600:hover,.bg-blue-600:hover,.bg-blue-700:hover,.bg-green-600:hover,
.hover\:bg-amber-700:hover,.hover\:bg-emerald-700:hover,.hover\:bg-blue-700:hover,.hover\:bg-green-700:hover,.hover\:bg-slate-700:hover,
[class*="bg-[#6ACCB0]"]:hover,[class*="bg-[#6accb0]"]:hover{ background:var(--rausch-active)!important; color:var(--on-primary)!important; box-shadow:none!important; }
/* Soft tint fills → neutral surface (Airbnb: gray, not colored) */
.bg-fuchsia-100,.bg-violet-100,.bg-amber-100,.bg-emerald-100,.bg-amber-50\/40,.bg-emerald-50\/60{ background:var(--canvas-soft)!important; color:var(--body)!important; }
.text-amber-600,.text-amber-700,.text-amber-800,.text-emerald-600,.text-emerald-700,
.text-violet-600,.text-violet-700,.text-fuchsia-700,.text-blue-600,.text-indigo-600,
[class*="text-[#6ACCB0]"],[class*="text-[#6accb0]"]{ color:var(--g-emerald)!important; }
/* Neutral chips/buttons → soft gray surface, hairline border (Airbnb secondary) */
.bg-slate-100,.hover\:bg-slate-200:hover{ background:var(--canvas-soft)!important; color:var(--ink)!important; border:1px solid var(--hairline)!important; }
/* Default button → Airbnb secondary: white fill, ink text, 1px hairline, 8px. Primary/CTA below stays green. */
button{ background:#fff!important; color:var(--ink)!important; font-family:var(--font-display)!important; font-weight:600!important; text-transform:none!important; letter-spacing:0!important; border:1px solid var(--hairline)!important; border-radius:var(--radius-sm)!important; transition:background .15s ease, border-color .15s ease, transform .05s ease, opacity .15s ease; }
button:hover{ background:var(--canvas-soft)!important; border-color:var(--ink)!important; }
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.4; }
a.btn,a[role="button"]{ background:#fff!important; color:var(--ink)!important; border:1px solid var(--hairline)!important; font-family:var(--font-display)!important; font-weight:600!important; border-radius:var(--radius-sm)!important; }
/* Inputs → 8px, hairline, ink focus (Airbnb) with a faint green ring */
input,select,textarea{ font-family:var(--font-display)!important; border-radius:var(--radius-sm)!important; border-color:var(--hairline)!important; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--ink)!important; box-shadow:0 0 0 3px rgba(46,173,75,.14)!important; }
/* Pills → soft gray, green when active */
.pill{ font-family:var(--font-display); border-radius:9999px!important; background:var(--canvas-soft)!important; color:var(--ink)!important; }
.pill.active{ background:var(--primary)!important; color:var(--on-primary)!important; border-color:var(--primary)!important; }
/* Eyebrows / tiny labels */
.uppercase{ font-family:var(--font-display)!important; letter-spacing:.06em!important; color:var(--mute); font-weight:600; }

/* Mill & Folks green app header. */
.mf-header{ background:var(--mf-header)!important; color:var(--ink)!important; border-bottom:1px solid var(--hairline); }
.mf-header a{ color:var(--ink); text-decoration:none; }
.mf-header .mf-wordmark{ color:var(--ink)!important; }
.mf-header h1,.mf-header h2,.mf-header h3{ color:var(--ink)!important; }
/* Compact single-row header: logo · icon+app name · model — reduces header height */
.mf-header .flex.flex-col{ flex-direction:row!important; align-items:center!important; gap:10px!important; }
.mf-header > div{ max-width:none!important; padding:7px 24px!important; }
/* app name + its icon + model badge, all on one line */
.mf-appbadge-row{ display:inline-flex; align-items:center; gap:7px; }
.mf-app-icon{ display:inline-flex; align-items:center; }
.mf-app-icon svg{ display:block; }
/* current-app badge — soft green tint pill */
.mf-appbadge{ display:inline-block; background:var(--g-pale); color:var(--forest); font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.01em; padding:2px 9px; border-radius:6px; }
/* live model badge (injected by mf-ui.js) — shows which Anthropic model the app uses */
.mf-model-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:11px; font-weight:600; color:var(--body); background:#fff; border:1px solid var(--hairline); border-radius:9999px; padding:2px 9px; line-height:1.5; white-space:nowrap; }
.mf-model-badge .mf-model-dot{ width:6px; height:6px; border-radius:9999px; background:var(--g-emerald); box-shadow:0 0 0 3px rgba(46,173,75,.14); flex:0 0 auto; }
/* always-visible tool nav */
.mf-nav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.mf-navlink{ display:inline-block; padding:7px 12px; border-radius:8px; font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--body)!important; transition:background .12s ease,color .12s ease; }
.mf-navlink:hover{ background:var(--canvas-soft); color:var(--ink)!important; }
.mf-navlink-active{ background:var(--g-pale)!important; color:var(--forest)!important; }
.mf-navlink-active:hover{ background:var(--g-pale)!important; color:var(--forest)!important; }
/* Header actions retain distinct setup and primary treatments. */
.mf-header-btn,.mf-header-link{ display:inline-flex!important; align-items:center; justify-content:center; min-height:44px; padding:0 14px!important; margin-left:6px; background:var(--ink)!important; color:#fff!important; border-radius:8px!important; font-family:var(--font-display)!important; font-weight:600!important; font-size:12px!important; border:none!important; }
.mf-gear{ background:var(--ink)!important; color:#fff!important; }                 /* Setup — black */
.mf-gear:hover{ background:#000!important; }
.mf-header-link:not(.mf-gear){ background:var(--rausch)!important; color:var(--on-primary)!important; }  /* Header action */
.mf-header-link:not(.mf-gear):hover{ background:var(--rausch-active)!important; }
/* compact header buttons (e.g. the eCom toolbar) so everything fits one row */
.mf-compact{ padding:5px 9px!important; font-size:11px!important; }
.mf-navlink{ white-space:nowrap; }
/* No login flash on navigation: the login screen stays invisible until the
   client-side /api/check-auth resolves. If authed, showApp() hides it (display:none)
   before this reveal fires; if not authed, it fades in after ~0.7s. */
#login-screen{ opacity:0; pointer-events:none; animation:mfLoginReveal 0s linear .7s forwards; background:var(--grad-hero)!important; min-height:100vh; }
@keyframes mfLoginReveal{ to{ opacity:1; pointer-events:auto; } }
/* ── Inside the OS shell (iframe) ──────────────────────────────────────────────
   The dark OS strip is the ONLY menu. Hide EVERY tool's own header. */
.embedded .mf-header{ display:none !important; }
/* eCom & Email keep action buttons in their header on standalone pages; in the shell
   those move into an in-page bar (.mf-embed-bar) that ONLY appears when embedded. */
.mf-embed-bar{ display:none; }
.embedded .mf-embed-bar{ display:flex; }
/* No sideways scroll in the shell — content must never overflow the viewport width. */
html.embedded, html.embedded body{ overflow-x:hidden !important; max-width:100% !important; }

/* Responsive navigation is defined in mf-design-system.css. */
.mf-burger{ display:none; }

/* ══ Modern refresh — opt-in components (gradients, bold display, elevated cards) ══ */
/* Big bold display heading */
.mf-display{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,5vw,54px); line-height:1.03; letter-spacing:-.04em;
  color:var(--ink); text-wrap:balance;
}
.mf-display-sm{ font-size:clamp(24px,3.4vw,38px); line-height:1.05; letter-spacing:-.035em; font-weight:800; }
/* Gradient-clipped text (use inside a heading for a colored accent word) */
.mf-grad-text{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* Eyebrow label */
.mf-eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--g-emerald);
}
/* Hero band — muted green tint, tighter corners (Airbnb block feel) */
.mf-hero{
  position:relative; overflow:hidden; background:var(--grad-hero);
  border:1px solid var(--hairline-soft); border-radius:14px!important;
  box-shadow:none;
}
.mf-hero::after{
  content:''; position:absolute; right:-90px; top:-90px; width:300px; height:300px;
  background:radial-gradient(closest-side,rgba(46,173,75,.16),transparent);
  pointer-events:none;
}
/* Elevated card with subtle hover lift (single Airbnb shadow tier) */
.mf-card, button.mf-card{
  background:#fff!important; border:1px solid var(--hairline)!important; border-radius:12px!important;
  box-shadow:none; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mf-card:hover, button.mf-card:hover{ background:#fff!important; transform:translateY(-2px); box-shadow:var(--shadow-hover)!important; border-color:var(--border-strong,#c1c1c1)!important; }
/* Static elevated panel (no hover lift) — for tables, containers */
.mf-panel{ background:#fff; border:1px solid var(--hairline); border-radius:12px!important; box-shadow:none; }
/* Primary button — green with dark text. */
.mf-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--rausch)!important; color:var(--on-primary)!important; font-weight:700!important;
  border:none!important; border-radius:var(--radius-sm)!important; padding:11px 20px!important;
  box-shadow:none; transition:transform .06s ease, background .16s ease;
}
.mf-btn-primary:hover{ background:var(--rausch-active)!important; }
.mf-btn-primary:active{ transform:translateY(1px); }
/* Ink button variant (Airbnb dark button) */
.mf-btn-dark{
  background:var(--ink)!important; color:#fff!important; font-weight:700!important;
  border:none!important; border-radius:var(--radius-sm)!important; padding:11px 20px!important;
}
.mf-btn-dark:hover{ background:#000!important; color:#fff!important; }
/* Soft chip — subtle green accent */
.mf-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:5px 11px; border-radius:9999px; background:#fff; color:var(--ink);
  border:1px solid var(--hairline);
}
/* Subtle entrance animation */
@keyframes mfRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.mf-rise{ animation:mfRise .5s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion:reduce){ .mf-rise,.mf-card{ animation:none!important; transition:none!important; } }

/* ── Consistent button SIZE across every app (colour/shape come from rules above).
   Standard height + padding so all action buttons match; header/burger/compact and
   explicit .mf-btn-sm keep their own size. No colour here (keeps primary green). ── */
button:not(.mf-header-btn):not(.mf-header-link):not(.mf-gear):not(.mf-burger):not(.mf-compact):not(.mf-btn-sm){
  align-items:center; justify-content:center; gap:6px;
  min-height:48px; padding:8px 16px!important; font-size:16px!important; line-height:1.5;
}
.mf-btn-sm{ min-height:30px!important; padding:5px 10px!important; font-size:12px!important; }
/* Shared control radius, including Tailwind buttons. */
button:not(.mf-burger){ border-radius:var(--radius-sm)!important; }
/* ── Banner injected on every app by mf-ui.js — full width + px-6 (matches Knowledge) ── */
.mf-hero-wrap{ width:100%; margin:0; padding:24px 24px 0; box-sizing:border-box; }
.embedded .mf-hero-wrap{ display:none!important; }   /* the OS shell has its own chrome */

/* ── Social setup steps — bigger blocks on a violet gradient (banner-style) ── */
.mf-step{
  background:linear-gradient(155deg,#f5f1fe 0%,#ece3fb 55%,#e3d7f8 100%)!important;
  border:1px solid rgba(124,58,237,.16)!important; border-radius:14px!important;
  padding:22px!important; box-shadow:none!important;
}
.mf-step h2{ color:#5b21b6!important; }
.mf-step input,.mf-step select,.mf-step textarea{ background:#fff!important; }
/* Email brief retains its numbered green gradient blocks. */
#brief-form{ counter-reset:estep; }
#brief-form .brief-col > div{
  counter-increment:estep; position:relative; overflow:visible;
  background:var(--grad-hero)!important;
  border:1px solid rgba(46,173,75,.20)!important; border-radius:14px!important; box-shadow:none!important;
}
#brief-form .brief-col > div::before{
  content:counter(estep); position:absolute; top:-9px; left:-9px;
  width:24px; height:24px; border-radius:9999px; background:var(--rausch); color:var(--on-primary);
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.18); z-index:2;
}
#brief-form .brief-col > div input,#brief-form .brief-col > div select,#brief-form .brief-col > div textarea{ background:#fff!important; }
/* Greenish variant — the Plan block (step 2 of generation) */
.mf-step-green{
  background:linear-gradient(155deg,#f2f9ea 0%,#e6f4d6 55%,#d9efc4 100%)!important;
  border:1px solid rgba(46,173,75,.20)!important; border-radius:14px!important;
  padding:22px!important; box-shadow:none!important;
}
.mf-step-green input,.mf-step-green select,.mf-step-green textarea{ background:#fff!important; }