/*
 * Component contracts (button, form, card, badge, table, nav and modal)
 * are populated only as a pilot selector is migrated. This avoids changing
 * pages outside #/screen by accident.
 */
.ui-button{min-height:var(--control-sm);border-radius:var(--radius-sm);font:inherit}
.ui-field{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.ui-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.ui-badge{border-radius:999px}
.ui-modal{border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-lg)}

/* L5 shell primitive: first keyboard stop bypasses persistent navigation and
   lands on the dynamic #app region without changing route rendering. */
.skip-link{
  position:fixed;z-index:600;top:var(--ivc-comp-skip-offset);left:50%;
  max-inline-size:calc(100% - var(--ivc-comp-skip-gutter) - var(--ivc-comp-skip-gutter));
  padding:var(--ivc-comp-skip-padding-block) var(--ivc-comp-skip-padding-inline);
  transform:translate(-50%,-160%);border-radius:var(--ivc-comp-skip-radius);
  background:var(--ivc-comp-skip-background);box-shadow:var(--ivc-comp-skip-shadow);
  color:var(--ivc-comp-skip-text);font:var(--ivc-comp-skip-font);text-align:center;
  text-decoration:none;transition:transform var(--ivc-comp-skip-transition) var(--ui-ease)
}
.skip-link:focus-visible{
  transform:translate(-50%,0);outline:3px solid var(--ivc-comp-skip-focus);outline-offset:3px
}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* L3 pilot: the global header is the first existing surface to consume the
   reference -> semantic -> component token chain defined in tokens.css. */
.top{
  background:var(--ivc-comp-header-background);
  border-bottom-color:var(--ivc-comp-header-border);
  box-shadow:var(--ivc-comp-header-shadow)
}
.top-inner{
  height:var(--ivc-comp-header-height);
  padding-inline:var(--ivc-comp-header-inline-padding);
  gap:var(--ivc-comp-header-gap)
}
.nv-b{
  height:var(--ivc-comp-nav-height);
  padding-inline:var(--ivc-comp-nav-inline-padding);
  border-radius:var(--ivc-comp-nav-radius);
  font-family:var(--ivc-comp-nav-font);
  color:var(--ivc-comp-nav-text)
}
.nv-b:hover,.nv.open .nv-b{
  background:var(--ivc-comp-nav-hover-background);
  color:var(--ivc-comp-nav-hover-text)
}
.nv.active .nv-b,.nv-b.solo.active{color:var(--ivc-comp-nav-hover-text)}
.nv.active::after,.nv-b.solo.active::after{background:var(--ivc-comp-nav-active-indicator)}
.searchbar input{
  background:var(--ivc-comp-search-background);
  border-color:var(--ivc-comp-search-border)
}
.searchbar input:focus{border-color:var(--ivc-comp-search-focus)}

/* #/screen comparison selector: square control, SVG state and no layout shift. */
.screen-view .ui-select-tool{
  width:var(--control-sm);height:var(--control-sm);min-width:var(--control-sm);min-height:var(--control-sm);
  display:inline-grid;place-items:center;border-radius:var(--radius-sm);
  border:1px solid var(--ui-border-strong);background:var(--color-surface);
  color:var(--color-text-secondary);box-shadow:none
}
.screen-view .ui-select-tool:hover{
  border-color:var(--ui-selection-border);background:var(--ui-primary-tint);
  color:var(--ui-primary-strong)
}
.screen-view .ui-select-tool.on{
  border-color:var(--ui-selection-border);background:var(--ui-selection-bg);
  color:var(--ui-primary-strong);box-shadow:none
}
.screen-view .ui-select-tool svg{width:18px;height:18px;display:block;stroke-width:1.9}

/* #/screen mode switch: mode is a circular control, not a segmented tab. */
.screen-view .scr-tabs{
  gap:var(--space-2);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
}
.screen-view .st-btn.ui-mode-circle{
  width:56px;height:56px;min-width:56px;min-height:56px;padding:0;border:1px solid var(--ui-border-strong);
  border-radius:50%;background:var(--color-surface);color:var(--color-text-secondary);
  font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);box-shadow:none
}
.screen-view .st-btn.ui-mode-circle:hover{border-color:var(--ui-selection-border);background:var(--ui-primary-tint);color:var(--ui-primary-strong)}
.screen-view .st-btn.ui-mode-circle.on{
  border-color:var(--ui-selection-border);background:var(--ui-selection-bg);color:var(--ui-primary-strong);
  font-weight:var(--font-weight-semibold);box-shadow:var(--ui-selection-shadow)
}
html[data-theme="bright"] .screen-view .st-btn.ui-mode-circle{border-radius:50%}

/* #/g OpenFreeMap: the vector map replaces the fallback only after MapLibre loads. */
.geo-map-stage .geo-openfree-map{position:absolute;z-index:1;inset:0;visibility:hidden;opacity:0;background:var(--ui-surface-subtle)}
.geo-map-stage .geo-map-fallback{display:grid;place-items:center;width:100%;height:100%}
.geo-map-stage.map-ready{cursor:default;touch-action:auto}
.geo-map-stage.map-ready .geo-openfree-map{visibility:visible;opacity:1}
.geo-map-stage.map-ready .geo-map-fallback{visibility:hidden;opacity:0;pointer-events:none}
.geo-map-stage.map-ready .geo-map-scale{display:none}
.geo-map-status{
  position:absolute;z-index:5;left:50%;bottom:14px;max-width:calc(100% - 108px);margin:0;padding:7px 10px;
  transform:translateX(-50%);border:1px solid var(--ui-border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--ui-surface) 94%,transparent);
  color:var(--ui-text-muted);font-size:var(--font-size-xs);line-height:1.35;pointer-events:none;text-align:center
}
.geo-openfree-map .maplibregl-ctrl-group{border:1px solid var(--ui-border);box-shadow:var(--shadow-sm)}
.geo-openfree-map .maplibregl-ctrl button{width:40px;height:40px}
.geo-openfree-map .maplibregl-ctrl-attrib{font-size:10px}
.screen-candidate-data {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

/* Company market section: preserve the existing no-data presentation without
   keeping layout declarations in the dynamically rendered HTML. */
.company-page .company-market-empty-state{
  min-height:180px;display:grid;place-items:center;text-align:center;padding:24px
}

/* Company-page positioning cards: a long scope badge must reflow inside the
   card instead of squeezing the title into one character per line. */
.company-page .pos-top{align-items:flex-start;flex-wrap:wrap}
.company-page .pos-chain{flex:1 1 160px;overflow-wrap:anywhere}
.company-page .pos-stage{
  flex:0 1 auto;max-inline-size:100%;white-space:normal;overflow-wrap:anywhere;
  line-height:1.35;text-align:center
}

/* Company market chart: retain the existing two-column hierarchy when there
   is room, then collapse before either column can force page-level overflow. */
.company-page .cms-body{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr)}
.company-page .cms-chart{overflow:hidden}
.company-page .cms-chart-tooltip{white-space:normal;justify-content:center;flex-wrap:wrap;line-height:1.35}
.company-page .cms-chart-tooltip span{padding-right:0;border-right:0}
@media (max-width:1100px){
  .company-page .cms-body{grid-template-columns:1fr}
}