/* DOSSIER app shell — rail, header, bottom nav, command palette */

html.dossier-ui {
  --sidebar-w: var(--rail-w);
  --topbar-h: var(--header-h);
}

html.dossier-ui .app-shell {
  display: flex;
  min-height: 100dvh;
  height: 100dvh;
  background: var(--bg);
}

html.dossier-ui .app-shell.landing-hidden {
  display: none !important;
}

/* ── Rail ── */
.dossier-rail {
  width: var(--rail-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--surface-1);
  border-right: 1px solid var(--line);
  z-index: 50;
  transition: width var(--motion-base) var(--ease-out);
  overflow: hidden;
}

.dossier-rail:hover,
.dossier-rail.is-expanded {
  width: var(--rail-w-open);
}

.dossier-rail__brand {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.08em;
  color: var(--signal);
  flex-shrink: 0;
}

.dossier-rail__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
}

.dossier-rail__tools {
  padding: 8px 6px 12px;
  border-top: 1px solid var(--line);
}

.dossier-rail__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.dossier-rail__btn .syntax-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.dossier-rail__btn span.dossier-rail__label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--motion-fast) var(--ease-out);
}

.dossier-rail:hover .dossier-rail__btn span.dossier-rail__label,
.dossier-rail.is-expanded .dossier-rail__btn span.dossier-rail__label {
  opacity: 1;
}

.dossier-rail__btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.dossier-rail__btn.active {
  background: var(--signal-dim);
  border-color: color-mix(in srgb, var(--signal) 35%, transparent);
  color: var(--text);
}

.dossier-rail__section {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 10px 4px;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}

.dossier-rail:hover .dossier-rail__section,
.dossier-rail.is-expanded .dossier-rail__section {
  opacity: 1;
}

/* phone ≤767 */
@media (max-width: 767px) {
  .dossier-rail {
    display: none !important;
  }
}

/* tablet 768–1023: rail visible, no bottom nav */
@media (min-width: 768px) and (max-width: 1023px) {
  html.dossier-ui .app-main {
    padding-bottom: 0;
  }
}

/* ── Main column ── */
html.dossier-ui .app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
}

@media (min-width: 768px) {
  html.dossier-ui .app-main {
    padding-bottom: 0;
  }
}

html.dossier-ui .dossier-topbar {
  min-height: var(--header-h);
  padding: 0 12px;
  padding-top: var(--safe-top);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

@media (min-width: 768px) {
  html.dossier-ui .dossier-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
  }
}

.dossier-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dossier-topbar__brand strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dossier-topbar__kicker {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

html.dossier-ui .topbar-search {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

@media (min-width: 768px) {
  html.dossier-ui .topbar-search {
    grid-column: 2;
  }
}

html.dossier-ui .search-recent-row {
  order: unset;
  position: static;
  grid-column: 1 / -1;
  flex: unset;
  padding: 0;
  gap: 6px;
}

@media (min-width: 768px) {
  html.dossier-ui.syntax-macos .search-recent-row {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    background: transparent;
    border-bottom: none;
    padding: 0;
  }
}

html.dossier-ui .search-recent-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
  max-width: 140px;
}

html.dossier-ui .search-recent-chip:hover {
  background: var(--surface-3);
  color: var(--text);
}

html.dossier-ui .search-wrapper {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 44px;
}

html.dossier-ui #searchBtn.search-btn {
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html.dossier-ui .search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: var(--text-md) !important;
  font-family: var(--font-mono) !important;
  min-height: 42px;
}

html.dossier-ui .search-icon {
  color: var(--text-muted);
}

html.dossier-ui .topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

html.dossier-ui .topbar-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

html.dossier-ui .topbar-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

html.dossier-ui .topbar-btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

html.dossier-ui .topbar-kbd-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 2px 6px;
  margin-left: 4px;
}

@media (max-width: 767px), (pointer: coarse) {
  html.dossier-ui .topbar-kbd-hint {
    display: none;
  }
}

html.dossier-ui .header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: var(--text-secondary);
}

html.dossier-ui .tag-online {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--status-ok);
  border: 1px solid color-mix(in srgb, var(--status-ok) 35%, transparent);
  padding: 2px 6px;
}

/* ── Bottom nav ── */
.dossier-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  min-height: var(--bottom-nav-h);
  padding-bottom: var(--safe-bottom);
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 767px) {
  body.in-app .dossier-bottom-nav {
    display: grid;
  }
}

@media (min-width: 768px) {
  .dossier-bottom-nav {
    display: none !important;
  }
}

.dossier-bottom-nav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--bottom-nav-h);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.dossier-bottom-nav__btn .syntax-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.dossier-bottom-nav__btn.active {
  color: var(--signal);
}

html.keyboard-open .dossier-bottom-nav {
  transform: translateY(100%);
  pointer-events: none;
  transition: transform var(--motion-base) var(--ease-out);
}

/* ── More sheet ── */
.dossier-more-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform var(--motion-base) var(--ease-out);
}

.dossier-more-sheet.is-open {
  transform: translateY(0);
}

.dossier-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: color-mix(in srgb, var(--bg) 40%, black);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out);
}

.dossier-more-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dossier-more-sheet h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.dossier-more-sheet .dossier-rail__btn {
  margin-bottom: 4px;
}

/* ── Graph stage tweaks ── */
html.dossier-ui .graph-stage {
  background:
    linear-gradient(color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto;
}

html.dossier-ui .graph-stage::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px color-mix(in srgb, var(--bg) 30%, black);
}

html.dossier-ui #graph-canvas {
  position: relative;
  z-index: 1;
}

/* Icons */
.syntax-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}

.syntax-icon svg {
  width: 1.125em;
  height: 1.125em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}