/* xp-work.css — Yarnball CDS theme "XP" (Luna), part two: the work surfaces.
   Companion to xp.css, which took the app shell (window frame, Luna titlebar,
   buttons, conversation, composer, dialogs, scrollbars). This file takes
   everything document-shaped: the file browser and its rows, the document tree,
   the canvas and viewer panes, the dock and its toolbars, the doc preview, the
   PDF/document editor, the attachment browser, telepathy and the work board.

   These are the screens where the era actually pays off, so they are built to
   ONE rule borrowed from Explorer and SAP Business One: every working surface is
   a captioned pane — caption strip, toolbar strip, dense white list or grid, and
   a status strip at the foot. Nothing floats; nothing is a card.

   Three levels of chrome, used consistently, so hierarchy reads at a glance:
     Luna blue caption (--xp-luna)  a thing that IS a window — a dialog, the
                                    preview, the editor. White bold title, and
                                    the buttons that live on it become caption
                                    buttons, exactly as xp.css did for .top .btn.
     Pale blue caption (--xp-cap)   a pane DOCKED inside a window — files, tree,
                                    canvas, viewer, property groups. Dark
                                    #0a246a title, so silver buttons sit on it.
     #ECE9D8 face                   toolbars, status strips, splitters.
     #FFFFFF                        the work itself: lists, trees, grids, pages.
     #808080                        the MDI workspace behind a document page.
                                    Word 2003 and Acrobat 6 both did exactly
                                    this, and it is what makes a white page read
                                    as paper instead of as a panel.

   Same contract as xp.css: this is a THEME. Every selector carries
   [data-theme="xp"], no app file changes, and only classes that are really
   rendered are styled — the dead ones are listed at the foot of this file.

   Loads after _ds_bundle, app-extensions, canvas, mobile-ergonomics and xp.css,
   so equal-specificity overrides land. Where a base rule outranks one of these
   on specificity it is restated at that weight instead; see STATE OVERRIDES. */

/* ------------------------------------------------------------------ */
/* theme-private recipes, on top of the ones xp.css already defines     */
[data-theme="xp"]{
  /* the docked-pane caption — the same gradient the portal's XP design
     language uses for .gsp-mcol-head, so the two apps read as one era */
  --xp-cap:linear-gradient(180deg,#fefefe 0%,#d6dff7 100%);
  /* group-box / column caption, one step quieter than --xp-cap */
  --xp-cap-quiet:linear-gradient(180deg,#fefefe 0%,#d8d4c8 100%);
  /* the caption button, lifted from xp.css's .top .btn so both files agree */
  --xp-capbtn:linear-gradient(180deg,#7fb5ff 0%,#2f7ae5 48%,#1758c8 100%);
  --xp-capbtn-hot:linear-gradient(180deg,#a8cdff 0%,#4f92ef 48%,#2a6ed6 100%);
  /* the MDI client area a document page sits on */
  --xp-workspace:#808080;
}

/* ------------------------------------------------------------------ */
/* THE DOCK — docked panes, not viewport overlays                      */
/* .right-dock and .tree-drawer are position:fixed against the viewport, which
   under Unison is right: the app fills the screen. Under XP the app is a WINDOW
   with 6px of desktop around it and a 3px frame, so a viewport-pinned dock hangs
   over the window edge onto the wallpaper. Inset both by 6+3=9px, and past the
   29px Luna titlebar at the top, so they dock inside the frame like real panes. */
[data-theme="xp"] .right-dock{top:38px;right:9px;bottom:9px;transition:none}
[data-theme="xp"] .tree-drawer{top:38px;left:9px;bottom:9px;transition:none}
[data-theme="xp"] .right-dock-panels{
  background:#ECE9D8; border-left:1px solid #919b9c; transition:none;
}

/* the splitters between panes: an XP sizing bar, not an accent-coloured line */
[data-theme="xp"] .right-dock-panels > .dock-resize,
[data-theme="xp"] .right-dock-panels > .viewer-dock-resize,
[data-theme="xp"] .editor-chat-resize{
  background:#ECE9D8; border-left:1px solid #fff; border-right:1px solid #aca899;
}
[data-theme="xp"] .right-dock-panels > .dock-resize:hover,
[data-theme="xp"] .right-dock-panels > .dock-resize:focus-visible,
[data-theme="xp"] .right-dock-panels > .viewer-dock-resize:hover,
[data-theme="xp"] .right-dock-panels > .viewer-dock-resize:focus-visible{
  background:#c1d2ee;
}

/* the collapsed reopen strips read as vertical XP tabs */
[data-theme="xp"] .right-dock-panels > .dock-min-strip{
  background:var(--xp-face); border:1px solid #919b9c; border-right:0;
  color:#0a246a; font-family:var(--ui); font-size:10px; font-weight:700;
  letter-spacing:0; text-transform:none; border-radius:0;
}
[data-theme="xp"] .right-dock-panels > .dock-min-strip:hover{background:var(--xp-face-hot)}
[data-theme="xp"] .dock-files-tab{
  height:20px; border:1px solid #003c74; border-radius:0 0 3px 3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#0a246a; font-family:var(--ui); font-size:10px; font-weight:700;
  letter-spacing:0; text-transform:none; padding:0 8px;
}
[data-theme="xp"] .dock-files-tab:hover{background:var(--xp-face-hot);border-color:#003c74;color:#0a246a}

/* ------------------------------------------------------------------ */
/* FILE BROWSER — an Explorer pane: caption, toolbar, white list        */
/* markup order is .files-drawer > .files-drawer-head + .files-toolbar +
   .files-list, which is already the shape; it just needs the chrome. */
[data-theme="xp"] .files-drawer,
[data-theme="xp"] .files-drawer-sleek{
  background:#ECE9D8; border:1px solid #919b9c; border-radius:0;
  padding:0; gap:0; font-size:11px; font-family:var(--ui); box-shadow:none;
}
[data-theme="xp"] .right-dock-panels > .files-drawer{
  border:1px solid #919b9c; border-right:0;
}

/* the pane caption, with the file count and the storage read-out on it.
   1px 5px / 21px is the shared caption geometry — see the note at .canvas-head. */
[data-theme="xp"] .files-drawer-head{
  background:var(--xp-cap); border-bottom:1px solid #919b9c;
  margin:0; padding:1px 5px; min-height:21px; gap:6px;
}
[data-theme="xp"] .files-drawer-head-title{
  color:#0a246a; font-weight:700; font-size:11px; gap:5px;
}
[data-theme="xp"] .files-drawer-head strong{font-size:11px;font-weight:700;letter-spacing:0}
[data-theme="xp"] .files-drawer-head-title svg{color:#0a246a;width:13px;height:13px}
[data-theme="xp"] .files-drawer-count{
  font-family:var(--ui); font-size:10px; color:#0a246a; letter-spacing:0;
  border:1px solid #aca899; background:#fff; padding:0 4px;
}
/* the disk read-out is a status cell, sunken like every XP status field */
[data-theme="xp"] .files-storage{
  font-family:var(--ui); font-size:10px; color:#333;
  border:1px inset #d4d0c8; background:#ECE9D8; padding:0 4px; gap:3px;
}
[data-theme="xp"] .files-storage svg{color:#0a246a;width:11px;height:11px}
[data-theme="xp"] .files-storage-pct{color:#0a246a;letter-spacing:0;min-width:0}
[data-theme="xp"] .files-storage.is-mid svg,
[data-theme="xp"] .files-storage.is-mid .files-storage-pct{color:#8a5a00}
[data-theme="xp"] .files-storage.is-high svg,
[data-theme="xp"] .files-storage.is-high .files-storage-pct{color:#a00;font-weight:700}

/* the toolbar strip under the caption */
[data-theme="xp"] .files-toolbar{
  background:#ECE9D8; border-bottom:1px solid #aca899;
  padding:2px 3px; margin:0; gap:3px;
}
[data-theme="xp"] .files-drawer .files-toolbar{margin:0}
[data-theme="xp"] .files-filter,
[data-theme="xp"] .files-drawer .files-filter{
  min-height:18px; border:1px solid #7F9DB9; border-radius:0;
  background:#fff; color:#000; font-family:var(--ui); font-size:11px;
  padding:1px 4px;
}
[data-theme="xp"] .files-filter:focus{border-color:#0a5bc4;outline:none}

/* the list itself is the work surface: white, and the only part that scrolls */
[data-theme="xp"] .files-list,
[data-theme="xp"] .files-drawer .files-list{
  background:#fff; border-top:1px solid #fff; gap:0; padding:1px 0 0;
}
/* group headers inside the list read as XP list-view group bands */
[data-theme="xp"] .files-section-label,
[data-theme="xp"] .files-drawer .files-section-label{
  font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:0;
  text-transform:none; color:#0a246a;
  background:#eaeef8; border-top:1px solid #d8d4c8; border-bottom:1px solid #d8d4c8;
  margin:0; padding:1px 5px;
}
[data-theme="xp"] .files-list > .files-section-label:first-child{border-top:0}

/* one row = one file. Full-row hover and full-row XP selection blue. */
[data-theme="xp"] .files-row,
[data-theme="xp"] .files-drawer .files-row{
  border:0; border-radius:0; margin:0; padding:1px 4px; gap:4px;
  align-items:center; min-height:19px;
}
[data-theme="xp"] .files-row:hover,
[data-theme="xp"] .files-drawer .files-row:hover{background:#fff7d6;border:0}
[data-theme="xp"] .files-row-open{
  gap:5px; font-family:var(--ui); font-size:11px; color:#000; border-radius:0;
}
[data-theme="xp"] .files-row-open:hover{color:#000}
/* the 36px rounded tile becomes a 16px Explorer icon — the single change that
   collapses the row from 48px tall to 19px and makes the list read as a list */
[data-theme="xp"] .files-type-icon{
  width:16px; height:16px; border-radius:0;
  background:transparent; border:0; color:#0a246a;
}
[data-theme="xp"] .files-type-icon svg{width:15px;height:15px}
[data-theme="xp"] .files-row-name,
[data-theme="xp"] .files-drawer .files-row-name{font-size:11px;font-weight:400;line-height:1.3}
/* the meta line was indented under a 36px icon; re-hang it under the 16px one */
[data-theme="xp"] .files-row-meta,
[data-theme="xp"] .files-drawer .files-row-meta{
  font-family:var(--ui); font-size:10px; color:#4a4a4a; padding-left:20px; letter-spacing:0;
}
[data-theme="xp"] .files-row-main{gap:0}
[data-theme="xp"] .files-row-rename{
  border:1px solid #0a246a; border-radius:0; background:#fff; color:#000;
  font-family:var(--ui); font-size:11px; padding:0 3px;
}

/* row actions: small flat toolbar buttons that only draw a border on hover */
[data-theme="xp"] .files-row-actions{gap:2px}
[data-theme="xp"] .files-row-action{
  min-height:17px; min-width:17px; padding:0 4px;
  border:1px solid transparent; border-radius:0; background:transparent;
  color:#0a246a; font-family:var(--ui); font-size:10px;
}
[data-theme="xp"] .files-row-action:hover{
  border-color:#316ac5; background:#c1d2ee; color:#0a246a;
}
[data-theme="xp"] .files-row-load{
  min-width:17px; padding:0 4px; border-color:transparent; color:#0a246a; font-weight:700;
}
[data-theme="xp"] .files-row-load-glyph{font-size:12px}
[data-theme="xp"] .files-empty,
[data-theme="xp"] .files-drawer .files-empty{
  font-size:11px; color:#4a4a4a; padding:5px 6px;
}

/* the rename confirmation is a small inline dialog, so it gets dialog chrome */
[data-theme="xp"] .files-rename-confirm{
  border:1px solid #919b9c; border-radius:0; background:#ECE9D8;
  padding:5px 6px; margin:2px 3px; gap:5px;
}
[data-theme="xp"] .files-rename-confirm-text{font-size:11px;color:#000}
[data-theme="xp"] .files-rename-confirm-actions{gap:5px}
[data-theme="xp"] .files-rename-confirm-ok{
  border-color:#0a246a;
  background:linear-gradient(180deg,#5aa0f2 0%,#1758c8 100%);
  color:#fff; font-weight:700;
}

/* the chat-side file strip: an XP toolbar band, not floating pills */
[data-theme="xp"] .chat-files-bar{
  background:#ECE9D8; border-top:1px solid #ACA899; border-bottom:1px solid #ACA899;
  max-width:none; margin:0; padding:2px 4px; gap:4px;
}
[data-theme="xp"] .chat-files-switch{
  min-height:18px; border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#000; font-family:var(--ui); font-size:10px; padding:1px 8px;
}
[data-theme="xp"] .chat-files-switch:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .chat-files-switch.is-on{
  background:#c1d2ee; border-color:#316ac5; color:#0a246a; font-weight:700;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.15);
}
[data-theme="xp"] .chat-files-chips{gap:3px}
[data-theme="xp"] .chat-files-empty{font-size:10px;color:#4a4a4a}

/* ------------------------------------------------------------------ */
/* DOCUMENT TREE — the left drawer as an Explorer folder pane           */
[data-theme="xp"] .canvas-tree,
[data-theme="xp"] .tree-drawer{
  background:#fff; border:1px solid #919b9c; border-radius:0;
  padding:0; gap:0; font-family:var(--ui); font-size:11px; box-shadow:none;
}
[data-theme="xp"] .canvas-tree-head{
  background:var(--xp-cap); border-bottom:1px solid #919b9c;
  padding:1px 5px; min-height:21px; gap:4px; flex-wrap:nowrap;
  position:sticky; top:0; z-index:2;
}
[data-theme="xp"] .canvas-tree-head span{
  font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:0;
  text-transform:none; color:#0a246a;
}
[data-theme="xp"] .canvas-tree .canvas-filter{
  min-height:18px; border:1px solid #7F9DB9; border-radius:0; background:#fff;
  color:#000; font-family:var(--ui); font-size:11px; padding:1px 4px;
  margin:3px 4px; width:auto;
}
[data-theme="xp"] .canvas-tree-empty{font-size:11px;color:#4a4a4a;padding:5px 6px}

/* a tree row. Indented levels carry the dotted guide XP drew down the tree. */
[data-theme="xp"] .canvas-node{
  min-height:17px; padding:1px 4px; gap:4px; border:0; border-radius:0;
  font-family:var(--ui); font-size:11px; line-height:1.3; color:#000;
}
[data-theme="xp"] .canvas-node:hover{background:#fff7d6}
[data-theme="xp"] .canvas-node.active{
  background:var(--xp-sel); color:#fff; border:0; font-weight:400;
}
[data-theme="xp"] .canvas-node.active em,
[data-theme="xp"] .canvas-node.active .canvas-node-ver{color:#dbe8ff}
[data-theme="xp"] .canvas-node.folder{font-weight:700;color:#0a246a}
[data-theme="xp"] .canvas-node.nested{padding-left:16px;border-left:1px dotted #a8a8a8;margin-left:6px}
[data-theme="xp"] .canvas-node.nested-2{padding-left:28px;border-left:1px dotted #a8a8a8;margin-left:6px}
[data-theme="xp"] .canvas-node em{
  font-family:var(--ui); font-size:9px; letter-spacing:0; text-transform:uppercase;
  color:#7A7568; width:22px;
}
[data-theme="xp"] .canvas-node-ver{
  font-family:var(--ui); font-size:9px; font-weight:700; color:#4a4a4a;
}

/* the collapsed reopen rail, and the toggle that folds the tree away */
[data-theme="xp"] .canvas-rail{
  min-width:0; width:auto; max-width:none; padding:4px 3px; gap:4px;
  background:var(--xp-face); border:1px solid #919b9c; border-right:0; border-radius:0;
}
[data-theme="xp"] .canvas-rail:hover{background:var(--xp-face-hot);border-color:#919b9c}
[data-theme="xp"] .canvas-rail span:last-child{
  font-family:var(--ui); font-size:9px; letter-spacing:0; text-transform:uppercase; color:#0a246a;
}
[data-theme="xp"] .canvas-tree-toggle{
  min-height:19px; border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#000; font-family:var(--ui); font-size:10px; padding:1px 7px; gap:4px;
}
[data-theme="xp"] .canvas-tree-toggle:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .canvas-tree-toggle span:last-child{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:none;
}
[data-theme="xp"] .canvas-chevron{color:#0a246a}

/* ------------------------------------------------------------------ */
/* CANVAS PANE — the document window, docked inside the app window      */
[data-theme="xp"] .canvas-pane,
[data-theme="xp"] .canvas-chrome{
  background:#ECE9D8; border:1px solid #919b9c; border-radius:0;
  box-shadow:none; font-family:var(--ui); font-size:11px; line-height:1.4;
}
[data-theme="xp"] .canvas-pane.canvas-popout{border:0}
[data-theme="xp"] .canvas-pane :focus-visible{outline:1px dotted #0a246a;outline-offset:1px}

/* the pane caption: title, subtitle, and the command buttons on one strip.
   Every docked-pane caption in the theme is 1px 5px over a 21px minimum. That
   is not arbitrary: a 19px command button plus 1px above and below comes to
   exactly 21px, so a caption carrying buttons and one carrying only a label
   end up the same height. In split mode the files pane and the viewer sit
   shoulder to shoulder, and their captions have to form one continuous band. */
[data-theme="xp"] .canvas-head{
  background:var(--xp-cap); border-bottom:1px solid #919b9c;
  padding:1px 5px; min-height:21px; gap:5px; align-items:center;
}
/* canvas.css pins the compact viewer's caption at 36px with a three-class
   selector (.viewer-pane.viewer-compact .viewer-head), which outranks the rule
   above; match its shape to keep the band unbroken. */
[data-theme="xp"] .viewer-pane.viewer-compact .viewer-head{
  padding:1px 5px; min-height:21px; gap:5px;
}
[data-theme="xp"] .canvas-title{gap:0}
[data-theme="xp"] .canvas-title strong{
  font-family:var(--ui); font-size:11px; font-weight:700; color:#0a246a; line-height:1.3;
}
[data-theme="xp"] .canvas-title small{
  font-family:var(--ui); font-size:9px; letter-spacing:0; text-transform:none; color:#4a4a4a;
}
[data-theme="xp"] .canvas-title-input{
  border:1px solid transparent; border-radius:0; background:transparent;
  font-family:var(--ui); font-size:11px; font-weight:700; color:#0a246a;
  padding:0 3px; margin:0 -3px;
}
[data-theme="xp"] .canvas-title-input:hover{border-color:#7F9DB9;background:#fff}
[data-theme="xp"] .canvas-title-input:focus{border-color:#0a5bc4;background:#fff;outline:none}
[data-theme="xp"] .canvas-actions{gap:3px}

/* every canvas command is a silver XP button */
[data-theme="xp"] .canvas-action{
  min-height:19px; border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#000; font-family:var(--ui); font-size:11px; font-weight:400;
  padding:1px 9px; line-height:1.2;
}
[data-theme="xp"] .canvas-action:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .canvas-action:active{background:#d8d0c4;box-shadow:inset 1px 1px 2px rgba(0,0,0,.28)}
[data-theme="xp"] .canvas-action.primary{
  background:linear-gradient(180deg,#5aa0f2 0%,#1758c8 100%);
  border-color:#0a246a; color:#fff; font-weight:700;
  text-shadow:1px 1px 1px rgba(0,0,0,.3);
}
[data-theme="xp"] .canvas-action.primary:hover{background:linear-gradient(180deg,#7fb5ff 0%,#2a6ed6 100%);color:#fff}
[data-theme="xp"] .canvas-action.primary em{color:#dbe8ff;opacity:1}
[data-theme="xp"] .canvas-action em{
  font-family:var(--ui); font-size:9px; letter-spacing:0; text-transform:none;
  color:#4a4a4a; margin-right:4px;
}
[data-theme="xp"] .canvas-action.quiet-danger{color:#a00}
[data-theme="xp"] .canvas-action.quiet-danger:hover{color:#a00;border-color:#7a1710}
[data-theme="xp"] .canvas-icon-btn{
  width:19px; height:19px; border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff; color:#0a246a;
}
[data-theme="xp"] .canvas-icon-btn:hover{background:var(--xp-face-hot);border-color:#003c74;color:#0a246a}
[data-theme="xp"] .canvas-icon-btn.is-primary{
  background:linear-gradient(180deg,#5aa0f2 0%,#1758c8 100%); border-color:#0a246a; color:#fff;
}
[data-theme="xp"] .canvas-icon-btn.is-primary:hover{background:linear-gradient(180deg,#7fb5ff 0%,#2a6ed6 100%);color:#fff;opacity:1}

/* the overflow menu is a real XP menu: white, hairline border, hard shadow,
   and a full-bleed selection bar on hover */
[data-theme="xp"] .canvas-menu{
  border:1px solid #aca899; border-radius:0; background:#fff;
  box-shadow:2px 2px 3px rgba(0,0,0,.35); padding:2px; gap:0; min-width:150px;
}
[data-theme="xp"] .canvas-menu-item{
  min-height:18px; border-radius:0; padding:1px 16px 1px 20px;
  font-family:var(--ui); font-size:11px; color:#000;
}
[data-theme="xp"] .canvas-menu-item:hover{background:var(--xp-sel);color:#fff}
[data-theme="xp"] .canvas-menu-item.quiet-danger{color:#a00}
[data-theme="xp"] .canvas-menu-item.quiet-danger:hover{background:var(--xp-sel);color:#fff}

/* the pane body is the work area */
[data-theme="xp"] .canvas-body{background:#fff}
[data-theme="xp"] .canvas-doc{padding:4px 5px;gap:4px;background:#fff}
[data-theme="xp"] .canvas-bar{
  background:#ECE9D8; border-bottom:1px solid #aca899;
  padding:2px 4px; gap:3px; font-family:var(--ui); font-size:11px; color:#333;
}
[data-theme="xp"] .canvas-bar strong{font-size:11px;color:#0a246a;font-weight:700}
[data-theme="xp"] .canvas-note{
  border-left:2px solid #7F9DB9; padding:1px 0 1px 6px; gap:5px;
  font-family:var(--ui); font-size:10px; color:#4a4a4a;
}
[data-theme="xp"] .canvas-note.error{border-left-color:#a33;color:#a00}
[data-theme="xp"] .canvas-note-dense{
  background:#ECE9D8; border-bottom:1px solid #aca899; border-left:0;
  padding:1px 5px; font-size:10px; color:#333;
}
[data-theme="xp"] .canvas-design-line{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:none; color:#4a4a4a;
}
[data-theme="xp"] .canvas-design-line strong{font-size:10px;color:#0a246a}
[data-theme="xp"] .canvas-engine-loading,
[data-theme="xp"] .canvas-engine-fallback{
  font-family:var(--ui); font-size:11px; color:#4a4a4a;
}

/* ------------------------------------------------------------------ */
/* DOCUMENT SURFACES — paper on an MDI workspace                        */
[data-theme="xp"] .canvas-preview,
[data-theme="xp"] .canvas-render{
  border:1px solid #919b9c; border-radius:0; background:#fff;
  padding:10px 12px; font-family:var(--ui); font-size:11.5px; line-height:1.5;
}
[data-theme="xp"] .canvas-preview h1{font-size:15px;font-weight:700;color:#0a246a}
[data-theme="xp"] .canvas-preview h2{font-size:13px;font-weight:700;color:#0a246a}
[data-theme="xp"] .canvas-preview h3{font-size:12px;font-weight:700;color:#0a246a}
[data-theme="xp"] .canvas-preview code{
  font-family:var(--mono); font-size:11px; background:#f6f5ef; border-radius:0; padding:0 3px;
}
[data-theme="xp"] .canvas-preview pre{
  background:#f6f5ef; border:1px solid #d8d4c8; border-radius:0; padding:5px 7px;
}
[data-theme="xp"] .canvas-preview table{font-size:11px}
[data-theme="xp"] .canvas-preview th{
  background:linear-gradient(180deg,#fefefe,#d8d4c8); border:1px solid #aca899;
  padding:2px 5px; font-weight:700;
}
[data-theme="xp"] .canvas-preview td{border:1px solid #e4e2d8;padding:2px 5px}
[data-theme="xp"] .canvas-frame{border:1px solid #919b9c;border-radius:0;background:#fff}
[data-theme="xp"] .canvas-editor{
  border:1px solid #7F9DB9; border-radius:0; background:#fff; color:#000;
  padding:5px 7px; font-family:var(--ui); font-size:11.5px; line-height:1.5;
}
[data-theme="xp"] .canvas-editor.mono{font-family:var(--mono);font-size:11.5px}
[data-theme="xp"] .canvas-editor-page{padding:14px 18px;background:#fff}
[data-theme="xp"] .canvas-split{gap:4px}
/* rendered pages sit on the grey workspace with a hard XP page edge */
[data-theme="xp"] .canvas-pages{gap:8px;background:var(--xp-workspace);padding:8px}
[data-theme="xp"] .canvas-page{
  border:1px solid #404040; border-radius:0; background:#fff;
  box-shadow:2px 2px 3px rgba(0,0,0,.4);
}
[data-theme="xp"] .canvas-page-row{gap:3px}
[data-theme="xp"] .canvas-page-row strong{
  font-family:var(--ui); font-size:10px; color:#4a4a4a; font-weight:700;
}
[data-theme="xp"] .canvas-slides{gap:5px}
[data-theme="xp"] .canvas-slide-card{
  border:1px solid #919b9c; border-radius:0; background:#fff;
  box-shadow:none; padding:4px 7px; gap:1px;
}
[data-theme="xp"] .canvas-slide-card em{
  font-family:var(--ui); font-size:9px; letter-spacing:0; text-transform:uppercase; color:#7A7568;
}
[data-theme="xp"] .canvas-slide-card strong{font-size:11px;font-weight:700;color:#0a246a}
[data-theme="xp"] .canvas-slide-card span{font-size:11px;color:#000}
[data-theme="xp"] .office-preview-host{background:#fff}

/* the rewrite panel is a group box */
[data-theme="xp"] .canvas-rewrite{
  border:1px solid #919b9c; border-radius:0; background:#ECE9D8; padding:4px 6px; gap:4px;
}
[data-theme="xp"] .canvas-rewrite input{
  min-height:19px; border:1px solid #7F9DB9; border-radius:0; background:#fff;
  padding:1px 4px; font-family:var(--ui); font-size:11px;
}
[data-theme="xp"] .canvas-diff{gap:3px;font-size:11px;line-height:1.45}
[data-theme="xp"] .canvas-diff-row{
  border:1px solid #d8d4c8; border-radius:0; padding:2px 5px; background:#fff;
}
[data-theme="xp"] .canvas-diff-row.was{background:#f6f5ef;color:#7A7568}
[data-theme="xp"] .canvas-diff-row.now{border-color:#4a7c2f;background:#eef7e8}

/* ------------------------------------------------------------------ */
/* SPREADSHEET — the SAP-B1 grid, straight out of the portal reference  */
[data-theme="xp"] .canvas-grid{
  border:1px solid #919b9c; border-radius:0; background:#fff;
}
[data-theme="xp"] .canvas-grid table{font-size:11px}
[data-theme="xp"] .canvas-grid th,
[data-theme="xp"] .canvas-grid td{border:1px solid #e4e2d8;min-width:72px}
[data-theme="xp"] .canvas-grid thead th,
[data-theme="xp"] .canvas-grid tbody th,
[data-theme="xp"] .canvas-grid-corner{
  background:linear-gradient(180deg,#fefefe,#d8d4c8); border:1px solid #aca899;
  font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:0;
  color:#000; padding:1px 4px;
}
[data-theme="xp"] .canvas-grid-dense thead th{padding:1px 3px;font-size:10px}
[data-theme="xp"] .canvas-cell{
  font-family:var(--ui); font-size:11px; min-height:18px; padding:1px 4px; color:#000;
}
[data-theme="xp"] .canvas-cell:focus{
  outline:1px solid var(--xp-sel); outline-offset:-1px; background:#fff;
}
[data-theme="xp"] .canvas-cell.dirty{background:#fff7d6;font-weight:700}
[data-theme="xp"] .viewer-sheet-wrap{background:#ECE9D8;padding:2px 3px}
[data-theme="xp"] .viewer-sheet-wrap .canvas-grid-dense .canvas-cell{font-size:11px;min-height:18px;padding:1px 4px}

/* ------------------------------------------------------------------ */
/* VERSION, TEMPLATE AND DOCUMENT LISTS — dense rows, dotted rules      */
[data-theme="xp"] .canvas-versions{gap:0;border:1px solid #919b9c;background:#fff}
[data-theme="xp"] .canvas-version{
  border:0; border-bottom:1px dotted #d8d4c8; border-radius:0;
  padding:1px 5px; gap:6px; font-family:var(--ui); font-size:11px; min-height:18px;
}
[data-theme="xp"] .canvas-version:hover{background:#fff7d6}
[data-theme="xp"] .canvas-version.current{
  background:#d6dff7; border-bottom-color:#919b9c; color:#0a246a; font-weight:700;
}
[data-theme="xp"] .canvas-version em{font-family:var(--ui);font-size:10px;color:#4a4a4a}
[data-theme="xp"] .canvas-templates{gap:0;border:1px solid #919b9c;background:#fff}
[data-theme="xp"] .canvas-template-row{
  border:0; border-bottom:1px dotted #d8d4c8; border-radius:0;
  padding:1px 5px; gap:6px; font-family:var(--ui); font-size:11px; min-height:19px;
}
[data-theme="xp"] .canvas-template-row:hover{background:#fff7d6}
[data-theme="xp"] .canvas-template-row > span:first-child{font-size:11px}
[data-theme="xp"] .canvas-template-row em{
  font-family:var(--ui); font-size:9px; letter-spacing:0; text-transform:uppercase; color:#7A7568;
}
[data-theme="xp"] .canvas-template-active{
  background:#d6dff7; border-bottom-color:#919b9c; color:#0a246a; font-weight:700;
}
[data-theme="xp"] .canvas-template-active em{color:#0a246a}
[data-theme="xp"] .canvas-template-actions{gap:3px}

/* the "open in canvas" card in the conversation: a dense XP box */
[data-theme="xp"] .canvas-card{
  border:1px solid #919b9c; border-radius:0; background:#fff;
  padding:2px 6px; gap:6px; margin-top:4px;
}
[data-theme="xp"] .canvas-card:hover{background:#fff7d6;border-color:#919b9c}
[data-theme="xp"] .canvas-card strong{font-size:11px;font-weight:700;color:#0a246a}
[data-theme="xp"] .canvas-card small{
  font-family:var(--ui); font-size:9px; letter-spacing:0; text-transform:uppercase; color:#7A7568;
}
[data-theme="xp"] .canvas-card-text{gap:0}
[data-theme="xp"] .canvas-mobile-recent{font-size:11px;color:#4a4a4a}

/* ------------------------------------------------------------------ */
/* VIEWER PANE + DOCK PANE HEADS                                        */
/* .dock-pane-head is worn together with .canvas-head / .files-drawer-head, so
   the caption chrome above already covers it; this is the toolbar side. */
[data-theme="xp"] .viewer-pane{background:#ECE9D8}
[data-theme="xp"] .viewer-pane.viewer-compact .canvas-title strong{font-size:11px;font-weight:700;color:#0a246a}
[data-theme="xp"] .viewer-pane.viewer-compact .canvas-title small{font-size:9px;color:#4a4a4a}
[data-theme="xp"] .viewer-body{background:#fff}
[data-theme="xp"] .dock-pane-actions{gap:3px}
[data-theme="xp"] .dock-head-btn{
  min-width:19px; padding:1px 6px; border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#0a246a; font-family:var(--ui); font-size:10px;
}
[data-theme="xp"] .dock-head-btn:hover{background:var(--xp-face-hot);color:#0a246a}
/* the design picker is an XP combo: sunken white field, no accent ring */
[data-theme="xp"] .viewer-design-select{
  min-height:19px; border:1px solid #7F9DB9; border-radius:0; background:#fff;
  color:#000; font-family:var(--ui); font-size:11px; padding:0 3px;
}
[data-theme="xp"] .viewer-design-select:focus-visible{outline:1px dotted #0a246a;outline-offset:1px}
/* the download / delete actions on the viewer toolbar */
[data-theme="xp"] .canvas-viewer-dl{
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; color:#000;
  font-family:var(--ui); font-size:11px; padding:1px 9px; min-height:19px;
}
[data-theme="xp"] .canvas-viewer-dl:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .canvas-viewer-delete{
  color:#fff; border-color:#7a1710;
  background:linear-gradient(180deg,#e2685f 0%,#c6362c 45%,#a32018 100%);
}
[data-theme="xp"] .canvas-viewer-delete:hover{
  background:linear-gradient(180deg,#f08b83 0%,#d4483e 45%,#b32a21 100%); color:#fff;
}

/* ------------------------------------------------------------------ */
/* FULL-SCREEN DOCUMENT EDITOR — a real XP window on the desktop        */
[data-theme="xp"] .canvas-popup-backdrop{
  background:rgba(0,0,0,.28); backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:12px;
}
[data-theme="xp"] .canvas-popup-dialog{
  background:#ECE9D8; border:3px solid #0053ee; border-radius:7px 7px 4px 4px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
[data-theme="xp"] .canvas-popup-header{
  background:var(--xp-luna); border-bottom:0; padding:3px 4px 3px 7px;
  border-radius:2px 2px 0 0;
}
[data-theme="xp"] .canvas-popup-title-area{gap:7px}
[data-theme="xp"] .canvas-popup-title-area strong,
[data-theme="xp"] .canvas-popup-title-area span:not(.canvas-popup-badge){
  font-family:var(--ui); font-size:12px; font-weight:700; color:#fff;
  text-shadow:1px 1px 1px rgba(0,0,0,.4);
}
/* the badge sits ON the Luna bar — keep its ink dark. The portal hit exactly
   this trap once with white-on-white and had to fix it the same way. */
[data-theme="xp"] .canvas-popup-badge{
  font-family:var(--ui); font-size:9px; font-weight:700; letter-spacing:0;
  border:1px solid #aca899; border-radius:0; background:#ECE9D8; color:#0a246a; padding:0 5px;
}
/* buttons on a Luna caption become caption buttons, as in xp.css's .top .btn */
[data-theme="xp"] .canvas-popup-header .canvas-icon-btn,
[data-theme="xp"] .canvas-popup-header .canvas-action{
  border:1px solid #0b3fa8; background:var(--xp-capbtn); color:#fff;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5);
  text-shadow:1px 1px 1px rgba(0,0,0,.35); font-weight:700;
}
[data-theme="xp"] .canvas-popup-header .canvas-icon-btn:hover,
[data-theme="xp"] .canvas-popup-header .canvas-action:hover{
  background:var(--xp-capbtn-hot); color:#fff; border-color:#0b3fa8;
}
[data-theme="xp"] .canvas-popup-body{background:var(--xp-workspace)}

/* ------------------------------------------------------------------ */
/* DOC PREVIEW — the read-only viewer window                            */
[data-theme="xp"] .docpv{background:rgba(0,0,0,.28);padding:12px}
[data-theme="xp"] .docpv-card{
  background:#ECE9D8; border:3px solid #0053ee; border-radius:7px 7px 4px 4px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
[data-theme="xp"] .docpv-head{
  background:var(--xp-luna); border-bottom:0; padding:3px 4px 3px 7px;
  align-items:center; gap:7px;
}
[data-theme="xp"] .docpv-titles{gap:0}
[data-theme="xp"] .docpv-name{
  font-family:var(--ui); font-size:12px; font-weight:700; color:#fff; gap:6px;
  text-shadow:1px 1px 1px rgba(0,0,0,.4);
}
[data-theme="xp"] .docpv-sub{
  font-family:var(--ui); font-size:10px; line-height:1.4; color:#dbe8ff;
  text-shadow:1px 1px 1px rgba(0,0,0,.3);
}
[data-theme="xp"] .docpv-chip{
  font-family:var(--ui); font-size:9px; font-weight:700; letter-spacing:0;
  border:1px solid #aca899; border-radius:0; background:#ECE9D8; color:#0a246a; padding:0 5px;
}
[data-theme="xp"] .docpv-chip.exact{border-color:#4a7c2f;background:#d3ecc9;color:#274d12}
[data-theme="xp"] .docpv-chip.design{border-color:#316ac5;background:#d6dff7;color:#0a246a}
[data-theme="xp"] .docpv-tools{gap:4px}
[data-theme="xp"] .docpv-tools .canvas-action{
  border:1px solid #0b3fa8; background:var(--xp-capbtn); color:#fff; font-weight:700;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5); text-shadow:1px 1px 1px rgba(0,0,0,.35);
}
[data-theme="xp"] .docpv-tools .canvas-action:hover{background:var(--xp-capbtn-hot);color:#fff}
/* the grey MDI workspace, with the pages as hard-edged paper on top of it */
[data-theme="xp"] .docpv-body{background:var(--xp-workspace);padding:10px 8px 16px}
[data-theme="xp"] .docpv-stack{gap:10px}
[data-theme="xp"] .docpv-page,
[data-theme="xp"] .docpv-img{
  border:1px solid #404040; border-radius:0; background:#fff;
  box-shadow:2px 2px 4px rgba(0,0,0,.45);
}
[data-theme="xp"] .docpv-msg{
  font-family:var(--ui); font-size:11px; color:#ECE9D8; padding:24px 12px;
}
[data-theme="xp"] .docpv-msg.error{color:#ffd9d9}

/* ------------------------------------------------------------------ */
/* PDF / DOCUMENT EDITOR — a full XP application: caption, tabs,        */
/* toolbar, MDI workspace, property pane, all in one window             */
[data-theme="xp"] .pdfed{background:rgba(0,0,0,.28);padding:2vh 2vw}
[data-theme="xp"] .pdfed-card{
  background:#ECE9D8; border:3px solid #0053ee; border-radius:7px 7px 4px 4px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); max-width:min(1180px,94vw); max-height:92vh;
}
[data-theme="xp"] .pdfed-head{
  background:var(--xp-luna); border-bottom:0; padding:3px 4px 3px 7px;
  align-items:center; gap:7px;
}
[data-theme="xp"] .pdfed-titles{gap:0}
[data-theme="xp"] .pdfed-name{
  font-family:var(--ui); font-size:12px; font-weight:700; color:#fff; gap:6px;
  text-shadow:1px 1px 1px rgba(0,0,0,.4);
}
[data-theme="xp"] .pdfed-sub{
  font-family:var(--ui); font-size:10px; line-height:1.4; color:#dbe8ff;
  text-shadow:1px 1px 1px rgba(0,0,0,.3);
}
[data-theme="xp"] .pdfed-pending{
  font-family:var(--ui); font-size:9px; font-weight:700; letter-spacing:0;
  text-transform:none; border:1px solid #b58f2a; border-radius:0;
  background:#f7e8b5; color:#5c4500; padding:0 5px;
}
[data-theme="xp"] .pdfed-tools{gap:4px}

/* property-sheet tabs, matching xp.css's .atab exactly */
[data-theme="xp"] .pdfed-tabs{
  background:#ECE9D8; border-bottom:1px solid #919b9c; padding:2px 3px 0; gap:1px;
}
[data-theme="xp"] .pdfed-tab{
  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; font-weight:400;
  padding:2px 10px; line-height:1.2;
}
[data-theme="xp"] .pdfed-tab:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .pdfed-tab[aria-selected="true"]{
  background:#fff; color:#0a246a; font-weight:700;
  border-bottom-color:transparent; margin-bottom:-1px; padding-bottom:3px;
}

/* the toolbar: flat buttons that only draw a border when you touch them */
[data-theme="xp"] .pdfed-bar{
  background:#ECE9D8; border-bottom:1px solid #aca899; padding:2px 4px; gap:2px;
}
[data-theme="xp"] .pdfed-tool{
  min-height:19px; border:1px solid transparent; border-radius:0; background:transparent;
  color:#000; font-family:var(--ui); font-size:11px; font-weight:400;
  padding:1px 6px; gap:4px; line-height:1.2;
}
[data-theme="xp"] .pdfed-tool:hover{border-color:#316ac5;background:#c1d2ee;color:#000}
[data-theme="xp"] .pdfed-tool.active{
  border-color:#316ac5; background:#c1d2ee; color:#0a246a; font-weight:700;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.15);
}
/* the same class is reused on the Luna caption, where it must read as a
   caption button instead — this wins on specificity, not on order */
[data-theme="xp"] .pdfed-head .pdfed-tool{
  border:1px solid #0b3fa8; border-radius:3px; background:var(--xp-capbtn); color:#fff;
  font-weight:700; box-shadow:inset 1px 1px 0 rgba(255,255,255,.5);
  text-shadow:1px 1px 1px rgba(0,0,0,.35); padding:1px 9px;
}
[data-theme="xp"] .pdfed-head .pdfed-tool:hover{background:var(--xp-capbtn-hot);color:#fff;border-color:#0b3fa8}
[data-theme="xp"] .pdfed-head .pdfed-tool.active{box-shadow:inset 1px 1px 0 rgba(255,255,255,.5)}
[data-theme="xp"] .pdfed-sep{background:#aca899;margin:1px 3px;width:1px}
[data-theme="xp"] .pdfed-zoom{gap:3px}
[data-theme="xp"] .pdfed-zoom-val{
  font-family:var(--ui); font-size:10px; color:#333;
  border:1px inset #d4d0c8; background:#ECE9D8; padding:0 4px; min-width:38px;
}

/* the client area, and the paper on it */
[data-theme="xp"] .pdfed-work{background:#ECE9D8}
[data-theme="xp"] .pdfed-body{background:var(--xp-workspace);padding:10px}
[data-theme="xp"] .pdfed-doc{gap:10px}
[data-theme="xp"] .pdfed-sheet{gap:3px}
[data-theme="xp"] .pdfed-sheet-label{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:none; color:#ECE9D8;
}
[data-theme="xp"] .pdfed-canvas canvas{
  border:1px solid #404040; border-radius:0; box-shadow:2px 2px 4px rgba(0,0,0,.45);
}
[data-theme="xp"] .pdfed-hold{border:1px solid #404040;background:#fff}
[data-theme="xp"] .pdfed-msg{font-family:var(--ui);font-size:11px;color:#ECE9D8;padding:24px 12px}
[data-theme="xp"] .pdfed-msg.error{color:#ffd9d9}
[data-theme="xp"] .pdfed-alert{
  /* flat 1px box, no accent stripe down one side — XP-era warning strips are
     plain boxes, and the thick side-tab is a modern tell */
  border:1px solid #b58f2a; border-radius:0;
  background:#f7e8b5; color:#5c4500; font-family:var(--ui); font-size:11px;
  padding:3px 7px; line-height:1.45;
}

/* the page-manager grid */
[data-theme="xp"] .pdfed-grid{gap:8px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
[data-theme="xp"] .pdfed-page{
  border:1px solid transparent; border-radius:0; padding:3px; gap:3px;
}
[data-theme="xp"] .pdfed-page.selected{border-color:#316ac5;background:#c1d2ee}
[data-theme="xp"] .pdfed-page canvas{
  border:1px solid #404040; border-radius:0; box-shadow:1px 1px 2px rgba(0,0,0,.4);
}
[data-theme="xp"] .pdfed-page-num{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:none; color:#ECE9D8;
}
[data-theme="xp"] .pdfed-page.selected .pdfed-page-num{color:#0a246a;font-weight:700}
[data-theme="xp"] .pdfed-page-acts{gap:2px}
[data-theme="xp"] .pdfed-page-btn{
  min-width:17px; min-height:17px; padding:0 4px;
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; color:#0a246a; font-family:var(--ui); font-size:10px;
}
[data-theme="xp"] .pdfed-page-btn:hover{background:var(--xp-face-hot);color:#0a246a}
[data-theme="xp"] .pdfed-page-btn.danger:hover{border-color:#7a1710;color:#a00}

/* the right-hand property pane: an XP options pane, captioned per group */
[data-theme="xp"] .pdfed-side{
  flex:0 0 190px; background:#ECE9D8; border-left:1px solid #919b9c;
  padding:4px 5px; gap:6px;
}
[data-theme="xp"] .pdfed-side-title{
  font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:0;
  text-transform:none; color:#0a246a;
  border-bottom:1px solid #aca899; padding-bottom:1px;
}
[data-theme="xp"] .pdfed-side-note{font-family:var(--ui);font-size:10px;line-height:1.4;color:#4a4a4a}
[data-theme="xp"] .pdfed-side-group{gap:3px}
[data-theme="xp"] .pdfed-side-actions{gap:4px}
[data-theme="xp"] .pdfed-row{gap:1px}
[data-theme="xp"] .pdfed-row > span{font-family:var(--ui);font-size:10px;color:#333}
[data-theme="xp"] .pdfed-row select,
[data-theme="xp"] .pdfed-row input,
[data-theme="xp"] .pdfed-row textarea{
  min-height:18px; border:1px solid #7F9DB9; border-radius:0; background:#fff;
  color:#000; font-family:var(--ui); font-size:11px; padding:1px 3px;
}
[data-theme="xp"] .pdfed-row textarea{min-height:48px;line-height:1.4}
[data-theme="xp"] .pdfed-row input[type="color"]{height:18px;padding:1px}
[data-theme="xp"] .pdfed-pair{gap:4px}
[data-theme="xp"] .pdfed-toggles{gap:2px}

/* the start screen's document picker: XP thumbnails, square, on the workspace */
[data-theme="xp"] .pdfed-start{gap:8px;padding:6px 0 14px}
[data-theme="xp"] .pdfed-doccards-title{
  font-family:var(--ui); font-size:11px; font-weight:700; color:#ECE9D8;
}
[data-theme="xp"] .pdfed-doccards{gap:8px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
[data-theme="xp"] .pdfed-doccard{gap:2px;color:#ECE9D8}
[data-theme="xp"] .pdfed-doccard-sheet{
  border:1px solid #404040; border-radius:0; background:#fff;
  box-shadow:1px 1px 2px rgba(0,0,0,.4); transition:none;
}
[data-theme="xp"] .pdfed-doccard:hover .pdfed-doccard-sheet{
  border-color:#316ac5; box-shadow:0 0 0 1px #316ac5;
}
[data-theme="xp"] .pdfed-doccard:focus-visible .pdfed-doccard-sheet{outline:1px dotted #fff;outline-offset:1px}
[data-theme="xp"] .pdfed-doccard-plus{
  width:34px; height:34px; border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#0a246a; font-size:18px; font-weight:700;
}
[data-theme="xp"] .pdfed-doccard-name{font-family:var(--ui);font-size:10px;line-height:1.3;color:#fff}
[data-theme="xp"] .pdfed-doccard-kind,
[data-theme="xp"] .pdfed-doccard-note,
[data-theme="xp"] .pdfed-doccard-when{
  font-family:var(--ui); font-size:9px; letter-spacing:0; color:#dbe8ff;
}
/* the "new document" tile is a drop target, so it keeps a dashed edge — but a
   1px XP one, not the 2px token border, and its plus stays a silver button
   through hover instead of flattening to white (canvas.css:1605) */
[data-theme="xp"] .pdfed-doccard-new .pdfed-doccard-sheet{
  background:#ECE9D8; border:1px dashed #919b9c;
}
[data-theme="xp"] .pdfed-doccard-new.over .pdfed-doccard-sheet{
  border:1px solid #316ac5; background:#c1d2ee;
}
[data-theme="xp"] .pdfed-doccard-new:hover .pdfed-doccard-plus{background:var(--xp-face-hot)}
[data-theme="xp"] .pdfed-empty{font-family:var(--ui);font-size:11px;color:#ECE9D8}

/* the signature sheet is a property sheet of its own */
[data-theme="xp"] .pdfed-sig,
[data-theme="xp"] .pdfed-sig-card{
  border:1px solid #919b9c; border-radius:0; background:#fff;
}
[data-theme="xp"] .pdfed-sig-head,
[data-theme="xp"] .pdfed-sig-title{
  background:var(--xp-cap-quiet); border-bottom:1px solid #aca899;
  font-family:var(--ui); font-size:11px; font-weight:700; color:#0a246a; padding:1px 5px;
}
[data-theme="xp"] .pdfed-sig-tabs{background:#ECE9D8;border-bottom:1px solid #aca899;padding:2px 3px 0;gap:1px}
[data-theme="xp"] .pdfed-sig-pad{border:1px solid #7F9DB9;border-radius:0;background:#fff}
[data-theme="xp"] .pdfed-sig-preview,
[data-theme="xp"] .pdfed-sig-saved{border:1px solid #919b9c;border-radius:0;background:#fff}
[data-theme="xp"] .pdfed-sig-item{
  border:1px solid #d8d4c8; border-radius:0; background:#fff; padding:1px 4px;
}
[data-theme="xp"] .pdfed-sig-item:hover{background:#fff7d6}
[data-theme="xp"] .pdfed-sig-row{gap:4px}
[data-theme="xp"] .pdfed-sig-note{font-family:var(--ui);font-size:10px;color:#4a4a4a}

/* the sheet preview inside the editor uses the same B1 grid as the canvas */
[data-theme="xp"] .pdfed-sheetpane{background:#ECE9D8}
[data-theme="xp"] .pdfed-sheet-table{border-collapse:collapse;font-size:11px}
[data-theme="xp"] .pdfed-sheet-headrow,
[data-theme="xp"] .pdfed-sheet-rownum,
[data-theme="xp"] .pdfed-sheet-corner{
  background:linear-gradient(180deg,#fefefe,#d8d4c8); border:1px solid #aca899;
  font-family:var(--ui); font-size:10px; font-weight:700; color:#000; padding:1px 4px;
}
[data-theme="xp"] .pdfed-cell-num{text-align:right;font-variant-numeric:tabular-nums}
[data-theme="xp"] .pdfed-slidepane{background:#ECE9D8}
[data-theme="xp"] .pdfed-slides{gap:5px}
[data-theme="xp"] .pdfed-slide{border:1px solid #919b9c;border-radius:0;background:#fff;padding:3px 5px}
[data-theme="xp"] .pdfed-slide-text{font-family:var(--ui);font-size:11px;color:#000}
[data-theme="xp"] .pdfed-deckhost,
[data-theme="xp"] .pdfed-deckpreview{border:1px solid #919b9c;border-radius:0;background:#fff}
[data-theme="xp"] .pdfed-chart,
[data-theme="xp"] .pdfed-chartwrap{border:1px solid #919b9c;border-radius:0;background:#fff}
[data-theme="xp"] .pdfed-field{
  border:1px solid #7F9DB9; border-radius:0; background:#fff;
  font-family:var(--ui); font-size:11px; padding:1px 3px;
}

/* ------------------------------------------------------------------ */
/* ATTACHMENT BROWSER — the two-pane Explorer: folders left, files right */
[data-theme="xp"] .attachment-modal-content{gap:5px;font-family:var(--ui);font-size:11px}
[data-theme="xp"] .attachment-modal-header-actions{gap:4px}
[data-theme="xp"] .attachment-search-input{
  min-height:19px; border:1px solid #7F9DB9; border-radius:0; background:#fff;
  color:#000; font-family:var(--ui); font-size:11px; padding:1px 4px;
}
[data-theme="xp"] .attachment-browser{
  grid-template-columns:172px minmax(0,1fr); gap:3px; min-height:220px;
}
/* the folder pane: chrome-coloured, framed, its own scroll region */
[data-theme="xp"] .attachment-browser-folders{
  background:#ECE9D8; border:1px solid #919b9c; border-right:1px solid #919b9c;
  padding:1px; gap:0;
}
[data-theme="xp"] .attachment-browser-folder{
  border:0; border-radius:0; padding:1px 4px; gap:4px; min-height:17px;
  font-family:var(--ui); font-size:11px; color:#000;
}
[data-theme="xp"] .attachment-browser-folder:hover{background:#fff7d6}
[data-theme="xp"] .attachment-browser-folder.is-active{
  background:var(--xp-sel); color:#fff; font-weight:400;
}
[data-theme="xp"] .attachment-browser-folder.is-active .attachment-browser-folder-count,
[data-theme="xp"] .attachment-browser-folder.is-active .attachment-browser-folder-state{color:#dbe8ff}
[data-theme="xp"] .attachment-browser-folder.is-drop{
  border:1px dotted #0a246a; background:#c1d2ee; color:#0a246a; padding:0 3px;
}
[data-theme="xp"] .attachment-browser-folder-name{font-size:11px}
[data-theme="xp"] .attachment-browser-folder-count,
[data-theme="xp"] .attachment-browser-folder-state{
  font-family:var(--ui); font-size:10px; color:#4a4a4a;
}
[data-theme="xp"] .attachment-browser-folder-plus{
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; color:#0a246a; font-family:var(--ui); font-size:10px;
}
/* the file pane: white, framed, dense rows */
[data-theme="xp"] .attachment-browser-files{
  background:#fff; border:1px solid #919b9c; padding:1px; gap:0;
}
[data-theme="xp"] .attachment-file-row{
  border-radius:0; padding:1px 4px; gap:5px; min-height:19px;
}
[data-theme="xp"] .attachment-file-row:hover{background:#fff7d6}
[data-theme="xp"] .attachment-file-info{gap:5px}
[data-theme="xp"] .attachment-file-info .files-type-icon{
  width:16px; height:16px; border:0; border-radius:0; background:transparent; color:#0a246a;
}
[data-theme="xp"] .attachment-file-info .files-type-icon svg{width:15px;height:15px}
[data-theme="xp"] .attachment-file-info .files-row-meta{
  font-family:var(--ui); font-size:10px; color:#4a4a4a; padding-left:0;
}
[data-theme="xp"] .attachment-file-name{font-family:var(--ui);font-size:11px;color:#000}
[data-theme="xp"] .attachment-file-actions{gap:4px}
[data-theme="xp"] .attachment-file-actions .files-row-meta{
  font-family:var(--ui); font-size:10px; color:#4a4a4a; padding-left:0;
}
[data-theme="xp"] .attachment-file-delete{
  width:17px; height:17px; border:1px solid transparent; border-radius:0;
  background:transparent; color:#0a246a; font-size:10px;
}
[data-theme="xp"] .attachment-file-delete:hover{
  border-color:#7a1710; background:#f4c9c9; color:#a00;
}
/* the local-folder header is an XP address bar: sunken, white, path in full */
[data-theme="xp"] .attachment-local-head{
  background:#ECE9D8; border:1px solid #aca899; border-radius:0;
  padding:1px 4px; gap:5px; font-family:var(--ui); font-size:10px; color:#333;
}
[data-theme="xp"] .attachment-local-path{
  border:1px inset #d4d0c8; background:#fff; padding:0 4px;
  font-family:var(--ui); font-size:10px; color:#000;
}
[data-theme="xp"] .attachment-local-count{font-family:var(--ui);font-size:10px;color:#4a4a4a}
/* the commands above the browser */
[data-theme="xp"] .attach-upload-btn,
[data-theme="xp"] .attach-create-btn,
[data-theme="xp"] .attach-action-btn{
  min-height:19px; border:1px solid #003c74; border-radius:3px;
  background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff; color:#000;
  font-family:var(--ui); font-size:11px; font-weight:400; padding:1px 9px; opacity:1;
}
[data-theme="xp"] .attach-upload-btn:hover:not(:disabled),
[data-theme="xp"] .attach-create-btn:hover:not(:disabled),
[data-theme="xp"] .attach-action-btn:hover{
  background:var(--xp-face-hot); border-color:#003c74; color:#000; opacity:1;
}
[data-theme="xp"] .attach-upload-btn:disabled{background:#e6e2d6;color:#9a958a;border-color:#b5b0a2;opacity:1}
[data-theme="xp"] .attach-action-btn.primary{
  background:linear-gradient(180deg,#5aa0f2 0%,#1758c8 100%);
  border-color:#0a246a; color:#fff; font-weight:700;
}
[data-theme="xp"] .attach-action-btn.is-attached,
[data-theme="xp"] .attach-action-btn.add-btn.is-attached{
  background:#c1d2ee; border-color:#316ac5; color:#0a246a; font-weight:700;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.15);
}
[data-theme="xp"] .attach-menu-anchor{align-items:center}

/* ------------------------------------------------------------------ */
/* TELEPATHY — an XP property sheet with a real list box                */
[data-theme="xp"] .telepathy-modal-body{gap:6px;font-family:var(--ui);font-size:11px}
[data-theme="xp"] .telepathy-grant-card{
  border:1px solid #919b9c; border-radius:0; background:#ECE9D8; padding:4px 6px;
}
[data-theme="xp"] .telepathy-grant-head{margin-bottom:3px;gap:6px}
[data-theme="xp"] .telepathy-grant-title{font-size:11px;font-weight:700;color:#0a246a}
[data-theme="xp"] .telepathy-grant-sub{font-size:10px;color:#4a4a4a}
[data-theme="xp"] .telepathy-badge{
  border:1px solid #aca899; border-radius:0; background:#fff; color:#0a246a;
  font-family:var(--ui); font-size:9px; font-weight:700; letter-spacing:0;
  text-transform:none; padding:0 4px;
}
[data-theme="xp"] .telepathy-meta-row{
  margin-top:3px; gap:8px; font-family:var(--ui); font-size:10px; color:#4a4a4a;
}
[data-theme="xp"] .telepathy-controls{gap:6px}
[data-theme="xp"] .telepathy-group{gap:3px}
[data-theme="xp"] .telepathy-group-title{font-size:11px;font-weight:700;color:#0a246a}
[data-theme="xp"] .telepathy-row{gap:5px;align-items:center}
[data-theme="xp"] .telepathy-input{
  border:1px solid #7F9DB9; border-radius:0; background:#fff; color:#000;
  font-family:var(--ui); font-size:11px; padding:1px 4px;
}
/* a real XP list box: white, sunken, no gaps, full-row selection blue */
[data-theme="xp"] .telepathy-people{
  border:1px solid #7F9DB9; background:#fff; padding:1px; gap:0; max-height:132px;
}
[data-theme="xp"] .telepathy-person{
  border:0; border-radius:0; background:transparent; padding:1px 4px; gap:6px; min-height:18px;
}
[data-theme="xp"] .telepathy-person:hover{background:#fff7d6;border:0}
[data-theme="xp"] .telepathy-person.is-selected{background:var(--xp-sel);border:0}
[data-theme="xp"] .telepathy-person-name{font-size:11px;font-weight:400;color:#000}
[data-theme="xp"] .telepathy-person-mail{font-family:var(--ui);font-size:10px;color:#4a4a4a}
[data-theme="xp"] .telepathy-person-flag{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:none; color:#0a246a;
}
[data-theme="xp"] .telepathy-person.is-selected .telepathy-person-name{color:#fff}
[data-theme="xp"] .telepathy-person.is-selected .telepathy-person-mail,
[data-theme="xp"] .telepathy-person.is-selected .telepathy-person-flag{color:#dbe8ff}
/* the action row is the dialog's button bar: separated, right-aligned */
[data-theme="xp"] .telepathy-actions{
  gap:5px; margin-top:4px; padding-top:4px; border-top:1px solid #aca899;
}

/* ------------------------------------------------------------------ */
/* WORK BOARD — the Projects "Work" tab as dense XP columns             */
[data-theme="xp"] .wboard{gap:3px;grid-auto-columns:minmax(168px,1fr);padding-bottom:2px}
[data-theme="xp"] .wboard-col{
  background:#fff; border:1px solid #919b9c; border-radius:0; padding:0; min-height:90px;
}
[data-theme="xp"] .wboard-col > h4{
  background:var(--xp-cap); border-bottom:1px solid #919b9c;
  margin:0 0 1px; padding:1px 5px;
  font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:0;
  text-transform:none; color:#0a246a;
}
[data-theme="xp"] .wboard-card{
  border:0; border-bottom:1px dotted #d8d4c8; border-radius:0; background:#fff;
  padding:2px 5px; margin:0; font-family:var(--ui); font-size:11px; color:#000;
}
[data-theme="xp"] .wboard-card:hover{background:#fff7d6;border-color:#d8d4c8}
[data-theme="xp"] .wboard-card > strong{font-size:11px;font-weight:700;color:#0a246a;line-height:1.3}

/* ------------------------------------------------------------------ */
/* STATE OVERRIDES — layouts whose own rules outrank everything above   */
/* canvas.css tunes several surfaces per dock state through three- to   */
/* five-class selectors. Those outrank a plain [data-theme="xp"] .x on  */
/* specificity no matter what order the files load in, so the XP        */
/* geometry has to be restated at their weight. Without this block the  */
/* theme quietly reverts to 28px buttons and 12.5px titles in the split */
/* dock — which is the layout the work surface is used in most.         */

/* split dock: the files pane standing beside the document */
[data-theme="xp"] .right-dock.is-split .canvas-head{padding:1px 5px;min-height:21px;gap:5px}
[data-theme="xp"] .right-dock.is-split .canvas-actions{gap:3px}
[data-theme="xp"] .right-dock.is-split .canvas-action{min-height:19px;padding:1px 9px;font-size:11px}
[data-theme="xp"] .right-dock.is-split .canvas-title strong,
[data-theme="xp"] .right-dock.is-split .canvas-title-input{font-size:11px;font-weight:700}

/* compact viewer: a silver button gets an inset highlight, never a soft glow */
[data-theme="xp"] .viewer-pane.viewer-compact .dock-pane-actions{gap:3px}
[data-theme="xp"] .viewer-pane.viewer-compact .dock-pane-actions .canvas-icon-btn:hover{
  box-shadow:inset 1px 1px 0 #fff;
}

/* the reopen tab keeps XP proportions whichever dock state draws it */
[data-theme="xp"] .right-dock .dock-min-strip.dock-files-tab{height:20px;padding:0 8px}
[data-theme="xp"] .right-dock > .dock-files-tab.dock-min-strip:hover,
[data-theme="xp"] .right-dock-panels > .dock-files-tab.dock-min-strip:hover{color:#0a246a}

/* the busy state of a row action stays in the toolbar language */
[data-theme="xp"] .files-row-action.files-row-load:hover{border-color:#316ac5;color:#0a246a}

/* ------------------------------------------------------------------ */
/* the Unison layer's soft chrome has no place on these surfaces either */
[data-theme="xp"] .canvas-popup-backdrop,
[data-theme="xp"] .canvas-popup-dialog,
[data-theme="xp"] .docpv,
[data-theme="xp"] .docpv-card,
[data-theme="xp"] .pdfed,
[data-theme="xp"] .pdfed-card,
[data-theme="xp"] .files-drawer,
[data-theme="xp"] .canvas-pane,
[data-theme="xp"] .tree-drawer{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ------------------------------------------------------------------ */
/* DELIBERATELY NOT STYLED — every one of these was checked and left    */
/* alone, so the next person does not have to re-derive why:            */
/*                                                                      */
/* .apps-row / .apps-workspace-bar / .apps-workspace-title — xp.css     */
/*   styles these three, but they exist NOWHERE else in the repository: */
/*   no markup, no other stylesheet. They are dead selectors and there  */
/*   is no apps view with that class family to extend. Removing them is */
/*   an edit to xp.css, which is out of this file's scope.              */
/* .collab-* (collaboration.css, ~80 selectors) — collaboration.js was  */
/*   rewritten to consume the CDS and states so in its own header; the  */
/*   whole collab-* stylesheet is an orphan. The Projects surface it    */
/*   used to serve now renders .setlink/.atabs/.fld/.wboard, so the     */
/*   work board above is what actually themes that screen.              */
/* .canvas-handle (+ .side-left) — real markup in canvas.js, but it has */
/*   no CSS rule anywhere: it is an unstyled control, not a themeable   */
/*   one. Giving it a position and a size here would be app design      */
/*   invented inside a theme, and would hide a real defect.             */
/* .files-count, .dock-switch, .dock-split-ctrl, .right-dock-rail,      */
/*   .viewer-editor, .docpv-count, .canvas-tree-body, .canvas-tree-node,*/
/*   .canvas-page-tool, .canvas-page-tools, .pdfed-sheettabs,           */
/*   .pdfed-slide-thumb, .office-text-fallback,                         */
/*   .attach-menu / -item / -icon / -backdrop,                          */
/*   .attachment-folder-tree / -group / -label, .attachment-file-list,  */
/*   .attachment-file-project,                                          */
/*   .telepathy-field / -check / -preview / -result — defined in CSS    */
/*   but never rendered by any app file. Checked one by one against     */
/*   app/**.js, not assumed from the stylesheet.                        */
/* .files-battery* — already display:none in canvas.css.                */
/* .file-mention-pill* — a document reference, but it lives in the      */
/*   message stream and xp-chat.css already owns it. This file loads    */
/*   after that one, so styling it here would silently overrule the     */
/*   chat theme rather than extend it. One caveat worth passing on:     */
/*   .file-mention-pill-icon carries a literal border-radius:6px that   */
/*   no XP rule squares yet — it belongs in xp-chat.css, not here.      */
/* .pdfed-body's hidden scrollbars — un-XP, but a deliberate app        */
/*   decision about that viewport, not a colour or a border. Changing   */
/*   it would be a behaviour change wearing a theme's clothes.          */
/* .settings-wrap — the Projects screen shares it with Settings, so its */
/*   584px column is not this file's to narrow.                         */

/* ------------------------------------------------------------------ */
/* WORK: mail, calendar, files — the connected surface.
   Seen live on the ben lane 2026-08-22 with a real mailbox: the rail's
   selected item painted itself brick red because --work-rail-active-bg is a
   literal hex in app-extensions.css that no theme token reaches, and every
   flag/chip kept the mono uppercase voice. XP selection is Luna blue. */
[data-theme="xp"]{
  --work-rail-bg:#ECE9D8; --work-rail-line:#ACA899; --work-rail-ink:#000;
  --work-rail-mute:#4a4a4a; --work-rail-label:#4a4a4a; --work-rail-hover:#c1d2ee;
  --work-rail-active-bg:#316AC5; --work-rail-active-ink:#fff; --work-dim:#4a4a4a;
}
[data-theme="xp"] .mail-rail{border-right:1px solid #919b9c}
[data-theme="xp"] .mail-rail-label{
  font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:0;
  text-transform:none; color:#0a246a;
}
[data-theme="xp"] .mail-folder,
[data-theme="xp"] .mail-rail button{border-radius:0}
[data-theme="xp"] .mail-folder-count{font-family:var(--ui); font-size:10px}

/* the flags are XP status chips: square, hairline, Tahoma */
[data-theme="xp"] .mail-flag{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:none;
  border-radius:0; border:1px solid #919b9c; background:#fff; color:#333; padding:0 4px;
}
[data-theme="xp"] .mail-flag.is-waiting{background:#f7e8b5;border-color:#b58f2a;color:#5c4500}
[data-theme="xp"] .mail-flag.is-fyi{background:#fff;border-color:#919b9c;color:#4a4a4a}
[data-theme="xp"] .mail-flag.is-translated{background:#d6dff7;border-color:#316ac5;color:#0a246a}

/* the reader: a subject line is a caption, not a display headline */
[data-theme="xp"] .mail-reader-subject{
  font-family:var(--ui); font-size:13px; font-weight:700; color:#0a246a; line-height:1.25;
}
[data-theme="xp"] .mail-reader-head{border-bottom:1px solid #ACA899}
[data-theme="xp"] .mail-reader-meta,
[data-theme="xp"] .mail-reader-meta-addr{font-family:var(--ui); font-size:10px; color:#4a4a4a}
[data-theme="xp"] .mail-list-status{font-family:var(--ui); font-size:11px; color:#4a4a4a}