/* Snow-night only: pixel ice faces, crisp white snow, alpha on fills (never text). */
html[data-skin="snow"] {
  color-scheme: light;
  --panel: rgba(167, 201, 248, 0.90);
  --raised: rgba(197, 224, 255, 0.92);
  --ink: #112b4f;
  --muted: #203b62;
  --accent: #143969;
  --expense: #592942;
  --income: #12376c;
  --danger: #63243d;
  --line: rgba(47, 82, 130, 0.62);
  --frame: url("assets/frame-ice.svg");
  --frame-active: url("assets/frame-ice-active.svg");
  --snow-cap: url("assets/snow-bank-1.svg");
  --snow-small: url("assets/snow-small-1.svg");
  --ice-facets: url("assets/ice-facets.svg");
  --toast-error: rgba(225, 207, 236, 0.96);
  scrollbar-color: #9ec9fa #2c4b77;
}
html[data-skin="snow"] :where([data-snow="1"]) {
  --snow-cap: url("assets/snow-bank-1.svg");
  --snow-small: url("assets/snow-small-1.svg");
}
html[data-skin="snow"] :where([data-snow="2"]) {
  --snow-cap: url("assets/snow-bank-2.svg");
  --snow-small: url("assets/snow-small-2.svg");
}
html[data-skin="snow"] :where([data-snow="3"]) {
  --snow-cap: url("assets/snow-bank-3.svg");
  --snow-small: url("assets/snow-small-3.svg");
}
html[data-skin="snow"] :where([data-snow="4"]) {
  --snow-cap: url("assets/snow-bank-4.svg");
  --snow-small: url("assets/snow-small-4.svg");
}
html[data-skin="snow"] :where([data-snow="5"]) {
  --snow-cap: url("assets/snow-bank-5.svg");
  --snow-small: url("assets/snow-small-5.svg");
}
html[data-skin="snow"] :where([data-snow="6"]) {
  --snow-cap: url("assets/snow-bank-6.svg");
  --snow-small: url("assets/snow-small-6.svg");
}
html[data-skin="snow"] ::selection {
  color: #0c2449;
  background: #e9f8ff;
}
html[data-skin="snow"] ::-webkit-scrollbar-thumb {
  background: #a5ceff;
  border-color: #31527f;
}
html[data-skin="snow"] ::-webkit-scrollbar-track {
  background: rgba(36, 64, 103, 0.85);
}
/* One material for every framed surface, including controls inside native dialogs. */
html[data-skin="snow"] :is(.panel, dialog, .ui-popover, .primary, .secondary, .danger, .icon-button, .add-template, .text-button, .tabs, .tabs button, .category, .ui-trigger, .ui-option, .ui-calendar-day, .cat-tile, .day, .days, .amount-field, .notice, .demo-banner, .skin-choice, .report-toolbar, .report-range, .toggle, :where(.field) input, :where(.field) textarea, :where(.field) select, .search, :where(.category-edit) input, :where(.ui-date-manual) input, .ui-time-value, :where(.setting) select, :where(.setting) input[type="time"]) {
  background-color: var(--ice-fill, var(--panel));
  background-image: var(--ice-facets);
  background-repeat: repeat;
  background-size: 128px 128px;
  background-position: left top;
  background-clip: padding-box;
  border-image: var(--frame) 8 stretch;
}
html[data-skin="snow"] :is(.panel, dialog, .ui-popover) {
  background-image: var(--ice-facets);
  background-repeat: repeat;
  background-size: 128px 128px;
  filter: drop-shadow(4px 4px 0 rgba(9, 27, 54, 0.8));
}
/* A single irregular profile spans each box; never tile a short snow motif. */
html[data-skin="snow"] :is(.panel, dialog, .ui-popover, .amount-field, .skin-choice, .tabs, .notice, .demo-banner, .report-toolbar)::before,
html[data-skin="snow"] #toast::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -16px;
  left: -8px;
  right: -8px;
  height: 26px;
  background: var(--snow-cap) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
html[data-skin="snow"] :is(dialog, .ui-popover)::before {
  /* Scrolling containers keep their cap inside the clipping boundary. */
  top: -8px;
  height: 16px;
}
html[data-skin="snow"] :is(.amount-field, .skin-choice, .tabs, .notice, .demo-banner, .report-toolbar) {
  position: relative;
}
html[data-skin="snow"] :is(.amount-field, .skin-choice, .tabs, .notice, .demo-banner, .report-toolbar)::before {
  top: -12px;
  left: -4px;
  right: -4px;
  height: 18px;
}
/* Compact caps cross the outer top frame. Segments share their outer track's cap. */
html[data-skin="snow"] :is(.primary, .secondary, .danger, .icon-button, .add-template, .text-button, .category, .ui-trigger, .ui-calendar-day, .cat-tile, .day, .toggle)::before,
html[data-skin="snow"] .ui-option::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -8px;
  left: -4px;
  right: -4px;
  height: 10px;
  background: var(--snow-small) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
html[data-skin="snow"] :is(.text-button, .cat-tile, .day, .toggle) { position: relative; }
html[data-skin="snow"] :is(.field input, .field textarea, .search, .category-edit input, .ui-date-manual input, .ui-time-value, .report-range) {
  background-image: var(--snow-small), var(--ice-facets);
  background-size: 100% 10px, 128px 128px;
  background-position: left -4px, left top;
  background-repeat: no-repeat, repeat;
}
html[data-skin="snow"] :is(.panel-head, .dialog-head) {
  background: rgba(202, 226, 255, 0.72);
  border-bottom-color: #668dbd;
}
html[data-skin="snow"] :is(.primary, .secondary, .danger, .icon-button, .add-template, .skin-choice) {
  box-shadow: inset 2px 0 rgba(241, 251, 255, 0.7), inset -2px -2px rgba(45, 82, 134, 0.35), 3px 4px 0 rgba(10, 30, 59, 0.72);
}
html[data-skin="snow"] :is(.primary, .tabs button.selected, .ui-option[aria-selected="true"], .ui-calendar-day.selected) {
  --ice-fill: rgba(129, 174, 244, 0.95);
  color: var(--ink);
  border-image: var(--frame-active) 8 stretch;
}
html[data-skin="snow"] .tabs button[data-type="income"].selected {
  background-color: rgba(151, 196, 250, 0.95);
  background-image: var(--ice-facets);
  color: var(--income);
}
html[data-skin="snow"] .entry-note summary::before {
  color: var(--ink);
  background: rgba(204, 228, 255, 0.88);
  box-shadow: inset 0 2px #f4fcff, inset 0 -2px #6f98cd;
}
html[data-skin="snow"] :is(.secondary, .icon-button, .add-template) {
  --ice-fill: rgba(179, 212, 253, 0.85);
  color: var(--ink);
}
html[data-skin="snow"] .danger {
  --ice-fill: rgba(219, 201, 229, 0.92);
  color: var(--danger);
  border-image: var(--frame-active) 8 stretch;
}
html[data-skin="snow"] :is(.text-button, .report-range) {
  --ice-fill: rgba(197, 222, 255, 0.83);
  border: 4px solid transparent;
  border-image: var(--frame) 8 stretch;
  padding: 5px 8px;
}
html[data-skin="snow"] :is(.primary, .secondary, .danger, .icon-button, .add-template, .text-button, .category, .skin-choice, .ui-option, .ui-calendar-day, .day):hover {
  --ice-fill: rgba(211, 234, 255, 0.96);
  border-image: var(--frame-active) 8 stretch;
  color: var(--ink);
}
html[data-skin="snow"] :is(.primary, .secondary, .danger, .icon-button, .add-template):active {
  transform: translateY(2px);
  box-shadow: inset 2px 0 #e4f5ff, 2px 2px 0 #214571;
}
html[data-skin="snow"] :is(.category.selected, .skin-choice[aria-pressed="true"], .day.selected) {
  --ice-fill: rgba(185, 218, 255, 0.94);
  border-image: var(--frame-active) 8 stretch;
  color: var(--ink);
}
html[data-skin="snow"] .category.selected {
  box-shadow: 0 4px #638abd;
}
html[data-skin="snow"] :is(.category.selected, .skin-choice[aria-pressed="true"]):hover {
  --ice-fill: rgba(215, 236, 255, 0.96);
}
html[data-skin="snow"] .tabs button.selected::after,
html[data-skin="snow"] .category.selected::after {
  background: #214b80;
  box-shadow: -4px 4px #214b80, -8px 0 #214b80;
}
html[data-skin="snow"] .ui-option[aria-selected="true"]::before {
  background: #214b80;
  box-shadow: 4px 4px #214b80, 8px 0 #214b80;
}
html[data-skin="snow"] :is(.field input, .field textarea, .field select, .search, .category-edit input, .ui-date-manual input, .ui-time-value, .ui-trigger, .setting select, .setting input[type="time"]) {
  --ice-fill: rgba(207, 230, 255, 0.83);
  box-shadow: inset 2px 2px rgba(59, 95, 146, 0.35);
}
html[data-skin="snow"] :is(.field input, .field textarea, .search, .category-edit input, .ui-trigger):is(:focus, [aria-expanded="true"]) {
  --ice-fill: rgba(229, 243, 255, 0.94);
  border-image: var(--frame-active) 8 stretch;
}
html[data-skin="snow"] :is(input, textarea)::placeholder {
  color: #35557e;
  opacity: 1;
}
html[data-skin="snow"] .amount-field {
  --ice-fill: rgba(202, 224, 255, 0.78);
  border-color: #668abc;
  box-shadow: inset 2px 2px rgba(55, 88, 135, 0.35);
}
html[data-skin="snow"] .category .icon,
html[data-skin="snow"] .cat-tile,
html[data-skin="snow"] .category-icon,
html[data-skin="snow"] .breakdown-row > .icon:first-child {
  color: color-mix(in srgb, var(--cat) 35%, #102a4c 65%);
}
html[data-skin="snow"] :is(.category.selected .icon, .empty > .icon) {
  color: #214b80;
}
html[data-skin="snow"] .days {
  --ice-fill: rgba(70, 108, 164, 0.38);
  border-color: #527aac;
}
html[data-skin="snow"] .day {
  --ice-fill: rgba(177, 207, 248, 0.90);
}
html[data-skin="snow"] :is(.day.outside, .ui-calendar-day.outside) {
  --ice-fill: rgba(158, 190, 235, 0.54);
  color: #203b62;
}
html[data-skin="snow"] .report-toolbar {
  padding: 12px;
  border: 4px solid transparent;
  border-image: var(--frame) 8 stretch;
}
html[data-skin="snow"] .report-range {
  display: inline-block;
}
html[data-skin="snow"] .bar-track {
  background: rgba(52, 87, 136, 0.3);
}
html[data-skin="snow"] .dot {
  outline: 1px solid #3c6092;
}
html[data-skin="snow"] :is(.record, .breakdown-row, .settings-link):hover {
  background: rgba(214, 235, 255, 0.6);
  box-shadow: var(--row-gutter, 16px) 0 rgba(214, 235, 255, 0.6), calc(-1 * var(--row-gutter, 16px)) 0 rgba(214, 235, 255, 0.6);
}
html[data-skin="snow"] .toggle {
  --ice-fill: rgba(55, 88, 136, 0.7);
}
html[data-skin="snow"] .toggle::after {
  background: #d1e9ff;
  box-shadow: 2px 2px #4772ab;
}
html[data-skin="snow"] .toggle:checked {
  --ice-fill: rgba(132, 180, 246, 0.94);
  border-image: var(--frame-active) 8 stretch;
}
html[data-skin="snow"] .toggle:checked::after {
  background: #f1fbff;
  box-shadow: 2px 2px #315a8d;
}
html[data-skin="snow"] .rail {
  background: rgba(38, 65, 107, 0.87);
  background-image: var(--ice-facets);
  border-color: #19365e;
  box-shadow: inset -2px 0 rgba(183, 215, 255, 0.72);
}
html[data-skin="snow"] .nav a {
  color: #e3f3ff;
}
html[data-skin="snow"] .nav a.active {
  color: #153964;
}
html[data-skin="snow"] .nav a:hover {
  background-color: rgba(150, 193, 248, 0.45);
}
html[data-skin="snow"] .nav-indicator {
  background: rgba(164, 206, 255, 0.92);
  border-image: var(--frame-active) 8 stretch;
}
html[data-skin="snow"] .nav a::before {
  color: var(--ink);
  background: rgba(211, 234, 255, 0.96);
}
html[data-skin="snow"] .nav-indicator::after,
html[data-skin="snow"] .nav a.active::after {
  background: #214b80;
  box-shadow: 0 4px #214b80;
}
html[data-skin="snow"] #toast {
  --ice-fill: rgba(187, 221, 255, 0.94);
  background-color: var(--ice-fill);
  background-image: var(--ice-facets);
  background-repeat: repeat;
  background-size: 128px 128px;
  background-position: left top;
  color: var(--ink);
  border-image: var(--frame-active) 8 stretch;
  box-shadow: 4px 4px 0 #17345d;
}
html[data-skin="snow"] dialog[open] {
  --ice-fill: rgba(184, 213, 251, 0.94);
  filter: none;
  box-shadow: 8px 8px 0 #17345d;
}
html[data-skin="snow"] dialog::backdrop {
  background: rgba(7, 22, 48, 0.72);
}
html[data-skin="snow"] .lock-screen {
  background: var(--bg) var(--scene-image) var(--scene-position) / var(--scene-size) var(--scene-repeat) fixed;
}
html[data-skin="snow"] :is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid #183e70;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #e9f8ff;
}
/* Sliding views stay opaque: translucency reveals scenery, never an old menu. */
html[data-skin="snow"] .page-transitioning > .page-view {
  background-color: var(--bg);
}

html[data-skin="snow"] .rail .icon-button::before { content: none; }

/* A scrolled dialog must not show its moving text through the pinned title bar. */
html[data-skin="snow"] dialog .dialog-head { background: #bfd9fa; }