/* ============================================================
   theme-winxp.css — Windows XP「经典」外观（2000 / XP classic）

   这套外观是纯 GDI 画的：2px 四色斜面、#C0C0C0 对话框底、Tahoma 8pt。
   依据：在 box-win 的 session 2 里把系统色调成 classic 调色板，用
   DrawFrameControl / DrawEdge 离屏渲染的原生图，见
   reference/shots/windows/classic/ 与 docs/classic-native-notes.md。

   四色斜面（2px，四边不等）：
     raised   上/左 外 #FFFFFF 内 #DFDFDF，下/右 内 #808080 外 #000000
     sunken   上/左 外 #808080 内 #000000，下/右 内 #DFDFDF 外 #FFFFFF
     pressed  上/左 外 #000000 内 #808080，下/右 内 #DFDFDF 外 #FFFFFF

   这套年代没有暗色模式，也没有悬停态；暗色档直接沿用浅色。
   ============================================================ */

[data-theme="winxp"] {
  --ui-surface: #c0c0c0; /* COLOR_3DFACE */
  --ui-text: #000000;
  --ui-text-2: #808080; /* COLOR_GRAYTEXT */
  --ui-text-disabled: #808080;

  /* XP classic 对话框字体：Tahoma 8pt（= 11px @96dpi） */
  --ui-font: "Tahoma", "Microsoft Sans Serif", "MS Sans Serif", Verdana,
    "Selawik", system-ui, sans-serif;
  --ui-font-size: 11px;
  --ui-control-h: 23px;

  /* 选中色是经典方案的深蓝（Windows Standard 配色） */
  --ui-accent: #0a246a;
  --ui-accent-text: #ffffff;
  --ui-accent-hover: #0a246a;
  --ui-accent-active: #0a246a;

  /* classic 没有过渡动画 */
  --ui-duration: 0ms;
  --ui-ease: linear;

  /* 焦点：勾选 / 单选的焦点框只框标签文字、不框盒子（原生实测：1px 黑白棋盘格，
     见 docs/winxp-native-notes.md）；classic 没有 focus-visible，鼠标点完也画。 */
  --focus-ring: 0 0 0 0 transparent;
  --focus-outline: 1px dotted #000000;
  --focus-outline-offset: -3px;
  --choice-focus-outline: none;
  --choice-box-focus-outline: none;
  --choice-label-focus-outline: 1px dotted #000000;
  --choice-label-focus-offset: 0px;
  --choice-label-focus-outline-mouse: 1px dotted #000000;

  /* 按钮：23px 高、方角、2px 凸起斜面；没有悬停，按下只把斜面反过来 */
  --btn-bg: #c0c0c0;
  --btn-bg-hover: #c0c0c0;
  --btn-bg-active: #c0c0c0;
  --btn-fg: #000000;
  --btn-border-w: 0px;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-border-active: transparent;
  --btn-radius: 0px;
  --btn-h: 23px;
  --btn-px: 8px;
  --btn-font-size: 11px;
  --btn-font-weight: 400;
  --btn-bottom-stroke: transparent;
  --btn-shadow: inset 1px 1px 0 #ffffff, inset 2px 2px 0 #dfdfdf,
    inset -1px -1px 0 #000000, inset -2px -2px 0 #808080;
  --btn-shadow-active: inset 1px 1px 0 #000000, inset 2px 2px 0 #808080,
    inset -1px -1px 0 #ffffff, inset -2px -2px 0 #dfdfdf;
  --btn-shadow-disabled: inset 1px 1px 0 #ffffff, inset 2px 2px 0 #dfdfdf,
    inset -1px -1px 0 #000000, inset -2px -2px 0 #808080;
  --btn-bg-disabled: #c0c0c0;
  --btn-border-disabled: transparent;
  --btn-fg-disabled: #808080;

  /* 主按钮 = 默认按钮：1px 黑边 + 标准斜面往里挪 1px */
  --primary-bg: #c0c0c0;
  --primary-bg-hover: #c0c0c0;
  --primary-bg-active: #c0c0c0;
  --primary-fg: #000000;
  --primary-border: transparent;
  --primary-border-active: transparent;
  --primary-bottom-stroke: transparent;
  --primary-shadow: inset 0 0 0 1px #000000, inset 2px 2px 0 #ffffff,
    inset 3px 3px 0 #dfdfdf, inset -2px -2px 0 #808080;
  --primary-shadow-active: inset 0 0 0 1px #000000, inset 2px 2px 0 #000000,
    inset 3px 3px 0 #808080, inset -2px -2px 0 #dfdfdf;

  /* 输入框：白底、2px 凹陷斜面；聚焦只挪插入符，外观不变 */
  --field-bg: #ffffff;
  --field-border-w: 0px;
  --field-border: transparent;
  --field-radius: 0px;
  --field-h: 23px;
  --field-px: 4px;
  --field-font-size: 11px;
  --field-shadow: inset 1px 1px 0 #808080, inset 2px 2px 0 #000000,
    inset -1px -1px 0 #ffffff, inset -2px -2px 0 #dfdfdf;
  --field-focus-border: transparent;
  --field-focus-shadow: var(--field-shadow);
  --field-focus-outline: none;
  --field-placeholder: #808080;
  --field-underline-w: 0px;
  --field-underline-color: transparent;
  --field-label-size: 11px;
  --field-bg-disabled: #c0c0c0;
  --field-border-disabled: transparent;
  --field-fg-disabled: #808080;
  --field-shadow-disabled: var(--field-shadow);

  /* 多行输入：同样的凹陷边框，没有右下缩放手柄 */
  --textarea-min-h: 80px;
  --textarea-py: 2px;
  --textarea-line-height: 1.55; /* 实测行距 17px / 11px 字号 */
  --textarea-resize: none;
  --textarea-border: transparent;
  --textarea-focus-border: transparent;
  --textarea-disabled-border: transparent;

  /* 复选框：13×13 白底、2px 凹陷斜面、黑色勾 */
  --choice-gap: 5px;
  --check-size: 13px;
  --check-radius: 0px;
  --check-bg: #ffffff;
  --check-border-w: 0px;
  --check-border: transparent;
  --check-shadow: inset 1px 1px 0 #808080, inset 2px 2px 0 #000000,
    inset -1px -1px 0 #ffffff, inset -2px -2px 0 #dfdfdf;
  --check-shadow-checked: var(--check-shadow);
  --check-bg-checked: #ffffff;
  --check-border-checked: transparent;
  --check-mark: #000000;
  --check-stroke: 2.8;
  --check-duration: 0ms;
  --check-bg-hover: #ffffff;
  --check-border-hover: transparent;
  --check-mark-hover: #000000;
  --check-bg-checked-hover: #ffffff;
  --check-border-checked-hover: transparent;
  --check-mark-checked-hover: #000000;
  --check-bg-active: #c0c0c0; /* 实测按下态内部白底变面灰 */
  --check-border-active: transparent;
  --check-mark-active: #000000;
  --check-bg-disabled: #c0c0c0; /* 实测：禁用时盒子内部是对话框灰 */
  --check-border-disabled: transparent;
  --check-mark-disabled: #808080;

  /* 单选框：实测 12×12 ink（放在 13×13 空格里，从 (13,17) 起）。
     2px 环 = 1px 外边框（上/左 #808080、下/右 #FFFFFF）
              + 1px 内圈伪元素（上/左 #000000、下/右 #DFDFDF）。
     黑点 4×4；按下 / 禁用时内部白底变面灰；没有勾选动画。 */
  --radio-size: 12px;
  --radio-bg: #ffffff;
  --radio-border-w: 1px;
  --radio-border: transparent;
  --radio-border-color: #808080 #ffffff #ffffff #808080; /* top right bottom left */
  --radio-border-checked: var(--radio-border-color); /* 选中态环色不变 */
  --radio-inner-w: 1px;
  --radio-inner-color: #000000 #dfdfdf #dfdfdf #000000;
  --radio-shadow: none;
  --radio-shadow-checked: none;
  --radio-bg-checked: #ffffff;
  --radio-dot: 4px;
  --radio-dot-color: #000000;
  --radio-pad: -2px 0 0 1px;
  --radio-dot-hover: #000000;
  --radio-bg-active: #c0c0c0;
  --radio-dot-active: #000000;
  --radio-dot-duration: 0ms;
  --radio-bg-disabled: #c0c0c0;
  --radio-dot-disabled: #808080;

  /* 下拉框：实测 21px 高（字段 15 + 上下 2px 凹陷边框）、右侧 17×17 凸起箭头格 */
  --select-h: 21px;
  --select-radius: 0px;
  --select-bg: #ffffff;
  --select-fg: #000000;
  --select-border-w: 0px;
  --select-border: transparent;
  --select-shadow: var(--field-shadow);
  --select-px: 4px;
  --select-pr: 0px;
  --select-chevron: #000000;
  --select-chevron-size: 4px;
  --select-chevron-w: 1px;
  --select-arrow-w: 17px;
  --select-arrow-inset: 2px; /* 箭头格在 2px 凹陷边框里面 */
  --select-arrow-sep-w: 0px;
  --select-arrow-sep: transparent;
  --select-arrow-bg: #c0c0c0;
  --select-arrow-shadow: inset 1px 1px 0 #ffffff, inset 2px 2px 0 #dfdfdf,
    inset -1px -1px 0 #000000, inset -2px -2px 0 #808080;
  --select-bg-hover: #ffffff;
  --select-border-hover: transparent;
  --select-bg-active: #ffffff;
  --select-border-active: transparent;
  --select-bg-disabled: #c0c0c0;
  --select-border-disabled: transparent;
  --select-chevron-disabled: #808080;
  --select-fg-disabled: #808080;

  /* 下拉菜单：灰底、2px 凸起边框、项高 18、选中项深蓝底白字 */
  --menu-min-w: 140px;
  --menu-bg: #c0c0c0;
  --menu-fg: #000000;
  --menu-border-w: 0px;
  --menu-border: transparent;
  --menu-radius: 0px;
  --menu-shadow: inset 1px 1px 0 #dfdfdf, inset 2px 2px 0 #ffffff,
    inset -1px -1px 0 #000000, inset -2px -2px 0 #808080;
  --menu-pad: 2px;
  --menu-item-h: 18px;
  --menu-item-radius: 0px;
  --menu-item-pad-x: 8px;
  --menu-item-marker-space: 0px;
  --menu-item-hover-bg: #0a246a;
  --menu-item-hover-fg: #ffffff;
  --menu-item-selected-bg: #0a246a;
  --menu-item-selected-fg: #ffffff;
  --menu-item-marker: transparent;
  --menu-item-font-size: 11px;
  --menu-offset: 0px;
  /* 经典菜单的分隔线是两条蚀刻线：上灰下白，左内缩 2px。
     禁用文字用 COLOR_GRAYTEXT（XP 是 #808080，系统常量，不是估计）。 */
  --menu-sep-h: 1px;
  --menu-sep-margin: 2px;
  --menu-sep-color: #808080;
  --menu-sep-shadow: 0 1px 0 #ffffff;
  --menu-item-disabled-fg: #808080;
  --menu-shortcut-opacity: 1; /* 经典菜单快捷键和正文同色 */

  /* 滑块：实测 msctls_trackbar32（主题关闭）：
     控件 160×23，通道 4px、左右各缩进 8px；通道上暗下亮（凹槽）；
     滑块 11×21，凸起斜面。 */
  --slider-h: 23px;
  --slider-track-h: 4px;
  --slider-track: #c0c0c0;
  --slider-fill: #c0c0c0;
  --slider-track-radius: 0px;
  /* 原生通道左右各缩进 8px；CSS 里改不了 track 的宽度（Chrome 忽略、Firefox 会
     拆成 progress/track 两段），所以通道用满控件宽度，这条记在已知差距里。 */
  --slider-track-edge-w: 0px;
  --slider-track-shadow: inset 0 1px 0 #808080, inset 0 2px 0 #000000,
    inset 0 -1px 0 #ffffff, inset 0 -2px 0 #dfdfdf;
  --slider-thumb-w: 11px;
  --slider-thumb-h: 21px;
  --slider-thumb-radius: 0px;
  --slider-thumb-bg: #c0c0c0;
  /* 经典外观没有 focus-visible，鼠标点完也画点线；trackbar 的焦点框没有单独实测，
     沿用的是按钮那种 DrawFocusRect 做法（估计）。 */
  --slider-focus-mouse-outline: 1px dotted #000000;
  --slider-thumb-border-w: 0px;
  --slider-thumb-shadow: inset 1px 1px 0 #ffffff, inset 2px 2px 0 #dfdfdf,
    inset -1px -1px 0 #000000, inset -2px -2px 0 #808080;
  --slider-thumb-bg-hover: #c0c0c0;
  --slider-thumb-bg-active: #c0c0c0;
  --slider-thumb-bg-disabled: #c0c0c0;

  /* 开关：2000 / XP classic 没有开关控件。`.switch` 在 XP 主题下退化成复选框外观：
     13×13 凹陷盒 + 黑勾，几何和颜色直接复用 --check-*，API（.switch 结构）不变。
     勾用 --switch-mark（mask 图）画，路径和 .check__mark 的 SVG 相同；开关这一项
     没有原生像素，依据仍是复选框的 GDI 实测。 */
  --switch-w: var(--check-size);
  --switch-h: var(--check-size);
  --switch-knob: var(--check-size);
  --switch-knob-radius: 0px;
  --switch-pad: 0px;
  --switch-border-w: 0px;
  --switch-radius: 0px;
  --switch-bg: var(--check-bg);
  --switch-bg-on: var(--check-bg-checked);
  --switch-border: transparent;
  --switch-border-on: transparent;
  --switch-track-shadow: var(--check-shadow);
  --switch-knob-bg: transparent;
  --switch-knob-on-bg: transparent;
  --switch-knob-shadow: none;
  --switch-duration: 0ms;
  --switch-ease: linear;
  --switch-bg-active: var(--check-bg-active);
  --switch-bg-checked-active: var(--check-bg-active);
  --switch-bg-disabled: var(--check-bg-disabled);
  --switch-bg-checked-disabled: var(--check-bg-disabled);
  --switch-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.3 L8 14 L13.5 5.7' fill='none' stroke='%23000000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --switch-mark-color: var(--check-mark);
  --switch-mark-color-disabled: var(--check-mark-disabled);
  --switch-disabled-opacity: 1;
  --switch-disabled-filter: none;
  --switch-box-focus-outline: none;
  --switch-row-focus-outline: none;
  --switch-row-focus-offset: 0;
  --switch-label-focus-outline: var(--choice-label-focus-outline);
  --switch-label-focus-offset: var(--choice-label-focus-offset);
  --switch-label-focus-outline-mouse: var(--choice-label-focus-outline-mouse);
  /* 分段控件：经典 Win32 没有分段控件，最接近的是 TCS_BUTTONS / BTNS_CHECKGROUP
     的按钮组。这里用 1px 软边拼连体按钮，选中画成凹陷；原生 flat 变体还会叠 50%
     网点，这里用面灰代替（见 docs/segmented-notes.md）。 */
  --seg-h: 23px;
  --seg-radius: 0px;
  --seg-bg: #c0c0c0;
  --seg-fg: #000000;
  --seg-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  --seg-font-size: 11px;
  --seg-item-pad-x: 8px;
  --seg-item-radius: 0px;
  --seg-selected-bg: #c0c0c0;
  --seg-selected-fg: #000000;
  --seg-selected-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
  --seg-hover-bg: transparent;
  --seg-hover-fg: #000000;
  --seg-active-bg: transparent;
  --seg-sep-color: #808080;
  --seg-focus-outline: 1px dotted #000000;
  --seg-focus-offset: -3px;
  --seg-disabled-fg: #808080;
  /* 标签页：经典 SysTabControl32：标签 18 高（估计）、左右 6、1px 凸起软边；
     选中标签与面板连通、不画下边；面板 1px 凹陷。 */
  --tabs-h: 18px;
  --tabs-gap: 0px;
  --tabs-tab-overlap: -1px;
  --tabs-selected-lift: 2px;
  --tabs-tab-radius: 0px;
  --tabs-pad-x: 6px;
  --tabs-font-size: 11px;
  --tabs-fg: #000000;
  --tabs-hover-bg: transparent;
  --tabs-hover-fg: #000000;
  --tabs-selected-bg: #c0c0c0;
  --tabs-selected-fg: #000000;
  --tabs-tab-border-w: 0px;
  --tabs-tab-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  --tabs-selected-shadow: inset 1px 1px 0 #ffffff;
  --tabs-strip-border-w: 0px;
  --tabs-list-overlap: -1px;
  --tabs-panel-bg: #c0c0c0;
  --tabs-panel-border-w: 0px;
  --tabs-panel-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
  --tabs-panel-pad: 8px;
  --tabs-arrow-mode: select;
  --tabs-focus-outline: 1px dotted #000000;
  --tabs-focus-offset: -3px;
  --tabs-disabled-fg: #808080;
  /* 进度条：经典 PROGRESS_CLASS：17 高、1px 凹陷边、HIGHLIGHT #0A246A 填充、
     LED 分段（块宽约 2/3 高、间隙 2px，原生的精确块宽未实测）。
     经典外观没有原生不确定态，这里的滑动是借来的。 */
  --progress-h: 17px;
  --progress-radius: 0px;
  --progress-track: #c0c0c0;
  --progress-track-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
  --progress-fill: transparent;
  --progress-fill-radius: 0px;
  --progress-fill-image: repeating-linear-gradient(90deg, #0a246a 0 11px, transparent 11px 13px);
  --progress-indeterminate-duration: 1500ms;
  /* 提示气泡：经典 COLOR_INFOBK 淡黄底、黑字、1px 黑边、直角、Tahoma 11。
     键盘 focus 不显示。 */
  --tooltip-bg: #ffffe1;
  --tooltip-fg: #000000;
  --tooltip-border: #000000;
  --tooltip-border-w: 1px;
  --tooltip-radius: 0px;
  --tooltip-pad-y: 3px;
  --tooltip-pad-x: 4px;
  --tooltip-font-size: 11px;
  --tooltip-shadow: none;
  --tooltip-show-delay: 500ms;
  --tooltip-focus-show: 0;
}

/* 滚动条：窗口内容区用，避免默认浏览器滚动条破坏平台观感 */
[data-theme="winxp"] {
  --scrollbar-size: 16px;
  --scrollbar-width: auto;
  --scrollbar-track: #d4d0c8;
  --scrollbar-thumb: #d4d0c8;
  --scrollbar-thumb-hover: #c0c0c0;
  --scrollbar-radius: 0px;
  --scrollbar-border: 0px;
  --scrollbar-thumb-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  --scrollbar-buttons: block;
  --scrollbar-button-bg: #d4d0c8;
  --scrollbar-button-active-bg: #c0c0c0;
  --scrollbar-button-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  --scrollbar-button-active-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
  --scrollbar-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 2L7 6H1Z' fill='%23000000'/%3E%3C/svg%3E");
  --scrollbar-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 6L1 2H7Z' fill='%23000000'/%3E%3C/svg%3E");
}