/* DeskKit design v2 — the signed-in workspace (index.html's #dk-home-in)
   and the shared project card (.dk-pcard, js/projects.js) on
   index.html + projects.html. Loaded after css/theme-v2.css, whose
   tokens (--v2-*) and per-tool accent (--c / --tool from data-dk-product)
   it reads. Spec: docs/design-v2-spec.md.

   html.hv-ws   index.html only: a stored sign-in session, so the workspace
                is about to replace the marketing home (set before the first
                paint by the inline <head> script, cleared by
                js/index-home.js if the session turns out to be gone). The
                workspace is dark like every other v2 page; html.hv-light is
                no longer set anywhere — it stays in css/theme-v2.css only
                as the hook for a future user light mode, and every dark
                rule here carries the same html:not(.hv-light) prefix so it
                switches off with the rest.

   Sections: 1 markup that works in any theme · 2 workspace · 3 tool
   tiles · 4 project card · 5 card menu · 6 empty states · 7 projects.html
   · 8 motion + accessibility modes. */

@property --ws-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ============================== 1 markup that works in any theme
   (the card's footer row and kind label are newer than the light
   card rules in css/deskkit-ui.css). */
.dk-pcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dk-pcard-foot .dk-pcard-date, .dk-pcard-foot .dk-pcard-cta { margin: 0; }
.dk-pcard-kind { display: none; }
.dk-pcard-empty-art { display: none; }

/* While a stored session is being confirmed, don't flash the marketing
   home underneath the workspace. A fail-safe shows it after 3s anyway. */
html.hv-ws #dk-home-out { visibility: hidden; animation: dkWsShow 0s linear 3s forwards; }
@keyframes dkWsShow { to { visibility: visible; } }

/* ========================================================= 2 workspace */
html:not(.hv-light) body.theme-v2 #dk-home-in { position: relative; isolation: isolate; color: var(--v2-text); font-family: 'Heebo', system-ui, -apple-system, Arial, sans-serif; }
html:not(.hv-light) body.theme-v2 #dk-home-in::before { /* soft light behind the greeting */
  content: ""; position: absolute; inset: 0 0 auto; height: 560px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 62% at 88% 0%, rgba(var(--v2-teal-rgb), .13), transparent 70%),
    radial-gradient(36% 52% at 52% 4%, rgba(var(--v2-site-rgb), .08), transparent 72%),
    radial-gradient(30% 46% at 14% 0%, rgba(var(--v2-cv-rgb), .06), transparent 72%);
}
html[dir="ltr"]:not(.hv-light) body.theme-v2 #dk-home-in::before {
  background:
    radial-gradient(44% 62% at 12% 0%, rgba(var(--v2-teal-rgb), .13), transparent 70%),
    radial-gradient(36% 52% at 48% 4%, rgba(var(--v2-site-rgb), .08), transparent 72%),
    radial-gradient(30% 46% at 86% 0%, rgba(var(--v2-cv-rgb), .06), transparent 72%);
}
html:not(.hv-light) body.theme-v2 #dk-home-in::after { /* fine grid, fading out */
  content: ""; position: absolute; inset: 0 0 auto; height: 460px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(var(--v2-fg-rgb), .028) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--v2-fg-rgb), .028) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 75%);
}
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash {
  max-width: 1280px; box-sizing: border-box;
  padding: clamp(36px, 5.5vw, 72px) clamp(16px, 4vw, 40px) clamp(64px, 8vw, 104px);
}

/* Greeting: confident but in proportion (28px on phones, about 46px on a
   wide screen); the name carries the brand light, and "מה ניצור היום?"
   stays clearly the second line. The 👋 is part of the same text, so it
   scales with it. */
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-greet { margin: 0 0 clamp(26px, 3.2vw, 40px); }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-greet :is(h1, h2) {
  margin: 0 0 10px; color: var(--v2-hi); font-weight: 700; letter-spacing: -.024em; line-height: 1.12;
  font-size: var(--v2-fs-h1); overflow-wrap: anywhere;
}
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-greet-who {
  background: linear-gradient(100deg, var(--v2-teal-hi) 0%, #a5f3e6 45%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--v2-teal-hi);
}
html[dir="rtl"]:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-greet-who { background-image: linear-gradient(260deg, var(--v2-teal-hi) 0%, #a5f3e6 45%, #fff 100%); }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-greet p { margin: 0; color: var(--v2-dim); font-size: clamp(1.06rem, .96rem + .45vw, 1.3rem); line-height: 1.5; }

/* "Your recent projects" + "View all" */
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-recent-head { align-items: center; margin: 0 0 18px; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-recent-head h2 { margin: 0; color: var(--v2-hi); font-weight: 700; letter-spacing: -.012em; font-size: var(--v2-fs-h3); }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-recent-head a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; margin-inline-end: -14px; border-radius: 999px;
  color: var(--v2-teal-hi); font-size: 14.5px; font-weight: 600;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-recent-head a:hover { color: var(--v2-hi); background: rgba(var(--v2-teal-rgb), .1); }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-recent-head a:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }

/* Entrance: greeting, then the tiles, then the cards. Motion settings
   switch it off (section 8). */
@keyframes dkWsUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html:not(.hv-light) body.theme-v2 #dk-home-in:not([hidden]) :is(.dk-home-dash-greet, .dk-home-dash-tool, .dk-home-recent-head) { animation: dkWsUp var(--v2-med) var(--v2-ease) both; }
html:not(.hv-light) body.theme-v2 #dk-home-in:not([hidden]) .dk-home-dash-greet p { animation: dkWsUp var(--v2-med) var(--v2-ease) .08s both; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(1) { animation-delay: .1s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(2) { animation-delay: .13s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(3) { animation-delay: .16s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(4) { animation-delay: .19s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(5) { animation-delay: .22s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(6) { animation-delay: .25s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(7) { animation-delay: .28s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tool:nth-child(8) { animation-delay: .31s; }
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-recent-head { animation-delay: .3s; }

/* ====================================================== 3 tool tiles
   The homepage shortcuts' language: dark tile, a ring in the tool's neon,
   a light that travels around the border and a tint that follows the
   pointer while hovered (--mx / --my from js/projects.js). */
html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tools {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(48px, 6.5vw, 76px);
}
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool {
  --c: var(--tool, var(--v2-teal));
  position: relative; isolation: isolate; width: auto; min-width: 0; min-height: 124px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  padding: 18px 8px 16px; border: 0; border-radius: 18px; text-align: center;
  color: var(--v2-text); font: 600 14.5px/1.25 'Heebo', system-ui, sans-serif;
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .035), rgba(var(--v2-lift-rgb), .008)), var(--v2-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease), color var(--v2-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool > span:last-child { min-width: 0; max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool::before { /* the travelling light, on the 1.5px border ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--ws-a), transparent 0deg 285deg, color-mix(in srgb, var(--c) 60%, transparent) 320deg, var(--c) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: dkWsSpin 5s linear infinite; animation-play-state: paused;
  transition: opacity var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool::after { /* tint following the pointer */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(150px 110px at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--c) 28%, transparent), transparent 70%);
  transition: opacity var(--v2-fast) ease;
}
@keyframes dkWsSpin { to { --ws-a: 360deg; } }
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool-icon {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent), 0 0 20px -10px var(--c);
  transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool-icon svg { width: 23px; height: 23px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 45%, transparent)); }
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool:is(:hover, :focus-visible) {
  color: var(--v2-hi); transform: translateY(-3px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, transparent), color-mix(in srgb, var(--c) 4%, transparent)), var(--v2-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 72%, transparent), 0 0 30px -8px var(--c), 0 22px 40px -26px color-mix(in srgb, var(--c) 80%, transparent);
}
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool:is(:hover, :focus-visible)::before { opacity: 1; animation-play-state: running; }
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool:hover::after { opacity: 1; }
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool:is(:hover, :focus-visible) .dk-home-dash-tool-icon {
  transform: translateY(-2px) rotate(-6deg) scale(1.07);
  background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px var(--c), 0 0 18px -3px var(--c);
}
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
html:not(.hv-light) body.theme-v2 .dk-home-dash-tool:active { transform: scale(.975); background: color-mix(in srgb, var(--c) 20%, var(--v2-panel)); }

@media (max-width: 1100px) {
  html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html:not(.hv-light) body.theme-v2 .dk-home-dash-tool { min-height: 108px; }
}
@media (max-width: 640px) {
  html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tools { gap: 8px; }
  html:not(.hv-light) body.theme-v2 .dk-home-dash-tool { flex-direction: column; justify-content: center; text-align: center; min-height: 96px; padding: 14px 4px 12px; gap: 9px; font-size: 12.5px; border-radius: 16px; }
  html:not(.hv-light) body.theme-v2 .dk-home-dash-tool-icon { width: 40px; height: 40px; border-radius: 12px; }
  html:not(.hv-light) body.theme-v2 .dk-home-dash-tool-icon svg { width: 20px; height: 20px; }
}
@media (max-width: 440px) {
  html:not(.hv-light) body.theme-v2 .dk-home-dash-tool { padding-inline: 2px; font-size: 12px; letter-spacing: -.01em; }
}
@media (max-width: 340px) {
  html:not(.hv-light) body.theme-v2 #dk-home-in .dk-home-dash-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================== 4 project card
   Dark card; a band across the top lit in the tool's colour with the
   tool's name, the ⋮ button and a neon icon sitting on its edge; name,
   readable meta, and a footer row with the date and a neon "Open". */
html:not(.hv-light) body.theme-v2 .dk-pcard-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 252px), 1fr)); gap: 18px; }
html:not(.hv-light) body.theme-v2 .dk-pcard {
  --c: var(--v2-teal-hi);
  position: relative; overflow: visible; border: 0; border-radius: var(--v2-r); color: var(--v2-text);
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .035), rgba(var(--v2-lift-rgb), .01)), var(--v2-card);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .075), 0 1px 0 rgba(var(--v2-fg-rgb), .03);
  transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease);
}
html:not(.hv-light) body.theme-v2 .dk-pcard[data-dk-product] { --c: var(--tool); }
html:not(.hv-light) body.theme-v2 .dk-pcard::after { /* tint following the pointer */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 13%, transparent), transparent 70%);
  transition: opacity var(--v2-med) ease;
}
html:not(.hv-light) body.theme-v2 .dk-pcard:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 52%, transparent), 0 0 0 1px color-mix(in srgb, var(--c) 12%, transparent),
    0 30px 60px -32px color-mix(in srgb, var(--c) 75%, transparent), 0 0 46px -24px var(--c);
}
html:not(.hv-light) body.theme-v2 .dk-pcard:hover::after { opacity: 1; }
html:not(.hv-light) body.theme-v2 .dk-pcard:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 52%, transparent), 0 30px 60px -32px color-mix(in srgb, var(--c) 60%, transparent); }
html:not(.hv-light) body.theme-v2 .dk-pcard:has(.dk-pcard-menu) { z-index: 30; }

/* The band */
html:not(.hv-light) body.theme-v2 .dk-pcard-thumb {
  height: 92px; border: 0; border-radius: var(--v2-r) var(--v2-r) 0 0; isolation: isolate;
  background:
    radial-gradient(90% 150% at 100% 100%, color-mix(in srgb, var(--c) 30%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, transparent), color-mix(in srgb, var(--c) 3%, transparent)),
    var(--v2-well);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c) 34%, transparent);
  transition: filter var(--v2-med) ease;
}
html[dir="ltr"]:not(.hv-light) body.theme-v2 .dk-pcard-thumb {
  background:
    radial-gradient(90% 150% at 0% 100%, color-mix(in srgb, var(--c) 30%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, transparent), color-mix(in srgb, var(--c) 3%, transparent)),
    var(--v2-well);
}
html:not(.hv-light) body.theme-v2 .dk-pcard-thumb::before { /* dotted texture, fading towards the icon's far side */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c) 40%, transparent) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 70%); mask-image: linear-gradient(270deg, #000, transparent 70%); opacity: .5;
}
html[dir="ltr"]:not(.hv-light) body.theme-v2 .dk-pcard-thumb::before { -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
html:not(.hv-light) body.theme-v2 .dk-pcard:hover .dk-pcard-thumb { filter: brightness(1.18) saturate(1.1); }
html:not(.hv-light) body.theme-v2 .dk-pcard-kind {
  display: inline-flex; align-items: center; position: absolute; top: 14px; inset-inline-start: 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: color-mix(in srgb, var(--c) 72%, var(--v2-hi));
}
/* The neon icon, sitting on the band's lower edge */
html:not(.hv-light) body.theme-v2 .dk-pcard-thumb-icon {
  position: absolute; bottom: -24px; inset-inline-start: 18px; z-index: 1;
  display: grid; place-items: center; width: 50px; height: 50px; padding: 12px; box-sizing: border-box; border-radius: 15px;
  opacity: 1; color: var(--c); filter: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--v2-well)), var(--v2-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 58%, transparent), 0 0 24px -6px color-mix(in srgb, var(--c) 85%, transparent), 0 10px 22px -10px rgba(var(--v2-shade-rgb), var(--v2-shade-k));
  transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-pcard-thumb-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 60%, transparent)); }
html:not(.hv-light) body.theme-v2 .dk-pcard:hover .dk-pcard-thumb-icon { transform: translateY(-2px) rotate(-5deg); box-shadow: inset 0 0 0 1px var(--c), 0 0 30px -4px var(--c), 0 10px 22px -10px rgba(var(--v2-shade-rgb), var(--v2-shade-k)); }

/* ⋮ */
html:not(.hv-light) body.theme-v2 .dk-pcard-more {
  top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: 12px; font-size: 18px; font-weight: 700;
  color: var(--v2-text); background: rgba(var(--v2-bg-rgb), .5); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-pcard-more:hover,
html:not(.hv-light) body.theme-v2 .dk-pcard-more[aria-expanded="true"] { color: var(--v2-hi); background: rgba(var(--v2-bg-rgb), .78); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 16px -6px var(--c); }
html:not(.hv-light) body.theme-v2 .dk-pcard-more:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* Body */
html:not(.hv-light) body.theme-v2 .dk-pcard-body { position: relative; z-index: 1; padding: 38px 20px 18px; }
html:not(.hv-light) body.theme-v2 .dk-pcard-name { margin: 0 0 8px; color: var(--v2-hi); font-size: 17px; font-weight: 700; letter-spacing: -.005em; line-height: 1.35; }
html:not(.hv-light) body.theme-v2 .dk-pcard-meta { margin: 0 0 18px; gap: 8px; min-height: 24px; font-size: 13px; color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .dk-pcard-meta > span:not(.dk-pcard-status) { color: var(--v2-dim); }
html:not(.hv-light) body.theme-v2 .dk-pcard-status {
  gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .05); box-shadow: inset 0 0 0 1px var(--v2-line-2);
}
html:not(.hv-light) body.theme-v2 .dk-pcard-status::before { width: 6px; height: 6px; background: var(--v2-muted); }
html:not(.hv-light) body.theme-v2 .dk-pcard-status.live { color: var(--v2-ok); background: rgba(var(--v2-ok-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--v2-ok-rgb), .32); }
html:not(.hv-light) body.theme-v2 .dk-pcard-status.live::before { background: var(--v2-ok); box-shadow: 0 0 8px var(--v2-ok); }
html:not(.hv-light) body.theme-v2 .dk-pcard-status.draft { color: var(--v2-warn); background: rgba(var(--v2-warn-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .3); }
html:not(.hv-light) body.theme-v2 .dk-pcard-status.draft::before { background: var(--v2-warn); }
html:not(.hv-light) body.theme-v2 .dk-pcard-foot { padding-top: 14px; border-top: 1px solid var(--v2-line); }
html:not(.hv-light) body.theme-v2 .dk-pcard-date { margin: 0 0 16px; font-size: 13px; color: var(--v2-muted); }
html:not(.hv-light) body.theme-v2 .dk-pcard-foot .dk-pcard-date { margin: 0; min-width: 0; }

/* "Open": a button in the tool's neon */
html:not(.hv-light) body.theme-v2 .dk-pcard-cta {
  flex: none; gap: 7px; min-height: 38px; padding: 0 16px; border-radius: 999px; box-sizing: border-box;
  color: var(--v2-hi); font: 700 13.5px/1 'Heebo', system-ui, sans-serif; text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 20%, transparent), color-mix(in srgb, var(--c) 7%, transparent)), var(--v2-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 62%, transparent), 0 0 22px -10px var(--c);
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-pcard-cta::after { content: "←"; font-size: 14px; line-height: 1; color: var(--c); transition: transform var(--v2-fast) var(--v2-ease); }
html[dir="ltr"]:not(.hv-light) body.theme-v2 .dk-pcard-cta::after { content: "→"; }
html:not(.hv-light) body.theme-v2 .dk-pcard-cta:hover {
  transform: translateY(-1px); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 12%, transparent)), var(--v2-panel);
  box-shadow: inset 0 0 0 1px var(--c), 0 0 28px -6px var(--c);
}
html:not(.hv-light) body.theme-v2 .dk-pcard-cta:hover::after { transform: translateX(-3px); }
html[dir="ltr"]:not(.hv-light) body.theme-v2 .dk-pcard-cta:hover::after { transform: translateX(3px); }
html:not(.hv-light) body.theme-v2 .dk-pcard-cta:active { transform: scale(.97); }
html:not(.hv-light) body.theme-v2 .dk-pcard-cta:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
@media (hover: none) and (pointer: coarse) {
  html:not(.hv-light) body.theme-v2 .dk-pcard-more { width: 40px; height: 40px; top: 8px; inset-inline-end: 8px; }
  html:not(.hv-light) body.theme-v2 .dk-pcard-cta { min-height: 42px; }
}
@media (max-width: 520px) {
  html:not(.hv-light) body.theme-v2 .dk-pcard-thumb { height: 80px; }
}

/* ========================================================= 5 card menu */
@keyframes dkWsPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu {
  top: 52px; inset-inline-end: 10px; min-width: 184px; padding: 6px; border: 0; border-radius: 14px; overflow: visible;
  color: var(--v2-text); background: rgba(var(--v2-panel-2-rgb), .98);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 26px 60px -18px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 44px -22px var(--c);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform-origin: top left; animation: dkWsPop var(--v2-fast) var(--v2-ease) both;
}
html[dir="ltr"]:not(.hv-light) body.theme-v2 .dk-pcard-menu { transform-origin: top right; }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--v2-text); font: 500 14px/1.2 'Heebo', system-ui, sans-serif;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor; opacity: .75;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
html:not(.hv-light) body.theme-v2 .dk-pcard-menu [data-act="open"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu [data-act="dup"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E"); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu [data-act="del"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5'/%3E%3C/svg%3E"); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .07); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button:hover::before { opacity: 1; }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button.danger { color: var(--v2-danger); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button.danger:hover { color: var(--v2-danger-hi); background: var(--v2-danger-bg); }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button.danger { margin-top: 4px; position: relative; }
html:not(.hv-light) body.theme-v2 .dk-pcard-menu button.danger::after { /* a hairline above "Delete" */
  content: ""; position: absolute; top: -3px; inset-inline: 8px; height: 1px; background: var(--v2-line);
}

/* ====================================================== 6 empty states */
html:not(.hv-light) body.theme-v2 .dk-pcard-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box;
  padding: clamp(36px, 5vw, 56px) 24px; border-radius: var(--v2-r); color: var(--v2-dim); font-size: 15.5px; line-height: 1.6;
  background: radial-gradient(60% 90% at 50% 0%, rgba(var(--v2-teal-rgb), .07), transparent 70%), rgba(var(--v2-lift-rgb), .012);
  border: 1px dashed rgba(var(--v2-fg-rgb), .14);
}
html:not(.hv-light) body.theme-v2 .dk-pcard-empty-art { display: block; width: 132px; height: 72px; margin-bottom: 12px; }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty-art svg { width: 100%; height: 100%; overflow: visible; }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty-title { margin: 0; color: var(--v2-hi); font-size: 18px; font-weight: 700; }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty-hint { margin: 0 0 12px; color: var(--v2-dim); font-size: 14.5px; }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty a.dk-pcard-empty-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; box-sizing: border-box;
  color: var(--v2-on-teal); font-weight: 700; font-size: 15px; text-decoration: none; background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal));
  box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 32px -14px rgba(var(--v2-teal-rgb), calc(.75 * var(--v2-glow-k)));
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease);
}
html:not(.hv-light) body.theme-v2 .dk-pcard-empty a.dk-pcard-empty-cta:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(190, 255, 245, .8), 0 16px 40px -12px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))), 0 0 50px -14px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))); }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty a.dk-pcard-empty-cta:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
html:not(.hv-light) body.theme-v2 .dk-pcard-empty.dk-pcard-error { border: 0; }

/* ===================================================== 7 projects.html */
html:not(.hv-light) body.theme-v2 .dk-projects-wrap { max-width: 1280px; padding: clamp(32px, 5vw, 60px) clamp(16px, 4vw, 40px) 96px; }
html:not(.hv-light) body.theme-v2 .dk-projects-head { margin-bottom: 26px; }
html:not(.hv-light) body.theme-v2 .dk-projects-head h1 { font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -.024em; line-height: 1.1; }

/* ====================================== 7b a tool's own "my X" list
   (js/projects.js dkToolListShow — builder / sites / quotes / invoices /
   schedules open on it): the projects.html cards under a title in the
   tool's own neon. */
html:not(.hv-light) body.theme-v2 .dk-tool-list { --c: var(--tool, var(--v2-teal-hi)); position: relative; isolation: isolate; min-height: 72vh; color: var(--v2-text); }
html:not(.hv-light) body.theme-v2 .dk-tool-list[data-dk-product] { --c: var(--tool); }
html:not(.hv-light) body.theme-v2 .dk-tool-list::before { /* the tool's light behind the title */
  content: ""; position: absolute; inset: 0 0 auto; height: 380px; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 70% at 50% -10%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%);
}
html:not(.hv-light) body.theme-v2 .dk-tool-list-wrap { max-width: 1280px; padding: clamp(28px, 4.5vw, 56px) clamp(16px, 4vw, 40px) 96px; }
html:not(.hv-light) body.theme-v2 .dk-tool-list-head { align-items: flex-end; gap: 18px 24px; margin-bottom: clamp(22px, 3vw, 32px); }
html:not(.hv-light) body.theme-v2 .dk-tool-list-head h1 { margin: 0; color: var(--v2-hi); font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -.024em; line-height: 1.12; }
html:not(.hv-light) body.theme-v2 .dk-tool-list-count { color: var(--v2-dim); font-size: 14.5px; }
html:not(.hv-light) body.theme-v2 .dk-tool-list-new { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15.5px; font-weight: 700; white-space: nowrap; }
html:not(.hv-light) body.theme-v2 .dk-tool-list-new:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
@media (max-width: 600px) {
  html:not(.hv-light) body.theme-v2 .dk-tool-list-head { flex-direction: column; align-items: stretch; }
  html:not(.hv-light) body.theme-v2 .dk-tool-list-new { width: 100%; }
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-tool-list::before { background: radial-gradient(48% 70% at 50% -10%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); }

/* ================================== 8 motion + accessibility modes */
@media (prefers-reduced-motion: reduce) {
  body.theme-v2 #dk-home-in *, body.theme-v2 #dk-home-in *::before, body.theme-v2 #dk-home-in *::after,
  body.theme-v2 :is(.dk-pcard, .dk-pcard *, .dk-pcard *::before, .dk-pcard *::after, .dk-pcard::after) {
    animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  body.theme-v2 :is(.dk-home-dash-tool, .dk-home-dash-tool-icon, .dk-pcard, .dk-pcard-thumb-icon, .dk-pcard-cta, .dk-pcard-cta::after) { transform: none !important; }
}
html.dka-still body.theme-v2 #dk-home-in *, html.dka-still body.theme-v2 #dk-home-in *::before,
html.dka-still body.theme-v2 :is(.dk-pcard, .dk-pcard *, .dk-pcard *::before) { animation: none !important; }
html.dka-still body.theme-v2 :is(.dk-home-dash-tool, .dk-home-dash-tool-icon, .dk-pcard, .dk-pcard-thumb-icon, .dk-pcard-cta, .dk-pcard-cta::after) { transform: none !important; }
/* Contrast modes: no decorative light; the gradient name becomes plain
   text in the mode's colour, and the travelling ring is gone. */
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 #dk-home-in::before, html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 #dk-home-in::after,
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.dk-home-dash-tool, .dk-pcard, .dk-pcard-thumb)::before,
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.dk-home-dash-tool, .dk-pcard)::after { display: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-home-greet-who { background: none; -webkit-text-fill-color: currentColor; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.dk-pcard, .dk-home-dash-tool) { outline: 1.5px solid currentColor; outline-offset: 0; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-thumb-icon { bottom: 6px; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-body { padding-top: 18px; border-radius: 0 0 var(--v2-r) var(--v2-r); }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-thumb { border-bottom: 1.5px solid currentColor; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.dk-pcard-cta, .dk-pcard-empty-cta) { outline: 1.5px solid currentColor; outline-offset: 0; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-thumb-icon { outline: 1.5px solid currentColor; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.dk-pcard-status, .dk-pcard-menu) { outline: 1px solid currentColor; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-menu button::before { background: currentColor; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-thumb { height: 92px; }

/* ============================================ 9 light theme ("מצב בהיר")
   Tokens: css/theme-v2.css (html.dk-light). White tiles and cards with a
   hairline and a soft lift; the tool colour shows as tint and shadow. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 #dk-home-in::after { background-image: linear-gradient(rgba(11, 16, 32, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 16, 32, .045) 1px, transparent 1px); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 #dk-home-in .dk-home-greet-who { background-image: linear-gradient(100deg, #0f766e 0%, #0d8a7e 50%, #1a66d8 100%); }
html[dir="rtl"].dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 #dk-home-in .dk-home-greet-who { background-image: linear-gradient(260deg, #0f766e 0%, #0d8a7e 50%, #1a66d8 100%); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-home-dash-tool {
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, rgba(11, 16, 32, .06)), 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -14px rgba(15, 23, 42, .2);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-home-dash-tool:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, #fff), #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 20px 36px -22px color-mix(in srgb, var(--c) 75%, transparent), 0 2px 6px rgba(15, 23, 42, .05);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-home-dash-tool-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-home-dash-tool-icon svg { filter: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-home-dash-tool:is(:hover, :focus-visible) .dk-home-dash-tool-icon { box-shadow: inset 0 0 0 1px var(--c), 0 8px 16px -8px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 28px 50px -30px color-mix(in srgb, var(--c) 65%, transparent), 0 2px 6px rgba(15, 23, 42, .05);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard:hover .dk-pcard-thumb { filter: saturate(1.15); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-thumb-icon { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--c) 60%, transparent); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-thumb-icon svg { filter: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard:hover .dk-pcard-thumb-icon { box-shadow: inset 0 0 0 1px var(--c), 0 10px 22px -8px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-more { background: rgba(255, 255, 255, .75); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.dk-pcard-more:hover, .dk-pcard-more[aria-expanded="true"]) { background: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-cta { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, #fff), color-mix(in srgb, var(--c) 5%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 6px 14px -10px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-cta:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #fff), color-mix(in srgb, var(--c) 8%, #fff)); box-shadow: inset 0 0 0 1px var(--c), 0 10px 20px -10px var(--c); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-status.live::before { box-shadow: none; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-empty { background: radial-gradient(60% 90% at 50% 0%, rgba(13, 148, 136, .06), transparent 70%), rgba(255, 255, 255, .6); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .dk-pcard-empty a.dk-pcard-empty-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px -12px rgba(13, 148, 136, .75); }