/* Site-specific product screenshot styles, separate from ui_kit.css
   to avoid style object collisions. These render miniature, stylized
   representations of the app for use inline in the marketing page. */

.mini-app {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #F1F1F3 0%, #E6E6E9 100%);
  font-family: var(--font-sans-chrome);
  color: #18181B;
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;
  overflow: hidden;
}
.mini-titlebar {
  height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}
.mini-traffic { display: flex; gap: 6px; }
.mini-traffic span { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.12); }
.mini-traffic span:nth-child(1) { background: #FF5F57; }
.mini-traffic span:nth-child(2) { background: #FEBC2E; }
.mini-traffic span:nth-child(3) { background: #28C840; }
.mini-toolbar-cluster {
  margin-left: auto;
  display: inline-flex;
  background: rgba(255,255,255,0.75);
  border-radius: 999px;
  padding: 3px 5px;
  box-shadow: 0 0 0 0.5px rgba(15,15,17,0.08);
  gap: 4px;
  align-items: center;
  font: 500 10px/1 var(--font-sans-chrome);
  color: #4B4B52;
}
.mini-toolbar-cluster button {
  padding: 4px 8px;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.mini-toolbar-cluster button.on { background: rgba(15,15,17,0.06); color: #18181B; }

.mini-body {
  flex: 1; display: flex; gap: 6px; padding: 0 6px 6px; min-height: 0;
}

.mini-panel {
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 10px;
  box-shadow:
    0 0 0 0.5px rgba(15,15,17,0.08),
    0 1px 2px rgba(15,15,17,0.04),
    0 8px 18px -8px rgba(15,15,17,0.14);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Navigator */
.mini-nav { width: 22%; flex-shrink: 0; padding: 8px 6px; }
.mini-nav-title {
  font: 500 8px/1 var(--font-sans-chrome);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #87878F;
  padding: 6px 8px 4px;
}
.mini-nav-item {
  display: flex; align-items: center; gap: 5px;
  font: 400 10px/1.2 var(--font-sans-chrome);
  color: #18181B;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-nav-item.sel { background: rgba(31,111,106,0.10); color: #1F6F6A; font-weight: 500; }
.mini-nav-item.child { padding-left: 16px; }
.mini-nav-item.child2 { padding-left: 24px; }
.mini-nav-chev {
  width: 8px; height: 8px; opacity: 0.5; flex-shrink: 0;
}
.mini-nav-dot {
  width: 4px; height: 4px; border-radius: 50%; background: #87878F; flex-shrink: 0;
}

/* Editor */
.mini-editor { flex: 1; padding: 14px 24px; min-width: 0; }
.mini-bread {
  font: 400 9px/1 var(--font-sans-chrome);
  color: #87878F;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,15,17,0.05);
  margin: -4px -16px 12px;
  padding-left: 16px; padding-right: 16px;
}
.mini-chap {
  font: 500 10px/1 var(--font-sans-chrome);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #87878F;
  margin-bottom: 6px;
}
.mini-title {
  font: 500 16px/1.1 var(--font-serif-classical);
  color: #18181B;
  margin-bottom: 14px;
}
.mini-prose {
  font: 400 10px/1.55 var(--font-serif);
  color: #18181B;
}
.mini-prose p { margin: 0 0 8px; }
.mini-prose .hl { background: rgba(201,167,101,0.25); border-radius: 2px; padding: 0 2px; }
.mini-prose .hl-sug { background: rgba(138,160,116,0.25); }
.mini-prose .hl-q { background: rgba(123,143,184,0.22); }

/* Inspector */
.mini-insp { width: 24%; flex-shrink: 0; padding: 8px; }
.mini-insp-tabs {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(15,15,17,0.04);
  border-radius: 7px;
  margin-bottom: 8px;
}
.mini-insp-tabs button {
  flex: 1; padding: 4px 0;
  font: 500 9px/1 var(--font-sans-chrome);
  color: #4B4B52;
  border-radius: 5px;
}
.mini-insp-tabs button.on { background: white; color: #18181B; box-shadow: 0 0 0 0.5px rgba(15,15,17,0.08); }
.mini-insp-card {
  background: rgba(15,15,17,0.04);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.mini-insp-h {
  font: 500 8px/1 var(--font-sans-chrome);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #87878F;
  margin-bottom: 6px;
}
.mini-insp-row {
  display: flex; align-items: center; justify-content: space-between;
  font: 400 10px/1.2 var(--font-sans-chrome);
  color: #18181B;
  padding: 3px 0;
}
.mini-insp-row .m { color: #87878F; font-size: 9px; }
.mini-bar {
  width: 100%; height: 3px; border-radius: 999px;
  background: rgba(15,15,17,0.08);
  overflow: hidden;
  margin-top: 2px;
}
.mini-bar > span { display: block; height: 100%; background: #1F6F6A; border-radius: 999px; }

/* Annotation margin (right of editor) */
.mini-ann {
  position: absolute;
  right: 9px;
  width: 140px;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 7px 9px;
  font: 400 9px/1.35 var(--font-sans-chrome);
  box-shadow:
    0 0 0 0.5px rgba(15,15,17,0.08),
    0 2px 4px rgba(15,15,17,0.04),
    0 8px 18px -6px rgba(15,15,17,0.14);
  z-index: 3;
}
.mini-ann-h {
  display: flex; align-items: center; gap: 5px;
  font: 500 8px/1 var(--font-sans-chrome);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #4B4B52;
  margin-bottom: 4px;
}
.mini-ann-dot { width: 7px; height: 7px; border-radius: 50%; }
.mini-ann-body { color: #18181B; }

/* Status bar */
.mini-status {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  height: 22px;
  font: 400 9px/1 var(--font-mono);
  color: #4B4B52;
  letter-spacing: 0.04em;
}
.mini-status-pill {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(46,139,87,0.15);
  color: #1E6B3F;
  font-weight: 500;
}
.mini-status .sp { flex: 1; }