/* ==========================================================================
   Kito — canonical product-shot window (.k-win)
   The ONE app-chrome component every product shot should sit inside:
   the exact sidebar from the flow-builder shot (shots/designed/flow-builder/
   flow.css / flow.html), plus a single-surface window frame — one hairline
   border, one soft shadow, no nested frames, no outer paper margin.

   Self-contained: local custom properties mirror /assets/kds/tokens.css so
   this partial has no external CSS dependency (only the KITO wordmark SVG
   loads from the live site, same convention as the other shot partials).

   Usage:
     <div class="k-win" data-active="flows"> ... sidebar markup (unchanged,
       copy verbatim from window.html) ... <div class="k-win__content"> — drop
       one of the content-slot shots here, at 1300×880 CSS px (2600×1760 @2x)
       — no cropping/scaling needed, it is sized to match exactly.
     </div></div>

   Parameterise the active nav item with data-active="home|products|work|
   flows|trends|knowledge|destinations|connections|performance" on .k-win.
   ========================================================================== */

.k-win {
  --k-paper: #F7F7F4;
  --k-surface: #FFFFFF;
  --k-ink: #26251E;
  --k-ink-2: #77766F;
  --k-ink-3: #A09F9B;
  --k-border-subtle: #E6E5DF;
  --k-rust: #BB3D13;
  --k-radius-sm: 10px;
  --k-radius-win: 14px;
  --k-font: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, sans-serif;

  all: initial;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 200px 1fr;
  font-family: var(--k-font);
  color: var(--k-ink);
  background: var(--k-surface);
  border-radius: var(--k-radius-win);
  border: 1px solid rgba(38, 37, 30, 0.1);
  box-shadow: 0 24px 56px -20px rgba(38, 37, 30, 0.28);
  overflow: hidden;
}
.k-win, .k-win *, .k-win *::before, .k-win *::after { box-sizing: border-box; }
.k-win svg { display: block; }

/* Sidebar — copied verbatim from .k-flow__sidebar (flow-builder asset) --- */
.k-win__sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 26px 20px;
  background: var(--k-paper);
  border-right: 1px solid var(--k-border-subtle);
}
.k-win__wordmark { width: 58px; height: 16px; margin-left: 2px; }
.k-win__wordmark img { display: block; width: 100%; height: 100%; }
.k-win__nav { display: flex; flex-direction: column; gap: 2px; }
.k-win__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--k-radius-sm);
  font-size: 13px;
  color: var(--k-ink-3);
  letter-spacing: 0.01em;
}
.k-win__nav-item svg { width: 15px; height: 15px; flex: none; opacity: 0.7; }
.k-win__nav-spacer { flex: 1; }
.k-win__nav-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--k-border-subtle); }

/* Active state — parameterised via [data-active] on .k-win, matched to
   [data-nav] on the corresponding item, instead of a hardcoded modifier
   class. Exactly mirrors .k-flow__nav-item--active's visual treatment. */
.k-win[data-active="home"] [data-nav="home"],
.k-win[data-active="products"] [data-nav="products"],
.k-win[data-active="work"] [data-nav="work"],
.k-win[data-active="flows"] [data-nav="flows"],
.k-win[data-active="trends"] [data-nav="trends"],
.k-win[data-active="knowledge"] [data-nav="knowledge"],
.k-win[data-active="destinations"] [data-nav="destinations"],
.k-win[data-active="connections"] [data-nav="connections"],
.k-win[data-active="performance"] [data-nav="performance"] {
  background: var(--k-surface);
  color: var(--k-ink);
  box-shadow: 0 1px 3px rgba(38, 37, 30, 0.07);
}
.k-win[data-active="home"] [data-nav="home"] svg,
.k-win[data-active="products"] [data-nav="products"] svg,
.k-win[data-active="work"] [data-nav="work"] svg,
.k-win[data-active="flows"] [data-nav="flows"] svg,
.k-win[data-active="trends"] [data-nav="trends"] svg,
.k-win[data-active="knowledge"] [data-nav="knowledge"] svg,
.k-win[data-active="destinations"] [data-nav="destinations"] svg,
.k-win[data-active="connections"] [data-nav="connections"] svg,
.k-win[data-active="performance"] [data-nav="performance"] svg {
  opacity: 1;
  color: var(--k-rust);
}

/* Content slot — the ONLY place a shot's own content goes. No border, no
   shadow, no radius here: the window itself is the single surface/frame. */
.k-win__content {
  position: relative;
  width: 1300px;
  height: 880px;
  overflow: hidden;
  background: var(--k-surface);
}
.k-win__content > img,
.k-win__content > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}