/* Shared foundations. Legacy aliases live in together-ai-theme.css.
   !important is limited to compatibility with that theme and Tailwind/inline UI. */
:root {
  --mf-primary:#9fe870; --mf-primary-hover:#8cdb5c; --mf-on-primary:#163300;
  --mf-header:#c5edab; --mf-tint:#eef7e3; --mf-canvas:#f7f8f2; --mf-surface:#fff;
  --mf-ink:#172217; --mf-text:#354231; --mf-muted:#566052;
  --mf-border:#8f9a8b; --mf-border-soft:#dce3d7;
  --mf-danger:#b42318; --mf-danger-tint:#fff1ef; --mf-focus:#1b6b2e;
  --mf-text-sm:14px; --mf-text-base:16px; --mf-text-section:24px;
  --mf-text-title:clamp(32px,4vw,44px);
  --mf-space-1:4px; --mf-space-2:8px; --mf-space-3:12px; --mf-space-4:16px;
  --mf-space-5:24px; --mf-space-6:32px; --mf-space-7:48px; --mf-space-8:64px;
  --mf-radius-control:10px; --mf-radius-card:16px; --mf-radius-modal:20px;
  --mf-shadow-card:0 2px 8px #17221706; --mf-shadow-float:0 12px 32px #1722171a;
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; font-size:var(--mf-text-base); line-height:1.5; }
main,section,article,nav,:where(.flex,.grid) > * { min-width:0; }
[hidden] { display:none!important; }
img,video,canvas { max-width:100%; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:3px solid var(--mf-focus)!important; outline-offset:3px;
}
:where(button,a[role="button"],.mf-btn-primary,.mf-btn-secondary,.mf-btn-danger,.mf-btn-dark) {
  min-height:48px; padding:12px 20px; font-size:16px; line-height:1.5;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; cursor:pointer; max-width:100%;
}
button:disabled { cursor:not-allowed; }
.mf-btn-primary { background:var(--mf-primary)!important; color:var(--mf-on-primary)!important; }
.mf-btn-primary:hover { background:var(--mf-primary-hover)!important; }
.mf-btn-secondary { background:#fff!important; color:var(--mf-ink)!important; border:1px solid var(--mf-border)!important; }
.mf-btn-danger { background:var(--mf-danger)!important; color:#fff!important; border:1px solid var(--mf-danger)!important; }
.mf-btn-danger:hover { background:#912018!important; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),select,textarea) {
  min-height:48px; max-width:100%; min-width:0; padding:10px 12px;
  font-size:16px!important; line-height:1.5;
  background:#fff!important; color:var(--mf-ink)!important;
  border:1px solid var(--mf-border)!important;
}
:where(input[type="checkbox"],input[type="radio"]) { accent-color:var(--mf-focus); }
.mf-card,button.mf-card,.mf-panel { border-radius:var(--mf-radius-card)!important; box-shadow:var(--mf-shadow-card); }
.mf-display { font-size:var(--mf-text-title); line-height:1.1; }
.mf-hero { border-radius:var(--mf-radius-card)!important; border-color:var(--mf-border-soft); }
.mf-chip,.pill { font-size:14px; line-height:20px; padding:6px 12px; }
:where(button,a).mf-chip,:where(button,a).pill { min-height:44px; }
.mf-tabs,[role="tablist"],.flex:has(> button[id^="tab-"]) { display:flex; gap:8px; max-width:100%; min-height:52px; overflow-x:auto; }
.mf-tab,[role="tab"],.flex > button[id^="tab-"],.flex > a[id^="tab-"] { flex-shrink:0; min-height:48px; border-bottom:3px solid transparent; }
.mf-tab.active,[role="tab"][aria-selected="true"] {
  background:var(--mf-tint)!important; color:var(--mf-on-primary)!important; border-bottom:3px solid var(--mf-focus)!important;
}
/* Existing table parents become local scroll regions, including generated tables.
   Opt-in .mf-table-scroll also works before an async table is mounted. */
.mf-table-scroll,:where(div,section):has(> table) { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; }
table { font-size:14px; line-height:20px; font-variant-numeric:tabular-nums; }
:where(th,td) { padding:12px 16px; text-align:start; }
:where(th) { font-weight:700; background:var(--mf-tint); }
/* Keep explicitly compact desktop controls; touch devices get full targets. */
@media (pointer:coarse) { .mf-btn-sm { min-height:44px!important; } }
:where(.mf-modal,.modal,.fixed.inset-0[id*="modal"]) { max-height:100dvh; overflow-y:auto; }
:is(.mf-modal,.modal,.fixed.inset-0[id*="modal"]) > :is(.bg-white,[role="dialog"]) {
  max-width:100%; max-height:calc(100dvh - 32px); overflow:auto; border-radius:var(--mf-radius-modal)!important;
}
/* Header typography and wordmark are deliberately inherited from the theme. */
.mf-header > div { position:relative; display:flex; flex-wrap:wrap; gap:12px!important; padding:12px 24px!important; min-width:0; }
.mf-header > div > div { min-width:0; max-width:100%; flex-wrap:wrap; row-gap:8px; }
.mf-header .mf-appbadge-row { flex-wrap:wrap; }
/* Keep the full desktop menu on one line, including at exactly 1280px. */
.mf-header .mf-nav { flex:1 0 100%; order:3; gap:2px; flex-wrap:nowrap; overflow-x:auto; }
.mf-header .mf-navlink { flex-shrink:0; padding:10px 8px; font-size:13px; }
.mf-navlink { display:inline-flex; align-items:center; min-height:44px; padding:10px 12px; font-size:14px; }
.mf-header-btn,.mf-header-link { min-height:44px; height:auto; font-size:14px!important; }
.mf-header .mf-user-chip { display:inline-block; max-width:220px; white-space:normal!important; overflow-wrap:anywhere; line-height:1.4!important; vertical-align:middle; }
.mf-burger { min-width:44px; min-height:44px; padding:8px!important; }
.mf-embed-bar { flex-wrap:wrap; gap:8px; max-width:100%; }
html.embedded,html.embedded body { overflow-x:visible!important; }
.embedded body::before { display:none; }
/* Independent of the navigation breakpoint; only the shell owns the top header. */
html.embedded .mf-header { display:none!important; }
@media (max-width:1279px) {
  .mf-header > div { padding:12px 68px 12px 16px!important; }
  .mf-header .flex.flex-col { flex-wrap:wrap; }
  .mf-burger { display:inline-flex!important; position:absolute; right:12px; top:12px; width:44px; height:44px; background:#fff!important; }
  .mf-header .mf-nav {
    display:none; position:absolute; top:100%; left:0; right:0; width:100%;
    flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:4px;
    background:#fff; border:1px solid var(--mf-border-soft); padding:12px;
    max-height:min(72dvh,640px); overflow-x:hidden; overflow-y:auto; box-shadow:var(--mf-shadow-float); z-index:50;
  }
  .mf-header .mf-nav.mf-nav-open { display:flex; }
  .mf-header .mf-navlink { padding:10px 16px!important; font-size:14px; }
}
@media (max-width:639px) {
  .mf-hero-wrap { padding:16px 16px 0; }
  /* Keep Setup, the current user and Logout together without moving their nodes. */
  .mf-header > div > div:has(> .mf-user-chip) {
    display:flex; flex-wrap:nowrap; align-items:center; gap:8px; flex-basis:100%; order:2;
  }
  .mf-header .mf-user-chip {
    flex:1 1 0; min-width:0; max-width:none; white-space:nowrap!important;
    overflow:hidden; text-overflow:ellipsis;
  }
  .mf-header > div > div:has(> .mf-user-chip) > .mf-header-link {
    flex-shrink:0; margin-left:0; padding:0 10px!important;
  }
  .mf-header .mf-gear { min-width:44px; }
  /* Tab and chip rows keep their desktop wrapping and scroll only on phones. */
  .mf-tabs,[role="tablist"].flex,.flex:has(> button[id^="tab-"]),.mf-chip-row.flex {
    flex-wrap:nowrap; overflow-x:auto; max-width:100%; overscroll-behavior-x:contain;
  }
  :is(.mf-tabs,[role="tablist"],.mf-chip-row) > :is(button,a,select,.mf-chip,.chip) {
    flex-shrink:0; white-space:nowrap;
  }
  :where(.mf-modal,.modal,.fixed.inset-0[id*="modal"]) { padding:0!important; align-items:stretch; }
  :is(.mf-modal,.modal,.fixed.inset-0[id*="modal"]) > :is(.bg-white,[role="dialog"]) {
    width:100%!important; max-width:100%!important; min-height:100dvh; max-height:100dvh!important; margin:0!important; border-radius:0!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
#login-screen { padding:24px 16px; min-height:100dvh; }
.mf-auth-card { width:100%; border:1px solid var(--mf-border-soft); border-radius:var(--mf-radius-modal)!important; box-shadow:var(--mf-shadow-float)!important; }
.mf-header a:has(.mf-wordmark) { display:inline-flex; align-items:center; min-height:44px; }
.mf-home .tool-card > span { background:var(--mf-primary)!important; color:var(--mf-on-primary)!important; }