/* ============================================================
   XDress "Atelier Noir" — LUXE design-language layer (v3)
   Couture chrome: true Didone webfont, double-frame cards,
   foil hairlines, engraved background, refined furniture.
   Loaded after polish.css on every page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* True Didone everywhere (Didot on Mac, Playfair elsewhere) */
:root {
  --font-display: "Didot", "Playfair Display", "Bodoni MT", "Bodoni 72", Georgia, serif;
}

/* ---------------- Engraved canvas ---------------- */
/* over-scroll never flashes black */
html { background: var(--bg-deep); }
/* faint diamond lattice over the espresso ground */
body {
  background-image:
    var(--vignette),
    repeating-linear-gradient(45deg,  transparent 0 31px, oklch(0.88 0.05 85 / 0.016) 31px 32px),
    repeating-linear-gradient(-45deg, transparent 0 31px, oklch(0.88 0.05 85 / 0.016) 31px 32px);
}
:root[data-theme="light"] body {
  background-image:
    var(--vignette),
    repeating-linear-gradient(45deg,  transparent 0 31px, oklch(0.3 0.05 70 / 0.013) 31px 32px),
    repeating-linear-gradient(-45deg, transparent 0 31px, oklch(0.3 0.05 70 / 0.013) 31px 32px);
}

::selection { background: var(--accent-soft); color: var(--text); }

/* ---------------- Couture cards: double frame ---------------- */
.card { box-shadow: var(--shadow-1), inset 0 1px 0 oklch(1 0 0 / .03); }
.card:has(> .card-head)::after {
  content: ""; position: absolute; inset: 5px; z-index: 0;
  border: 1px solid color-mix(in oklab, var(--accent) 10%, transparent);
  border-radius: calc(var(--r-lg) - 4px);
  pointer-events: none;
  transition: border-color var(--t-med);
}
.card:has(> .card-head):hover::after {
  border-color: color-mix(in oklab, var(--accent) 22%, transparent);
}
/* card heads: hairline that fades out, not a hard rule */
.card-head { border-bottom: none !important; position: relative; }
.card-head::after {
  content: ""; position: absolute; bottom: 0; inset-inline: 14px; height: 1px;
  background: linear-gradient(90deg, var(--border-strong), var(--border) 60%, transparent);
}
html[dir="rtl"] .card-head::after {
  background: linear-gradient(-90deg, var(--border-strong), var(--border) 60%, transparent);
}

/* ---------------- Masthead: editorial scale + ornament ---------------- */
.mast-title {
  font-size: clamp(36px, 3.8vw, 54px);
  letter-spacing: -0.005em; text-wrap: balance;
}
.masthead { position: relative; }
.masthead::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--accent-line) 18%, var(--accent-line) 82%, transparent);
}
.mast-kicker { color: var(--accent); letter-spacing: .2em; }

/* page heads on inner pages: serif titles, larger */
.page-head h1, .page-head h2, .page-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px); letter-spacing: .002em;
}

/* ---------------- Topbar: foil hairline, no hard border ---------------- */
.topbar { border-bottom: none; }
.topbar::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, color-mix(in oklab, var(--accent) 28%, var(--border)) 30%,
    color-mix(in oklab, var(--accent) 28%, var(--border)) 70%, transparent);
  opacity: .55; transition: opacity var(--t-med);
}
.topbar.scrolled::after { opacity: 1; }
.topbar.scrolled { border-bottom: none; }

/* ---------------- Sidebar: maison rail ---------------- */
.sidebar {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 3.5%, transparent), transparent 220px),
    var(--bg-deep);
}
.sb-brand { position: relative; padding-bottom: 18px; }
.sb-brand::after {
  content: ""; position: absolute; bottom: 6px; inset-inline: 18px; height: 5px;
  border-block: 1px solid var(--accent-line); opacity: .6;
}
.app.sb-collapsed .sb-brand::after { inset-inline: 12px; }
.sb-word { letter-spacing: .34em; font-size: 18px; }
.sb-item.active::before { width: 2.5px; background: var(--foil); }
.sb-group-label { color: color-mix(in oklab, var(--accent) 55%, var(--text-3)); }
.sb-group-label::after { border-image: linear-gradient(90deg, var(--border-strong), transparent) 1; }

/* card titles never wrap into the hairline */
.card-head { row-gap: 4px; }
.card-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------------- Furniture refinements ---------------- */
.pill { letter-spacing: .07em; }
.chip { border-radius: var(--r-full); }
.btn { letter-spacing: .09em; }
.btn-primary {
  box-shadow: 0 2px 14px color-mix(in oklab, var(--accent) 34%, transparent),
              inset 0 1px 0 oklch(1 0 0 / .4), inset 0 -1px 0 oklch(0 0 0 / .18);
}
/* light theme: foil reads washed-out behind white text — go solid */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-primary:hover {
  background: var(--accent-strong); color: var(--on-accent);
  box-shadow: 0 2px 12px color-mix(in oklab, var(--accent-strong) 30%, transparent),
              inset 0 1px 0 oklch(1 0 0 / .22);
}
:root[data-theme="light"] .btn-primary:hover { filter: brightness(1.12); }
.kbd { border-color: var(--accent-line); color: color-mix(in oklab, var(--accent) 60%, var(--text-2)); }

/* serif numerals carry the brand voice */
.sc-val, .kpi-num { font-family: var(--font-display); }
.count-badge { font-variant-numeric: lining-nums; }

/* scrollbar warms on hover */
*::-webkit-scrollbar-thumb:hover { background: var(--accent-line); background-clip: content-box; }

/* drawers & modals: foil edge */
.drawer { border-inline-start: 1px solid var(--accent-line); }
.modal { border-top: 1px solid var(--accent-line); }

/* empty states: italic serif voice */
.empty-state, .empty {
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; color: var(--text-2);
}

@media print {
  body { background-image: none; }
  .card:has(> .card-head)::after { display: none; }
}