/* Replica of the Kumu embed of "Miroslav Kostic's Official Portfolio".
   Measurements come from the live embed (October 2026). All text is set in
   Helvetica Neue, the face Kumu's own stack falls back to and the kostic.design
   theme uses; Arial stands in where Helvetica is not installed. */

:root {
  --bg: #fcfcfa;
  --ink: #333;
  --ink-strong: rgba(0, 0, 0, 0.8);
  --muted: #ccc;
  --accent: #428bca;
  --link: rgb(52, 179, 235);
  --outline: #b72a2a;
  --helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui: var(--helvetica);
  --display: var(--helvetica);
  --text: var(--helvetica);
  --sidebar-w: clamp(440px, 45vw, 630px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 14px/20px var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

#app { position: fixed; inset: 0; overflow: hidden; }

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: default;
}
#scene.grabbing { cursor: grabbing; }
#scene.pointer { cursor: pointer; }

/* ---------- search ---------- */

.console {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 260px;
  transition: box-shadow .2s;
}
.console.open {
  right: 0;
  width: auto;
  background: var(--bg);
  box-shadow: 0 0 100px 0 #ccc;
}
.sidebar-open .console:not(.open) { left: var(--sidebar-w); }

.search {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 9px 7px 7px;
  margin: 0;
}
.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 34px;
  color: #555;
  flex: none;
}
.search input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 14px/20px var(--ui);
}
.search input::placeholder { color: #999; opacity: 1; }

.results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(461px, calc(100vh - 60px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.results li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 6px 36px;
  border-left: 3px solid transparent;
  font-size: 16px;
  cursor: pointer;
}
.results li.active { background: #f5f5f5; border-left-color: var(--accent); }
.results .title { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.results .none { color: #999; font-weight: 400; cursor: default; }

/* ---------- toolbars ---------- */

.region.top-right {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toolbar {
  display: flex;
  flex-direction: column;
  width: 40px;
  padding: 6px 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px 0 #eee;
}
.toolbar[hidden] { display: none; }
.tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 29px;
  color: var(--ink);
}
.tb-btn:hover { color: #000; }
.focus-toolbar { padding: 5px 1px; }
.focus-toolbar .focus-step { display: none; }
.focus-toolbar.active .focus-step { display: flex; }
.focus-btn[aria-pressed="true"] { color: var(--accent); }

.tooltip {
  position: absolute;
  z-index: 50;
  padding: 3px 8px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  margin-top: -5px;
  border: 5px solid transparent;
  border-right: 0;
  border-left-color: #000;
}

/* ---------- sidebar ---------- */

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 25;
  width: var(--sidebar-w);
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.sidebar.open { transform: none; }
.sidebar-content {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 40px 10px;
  outline: 0;
}
.sidebar .close {
  position: absolute;
  top: -5px;
  right: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  color: #000;
  font-size: 21px;
  font-weight: 700;
  line-height: 40px;
  opacity: .2;
}
.sidebar .close:hover { opacity: .5; }
/* Full page: left of the close button, same weight and fade. */
.sidebar .full-page {
  position: absolute;
  top: -5px;
  right: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #000;
  opacity: .2;
}
.sidebar .full-page:hover, .sidebar .full-page:focus-visible { opacity: .5; }
.sidebar .full-page[hidden] { display: none; }

.sidebar-toggle {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding-left: 8px;
  color: #aaa;
  visibility: hidden;
}
.sidebar.has-profile .sidebar-toggle { visibility: visible; }
.sidebar-toggle span,
.sidebar-toggle span::before,
.sidebar-toggle span::after {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.sidebar-toggle span { position: relative; }
.sidebar-toggle span::before,
.sidebar-toggle span::after { content: ""; position: absolute; left: 0; }
.sidebar-toggle span::before { top: -6px; }
.sidebar-toggle span::after { top: 6px; }

.selection-toolbar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.selection-toolbar .focus-btn {
  width: 37px;
  height: 35px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar.multi .selection-toolbar { display: none; }

/* profile */
.article { margin-top: 20px; }
.profile-header { margin: 20px 0 18px; }
.profile-header table { width: 100%; border-collapse: collapse; }
.profile-header td { padding: 0; vertical-align: top; }
.profile-header .img-cell { width: 70px; text-align: right; }
.profile-header .title {
  margin: 0 0 5px;
  color: var(--ink-strong);
  font: 700 36px/38px var(--display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.profile-header .subtitle {
  margin: 0;
  color: var(--muted);
  font: 300 16px/20px var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.profile-image {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-left: 10px;
  object-fit: cover;
}

.markdown { color: var(--ink-strong); font: 400 18px/28px var(--text); overflow-wrap: break-word; }
.markdown p { margin: 0 0 20px; }
.markdown img { display: block; max-width: 100%; height: auto; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { color: var(--ink); font-family: var(--display); }
.markdown h1 { margin: 36px 0 8px -2px; font-size: 36px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.markdown h2 { margin: 30px 0 4px -1px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
.markdown h3 { margin: 24px 0 2px -1px; font-size: 24px; line-height: 28.8px; font-weight: 300; letter-spacing: -0.01em; }
.markdown h4, .markdown h5, .markdown h6 { margin: 20px 0 2px; font-size: 20px; line-height: 24px; font-weight: 700; }
.markdown > :first-child { margin-top: 0; }
.markdown ul, .markdown ol { margin: 0 0 20px; padding-left: 30px; }
.markdown li { margin: 0 0 6px; }
.markdown a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.25); text-underline-offset: 3px; }
.markdown a:hover { text-decoration-color: currentColor; }
.markdown blockquote { margin: 0 0 20px; padding-left: 16px; border-left: 3px solid #eee; }
.widget-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.widget-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.details { margin-bottom: 30px; }
.tags { margin: 30px 0; }
.tag {
  display: inline-block;
  margin: 0 6px 3px 0;
  padding: 4px 6px;
  border: 1px solid #eee;
  border-radius: 3px;
  color: #444;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
.tag:hover { border-color: #ddd; background: #fff; }
.attributes { display: flex; flex-direction: column; margin: 0 0 40px; }
.attribute { display: flex; margin: 0 0 10px; }
.attribute .name {
  flex: 0 0 33.333%;
  padding: 6px 15px 0 0;
  font-size: 11px;
  line-height: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.attribute .values { flex: 1; min-width: 0; }
.attribute .values p { margin: 0 0 10px; }
.attribute a { color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
.attribute a:hover { text-decoration: underline; }

/* multiple selection */
.multi-title {
  margin: 30px 0 30px;
  color: var(--ink);
  font: 700 36px/40px var(--display);
  letter-spacing: -0.02em;
  text-align: center;
}
.multi-count { display: flex; align-items: baseline; gap: 6px; }
.multi-count b { font: 700 30px/30px var(--display); letter-spacing: -0.02em; }
.multi-count .clear { color: var(--outline); font-size: 18px; font-weight: 700; padding: 0 6px; }

/* lightbox for profile images */
.sidebar .markdown img, .sidebar .profile-image { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.lightbox figure { position: relative; margin: 0; }
.lightbox img { display: block; max-width: 90vw; max-height: 90vh; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); background: #fff; }
.lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 24px;
  line-height: 36px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.noscript { position: fixed; inset: 40% 0 auto; text-align: center; }

/* ---------- phones: the profile becomes a bottom sheet (Kumu below 768 px) ---------- */
@media (max-width: 767px) {
  :root { --sidebar-w: 100vw; }
  .console { width: calc(100% - 60px); }
  .sidebar-open .console:not(.open) { left: 0; }
  .sidebar {
    top: 30%;
    width: 100%;
    transform: translateY(100%);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  }
  .sidebar.open { transform: none; }
  .sidebar-content { padding: 0 20px calc(10px + env(safe-area-inset-bottom)); }
  .sidebar-toggle {
    top: auto;
    bottom: 100%;
    left: 50%;
    width: 44px;
    height: 24px;
    margin: 0 0 0 -22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar:not(.open) .sidebar-toggle { bottom: calc(100% + env(safe-area-inset-bottom)); }
  .sidebar-toggle span::before { top: 0; left: -8px; }
  .sidebar-toggle span::after { top: 0; left: 8px; }
  .profile-header .title { font-size: 30px; line-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}