/* aqua.css — Yarnball CDS theme "Aqua".
   macOS. A translucent rail, selection in system blue, hairline separators and soft
   radii. Reads as a native Mac app rather than a website living in a window.

   Same contract as xp.css and letterpress.css: this is a THEME, not app styling. Every
   selector carries [data-theme="aqua"]; 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="aqua"]{
  --bg:#F5F5F7; --bg-2:#ECECEF; --surface:#FFFFFF; --surface-2:#FAFAFC;
  --ink:#1D1D1F; --ink-2:#2C2C2E; --mute:#6E6E73; --faint:#8E8E93;
  --line:#DCDCDF; --line-soft:#E8E8EB;
  --accent:#007AFF; --accent-soft:#EEF5FF; --teal:#007AFF; --trust-green:#28A745;
  --on-accent:#FFFFFF; --on-ink:#FFFFFF;
  --paper:#FFFFFF; --paper-2:#FAFAFC; --ink-soft:#2C2C2E;
  --display:-apple-system,"SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --ui:-apple-system,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --font-body-serif:-apple-system,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --r:10px; --r-sm:6px; --r-xs:6px; --r-pill:999px;
  --shadow:0 12px 32px rgba(0,0,0,.14); --shadow-sm:0 1px 3px rgba(0,0,0,.07);
}

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

}

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

/* ------------------------------------------------------------------ */
/* buttons                                                             */
[data-theme="aqua"] .btn{
  background:#FFFFFF; color:var(--ink); border:1px solid #D2D2D6; 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="aqua"] .btn:hover{ background:#F7F7F9; }
[data-theme="aqua"] .btn:active{ background:#ECECEF; }
[data-theme="aqua"] .btn.active{ background:#ECECEF; }
[data-theme="aqua"] .btn.solid{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:500; }
[data-theme="aqua"] .btn.solid:hover{ background:#0062CC; border-color:#0062CC; }
[data-theme="aqua"] .btn-danger{ background:transparent; border-color:var(--accent); color:var(--accent); }
[data-theme="aqua"] .btn-link{ background:transparent; border:0; color:var(--accent); }
[data-theme="aqua"] .icbtn,
[data-theme="aqua"] .gbtn{ background:#FFFFFF; border:1px solid #D2D2D6; border-radius:var(--r-sm); color:var(--ink); box-shadow:none; }
[data-theme="aqua"] .icbtn:hover,
[data-theme="aqua"] .gbtn:hover{ background:#F7F7F9; }

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

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

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

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

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

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

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