/* fluent.css — Yarnball CDS theme "Fluent".
   Windows 11. Soft cards on a mica ground, one confident blue, generous corners. The one
   that will look right on any work laptop and surprise nobody — which is a virtue when the
   product is asking someone to trust it with their mail.

   Same contract as xp.css and letterpress.css: this is a THEME, not app styling. Every
   selector carries [data-theme="fluent"]; the other skins are untouched. It restyles DS
   classes that already exist — no app file gains a style attribute, a utility class, or a
   theme-specific class name. Tokens alone do not move the shell far enough, so this file
   owns the element layer below the token block too.

   Three traps this file is written around, all found on the XP lane 2026-08-22:
     - the height chain (root, body, #root) must be carried or a full-height window
       collapses to content height;
     - .fld is the label+input WRAPPER, so bordering it double-boxes every field — the
       border belongs on .box alone;
     - app-extensions.css hard-codes .modal-maximize-btn geometry, so a theme must not
       assume it can reposition the modal head. */

/* ------------------------------------------------------------------ */
/* tokens                                                              */
[data-theme="fluent"]{
  --bg:#F3F3F3; --bg-2:#EAEAEA; --surface:#FFFFFF; --surface-2:#F9F9F9;
  --ink:#1B1B1B; --ink-2:#2B2B2B; --mute:#616161; --faint:#8A8A8A;
  --line:#E5E5E5; --line-soft:#EFEFEF;
  --accent:#0067C0; --accent-soft:#EDF4FC; --teal:#0067C0; --trust-green:#0F7B0F;
  --on-accent:#FFFFFF; --on-ink:#FFFFFF;
  --paper:#FFFFFF; --paper-2:#F9F9F9; --ink-soft:#2B2B2B;
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --ui:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --font-body-serif:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Code","Consolas",ui-monospace,monospace;
  --r:8px; --r-sm:4px; --r-xs:4px; --r-pill:999px;
  --shadow:0 8px 24px rgba(0,0,0,.10); --shadow-sm:0 1px 2px rgba(0,0,0,.045);
}

/* ------------------------------------------------------------------ */
/* ground + height chain                                               */
[data-theme="fluent"]{ height:100%; }
[data-theme="fluent"] #root{ height:100%; display:flex; flex-direction:column; min-height:0; }
[data-theme="fluent"] body{
  height:100%; min-height:0; background:var(--bg); color:var(--ink); font-family:var(--ui);

}

/* ------------------------------------------------------------------ */
/* brand + headings                                                    */
[data-theme="fluent"] .brand,
[data-theme="fluent"] .mark{ font-family:var(--display); font-weight:600; color:var(--ink); letter-spacing:-.01em; }
[data-theme="fluent"] .greet{ font-family:var(--display); color:var(--ink); font-weight:600; }

/* ------------------------------------------------------------------ */
/* buttons                                                             */
[data-theme="fluent"] .btn{
  background:#FDFDFD; color:var(--ink); border:1px solid #D6D6D6; border-radius:var(--r-sm);
  font-family:var(--ui); box-shadow:0 1px 1px rgba(0,0,0,.04); transition:background .12s ease,border-color .12s ease;
}
[data-theme="fluent"] .btn:hover{ background:#F5F5F5; }
[data-theme="fluent"] .btn:active{ background:#EDEDED; }
[data-theme="fluent"] .btn.active{ background:#EDEDED; }
[data-theme="fluent"] .btn.solid{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
[data-theme="fluent"] .btn.solid:hover{ background:#005BA8; border-color:#005BA8; }
[data-theme="fluent"] .btn-danger{ background:transparent; border-color:var(--accent); color:var(--accent); }
[data-theme="fluent"] .btn-link{ background:transparent; border:0; color:var(--accent); }
[data-theme="fluent"] .icbtn,
[data-theme="fluent"] .gbtn{ background:#FDFDFD; border:1px solid #D6D6D6; border-radius:var(--r-sm); color:var(--ink); box-shadow:none; }
[data-theme="fluent"] .icbtn:hover,
[data-theme="fluent"] .gbtn:hover{ background:#F5F5F5; }

/* ------------------------------------------------------------------ */
/* fields — border on .box only, never on the .fld wrapper             */
[data-theme="fluent"] .fld{ background:transparent; border:0; box-shadow:none; font-family:var(--ui); color:var(--mute); }
[data-theme="fluent"] .box{ background:#FFFFFF; border:1px solid #D6D6D6; border-radius:var(--r-xs); box-shadow:none; color:var(--ink); }
[data-theme="fluent"] .box:focus-within{ border-color:var(--accent); border-bottom-width:2px; outline:none; }

/* ------------------------------------------------------------------ */
/* cards, tiles, modals                                                */
[data-theme="fluent"] .mcard,
[data-theme="fluent"] .conntile,
[data-theme="fluent"] .account-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
[data-theme="fluent"] .modal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
[data-theme="fluent"] .modal-head{ background:var(--surface-2); border-bottom:1px solid var(--line); }
[data-theme="fluent"] .modal-title{ font-family:var(--display); font-weight:600; color:var(--ink); }
[data-theme="fluent"] .mclosebtn{ background:transparent; border:0; color:var(--mute); }
[data-theme="fluent"] .mclosebtn:hover{ color:var(--ink); }

/* ------------------------------------------------------------------ */
/* chat                                                                */
[data-theme="fluent"] .row,
[data-theme="fluent"] .bub{ font-family:var(--ui); color:var(--ink); box-shadow:none; }
[data-theme="fluent"] .row.me .bub{ background:var(--accent); color:var(--on-accent); border-radius:var(--r); }
[data-theme="fluent"] .row.yarnball .bub{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
[data-theme="fluent"] .compwrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }

/* ------------------------------------------------------------------ */
/* left rail                                                           */
[data-theme="fluent"] .chat-nav-panel{ background:var(--bg); border-right:0; box-shadow:none; }
[data-theme="fluent"] .chat-nav-panel-label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
[data-theme="fluent"] .chat-nav-panel-item{ background:transparent; border-radius:var(--r-sm); color:var(--ink); }
[data-theme="fluent"] .chat-nav-panel-item:hover{ background:var(--bg-2); }
[data-theme="fluent"] .chat-nav-panel-item-title{ font-family:var(--ui); color:var(--ink); }
[data-theme="fluent"] .chat-nav-panel-item-time{ font-family:var(--mono); font-size:.7rem; color:var(--mute); }

/* ------------------------------------------------------------------ */
/* tabs                                                                */
[data-theme="fluent"] .atabs{ background:transparent; border-bottom:1px solid var(--line); gap:4px; }
[data-theme="fluent"] .atab{ background:transparent; border:0; border-radius:var(--r-sm); color:var(--mute); font-family:var(--ui); }
[data-theme="fluent"] .atab.active{ background:var(--surface); color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }

/* ------------------------------------------------------------------ */
/* model switch                                                        */
[data-theme="fluent"] .model-toggle-track{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:none; }
[data-theme="fluent"] .model-toggle-knob{ background:var(--accent); border-radius:var(--r-pill); box-shadow:none; }
[data-theme="fluent"] .model-toggle-pill{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--mute); font-family:var(--mono); font-size:.72rem; }
[data-theme="fluent"] .model-toggle-side{ font-family:var(--mono); font-size:.72rem; color:var(--mute); }
[data-theme="fluent"] .model-toggle-side.is-current{ color:var(--ink); }
[data-theme="fluent"] .model-lock-standalone{ background:transparent; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--mute); font-family:var(--mono); font-size:.72rem; }
[data-theme="fluent"] .model-lock-standalone.is-ok{ border-color:var(--accent); color:var(--accent); }

/* ------------------------------------------------------------------ */
/* small print                                                         */
[data-theme="fluent"] .hint{ color:var(--mute); font-family:var(--ui); }
[data-theme="fluent"] .app-footer{ background:transparent; border-top:1px solid var(--line); }
[data-theme="fluent"] .app-footer-text{ font-family:var(--mono); font-size:.7rem; color:var(--mute); }
[data-theme="fluent"] :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }