/* xp.css — Yarnball CDS theme "XP" (Luna).
   Ben, 2026-08-22: "make all windows XP design like the strategy app in the MMD portal."
   Sibling of the MMD portal's design-language-gsp-xp.css / strategy-xp.css: same era,
   same palette family (Luna blue chrome, #ECE9D8 face, Tahoma, square edges), applied
   to Yarnball's own component vocabulary instead of the portal's gsp-* one.

   This is a THEME, not app styling: it activates only under [data-theme="xp"] (set by
   settings.js applyDesign, exactly like night/enclave) and restyles DS classes and bare
   elements. App code keeps consuming the same semantic classes it always did — no app
   file gains a style attribute, a utility class, or an XP-specific class name.

   Tokens alone barely move this shell (the Unison layer hardcodes pill radii, Inter and
   soft shadows in many components), so the theme also owns the element/component layer
   below the token block — the same approach the portal's XP design language took. */

/* ------------------------------------------------------------------ */
/* tokens                                                              */
[data-theme="xp"]{
  --bg:#ECE9D8; --bg-2:#D6D2C2; --surface:#FFFFFF; --surface-2:#F4F3EE;
  --ink:#000000; --ink-2:#101010; --mute:#4A4A4A; --faint:#7A7568;
  --line:#ACA899; --line-soft:#D8D4C8;
  --accent:#0A5BC4; --accent-soft:#D6DFF7; --teal:#0A5BC4; --trust-green:#3F8F3F;
  --on-accent:#FFFFFF; --on-ink:#FFFFFF;
  --paper:#FFFFFF; --paper-2:#F4F3EE; --ink-soft:#101010;
  --display:Tahoma,"Segoe UI",Verdana,sans-serif;
  --ui:Tahoma,"Segoe UI",Verdana,sans-serif;
  --mono:"Courier New",ui-monospace,monospace;
  --font-body-serif:Tahoma,"Segoe UI",Verdana,sans-serif;
  --r:0px; --r-sm:0px; --r-xs:0px; --r-pill:0px;
  --shadow:none; --shadow-sm:none;

  /* theme-private chrome recipes — every XP surface below draws from these */
  --xp-luna:linear-gradient(180deg,#0997ff 0%,#0053ee 8%,#0050ee 40%,#0468f0 88%,#0054e6 94%,#003fd4 100%);
  --xp-luna-flat:linear-gradient(180deg,#0a5bc4 0%,#0a246a 100%);
  --xp-face:linear-gradient(180deg,#fff 0%,#f2f1eb 46%,#dfdac9 100%);
  --xp-face-hot:linear-gradient(180deg,#fff 0%,#faeecb 46%,#f2ce78 100%);
  --xp-green:linear-gradient(180deg,#87d84f 0%,#5ab52f 45%,#3f8f24 100%);
  --xp-sel:#316AC5;
}

/* ------------------------------------------------------------------ */
/* the desktop the window sits on (Bliss, drawn — no bitmap)           */
[data-theme="xp"] body{
  height:100dvh; overflow:hidden; padding:6px;
  background:
    radial-gradient(120% 58% at 50% 116%, #6f9b3f 0%, #58832f 36%, rgba(88,131,47,0) 68%),
    linear-gradient(180deg,#1c5fb5 0%,#3f86d8 40%,#7db3e8 64%,#b7d8f2 77%,#8fb96a 78%,#6f9b3f 100%);
  background-repeat:no-repeat; background-attachment:fixed; background-size:cover;
  font-family:var(--ui);
}
/* the window is sized off the viewport, so the chain down to it must carry the
   height — without this the frame collapses to its own content and floats as a
   strip on the desktop */
[data-theme="xp"]{height:100%}
[data-theme="xp"] #root{height:100%;display:flex;flex-direction:column;min-height:0}

/* the app is one XP window on that desktop */
[data-theme="xp"] .yarnball-app{
  background:#ECE9D8;
  color:#000; font-family:var(--ui); font-weight:400; font-size:12px; letter-spacing:0;
  border:3px solid #0053ee; border-radius:7px 7px 4px 4px;
  height:100%; margin:0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
[data-theme="xp"] .yarnball-shell{flex:1;min-height:0;height:auto}

/* titlebar: the app's own top strip becomes real Luna chrome */
[data-theme="xp"] .top{
  background:var(--xp-luna);
  border-radius:4px 4px 0 0; border:0;
  margin:0; padding:2px 4px 3px; max-width:none;
  min-height:29px; align-items:center; gap:8px; flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="xp"] .brand{gap:7px;padding-left:3px}
[data-theme="xp"] .mark{width:16px;height:16px;border-radius:2px}
[data-theme="xp"] .word,[data-theme="xp"] .word em{
  font-family:var(--ui); font-size:13px; font-weight:700; color:#fff;
  letter-spacing:0; text-shadow:1px 1px 1px rgba(0,0,0,.45);
}
[data-theme="xp"] .tag{
  color:#dbe8ff; border-left:1px solid rgba(255,255,255,.35);
  font-family:var(--ui); font-size:10px; letter-spacing:.02em; text-transform:none;
  padding-left:8px; margin-left:2px; text-shadow:1px 1px 1px rgba(0,0,0,.35);
}
[data-theme="xp"] .whoami{
  font-family:var(--ui); font-size:10px; color:#e6efff; letter-spacing:0;
  text-shadow:1px 1px 1px rgba(0,0,0,.35);
}

/* the titlebar's own buttons read as XP caption buttons, not pills */
[data-theme="xp"] .top .btn,
[data-theme="xp"] .top .icbtn{
  border:1px solid #0b3fa8; border-radius:3px;
  background:linear-gradient(180deg,#7fb5ff 0%,#2f7ae5 48%,#1758c8 100%);
  color:#fff; font-family:var(--ui); font-weight:700; font-size:11px;
  padding:2px 9px; box-shadow:inset 1px 1px 0 rgba(255,255,255,.5); text-shadow:1px 1px 1px rgba(0,0,0,.35);
  transform:none; min-height:19px;
}
[data-theme="xp"] .top .btn:hover,
[data-theme="xp"] .top .icbtn:hover{
  background:linear-gradient(180deg,#a8cdff 0%,#4f92ef 48%,#2a6ed6 100%);
  color:#fff; border-color:#0b3fa8; transform:none;
}
[data-theme="xp"] .top .btn.active,
[data-theme="xp"] .top .btn.solid{
  background:linear-gradient(180deg,#1b4fa8 0%,#2f7ae5 60%,#5aa0f2 100%);
  color:#fff; border-color:#0a2f7d;
}

/* the model switch and the security lock ride the caption bar, so they are
   caption chrome too — a white modern pill up there reads as a foreign object */
[data-theme="xp"] .model-toggle-pill{
  background:var(--xp-face); border:1px solid #003c74; border-radius:3px;
  padding:1px 5px; box-shadow:inset 1px 1px 0 #fff; gap:5px;
}
[data-theme="xp"] .model-toggle-side{
  color:#333; font-family:var(--ui); font-size:10px; font-weight:400;
  text-shadow:none; padding:0 2px;
}
[data-theme="xp"] .model-toggle-side.is-current{color:#0a246a;font-weight:700}
[data-theme="xp"] .model-toggle-track{
  background:#fff; border:1px solid #7F9DB9; border-radius:2px;
}
[data-theme="xp"] .model-toggle-knob{
  background:linear-gradient(180deg,#5aa0f2 0%,#0a5bc4 100%); border:1px solid #0a246a; border-radius:1px;
}
[data-theme="xp"] .model-lock-standalone{color:#e6efff}
[data-theme="xp"] .model-lock-standalone.is-ok{color:#b7f0c2}

/* ------------------------------------------------------------------ */
/* work surface                                                        */
[data-theme="xp"] .yarnball-main{
  background:#ECE9D8; padding:4px; justify-content:flex-start;
  scrollbar-gutter:stable;
}
[data-theme="xp"] .greet{
  font-family:var(--ui); font-size:19px; font-weight:700; color:#0a246a;
  letter-spacing:0; margin:4px 0 8px; line-height:1.2;
}
[data-theme="xp"] .greet em{color:#0a246a}

/* buttons — the XP silver face, everywhere outside the titlebar */
[data-theme="xp"] .btn,
[data-theme="xp"] .gbtn,
[data-theme="xp"] .submit,
[data-theme="xp"] .icbtn,
[data-theme="xp"] button.btn-compact{
  font-family:var(--ui); font-size:11px; font-weight:400; color:#000;
  border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; padding:3px 11px; min-height:21px;
  transition:none; letter-spacing:0;
}
[data-theme="xp"] .btn:hover,
[data-theme="xp"] .gbtn:hover,
[data-theme="xp"] .submit:hover,
[data-theme="xp"] .icbtn:hover{
  background:var(--xp-face-hot); color:#000; border-color:#003c74; transform:none;
}
[data-theme="xp"] .btn:active,
[data-theme="xp"] .submit:active{background:#d8d0c4;box-shadow:inset 1px 1px 2px rgba(0,0,0,.28)}
[data-theme="xp"] .btn.active{background:#c1d2ee;border-color:#316ac5;box-shadow:inset 1px 1px 2px rgba(0,0,0,.15)}
[data-theme="xp"] .btn.solid{
  background:linear-gradient(180deg,#5aa0f2 0%,#1758c8 100%); color:#fff; border-color:#0a246a;
  text-shadow:1px 1px 1px rgba(0,0,0,.3); font-weight:700;
}
[data-theme="xp"] .btn.solid:hover{background:linear-gradient(180deg,#7fb5ff 0%,#2a6ed6 100%);color:#fff}
[data-theme="xp"] .btn-danger{background:linear-gradient(180deg,#e2685f 0%,#c6362c 45%,#a32018 100%);color:#fff;border-color:#7a1710}
[data-theme="xp"] .btn-link,[data-theme="xp"] .tlink,[data-theme="xp"] a{color:#0a246a;text-decoration:underline}

/* ------------------------------------------------------------------ */
/* conversation — squared XP boxes, the assistant in a captioned frame */
[data-theme="xp"] .row{margin:6px 0;gap:7px}
[data-theme="xp"] .who{
  font-family:var(--ui); font-size:10px; color:#4a4a4a; letter-spacing:0; text-transform:none;
}
[data-theme="xp"] .bub{
  padding:5px 8px; font-size:12px; line-height:1.5; border-radius:0;
}
[data-theme="xp"] .row.yarnball .bub{
  background:#fff; border:1px solid #919b9c; border-radius:0;
  color:#000; box-shadow:none;
}
[data-theme="xp"] .row.me .bub{
  background:var(--xp-luna-flat); color:#fff; border:1px solid #0a246a; border-radius:0;
}
[data-theme="xp"] .row.yarnball .bub pre{
  background:#f6f5ef; border:1px solid #d8d4c8; border-radius:0; padding:5px 7px;
  font-family:var(--mono); font-size:11.5px;
}
[data-theme="xp"] .row.yarnball .bub code{
  background:#f6f5ef; border-radius:0; font-family:var(--mono); font-size:11.5px;
}
[data-theme="xp"] .row.yarnball .bub h1{font-size:13px;color:#0a246a}
[data-theme="xp"] .row.yarnball .bub h2,[data-theme="xp"] .row.yarnball .bub h3{font-size:12px;color:#0a246a}
[data-theme="xp"] .row.yarnball .bub table{border-collapse:collapse;font-size:11px}
[data-theme="xp"] .row.yarnball .bub th{
  background:linear-gradient(180deg,#fefefe,#d8d4c8); border:1px solid #aca899;
  padding:2px 5px; text-align:left; font-weight:700;
}
[data-theme="xp"] .row.yarnball .bub td{border:1px solid #e4e2d8;padding:2px 5px}

/* ------------------------------------------------------------------ */
/* composer — a sunken XP edit field with a real command button        */
[data-theme="xp"] .compwrap{max-width:none;padding:4px;background:#ECE9D8;border-top:1px solid #ACA899}
[data-theme="xp"] .box{
  background:#fff; border:1px solid #7F9DB9; border-radius:0;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.12); padding:2px 3px 2px 6px; gap:4px;
  transition:none;
}
[data-theme="xp"] .box:focus-within{border-color:#0a5bc4;box-shadow:inset 1px 1px 0 rgba(0,0,0,.12)}
[data-theme="xp"] .box textarea{
  font-family:var(--ui); font-size:12px; color:#000; font-weight:400; padding:4px 0; line-height:1.45;
}
[data-theme="xp"] .box textarea::placeholder{color:#8a857a}
[data-theme="xp"] .send{
  width:auto; min-width:56px; height:22px; border-radius:3px;
  border:1px solid #003c74; background:var(--xp-face); color:#000;
  box-shadow:inset 1px 1px 0 #fff; font-family:var(--ui); font-size:11px; font-weight:700;
}
[data-theme="xp"] .send:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .send:active{transform:none;background:#d8d0c4}
[data-theme="xp"] .send:disabled{background:#e6e2d6;color:#9a958a;border-color:#b5b0a2}
[data-theme="xp"] .voicebar{background:#ECE9D8;border:1px solid #ACA899;border-radius:0}
/* the composer's keyboard hint is the window's status strip, not a mono caption */
[data-theme="xp"] .hint{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:none;
  color:#333; margin-top:3px;
}

/* ------------------------------------------------------------------ */
/* panels, cards, tiles — XP group boxes with a captioned head         */
[data-theme="xp"] .mcard,
[data-theme="xp"] .conntile,
[data-theme="xp"] .account-card,
[data-theme="xp"] .secbox,

[data-theme="xp"] .setlink{
  border-bottom:1px solid #e4e2d8; padding:4px 7px;
}
[data-theme="xp"] .setlink:hover{background:#fff7d6}
[data-theme="xp"] .setlink .sl-ic{
  width:20px;height:20px;border-radius:0;background:#ECE9D8;border:1px solid #aca899;color:#0a246a;
}
[data-theme="xp"] .setlink .sl-l{font-size:12px;font-weight:700;color:#000}
[data-theme="xp"] .setlink .sl-v{font-size:11px;color:#4a4a4a}
[data-theme="xp"] .setrow{margin:3px 0;gap:8px}
[data-theme="xp"] .setrow label{font-size:11px;font-weight:400;color:#000}

/* tabs read as XP property-sheet tabs */
[data-theme="xp"] .atabs,[data-theme="xp"] .atabs-compact{
  border-bottom:1px solid #919b9c; background:#ECE9D8; gap:1px; padding:2px 3px 0;
}
[data-theme="xp"] .atab{
  border:1px solid #919b9c; border-bottom:0; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#fdfdfc 0%,#e4e0d3 100%);
  color:#000; font-family:var(--ui); font-size:11px; padding:2px 10px; letter-spacing:0;
}
[data-theme="xp"] .atab[aria-selected="true"],
[data-theme="xp"] .atab.active{background:#fff;color:#0a246a;font-weight:700;margin-bottom:-1px;padding-bottom:3px}

/* ------------------------------------------------------------------ */
/* form controls — sunken fields, XP selection blue                    */
[data-theme="xp"] input:not([type=range]):not([type=checkbox]):not([type=radio]),
[data-theme="xp"] textarea,
[data-theme="xp"] select{
  font-family:var(--ui); font-size:11px; color:#000;
  background:#fff; border:1px solid #7F9DB9; border-radius:0;
  padding:2px 4px; box-shadow:none;
}
/* .fld is the WRAPPER around a label and its input, not a control — bordering
   it drew a second box around every field. The label is a plain Tahoma caption;
   the sunken edge belongs to the input alone. */
[data-theme="xp"] .fld{margin-bottom:6px}
[data-theme="xp"] .fld label{
  font-family:var(--ui); font-size:11px; letter-spacing:0; text-transform:none;
  color:#000; margin:0 0 2px 0;
}
[data-theme="xp"] .fld input{
  padding:2px 4px; font-size:11px; border:1px solid #7F9DB9; border-radius:0; box-shadow:none;
}
[data-theme="xp"] .fld input:focus{box-shadow:none}
[data-theme="xp"] input:focus,[data-theme="xp"] textarea:focus,[data-theme="xp"] select:focus{
  outline:1px dotted #0a246a; outline-offset:1px; border-color:#0a5bc4;
}
[data-theme="xp"] ::selection{background:var(--xp-sel);color:#fff}

/* ------------------------------------------------------------------ */
/* dialogs — a real XP dialog: Luna caption, #ECE9D8 body, sunk edge   */
/* the DS Modal is .modal (backdrop) > .mcard (the dialog) > h3 + p.s + body */
[data-theme="xp"] .modal{background:rgba(0,0,0,.28)}
[data-theme="xp"] .modal .mcard{
  background:#ECE9D8; border:3px solid #0053ee; border-radius:7px 7px 4px 4px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); padding:0; overflow:hidden;
}
/* ModalShell renders the close button BEFORE the h3, so the caption cannot be
   matched as :first-child — it is simply "the card's h3" */
[data-theme="xp"] .modal .mcard > h3,
[data-theme="xp"] .modal-title,
[data-theme="xp"] .modal-head{
  background:var(--xp-luna); color:#fff; font-family:var(--ui); font-size:12px; font-weight:700;
  padding:3px 7px; margin:0; border-radius:2px 2px 0 0; text-shadow:1px 1px 1px rgba(0,0,0,.4);
  letter-spacing:0;
}
[data-theme="xp"] .modal .mcard > p.s{
  margin:0; padding:6px 8px 2px; font-size:11px; color:#000;
}
[data-theme="xp"] .modal .mcard > *:not(h3):not(p.s){padding-left:8px;padding-right:8px}
[data-theme="xp"] .modal .mcard > *:last-child{padding-bottom:8px}

/* starter suggestions are commands, so they read as XP command buttons */
[data-theme="xp"] .starter-chips{gap:4px;justify-content:flex-start}
[data-theme="xp"] .starter-chip{
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; font-family:var(--ui); font-size:11px; font-weight:400;
  color:#000; padding:3px 11px; letter-spacing:0;
}
[data-theme="xp"] .starter-chip:hover{background:var(--xp-face-hot);border-color:#003c74;color:#000}
/* the card's own × (ModalShell) is the caption's close box, so it sits in the
   caption band rather than floating over the body as a silver square */
[data-theme="xp"] .modal .mcard > .modal-close-btn{
  position:absolute; top:4px; right:5px; z-index:2;
  border:1px solid #7a1710; border-radius:2px; color:#fff;
  background:linear-gradient(180deg,#e2685f 0%,#c6362c 45%,#a32018 100%);
  box-shadow:none; min-width:19px; width:19px; height:16px; padding:0;
}
/* the DS icon renders at 16px, which fills the whole close box and reads as a
   plain red square — an XP close box is a small cross inside the chrome */
[data-theme="xp"] .modal .mcard > .modal-close-btn svg{
  width:11px; height:11px; flex:none; display:block; margin:auto;
  stroke:#fff; color:#fff; stroke-width:3;
}
[data-theme="xp"] .modal .mcard > .modal-close-btn:hover{
  background:linear-gradient(180deg,#f08b83 0%,#d4483e 45%,#b32a21 100%); color:#fff;
  border-color:#7a1710;
}
[data-theme="xp"] .modal .mcard{position:relative}

/* the maximize control is a caption button too — app-extensions pins it at
   30x30, top:12px right:48px, which parks it below a 21px Luna caption and on
   top of the window's own action row (seen over "Delete" on the document
   window, 2026-08-22). Sit it beside the close box, at caption-button size. */
[data-theme="xp"] .modal .mcard > .modal-maximize-btn{
  top:4px; right:27px; width:19px; min-width:19px; height:16px; padding:0;
  border:1px solid #0b3fa8; border-radius:2px;
  background:linear-gradient(180deg,#7fb5ff 0%,#2f7ae5 48%,#1758c8 100%);
  color:#fff; box-shadow:inset 1px 1px 0 rgba(255,255,255,.5);
}
[data-theme="xp"] .modal .mcard > .modal-maximize-btn:hover{
  background:linear-gradient(180deg,#a8cdff 0%,#4f92ef 48%,#2a6ed6 100%);
  color:#fff; border-color:#0b3fa8;
}
[data-theme="xp"] .modal .mcard > .modal-maximize-btn svg{
  width:10px; height:10px; flex:none; display:block; margin:auto;
  stroke:#fff; color:#fff; stroke-width:2.5;
}
[data-theme="xp"] .mclosebtn{
  border:1px solid #7a1710; border-radius:2px; color:#fff;
  background:linear-gradient(180deg,#e2685f 0%,#c6362c 45%,#a32018 100%);
  min-width:17px; height:16px; padding:0 4px; font-size:10px; font-weight:700; box-shadow:none;
}
[data-theme="xp"] .mclosebtn:hover{background:linear-gradient(180deg,#f08b83 0%,#d4483e 45%,#b32a21 100%);color:#fff}

/* ------------------------------------------------------------------ */
/* lists and tables — SAP-B1-era grid                                  */
[data-theme="xp"] table{border-collapse:collapse;font-size:11px}
[data-theme="xp"] th{
  background:linear-gradient(180deg,#fefefe,#d8d4c8); border:1px solid #aca899;
  padding:2px 5px; text-align:left; font-weight:700; color:#000;
}
[data-theme="xp"] td{border-right:1px solid #e4e2d8;border-bottom:1px solid #e4e2d8;padding:2px 5px}
[data-theme="xp"] tbody tr:nth-child(even) td{background:#f6f5ef}
[data-theme="xp"] tbody tr:hover td{background:#fff7d6}

/* chat history / nav panel = XP Explorer task pane */
[data-theme="xp"] .chat-nav-panel{
  background:#ECE9D8; border:1px solid #0a246a; border-radius:0; box-shadow:0 6px 18px rgba(0,0,0,.4);
}
[data-theme="xp"] .chat-nav-panel-label{
  background:var(--xp-luna-flat); color:#fff; font-weight:700; font-size:11px;
  padding:2px 6px; letter-spacing:0; text-transform:none;
}
[data-theme="xp"] .chat-nav-panel-item{border-bottom:1px dotted #d8d4c8;padding:3px 6px;border-radius:0}
[data-theme="xp"] .chat-nav-panel-item:hover{background:#c1d2ee}
[data-theme="xp"] .chat-nav-panel-item-title{font-size:11px;color:#000}
[data-theme="xp"] .chat-nav-panel-item-time{font-size:10px;color:#4a4a4a}

/* footer becomes the window status bar */
[data-theme="xp"] .app-footer{
  background:#ECE9D8; border-top:1px solid #ACA899; padding:2px 6px; border-radius:0;
}
[data-theme="xp"] .app-footer-text{
  font-family:var(--ui); font-size:10px; color:#333;
  border:1px inset #d4d0c8; padding:0 6px; display:inline-block;
}

/* XP scrollbars */
[data-theme="xp"] *{scrollbar-width:auto;scrollbar-color:#a6c3ec #ECE9D8}
[data-theme="xp"] ::-webkit-scrollbar{width:16px;height:16px}
[data-theme="xp"] ::-webkit-scrollbar-track{background:#f1efe2;border-left:1px solid #d5d0be}
[data-theme="xp"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#f0f6ff 0%,#b7d1f4 30%,#7fa9e4 100%);
  border:1px solid #4a76c0; border-radius:2px;
}
[data-theme="xp"] ::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,#fff 0%,#cfe1fa 30%,#96bcec 100%);
}

/* the Unison layer's soft chrome has no place here */
[data-theme="xp"] .mcard,
[data-theme="xp"] .box,
[data-theme="xp"] .btn,
[data-theme="xp"] .bub,
[data-theme="xp"] .modal{backdrop-filter:none}