/* css/focusLaneStyle.css
   Mobile focus-lane view (js/focusLaneView.js). New .focus-lane-*
   component classes only, built entirely on shared.css's existing OKLCH
   tokens -- no new palette. Loaded alongside flowDiagramStyle.css;
   harmless when unused since every selector here is scoped under
   .focus-lane-root, which js/focusLaneView.js is the only thing that
   ever creates.
*/

.focus-lane-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 60vh;
  font-family: var(--font-base);
  color: var(--text-base);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.focus-lane-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.focus-lane-back {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-base);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.focus-lane-back:disabled { opacity: 0.35; cursor: default; }
.focus-lane-back:not(:disabled):hover { border-color: var(--accent-border); }

.focus-lane-titles { min-width: 0; flex: 1; }
.focus-lane-eyebrow {
  margin: 0 0 1px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.focus-lane-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.focus-lane-strip-wrap {
  flex: none;
  position: relative;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-subtle);
}
.focus-lane-strip-wrap.overflowing::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--surface-subtle) 82%);
  pointer-events: none;
}
.focus-lane-strip {
  display: flex;
  gap: 5px;
  padding: 8px 12px 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.focus-lane-dot {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
}
.focus-lane-dot:hover { border-color: var(--accent-border); }
.focus-lane-dot.active {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--surface);
}

.focus-lane-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 16px 8px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.focus-lane-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: start;
  min-height: 38px;
  /* .focus-lane-timeline is a flex column; without this, flex-shrink's
     default of 1 squashes every row to its min-height instead of letting
     the container scroll, and content spills into the row below. Found
     live while validating the standalone mockup this was ported from. */
  flex: 0 0 auto;
}

.focus-lane-spine { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.focus-lane-spine-line { width: 2px; flex: 1; background: var(--border-soft); }
.focus-lane-spine-dot {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}

/* min-width: 0 overrides the browser default of min-width: auto (i.e.
   "never smaller than my content's own natural width") -- without it,
   a nowrap actor-name pill wider than its column silently forces the
   *grid track itself* wider to fit, which starved the other column and
   let the pill visually escape the card entirely on real actor names.
   Every level between the grid item and the truncating text needs this,
   not just the outermost one, or the auto-min just reappears one level
   down. Found live against real flow data (long Dutch actor names). */
.focus-lane-side { display: flex; flex-direction: column; gap: 8px; padding: 3px 0; min-width: 0; }
.focus-lane-side.left { align-items: flex-end; margin-right: 6px; }
.focus-lane-side.right { align-items: flex-start; margin-left: 6px; }

.focus-lane-chip { display: flex; flex-direction: column; gap: 4px; max-width: 100%; min-width: 0; width: 100%; }
.focus-lane-side.left .focus-lane-chip { align-items: flex-end; }
.focus-lane-side.right .focus-lane-chip { align-items: flex-start; }

.focus-lane-chip-nav {
  font: inherit;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.focus-lane-chip-nav:hover { background: var(--accent-soft-hover); }
.focus-lane-chip-nav .code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.focus-lane-chip-nav .chev { font-size: 12px; line-height: 1; }

.focus-lane-chip-body {
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 7px 10px;
  cursor: default;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.focus-lane-side.left .focus-lane-chip-body { border-right: 3px solid var(--border); }
.focus-lane-side.right .focus-lane-chip-body { border-left: 3px solid var(--border); }
.focus-lane-side.left .focus-lane-chip.role-out .focus-lane-chip-body { border-right-color: var(--accent-border); }
.focus-lane-side.right .focus-lane-chip.role-out .focus-lane-chip-body { border-left-color: var(--accent-border); }
.focus-lane-chip-body.expandable { cursor: pointer; }
.focus-lane-chip-body.expandable:active { background: var(--surface-subtle); }
.focus-lane-chip-body .dir {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-right: 3px;
}
.focus-lane-chip-body .snippet {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.focus-lane-chip-body.expanded .snippet {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.focus-lane-chip-body .more {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  margin-top: 3px;
}

.focus-lane-self-note {
  font-size: 12px;
  font-style: italic;
  color: var(--text-tertiary);
  padding: 6px 2px;
}

@keyframes focusLaneLanded {
  0% { box-shadow: 0 0 0 0 var(--accent-border); transform: scale(1); }
  15% { box-shadow: 0 0 0 5px var(--accent-border); transform: scale(1.035); }
  60% { box-shadow: 0 0 0 5px var(--accent-border); transform: scale(1.035); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}
.focus-lane-chip.landed .focus-lane-chip-body,
.focus-lane-chip.landed .focus-lane-chip-nav {
  animation: focusLaneLanded 1.8s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .focus-lane-chip.landed .focus-lane-chip-body,
  .focus-lane-chip.landed .focus-lane-chip-nav {
    animation: none;
    box-shadow: 0 0 0 5px var(--accent-border);
  }
}

.focus-lane-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-base);
}