/* Visual templates only. Geometry belongs to chart-content/chart-layouts. */
html:is([data-skin="E"], [data-skin="F"], [data-skin="T"], [data-skin="P"]) :is(.chart-surface, .rail-prototype) {
  --chart-page: #fff;
  --chart-paper: rgba(255,255,255,.94);
  --chart-ink: #5c5f63;
  --chart-muted: #777b80;
  --chart-line: rgba(102,106,112,.24);
  --chart-selected: #c8d3db;
  --chart-background-opacity: 1;
  --chart-background: url("/static/img/classic-v2-source-light.png?v=clean-20261108");
  --chart-man: url("/static/img/classic-man-black-outline-view.svg?v=2");
  --chart-woman: url("/static/img/classic-woman-black-outline-view.svg?v=2");
  color-scheme: light;
}
/* The classic artwork intentionally uses same-tone outlines: E white, F black. */
html[data-skin="E"] :is(.chart-surface, .rail-prototype) {
  --chart-man: url("/static/img/classic-man-original-view.svg");
  --chart-woman: url("/static/img/classic-woman-original-view.svg");
}
html[data-skin="F"] :is(.chart-surface, .rail-prototype) {
  --chart-page: #17191d;
  --chart-paper: rgba(19,22,28,.94);
  --chart-ink: #e5e7eb;
  --chart-muted: #bdc2ca;
  --chart-line: rgba(153,167,187,.28);
  --chart-selected: #3b4b5b;
  --chart-background-opacity: 1;
  --chart-background: url("/static/img/classic-v2-source-dark.png");
  --chart-man: url("/static/img/classic-man-black-outline-view.svg?v=2");
  --chart-woman: url("/static/img/classic-woman-black-outline-view.svg?v=2");
  color-scheme: dark;
}
html:is([data-skin="T"], [data-skin="P"]) :is(.chart-surface, .rail-prototype) {
  --chart-page: var(--master-page, #fff);
  --chart-paper: transparent;
  --chart-line: transparent;
  --chart-background: none;
  --chart-cal-rule: none;
  --chart-ink: var(--master-ink, #42464c);
  --chart-muted: var(--master-muted, #626871);
  --chart-selected: var(--master-selection, rgba(116,146,172,.24));
}
html:is([data-skin="T"], [data-skin="P"]) { color-scheme: light; }
html[data-skin="P"] { --bg: #fff; background: #fff; }
/* T is genuinely transparent, including every ancestor of the chart. */
html[data-skin="T"] {
  --master-page: transparent;
  --preview-page: transparent;
  --bg: transparent;
  --da-bg: transparent;
  --chart-bg: transparent;
  background: transparent;
}
html[data-skin="T"] :is(body, .shell, #main) { background: transparent; }
html[data-skin="T"][data-master-tone="light"] {
  --master-ink: #f1f3f5;
  --master-muted: #c9cfd6;
  --master-selection: rgba(156,183,207,.25);
}
/* Invisible borders retain their box geometry across all four templates. */
html:is([data-skin="T"], [data-skin="P"]) .chart-sheet :is(.mr-cal, .mr-pillars, .chart-rail, .chart-lk) { box-shadow: none; }
html:is([data-skin="E"], [data-skin="F"], [data-skin="T"], [data-skin="P"]) .chart-sheet .chart-gan { color: transparent; --chart-avatar: var(--chart-man); }
html:is([data-skin="E"], [data-skin="F"], [data-skin="T"], [data-skin="P"]) .chart-sheet .chart-gan.kun { --chart-avatar: var(--chart-woman); }
html:is([data-skin="E"], [data-skin="F"]) .chart-sheet .chart-gan::before {
  inset: 0; mask: none; -webkit-mask: none;
  background: var(--chart-avatar) center bottom / contain no-repeat;
}
/* Plain masters keep the avatar slot; only the visual asset is a sex-color disc. */
html:is([data-skin="T"], [data-skin="P"]) .chart-sheet .chart-gan::before {
  inset: auto 13px 0; width: 32px; height: 32px; border-radius: 50%;
  mask: none; -webkit-mask: none; background: var(--chart-person-color);
}