@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{
  /* Green kept only as a scarce brand accent (Airbnb-style neutral base) */
  --g-bright:#9fe870; --g-active:#cdffad; --g-neutral:#c5edab; --g-pale:#eef7e3;
  --g-emerald:#2ead4b; --forest:#1b6b2e;
  /* Rausch — primary CTA colour (Airbnb) */
  --rausch:#ff385c; --rausch-active:#e00b41;
  --primary:#ff385c; --on-primary:#ffffff;
  /* Airbnb neutrals */
  --ink:#222222; --body:#3f3f3f; --mute:#6a6a6a; --mute-soft:#929292;
  --canvas:#ffffff; --canvas-soft:#f7f7f7; --surface-strong:#f2f2f2;
  --hairline:#dddddd; --hairline-soft:#ebebeb;
  --radius-sm:8px; --radius-card:12px;
  /* Gradients (muted) + Airbnb single-tier elevation */
  --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:rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.06) 0 4px 12px 0;
  --shadow-hover:rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.06) 0 4px 10px 0, rgba(0,0,0,0.1) 0 10px 26px 0;
  --shadow-glow:rgba(0,0,0,0.08) 0 6px 18px 0;
  --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; }
/* Hard stop on horizontal overflow: a long brand URL (or any unbreakable string) can
   never push the page wider than the viewport or create sideways scroll. */
html,body{ overflow-x:clip!important; 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(--canvas)!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:#fff!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:#fff!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 app header — WHITE, hairline bottom (Airbnb top-nav) ───────── */
.mf-header{ background:#ffffff!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 buttons — same height + spacing. Setup = black, Logout = red (home-banner colours) */
.mf-header-btn,.mf-header-link{ display:inline-flex!important; align-items:center; justify-content:center; height:34px; 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:#fff!important; }  /* Logout — red */
.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; }

/* ── Mobile: collapse the standalone-page nav into a hamburger ──────────────────
   The 7-link nav otherwise wraps onto several rows and makes the header tall. On
   phones the .mf-burger (injected by mf-ui.js) shows; tapping it drops the nav down
   as a panel. (The workspace hides .mf-header, so this only affects regular pages.) */
.mf-burger{ display:none; }
@media (max-width: 640px){
  .mf-header > div{ position:relative; padding:6px 46px 6px 12px !important; gap:6px !important; }
  .mf-header .mf-wordmark{ font-size:16px !important; }
  .mf-header .flex.flex-col{ flex-direction:row !important; align-items:center !important; gap:6px !important; }
  .mf-appbadge{ font-size:10px; padding:1px 7px; }
  .mf-header-btn, .mf-header-link{ padding:4px 9px !important; font-size:11px !important; }
  .mf-burger{
    display:inline-flex !important; align-items:center; justify-content:center;
    position:absolute; top:6px; right:8px; width:36px; height:30px;
    background:#fff !important; color:var(--ink) !important; border:1px solid var(--hairline);
    border-radius:8px; font-size:16px; line-height:1; cursor:pointer;
  }
  .mf-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-top:1px solid var(--hairline);
    padding:6px; z-index:50; box-shadow:0 12px 26px rgba(0,0,0,.12);
    max-height:72vh; overflow-y:auto;
  }
  .mf-nav.mf-nav-open{ display:flex; }
  .mf-navlink{ padding:10px 12px !important; font-size:14px !important; border-radius:8px; }
}

/* ══ 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 — solid green accent, white text, 8px (Airbnb primary) */
.mf-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--rausch)!important; color:#fff!important; font-weight:700!important;
  border:none!important; border-radius:8px!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:8px!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){
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:8px 16px!important; font-size:13px!important; line-height:1.2;
}
.mf-btn-sm{ min-height:30px!important; padding:5px 10px!important; font-size:12px!important; }
/* Every button is 8px radius (beats rounded-* utilities on <button>) */
button:not(.mf-burger){ border-radius:8px!important; }
/* No full-width buttons anywhere — size to content, centred in their slot.
   width:auto alone can't beat grid col-span stretch or flex-grow, so we also zero
   flex-grow and center via margin/justify-self. Exemptions: list-row buttons
   (.text-left) and home app-tiles (.mf-card), which are meant to fill their cell.
   flex-1 button pairs (no w-full) are untouched and keep sharing their row. */
button.w-full:not(.text-left):not(.mf-card),
button[class*="col-span"]:not(.text-left):not(.mf-card){
  width:auto!important; max-width:100%!important;
  flex:0 0 auto!important; justify-self:center!important;
  margin-left:auto!important; margin-right:auto!important;
}
a.mf-btn-primary.w-full,a.mf-btn-dark.w-full{
  width:auto!important; flex:0 0 auto!important; justify-self:center!important;
  margin-left:auto!important; margin-right:auto!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 single-mode brief — auto-numbered blocks on a light #ffd1da gradient ── */
#brief-form{ counter-reset:estep; }
#brief-form .brief-col > div{
  counter-increment:estep; position:relative; overflow:visible;
  background:linear-gradient(155deg,#fff5f6 0%,#ffe6ea 55%,#ffd1da 100%)!important;
  border:1px solid rgba(255,56,92,.16)!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:#fff;
  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; }