/*
 * design-etched.css — design M · זכוכית חרוטה (`tally:designs`, 2026-10-23, Almon).
 *
 * Etched glass in a quiet room: every surface is a frosted pane with a fine
 * etched line just inside its edge, the room's arches show softly through it,
 * and what is selected (a filter, a tab, the side-panel row) turns clear.
 * Primary buttons are smoked ink glass. Figures are thin and large.
 * All under html[data-design="etched"] (set before paint by index.html, chosen
 * in Settings → עיצוב); dark mode under [data-mode="dark"] as well.
 * Colours go through the same tokens as the rest of the app — new rules here
 * should too, so light and dark both follow.
 */

html[data-design="etched"] {
  --bg:            #dde0e4;
  --bg-raise:      rgba(250, 251, 252, 0.9);
  --surface:       rgba(255, 255, 255, 0.46);
  --surface-strong: rgba(255, 255, 255, 0.64);
  --surface-solid: rgba(255, 255, 255, 0.54);
  --surface-blur:  blur(22px) saturate(115%);
  --border:        rgba(255, 255, 255, 0.6);
  --text:          #1d232c;
  --text-muted:    #59606b;
  --accent:        #1d232c;
  --accent-2:      #3b4452;
  --accent-soft:   rgba(29, 35, 44, 0.08);
  --on-accent:     #ffffff;
  --value:         #1d232c;
  --pos:           #2d6e4b;
  --neg:           #a33241;
  --amber:         #8c5414;
  --etch:          rgba(255, 255, 255, 0.78);
  --clear-ring:    inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 0 0 2.5px rgba(29, 35, 44, 0.14);
  --font: "Assistant", "Heebo", system-ui, sans-serif;
  --shadow-lg: 0 18px 36px -22px rgba(30, 36, 48, 0.45), 0 2px 6px rgba(30, 36, 48, 0.06);
  --shadow-sm: 0 10px 22px -16px rgba(30, 36, 48, 0.4);
  --room: url("../img/sky-mist.webp");
}

html[data-design="etched"][data-mode="dark"] {
  --bg:            #15181d;
  --bg-raise:      rgba(38, 42, 49, 0.94);
  --surface:       rgba(48, 53, 62, 0.5);
  --surface-strong: rgba(44, 49, 57, 0.72);
  --surface-solid: rgba(46, 51, 59, 0.62);
  --border:        rgba(255, 255, 255, 0.08);
  --text:          #e7e9ed;
  --text-muted:    #9aa1ad;
  --accent:        #e7e9ed;
  --accent-2:      #c3c8d1;
  --accent-soft:   rgba(231, 233, 237, 0.1);
  --on-accent:     #15181d;
  --value:         #e7e9ed;
  --pos:           #6cc796;
  --neg:           #ff7d87;
  --amber:         #e3a95a;
  --etch:          rgba(255, 255, 255, 0.12);
  --clear-ring:    inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), inset 0 0 0 2.5px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 36px -20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 10px 22px -14px rgba(0, 0, 0, 0.6);
  --room: url("../img/sky-ink.webp");
}

/* The sky behind the glass (`tally:sky-background`): one still picture, cropped to fit, never repeated, so nothing is cut. */
html[data-design="etched"] body { background: var(--bg); }
html[data-design="etched"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--room) center / cover no-repeat, var(--bg);
}

/* Frosted panes, each with its etched line. */
html[data-design="etched"] .project-card,
html[data-design="etched"] .hero,
html[data-design="etched"] .home-insight,
html[data-design="etched"] .quote-list,
html[data-design="etched"] .state,
html[data-design="etched"] .dashboard__state,
html[data-design="etched"] .txn-list,
html[data-design="etched"] .reports-results,
html[data-design="etched"] .report-figures,
html[data-design="etched"] .reports-insights__tile,
html[data-design="etched"] .settings-section,
html[data-design="etched"] .qdrop,
html[data-design="etched"] .catalog-list,
html[data-design="etched"] .qb-pane,
html[data-design="etched"] .qfile {
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  outline: 1px solid var(--etch);
  outline-offset: -7px;
}
html[data-design="etched"] .settings-section { padding: 18px; border-radius: var(--radius-lg); }
html[data-design="etched"] .project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-design="etched"] .qdrop { border-style: solid; border-color: var(--border); }
html[data-design="etched"] .qdrop.is-over { box-shadow: var(--clear-ring), var(--shadow-sm); background: transparent; backdrop-filter: none; }
html[data-design="etched"] .field-input,
html[data-design="etched"] .field-select {
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Smoked ink glass for the main action; frosted for the quiet one. */
html[data-design="etched"] .btn--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, transparent), color-mix(in srgb, var(--accent-2) 96%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-sm);
}
html[data-design="etched"] .btn--quiet {
  background: var(--surface-strong);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}

/* Selected turns clear: no frost, just the pane's edge. */
html[data-design="etched"] .status-filter__chip { background: var(--surface-strong); backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur); border-color: var(--border); }
html[data-design="etched"] .status-filter__chip.is-selected,
html[data-design="etched"] .segmented__tab.is-selected,
html[data-design="etched"] .reports-period__chip.is-selected,
html[data-design="etched"] .theme-picker__option.is-selected,
html[data-design="etched"] .sidebar__item.is-selected {
  background: transparent;
  color: var(--text);
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--clear-ring);
  font-weight: 700;
}
html[data-design="etched"] .status-filter__chip.is-selected .status-filter__count { background: var(--accent-soft); color: var(--text); }
html[data-design="etched"] .segmented { background: var(--surface); backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur); box-shadow: inset 0 0 0 1px var(--border); }

/* The phone bar and the desktop rail + panel are glass too. */
html[data-design="etched"] .halves__bar { background: var(--surface-strong); border-color: var(--border); }
html[data-design="etched"] .sidebar__rail,
html[data-design="etched"] .sidebar__panel {
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  border-color: var(--border);
}
html[data-design="etched"] .sidebar__panel { background: color-mix(in srgb, var(--surface) 70%, transparent); }

/* Thin, large figures; light big titles. */
html[data-design="etched"] [class*="figure-value"],
html[data-design="etched"] .card-figure__value { font-family: "Heebo", system-ui, sans-serif; font-weight: 300; letter-spacing: -0.01em; }
html[data-design="etched"] .form-title { font-family: "Heebo", system-ui, sans-serif; font-weight: 300; font-size: 1.75rem; }

/* The charts: a frosted pane with ink lines, in place of the night card. */
html[data-design="etched"] .hero--chart { background: var(--surface); color: var(--text); backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur); }
html[data-design="etched"] .hero--chart::after { display: none; }
html[data-design="etched"] #app.screen-project-detail,
html[data-design="etched"] #app.screen-dashboard {
  --pc-bg: var(--surface);
  --pc-ink: #1d232c;
  --pc-mute: #59606b;
  --pc-grid: rgba(29, 35, 44, 0.08);
  --pc-axis: rgba(29, 35, 44, 0.22);
  --pc-shadow: var(--shadow-sm);
  --pc-chip-bg: rgba(255, 255, 255, 0.55);
  --pc-edit-bg: rgba(255, 255, 255, 0.5);
  --pc-loading-bg: rgba(29, 35, 44, 0.06);
  --pc-inc: #1d232c;
  --pc-cost: #98a1ad;
  --pc-cost-glow: none;
  --pc-inc-glow: none;
  --pc-prof: #2d6e4b;
  --pc-prof-over: #a33241;
  --pc-hatch: #59606b;
}
html[data-design="etched"][data-mode="dark"] #app.screen-project-detail,
html[data-design="etched"][data-mode="dark"] #app.screen-dashboard {
  --pc-ink: #e7e9ed;
  --pc-mute: #9aa1ad;
  --pc-grid: rgba(255, 255, 255, 0.07);
  --pc-axis: rgba(255, 255, 255, 0.2);
  --pc-chip-bg: rgba(255, 255, 255, 0.08);
  --pc-edit-bg: rgba(255, 255, 255, 0.08);
  --pc-loading-bg: rgba(255, 255, 255, 0.06);
  --pc-inc: #e7e9ed;
  --pc-cost: #6f7784;
  --pc-prof: #6cc796;
  --pc-prof-over: #ff7d87;
  --pc-hatch: #9aa1ad;
}

/* ---- M · בצבע: the same etched glass, with colour (`tally:designs`, 2026-10-23) ----
   Settings → עיצוב "M · בצבע" = data-design="etched" + data-etch="color", so every
   rule above applies and only these colours change: a dusk sky through the
   arches, indigo for the main action and what is selected, indigo/coral charts. */
html[data-design="etched"][data-etch="color"] {
  --bg:          #e8e3e0;
  --accent:      #3b4fd8;
  --accent-2:    #5568e8;
  --accent-soft: rgba(59, 79, 216, 0.1);
  --on-accent:   #ffffff;
  --pos:         #1f7a4d;
  --amber:       #b4502f;
  --clear-ring:  inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 0 0 2.5px rgba(59, 79, 216, 0.35);
  --room: url("../img/sky-dusk.webp");
}
html[data-design="etched"][data-etch="color"][data-mode="dark"] {
  --bg:          #16141c;
  --accent:      #8c9bff;
  --accent-2:    #a7b2ff;
  --accent-soft: rgba(140, 155, 255, 0.14);
  --on-accent:   #13152a;
  --pos:         #6cc796;
  --amber:       #f29a80;
  --clear-ring:  inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), inset 0 0 0 2.5px rgba(140, 155, 255, 0.45);
  --room: url("../img/sky-night.webp");
}
html[data-design="etched"][data-etch="color"] .status-filter__chip.is-selected,
html[data-design="etched"][data-etch="color"] .segmented__tab.is-selected,
html[data-design="etched"][data-etch="color"] .sidebar__item.is-selected,
html[data-design="etched"][data-etch="color"] .halves__tab.is-selected { color: var(--accent); }
html[data-design="etched"][data-etch="color"] .hero--chart {
  background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--surface) 80%, rgba(255, 210, 190, 0.35)) 60%, color-mix(in srgb, var(--surface) 80%, rgba(200, 210, 255, 0.35)));
}
html[data-design="etched"][data-etch="color"] #app.screen-project-detail,
html[data-design="etched"][data-etch="color"] #app.screen-dashboard {
  --pc-inc: #3b4fd8;
  --pc-cost: #ee7d5e;
  --pc-prof: #1f7a4d;
  --pc-hatch: #ee7d5e;
}
html[data-design="etched"][data-etch="color"][data-mode="dark"] #app.screen-project-detail,
html[data-design="etched"][data-etch="color"][data-mode="dark"] #app.screen-dashboard {
  --pc-inc: #8c9bff;
  --pc-cost: #f29a80;
  --pc-prof: #6cc796;
  --pc-hatch: #f29a80;
}