/* ============================================================
   NocTel Desk — mockup kit
   Real N7 design tokens, lifted from ~/Dev/noctel-desk/src/styles
   (_brand-tokens.scss, _typography.scss, desk-item-preview.component.scss).
   Namespaced under .ndk so it never collides with marketing-page tokens.
   ============================================================ */
.ndk {
  --ndk-mat:         #ECEAE4;            /* --card-accent-bg : cream Desk mat */
  --ndk-tile:        #F9F9F7;            /* desk-item soft-white tile         */
  --ndk-white:       #FFFFFF;
  --ndk-icon-pill:   rgba(9,21,36,0.06); /* runtime .desk-item-icon bg        */
  --ndk-border:      rgba(9,21,36,0.12);
  --ndk-text:        #091524;            /* light-text-primary                */
  --ndk-text-2:      #4D4F47;            /* light-text-secondary              */
  --ndk-muted:       rgba(9,21,36,0.42); /* desk-item-context                 */
  --ndk-blue:        #2A528E;            /* brand-blue                        */
  --ndk-blue-light:  #38B6FF;
  --ndk-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  /* the exact 5-layer Desk card hover shadow */
  --ndk-hover-shadow:
    9px 8px 3px 0 rgba(0,0,0,0),
    6px 5px 3px 0 rgba(0,0,0,0.03),
    3px 3px 3px 0 rgba(0,0,0,0.08),
    1px 1px 2px 0 rgba(0,0,0,0.14),
    0   0   1px 0 rgba(0,0,0,0.17);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  color: var(--ndk-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Desk panel (the cream mat) ─────────────────────────────── */
.ndk-panel {
  background: var(--ndk-mat);
  border-radius: 16px;
  padding: 18px;
  width: 100%;
  box-shadow: 0 30px 60px -20px rgba(9,21,36,0.50);
}
.ndk-head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--ndk-border);
}
.ndk-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(150deg, #2A528E, #1E3F6E);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.ndk-mark i { width: 11px; height: 11px; border-radius: 3px; background: var(--ndk-blue-light); display: block; }
.ndk-wordmark { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ndk-text); }
.ndk-wordmark small { font-weight: 500; color: var(--ndk-muted); margin-left: 6px; }

/* ── Tile grid ──────────────────────────────────────────────── */
.ndk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 0; }
.ndk-head + .ndk-grid { margin-top: 16px; }
.ndk-tile {
  background: var(--ndk-tile);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  transition: box-shadow .2s var(--ndk-ease), transform .2s var(--ndk-ease);
}
.ndk-tile:hover { box-shadow: var(--ndk-hover-shadow); transform: translateY(-1px); }
.ndk-tile-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ndk-icon-pill);
  display: flex; align-items: center; justify-content: center;
}
/* Lucide icon style: 24 viewBox, 2px stroke, round caps/joins, no fill */
.ndk-tile-icon svg { width: 17px; height: 17px; stroke: var(--ndk-blue); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ndk-tile-label { font-size: 13px; font-weight: 500; color: var(--ndk-text); line-height: 1.25; }

/* ── Add tile (dashed — the one intentional border) ─────────── */
.ndk-add {
  margin-top: 10px;
  border: 1px dashed var(--ndk-border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ndk-muted);
}